/*
 * Product page (v2) styles — ported from the pdp.html mockup.
 *
 * WHY A PLAIN FILE IN public/css INSTEAD OF AN ASTRO <style> BLOCK
 * Astro hoists a component's styles into the page's CSS bundle at BUILD time,
 * based on the import graph — not on whether the component actually rendered.
 * When this lived in PdpStyles.astro, the flag-off (production) build still
 * shipped all 23 KB of it on every product page: measured, then removed. A file
 * under public/ is referenced only by the <link> that ProductPageV2.astro
 * renders, so with the flag off nothing references it at all. It is also shared
 * and cacheable across all 29 product pages instead of inlined into each.
 *
 * EVERY RULE IS SCOPED TO `.pdp2` AND EVERY CUSTOM PROPERTY IS `--pdp-*`
 * Not cosmetic — all three reasons were verified against
 * apps/store/public/css/arshad-core-bundle.min.css:
 *
 *   - the bundle defines --red (#d3122a) and --green (#0b9d8a) on :root. An
 *     unprefixed :root block here would repaint the header, footer and buttons
 *     on this page only — a bug that reads as a theme glitch, not a CSS clash.
 *   - the bundle has a bare `.badge{position:relative;top:-1px}` and
 *     `.footer__payments .badge{...!important}`. `.pdp2 .badge` is two
 *     classes, so it outranks the bare rule without needing !important.
 *   - the mockup's bare `*`, `body`, `a` and `button` rules are dropped and
 *     re-declared inside the scope, so they cannot reach shared components.
 *
 * Generated from pdp.html by tmp-css-port.mjs, then reviewed. The mockup's own
 * comments are kept verbatim: they document the wiring still to be done, section
 * by section, and are the checklist for the phases after this one.
 *
 * Bump STORE_ASSET_V (src/lib/assetV.ts) when editing this file — it is loaded
 * with a ?v= cache-buster like every other stylesheet in public/css.
 */

/* Scoped replacements for the mockup's four global element rules. */
.pdp2,
.pdp2 *,
.pdp2 *::before,
.pdp2 *::after{box-sizing:border-box;}
.pdp2{
  color:var(--pdp-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  /* The mockup's body sets no line-height, so every element the mockup does not
     style explicitly renders at `normal` (~1.2). The theme's body sets 1.8, and
     line-height inherits — so on the real page those same elements came out 1.8
     and visibly taller: measured against the mockup, .trust-item +7px,
     .switch-opt .s +7px, .wishlist-btn +8px (46x43 became 46x51, losing its
     square shape). Declaring `normal` here restores the mockup's baseline while
     leaving every explicit line-height in this file untouched — .acc-body-inner
     stays 1.6, h1.title stays 1.25. */
  line-height:normal;
}
/* The palette reaches most of the page by INHERITANCE from .pdp2 above, which is
   why the mockup's `body{color:var(--ink)}` could be scoped this way at all.
   Inheritance loses to any rule that names an element directly, though, however
   unspecific that rule is — and arshad-core-bundle.min.css is full of them.
   Enumerated on the live page with CDP (every declaration that wins on an element
   inside .pdp2 and does not come from this file), the ones that reach a heading:

     h1,h2,h3,h4,h5,h6 { color: var(--headingColor) }   --headingColor #1f1f25
     h1,h2,h3,h4,h5,h6 { font-family: var(--headingFont) }
                                       "Trebuchet MS","Segoe UI",Candara,sans-serif
     .h1..h6, h1..h6   { line-height: 1.2 }

   Measured consequence: the product title and the three plain <h2>/<h3> headings
   painted rgb(31,31,37) instead of --pdp-ink #161616. The variable was never
   wrong; it simply never reached those elements.

   `inherit` hands them back to .pdp2 without hardcoding a second copy of the
   colour or the font stack, so editing --pdp-ink or the family above still moves
   them. Every level is listed rather than relying on a bare `.pdp2 h1`, so no
   heading level is silently left themed. line-height:normal restores the mockup's
   baseline; the mockup's own explicit values (h1.title 1.25) are two classes deep
   and still win over this. */
.pdp2 h1,
.pdp2 h2,
.pdp2 h3,
.pdp2 h4,
.pdp2 h5,
.pdp2 h6{color:inherit; font-family:inherit; line-height:normal;}
/* Bootstrap's `.badge{line-height:1}` also lands on our badges — the mockup left
   them at `normal`, so each badge rendered 25px tall instead of 28px. */
.pdp2 .badge{line-height:normal;}
/* The theme's `p{margin-top:0;margin-bottom:15px}` replaces the UA default the
   mockup was drawn against (13px top and bottom, i.e. 1em at 13px). */
.pdp2 p{margin-top:13px; margin-bottom:13px;}
.pdp2 a{color:inherit; text-decoration:none;}
/* The mockup's only button rule is `button{font-family:inherit}` — everything
   else about its buttons comes from UA defaults (font-size 13.33px, padding
   1px 6px). The theme resets buttons to font-size:16px and padding:0, which is
   why .wishlist-btn rendered 8px taller than the mockup's 46x43 square. Every
   button in this file that needs its own size already declares one; these two
   lines only restore the baseline the mockup was drawn against. */
.pdp2 button{font-family:inherit; font-size:13.3333px; padding:1px 6px;}

.pdp2{
  --pdp-ink:#161616; --pdp-soft:#6B6B6B; --pdp-mute:#9B9B9B;
  --pdp-paper:#FFFFFF; --pdp-fog:#F7F7F8; --pdp-line:#E9E9EC;
  --pdp-blue:#0087FF; --pdp-blue-deep:#006FD1; --pdp-blue-tint:#E5F3FF;
  --pdp-red:#E31E24; --pdp-red-deep:#B3151A; --pdp-red-tint:#FCE9EA;
  --pdp-green:#1E9E5A; --pdp-green-tint:#E7F7EE;
  --pdp-radius-sm:8px; --pdp-radius-md:10px; --pdp-radius-lg:16px;
}
/* [ported] dropped the mockup's global `*` rule — replaced by the scoped block above. */
/* [ported] dropped the mockup's global `body` rule — replaced by the scoped block above. */
/* [ported] dropped the mockup's global `a` rule — replaced by the scoped block above. */
/* [ported] dropped the mockup's global `button` rule — replaced by the scoped block above. */

/* ---------- layout ---------- */
.pdp2 .wrap{max-width:1160px; margin:0 auto; padding:40px 24px 80px;}
.pdp2 .crumb{font-size:12.5px; color:var(--pdp-mute); margin-bottom:18px;}
.pdp2 .crumb a:hover{color:var(--pdp-ink);}
.pdp2 .crumb span{margin:0 2px;}
.pdp2 .crumb .here{color:var(--pdp-soft);}
.pdp2 .pdp{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}

/* ---------- gallery ---------- */
/* Desktop-only: gallery column is naturally shorter than the info column (title/price/buybox/
   accordions/reviews), so it sticks near the top while the user scrolls through the longer
   right column — keeps the product image visible instead of leaving blank space below it.
   Disabled on mobile (see @media max-width:820px) where layout stacks to a single column anyway. */
.pdp2 .gallery{position:sticky; top:24px; align-self:start;}
/* Desktop product stage.
   aspect-ratio:1 — every product master in the catalog is square (checked 23 of
   them from the file headers: all 1280x1280). A 528x480 non-square stage meant a
   square photo could never fill it evenly, which is what left ~30% of the box
   empty and unevenly so: 29px dead space above and below, none at the sides. */
.pdp2 .stage{border-radius:var(--pdp-radius-lg); background:linear-gradient(180deg,#FAFAFB,#F0F1F3); display:flex; align-items:center; justify-content:center; aspect-ratio:1; position:relative; overflow:hidden; cursor:zoom-in;}
/* Sale/Best Seller/New badges — overlaid top-left on the stage image.
   z-index is REQUIRED, not decorative: .badges is the first child of .stage and
   the photos come after it, so with z-index:auto the photos paint on top and the
   badges vanish behind them — visibly so on hover, when the photo scales to
   1.35x and its white area covers the badge row. */
.pdp2 .badges{position:absolute; top:16px; left:16px; display:flex; gap:6px; flex-wrap:wrap; z-index:3;}
.pdp2 .badge{font-size:11px; font-weight:700; padding:6px 10px; border-radius:6px; letter-spacing:0.02em;}
.pdp2 .badge.red{background:var(--pdp-red); color:#fff;}
.pdp2 .badge.blue{background:var(--pdp-blue); color:#fff;}
.pdp2 .badge.outline{background:#fff; color:var(--pdp-ink); border:1.5px solid var(--pdp-line);}
/* W1 — real product photos on the stage.
   Every image is in the DOM; only .is-active is visible. Swapping a single
   <img>'s src would blank the frame while the new file downloads, so instead the
   siblings are pre-rendered and crossfaded, which also lets loading="lazy" defer
   the ones nobody has looked at yet.
   position:absolute + inset:0 keeps them stacked rather than stretching the
   stage to the height of all of them.
   max-width/height 100%: the stage is now square like the photos, so the photo
   fills it. The old 88% cap was inherited from the mockup's 300x200 placeholder
   SVG and left a visible empty border on all four sides.
   z-index:1 keeps photos above the gradient backdrop but below .badges (3) and
   .zoom-hint (2) — with z-index:auto, DOM order alone put them on top of both. */
.pdp2 .stage-img{
  position:absolute; inset:0; margin:auto;
  width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .35s ease;
  z-index:1;
}
.pdp2 .stage-img.is-active{opacity:1; visibility:visible;}
/* Hover zoom is milder than the mockup's 1.35x: at 1.35x a photo that already
   fills a square stage is cropped by ~26% on every edge, so the product's own
   edges leave the frame. 1.12x reads as a zoom without cutting the product. */
.pdp2 .stage:hover .stage-img.is-active{transform:scale(1.12);}
/* Small zoom icon, fades in on hover to hint the image is clickable (opens lightbox) */
.pdp2 .zoom-hint{
  position:absolute; bottom:14px; right:14px; width:32px; height:32px;
  border-radius:50%; background:rgba(255,255,255,.9); border:1px solid var(--pdp-line);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  opacity:0; transition:opacity .2s; z-index:2;
}
.pdp2 .stage:hover .zoom-hint{opacity:1;}

/* Thumbnail row below the desktop stage — click to swap the active gallery image */
.pdp2 .thumbs{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap;}
.pdp2 .thumb{width:72px; height:72px; border-radius:var(--pdp-radius-md); border:1.5px solid var(--pdp-line); background:var(--pdp-fog); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s; flex:none; padding:0; overflow:hidden;}
.pdp2 .thumb.active{border-color:var(--pdp-blue); box-shadow:0 2px 8px rgba(0,135,255,.15);}
.pdp2 .thumb svg{width:36px; height:36px;}
/* W1 — real photos in the thumbnail buttons. The mockup's inline SVGs were 36px
   icons centred in a 72px box; a real photo should fill the button instead. */
.pdp2 .thumb img{width:100%; height:100%; object-fit:contain; display:block;}

/* ---------- info column ---------- */
.pdp2 .info{padding-top:4px;}
.pdp2 h1.title{font-size:27px; font-weight:700; letter-spacing:-0.02em; margin:0 0 8px; line-height:1.25;}

/* Star rating — clickable, scrolls smoothly down to the reviews section */
.pdp2 .rating-row{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--pdp-soft); margin-bottom:10px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit;}
.pdp2 .rating-row:hover .review-link{text-decoration:underline;}
.pdp2 .stars{color:#F5A623; letter-spacing:1px;}

/* In-stock indicator with a pulsing dot. Default state below; .low/.out variants swap color + animation */
.pdp2 .stock-tag{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--pdp-green); margin-bottom:18px;}
.pdp2 .stock-tag .dot{width:7px; height:7px; border-radius:50%; background:var(--pdp-green); flex:none; box-shadow:0 0 0 3px var(--pdp-green-tint); animation:pdp2-pulse 1.8s ease-in-out infinite;}
@keyframes pdp2-pulse{
  0%,100%{box-shadow:0 0 0 3px var(--pdp-green-tint);}
  50%{box-shadow:0 0 0 6px var(--pdp-green-tint);}
}
/* Low-stock state — add class="stock-tag low" via JS when real inventory count is small */
.pdp2 .stock-tag.low{color:#B8710A;}
.pdp2 .stock-tag.low .dot{background:#F5A623; box-shadow:0 0 0 3px #FDF0DA;}
/* Out-of-stock state — add class="stock-tag out" and swap CTA for the notify form below */
.pdp2 .stock-tag.out{color:var(--pdp-mute);}
.pdp2 .stock-tag.out .dot{background:var(--pdp-mute); box-shadow:none; animation:none;}

/* Current price + strikethrough original price + savings badge */
.pdp2 .price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:20px;}
.pdp2 .price{font-size:28px; font-weight:700;}
.pdp2 .was{font-size:15px; color:var(--pdp-mute); text-decoration:line-through;}
.pdp2 .save-badge{font-size:11.5px; font-weight:700; color:var(--pdp-green); background:var(--pdp-green-tint); padding:3px 9px; border-radius:6px;}

/* Small uppercase heading used above each info-column section (e.g. "SWITCH TYPE", "COMPATIBLE WITH") */
.pdp2 .section-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pdp-soft); margin:0 0 10px;}

/* ---------- switch color picker ---------- */
/* Radio-button-style option cards (White/Red/RGB) — clicking one updates the note below via JS */
.pdp2 .switches{display:flex; gap:10px; margin-bottom:8px;}
.pdp2 .switch-opt{flex:1; border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-md); padding:11px 14px; cursor:pointer; text-align:left; transition:border-color .15s, background .15s;}
.pdp2 .switch-opt.active{border-color:var(--pdp-blue); background:var(--pdp-blue-tint);}
.pdp2 .switch-opt .n{font-size:13.5px; font-weight:700; display:flex; align-items:center;}
.pdp2 .switch-opt .s{font-size:11.5px; color:var(--pdp-mute); margin-top:1px;}
.pdp2 .swatch{width:14px; height:14px; border-radius:50%; display:inline-block; margin-right:7px; border:1px solid rgba(0,0,0,.1);}
.pdp2 .switch-note{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--pdp-soft); margin-bottom:20px;}
.pdp2 .switch-note .i{width:14px; height:14px; border-radius:50%; background:var(--pdp-red-tint); color:var(--pdp-red-deep); font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;}

/* ---------- compatibility row ---------- */
/* OS/connector compatibility icons (Windows / macOS / Linux / USB-C) — static info, no interactivity */
.pdp2 .compat{display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--pdp-line); border-bottom:1px solid var(--pdp-line); margin-bottom:22px; flex-wrap:wrap;}
.pdp2 .compat-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--pdp-soft);}

/* ---------- buy modes ---------- */
/* "Buy it your way" toggle — single item vs. bundle, expands the itemized bundle panel below when active */
.pdp2 .buy-modes{display:flex; gap:8px;}
.pdp2 .buy-mode{flex:1; border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-md); padding:13px 15px; cursor:pointer; position:relative; transition:border-color .15s;}
.pdp2 .buy-mode.active{border-color:var(--pdp-blue); box-shadow:0 0 0 1px var(--pdp-blue);}
.pdp2 .buy-mode .n{font-size:13.5px; font-weight:700;}
.pdp2 .buy-mode .p{font-size:12.5px; color:var(--pdp-soft); margin-top:2px;}
.pdp2 .buy-mode .save-tag{position:absolute; top:-9px; right:12px; background:var(--pdp-green); color:#fff; font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px;}

/* Itemized bundle contents — collapsed by default, slides open (max-height transition) when bundle mode is active */
.pdp2 .bundle-panel{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.pdp2 .bundle-panel.open{max-height:260px;}
.pdp2 .bundle-items{display:flex; flex-direction:column; gap:11px; background:var(--pdp-fog); border-radius:var(--pdp-radius-md); padding:15px; margin-top:10px;}
.pdp2 .bundle-item{display:flex; align-items:center; justify-content:space-between; font-size:13px;}
.pdp2 .bundle-item .l{display:flex; align-items:center; gap:9px;}
.pdp2 .bundle-item .sw{width:9px; height:9px; border-radius:2px; flex:none;}
.pdp2 .bundle-item .p{color:var(--pdp-soft);}
.pdp2 .bundle-total{display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; border-top:1px solid var(--pdp-line); padding-top:10px; margin-top:2px;}
.pdp2 .bundle-total .save{color:var(--pdp-green); font-weight:600; font-size:12.5px;}

/* ---------- buy box ---------- */
/* ---------- notify-me / back-in-stock form (hidden until product is out of stock) ---------- */
/* Toggle .visible on .notify-form via JS (alongside .stock-tag.out) to swap this in for the normal buy box */
.pdp2 .notify-form{display:none; flex-direction:column; gap:10px;}
.pdp2 .notify-form.visible{display:flex;}
.pdp2 .notify-form .nf-text{font-size:13px; color:var(--pdp-soft); margin-bottom:2px;}
.pdp2 .notify-row{display:flex; gap:8px;}
.pdp2 .notify-row input{
  flex:1; border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-sm);
  padding:12px 14px; font-size:13.5px; font-family:inherit; color:var(--pdp-ink);
}
.pdp2 .notify-row input:focus{outline:none; border-color:var(--pdp-blue);}
.pdp2 .notify-row button{
  border:none; border-radius:var(--pdp-radius-sm); background:var(--pdp-ink); color:#fff;
  font-size:13.5px; font-weight:700; padding:0 18px; cursor:pointer; white-space:nowrap;
}
.pdp2 .notify-row button:hover{background:var(--pdp-blue);}

/* Main purchase panel — quantity stepper, Add to cart, wishlist toggle, Buy now */
.pdp2 .buybox{border:1.5px solid var(--pdp-line); border-radius:12px; padding:18px; margin:20px 0;}
.pdp2 .qty-cta{display:flex; gap:10px; margin-bottom:12px;}
.pdp2 .qty{display:flex; align-items:center; border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-sm); overflow:hidden; flex:none;}
.pdp2 .qty button{width:36px; height:46px; border:none; background:#F1F2F4; color:var(--pdp-soft); font-size:16px; font-weight:600; cursor:pointer; transition:background .15s;}
.pdp2 .qty button:hover{background:#E4E6EA; color:var(--pdp-ink);}
.pdp2 .qty span{width:34px; text-align:center; font-size:14px; font-weight:600;}

/* Primary CTA (Add to cart) */
.pdp2 .cta{flex:1; border:none; border-radius:var(--pdp-radius-sm); background:var(--pdp-blue); color:#fff; font-size:14.5px; font-weight:700; cursor:pointer; transition:background .15s;}
.pdp2 .cta:hover{background:var(--pdp-blue-deep);}

/* Secondary CTA (Buy now) */
.pdp2 .cta2-row{display:flex; gap:10px;}
.pdp2 .cta2{flex:1; border:1.5px solid var(--pdp-blue); border-radius:var(--pdp-radius-sm); background:transparent; color:var(--pdp-blue); font-size:14px; font-weight:600; padding:12px; cursor:pointer;}
.pdp2 .cta2:hover{background:var(--pdp-blue-tint);}

/* Wishlist heart toggle — outline by default, fills solid blue + scales down briefly when clicked (see .active/:active) */
.pdp2 .wishlist-btn{width:46px; flex:none; border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-sm); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s ease; transition-property:border-color,background,transform;}
.pdp2 .wishlist-btn:hover{border-color:var(--pdp-blue-deep); background:var(--pdp-blue-tint); transform:translateY(-1px);}
.pdp2 .wishlist-btn:active{transform:scale(.92);}
.pdp2 .wishlist-btn svg{width:18px; height:18px;}
.pdp2 .wishlist-btn path{stroke:var(--pdp-soft); stroke-width:1.7; fill:none; transition:.15s ease; transition-property:fill,stroke;}
.pdp2 .wishlist-btn.active{border-color:var(--pdp-blue-deep); background:var(--pdp-blue-tint);}
.pdp2 .wishlist-btn.active path{stroke:var(--pdp-blue-deep); fill:var(--pdp-blue-deep);}
.pdp2 .wishlist-btn:hover:not(.active) path{stroke:var(--pdp-blue-deep);}
.pdp2 .buy-note{font-size:12px; color:var(--pdp-mute); text-align:center; margin-top:10px;}

/* Direct WhatsApp contact link below the buy box — static, no JS wiring needed beyond the href */
.pdp2 .whatsapp-link{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:#25A24A; font-weight:600; margin-top:12px;}
.pdp2 .whatsapp-link:hover{color:#1C8B3C;}
.pdp2 .whatsapp-link svg{flex:none;}

/* ---------- trust row ---------- */
.pdp2 .trust{display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid var(--pdp-line);}
.pdp2 .trust-item{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; flex:1;}
.pdp2 .trust-item .t{font-size:11.5px; color:var(--pdp-soft); font-weight:500;}

/* ---------- image lightbox (desktop click + mobile tap) ----------
   z-index must beat the THEME's stacking, not just v2's own. Measured on the live
   staging page, these theme layers sit above a z-index of 100 and covered the
   lightbox: the sticky header + .headerarea at 1200, the mega-menu at 1220, the
   WhatsApp FAB at 9400, the search overlay at 9999, .body-overlay at 9998 and the
   mobile drawer at 10000. The mockup's z-index:100 was fine in a standalone HTML
   file and wrong the moment the page went inside the real site header.
   20001 clears the whole set with room to spare while staying below the theme's
   own absurd 9999999+ rules (.minicart__inner, .modalarea .btn-close) — those are
   real UI that must still be able to appear over a lightbox, and none of them are
   present on the PDP anyway.
   The same reasoning applies to the review modal below (z-index:20002), which had
   z-index:110 and was likewise sitting under a header at 1200. */
.pdp2 .lightbox{
  display:none; position:fixed; inset:0; z-index:20001;
  background:rgba(15,15,16,.92); align-items:center; justify-content:center;
  padding:24px;
}
.pdp2 .lightbox.open{display:flex;}
/* The master is a ~355 KB PNG that needs ~320 ms, so without a min-height the
   overlay opens as an empty black screen and then jumps. Reserving the box keeps
   the close button and the frame stable while the photo arrives. */
.pdp2 .lightbox-img{max-width:92vw; max-height:82vh; min-width:min(60vw,320px); min-height:min(60vh,320px); object-fit:contain;}
/* Spinner during that fetch, so the reserved box reads as "loading" rather than
   as a broken overlay. Removed on load AND on error by the script. */
.pdp2 .lightbox.is-loading::after{
  content:""; position:absolute; top:50%; left:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:pdp2-spin .7s linear infinite; pointer-events:none;
}
.pdp2 .lightbox.is-loading .lightbox-img{opacity:0;}
.pdp2 .lightbox-img{transition:opacity .2s ease;}
@keyframes pdp2-spin{to{transform:rotate(360deg);}}
.pdp2 .lightbox-close{
  position:absolute; top:18px; right:18px; width:40px; height:40px;
  border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff;
  font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.pdp2 .lightbox-close:hover{background:rgba(255,255,255,.22);}

/* ---------- reviews ---------- */
.pdp2 .reviews{margin-top:28px; padding-top:24px; border-top:1px solid var(--pdp-line);}
.pdp2 .reviews-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.pdp2 .reviews-head h2{font-size:17px; font-weight:700; margin:0;}
.pdp2 .write-rev-btn{background:var(--pdp-fog); color:var(--pdp-ink); border:1px solid var(--pdp-line); padding:6px 14px; border-radius:var(--pdp-radius-sm); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .2s ease;}
.pdp2 .write-rev-btn:hover{background:#EAEAED; border-color:#D0D0D5;}
.pdp2 .reviews-summary{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.pdp2 .reviews-score{font-size:34px; font-weight:700; line-height:1;}
.pdp2 .reviews-bars{flex:1; display:flex; flex-direction:column; gap:4px;}
.pdp2 .reviews-bar-row{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--pdp-soft);}
.pdp2 .reviews-bar-track{flex:1; height:6px; border-radius:3px; background:var(--pdp-fog); overflow:hidden;}
.pdp2 .reviews-bar-fill{height:100%; background:#F5A623; border-radius:3px;}
.pdp2 .review-card{padding:16px 0; border-top:1px solid var(--pdp-line);}
.pdp2 .review-card:first-child{border-top:none;}
.pdp2 .review-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.pdp2 .review-name{font-size:13px; font-weight:700;}
.pdp2 .review-date{font-size:11.5px; color:var(--pdp-mute);}
.pdp2 .review-stars{color:#F5A623; font-size:12px; letter-spacing:1px; margin-bottom:6px;}
.pdp2 .review-text{font-size:13px; color:var(--pdp-soft); line-height:1.6;}
/* Truncated review text — 3 lines by default, expands via .rev-show-more-btn */
.pdp2 .review-text.clamped{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.pdp2 .rev-show-more-btn{background:none; border:none; color:var(--pdp-blue); font-size:12.5px; font-weight:600; cursor:pointer; padding:0; margin-left:4px; margin-top:4px; display:inline-block;}
.pdp2 .rev-show-more-btn:hover{text-decoration:underline;}
.pdp2 .rev-media-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.pdp2 .rev-media-wrap{display:inline-block; position:relative; cursor:pointer;}
.pdp2 .rev-media-thumb{width:64px; height:64px; border-radius:var(--pdp-radius-sm); object-fit:cover; display:block; border:1px solid var(--pdp-line); background:var(--pdp-fog);}
.pdp2 .rev-media-badge{position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.75); color:#fff; font-size:10.5px; font-weight:700; padding:2px 5px; border-radius:4px; pointer-events:none;}

/* Reviews pagination — "Show more reviews" appears once there are more than
   the currently-rendered page of reviews (3 shown by default). */
.pdp2 .reviews-load-more{display:none; margin:18px auto 0; padding:10px 20px; border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-sm); background:#fff; color:var(--pdp-ink); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s;}
.pdp2 .reviews-load-more.visible{display:block;}
.pdp2 .reviews-load-more:hover{border-color:var(--pdp-blue); background:var(--pdp-blue-tint); color:var(--pdp-blue-deep);}
.pdp2 .reviews-empty{font-size:13px; color:var(--pdp-soft); padding:16px 0;}

/* ---------- write-a-review modal ----------
   z-index:20002 for the same measured reason as the lightbox: at the mockup's 110
   the site header (1200) painted straight over this dialog. One above the lightbox
   so that if both are ever open, the form the shopper is typing into wins. */
.pdp2 .rev-modal-overlay{
  display:none; position:fixed; inset:0; z-index:20002;
  background:rgba(15,15,16,.6); align-items:center; justify-content:center; padding:20px;
}
.pdp2 .rev-modal-overlay.open{display:flex;}
.pdp2 .rev-modal{
  background:#fff; border-radius:var(--pdp-radius-lg); width:100%; max-width:460px;
  max-height:90vh; overflow-y:auto; padding:24px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.pdp2 .rev-modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--pdp-fog); color:var(--pdp-soft); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pdp2 .rev-modal-close:hover{background:#EAEAED; color:var(--pdp-ink);}
.pdp2 .rev-modal h3{font-size:17px; font-weight:700; margin:0 0 4px;}
.pdp2 .rev-modal .rev-modal-sub{font-size:12.5px; color:var(--pdp-soft); margin:0 0 20px;}
.pdp2 .rev-field{margin-bottom:16px;}
.pdp2 .rev-field label{display:block; font-size:12px; font-weight:700; color:var(--pdp-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
.pdp2 .rev-star-picker{display:flex; gap:6px;}
.pdp2 .rev-star-picker button{
  background:none; border:none; cursor:pointer; padding:0; font-size:30px; line-height:1;
  color:var(--pdp-line); transition:color .15s, transform .1s;
}
.pdp2 .rev-star-picker button:hover{transform:scale(1.12);}
.pdp2 .rev-star-picker button.active,
.pdp2 .rev-star-picker button.hovered{color:#F5A623;}
.pdp2 .rev-field input[type="text"],
.pdp2 .rev-field textarea{
  width:100%; border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-sm);
  padding:12px 14px; font-size:13.5px; font-family:inherit; color:var(--pdp-ink); resize:vertical;
}
.pdp2 .rev-field textarea{min-height:100px;}
.pdp2 .rev-field input:focus,
.pdp2 .rev-field textarea:focus{outline:none; border-color:var(--pdp-blue);}
.pdp2 .rev-media-upload{
  border:1.5px dashed var(--pdp-line); border-radius:var(--pdp-radius-sm); padding:16px;
  text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.pdp2 .rev-media-upload:hover{border-color:var(--pdp-blue); background:var(--pdp-blue-tint);}
.pdp2 .rev-media-upload input{display:none;}
.pdp2 .rev-media-upload .hint{font-size:12px; color:var(--pdp-mute); margin-top:4px;}
.pdp2 .rev-media-preview{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.pdp2 .rev-media-preview-item{position:relative; width:64px; height:64px; border-radius:var(--pdp-radius-sm); overflow:hidden; border:1px solid var(--pdp-line); background:var(--pdp-fog);}
.pdp2 .rev-media-preview-item img,
.pdp2 .rev-media-preview-item video{width:100%; height:100%; object-fit:cover; display:block;}
.pdp2 .rev-media-preview-item .remove{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,.7); color:#fff; border:none; font-size:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.pdp2 .rev-submit-btn{
  width:100%; border:none; border-radius:var(--pdp-radius-sm); background:var(--pdp-blue); color:#fff;
  font-size:14.5px; font-weight:700; padding:13px; cursor:pointer; transition:background .15s;
}
.pdp2 .rev-submit-btn:hover{background:var(--pdp-blue-deep);}
.pdp2 .rev-submit-btn:disabled{background:var(--pdp-mute); cursor:not-allowed;}
.pdp2 .rev-form-msg{font-size:12.5px; margin-top:10px; text-align:center;}
.pdp2 .rev-form-msg.success{color:var(--pdp-green);}
.pdp2 .rev-form-msg.error{color:var(--pdp-red-deep);}

/* ---------- guaranteed safe checkout ---------- */
.pdp2 .safe-checkout{margin:18px 0; padding-top:16px; border-top:1px solid var(--pdp-line);}
.pdp2 .safe-checkout h3{font-size:12px; font-weight:700; color:var(--pdp-soft); margin:0 0 10px;}
.pdp2 .pay-icons{display:flex; flex-wrap:wrap; gap:8px;}
.pdp2 .pay-icon{
  height:26px; padding:0 8px; border:1px solid var(--pdp-line); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; overflow:hidden;
}
.pdp2 .pay-icon svg,
.pdp2 .pay-icon img{flex:none; display:block;}
/* Make JazzCash and Easypaisa logos slightly larger */
.pdp2 .pay-icons .pay-icon img[alt="JazzCash"],
.pdp2 .pay-icons .pay-icon img[alt="Easypaisa"]{
  transform: scale(1.2);
  transform-origin: center;
  display: inline-block; /* Ensures transform applies correctly */
}
/* Targeted fix for the Apple Pay icon wrapper */
.pdp2 .pay-icons .pay-icon.apple-pay-wrapper{
  border: none !important;
  outline: none !important;
  overflow: visible !important;
  padding: 1px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.pdp2 .pay-icons .pay-icon.apple-pay-wrapper img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- pairs well with ---------- */
.pdp2 .pairs{margin-top:28px; padding-top:24px; border-top:1px solid var(--pdp-line);}
.pdp2 .pairs h2{font-size:15px; font-weight:700; margin:0 0 16px;}
.pdp2 .pairs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.pdp2 .pairs-card{cursor:pointer;}
.pdp2 .pairs-card .pc-img{aspect-ratio:1; border-radius:var(--pdp-radius-md); background:var(--pdp-fog); display:flex; align-items:center; justify-content:center; margin-bottom:10px; overflow:hidden;}
.pdp2 .pairs-card .pc-img svg{width:56%;}
.pdp2 .pairs-card .pc-name{font-size:12.5px; font-weight:600; margin-bottom:4px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pdp2 .pairs-card .pc-was{font-size:11px; color:var(--pdp-mute); text-decoration:line-through; margin-right:5px;}
.pdp2 .pairs-card .pc-price{font-size:13px; font-weight:700; color:var(--pdp-blue);}
.pdp2 .pairs-card .pc-price.plain{color:var(--pdp-ink);}

/* ---------- related products ---------- */
.pdp2 .related{max-width:1160px; margin:48px auto 60px; padding:0 24px;}
.pdp2 .related h2{font-size:19px; font-weight:700; margin:0 0 16px;}
.pdp2 .related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.pdp2 .related-card{border:1.5px solid var(--pdp-line); border-radius:var(--pdp-radius-md); padding:14px; cursor:pointer; transition:border-color .15s;}
.pdp2 .related-card:hover{border-color:var(--pdp-blue);}
.pdp2 .related-card .rc-img{aspect-ratio:1; border-radius:var(--pdp-radius-sm); background:linear-gradient(180deg,#FAFAFB,#F0F1F3); display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.pdp2 .related-card .rc-img svg{width:60%;}
.pdp2 .related-card .rc-name{font-size:13px; font-weight:600; margin-bottom:3px; line-height:1.3;}
.pdp2 .related-card .rc-price{font-size:13px; font-weight:700;}

/* ---------- accordions ---------- */
.pdp2 .accordions{margin-top:22px;}
.pdp2 .acc{border-top:1px solid var(--pdp-line);}
.pdp2 .acc:last-child{border-bottom:1px solid var(--pdp-line);}
.pdp2 .acc-head{display:flex; align-items:center; justify-content:space-between; padding:15px 2px; cursor:pointer; font-size:13.5px; font-weight:500;}
.pdp2 .acc-head .plus{color:var(--pdp-mute); transition:transform .2s;}
.pdp2 .acc.open .acc-head .plus{transform:rotate(45deg); color:var(--pdp-blue);}
.pdp2 .acc-body{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.pdp2 .acc-body-inner{padding:0 2px 16px; font-size:13px; color:var(--pdp-soft); line-height:1.6;}
.pdp2 .acc.open .acc-body{max-height:160px;}

/* ---------- mobile swipeable gallery ---------- */
.pdp2 .m-gallery{display:none;}
@media (max-width:820px){
  .pdp2 .gallery{display:none; position:static;}
  .pdp2 .m-gallery{display:block; margin:0 -16px; position:relative;}
  .pdp2 .m-carousel{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .pdp2 .m-carousel::-webkit-scrollbar{display:none;}
  /* aspect-ratio 1 (was 4/3) — every product master is square, so a 4:3 slide
     left ~42% of the box permanently empty; measured 58.1% fill at 390px. */
  .pdp2 .m-slide{
    flex:0 0 100%; scroll-snap-align:center; cursor:zoom-in;
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#FAFAFB,#F0F1F3);
  }
  .pdp2 .m-slide svg{width:78%;}
  /* W1 — real photos in the mobile carousel. Full-bleed like the desktop stage:
     the 82%/88% caps were sized for the mockup's small placeholder SVG. */
  .pdp2 .m-slide img{width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; display:block;}
  /* z-index:3 to match the desktop badges and stay above the slide photos. */
  .pdp2 .m-badges{position:absolute; top:14px; left:14px; display:flex; gap:6px; flex-wrap:wrap; z-index:3;}
  .pdp2 .m-thumbs{display:flex; justify-content:center; gap:10px; padding:14px 16px; overflow-x:auto; scrollbar-width:none;}
  .pdp2 .m-thumbs::-webkit-scrollbar{display:none;}
  .pdp2 .m-thumb{
    flex:0 0 auto; width:60px; height:60px; border-radius:10px;
    border:1.5px solid var(--pdp-line); background:var(--pdp-fog);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:border-color .15s, box-shadow .15s; padding:0;
  }
  .pdp2 .m-thumb.active{border-color:var(--pdp-blue); box-shadow:0 2px 8px rgba(0,135,255,.15);}
  .pdp2 .m-thumb svg{width:30px; height:30px;}
  .pdp2 .m-thumb img{width:100%; height:100%; object-fit:contain; display:block;}
}

/* ---------- urgency strip ---------- */
.pdp2 .urgency{display:none;}
@media (max-width:820px){
  .pdp2 .urgency{
    display:flex; align-items:center; gap:8px;
    background:var(--pdp-blue-tint); border:1px solid #CDE8FF;
    border-radius:var(--pdp-radius-sm); padding:10px 12px;
    font-size:12.5px; color:var(--pdp-blue-deep); font-weight:600;
    margin-bottom:16px;
  }
  .pdp2 .urgency svg{flex:none;}
  .pdp2 .urgency .timer{font-variant-numeric:tabular-nums; font-weight:700;}
  /* Trust row becomes a responsive 3-up card grid on mobile */
  .pdp2 .trust{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    border-top:none; padding-top:0;
  }
  .pdp2 .trust-item{
    background:var(--pdp-fog); border-radius:var(--pdp-radius-sm);
    padding:12px 4px; gap:5px;
  }
  .pdp2 .trust-item .t{font-size:10.5px;}
}

/* ---------- sticky mobile buy bar ---------- */
.pdp2 .sticky-bar{display:none;}
@media (max-width:820px){
  .pdp2 .sticky-bar{
    display:flex; align-items:center; gap:12px;
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:#fff; border-top:1px solid var(--pdp-line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
    transform:translateY(100%); transition:transform .25s ease;
  }
  .pdp2 .sticky-bar.visible{transform:translateY(0);}
  .pdp2 .sticky-bar .sb-price{display:flex; flex-direction:column; line-height:1.2; flex:none;}
  .pdp2 .sticky-bar .sb-now{font-size:15px; font-weight:700;}
  .pdp2 .sticky-bar .sb-was{font-size:11px; color:var(--pdp-mute); text-decoration:line-through;}
  .pdp2 .sticky-bar .cta{padding:12px 0; font-size:14px;}
  .pdp2 .buybox{margin-bottom:20px;}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .pdp2 .wrap{padding:0 16px 90px;}
  .pdp2 .crumb{padding-top:16px;}
  .pdp2 .pdp{grid-template-columns:1fr; gap:20px;}
  /* .stage is display:none below 820px (the mobile carousel takes over), so its
     old min-height override was dead weight — dropped rather than left to
     confuse the next reader. */
  .pdp2 .related{padding:0 16px 90px;}
  .pdp2 .pairs-grid{gap:8px;}
  .pdp2 .pairs-card .pc-name{font-size:11.5px;}
  .pdp2 .pay-icons{gap:6px;}
  .pdp2 .pay-icon{height:22px; padding:0 6px; font-size:10.5px;}
  .pdp2 .related-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:44%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; scrollbar-width:none;}
  .pdp2 .related-grid::-webkit-scrollbar{display:none;}
  .pdp2 .related-card{scroll-snap-align:start;}
}
@media (max-width:420px){
  .pdp2 .switches{gap:6px;}
  .pdp2 .switch-opt{padding:9px 6px; text-align:center;}
  .pdp2 .switch-opt .n{justify-content:center; font-size:12px; flex-direction:column; align-items:center; gap:4px;}
  .pdp2 .switch-opt .s{display:none;}
  .pdp2 .swatch{margin-right:0;}
  .pdp2 .trust{flex-wrap:wrap; row-gap:16px;}
  .pdp2 .trust-item{flex:1 1 45%;}
}