/* ==========================================================================
   chadmama — product page v3 (draft, ?ui=v3 only)

   Thin delta over product-v2.css, loaded AFTER it so it wins. Everything is
   scoped under body:has(.pv3) — same technique product-v2.css already uses
   for the sticky bar (a SIBLING of <main>, so a .pv3-scoped rule alone would
   never reach it) — so this file can only ever affect the draft, never the
   live v2 page, v1 rollback, or any other page on the shop.

   Brief: /root/CHADMAMA_PRODUCT_PAGE_V3_BRIEF.md
   Job A — recover the wasted vertical space above the breadcrumb.
   Job B — compress the info block so the option chips and CTAs are visible
           together, and make picking an option visibly change the photo.
   ========================================================================== */

/* ==========================================================================
   A. Header stack — do NOT edit header.blade.php, it is shared by every
   page on the shop. Everything here only fires when a .pv3 element exists
   anywhere in the document, i.e. only on this draft page.
   ========================================================================== */

@media (max-width:767px){
    /* topbar marquee: ~35px -> ~18px */
    body:has(.pv3) .topbar{ height:18px !important; }
    body:has(.pv3) .topbar marquee{
        font-size:10px !important;
        line-height:18px !important;
    }
    body:has(.pv3) .topbar .container-fluid{ padding-top:0 !important; padding-bottom:0 !important; }
}

/* Mobile header row (logo / hamburger / cart): trim vertical padding. bundle.css
   sets `.axil-mainmenu{padding:15px 0}` under max-width:991px — answered with
   !important, same pattern the rest of this file uses against that stylesheet. */
body:has(.pv3) header.mobile .axil-mainmenu{ padding:4px 0 !important; }
body:has(.pv3) header.mobile .header-brand a img{ max-height:26px !important; }

/* Search bar: shop still needs it on the product page, it just does not need
   this much room. mt-2 (Bootstrap, 8px) -> 2px; input 40px -> 32px tall.
   THE REAL SPACE HOG here turned out not to be the search bar itself but its
   wrapper: bundle.css's generic `.header-top-dropdown{padding-bottom:15px;
   margin-bottom:15px;border-bottom:1px solid #f1f1f1}` is written for a
   different header variant (a dropdown row with a divider under it) but the
   class is reused verbatim by .mobilesearch, so the search box was carrying
   31px of dead space + an invisible-on-white border nobody asked for. */
body:has(.pv3) .mobilesearch .header-top-dropdown{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    border-bottom:0 !important;
}
body:has(.pv3) .mobilesearch .axil-search{ margin-top:2px !important; }
body:has(.pv3) .mobilesearch .axil-search input{ height:32px !important; }
body:has(.pv3) .mobilesearch .axil-search .icon{ font-size:14px !important; }

/* Breadcrumb */
body:has(.pv3) .pv2-crumb{ margin:2px 0 4px !important; }

/* Logo removed, search bar moved into its column by the script at the end of
   show_v3.blade.php (see the comment there) — this whole rule set just makes
   that one merged row lay out right: hamburger and cart shrink to their own
   content width, the search box (now sitting in what used to be the logo's
   col-4) grows to take every pixel that frees up. Net effect: the entire
   second row (the old full-width search bar) is gone. */
body:has(.pv3) header.mobile .axil-mainmenu .col-2,
body:has(.pv3) header.mobile .axil-mainmenu .col-6.header_action{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
}
body:has(.pv3) header.mobile .axil-mainmenu .pv3-search-col{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
}
/* .mobilesearch / .header-top-dropdown are plain block divs in the original
   markup — fine when the search bar was its own full-width row, but stacked
   into a flex column here a block div doesn't center ITS OWN content, so the
   input pill sat pinned to the top of its box while the hamburger (a small
   icon) got centered by the row — the two visibly disagreed on baseline.
   Making every wrapper level flex+centered fixes that at its root instead of
   papering over it with a guessed offset. */
body:has(.pv3) header.mobile .axil-mainmenu .pv3-search-col{
    display:flex !important;
    align-items:center !important;
}
body:has(.pv3) .pv3-search-form{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    margin:0 !important;
}
body:has(.pv3) .pv3-search-form .mobilesearch{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
}
body:has(.pv3) .pv3-search-form .header-top-dropdown{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    padding:0 !important; margin:0 !important; border:0 !important;
}
body:has(.pv3) .pv3-search-form .axil-search{ margin:0 !important; width:100%; }
body:has(.pv3) .pv3-search-form .axil-search input{ height:38px !important; }

/* ==========================================================================
   B. Info block — thin delta over v2's buy box.
   ========================================================================== */

/* B.1 — one meta row, guaranteed single-line. v2 let the stock pill wrap to
   its own line on narrow phones; nowrap + horizontal scroll (same technique
   .pv2-crumb already uses) means it can never grow to a second line. */
body:has(.pv3) .pv2-meta{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -ms-overflow-style:none; scrollbar-width:none;
    gap:6px 10px !important;
    margin-bottom:8px !important;
    padding-bottom:1px;
}
body:has(.pv3) .pv2-meta::-webkit-scrollbar{ display:none; }
body:has(.pv3) .pv2-rating,
body:has(.pv3) .pv2-sku,
body:has(.pv3) .pv2-stock{ flex:0 0 auto; white-space:nowrap; }

/* B.2 — option label inline with its own chips: "মাইক্রোফোন: [1 Mic] [2 Mic]"
   instead of a label row sitting above a chip row. .pv2-opt-head and
   .pv2-chips are already the two direct children of .pv2-opt-group in the
   v2 markup — making the GROUP itself the flex row is enough to put them on
   one line and wrap only the chips, no markup change needed. The small
   "chosen" word next to the label is now redundant with the highlighted chip
   itself, so it is dropped here to keep the row tight. */
body:has(.pv3) .pv2-opts{ gap:10px !important; }
body:has(.pv3) .pv2-opt-group{
    display:flex; flex-wrap:wrap; align-items:center;
    column-gap:9px; row-gap:6px;
}
body:has(.pv3) .pv2-opt-head{ margin-bottom:0 !important; }
body:has(.pv3) .pv2-opt-chosen{ display:none; }

/* Mini product thumbnail on colour chips (job 3 — "make it obvious that
   picking an option changes the photo"). Rendered server-side from
   $v->image; sits beside the existing colour dot, not instead of it. */
body:has(.pv3) .pv2-chip-thumb{
    width:26px; height:26px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 auto;
    border:1px solid var(--v2-line);
    background:#fff;
}
body:has(.pv3) .pv2 .pv2-chip.is-on .pv2-chip-thumb{
    box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(255,255,255,.35);
}

/* Gallery acknowledges the swap: a brief gold ring on the main stage, driven
   by the pv3-only script appended at the end of show_v3.blade.php. Passive —
   only ever toggles this one class, never touches Tracker Pro state. */
body:has(.pv3) .chad-main-stage.pv3-flash{
    animation:pv3FlashRing .55s cubic-bezier(.22,.61,.36,1);
}
@keyframes pv3FlashRing{
    0%{   box-shadow:0 0 0 0 rgba(232,185,35,.75) inset, 0 0 0 0 rgba(232,185,35,.55); }
    60%{  box-shadow:0 0 0 3px rgba(232,185,35,.55) inset, 0 0 0 3px rgba(232,185,35,.3); }
    100%{ box-shadow:0 0 0 0 rgba(232,185,35,0) inset, 0 0 0 0 rgba(232,185,35,0); }
}
@media (prefers-reduced-motion:reduce){
    body:has(.pv3) .chad-main-stage.pv3-flash{ animation-duration:.01ms; }
}

/* B.5 — "আপনার নির্বাচন" card: compact where it stays, dropped on phones —
   the chips now carry the photo themselves and the sticky bar already
   repeats the selection, so this card was pure duplication on the
   narrowest screens where every row of height matters most. */
body:has(.pv3) .pv2-chosen{
    padding:7px 10px !important;
    gap:9px !important;
    margin-bottom:10px !important;
}
body:has(.pv3) .pv2-chosen-img{ width:38px !important; height:38px !important; }
@media (max-width:575px){
    body:has(.pv3) .pv2-chosen{ display:none !important; }
}

/* B.6 — price-list accordion relocation is a markup move in show_v3.blade.php
   (now sits after the CTAs), not a CSS rule — nothing to override here beyond
   a little breathing room above it in its new spot. */
body:has(.pv3) .pv2-buy > .pv2-chart{ margin-top:2px; }

/* ============================================================
   Product-page buy CTAs — same flat pill as the card buttons (2026-08-18)

   Before this, three different looks were live: the v3 sticky bar's order
   button was a navy gradient with a GOLD label, the in-page pair was a navy
   gradient + white outline, and homedecor's older product page ran a green
   order button with an orange add-to-cart. All of them now speak the card
   pill's language — flat #1B2A5B, white label, radius 9, no gradient, no
   drop shadow — with add-to-cart kept as the outline variant so the primary
   action still leads.

   Appended to the LAST stylesheet the product page loads (product-v3.css on
   chadmama, product-page.css on homedecor); the bundle loads earlier, so
   putting it in premium.css would lose to these files.
   ============================================================ */

/* primary — order now */
.pv2-bar .pv2-bar-btn,
.chad-buybar .bbtn,
.pv2-cta--order,
.order_now_btn,
.order_now_btn_m,
.single-product-thumb .order_now_btn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important;
  background:#1B2A5B !important; background-image:none !important;
  color:#fff !important; border:0 !important; border-radius:9px !important;
  box-shadow:none !important; text-shadow:none !important;
  font-weight:700 !important; letter-spacing:.2px !important;
  transition:background-color .18s ease !important;
}
.pv2-bar .pv2-bar-btn *,
.chad-buybar .bbtn *,
.pv2-cta--order *,
.order_now_btn *,
.single-product-thumb .order_now_btn *{ color:#fff !important; }

.pv2-bar .pv2-bar-btn:hover,
.chad-buybar .bbtn:hover,
.pv2-cta--order:hover,
.order_now_btn:hover,
.order_now_btn_m:hover,
.single-product-thumb .order_now_btn:hover{
  background:#16224a !important; background-image:none !important;
  color:#fff !important; transform:none !important; box-shadow:none !important; filter:none !important;
}
.pv2-bar .pv2-bar-btn:active,
.pv2-cta--order:active,
.order_now_btn:active,
.single-product-thumb .order_now_btn:active{ background:#101a3a !important; }

/* secondary — add to cart (outline, so the primary still leads) */
.pv2-bar-cart,
.pv2-cta--cart,
.add_cart_btn,
.single-product-thumb .add_cart_btn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important;
  background:#fff !important; background-image:none !important;
  color:#1B2A5B !important; border:1.5px solid #1B2A5B !important; border-radius:9px !important;
  box-shadow:none !important; text-shadow:none !important;
  font-weight:700 !important; letter-spacing:.2px !important;
  transition:background-color .18s ease, color .18s ease !important;
}
.pv2-bar-cart *,
.pv2-cta--cart *,
.add_cart_btn *,
.single-product-thumb .add_cart_btn *{ color:inherit !important; }
.pv2-bar-cart:hover,
.pv2-cta--cart:hover,
.add_cart_btn:hover,
.single-product-thumb .add_cart_btn:hover{
  background:#1B2A5B !important; background-image:none !important; color:#fff !important;
  transform:none !important; box-shadow:none !important; filter:none !important;
}

/* one height per context, so the pair lines up */
.pv2-cta--order,.pv2-cta--cart,
.order_now_btn,.add_cart_btn,
.single-product-thumb .order_now_btn,.single-product-thumb .add_cart_btn{
  min-height:52px !important; padding:10px 16px !important; font-size:16px !important;
}
.pv2-bar .pv2-bar-btn,.pv2-bar-cart,.chad-buybar .bbtn{
  min-height:48px !important; height:48px !important; padding:0 16px !important; font-size:15px !important;
}
@media (max-width:575px){
  .pv2-cta--order,.pv2-cta--cart,
  .order_now_btn,.add_cart_btn,
  .single-product-thumb .order_now_btn,.single-product-thumb .add_cart_btn{
    min-height:48px !important; font-size:15px !important; padding:10px 12px !important;
  }
  .pv2-bar .pv2-bar-btn,.pv2-bar-cart,.chad-buybar .bbtn{
    min-height:46px !important; height:46px !important; font-size:14px !important; padding:0 12px !important;
  }
}

/* product-v2.css scopes the in-page pair as `.pv2 .pv2-cta--*` (two classes),
   which outranks the single-class rules above — repeat them at that weight. */
.pv2 .pv2-cta--order{
  background:#1B2A5B !important; background-image:none !important;
  color:#fff !important; border:0 !important; border-radius:9px !important;
  box-shadow:none !important; font-weight:700 !important;
}
.pv2 .pv2-cta--order:hover{ background:#16224a !important; background-image:none !important; filter:none !important; }
.pv2 .pv2-cta--order:active{ background:#101a3a !important; }
.pv2 .pv2-cta--cart{
  background:#fff !important; background-image:none !important;
  color:#1B2A5B !important; border:1.5px solid #1B2A5B !important; border-radius:9px !important;
  box-shadow:none !important; font-weight:700 !important;
}
.pv2 .pv2-cta--cart:hover{ background:#1B2A5B !important; color:#fff !important; }

/* Sticky bar on a phone: the order button is a flex item next to the thumbnail,
   product name, price and the cart button, so it got squeezed to ~75px and
   "অর্ডার করুন" wrapped onto two lines inside a 46px pill. Drop the thumbnail and
   the name (the name is already ellipsised to nothing at that width), keep the
   label on one line, and let the primary button take the freed space. */
@media (max-width:575px){
  .pv2-bar .pv2-bar-btn,
  .pv2-bar-cart,
  .chad-buybar .bbtn{ white-space:nowrap !important; }
  .pv2-bar .pv2-bar-btn{ flex:1 1 auto !important; min-width:120px !important; }
  .pv2-bar-img,
  .pv2-bar-txt{ display:none !important; }
}
/* bar price was still the old green accent next to now-navy buttons */
.pv2-bar .pv2-bar-price,
.chad-buybar .bp{ color:#1B2A5B !important; }

/* ==========================================================================
   Z. Typeface — the product page runs entirely on Hind Siliguri (Bengali +
   Latin), overriding the storefront's Plus Jakarta Sans display face. Scoped
   to this page only via body:has(.pv3); the sticky buy bar is a SIBLING of
   <main> so it is reached the same way the rest of this file reaches it.
   Icon fonts (FontAwesome fa/fas/far/fal/fab, flaticon) are excluded so their
   glyphs keep rendering. Also loads on mobile — the buy bar and every chip.
   ========================================================================== */
body:has(.pv3),
body:has(.pv3) *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]):not([class^="flaticon"]):not([class*=" flaticon"]){
    font-family:'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ==========================================================================
   C. Option block — responsive fit (2026-09-08)

   Reported: on a phone the option buttons sat unevenly, the colour row broke
   into a ragged 2 + 1, and the stock pill was cut off at the right edge.
   Measured across 8 viewports before the fix: .pv2-meta lost 116px of its
   own width at 320px, 76px at 360, 46px at 390, 24px at 412, 6px at 430 —
   i.e. "স্টকে আছে (100)" was clipped on EVERY phone size — while the chips
   came out 116-134px wide in the same row.

   Layout only. No class, markup or script is touched, so the selector still
   paints its choice inline on these very buttons and every Tracker Pro event
   keeps travelling the path it already travels.
   ========================================================================== */

/* C.1 — the meta row may wrap again on phones.
   B.1 above forced nowrap + overflow-x:auto to keep it to one line. On a
   narrow phone that does not shrink the row, it CLIPS it: the pill is still
   there, just past the edge, and a shopper cannot see the stock count without
   discovering a horizontal scroll nobody looks for. Wrapping is the lesser
   cost — it costs one line only on the phones where the row genuinely does
   not fit, and keeps the single line everywhere it does. */
@media (max-width:767.98px){
    body:has(.pv3) .pv2-meta{
        flex-wrap:wrap !important;
        overflow-x:visible !important;
        row-gap:6px !important;
    }
}

/* C.2 — phones: label on its own line, chips on an even grid.
   B.2 puts the label inline with the chips, which reads well on a wide buy
   column and cramps on a phone: "মাইক্রোফোন" ate the width two chips needed,
   and three colours then wrapped to a ragged 2 + 1 of three different widths.
   Giving the chips the full row and laying them out as equal columns fixes
   the arrangement and the orientation in one move — a short label and a long
   one now occupy the same box, and every row lines up. */
@media (max-width:767.98px){
    body:has(.pv3) .pv2-opt-group{ display:block !important; }
    body:has(.pv3) .pv2-opt-head{ margin-bottom:6px !important; }

    body:has(.pv3) .pv2-chips{
        display:grid;
        gap:8px;
    }
    body:has(.pv3) .pv2 .pv2-chip{
        width:auto !important;          /* grid stretches the item to its track */
        min-width:0;                    /* without this a long label refuses to shrink */
        justify-content:center;
        padding:8px 10px !important;
        gap:6px;
    }
    /* Last-resort guard: a colour name longer than anything on the shop today
       truncates instead of pushing its chip past the card edge. */
    body:has(.pv3) .pv2-chip-label{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    /* The thumbnail and the dot say the same thing; on a phone the dot gives
       back the width the label needs. */
    body:has(.pv3) .pv2-chip-thumb{ width:22px; height:22px; }
    body:has(.pv3) .pv2-dot{ width:16px; height:16px; }
}

/* An explicit column count, not auto-fit. auto-fit sizes from a minimum track
   width, and any minimum wide enough to hold "2 MIcrophones" at 430px was
   wider than half of a 320px card — so the grid silently dropped to ONE column
   on the small phones, which is the layout this block exists to avoid. Fixing
   the count instead makes the result identical on every handset. */
@media (max-width:575.98px){
    body:has(.pv3) .pv2-chips{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    /* 320px leaves ~128px a column; trim the padding and the type a notch so a
       long option name still fits inside its box rather than truncating. */
    body:has(.pv3) .pv2 .pv2-chip{ padding:8px 8px !important; font-size:13px; }
}
@media (min-width:576px) and (max-width:767.98px){
    body:has(.pv3) .pv2-chips{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* C.3 — desktop/tablet: keep the inline label, even out the chip widths.
   The chips were 113-121px and 119-132px in the same row; a floor width makes
   a "Pink" pill and a "2 MIcrophones" pill read as one set of buttons rather
   than as offcuts, without stretching either to fill the column. */
@media (min-width:768px){
    body:has(.pv3) .pv2 .pv2-chip{
        min-width:132px;
        justify-content:center;
    }
}

/* C.4 — the meta row also clips on DESKTOP (2026-09-08, second pass).
   C.1 only lifted B.1's nowrap on phones. Sweeping all six variable products
   showed the same clip on wide screens for the products with longer names, where
   the buy column — not the viewport — is the constraint:
   product 375 lost 50px of the row at 1280 and 1440, 376 lost 77px, 382 lost 18px.
   Nothing about "one line" is worth hiding the stock count, so the row is allowed
   to wrap at every width and B.1's nowrap is retired outright. */
body:has(.pv3) .pv2-meta{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    row-gap:6px !important;
}

/* C.5 was tried and REVERTED: `flex:1 1 132px` on the chips did equalise a full
   row, but a wrapped last row then stretched its one or two chips to 200px
   (product 376 at 1280px went from four even 132px chips to 133-200px over two
   rows). The 2px stagger C.3 leaves when two labels both clear the floor is not
   worth that. Do not re-add flex-grow here. */

/* ==========================================================================
   D. Product page legibility (2026-09-08). Colour only — nothing that feeds
   Tracker Pro, and no geometry, so the option/photo binding is untouched.
   Measured contrast against the real composited background at 412px.
   ========================================================================== */

/* Was #8A93A6: SKU 2.83:1, breadcrumb 2.88:1, TAB LABELS 2.88:1, review link
   3.09:1, video caption 3.09:1. The tab labels matter most — they are
   navigation, not decoration. #656F85 is the minimum that clears 4.5:1 on the
   lightest of those backdrops (#F2F5FC) and reaches 5.04:1 on white. */
body:has(.pv3) .pv2-sku,
body:has(.pv3) .pv2-crumb a,
body:has(.pv3) .nav-tabs .nav-link,
body:has(.pv3) .pv2-rev-count,
body:has(.pv3) .pv2-video-title small{ color:#656F85 !important; }

/* In-stock pill: #0F9D58 on its own 10%-green wash was 3.13:1 */
body:has(.pv3) .pv2-stock.is-in .t{ color:#0C7D46 !important; }

/* Gallery "4/7" counter: white on a pill that is only 45% black, so over a
   pale product photo it fell to 3.99:1. Darkening the pill (not the text)
   keeps the look and clears 4.7:1 even against a pure-white photo. */
body:has(.pv3) .chad-slide-counter.pv2-counter{
    background:rgba(0,0,0,.55) !important;
}