/* pages/product.css — single product page only. Split out of the old
   single style.css (2026-09-26). */

/* ---- Product detail ---- */
.crumbs{ font-size:12.5px; color:var(--muted); }
.crumbs a{ color:var(--ink-soft); transition:color .15s; }
.crumbs a:hover{ color:var(--brand-ink); }

/* Main gallery image: switched from object-fit:cover (which crops laptop
   photos with inconsistent aspect ratios) to contain-with-padding, plus a
   cursor-following zoom on hover (desktop only — no pointer:fine means no
   hover, so touch devices just get the plain image, no dead zoom affordance
   to accidentally trigger). */
.gallery-main{
  aspect-ratio:1; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:none; display:flex; align-items:center; justify-content:center; color:var(--line-strong);
  overflow:hidden; position:relative; padding:16px;
}
.gallery-main img{ object-fit:contain; transition:transform .3s var(--ease, ease); cursor:zoom-in; }
.gallery-main svg{ width:80px; height:80px; }
@media (hover:hover) and (pointer:fine){
  .gallery-main.zoomed img{ transform:scale(1.6); cursor:zoom-out; }
}

.gallery-thumbs{ --thumb-size:76px; }
.gallery-thumb-btn{
  width:var(--thumb-size); height:var(--thumb-size); padding:4px; border-radius:var(--radius-sm) !important;
  border:2px solid var(--line); background:var(--surface); overflow:hidden; cursor:pointer;
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
.gallery-thumb-btn img{ width:100%; height:100%; object-fit:contain; display:block; }
.gallery-thumb-btn:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.gallery-thumb-btn.active{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
@media (max-width:480px){ .gallery-thumbs{ --thumb-size:56px; } }

.pd-title{ font-size:clamp(26px,3vw,36px); font-weight:700; letter-spacing:-.02em; }
.pd-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font-size:13px; color:var(--ink-soft); margin:10px 0 16px; }
.pd-meta-instock{ color:var(--ok); font-weight:600; }
.pd-meta-outstock{ color:var(--danger); font-weight:600; }
.pd-price .now{ font-family:var(--font-heading); font-size:36px; font-weight:800; color:var(--brand); letter-spacing:-.01em; }
.pd-price .was{ text-decoration:line-through; color:var(--muted); font-size:16px; font-weight:400; }
/* Real Rs. amount saved next to the PDP price — a small filled pill tag,
   matching the same "Save Rs. X" treatment used on product cards
   (.you-save in style.css) so the savings cue reads consistently across
   the site instead of a separate percent-based convention on this page. */
.pd-discount-badge{
  display:inline-flex; align-items:center; gap:5px; background:var(--brand-soft);
  color:var(--brand); font-weight:700; font-size:13px; padding:5px 10px; border-radius:99px; line-height:1.3;
  box-shadow:none;
}

/* Buy box: groups price/glance/variants/CTAs/trust chips into one visually
   distinct card so the whole purchase decision reads as a single unit
   instead of loose stacked rows down the column — same idea as a typical
   e-commerce PDP's right-column "buy box", adapted to this site's plain
   Apple-minimal card language (hairline border, no shadow). */
.pd-buybox{ border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:var(--surface); }
.pd-buybox .cta-row{ margin-top:2px; }
.pd-buybox .btn-wa{ flex:1 1 auto; min-width:180px; justify-content:center; font-weight:600; }
.pd-buybox .cta-row .btn-outline-primary{ display:inline-flex; align-items:center; gap:6px; }
/* .trust-chip lives in base.css — also used by finder-results.php's active
   filter pills. */

/* Section labels above "At a Glance" / "Full Specifications" — plain small
   uppercase eyebrow text, matching this theme's existing .block-head/
   .pf-spec-group h5 convention rather than introducing a new heading style. */
.pd-section-label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:12px; }

/* ---- "At a Glance" quick-spec strip (laptopmedia.com-inspired) ----
   A row of icon+label+value tiles above the full spec-group tables, giving
   a scannable summary before the detailed breakdown. Reuses the same plain
   hairline-divider aesthetic as .product-attributes-list / .spec-group
   rather than colored badges, to stay consistent with the Apple-minimal
   palette (see :root comment at the top of this file). */
.pd-glance{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.glance-item{ display:flex; align-items:center; gap:12px; background:var(--surface); padding:14px 16px; }
.glance-icon{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--paper); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; }
.glance-icon svg{ width:18px; height:18px; display:block; }
.glance-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.glance-label{ font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
/* Values wrap onto a 2nd line rather than truncate — "Core i5 7th
   Generation"/"Intel Integrated Graphics" are common real values here and
   were getting cut to "Core i5 7th Genera…" at the original single-line
   150px column width (caught by screenshot, not by an automated check —
   the ellipsis rendered "successfully," it just hid real data). */
.glance-value{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; white-space:normal; word-break:break-word; }

.spec-group{ background:var(--paper); border:1px solid transparent; border-radius:var(--radius); box-shadow:none; padding:20px 22px; height:100%; }
.spec-group h5{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); font-weight:600; margin-bottom:12px; }
.spec-group-icon{ flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--brand); }
.spec-group-icon svg{ width:16px; height:16px; display:block; }
.spec-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--line); }
.spec-row:last-child{ border-bottom:none; }
.spec-row dt{ color:var(--muted); margin:0; }
.spec-row dd{ margin:0; font-weight:500; text-align:right; color:var(--ink); }
@media (max-width:480px){
  .pd-glance{ grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
  .glance-item{ padding:12px; gap:10px; }
  .glance-icon{ width:30px; height:30px; }
}

/* Description: real paragraph rhythm instead of one nl2br'd text wall —
   see product_description_html() in partials/product-card-fn.php for how
   the source text is split into <p>/<h3> blocks. */
.pd-description{ max-width:75ch; font-size:14.5px; line-height:1.7; color:var(--ink-soft); }
.pd-description p{ margin:0 0 14px; }
.pd-description p:last-child{ margin-bottom:0; }
.pd-desc-subhead{ font-size:16px; font-weight:700; color:var(--ink); margin:20px 0 8px; }
.pd-desc-subhead:first-child{ margin-top:0; }

/* Full Specifications wrapper: a subtle top divider ties it visually to the
   "At a Glance"/description content above it instead of floating as an
   unrelated block once description-trimming (see above) shortened the gap
   between them. */
.pd-fullspecs-wrap{ padding-top:24px; border-top:1px solid var(--line); }