/* ---- Brand tokens as defaults (report P0-3) ------------------------------
   Root cause: the global default link colour is #CC3366 (visible on the cart
   product name, checkout breadcrumb, skip-link). Default text is #333.
   Clean fix later: set these in Kit 7 globals (Elementor session, needs approval).
   :root body = (0,1,2) — outranks the Kit's element-level defaults, loses to any
   intentional widget-level colour. */
/* ---- TOKEN NAMESPACE STATUS (resolved 2026-08-01 — see DECISIONS.md D-106) ---
   Four namespaces coexist. This is deliberate, not drift, and the split is:

     --rv3-* / --rv-* / --rasvo-v2-*   CANONICAL. The V2 visual system. All new
                                       work uses these. Defined in
                                       rasvo-v2-design-system.php.
     --rasvo-*  (this block)           COMPAT ONLY. The original brand spec
                                       values. They are NOT dead — they supply
                                       document-level text/link defaults and the
                                       terracotta CTA fill. Do not delete.

   Where the two disagree, CANONICAL wins on painted surfaces; the values below
   survive only as inherited defaults. Concretely: --rasvo-cream (#F5EFE2) and
   --rasvo-gold (#C9A027) are referenced here but are out-painted everywhere by
   --rv-cream (#FAF9F6) and --rv-gold (#8C6D44). That is intended — the V2 system
   is the brand's current answer. The BRAND SPEC DOC, not this file, is the thing
   that is out of date.

   Removed 2026-08-01 as genuinely unreferenced (0 var() reads repo-wide):
     --rasvo-navy-soft (#33404F)  --rasvo-ease-inout (see rasvo-motion-v1.php)
   ---------------------------------------------------------------------------- */
:root {
    --rasvo-navy: #0D1B2A;
    --rasvo-terracotta: #C2542B;
    --rasvo-gold: #C9A027;
    --rasvo-cream: #F5EFE2;
    --rasvo-paper: #FFFEFA;
}
:root body { color: var(--rasvo-navy); }
:root body a { color: var(--rasvo-navy); }

/* Header cart badge: Bootstrap red → terracotta via Elementor's own hook variable
   (its rule reads var(--items-indicator-background-color, #d9534f)); hide the
   noisy "0" when empty. */
:root { --items-indicator-background-color: var(--rasvo-terracotta); }
:root .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter="0"] { display: none; }

/* ---- Primary-button radius unification --------------------------------------
   WAS 8px (KNOWN_ISSUES #46). That predates the V2 design lock, which settled on
   square primaries — rasvo-v2-custom.css §8 ships `border-radius:0!important` on
   the newsletter/hero CTAs and won for .single_add_to_cart_button and
   .checkout-button on specificity. It did NOT target .rasvo-sticky-atc__btn, so
   the sticky bar was the one button still rounded: measured 8px against the
   in-page ADD TO BAG's 0px, on the same page, for the same action (Review 5
   issue #4). 0 here makes the three agree instead of two-against-one.
   !important: the frozen page-scoped CSS on Product 272 / Cart 278 sets its own
   radius with !important (see CART_SIGNOFF QA notes) — cascade override, no template edit. */
:root .single_add_to_cart_button,
:root .checkout-button,
:root .rasvo-sticky-atc__btn { border-radius: 0 !important; }

/* ---- MOCKUP-ERA garment scaling (report P0-4) -----------------------------
   Measured: garment bbox is 38-39% × 52-54% of the PNG, centered (cx 50 / cy 51).
   scale 1.5 → garment ≈ 80% of frame height. `scale` (not transform:) composes
   with any Elementor hover transform instead of replacing it.
   REMOVE THIS BLOCK when real photography lands — shoot files fill the frame
   natively (IMAGE_CONTRACT.md). */
/* Loop 268 cards — Home / Shop / Related / Cart-Recommended */
.elementor-268 .rasvo-card__media { overflow: hidden; }
.elementor-268 .rasvo-card__media img { scale: 1.5; }
/* PDP main image (same 800×660 mockups) */
.woocommerce-product-gallery__image { overflow: hidden; }
.woocommerce-product-gallery__image a > img:not(.zoomImg) { scale: 1.5; }
/* Mini-cart + cart line-item thumbnails */
.elementor-menu-cart__product-image { overflow: hidden; }
.elementor-menu-cart__product-image img,
.woocommerce-cart-form .product-thumbnail img { scale: 1.5; }
.woocommerce-cart-form .product-thumbnail { overflow: hidden; }
/* Homepage hero tee is already 66-69% of frame — gentle nudge only. */
img[src*="rasvo-hero-tee"] { scale: 1.15; }
/* Never zoom a placeholder icon (2 products still lack featured images). */
img[src*="woocommerce-placeholder"] { scale: 1 !important; }

/* ---- Card affordances (report P1-1) ---------------------------------------
   Whole card = one tap target via stretched link on the image anchor.
   The anchor stays untransformed so ::after anchors to the loop item. */
.elementor-268.e-loop-item { position: relative; }
.elementor-268 .rasvo-card__media a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
/* Size chips: real data, but they read as buttons while being decorative.
   Restyle as a quiet mono spec line — passive info, honest affordance.
   Keeps .is-oos strikethrough from the existing card CSS.

   :not(:has(.rasvo-qb__chips)) — this rule predates the quick-buy, where the
   chips became genuinely interactive <button>s. .rasvo-qb is itself a <span>
   inside .rasvo-card__sizes, so at 0,2,1 this rule was silently handing the
   quick-buy wrapper `margin-right:.8em` (9.6px at 12px) and pulling BUY NOW
   10px off the card's right edge on every card sitewide — the residue of
   Review 5 issue #3 after the container paddings were zeroed. Both quick-buy
   branches emit .rasvo-qb__chips, so one guard scopes this back to the legacy
   decorative-span path it was written for. */
.elementor-268 .rasvo-card__sizes:not(:has(.rasvo-qb__chips)) span {
    border: 0;
    background: none;
    padding: 0;
    margin-right: .8em;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--rasvo-v2-muted-on-light);
}

/* ---- PDP gallery thumbnails (report P1-6) ---------------------------------
   Dormant until products carry gallery images; styles Woo's flexslider thumbs
   to brand when they appear. */
.woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; }
.woocommerce-product-gallery .flex-control-thumbs li { list-style: none; width: 72px; }
.woocommerce-product-gallery .flex-control-thumbs img {
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: .65;
    cursor: pointer;
    transition: opacity .2s, border-color .2s;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 1;
    border-color: var(--rasvo-gold);
}

/* ---- Sticky mobile add-to-cart (report P0-5) — shell; JS below toggles ---- */
.rasvo-sticky-atc {
    /* Height of the band this bar occludes at the bottom of the viewport.
       The bar is display:none until shown, so JS cannot measure it at init —
       it reads this token instead (see the price IntersectionObserver below).
       Keep in sync if the padding/chip row below ever changes: one row of 44px
       chips + 10px row-gap + 2x10px padding + 44px CTA row ≈ 118px.
       ponytail: a token, not a ResizeObserver — the bar has two fixed layouts. */
    --rasvo-atc-occlusion: 118px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--rasvo-cream);
    border-top: 1px solid rgba(13, 27, 42, .12);
    box-shadow: 0 -6px 24px rgba(13, 27, 42, .10);
}
.rasvo-sticky-atc.is-visible { display: flex; }
.rasvo-sticky-atc__info { flex: 1; min-width: 0; }
.rasvo-sticky-atc__name {
    display: block;
    font-family: "Geist", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--rasvo-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Navy, not terracotta (Review 5 issue #4). Terracotta is reserved for the buy
   action; painting the price with it put two oranges side by side in a 358px
   row and diluted the one signal the bar exists to carry. */
.rasvo-sticky-atc__price {
    font-family: "Geist", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--rasvo-navy);
}
/* Same primary-CTA token as every other button on the site: Geist Mono,
   uppercase, tracked, square. It shipped as sentence-case Geist 600 with an
   8px radius — measured side by side with the in-page ADD TO BAG it read as a
   different design system's button (Review 5 issue #4). text-transform does the
   casing so the JS keeps emitting the human string "Add to bag" for a11y. */
.rasvo-sticky-atc__btn {
    flex-shrink: 0;
    padding: 12px 22px;
    background: var(--rasvo-terracotta);
    color: var(--rasvo-paper);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid var(--rasvo-terracotta);
    cursor: pointer;
}
/* Size chips inside the sticky bar. The product NAME is dropped whenever chips
   are present — it is the page's own <h1> two lines up, and at 397px the row
   only fits price + chips + button. Price stays: it is the one fact a shopper
   re-checks at the moment of buying. */
.rasvo-sticky-atc:has(.rasvo-sticky-atc__sizes) .rasvo-sticky-atc__name { display: none; }
.rasvo-sticky-atc:has(.rasvo-sticky-atc__sizes) .rasvo-sticky-atc__info { flex: 0 0 auto; }
/* Price shows only once the page's own price has scrolled out of view — see the
   second IntersectionObserver. Avoids stating ₹799 twice on one screen. */
.rasvo-sticky-atc .rasvo-sticky-atc__info { display: none; }
.rasvo-sticky-atc.has-own-price .rasvo-sticky-atc__info { display: block; }
/* Chips get their own full-width row (KNOWN_ISSUES #114). They shipped at
   26x26 — clears the WCAG 2.2 AA 24px floor but is far under Apple's 44pt /
   Google's 48dp, so thumbs mis-tap the size right before paying.
   44px cannot fit on one row: price (~40) + 5x44 + gaps + button needs ~412px
   against the 358px available at 390px wide. Wrapping is the only honest fix —
   one row of full-size targets, then price + CTA. The tab bar already yields
   to this bar (rasvo-mobile-tabbar.php), so the extra row costs no other chrome. */
.rasvo-sticky-atc { flex-wrap: wrap; row-gap: 10px; }
.rasvo-sticky-atc__sizes {
    display: flex;
    gap: 6px;
    order: -1;             /* size first, then price + CTA — the decision order */
    flex: 1 0 100%;
}
.rasvo-sticky-atc__size {
    flex: 1 1 auto;        /* share the row: ~66px each at 390px */
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    background: transparent;
    border: 1px solid rgba(13, 27, 42, .22);
    border-radius: 2px;    /* --rasvo-v2-radius, not the stray 4px */
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px;              /* sitewide floor — a size label is reading text */
    line-height: 1;
    color: var(--rasvo-navy);
    cursor: pointer;
}
.rasvo-sticky-atc__size.is-selected {
    background: var(--rasvo-navy);
    border-color: var(--rasvo-navy);
    color: var(--rasvo-paper);
}
.rasvo-sticky-atc__size[disabled] {
    opacity: .32;
    text-decoration: line-through;
    cursor: not-allowed;
}
.rasvo-sticky-atc__size:focus-visible {
    outline: 2px solid var(--rasvo-terracotta);
    outline-offset: 1px;
}
/* Button shrinks to share the row once chips are in it. */
.rasvo-sticky-atc:has(.rasvo-sticky-atc__sizes) .rasvo-sticky-atc__btn {
    flex: 1 1 auto;
    padding: 12px 14px;
    /* 12px, not the old 14px: same primary-CTA token as the in-page ADD TO BAG,
       which is the whole point of issue #4 — one button, one size. */
    font-size: 12px;
}
@media (min-width: 768px) { .rasvo-sticky-atc { display: none !important; } }