/* --- WooCommerce default buttons: kill the lavender #E9E6ED / #515151 pill --- *
 * These are Woo-generated (notice "View bag", Apply coupon, Update cart) and were
 * never reached by the Elementor kit, so they shipped in WooCommerce defaults. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type="submit"],
.woocommerce-message a.button,
.woocommerce .cart input.button {
  background: var(--rv-ink, #0C141F) !important;
  color: var(--rv-cream, #FAF9F6) !important;
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 1.7px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  border: 1px solid var(--rv-ink, #0C141F) !important;
  border-radius: 0 !important;
  padding: 13px 22px !important;
  transition: background .25s var(--rv-e, ease), color .25s var(--rv-e, ease) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input[type="submit"]:hover,
.woocommerce .cart input.button:hover {
  background: transparent !important;
  color: var(--rv-ink, #0C141F) !important;
}
/* Secondary weight for the coupon control so it does not rival Proceed to checkout */
.woocommerce .coupon button.button,
.woocommerce .coupon input.button {
  background: transparent !important;
  color: var(--rv-ink, #0C141F) !important;
}
/* Disabled "Update cart" should read intentional, not broken */
.woocommerce .cart input.button[disabled],
.woocommerce button.button:disabled {
  opacity: .38 !important;
  background: transparent !important;
  color: var(--rv-ink, #0C141F) !important;
  cursor: not-allowed !important;
}

/* --- My Account: gold button was #FAF9F6 on #D8B98B = 1.78:1 (fails AA).
 *     Navy on the same gold = 9.89:1. Also align to the site button language. --- */
.page-id-33 .elementor-button,
.woocommerce-account .elementor-button {
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 1.7px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
/* Light gold + navy ink = 9.89:1 and far more pop on the dark hero than the
   original near-white-on-tan (1.78:1) or a dark bronze fill (4.55:1). */
.page-id-33 .elementor-element-564d69e .elementor-button,
.woocommerce-account .elementor-element-564d69e .elementor-button {
  background-color: #D8B98B !important;
  color: var(--rv-ink, #0C141F) !important;
  border-color: #D8B98B !important;
}
/* --- Contact: the Google-map column (wrong city) was removed. The surviving
 *     info column kept the two-column centring maths — Elementor computed
 *     --container-widget-width to calc((1 - 1) * 100%) = 0% — so it floated to
 *     x=392 leaving the right half empty. Re-align to the 72px page gutter. --- */
.page-id-37 .elementor-element-056aad4 { --container-widget-width: 100% !important; }
.page-id-37 .elementor-element-056aad4 > .e-con-inner {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.page-id-37 .elementor-element-56b85c8 {
  width: 100% !important;
  max-width: 720px !important;
  margin-inline: 0 !important;
}

/* Tan link colour appears nowhere else in the palette */
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .lost_password a { color: var(--rv-ink, #0C141F) !important; text-decoration: underline; }

/* Checkout/cart/account form labels are fixed at source in rasvo-v2-custom.css
   (was 9px @ 3.68:1). Only the table headers, which that rule does not reach,
   are lifted here off the same 9px scale. */
.woocommerce-checkout .woocommerce-checkout-review-order table th,
.woocommerce-cart .cart_totals th { font-size: 12px !important; color: rgba(12,20,31,.78) !important; }

/* Shop archive: the breadcrumb container renders 0px tall but still spends a
   22px bottom margin. Waste at every width. */
.elementor-element-564313d { margin-bottom: 0 !important; }

/* Product card colour-dot row: 0px tall on every product (the whole catalogue is
   single-colour Black today) but still spending a 10px top margin. Waste at every
   width — restore the margin here if per-colour swatches ever go live. */
.rasvo-card__colors { margin-top: 0 !important; }

/* ================================================================== *
 * DESKTOP / TABLET — shop archive above-the-fold density
 *
 * On a 13" MacBook Air (1440x790 usable in Safari) the header + hero +
 * filter bar + grid padding consumed 540px — 68% of the viewport — before
 * a single product, and the first row's bottom fell at y=1029, i.e. 239px
 * below the fold. No complete product was visible on the shop page.
 * Reclaims ~136px, which brings the full product image row above the fold.
 * ================================================================== */
@media (min-width: 768px) {
  .elementor-element-14730df { padding-top: 18px !important; }   /* was 88 */
  .elementor-element-b4a5830 { margin-bottom: 10px !important; } /* eyebrow, was 14 */
  .elementor-element-8237f51 { margin-bottom: 12px !important; } /* h1, was 18 */
  .elementor-element-8237f51 h1 { font-size: 50px !important; }  /* was 64 → 131px over 2 lines */
  .elementor-element-a453efd { margin-bottom: 16px !important; } /* desc, was 34 */
  .rasvo-filterbar { padding-bottom: 10px !important; }          /* was 22 */
  .rasvo-filterbar > .e-con {
    padding-top: 6px !important;                                  /* was 10 */
    padding-bottom: 6px !important;
  }
  .elementor-element-6cb39c7 { padding-top: 8px !important; }    /* grid, was 34 */

  /* Card meta was 103px of which 45px was spacing, for 68px of content.
   * Trimming it lifts the name + price + sizes above the fold too.
   * (.rasvo-card__body padding is set at source in rasvo-v2-custom.css — it
   *  uses a `padding` shorthand in a later stylesheet, so a longhand override
   *  here would silently lose.) */
  .rasvo-card__row   { padding-top: 4px !important; }            /* was 10 */
  .rasvo-card__sizes { margin-top: 6px !important; }             /* was 10 */
}

/* ================================================================== *
 * MOBILE (Elementor mobile breakpoint on this site = max 767px)
 * ================================================================== */
@media (max-width: 767px) {

  /* --- Fabric strip overwriting itself (Shop + PDP) ---------------- *
   * The strip is flex-nowrap: four stat blocks were squeezed into a
   * 218px group, each laid out 20px wide while its text needed up to
   * 82px (scrollWidth). "1 FACTORY" started at x=234 and ran to x=300,
   * straight through "THE FABRIC STORY" which starts at x=262.
   * Stack the strip and let the stats form a 2x2 grid instead.        */
  .rasvo-fabric {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .rasvo-fabric > .e-con { width: 100% !important; }
  .rasvo-fabric > .e-con:first-child {
    flex-wrap: wrap !important;
    gap: 14px 0 !important;
  }
  .rasvo-fabric > .e-con:first-child > .e-con {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* --- Shop archive: 495px of an 844px viewport was consumed before the
   * first product. Tighten the header rhythm and stop the fit pills
   * wrapping onto a second row (127px tall for three pills).          */
  /* (header padding is set in the above-the-fold budget further down) */

  /* The pills sit one level deeper, in a wrap container: 89+126+118 = 333px
   * of pills plus 2x10px gaps in 335px of space, so "REGULAR — 20" dropped to
   * a second row and the bar stood 121px tall. Trim the pill padding to fit
   * one row, and keep nowrap + scroll so extra filters scroll instead of
   * re-wrapping when categories are added later.                       */
  .rasvo-filterbar { padding-bottom: 10px !important; }
  .rasvo-filterbar > .e-con {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rasvo-filterbar > .e-con::-webkit-scrollbar { display: none; }
  .rasvo-fitpill { flex: 0 0 auto !important; }
  .rasvo-fitpill .elementor-button {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* --- Product card size row: a 14px gap pushed "S M L XL XXL" onto a
   * second line (43px tall) on 5-size products while 3-size products stayed
   * on one (14px), so cards in the same row read as uneven. The glyphs only
   * total 58px in a 157px row — the gap was doing all the damage.      */
  .rasvo-card__sizes { gap: 7px !important; }

  /* ---------------------------------------------------------------- *
   * ONE FULL PRODUCT ROW ABOVE THE FOLD (client request)
   *
   * Real iOS Safari, not the 844px test viewport: 664px layout viewport
   * minus the 59px fixed tab bar = 605px usable. The first card sat at
   * y=419 and was 321px tall (740) — a row could never fit. Budget below
   * lands it at ~287 + ~297 = ~584, leaving ~21px of headroom.
   * ---------------------------------------------------------------- */

  /* Archive header rhythm — 24/14/18/34 was desktop spacing on a phone. */
  .elementor-element-14730df { padding-top: 10px !important; }   /* was 24 */
  .elementor-element-b4a5830 { margin-bottom: 8px !important; }  /* eyebrow, was 14 */
  .elementor-element-8237f51 { margin-bottom: 10px !important; } /* h1, was 18 */
  .elementor-element-8237f51 h1 {
    font-size: 26px !important;                                   /* was 34 → 69px over 2 lines */
    line-height: 1.06 !important;
  }
  /* Archive sub-line ("Drop 01. Cut and printed in Hyderabad, never restocked.")
   * is hidden on phones only — 49px of text plus its margin, and the H1 above it
   * already carries the message. The same copy still appears in the footer and on
   * the fabric strip. Delete this one rule to bring it back. */
  .elementor-element-a453efd { display: none !important; }
  .elementor-element-6cb39c7 { padding-top: 8px !important; }    /* grid, was 24 */

  /* Header bar: 18px top/bottom padding is desktop-generous on a phone. */
  .elementor-element-ab8f218 {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  /* Card meta was 119px against a 202px image. Every product is currently
   * single-colour, so the colour-dot row is 0px tall but still spending a
   * 10px margin. */
  .rasvo-card__colors { margin-top: 0 !important; }
  .rasvo-card__row    { gap: 6px !important; }
  .rasvo-card__sizes  { margin-top: 6px !important; }
}

/* Small phones (iPhone SE / older Android, ~360px of content): the three fit
 * pills need 328px against 320px available, so they scrolled 8px and the last
 * one clipped. Trim a little further so they sit flush. */
@media (max-width: 380px) {
  .rasvo-filterbar > .e-con { gap: 5px !important; }
  .rasvo-fitpill .elementor-button {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ================================================================== *
 * SESSION 32 — design & UX review remediation (all non-payment items)
 * ================================================================== */

/* --- S32.4 Primary CTA accent -------------------------------------
 * Cart + checkout terracotta is set at source in rasvo-v2-custom.css
 * (§31 "primary CTAs"); that one lands, because nothing outranks it.
 * The single-product CTA is declared there too (§41) but LOSES to
 * Elementor's template-272 page CSS — see S32.16 below, which is the
 * override that actually reaches the screen. The focus ring lives
 * here because none existed before and the fill needs one. -------- */
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
  outline: 2px solid var(--rv-ink, #0C141F) !important;
  outline-offset: 2px !important;
}

/* --- S32.5 Checkout selects were 14px while inputs are 16px --------
 * Under 16px iOS zooms the viewport on focus. The shared field rule in
 * rasvo-v2-custom.css sets 16px but a later select rule outranks it. */
.woocommerce-checkout select,
.woocommerce-cart select,
.woocommerce-account select { font-size: 16px !important; }

/* --- S32.6 Coupon row: the bordered box wrapped the whole 732px flex
 * track, so the empty space to the right of APPLY COUPON rendered as a
 * third, empty cell. Border belongs on the field, not the track. --- */
.woocommerce-cart .coupon {
  border: 0 !important;
  gap: 12px !important;
  max-width: 460px !important;
  padding: 0 !important;
}

/* --- S32.7 Cart hierarchy was inverted: line items 24px, the
 * "Bag totals" panel heading 21px. The heading should lead. -------- */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading { font-size: 25px !important; }
.woocommerce-cart td.product-name a { font-size: 18px !important; }

/* --- S32.8 System-font leaks. Everything else is Geist; the rupee
 * glyph and the mini-cart subtotal fell through to -apple-system /
 * Segoe UI. Not scoped to .woocommerce — the header mini-cart drawer
 * renders outside any .woocommerce wrapper, which is why they were
 * missed. ₹ in a fallback face next to Geist digits is visible. ---- */
.woocommerce-Price-currencySymbol,
.woocommerce-Price-amount,
.elementor-menu-cart__subtotal,
.elementor-menu-cart__subtotal strong,
.cart_totals strong,
.product-subtotal strong,
.woocommerce-cart-form a.remove,
.elementor-menu-cart__product-remove a {
  font-family: "Geist", system-ui, sans-serif !important;
}

/* --- S32.9b "Update bag" is disabled until a quantity changes, but a
 * dashed border at 34% opacity reads as broken rather than waiting.
 * Solid, quiet, and clearly inert.
 * html body prefix: rasvo-v2-custom.css sets border-style:dashed with
 * !important at equal specificity and prints later in <head>. ----- */
html body.woocommerce-cart .button:disabled,
html body.woocommerce-cart .button[disabled] {
  border-style: solid !important;
  border-color: rgba(12,20,31,.22) !important;
  opacity: .55 !important;
}

/* --- S32.9 Order-summary micro-type was 9px in the checkout review
 * table — too small to read at the moment money is confirmed. ----- */
.woocommerce-checkout .woocommerce-checkout-review-order table td,
.woocommerce-checkout .woocommerce-checkout-review-order table th,
.woocommerce-cart .cart_totals td,
.woocommerce-cart .cart_totals th,
.woocommerce-checkout .woocommerce-shipping-destination { font-size: 12px !important; }

/* --- S32.10 PDP variation label: "COLOR : Black". The uppercase label
 * carries .13em letter-spacing which is also applied after its last
 * character, pushing the colon off. Pull it back by the same amount. */
.woocommerce div.product .variations .label label { margin-right: -.13em !important; }

/* --- S32.11 Every product is single-colour today, so the colour row
 * was one swatch that looked like an unticked checkbox — pure friction
 * with no choice to make. Hidden only when there is exactly one option;
 * the swatch is auto-selected on load, so the variation still resolves
 * and Add to Bag still enables. Multi-colour products are unaffected
 * and the row returns on its own the day a second colour is added. -- */
.woocommerce div.product .variations tr:has(.variable-items-wrapper li:only-child),
.woocommerce div.product .variations .woo-variation-swatches-wrapper:has(li:only-child) {
  display: none !important;
}

/* --- S32.15 Contact form fields shipped in Elementor's default chrome
 * — full 1px #69727D box, 41px tall — while every commerce field on the
 * site is a quiet underline at 46px. Matched to the checkout treatment
 * so the two forms a customer meets read as one system; 41px also
 * missed the 44px touch target.
 * DELIBERATELY scoped to the Contact page, NOT global: the newsletter
 * forms on the homepage and About sit on dark navy sections, where a
 * dark ink fill and a rgba(12,20,31,.5) underline render invisible
 * (measured 1.02:1). Elementor colours widgets individually rather than
 * the container, so `color:inherit` does not rescue it either. Those
 * keep their own light-on-dark treatment. ------------------------- */
.page-id-37 .elementor-field-textual {
  border: 0 !important;
  border-bottom: 1px solid rgba(12,20,31,.5) !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 46px !important;
  padding: 0 2px !important;
  font-family: "Geist", system-ui, sans-serif !important;
  font-size: 16px !important;
  color: var(--rv-ink, #0C141F) !important;
  transition: border-color .3s var(--rv-e, ease) !important;
}
.page-id-37 textarea.elementor-field-textual {
  height: auto !important;
  min-height: 96px !important;
  padding: 12px 2px !important;
}
.page-id-37 .elementor-field-textual:focus {
  outline: none !important;
  border-bottom-color: var(--rv-ink, #0C141F) !important;
  box-shadow: 0 1px 0 0 var(--rv-ink, #0C141F) !important;
}
.page-id-37 .elementor-field-label { letter-spacing: .04em; }

/* Contact: "Common Questions" was 56px against 48px for every other
 * heading on the page. */
.elementor-element-1791f6e .elementor-heading-title { font-size: 48px !important; }

/* Screen-reader-only region label (see S32.5). Standard clip pattern — never
 * `display:none`, which would hide it from assistive tech too. */
.rasvo-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- S32.16 Primary CTA terracotta — the fix that never reached screen.
 * §41 of rasvo-v2-custom.css already declares
 *   background: var(--rasvo-terracotta,#C2542B) !important
 * on the enabled add-to-bag, and the variable resolves correctly
 * (measured #C2542B on the element). It still painted #141A23 navy:
 * Elementor prints the template-272 page CSS as a <link> AFTER the
 * mu-plugin inline <style>, so at equal specificity its own !important
 * rule wins on document order. Another !important cannot fix that —
 * only specificity can. The doubled class below is (0,6,4) against
 * Elementor's (0,3,1), so it wins regardless of print order.
 * Cart "Proceed to Checkout" and checkout "Place Order" were already
 * terracotta; this makes the PDP match, so "commit to buying" is one
 * colour for the whole funnel instead of navy → terracotta mid-flow.
 * Scoped with :not() to the ENABLED state only — the ghost
 * "SELECT YOUR SIZE" state below is intentional and unchanged. ---- */
html body.single-product form.cart
  button.single_add_to_cart_button.single_add_to_cart_button:not(.disabled):not(.wc-variation-selection-needed) {
  background: var(--rasvo-terracotta, #C2542B) !important;
  background-color: var(--rasvo-terracotta, #C2542B) !important;
  border-color: var(--rasvo-terracotta, #C2542B) !important;
  color: var(--rasvo-paper, #FFFEFA) !important;
}
html body.single-product form.cart
  button.single_add_to_cart_button.single_add_to_cart_button:not(.disabled):not(.wc-variation-selection-needed):hover {
  background: #A84722 !important;
  background-color: #A84722 !important;
  border-color: #A84722 !important;
}

/* --- S32.17 The "SELECT YOUR SIZE" prompt was rgba(20,26,35,.62) on a
 * rgba(20,26,35,.05) tint over #FAF9F6 — measured 4.2:1 at 10.5px,
 * under the 4.5:1 AA floor for small text. --muted-on-light is the
 * token already documented in rasvo-v2-design-system.php as 7.61:1 on
 * paper, so this reuses an existing value rather than inventing one.
 * TRIPLED class, not doubled: §49.15 of rasvo-v2-custom.css already
 * doubles `.disabled.disabled`, which ties this at (0,5,4) — and that
 * file prints later in <head>, so a tie loses. Three wins outright. */
html body.single-product form.cart
  button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.disabled::after,
html body.single-product form.cart
  button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.wc-variation-selection-needed::after {
  color: var(--rasvo-v2-muted-on-light, #4A515C) !important;
}

/* --- S32.18 The add-to-bag confirmation sat flush at y=104 against a
 * 104px header, so its 1px top border was swallowed by the header's
 * bottom edge and the panel read as clipped. Gap, not a redesign. - */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { margin-top: 14px !important; }

/* --- S32.20 Search removed from the storefront (client decision, 2026-07-31).
 * 25 SKUs across two pages of /shop/ — browsing is faster than searching, and
 * the header "SEARCH" was not even a search box: it linked to `/?s=` with an
 * EMPTY query, i.e. straight to a blank results page. Removing the feature
 * beats maintaining an empty state for it (the S32.19 block that did that is
 * deleted, not commented out — see CHANGELOG for the restore path).
 * The link lives in FROZEN Header 467, so it is hidden here rather than edited
 * out of the template — reversible, no template edit. Matched by href, not by
 * Elementor element ID, so re-saving the header cannot resurrect it.
 * `display:none` (not visibility/opacity) so it also leaves the a11y tree and
 * the tab order. The mobile tab-bar entry is removed at source in
 * rasvo-mobile-tabbar.php; `/?s=` itself redirects — see the PHP below. ---- */
.elementor-location-header .elementor-widget:has(a[href*="?s="]),
.elementor-location-header a[href*="?s="] { display: none !important; }

/* ---------------- S32 · MOBILE ---------------- */
@media (max-width: 767px) {

  /* S32.12 Hero focal point — INVESTIGATED, DELIBERATELY NOT CHANGED.
   * rasvo-hero-ss26.jpg is 2560x1000. In a 375x675 mobile container
   * `cover` shows only 21.7% of the image width, so no focal point can
   * frame the whole tee. Measured alternatives:
   *   74%  → shoulder fills the frame, graphic further off-screen (worse)
   *   90%  → tee centred, but the CTRL/ALT/CHILL artwork lands directly
   *          behind the headline; "identity." collides with "TER SIX"
   *   63%  → (shipped) graphic sits right of the text, copy stays on
   *          clean fabric — the best available compromise
   * The real fix is a portrait-crop hero asset for mobile, which is a
   * photography deliverable, not a CSS one. Logged in KNOWN_ISSUES. */

  /* S32.13 PDP size grid ran 3-up then 2-up stretched (113px vs 173px),
   * so the second row read as a different control. Even 3-column grid.
   *
   * S33.9 REVISED: the even 3-column grid fixed the width mismatch but kept the
   * wrap — S/M/L then XL/XXL with an empty third cell, an orphan row that still
   * read as unfinished. auto-fit fits all five on one row at 390px (~64px each,
   * comfortably over the 44px target) AND collapses its empty tracks, so a
   * 3-size product still stretches to fill the row instead of leaving two dead
   * columns. One rule, correct for any size count — no breakpoint guessing.
   *
   * Scoped to .button-variable-items-wrapper (sizes), NOT every swatch wrapper.
   * The colour wrapper shares the class, and stretching 36px colour dots across
   * 173px grid tracks left them floating at random intervals. Colour swatches
   * are fixed-size chips and belong in the default flex row. */
  .woocommerce div.product .variations .button-variable-items-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)) !important;
    gap: 8px !important;
  }
  .woocommerce div.product .variations .button-variable-items-wrapper li {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* S32.14 Tap targets. 36% of interactive elements were under the
   * 24px WCAG 2.5.8 minimum — editorial inline links at 14-15px and
   * footer nav at 20px. Padding only, no visual size change.
   * Product card titles are deliberately excluded: the whole card is
   * already a link (Session 9), so the title is not the only target. */
  .elementor-location-footer .elementor-icon-list-item > a { padding-block: 7px !important; }
  .elementor-location-footer .elementor-icon-list-item { margin-block: 0 !important; }

  main .elementor-widget-heading a,
  main a.elementor-button-link,
  .elementor-location-header .elementor-button-link {
    display: inline-block;
    padding-block: 7px;
  }

  /* Header BAG toggle was 56x14. The bottom tab bar carries a large BAG
   * target too, but the header one is still tappable and shouldn't be a
   * 14px sliver. Padding only — the label does not move. */
  .elementor-location-header .elementor-menu-cart__toggle_button {
    padding-block: 9px !important;
  }
}