/* ===== PRODUCT DETAIL PAGE =====
 * Loaded only on /products/<slug>/ pages, after style.css.
 * Reuses tokens from style.css (--green-*, --wood-*, --r, --shadow-*, etc).
 */

/* NOTE (bug fix): this file used to carry `.header-contact { margin-left: auto; }` with the
   comment "Header on product pages has no search box — push contact + lang right." That stopped
   being true when the header search box was added to product pages (and to category.html, which
   also loads this stylesheet): style.css already gives `.header-search-slot` a `margin-left: auto`,
   and a flex line with TWO auto left-margins splits the free space evenly between them — so the
   search box floated in from the left with a gap in front of it, and the contact block sat short
   of the right edge. On index.html (which does not load product.css) the same header rendered
   correctly, which is why the two looked different. Removing the rule here restores a single auto
   margin, so the search box gets all the free space and contact + lang pin to the right edge,
   identical to the homepage. */

/* ===== BREADCRUMB ===== */
.breadcrumb {
  padding: 16px 0 0;
  font-size: 0.82rem;
  color: var(--muted-foreground);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.breadcrumb a { color: var(--muted-foreground); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .crumb-sep { margin: 0 6px; opacity: 0.5; }
.breadcrumb .crumb-current { color: var(--foreground); font-weight: 600; }

/* ===== LAYOUT ===== */
.product-page { padding: 18px 0 64px; }
.product-layout {
  display: grid;
  grid-template-columns: 420px 1fr 300px;
  gap: 32px;
  align-items: start;
  margin-top: 18px;
}

/* ===== GALLERY (left) ===== */
.gallery { position: sticky; top: calc(var(--header-h) + 20px); }
.gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--muted);
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.gallery-main-img {
  position: absolute;
  inset: 0;
  transition: transform 0.18s ease-out;
  transform-origin: center;
  will-change: transform;
}
/* z-index: the stock badge is emitted BEFORE `.gallery-main-img` in the markup, and that image
   is `position: absolute; inset: 0` — with both un-layered, the image painted over the badge and
   the stock label was invisible on every product page. */
.gallery-main .card-stock-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--muted);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gallery-thumb img,
.gallery-thumb .thumb-swatch { width: 100%; height: 100%; display: block; }
.gallery-thumb:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.gallery-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-ring); }

/* ===== INFO (center) ===== */
.product-info-main { min-width: 0; }
.product-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}
.meta-pill.grade-pill { background: var(--muted); color: var(--muted-foreground); }
/* Stock pills reuse the .badge-* classes the cards use, but as soft/tinted variants rather
   than solid fills — `.card-stock-badge` (style.css) supplies the solid version. */
.meta-pill.stock-pill { border-color: transparent; font-weight: 700; }
.meta-pill.stock-pill.badge-in { background: var(--primary-subtle); color: var(--primary-hover); }
.meta-pill.stock-pill.badge-low { background: oklch(0.62 0.145 62 / 0.14); color: oklch(0.5 0.13 62); }
.meta-pill.stock-pill.badge-order { background: oklch(0.55 0.09 255 / 0.14); color: oklch(0.47 0.1 255); }

.product-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--foreground);
  line-height: 1.2;
  margin-bottom: 8px;
}
/* Product subtitle - easy to revert: only rendered when a product has a `name` field distinct from
 * its `label` (see `${p.name ? ...}` in pageHTML(), build-products.js) — shows the wood species
 * (`label`) as a subdued line under the prominent `<h1 class="product-title">` (which shows `name`
 * in that case). Products without a `name` are completely unaffected; their `<h1>` still shows
 * `label` directly, exactly as before. To revert, delete this rule and the one line in
 * build-products.js that emits `<p class="product-subtitle">`, then re-run `node build-products.js`. */
.product-subtitle { font-size: 1rem; color: var(--muted-foreground); margin-bottom: 10px; }
.product-dims-line {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.product-price-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.product-price-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); }
.product-price-unit { font-size: 0.85rem; color: var(--muted-foreground); font-weight: 600; }

/* ===== SIZE SELECTOR - easy to revert =====
 * Only used on products with a `variants` array in products-data.js (currently just the
 * flooring spruce/pine SKU). Delete this block (and the matching JS/HTML wiring in
 * build-products.js) to fully remove the feature — the original .product-price-block /
 * .product-dims-line rules above are untouched and still apply to every other product. */
.size-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.size-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.size-option:hover { border-color: var(--border-strong); background: var(--accent); }
/* Reset the site-wide input{width:100%;padding;border;appearance:none} rule (style.css, meant
 * for text-style form fields) so this radio renders as a normal small circle, not a blank box. */
.size-option input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.size-option-dims { flex: 1; font-size: 0.88rem; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
.size-option-price { font-size: 0.95rem; font-weight: 800; color: var(--foreground); white-space: nowrap; }
.size-option-unit { font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground); }
.size-option:has(input:checked) { border-color: var(--primary); background: var(--primary-subtle); box-shadow: 0 0 0 1px var(--primary); }
.size-select-note { font-size: 0.76rem; color: var(--muted-foreground); margin-bottom: 20px; }
/* ===== END SIZE SELECTOR ===== */

/* Pricing note - easy to revert: rendered on EVERY product-detail page directly below the
 * sizes/price block (see PRICING_NOTE + dimsPriceHTML in build-products.js). Purely additive —
 * delete this rule and the two `<p class="pricing-note">` lines in build-products.js (then re-run
 * `node build-products.js`) to remove it; nothing else depends on it. Not used on homepage
 * product cards. */
.pricing-note { font-size: 0.76rem; color: var(--muted-foreground); margin-bottom: 20px; line-height: 1.55; }

.product-short-desc { color: var(--muted-foreground); margin-bottom: 28px; line-height: 1.7; }

.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table th, .specs-table td { text-align: left; padding: 11px 14px; font-size: 0.88rem; vertical-align: top; }
.specs-table th { color: var(--muted-foreground); font-weight: 500; width: 40%; }
.specs-table td { color: var(--foreground); font-weight: 600; }
.specs-table tr:nth-child(odd) { background: var(--muted); }

/* Size selection - easy to revert: tidy per-group layout for the "ხელმისაწვდომი ზომები" specs
 * row (products with `variants`/`sizeOptions`) — replaces the old plain "A / B / C — price<br>..."
 * run-on text. Delete this block to fall back to default text styling. */
.spec-size-list { display: flex; flex-direction: column; gap: 6px; }
.spec-size-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.spec-size-list li:not(:last-child) { padding-bottom: 6px; border-bottom: 1px dashed var(--border-strong); }
.spec-size-dims { font-variant-numeric: tabular-nums; }
.spec-size-price { color: var(--foreground); font-weight: 800; white-space: nowrap; }

.product-section { margin-bottom: 32px; }
.product-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.product-section p { color: var(--muted-foreground); line-height: 1.7; }
.product-checklist { display: flex; flex-direction: column; gap: 9px; }
.product-checklist li { display: flex; gap: 9px; color: var(--muted-foreground); font-size: 0.92rem; line-height: 1.55; }
.product-checklist li::before { content: '\2713'; color: var(--primary); font-weight: 700; flex-shrink: 0; }

/* ===== CONTACT CARD (right) ===== */
.contact-card {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-size: 1rem; font-weight: 700; color: var(--foreground); margin-bottom: 14px; }
.contact-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.contact-card-row:last-of-type { border-bottom: none; margin-bottom: 14px; }
.contact-card-row .contact-icon { color: var(--primary); flex-shrink: 0; }
.contact-card-row .ccr-label { font-size: 0.68rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }
/* `white-space: nowrap` keeps a spaced phone number (see DEFAULT_PHONE in products-data.js) on one
   line — without it a narrow card can break "+995 595 51 86 55" mid-number, splitting the tap
   target for the call link that wraps it into two separate boxes. */
.contact-card-row .ccr-value { font-size: 0.92rem; font-weight: 700; color: var(--foreground); white-space: nowrap; }
.contact-card .btn { width: 100%; margin-top: 8px; justify-content: center; }
/* `.contact-card-note` was here and is gone with the "პასუხი იმუშავება უმოკლეს დროში" line it
   styled (see the note in build-products.js pageHTML, where that <p> used to be). It had exactly
   one call site; if the line is ever restored, this rule was:
   .contact-card-note { font-size: 0.72rem; color: var(--muted-foreground); text-align: center; margin-top: 12px; } */

/* ===== RELATED PRODUCTS ===== */
.related-section { padding: 48px 0 0; }

@media (min-width: 769px) {
  .gallery-main:hover .gallery-main-img { transform: scale(1.7); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .product-layout {
    grid-template-columns: 1fr;
  }
  .gallery { order: 1; position: static; max-width: 480px; margin: 0 auto; }
  .contact-card { order: 2; position: static; max-width: 480px; margin: 0 auto; width: 100%; }
  .product-info-main { order: 3; }
}

@media (max-width: 600px) {
  .product-layout { gap: 24px; }
  .gallery { max-width: 100%; }
  .contact-card { max-width: 100%; }
  .product-title { font-size: 1.4rem; }
  .product-price-value { font-size: 1.5rem; }
  .specs-table th, .specs-table td { padding: 8px 6px; font-size: 0.82rem; }
}