/* ==========================================================================
   chadmama — product page v2

   Loaded only by resources/views/frontend/products/show_v2.blade.php (the
   ?ui=v2 clone). Everything is scoped under .pv2 / .pv2-* so it cannot reach
   the live v1 page or any other template. Where it has to beat an inline
   style written by the variation-selector script, !important is used and the
   reason is stated at the rule.

   Structure is taken from the competitor page Ratul picked; the palette stays
   chadmama's navy + gold.
   ========================================================================== */

/* Tokens sit on :root, not on .pv2 — the sticky buy bar is a SIBLING of <main>,
   not a descendant, so a .pv2-scoped custom property would never reach it and
   every colour in that bar would silently fall back to nothing. This file is
   only ever loaded by show_v2.blade.php, so :root is safe here. */
:root{
    --v2-navy:#1B2A5B;
    --v2-navy-2:#2A3F7A;
    --v2-gold:#E8B923;
    --v2-gold-2:#F5D24A;
    --v2-ink:#111827;
    --v2-body:#4b5563;
    --v2-muted:#8a93a6;
    --v2-line:#e6e9f2;
    --v2-line-2:#d6dbe8;
    --v2-surface:#ffffff;
    --v2-page:#f6f7fb;
    --v2-soft:#f2f5fc;
    --v2-green:#0f9d58;
    --v2-red:#d93025;

    --v2-r-sm:8px;
    --v2-r:12px;
    --v2-r-lg:16px;
    --v2-pill:999px;

    --v2-fast:150ms;
    --v2-slow:300ms;
    --v2-ease:cubic-bezier(.4,0,.2,1);

    --v2-tap:44px;   /* minimum touch target */
}

.pv2-page{
    background:var(--v2-page);
    padding:10px 0 28px;
    font-family:'Hind Siliguri',Roboto,system-ui,sans-serif;
    color:var(--v2-body);
}
.pv2-container{ width:100%; max-width:1280px; margin:0 auto; padding:0 12px; }

/* ------------------------------------------------------------- breadcrumb */

.pv2-crumb{
    display:flex; align-items:center; flex-wrap:nowrap;
    gap:7px;
    font-size:12.5px; color:var(--v2-muted);
    margin:4px 0 12px;
    overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
}
.pv2-crumb::-webkit-scrollbar{ display:none; }
.pv2-crumb a{ color:var(--v2-muted); text-decoration:none; white-space:nowrap; }
.pv2-crumb a:hover{ color:var(--v2-navy); }
.pv2-crumb i{ font-size:9px; opacity:.55; flex:0 0 auto; }
.pv2-crumb span[aria-current]{
    color:var(--v2-ink); font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(52vw,320px);
}

/* ------------------------------------------------------------------- grid */

.pv2-main{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }

/* ---------------------------------------------------------------- gallery */

.pv2-gallery{ min-width:0; }
.pv2-gal{ display:flex; flex-direction:column; gap:10px; }
.pv2-stage-col{ min-width:0; }

/* Square stage: the image box is reserved before the file lands, so the buy
   buttons never shift under the customer's thumb mid-tap. */
.pv2 .chad-main-stage{
    background:var(--v2-surface);
    border:1px solid var(--v2-line);
    border-radius:var(--v2-r-lg);
    overflow:hidden;
}
.pv2 .chad-slide{ display:flex; align-items:center; justify-content:center; }
.pv2 .chad-slide img{
    aspect-ratio:1/1;
    width:100%; height:auto; max-height:none;
    object-fit:contain;
    border-radius:0;
    background:var(--v2-surface);
}

.pv2-badges{ position:absolute; left:10px; top:10px; z-index:3; display:flex; flex-direction:column; gap:6px; }
.pv2-badge{
    display:inline-flex; align-items:center;
    padding:4px 11px;
    border-radius:var(--v2-pill);
    font-size:12px; font-weight:800; letter-spacing:.2px; line-height:1.4;
}
.pv2-badge--off{ background:var(--v2-red); color:#fff; box-shadow:0 4px 12px rgba(217,48,37,.28); }

.pv2 .pv2-zoom{
    position:absolute; right:10px; bottom:10px; z-index:4;
    width:38px; height:38px;
    display:inline-flex; align-items:center; justify-content:center;
    border:0; border-radius:50%;
    background:rgba(15,23,42,.45); color:#fff; font-size:14px;
    cursor:zoom-in;
    transition:background var(--v2-fast) var(--v2-ease);
}
.pv2 .pv2-zoom:hover{ background:rgba(15,23,42,.72); }
.pv2 .pv2-arrow{ width:38px; height:38px; }
.pv2 .chad-nav-prev{ left:10px; }
.pv2 .chad-nav-next{ right:10px; }
.pv2 .pv2-counter{ left:10px; bottom:10px; }

/* Thumb rail — horizontal strip on phones, vertical column beside the stage
   from lg up. Overrides product-page.css's wrapping grid. */
.pv2 .pv2-thumbs{
    display:flex; flex-wrap:nowrap;
    gap:8px; margin-top:0;
    overflow-x:auto; overflow-y:hidden;
    padding-bottom:2px;
    scroll-snap-type:x proximity;
    -ms-overflow-style:none; scrollbar-width:none;
}
.pv2 .pv2-thumbs::-webkit-scrollbar{ display:none; }
.pv2 .pv2-thumbs .pv2-thumb{
    flex:0 0 auto;
    width:64px; height:64px;
    border:2px solid var(--v2-line);
    border-radius:var(--v2-r);
    background:var(--v2-surface);
    scroll-snap-align:center;
    transition:border-color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease);
}
.pv2 .pv2-thumbs .pv2-thumb img{ object-fit:contain; padding:3px; }
.pv2 .pv2-thumbs .pv2-thumb:hover{ border-color:var(--v2-line-2); box-shadow:none; }
.pv2 .pv2-thumbs .pv2-thumb.active{
    border-color:var(--v2-gold);
    box-shadow:0 0 0 3px rgba(232,185,35,.22);
}
.pv2 .pv2-thumbs .pv2-thumb:focus-visible{ outline:none; border-color:var(--v2-navy); box-shadow:0 0 0 3px rgba(27,42,91,.28); }

/* ---------------------------------------------------------------- buy box */

.pv2-buy{
    min-width:0;
    background:var(--v2-surface);
    border:1px solid var(--v2-line);
    border-radius:var(--v2-r-lg);
    padding:16px 14px 18px;
}

.pv2-title{
    margin:0 0 8px;
    font-size:19px; line-height:1.38; font-weight:700;
    color:var(--v2-ink);
}

.pv2-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; }
.pv2-rating{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--v2-body); font-size:13px; }
.pv2-rating:hover{ color:var(--v2-navy); }
.pv2-stars{ color:var(--v2-gold); line-height:1; }
.pv2-stars i{ font-size:13px; }
.pv2-rating b{ color:var(--v2-ink); }
.pv2-rev-count{ color:var(--v2-muted); }
.pv2-sku{
    font-size:11.5px; font-weight:600; color:var(--v2-muted);
    background:var(--v2-soft); border:1px solid var(--v2-line);
    padding:3px 9px; border-radius:var(--v2-r-sm);
}
.pv2-stock{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:700;
    padding:4px 11px; border-radius:var(--v2-pill);
}
.pv2-stock.is-in{ background:rgba(15,157,88,.10); color:var(--v2-green); }
.pv2-stock.is-out{ background:rgba(217,48,37,.10); color:var(--v2-red); }

.pv2-price-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.pv2-price{ font-size:28px; font-weight:800; line-height:1.1; color:var(--v2-navy); letter-spacing:-.4px; }
.pv2-old{ font-size:16px; color:var(--v2-muted); text-decoration:line-through; }
.pv2-save{
    font-size:12px; font-weight:700;
    color:var(--v2-green); background:rgba(15,157,88,.10);
    padding:3px 10px; border-radius:var(--v2-pill);
}

/* ------------------------------------------------------------ option chips */

.pv2-opts{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.pv2-opt-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.pv2-opt-label{ font-size:13px; font-weight:700; color:var(--v2-ink); text-transform:uppercase; letter-spacing:.4px; }
.pv2-opt-chosen{ font-size:13px; font-weight:600; color:var(--v2-navy); }
.pv2-chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* The selector script paints its choice inline (background/border/colour) on
   these very buttons. !important is the only way a stylesheet can take that
   back, so v2 owns the look and still lets that script own the state. */
.pv2 .pv2-chip{
    display:inline-flex; align-items:center; gap:8px;
    /* bundle.css ships `input, button, select, textarea { width:100% }`, which
       turned every chip into a full-width block stacked one per row. Chips must
       size to their label. */
    width:auto !important;
    flex:0 0 auto;
    min-height:var(--v2-tap);
    padding:8px 14px !important;
    border:1.5px solid var(--v2-line-2) !important;
    border-radius:var(--v2-pill) !important;
    background:var(--v2-surface) !important;
    color:var(--v2-ink) !important;
    font-size:14px; font-weight:600; line-height:1.2;
    cursor:pointer;
    transition:border-color var(--v2-fast) var(--v2-ease),
               box-shadow var(--v2-fast) var(--v2-ease),
               background var(--v2-fast) var(--v2-ease);
}
.pv2 .pv2-chip:hover{ border-color:var(--v2-navy) !important; }
.pv2 .pv2-chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(27,42,91,.28); }
.pv2 .pv2-chip:active{ transform:translateY(1px); }
.pv2 .pv2-chip.is-on{
    border-color:var(--v2-navy) !important;
    background:var(--v2-navy) !important;
    color:#fff !important;
    box-shadow:0 4px 12px rgba(27,42,91,.22);
}
.pv2 .pv2-chip.is-on .pv2-dot{ box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(255,255,255,.35); }
.pv2 .pv2-chip[data-soldout="1"]{ opacity:.45; }
.pv2 .pv2-chip[data-soldout="1"] .pv2-chip-label{ text-decoration:line-through; }

/* Real colour swatch — a filled circle, or a two-stop circle for names like
   "Blue-Black". A colour we cannot resolve renders as a label-only pill
   instead of a confidently wrong dot (see pvColorHex()). */
.pv2-dot{
    flex:0 0 auto;
    width:20px; height:20px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.10);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.pv2-chip-label{ white-space:nowrap; }

.pv2-warn{ color:var(--v2-red); font-size:13px; font-weight:600; margin-top:2px; }

/* ------------------------------------------------------- selection summary */

.pv2-chosen{
    display:flex; align-items:center; gap:11px;
    padding:10px 12px; margin-bottom:14px;
    background:var(--v2-soft);
    border:1px solid var(--v2-line);
    border-radius:var(--v2-r);
}
.pv2-chosen[hidden]{ display:none; }
.pv2-chosen-img{ width:52px; height:52px; border-radius:var(--v2-r-sm); object-fit:contain; background:#fff; border:1px solid var(--v2-line); flex:0 0 auto; }
.pv2-chosen-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pv2-chosen-k{ font-size:11px; font-weight:600; color:var(--v2-muted); text-transform:uppercase; letter-spacing:.5px; }
.pv2-chosen-v{ font-size:14px; font-weight:700; color:var(--v2-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv2-chosen-p{ font-size:16px; font-weight:800; color:var(--v2-navy); white-space:nowrap; }

/* ---------------------------------------------------------- price break-up */

.pv2-chart{ margin-bottom:16px; border:1px solid var(--v2-line); border-radius:var(--v2-r); overflow:hidden; background:var(--v2-surface); }
.pv2-chart > summary{
    list-style:none; cursor:pointer;
    padding:11px 13px;
    font-size:13px; font-weight:700; color:var(--v2-navy);
    display:flex; align-items:center; justify-content:space-between;
}
.pv2-chart > summary::-webkit-details-marker{ display:none; }
.pv2-chart > summary::after{ content:"⌄"; font-size:16px; line-height:1; transition:transform var(--v2-fast) var(--v2-ease); }
.pv2-chart[open] > summary::after{ transform:rotate(180deg); }
.pv2-chart > summary:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px rgba(27,42,91,.24); }
.pv2-chart table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.pv2-chart thead th{ background:var(--v2-soft); color:var(--v2-ink); font-weight:700; padding:9px 12px; text-align:left; border-top:1px solid var(--v2-line); }
.pv2-chart td{ padding:9px 12px; border-top:1px solid var(--v2-line); }
.pv2-chart td.p{ font-weight:700; color:var(--v2-ink); white-space:nowrap; }
.pv2-chart td.p del{ color:var(--v2-muted); font-weight:400; margin-right:5px; }

/* --------------------------------------------------------------- qty + CTA */

.pv2-buyrow{ display:flex; align-items:stretch; gap:10px; }
.pv2-buyrow .pv2-cta{ flex:1 1 auto; min-width:0; }
.pv2 .pv2-qty{
    display:inline-flex; align-items:stretch;
    /* The theme's own .quantity rules absolutely-position .minus/.plus at
       left:0 / right:0. Without a positioned ancestor here they escaped the
       stepper entirely and floated against the page edges, over the gallery.
       Anchor them, then put them back in flow. */
    position:relative;
    border:1px solid var(--v2-line-2);
    border-radius:var(--v2-r);
    overflow:hidden;
    background:var(--v2-surface);
    width:auto; height:auto; float:none;
    flex:0 0 auto;
}
.pv2 .pv2-qty .minus,
.pv2 .pv2-qty .plus{
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important;
    float:none !important;
    margin:0 !important;
}
.pv2 .pv2-qty .minus,
.pv2 .pv2-qty .plus{
    width:var(--v2-tap); height:var(--v2-tap);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:19px; font-weight:600; color:var(--v2-ink);
    background:var(--v2-soft);
    cursor:pointer; user-select:none;
    border:0; line-height:1;
    transition:background var(--v2-fast) var(--v2-ease);
}
.pv2 .pv2-qty .minus:hover,
.pv2 .pv2-qty .plus:hover{ background:#e7ecf7; }
.pv2 .pv2-qty .minus:focus-visible,
.pv2 .pv2-qty .plus:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px rgba(27,42,91,.28); }
.pv2 .pv2-qty input{
    width:58px; height:var(--v2-tap);
    border:0; border-left:1px solid var(--v2-line); border-right:1px solid var(--v2-line);
    text-align:center;
    font-size:15px; font-weight:700; color:var(--v2-ink);
    background:var(--v2-surface);
    padding:0;
}
.pv2 .pv2-qty input:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px rgba(27,42,91,.22); }

.pv2-ctas{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.pv2-ctas > .pv2-cta{ width:100%; }
.pv2 .pv2-cta{
    width:100%; min-height:52px;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    border-radius:var(--v2-r);
    font-size:16px; font-weight:800; letter-spacing:.2px;
    font-family:'Hind Siliguri',sans-serif;
    cursor:pointer;
    padding:12px 18px;
    transition:transform var(--v2-fast) var(--v2-ease),
               box-shadow var(--v2-fast) var(--v2-ease),
               filter var(--v2-fast) var(--v2-ease);
}
.pv2 .pv2-cta i{ font-size:16px; }
.pv2 .pv2-cta--cart{
    background:var(--v2-surface); color:var(--v2-navy);
    border:2px solid var(--v2-navy);
}
.pv2 .pv2-cta--cart:hover{ background:var(--v2-soft); }
.pv2 .pv2-cta--order{
    background:linear-gradient(135deg,var(--v2-navy),var(--v2-navy-2));
    color:var(--v2-gold);
    border:2px solid transparent;
    box-shadow:0 8px 20px rgba(27,42,91,.26);
}
.pv2 .pv2-cta--order:hover{ filter:brightness(1.08); }
.pv2 .pv2-cta:active{ transform:translateY(1px); }
.pv2 .pv2-cta:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(232,185,35,.55); }
.pv2 .pv2-cta:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ------------------------------------------------------------ trust strip */

.pv2-trust{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.pv2-trust span{
    display:inline-flex; align-items:center; gap:7px;
    background:var(--v2-soft); border:1px solid var(--v2-line);
    border-radius:var(--v2-r-sm);
    padding:9px 10px;
    font-size:12.5px; font-weight:600; color:var(--v2-navy);
    line-height:1.3;
}
.pv2-trust i{ color:var(--v2-green); font-size:14px; flex:0 0 auto; }

/* ---------------------------------------------------------------- contact */

.pv2-contact{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.pv2 .pv2-contact-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    min-height:48px;
    border-radius:var(--v2-r);
    font-size:15.5px; font-weight:700;
    text-decoration:none;
    transition:filter var(--v2-fast) var(--v2-ease);
}
.pv2 .pv2-contact-btn:hover{ filter:brightness(1.06); }
.pv2 .pv2-contact-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(27,42,91,.3); }
.pv2 .pv2-contact-btn--call{ background:var(--v2-navy); color:#fff; }
.pv2 .pv2-contact-btn--wa{ background:#25D366; color:#fff; }
.pv2 .pv2-contact-btn i{ font-size:18px; }

/* ------------------------------------------------------- key/value facts */

.pv2-facts{ border:1px solid var(--v2-line); border-radius:var(--v2-r); overflow:hidden; }
.pv2-facts-head{
    display:flex; align-items:center; gap:8px;
    background:var(--v2-navy); color:#fff;
    padding:10px 13px;
    font-size:13.5px; font-weight:700;
}
.pv2-facts-head i{ color:var(--v2-gold); }
.pv2-facts table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.pv2-facts td{ padding:10px 13px; border-top:1px solid var(--v2-line); color:var(--v2-body); }
.pv2-facts tr:first-child td{ border-top:0; }
.pv2-facts td.v{ text-align:right; font-weight:700; color:var(--v2-ink); white-space:nowrap; }

/* -------------------------------------------------------- sticky buy bar */

.pv2-bar{
    gap:10px;
    padding:8px 12px;
    /* clears the iPhone home indicator and the in-app browser's bottom chrome —
       without it the primary CTA sits partly under them */
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--v2-line);
    box-shadow:0 -6px 22px rgba(15,23,42,.10);
}
/* Thumbnail + name are shown at EVERY width. Hiding them on phones (the
   original plan) left the bar as a bare price and button with no sense of what
   was being ordered — which is exactly the reassurance the reference page keeps
   on mobile. */
.pv2-bar-img{
    width:44px; height:44px; flex:0 0 auto;
    border-radius:var(--v2-r-sm); object-fit:contain;
    background:#fff; border:1px solid var(--v2-line);
    display:block;
}
.pv2-bar-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.pv2-bar-name{ font-size:13.5px; font-weight:700; color:var(--v2-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv2-bar-var{ font-size:12px; color:var(--v2-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv2-bar .pv2-bar-price{
    display:flex; flex-direction:column; line-height:1.15;
    flex:0 0 auto; white-space:nowrap;
}
.pv2-bar .pv2-bar-price s{ margin-left:0; }
/* product-page.css paints this button green with !important, so brand navy has
   to answer in kind — this is the same CTA as the one in the buy box and the
   two must not disagree about what the primary action looks like. */
.pv2-bar .pv2-bar-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:var(--v2-tap);
    background:linear-gradient(135deg,#1B2A5B,#2A3F7A) !important;
    color:#E8B923 !important;
    border-radius:12px !important;
    font-weight:800;
}
.pv2-bar .pv2-bar-btn:hover{ filter:brightness(1.09); }

/* Secondary action in the bar. Hidden on phones — there the bar has room for one
   decision, and that decision is "order". */
.pv2-bar-cart{
    display:none;
    /* Third time this theme's `button { width:100% }` has to be answered — left
       alone it eats the whole bar and pushes the name and price out. */
    width:auto !important;
    flex:0 0 auto;
    align-items:center; justify-content:center; gap:7px;
    min-height:var(--v2-tap);
    padding:0 20px;
    border:2px solid var(--v2-navy);
    border-radius:12px;
    background:var(--v2-surface);
    color:var(--v2-navy);
    font-size:14.5px; font-weight:800;
    font-family:'Hind Siliguri',sans-serif;
    white-space:nowrap;
    cursor:pointer;
    transition:background var(--v2-fast) var(--v2-ease);
}
.pv2-bar-cart:hover{ background:var(--v2-soft); }
.pv2-bar-cart:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(27,42,91,.35); }
.pv2-bar .pv2-bar-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(232,185,35,.5); }

/* ======================================================== tablet and up  */

@media (min-width:576px){
    .pv2-buy{ padding:18px 18px 20px; }
    .pv2-title{ font-size:21px; }
    .pv2-price{ font-size:30px; }
    /* .pv2-ctas stays a COLUMN at every width. It used to flip to a row here, from
       back when it held two sibling buttons; once quantity moved onto the cart row
       that rule put the whole [qty][cart] group beside the order button and crushed
       "কার্টে যোগ করুন" into 100px on desktop. Row on top, order button full width
       under it — the reference layout, and the readable one. */
    .pv2-contact{ flex-direction:row; }
    .pv2 .pv2-contact-btn{ flex:1; }
    .pv2-trust{ grid-template-columns:repeat(4,1fr); }
    .pv2-trust span{ flex-direction:column; align-items:flex-start; gap:5px; }
    .pv2-bar-img{ width:46px; height:46px; }
}

/* Very narrow phones: the bar cannot carry name + price + button, so the name
   yields — the price and the action are what the shopper needs there. */
@media (max-width:379px){
    .pv2-bar-txt{ display:none; }
    .pv2-bar-img{ display:none; }
}

@media (min-width:768px){
    .pv2-container{ padding:0 18px; }
    .pv2-main{ gap:24px; }
}

/* ============================================================ desktop  */

@media (min-width:992px){
    .pv2-page{ padding:14px 0 40px; }
    .pv2-main{ grid-template-columns:minmax(0,1fr) minmax(400px,440px); gap:32px; }

    /* Gallery holds still while the (taller) buy column scrolls, matching the
       competitor's sticky product image. */
    .pv2-gallery{ position:sticky; top:96px; }

    /* Vertical rail to the left of the stage, exactly like the reference. */
    .pv2-gal{ flex-direction:row-reverse; align-items:flex-start; gap:12px; }
    .pv2-stage-col{ flex:1 1 auto; }
    .pv2-thumb-col{ flex:0 0 78px; }
    .pv2 .pv2-thumbs{
        flex-direction:column; flex-wrap:nowrap;
        overflow-x:hidden; overflow-y:auto;
        max-height:520px;
        padding-right:2px;
    }
    .pv2 .pv2-thumbs .pv2-thumb{ width:74px; height:74px; }

    .pv2-title{ font-size:24px; }
    .pv2-price{ font-size:33px; }
    .pv2-buy{ padding:22px; }

    /* Desktop has the room, so the controls get the size that reads as clickable
       from a metre away rather than the phone-sized minimum. */
    .pv2 .pv2-cta{ min-height:56px; font-size:17px; }
    .pv2 .pv2-qty .minus,
    .pv2 .pv2-qty .plus{ width:52px; height:52px; font-size:21px; }
    .pv2 .pv2-qty input{ width:66px; height:52px; font-size:16px; }
    .pv2-buyrow{ gap:12px; }

    .pv2-bar-cart{ display:inline-flex; }
    .pv2-bar .pv2-bar-btn{ width:auto !important; flex:0 0 auto; min-width:210px; }
    .pv2-bar{ padding:9px 18px; gap:14px; }
    .pv2-bar-name{ font-size:14.5px; }
}

@media (min-width:1200px){
    .pv2-main{ grid-template-columns:minmax(0,1fr) 460px; gap:40px; }
}

/* The v1 rule only shows the bar under 768px. v2 keeps it at every width —
   the shopper should never have to scroll back up to order. */
@media (min-width:769px){
    .pv2-bar{ display:flex; }
}
/* The bar is taller than v1's (it carries a thumbnail and the variant line), so
   the page needs more bottom room than v1's 70px or the last section hides
   under it. Also lifts the floating cart FAB clear of the bar. */
body:has(.pv2){ padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
body:has(.pv2) .chad-fab-cart{ bottom:98px !important; }
/* On desktop the floating cart lands ON TOP of the order button — the buy column
   reaches the right edge there. Two other ways to the cart are already on screen
   (the header cart with its count, and the sticky bar), so it goes. */
@media (min-width:992px){
    body:has(.pv2) .chad-fab-cart{ display:none !important; }
}

/* ============================================================ lower page */

/* Tabs, reviews and related products still use the v1 markup; these rules only
   re-skin them so the page reads as one design. */

/* ------------------------------------------------------- sticky section tabs */

.pv2 .pv2-tabs-wrap{ margin-top:22px; }
ul#myTab.pv2-tabs{
    position:sticky;
    /* Set at runtime from the real height of whatever the theme pins to the top
       of the viewport; 0 is the safe fallback if that script never runs. */
    top:var(--v2-sticky-top, 0px);
    z-index:20;
    display:flex;
    gap:2px !important;
    margin-bottom:20px !important;
    padding:0;
    border:0;
    border-bottom:1px solid var(--v2-line);
    background:var(--v2-page);
    flex-wrap:nowrap;
    overflow-x:auto;
    -ms-overflow-style:none; scrollbar-width:none;
}
ul#myTab.pv2-tabs::-webkit-scrollbar{ display:none; }
ul#myTab.pv2-tabs .nav-item{ flex:0 0 auto; }
ul#myTab.pv2-tabs .nav-link{
    border:0 !important;
    border-bottom:3px solid transparent !important;
    border-bottom-color:transparent !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--v2-muted) !important;
    font-weight:700; font-size:14.5px;
    padding:12px 15px !important;
    white-space:nowrap;
    transition:color var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease);
}
ul#myTab.pv2-tabs .nav-link:hover{ color:var(--v2-navy) !important; }
ul#myTab.pv2-tabs .nav-link:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px rgba(27,42,91,.24); }
ul#myTab.pv2-tabs .nav-link.active{
    color:var(--v2-navy) !important;
    border-bottom:3px solid var(--v2-gold) !important;
    border-bottom-color:var(--v2-gold) !important;
    background:transparent !important;
}
ul#myTab.pv2-tabs .badge{ margin-left:5px; font-size:10.5px; vertical-align:middle; }

.pv2 .tab-content{
    background:var(--v2-surface);
    border:1px solid var(--v2-line);
    border-radius:var(--v2-r-lg);
    padding:18px 16px;
}
.pv2 .tab-content .title{
    font-size:17px; font-weight:800; color:var(--v2-ink);
    margin:0 0 12px;
}

/* ----------------------------------------------------------- specification */

/* Key/value rows, the reference page's spec-table treatment: zebra striping,
   the label column carrying the weight, no heavy grid lines. */
.pv2 .chad-spec-body table{
    width:100%; border-collapse:collapse;
    font-size:14px;
    border:1px solid var(--v2-line) !important;
    border-radius:var(--v2-r); overflow:hidden;
}
.pv2 .chad-spec-body table td,
.pv2 .chad-spec-body table th{
    border:0 !important;
    border-top:1px solid var(--v2-line) !important;
    padding:11px 14px !important;
    text-align:left;
    vertical-align:top;
}
.pv2 .chad-spec-body table tr:first-child td,
.pv2 .chad-spec-body table tr:first-child th{ border-top:0 !important; }
.pv2 .chad-spec-body table th,
.pv2 .chad-spec-body table td:first-child{
    background:transparent !important;
    color:var(--v2-ink) !important;
    font-weight:700;
    width:38%;
}
.pv2 .chad-spec-body table tr:nth-child(even){ background:var(--v2-soft) !important; }
.pv2 .chad-spec-body ul{ padding-left:20px; }
.pv2 .chad-spec-body li{ margin:5px 0; }

/* ---------------------------------------------------------------- reviews */

.pv2 .chad-rating-summary{
    display:flex; flex-wrap:wrap; align-items:center; gap:20px;
    background:var(--v2-soft) !important;
    border:1px solid var(--v2-line) !important;
    border-radius:var(--v2-r-lg) !important;
    padding:20px !important;
    margin-bottom:20px !important;
}
.pv2 .chad-rating-score{ min-width:132px; text-align:center; }
.pv2 .chad-rating-score .num{
    font-size:52px; font-weight:800; line-height:1;
    color:var(--v2-navy) !important;
    letter-spacing:-1.5px;
}
.pv2 .chad-rating-score .stars{ color:var(--v2-gold) !important; font-size:17px; margin:6px 0 2px; }
.pv2 .chad-rating-score .cnt{ color:var(--v2-muted) !important; font-size:13px; }
.pv2 .chad-rating-bars{ flex:1 1 240px; min-width:220px; }
.pv2 .chad-rating-bars .bar-row{
    display:flex; align-items:center; gap:10px;
    margin:6px 0; font-size:13px; color:var(--v2-body);
}
.pv2 .chad-rating-bars .bar{
    flex:1; height:10px;
    background:#e2e7f3 !important;
    border-radius:var(--v2-pill); overflow:hidden;
}
/* product-page.css repaints this green with !important. */
.pv2 .chad-rating-bars .fill{
    height:100%;
    background:linear-gradient(90deg,var(--v2-gold),#caa00f) !important;
    border-radius:var(--v2-pill);
    transition:width var(--v2-slow) var(--v2-ease);
}
.pv2 .chad-rating-bars .bc{ width:26px; text-align:right; color:var(--v2-muted); }

.pv2 #writeReview{ background:transparent !important; }
.pv2 .comment-list > li{
    border:1px solid var(--v2-line);
    border-radius:var(--v2-r);
    padding:14px;
    margin-bottom:10px;
    background:var(--v2-surface);
}

/* ------------------------------------------------------------ video review */

.pv2-video{
    background:var(--v2-surface);
    border:1px solid var(--v2-line);
    border-radius:var(--v2-r-lg);
    padding:16px;
    margin:20px 0 0;
}
.pv2-video-title{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    margin:0 0 13px;
    font-size:17px; font-weight:800; color:var(--v2-ink);
}
.pv2-video-title i{ color:#FF0000; font-size:20px; }
.pv2-video-title small{ color:var(--v2-muted); font-weight:600; font-size:13px; }
.pv2-video-frame{
    position:relative;
    width:100%; max-width:320px; margin:0 auto;
    aspect-ratio:9/16;
    border-radius:var(--v2-r-lg);
    overflow:hidden;
    background:#000;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.26);
}
.pv2-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pv2-video-poster{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    /* hqdefault is 4:3 and letterboxed for shorts — crop the bars away. */
    transform:scale(1.35);
}
.pv2-video-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:66px; height:66px;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:50%;
    background:rgba(255,0,0,.92); color:#fff; font-size:22px;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    transition:transform var(--v2-fast) var(--v2-ease), background var(--v2-fast) var(--v2-ease);
}
.pv2-video-frame:hover .pv2-video-play{ transform:translate(-50%,-50%) scale(1.08); background:#f00; }
.pv2-video-play:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(232,185,35,.7); }

/* ========================================================= accessibility */

@media (prefers-reduced-motion:reduce){
    .pv2 *,
    .pv2 *::before,
    .pv2 *::after{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}