/* ==========================================================================
   LUXE — Timeless Essentials
   Pixel-Perfect Fluid Scaling (Desktop & 4K)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & ROOT VARIABLES
   -------------------------------------------------------------------------- */
   :root {
    /* Typography */
    --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --font-sans:
      "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      sans-serif;
  
    /* Color Palette */
    --bg-page: #f9f9f8;
    --bg-white: #ffffff;
    --bg-section-alt: #f3f4f3;
    --color-dark: #1a1c1c;
    --color-dark-subtle: #444844;
    --color-muted: #666666;
    --color-light-muted: #7f7f7f;
    --color-border: #ebebe6;
    --color-border-dark: #1a1c1c;
  
    /* Transitions */
    --transition: 0.2s ease-in-out;
  
    /* Shipping & Returns page tokens (reference width: 1280px) */
    --sr-font-inter: "Inter", sans-serif;
    --sr-font-playfair: "Playfair Display", serif;
    --sr-text: #444844;
    --sr-dark: #1a1c1c;
    --sr-black: #181e1a;
    --sr-white: #fff;
    --sr-light-bg: #f3f4f3;
    --sr-card-bg: #f9f9f8;
    --sr-muted: #c4c7c3;
    --sr-assist-text: #959b96;
    --sr-fs-12: 0.9375vw;
    --sr-fs-16: 1.25vw;
    --sr-fs-24: 1.65vw;
    --sr-fs-32: 2.5vw;
    --sr-lh-12: 0.9375vw;
    --sr-lh-24: 1.875vw;
    --sr-lh-32: 2.3vw;
    --sr-lh-42: 3.28125vw;
    --sr-ls-12: 0.09375vw;
  
    /* Thank You page tokens */
    --thankyou-font-serif: "Playfair Display", serif;
    --thankyou-font-sans: "Inter", sans-serif;
    --thankyou-dark: #181e1a;
    --thankyou-text: #444844;
    --thankyou-muted: #777b78;
    --thankyou-border: #dedfdd;
    --thankyou-white: #ffffff;
  
    /* Upsell page tokens */
    --upsell-font-serif: "Playfair Display", serif;
    --upsell-font-sans: "Inter", sans-serif;
    --upsell-dark: #181e1a;
    --upsell-text: #444844;
    --upsell-muted: #777b78;
    --upsell-border: #dedfdd;
    --upsell-white: #ffffff;
    --upsell-soft: #f9f9f8;
    --upsell-green: #dceccb;
    --upsell-green-text: #68775d;
    --upsell-fs-12: 0.9375vw;
    --upsell-fs-16: 1.25vw;
    --upsell-lh-12: 0.9375vw;
    --upsell-lh-24: 1.875vw;
    --upsell-ls-ui: 0.09375vw;
  
    /* app.css is injected after this file and defaults `body` to Arial/15px via
       these two variables. Declaring them keeps the theme's own Inter/16px. */
    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif;
    --font-body-size: 16px;
  }
  
  /* --------------------------------------------------------------------------
     2. CSS RESET & GLOBAL BASE
     -------------------------------------------------------------------------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
  }
  
  body {
    font-family: var(--font-sans);
    color: var(--color-dark);
    background-color: var(--bg-page);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-serif);
    color: var(--color-dark);
    font-weight: 400;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0.75rem;
  }
  
  p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-muted);
  }
  
  a {
    color: var(--color-dark);
    text-decoration: none;
    transition: opacity var(--transition);
  }
  
  a:hover {
    opacity: 0.75;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* --------------------------------------------------------------------------
     3. MOBILE DRAWER, SEARCH MODAL & MINI-CART (SHARED OVERLAYS)
     -------------------------------------------------------------------------- */
  .mobile-nav-toggle {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }
  
  .mobile-drawer-overlay[data-app-open],
  .mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 80vw;
    height: 100vh;
    background: var(--bg-white);
    z-index: 1050;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition:
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  }
  
  .mobile-drawer[data-app-open],
  .mobile-drawer.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  
  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
  }
  
  .mobile-drawer .brand-luxe {
    font-family: var(--font-serif);
    font-size: 24px !important;
    line-height: 1.2 !important;
    color: var(--color-dark);
    letter-spacing: 0;
    text-transform: uppercase;
  }
  
  .mobile-drawer-close {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-drawer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .mobile-drawer-nav a {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1c1c;
    text-transform: capitalize;
    letter-spacing: 0.08em;
    text-decoration: none;
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    transition: all var(--transition);
  }
  
  .shop-page .mobile-drawer-nav a[href^="shop"],
  .shop-page .mobile-drawer-nav a[href^="/shop"],
  .collections-page .mobile-drawer-nav a[href^="collections"],
  .collections-page .mobile-drawer-nav a[href^="/collections"],
  .about-page .mobile-drawer-nav a[href^="about"],
  .about-page .mobile-drawer-nav a[href^="/about"],
  .sustainability-page .mobile-drawer-nav a[href^="sustainability"],
  .sustainability-page .mobile-drawer-nav a[href^="/sustainability"],
  .mobile-drawer-nav a:hover,
  .mobile-drawer-nav a.active {
    background-color: #1a1c1c;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
  }
  
  .search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(28, 28, 28, 0.5);
    z-index: 1070;
    display: flex;
    justify-content: center;
    padding-top: 8.333333vw; /* 120px */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }
  
  .search-modal-overlay[data-app-open],
  .search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .search-modal-box {
    width: 100%;
    max-width: 38.888889vw; /* 560px */
    height: fit-content;
    background: var(--bg-white);
    padding: 2.222222vw; /* 32px */
    margin: 0 1.666667vw; /* 24px */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(-1.111111vw);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .search-modal-overlay[data-app-open] .search-modal-box,
  .search-modal-overlay.active .search-modal-box {
    transform: translateY(0);
  }
  
  .search-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.666667vw; /* 24px */
  }
  
  .search-modal-label {
    font-family: var(--font-serif);
    font-size: 1.666667vw; /* 24px */
    color: var(--color-dark);
  }
  
  .search-modal-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.833333vw; /* 12px */
    border-bottom: 1px solid var(--color-border-dark);
    padding-bottom: 0.833333vw; /* 12px */
  }
  
  .search-modal-input {
    flex: 1;
    border: none;
    outline: none;
    /* app.css ships a zero-specificity :where() default of padding:3px 8px for
       every text input. 1.express-store never loads that file, so its field keeps
       the UA default (1px 2px) and sits 4px shorter. Declare it to match. */
    padding: 1px 2px;
    font-family: var(--font-sans);
    font-size: 1.111111vw; /* 16px */
    color: var(--color-dark);
    background: transparent;
  }
  
  .search-modal-top .mobile-drawer-close img {
    width: 1.388889vw;
    height: 1.388889vw;
  }
  
  .search-modal-input-wrap img {
    width: 1.25vw;
    height: 1.25vw;
  }
  
  .minicart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1055;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }
  
  .minicart-overlay[data-app-open],
  .minicart-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .minicart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 29.166667vw;
    /* 420px on 1440px screen */
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-white);
    z-index: 1060;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.35s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  }
  
  .minicart-drawer[data-app-open],
  .minicart-drawer.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  
  .minicart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.666667vw;
    /* 24px on 1440px screen */
    border-bottom: 1px solid var(--color-border);
  }
  
  .minicart-header .mobile-drawer-close img {
    width: 1.388889vw;
    /* 20px on 1440px screen */
    height: 1.388889vw;
    /* 20px on 1440px screen */
  }
  
  .minicart-title {
    font-family: var(--font-serif);
    font-size: 1.5vw;
    /* 21.6px on 1440px screen */
    font-weight: 400;
    color: var(--color-dark);
  }
  
  .minicart-count {
    font-family: var(--font-sans);
    font-size: 1vw;
    /* 14.4px on 1440px screen */
    color: var(--color-muted);
  }
  
  .minicart-shipping-banner {
    background: #f4f3ee;
    padding: 0.833333vw 1.666667vw;
    /* 12px 24px on 1440px screen */
    border-bottom: 1px solid var(--color-border);
  }
  
  .shipping-banner-text {
    font-family: var(--font-sans);
    font-size: 0.763889vw;
    /* 11px on 1440px screen */
    font-weight: 500;
    letter-spacing: 0.020833vw;
    /* 0.3px on 1440px screen */
    color: var(--color-dark-subtle);
    display: block;
    margin-bottom: 0.444444vw;
    /* 6.4px on 1440px screen */
  }
  
  .shipping-progress-bar {
    width: 100%;
    height: 0.208333vw;
    /* 3px on 1440px screen */
    background: #e5e4de;
    overflow: hidden;
  }
  
  .shipping-progress-fill {
    height: 100%;
    background: var(--color-dark);
  }
  
  .minicart-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.666667vw;
    /* 24px on 1440px screen */
    display: flex;
    flex-direction: column;
    gap: 1.666667vw;
    /* 24px on 1440px screen */
  }
  
  .minicart-item {
    display: flex;
    gap: 1.111111vw;
    /* 16px on 1440px screen */
    padding-bottom: 1.388889vw;
    /* 20px on 1440px screen */
    border-bottom: 1px solid #f0efea;
  }
  
  .minicart-item-img {
    width: 5.555556vw;
    /* 80px on 1440px screen */
    height: 7.291667vw;
    /* 105px on 1440px screen */
    object-fit: cover;
    background-color: #f4f3ee;
    flex-shrink: 0;
  }
  
  .minicart-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.277778vw;
    /* 4px on 1440px screen */
  }
  
  .minicart-item-title {
    font-family: var(--font-sans);
    font-size: 1vw;
    /* 14.4px on 1440px screen */
    font-weight: 500;
    color: var(--color-dark);
  }
  
  .minicart-item-meta {
    font-family: var(--font-sans);
    font-size: 0.833333vw;
    /* 12px on 1440px screen */
    color: var(--color-muted);
  }
  
  .minicart-item-price {
    font-family: var(--font-sans);
    font-size: 1vw;
    /* 14.4px on 1440px screen */
    font-weight: 600;
    color: var(--color-dark);
  }
  
  .minicart-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    height: 1.944444vw;
    /* 28px on 1440px screen */
  }
  
  .minicart-qty-btn {
    background: transparent;
    border: none;
    width: 1.666667vw;
    /* 24px on 1440px screen */
    height: 100%;
    cursor: pointer;
    font-size: 0.972222vw;
    /* 14px on 1440px screen */
    line-height: 1;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  
  .minicart-qty-btn:hover {
    background: #f4f3ee;
  }
  
  .minicart-qty-val {
    font-family: var(--font-sans);
    font-size: 0.833333vw;
    /* 12px on 1440px screen */
    font-weight: 500;
    padding: 0 0.555556vw;
    /* 8px on 1440px screen */
  }
  
  .minicart-remove-link {
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.763889vw;
    /* 11px on 1440px screen */
    text-decoration: underline;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0;
    text-underline-offset: 0.208333vw;
    /* 3px on 1440px screen */
    transition: color var(--transition);
  }
  
  .minicart-remove-link:hover {
    color: var(--color-dark);
  }
  
  .minicart-footer {
    padding: 1.666667vw;
    /* 24px on 1440px screen */
    border-top: 1px solid var(--color-border);
    background: var(--bg-page);
  }
  
  .minicart-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-sans);
    font-size: 1.111111vw;
    /* 16px on 1440px screen */
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 0.388889vw;
    /* 5.6px on 1440px screen */
  }
  
  .minicart-footer-note {
    font-family: var(--font-sans);
    font-size: 0.763889vw;
    /* 11px on 1440px screen */
    color: var(--color-muted);
    margin-bottom: 1.388889vw;
    /* 20px on 1440px screen */
  }
  
  .btn-minicart-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.333333vw;
    /* 48px on 1440px screen */
    background: var(--color-dark);
    color: var(--bg-white);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    /* 12px on 1440px screen */
    letter-spacing: 0.083333vw;
    /* 1.2px on 1440px screen */
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity var(--transition);
  }
  
  .btn-minicart-checkout:hover {
    opacity: 0.85;
  }
  
  .btn-minicart-viewcart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.916667vw;
    /* 42px on 1440px screen */
    background: transparent;
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.763889vw;
    /* 11px on 1440px screen */
    letter-spacing: 0.083333vw;
    /* 1.2px on 1440px screen */
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--transition);
  }
  
  .btn-minicart-viewcart:hover {
    background: var(--color-dark);
    color: var(--bg-white);
  }
  
  /* --------------------------------------------------------------------------
     4. DESKTOP BASE & PROPORTIONAL FLUID SCALING (4K & ZOOM IN/OUT)
     -------------------------------------------------------------------------- */
  
  /* Fluid Container Layout */
  .container-luxe {
    width: 100%;
    max-width: none;
    padding-left: max(24px, 9.5vw);
    padding-right: max(24px, 9.5vw);
    margin-left: auto;
    margin-right: auto;
  }
  
  .section-padding-luxe {
    padding-top: 4.3vw;
    padding-bottom: 4.3vw;
  }
  
  /* Header & Navigation */
  .site-header-luxe {
    background: var(--bg-page);
    height: 6.57222vw;
    border-bottom: 0.078125vw solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1030;
  }
  
  .header-luxe-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
  }
  
  .site-header-luxe .brand-luxe {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.222222vw;
    line-height: 3.645833vw;
    letter-spacing: 0;
    color: var(--color-dark);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  
  .brand-luxe-img {
    display: block;
    width: auto;
    height: 2.777778vw;
  }
  
  .desktop-nav {
    display: flex;
    align-items: center;
    height: 100%;
    position: absolute;
    top: calc(50% + 0.0390625vw);
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  
  .nav-luxe {
    display: flex;
    align-items: center;
    gap: 3.04vw;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .nav-link-luxe {
    display: flex;
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    line-height: 1.041667vw;
    letter-spacing: 0.104167vw;
    text-transform: capitalize;
    color: var(--color-light-muted);
    text-decoration: none;
    transition: color var(--transition);
    padding: 0.347222vw 0;
    position: relative;
  }
  
  /* The header ships from partials/header.html — one copy for every page — so it
     cannot hard-code which link is active. The body class names the section. */
  .shop-page .nav-link-luxe[href^="shop"],
  .shop-page .nav-link-luxe[href^="/shop"],
  .collections-page .nav-link-luxe[href^="collections"],
  .collections-page .nav-link-luxe[href^="/collections"],
  .about-page .nav-link-luxe[href^="about"],
  .about-page .nav-link-luxe[href^="/about"],
  .sustainability-page .nav-link-luxe[href^="sustainability"],
  .sustainability-page .nav-link-luxe[href^="/sustainability"],
  .nav-link-luxe:hover,
  .nav-link-luxe.active {
    color: #181e1a;
    opacity: 1;
  }
  
  .shop-page .nav-link-luxe[href^="shop"]::after,
  .shop-page .nav-link-luxe[href^="/shop"]::after,
  .collections-page .nav-link-luxe[href^="collections"]::after,
  .collections-page .nav-link-luxe[href^="/collections"]::after,
  .about-page .nav-link-luxe[href^="about"]::after,
  .about-page .nav-link-luxe[href^="/about"]::after,
  .sustainability-page .nav-link-luxe[href^="sustainability"]::after,
  .sustainability-page .nav-link-luxe[href^="/sustainability"]::after,
  .nav-link-luxe:hover::after,
  .nav-link-luxe.active::after {
    content: "";
    position: absolute;
    bottom: -0vw;
    left: 0;
    width: 100%;
    height: 0.04167vw;
    background: #181e1a;
  }
  
  .header-actions-luxe {
    display: flex;
    align-items: center;
    gap: 0.8vw;
  }
  
  .icon-action-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--color-dark);
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8vw;
    height: 1.8vw;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--transition);
  }
  
  .icon-action-btn:hover {
    opacity: 0.75;
  }
  
  .icon-action-btn img {
    width: 1.2625vw;
    height: 1.2625vw;
    display: block;
  }
  
  .icon-badge {
    position: absolute;
    top: -0.247222vw;
    right: -0.247222vw;
    width: 1.2vw;
    height: 1.2vw;
    font-size: 0.702778vw;
    background: var(--color-dark);
    color: var(--bg-white);
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  
  /* =========================================================
     HERO BANNER SECTION
     Desktop + 4K Fluid Scaling
     ========================================================= */
  
  .hero-section {
    padding-top: 4.3vw;
    padding-bottom: 4.3vw;
  }
  
  .hero-framed-wrapper {
    position: relative;
    width: 100%;
    height: 60.5vw;
    min-height: 560px;
    padding: 4.861111vw;
    overflow: hidden;
    background-image: url("../images/hero-banner.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* Dark Overlay */
  .hero-framed-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
  }
  
  /* Hero Content */
  .hero-framed-content {
    position: absolute;
    left: 6.5vw;
    bottom: 6.5vw;
    max-width: 72.194444vw;
    color: var(--bg-white);
    z-index: 2;
  }
  
  /* Hero Title */
  .hero-framed-title {
    margin: 0 0 1.5vw;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 4.5vw;
    line-height: 1.22;
    letter-spacing: -0.088889vw;
    color: var(--bg-white);
  }
  
  /* Hero Subtitle */
  .hero-framed-subtitle {
    margin: 0 0 2.3vw;
    max-width: 38.194444vw;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.25vw;
    line-height: 1.52;
    letter-spacing: 0.02vw;
    color: rgba(255, 255, 255, 0.9);
  }
  
  /* Hero Button */
  .btn-hero-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16vw;
    height: 2.9999vw;
    padding: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    line-height: 1;
    letter-spacing: 0.07vw;
    text-transform: uppercase;
    background: var(--bg-white);
    color: #1c1c1c;
    border: 1px solid var(--bg-white);
    box-sizing: border-box;
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
    transition:
      background-color var(--transition),
      color var(--transition),
      border-color var(--transition);
  }
  
  /* Button Hover */
  .btn-hero-white:hover {
    background: transparent;
    color: var(--bg-white);
    border-color: #f9f9f9;
    opacity: 1;
  }
  
  /* Featured Edit Section */
  .featured-section {
    padding-top: 4.3vw;
    padding-bottom: 4.3vw;
  }
  
  .featured-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 0.078125vw solid var(--color-border);
    padding-bottom: 0.702889vw !important;
    margin-bottom: 3.296667vw !important;
  }
  
  .featured-section-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.2vw;
    line-height: 3.645833vw;
    letter-spacing: 0;
    color: var(--color-dark);
  }
  
  .link-view-all {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    line-height: 1.041667vw;
    letter-spacing: 0.07vw;
    text-transform: uppercase;
    color: #1a1c1c;
    text-decoration: underline;
    text-underline-offset: 7px;
  }
  
  .product-grid-3col,
  .outer-product-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.166667vw 1.666667vw;
    width: 100%;
    position: relative;
    /* padding-bottom: 10vw; */
  }
  
  .product-card-luxe {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    text-decoration: none;
  }
  
  .product-img-box {
    display: block;
    width: 100%;
    aspect-ratio: 368 / 490;
    overflow: hidden;
    background-color: #f4f3ee;
  }
  
  .product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  
  .product-card-luxe:hover .product-img-box img {
    transform: scale(1.03);
  }
  
  .product-card-info {
    margin-top: 1.8vw !important;
  }
  
  .product-title-luxe,
  .product-title-luxe a {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #1a1c1c;
  }
  
  .product-price-luxe {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #1a1c1c;
  }
  
  .search-results-section .product-title-luxe {
    display: block;
    margin-bottom: 0.6vw !important;
  }
  
  .search-results-section .product-price-luxe {
    display: block;
    color: var(--color-muted);
  }
  
  .product-subtext-luxe {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    color: #444844;
    display: block;
    margin-top: 0.347222vw !important;
  }
  
  /* Philosophy Section */
  .philosophy-section.section-padding-luxe {
    padding-top: max(48px, 4.3vw);
    padding-bottom: max(64px, 8vw);
  }
  
  .philosophy-bg {
    background: #f3f4f3;
    overflow: hidden;
  }
  
  .philosophy-card-box {
    padding: max(32px, 4.21vw) max(16px, 1.3vw) max(32px, 4.31vw) max(32px, 10.487768vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
  
  .philosophy-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: max(12px, 0.833333vw);
    line-height: max(12px, 0.833333vw);
    letter-spacing: max(1.2px, 0.083333vw);
    text-transform: uppercase;
    color: #444844;
    display: block;
    margin-bottom: max(16px, 1.636111vw);
  }
  
  .philosophy-quote {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: max(24px, 2.222222vw);
    line-height: max(32px, 2.916667vw);
    letter-spacing: 0;
    color: #1a1c1c;
    max-width: max(360px, 36.111vw);
    margin-bottom: max(20px, 1.777778vw);
  }
  
  .link-discover {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: max(12px, 0.833333vw);
    line-height: 100%;
    letter-spacing: max(1.2px, 0.083333vw);
    text-transform: uppercase;
    color: #1a1c1c;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: max(6px, 0.394444vw) !important;
    transition: opacity var(--transition);
  }
  
  .link-discover:hover {
    opacity: 0.75;
  }
  
  .link-discover img {
    width: max(14px, 0.972222vw);
    height: max(14px, 0.972222vw);
    display: inline-block;
    vertical-align: middle;
  }
  
  .philosophy-img-box {
    width: 100%;
    height: max(450px, 45.1vw);
    padding: calc(max(24px, 4.69vw) - 2px) max(24px, 4.41111vw) max(24px, 4.69vw) max(32px, 6.905554vw);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .philosophy-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Site Footer */
  .site-footer-luxe.section-padding-luxe {
    background: var(--bg-page);
    border-top: 1px solid var(--color-border);
    /* padding-top: 8vw;
    padding-bottom: 4.3vw; */
  
    padding-top: 5vw;
    padding-bottom: 5vw;
  }
  
  .site-footer-luxe .row.gy-5 {
    row-gap: 4.166667vw !important;
    --bs-gutter-x: 2.083333vw;
  }
  
  .site-footer-luxe .brand-luxe {
    font-size: 2.222222vw;
    line-height: 3.645833vw;
    margin-bottom: 2.083333vw !important;
    margin-top: 1vw !important;
  }
  
  .site-footer-luxe .brand-luxe-img {
    height: 1.3vw;
  }
  
  .footer-subtext-luxe {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    line-height: 1.233333vw;
    letter-spacing: 0.083333vw;
    color: #444844;
    text-transform: uppercase;
  }
  
  .footer-nav-columns {
    display: flex;
    justify-content: flex-end;
    gap: 7vw;
    padding-top: 0.347222vw;
  }
  
  .footer-nav-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    color: #444844;
    margin-bottom: 1.736111vw;
    text-transform: uppercase;
  }
  
  .footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  
  .footer-nav-list li {
    margin-bottom: 1.041667vw;
  }
  
  .footer-nav-list li:last-child {
    margin-bottom: 0;
  }
  
  .footer-nav-list a {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #1a1c1c;
    text-decoration: none;
    transition: opacity var(--transition);
  }
  
  .footer-nav-list a:hover {
    opacity: 0.7;
  }
  
  /* ==========================================================================
     SHOP PAGE 
     ========================================================================== */
  
  /* Shop Hero Section */
  .shop-hero-luxe {
    padding-top: 4.3vw;
    padding-bottom: 5.955556vw;
  }
  
  .shop-page-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 4.444444vw;
    /* 64px @ 1440px */
    line-height: 5vw;
    /* 72px @ 1440px */
    color: #1a1c1c;
    letter-spacing: -0.088889vw;
  }
  
  .shop-page-title.mb-3 {
    margin-bottom: 1.598889vw !important;
  }
  
  .shop-page-subtitle {
    font-family: var(--font-sans);
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    line-height: 2.1vw;
    letter-spacing: 0.0125vw;
    max-width: 42.138889vw;
    color: var(--color-muted);
  }
  
  /* Filters & Sorting Bar */
  .shop-filter-bar {
    padding-top: 0.736111vw;
    padding-bottom: 2.25vw;
    margin-bottom: 4.555556vw;
    border-bottom: 0.069444vw solid var(--color-border);
    box-sizing: border-box;
  }
  
  .filter-pills-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1vw !important;
  }
  
  .btn-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.978889vw;
    padding: 0 1.278889vw;
    font-family: var(--font-sans);
    font-size: 0.902778vw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.017361vw;
    background: transparent;
    border: 0.069444vw solid var(--color-border);
    border-radius: 0;
    color: var(--color-dark);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
  
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease;
  }
  
  .btn-filter-pill:hover,
  .btn-filter-pill[data-app-current],
  .btn-filter-pill.active {
    background: var(--color-dark);
    color: var(--bg-white);
    border-color: var(--color-dark);
    /* These pills render as <a> (the server writes the category href into
       them), so they inherit the sitewide a:hover{opacity:.75} and the solid
       black washes out to grey. 1.express-store uses a <button>, which does
       not dim -- match it. */
    opacity: 1;
  
    font-weight: 600;
    text-shadow: 0 0 0 currentColor;
  }
  
  .sort-dropdown-box {
    display: inline-flex;
    align-items: center;
    gap: 0.416667vw;
  }
  
  .sort-label-luxe {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #7f7f7f;
    text-align: right;
    vertical-align: middle;
    margin: 0;
    white-space: nowrap;
    min-height:24px;   
  }
  
  .sort-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  
  .form-select-luxe {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #1a1c1c;
    text-align: left;
    vertical-align: middle;
    border: none;
    background: transparent;
    padding: 0 1.763889vw 0 0;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* width: 6.333333vw; */
    width: fit-content;
    white-space: nowrap;
  }
  
  .sort-select-wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: max(8px, 0.555556vw);
    height: max(5px, 0.347222vw);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%231A1C1C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }
  
  .form-select-luxe:focus {
    outline: none;
    box-shadow: none;
  }
  
  /* Featured Signature Section */
  .signature-section-luxe {
    margin-bottom: 4.166667vw;
  }
  
  .signature-grid-luxe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.566667vw 1.666667vw;
    width: 100%;
  }
  
  .signature-featured-wide {
    grid-column: span 2;
  }
  
  .signature-featured-single {
    grid-column: span 1;
  }
  
  .signature-card-luxe {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    width: 100%;
  }
  
  .signature-img-box {
    width: 100%;
    height: 33vw;
    overflow: hidden;
    position: relative;
    background: #f4f3ee;
  }
  
  .signature-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .signature-card-luxe:hover .signature-img-box img {
    transform: scale(1.03);
  }
  
  a.signature-img-box.d-block:hover {
    opacity: 1;
  }
  
  .badge-signature-luxe {
    position: absolute;
    top: 1.411111vw;
    left: 1.751111vw;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.694444vw;
    line-height: 1.041667vw;
    letter-spacing: 0;
    padding: 0.14667vw 0.783333vw;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: #1a1c1c;
    text-transform: capitalize;
    vertical-align: middle;
    z-index: 2;
  }
  
  .signature-title-luxe,
  .signature-title-luxe a {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.666667vw;
    /* 24px @ 1440px */
    line-height: 2.333333vw;
    /* 33.6px @ 1440px */
    letter-spacing: 0;
    color: #1a1c1c;
    text-decoration: none;
    vertical-align: middle;
  }
  
  .signature-price-luxe {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    /* 18px @ 1440px */
    line-height: 1.944444vw;
    /* 28px @ 1440px */
    letter-spacing: 0;
    color: #1a1c1c;
    vertical-align: middle;
  }
  
  .signature-featured-divider {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  
  .signature-divider-line {
    border: 0;
    border-top: 0.069444vw solid var(--color-border);
    margin: 0;
  }
  
  /* Pagination Section */
  .shop-pagination-section {
    padding-top: 2.2vw;
    padding-bottom: 3.333333vw;
    position: relative;
  }

  .shop-pagination-section-alternate{
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
  }

  .shop-pagination-section-alternate .pagination-count-luxe{
    right:0;
  }
  
  .page-link-luxe {
    width: 3.194444vw;
    /* 46px @ 1440px */
    height: 2.916667vw;
    /* 42px @ 1440px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.972222vw 0.972222vw 0.972222vw 1.041667vw;
    border: 0.069444vw solid var(--color-border);
    color: var(--color-dark);
    background: transparent;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px */
    line-height: 0.833333vw;
    /* 12px */
    letter-spacing: 0.083333vw;
    /* 1.2px */
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    transition: all var(--transition);
  }
  
  .pagination {
    gap: 1.111111vw;
    /* 16px @ 1440px */
  }
  
  .page-link-luxe:hover,
  .page-link-luxe[data-app-current],
  .page-link-luxe.active {
    background: var(--color-dark);
    color: var(--bg-white);
    border-color: var(--color-dark);
  }
  
  .page-link-luxe.disabled {
    pointer-events: none;
    border-color: transparent;
    color: var(--color-muted);
  }
  
  .pagination-count-luxe {
    position: absolute;
    right: max(24px, 9.5vw);
    font-size: 0.833333vw;
    color: var(--color-muted);
    font-family: var(--font-sans);
  }
  
  /* Optics Collection Banner */
  .optics-bg {
    background: #f3f4f3;
    overflow: hidden;
  }
  
  .optics-img-box {
    width: 100%;
    height: 100%;
    min-height: 22.222222vw;
    max-width: 100%;
    overflow: hidden;
    padding-right: 0.625vw;
    /* 9px @ 1440px */
    box-sizing: border-box;
  }
  
  .optics-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .optics-card-box {
    padding-top: 3.9vw;
    padding-right: 0vw;
    padding-bottom: 4.166667vw;
    padding-left: 7.787778vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
  
  .optics-label {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0.333333vw;
    text-transform: uppercase;
    color: #181e1a;
    margin-bottom: 0.963333vw;
    vertical-align: middle;
  }
  
  .optics-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.222222vw;
    line-height: 2.916667vw;
    letter-spacing: 0;
    color: #1a1c1c;
    margin-bottom: 1.9vw;
    vertical-align: middle;
  }
  
  .optics-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #444844;
    max-width: 25vw;
    margin-bottom: 1.996667vw;
    vertical-align: middle;
  }
  
  .btn-discover-more {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    padding: 1.1vw 2.188889vw;
    background: var(--color-dark);
    color: var(--bg-white);
    display: inline-block;
    width: fit-content;
    text-decoration: none;
    vertical-align: middle;
    transition: opacity var(--transition);
  }
  
  .btn-discover-more:hover {
    opacity: 0.85;
    color: var(--bg-white);
  }
  
  /* Newsletter Section */
  .newsletter-section-luxe {
    padding: 8.5vw 0;
    background: #f3f4f3;
    text-align: center;
  }
  
  .newsletter-content-luxe {
    max-width: 47.8vw;
    margin: 0 auto;
    padding: 0 1.666667vw;
  }
  
  .newsletter-title-luxe {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.222222vw;
    line-height: 2.916667vw;
    letter-spacing: 0;
    color: var(--color-dark);
    text-align: center;
    vertical-align: middle;
    margin-bottom: 1.6vw;
  }
  
  .newsletter-desc-luxe {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: var(--color-muted);
    text-align: center;
    vertical-align: middle;
    max-width: 39.333333vw;
    margin: 0 auto 2.7vw;
  }
  
  .newsletter-form-luxe {
    display: flex;
    /* gap: 0.2vw; */
    gap: 1.2vw;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
  }
  
  .newsletter-field-luxe {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.3vw;
    margin-bottom: 0;
  }
  
  .newsletter-field-luxe span {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px @ 1440px */
    line-height: 0.833333vw;
    /* 12px @ 1440px */
    letter-spacing: 0.083333vw;
    /* 1.2px @ 1440px */
    color: #444844;
    text-transform: uppercase;
    vertical-align: middle;
  }
  
  .newsletter-input-luxe {
    width: 100%;
    height: 2.777778vw;
    border: none;
    border-bottom: 0.069444vw solid #c4c7c3;
    background: transparent;
    outline: none;
    font-family: var(--font-sans);
    font-size: 0.902778vw;
    letter-spacing: 0.034722vw;
    padding: 0 0 0.347222vw 0;
    border-radius: 0;
    color: var(--color-dark);
  }
  
  .newsletter-input-luxe::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
  }
  
  .btn-newsletter-subscribe {
    height: 2.99vw;
    padding: 0 2.2vw;
    background: #1a1c1c;
    color: var(--bg-white);
    border: none;
    border-radius: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    transition: opacity var(--transition);
  }
  
  .btn-newsletter-subscribe:hover {
    opacity: 0.85;
  }
  
  .signature-section .product-card-info {
    margin-top: 1.4vw !important;
  }
  
  .signature-section .product-subtext-luxe {
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px @ 1440px */
    line-height: 1.666667vw;
    /* 24px @ 1440px */
    letter-spacing: 0;
    margin-top: 0.347222vw !important;
  }
  
  .shop-products-section.section-padding-luxe {
    padding-top: 0.3vw;
  }
  
  .shop-products-section .product-grid-3col,
  .shop-products-section .outer-product-grid-3col {
    gap: 6.666667vw 1.666667vw;
    padding-bottom: 10vw;
  }
  
  .shop-products-section .product-card-info {
    margin-top: 1.7vw !important;
  }
  
  .optics-section.section-padding-luxe {
    padding-top: 5.6vw;
    padding-bottom: 8.7vw;
  }
  
  /* ==========================================================================
     SEARCH PAGE 
     ========================================================================== */
  .search-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.555556vw;
  }
  
  .search-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.555556vw;
    height: 1.978889vw;
    padding: 0 0.833333vw 0 1.111111vw;
    background: var(--color-dark);
    color: var(--bg-white);
    font-family: var(--font-sans);
    font-size: 0.902778vw;
    font-weight: 500;
    text-transform: lowercase;
    border: none;
  }
  
  .search-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bg-white);
    font-size: 1.25vw;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
  }
  
  .search-chip-remove:hover {
    opacity: 1;
  }
  
  .search-hero-section {
    padding-top: 4.7vw;
    padding-bottom: 3.4vw;
  }
  
  .search-meta-section {
    padding-bottom: 2.3vw;
    margin-bottom: 4.155556vw;
  }
  
  .search-meta-section .search-chip {
    padding: 0 0.833333vw 0 1.111111vw;
    font-size: 0.833333vw;
    /* 12px */
    font-weight: 600;
    font-style: normal;
    line-height: 0.833333vw;
    /* 12px */
    letter-spacing: 0.083333vw;
    /* 1.2px */
    text-align: center;
    vertical-align: middle;
    text-transform: lowercase;
    border: none;
  }
  
  .search-count {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.972222vw;
    /* 14px @ 1440px */
    line-height: 0.972222vw;
    /* 100% = 14px */
    letter-spacing: 0;
    text-align: right;
    vertical-align: middle;
    color: #7f7f7f;
  }
  
  .search-results-section .product-grid-3col,
  .search-results-section .outer-product-grid-3col {
    gap: 4.166667vw 1.566667vw;
  }
  
  /* ==========================================================================
     COLLECTIONS PAGE (collections.html)
     ========================================================================== */
  .collections-hero-section {
    padding-top: 4.45vw;
    padding-bottom: 9vw;
  }
  
  .collections-hero-content {
    max-width: 30.833333vw;
    /* 444px @ 1440px */
  }
  
  .collections-hero-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4.444444vw;
    /* 64px */
    line-height: 5vw;
    /* 72px */
    letter-spacing: -0.088889vw;
    /* -1.28px */
    color: #1a1c1c;
    vertical-align: middle;
    margin-bottom: 1.666667vw;
  }
  
  .collections-hero-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    /* 18px */
    line-height: 1.875vw;
    /* 27px */
    letter-spacing: 0.0125vw;
    /* 0.18px */
    color: #444844;
    vertical-align: middle;
    margin-bottom: 2.222222vw;
  }
  
  .collections-hero-img-box {
    width: 100%;
    height: 29vw;
    overflow: hidden;
    padding-left: 0.787778vw;
  }
  
  .collections-hero-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Filter Bar */
  .collections-filter-section {
    padding-top: 1.3vw;
    padding-bottom: 2.2vw;
    margin-bottom: 4.6vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .collections-filter-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    color: #7f7f7f;
    margin-right: 2.1vw;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  /* Product Grid */
  .collections-products-section {
    padding-bottom: 2.5vw;
  }

  /* The load-more block is nested inside this section on the DESKTOP page (the
     pager must live in <product-paginate>), so the section's own bottom padding
     stacks BELOW the button on top of the block's 8.45vw. The reference puts the
     button in a sibling section, where only the 8.45vw applies.
     Desktop only: mobile/collections.html already writes it as a sibling. */
  @media (min-width: 992px) {
    .collections-page .collections-products-section {
      padding-bottom: 0;
    }
  }
  
  .collections-products-section .product-grid-3col,
  .collections-products-section .outer-product-grid-3col {
    gap: 4.4vw 1.666667vw;
  }
  
  /* Load More */
  .collections-load-more-section {
    padding-top: 3vw;
    padding-bottom: 8.45vw;
  }

  /* Moved out of collections.html, where it was an inline style= on the
     section. The block sits INSIDE <product-paginate>, so it is lifted out of
     the repeating card's flow and pinned below the grid. */
  /* The pager must live INSIDE <product-paginate> -- ProductPaginate::split()
     separates the repeating card from this block -- so it cannot be a sibling
     of the grid the way 1.express-store writes it. Kept in normal flow with the
     reference's own padding so the gaps above and below match exactly. */
  @media (min-width: 992px) {
    .collections-page .collections-products-section .collections-load-more-section {
      /* It is a GRID ITEM here (the card grid is its parent), so it would sit in
         the next column beside the cards. Span every column to drop below them,
         as the sibling <section> does in the reference. */
      grid-column: 1 / -1;
      width: 100%;
      display: flex;
      justify-content: center;
      /* This is a grid item, so the grid's row-gap lands above it on top of the
         section's own padding; the reference's sibling <section> has no such gap.
         Trim the surplus so the space above the button measures the same 79px. */
      margin-top: -1.875vw;
    }
  }
  
  .btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.916667vw;
    /* 42px @ 1440px */
    padding: 0 2.5vw;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    /* 12px @ 1440px */
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      color 0.2s ease;
  }
  
  .btn-load-more:hover {
    background: var(--color-dark);
    color: var(--bg-white);
    border-color: var(--color-dark);
    /* PagerRenderer::asLink() turns this <button> into an <a> so it can carry
       the offset href, which then inherits the sitewide a:hover{opacity:.75}
       and washes the solid black out to grey. 1.express-store keeps a real
       <button>, so it never dims -- restore that. */
    opacity: 1;
  }
  
  /* ==========================================================================
     ABOUT PAGE 
     ========================================================================== */
  
  /* Shared kicker label (OUR PHILOSOPHY / THE JOURNAL) */
  .about-kicker {
    display: block;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: #444844;
    margin-bottom: 0.633333vw;
  }
  
  /* Shared underlined text link (READ MORE / VIEW ALL STORIES) */
  .about-read-more-link {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: #1a1c1c;
    text-decoration: underline;
    text-underline-offset: 7px;
    vertical-align: middle;
  }
  
  /* Hero */
  .about-hero-section {
    padding-top: 4.25vw;
    padding-bottom: 6.25vw;
  }
  
  .about-hero-content {
    max-width: 43.777778vw;
    padding-top: 13vw;
    padding-right: 2.777778vw;
  }
  
  .about-hero-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4.444444vw;
    /* 64px */
    line-height: 5vw;
    /* 72px */
    letter-spacing: -0.088889vw;
    /* -1.28px */
    color: #1a1c1c;
    margin-bottom: 1.388889vw;
    vertical-align: middle;
  }
  
  .about-hero-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    /* 18px */
    line-height: 2vw;
    /* 28.8px */
    letter-spacing: 0.0125vw;
    /* 0.18px */
    color: #444844;
    vertical-align: middle;
  }
  
  .about-hero-img-box {
    width: 100%;
    height: 43.3vw;
    overflow: hidden;
    padding-left: 0.777778vw;
  }
  
  .about-hero-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Our Philosophy */
  .about-philosophy-section {
    background: var(--bg-section-alt);
    padding-top: 6.25vw;
    padding-bottom: 4.35vw;
  }
  
  .about-philosophy-img-box {
    width: 100%;
    height: 40.6vw;
    overflow: hidden;
    padding-left: 6.9vw;
    padding-right: 1vw;
  }
  
  .about-philosophy-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .about-philosophy-content {
    padding-left: 7.7vw;
  }
  
  .about-philosophy-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.222222vw;
    /* 32px */
    line-height: 2.916667vw;
    /* 42px */
    letter-spacing: 0;
    color: #1a1c1c;
    margin-bottom: 1.388889vw;
    vertical-align: middle;
  }
  
  .about-philosophy-text {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px */
    line-height: 1.666667vw;
    /* 24px */
    letter-spacing: 0;
    color: #444844;
    margin-bottom: 1.388889vw;
    vertical-align: middle;
  }
  
  .about-philosophy-text:last-child {
    margin-bottom: 0;
  }
  
  /* Material & Craft */
  .about-material-craft-section {
    padding-top: 4.55vw;
    padding-bottom: 4.25vw;
  }
  
  .about-section-title {
    position: relative;
    text-align: center;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.222222vw;
    line-height: 2.916667vw;
    letter-spacing: 0;
    color: #1a1c1c;
    padding-bottom: 1.041667vw;
    margin-bottom: 4.672222vw;
    vertical-align: middle;
  }
  
  .about-section-title::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6.533333vw;
    height: 1px;
    background: #181e1a;
  }
  
  .about-material-craft-row {
    margin-bottom: 1.5rem;
  }
  
  .about-material-craft-row:last-child {
    margin-bottom: 0;
  }
  
  .material-craft-img-box {
    position: relative;
    width: 100%;
    height: 29.833333vw;
    overflow: hidden;
    background: var(--color-dark);
  }
  
  .material-craft-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .material-craft-badge {
    position: absolute;
    top: 1.388889vw;
    left: 1.388889vw;
    z-index: 2;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.763889vw;
    /* 11px */
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: #ffffff;
  }
  
  .ethical-sourcing-card {
    height: 100%;
    background: #e8e8e7;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3.6vw;
    padding-bottom: 3.9vw;
  }
  
  .ethical-sourcing-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.666667vw;
    line-height: 2.222222vw;
    letter-spacing: 0;
    color: #1a1c1c;
    margin-bottom: 1.7vw;
    vertical-align: middle;
  }
  
  .ethical-sourcing-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #444844;
    margin-bottom: 1.6vw;
    vertical-align: middle;
  }
  
  .heritage-card {
    height: 100%;
    background: #181e1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
  }
  
  .heritage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.666667vw;
    /* 24px */
    height: 1.666667vw;
    /* 24px */
    color: #ffffff;
    opacity: 0.9;
    margin-bottom: 1.6vw;
  }
  
  .heritage-icon img {
    width: 1.6vw;
    height: 1.6vw;
  }
  
  .heritage-label {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.763889vw;
    letter-spacing: 0.125vw;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.694444vw;
  }
  
  .heritage-year {
    display: block;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.666667vw;
    /* 24px */
    line-height: 2.333333vw;
    /* 33.6px */
    letter-spacing: 0;
    text-align: center;
    color: #ffffff;
  }
  
  /* Manifesto Quote */
  .about-quote-section {
    text-align: center;
    padding-top: 8.2vw;
    padding-bottom: 8.2vw;
    border-top: 1px solid #c4c7c34d;
    border-bottom: 1px solid #c4c7c34d;
  }
  
  .about-quote-mark {
    display: block;
    width: 2.291667vw;
    height: auto;
    margin: 0 auto 2.288889vw;
  }
  
  .about-quote-text {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4.444444vw;
    line-height: 5vw;
    letter-spacing: -0.088889vw;
    text-align: center;
    vertical-align: middle;
    color: #1a1c1c;
    max-width: 52.611111vw;
    margin: 0 auto 2.2vw;
  }
  
  .about-quote-attribution {
    display: block;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px */
    line-height: 0.833333vw;
    /* 12px */
    letter-spacing: 0.083333vw;
    /* 1.2px */
    text-align: center;
    text-transform: uppercase;
    color: #444844;
  }
  
  /* The Journal */
  .about-journal-section {
    padding-top: 8.45vw;
    padding-bottom: 8.5vw;
  }
  
  .about-journal-header {
    margin-bottom: 2vw;
  }
  
  .about-journal-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.222222vw;
    line-height: 2.916667vw;
    color: #1a1c1c;
    margin: 0;
  }
  
  .about-journal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.666667vw;
  }
  
  .about-journal-img-box {
    width: 18.75vw;
    height: 25vw;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 2vw;
  }
  
  .about-journal-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .about-journal-card-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.666667vw;
    line-height: 2.222222vw;
    letter-spacing: 0;
    color: #1a1c1c;
    margin-bottom: 1.7vw;
    vertical-align: middle;
  }
  
  .about-journal-card-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px */
    line-height: 1.666667vw;
    /* 24px */
    letter-spacing: 0;
    color: #444844;
    margin: 0;
    vertical-align: middle;
  }
  
  /* ==========================================================================
     PRODUCT DETAIL PAGE 
     ========================================================================== */
  
  .product-detail-page {
    /* padding-top: 4.5vw;
    padding-bottom: 8.25vw; */
    background: #fff;
  }
  
  .product-detail-layout {
    display: grid;
    grid-template-columns: 45.972222vw minmax(0, 1fr);
    gap: 8.4vw;
    align-items: start;
  }
  
  /* GALLERY */
  
  .product-gallery-panel {
    min-width: 0;
  }
  
  .product-gallery-stage {
    position: relative;
    width: 100%;
    height: 55.083333vw;
    /* height: 100%; */
    aspect-ratio: auto;
    background: var(--bg-section-alt);
    overflow: hidden;
  }
  
  .product-gallery-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s ease;
  }
  
  #mainProductImage.is-transitioning {
    opacity: 0;
  }
  
  .gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.777778vw;
    /* 40px */
    height: 2.777778vw;
    /* 40px */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    opacity: 0;
    transition:
      opacity 0.2s ease,
      background-color 0.2s ease;
    z-index: 2;
  }
  
  .product-gallery-stage:hover .gallery-arrow {
    opacity: 1;
  }
  
  .gallery-arrow:hover {
    background: #ffffff;
  }
  
  .gallery-arrow-prev {
    left: 1.111111vw;
    /* 16px */
  }
  
  .gallery-arrow-next {
    right: 1.111111vw;
    /* 16px */
  }
  
  .gallery-arrow::before {
    content: "";
    display: block;
    width: 0.486111vw;
    /* 7px */
    height: 0.486111vw;
    /* 7px */
    border-right: 0.104167vw solid #1a1c1c;
    /* 1.5px */
    border-bottom: 0.104167vw solid #1a1c1c;
  }
  
  .gallery-arrow-prev::before {
    transform: rotate(135deg) translate(0.069444vw, 0.069444vw);
  }
  
  .gallery-arrow-next::before {
    transform: rotate(-45deg) translate(-0.069444vw, -0.069444vw);
  }
  
  .product-gallery-thumb-nav {
    display: flex;
    align-items: center;
    gap: 0.694444vw;
    margin-top: 1.9vw;
  }
  
  .product-gallery-thumbs {
    display: flex;
    gap: 1vw;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    min-width: 0;
  }
  
  .product-gallery-thumbs::-webkit-scrollbar {
    display: none;
  }
  
  .product-thumb {
    flex: 0 0 auto;
    width: 6.583333vw;
    height: 8.638889vw;
    padding: 0;
    border: 0.069444vw solid var(--color-border);
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition:
      opacity 0.2s ease,
      border-color 0.2s ease;
  }
  
  .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .product-thumb[data-app-current],
  .product-thumb:hover,
  .product-thumb.is-active {
    opacity: 1;
    border-color: #1a1c1c;
  }
  
  .thumb-nav-arrow {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.666667vw;
    /* 24px */
    height: 1.666667vw;
    /* 24px */
    padding: 0;
    border: none;
    background: transparent;
    color: #1a1c1c;
    cursor: pointer;
  }
  
  .product-gallery-thumb-nav.has-overflow .thumb-nav-arrow {
    display: flex;
  }
  
  .thumb-nav-arrow::before {
    content: "";
    display: block;
    width: 0.416667vw;
    /* 6px */
    height: 0.416667vw;
    /* 6px */
    border-right: 0.104167vw solid currentColor;
    border-bottom: 0.104167vw solid currentColor;
  }
  
  .thumb-nav-prev::before {
    transform: rotate(135deg) translate(0.069444vw, 0.069444vw);
  }
  
  .thumb-nav-next::before {
    transform: rotate(-45deg) translate(-0.069444vw, -0.069444vw);
  }
  
  .product-summary-panel {
    min-width: 0;
    padding-right: 50px;
  }
  
  .product-breadcrumb {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    /* Semi Bold */
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px */
    line-height: 0.833333vw;
    /* 12px */
    letter-spacing: 0.083333vw;
    /* 1.2px */
    text-transform: uppercase;
    color: #7f7f7f;
    margin-bottom: 1.666667vw;
    vertical-align: middle;
    padding-top: 2.2vw;
  }
  
  .product-breadcrumb a {
    color: #7f7f7f;
    text-decoration: none;
  }
  
  .product-breadcrumb a:hover {
    color: #1a1c1c;
  }
  
  .product-breadcrumb-sep {
    margin: 0 0.277778vw;
    /* 4px */
  }
  
  .product-detail-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.222222vw;
    line-height: 2.916667vw;
    letter-spacing: 0;
    color: #1a1c1c;
    margin-bottom: 0.993333vw;
    vertical-align: middle;
  }
  
  .product-detail-price {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    line-height: 1.875vw;
    letter-spacing: 0.0125vw;
    color: #444844;
    margin-bottom: 2.5vw;
    vertical-align: middle;
  }
  
  .product-detail-copy {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #1a1c1c;
    max-width: 30vw;
    margin-bottom: 2.9vw;
    vertical-align: middle;
  }
  
  .product-option-group {
    margin-bottom: 2.222222vw;
  }
  
  .product-option-label {
    display: block;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: #1a1c1c;
    margin-bottom: 0.833333vw;
  }
  
  .product-color-options {
    display: flex;
    align-items: center;
    gap: 1vw;
  }
  
  .color-option {
    width: 2.8vw;
    height: 2.8vw;
    padding: 0;
    border: 0.069444vw solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: var(--option-color, #1a1a1a);
    cursor: pointer;
    position: relative;
  }
  
  .color-option.is-active::after {
    content: "";
    position: absolute;
    inset: -0.277778vw;
    /* -4px */
    border: 0.104167vw solid #1a1c1c;
    /* 1.5px */
    border-radius: 50%;
  }
  
  .btn-luxe-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
     /* height: 3.055556vw;
    44px */
    padding: 0 1.666667vw;
    background: #1a1c1c;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    /* Semi Bold */
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px */
    line-height: 0.833333vw;
    /* 12px */
    letter-spacing: 0.083333vw;
    /* 1.2px */
    text-transform: uppercase;
    border: 0.069444vw solid #1a1c1c;
    border-radius: 0;
    cursor: pointer;
    vertical-align: middle;
    transition: opacity 0.2s ease;
  }
  
  .btn-luxe-dark:hover {
    opacity: 0.85;
  }
  
  .btn-luxe-dark:hover {
    opacity: 0.85;
  }
  
  .product-buy-btn {
    width: 100%;
    margin-bottom: 3.5vw;
  }
  
  .product-spec-list {
    border-top: 0.069444vw solid var(--color-border);
  }
  
  .spec-row {
    display: grid;
    grid-template-columns: 6.388889vw minmax(0, 1fr);
    gap: 2.2vw;
    padding-top: 1.9vw;
    padding-bottom: 1.4vw;
    border-bottom: 0.069444vw solid var(--color-border);
  }
  
  .spec-row:last-child {
    border-bottom: none;
  }
  
  .spec-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    /* Semi Bold */
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px */
    line-height: 0.833333vw;
    /* 12px */
    letter-spacing: 0.083333vw;
    /* 1.2px */
    color: #1a1c1c;
    vertical-align: middle;
  }
  
  .spec-value {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    /* Regular */
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px */
    line-height: 1.666667vw;
    /* 24px */
    letter-spacing: 0;
    color: #444844;
    vertical-align: middle;
  }
  
  .product-more-info {
    margin-top: 1.4vw;
    padding-top: 2.222222vw;
  }
  
  .product-more-info h2 {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.666667vw;
    line-height: 2.222222vw;
    letter-spacing: 0;
    color: #1a1c1c;
    padding-bottom: 1.5vw;
    margin-bottom: 1.8vw;
    border-bottom: 0.069444vw solid var(--color-border);
    vertical-align: middle;
  }
  
  .product-more-info p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.041667vw;
    /* 15px */
    line-height: 1.666667vw;
    /* 24px */
    letter-spacing: 0;
    color: #444844;
    margin: 0;
    vertical-align: middle;
  }
  
  /* ==========================================================================
     SUSTAINABILITY PAGE 
     ========================================================================== */
  
  /* Hero */
  .sustain-hero-section {
    padding-top: 4.5vw;
    padding-bottom: 6.25vw;
  }
  
  .sustain-hero-content {
    max-width: 41.555556vw;
    padding-right: 2.777778vw;
    padding-top: 11.5vw;
  }
  
  .sustain-hero-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4.444444vw;
    line-height: 4.888889vw;
    letter-spacing: -0.088889vw;
    color: #1a1c1c;
    margin-bottom: 1.688889vw;
    vertical-align: middle;
  }
  
  .sustain-hero-title span {
    font-style: italic;
    color: #747874;
  }
  
  .sustain-hero-desc {
    font-family: var(--font-sans);
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    /* 18px */
    line-height: 2vw;
    /* 28.8px */
    letter-spacing: 0.0125vw;
    /* 0.18px */
    color: var(--color-muted);
  }
  
  .sustain-hero-img-box {
    width: 100%;
    height: 42.9vw;
    overflow: hidden;
    padding-left: 1vw;
  }
  
  .sustain-hero-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .sustain-sourcing-section {
    padding-top: 2.744444vw;
    padding-bottom: 6.25vw;
  }
  
  .sustain-sourcing-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 !important;
  }
  
  .sustain-sourcing-row>.col-lg-6 {
    width: 100%;
    padding: 0 !important;
  }
  
  .sustain-sourcing-row>.col-lg-6:first-child {
    min-width: 0;
  }
  
  .sustain-sourcing-box {
    padding-left: 6.777778vw;
  }
  
  .sustain-sourcing-img-box {
    width: 77%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 1.6vw;
    height: 25.6vw;
  }
  
  .sustain-sourcing-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .sustain-sourcing-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    /* Regular */
    font-style: normal;
    font-size: 2.222222vw;
    /* 32px */
    line-height: 2.916667vw;
    /* 42px */
    letter-spacing: 0;
    color: #1a1c1c;
    margin: 0 0 1.666667vw;
  }
  
  .sustain-sourcing-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #444844;
    max-width: 25.694444vw;
    margin: 0;
    vertical-align: middle;
  }
  
  .sustain-sourcing-row>.col-lg-6:last-child {
    min-width: 0;
  }
  
  .sustain-principles {
    border-left: 0.069444vw solid var(--color-border);
    padding-left: 3.333333vw;
    padding-top: 5.5vw;
    padding-bottom: 0;
    margin-left: 0.625vw;
    height: 100%;
    box-sizing: border-box;
  }
  
  .sustain-principles .about-kicker {
    display: block;
    margin-bottom: 3vw;
  }
  
  .sustain-principle-item {
    margin-top: 0;
    margin-bottom: 3.5vw;
  }
  
  .sustain-principle-item:last-child {
    margin-bottom: 0;
  }
  
  .sustain-principle-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: italic;
    /* font-size: 1.388889vw; */
    font-size: 1.563vw;
    line-height: 1.944444vw;
    letter-spacing: 0;
    color: #1a1c1c;
    margin: 0 0 0.833333vw;
    vertical-align: middle;
  }
  
  .sustain-principles p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px */
    line-height: 1.666667vw;
    /* 24px */
    letter-spacing: 0;
    color: #444844;
    max-width: 27.777778vw;
    margin: 0;
    vertical-align: middle;
  }
  
  /* The Anti-Disposable Philosophy */
  .sustain-philosophy-section {
    padding-top: 2.7vw;
    padding-bottom: 8vw;
  }
  
  .sustain-philosophy-header {
    text-align: center;
    max-width: 52.833333vw;
    margin: 0 auto 4.166667vw;
  }
  
  .sustain-philosophy-header .about-kicker {
    text-align: center;
    margin-bottom: 1.633333vw;
  }
  
  .sustain-philosophy-title {
    position: relative;
    font-family: "Playfair Display", var(--font-serif, serif);
    font-weight: 400;
    font-style: normal;
    font-size: 4.444444vw;
    line-height: 5vw;
    letter-spacing: -0.088889vw;
    color: #1a1c1c;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 1.7vw;
    margin-bottom: 3.388889vw;
  }
  
  .sustain-philosophy-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5.333333vw;
    height: 1px;
    background: var(--color-border-dark);
  }
  
  .sustain-philosophy-desc {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    color: var(--color-muted);
    margin: 0;
  }
  
  .sustain-material-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.666667vw;
  }
  
  .sustain-material-item {
    margin: 0;
  }
  
  .sustain-material-img-box {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 1.111111vw;
    height: 31.99vw;
  }
  
  .sustain-material-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .sustain-material-item figcaption {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.763889vw;
    /* 11px */
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: #1a1c1c;
  }
  
  .sustain-hero-content .about-kicker {
    margin-bottom: 1.81vw;
  }
  
  /* ==========================================================================
     CART PAGE
     ========================================================================== */
  
  .cart-page {
    padding-top: 4.999vw;
    padding-bottom: 8.25vw;
  }
  
  .cart-page-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 4.2vw;
    line-height: 3.611111vw;
    color: #1a1c1c;
    margin-bottom: 4.89vw;
  }
  
  .cart-table-luxe {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 0.277778vw;
    /* 4px on 1440px screen */
  }
  
  .cart-col-product {
    width: 53%;
  }
  
  .cart-col-qty {
    width: 18%;
  }
  
  .cart-col-total {
    width: 18%;
  }
  
  .cart-table-luxe thead th {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.833333vw;
    line-height: 1vw;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 0 0 1vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  /* Product → left */
  .cart-table-luxe thead .cart-col-product {
    text-align: left;
  }
  
  .cart-table-luxe thead .cart-col-qty {
    text-align: center;
  }
  
  .cart-table-luxe thead .cart-col-total {
    text-align: right;
  }
  
  .cart-table-luxe tbody td {
    vertical-align: top;
    padding-top: 2.4vw;
    padding-bottom: 2.4vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .cart-item-flex {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 1.736111vw;
  }
  
  .cart-item-img {
    display: block;
    width: 8.5vw;
    height: 11.111111vw;
    min-width: 8.5vw;
    max-width: 8.5vw;
    min-height: 11.111111vw;
    max-height: 11.111111vw;
    flex: 0 0 8.5vw;
    object-fit: cover;
    object-position: center;
    background: var(--bg-section-alt);
  }
  
  .cart-item-info {
    min-width: 0;
    width: 100%;
    height: 11.111111vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Product title */
  .cart-item-flex h3 {
    font-family: "Inter", var(--font-sans, sans-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    line-height: 1.875vw;
    letter-spacing: 0.0125vw;
    color: #1a1c1c;
    margin: 0 0 0.277778vw;
  }
  
  /* Product metadata */
  .cart-item-flex p {
    font-family: "Inter", var(--font-sans, sans-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    color: #444844;
    margin: 0 0 0.277778vw;
  }
  
  .cart-item-info .cart-remove-btn {
    align-self: flex-start;
    margin-top: auto;
    margin-bottom: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-family: "Inter", var(--font-sans, sans-serif);
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    color: #444844;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: #c4c7c380;
    text-underline-offset: 0.138889vw;
    cursor: pointer;
  }
  
  /* Existing generic link button */
  .btn-link {
    display: inline-block;
    margin-top: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.763889vw;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: var(--color-muted);
    text-decoration: underline;
    cursor: pointer;
  }
  
  .btn-link:hover {
    color: var(--color-dark);
  }
  
  /* Quantity body cell → center aligned */
  .cart-table-luxe tbody td.cart-col-qty {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Quantity box */
  .qty-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.222222vw;
    border: 1px solid var(--color-border);
    white-space: nowrap;
  }
  
  /* Minus / Plus buttons */
  .qty-btn {
    width: 2.1vw;
    height: 1.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.111111vw;
    line-height: 1;
    color: #1a1c1c;
    cursor: pointer;
    height: 100%;
  }
  
  .qty-btn:hover {
    background: var(--bg-section-alt);
  }
  
  /* Quantity number */
  .qty-input {
    box-sizing: border-box;
    width: 2.5vw;
    height: 2.222222vw;
    padding: 0;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    font-family: var(--font-sans);
    font-size: 1vw;
    line-height: 1;
    color: #1a1c1c;
    background: transparent;
    pointer-events: none;
  }
  
  .cart-table-luxe tbody td.cart-row-total {
    text-align: right !important;
    font-family: "Inter", var(--font-sans, sans-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 1.25vw;
    line-height: 1.875vw;
    letter-spacing: 0.0125vw;
    color: #1a1c1c;
    white-space: nowrap;
  }
  
  .cart-page .row {
    --bs-gutter-x: 2.777778vw;
  }
  
  .order-summary-box {
    background: var(--bg-white);
    border: 1px solid var(--color-border);
    padding: 2.6vw 1.5vw;
  }
  
  .order-summary-box h2 {
    font-family: "Playfair Display", var(--font-serif, serif);
    font-weight: 400;
    font-style: normal;
    font-size: 2.222222vw;
    line-height: 2.916667vw;
    letter-spacing: 0vw;
    color: #1a1c1c;
    vertical-align: middle;
    margin-bottom: 2.3vw;
  }
  
  /* Summary rows */
  .summary-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.972222vw;
    color: var(--color-muted);
    margin-bottom: 0.99vw;
  }
  
  .summary-row span:last-child {
    color: #1a1c1c;
  }
  
  .summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "Playfair Display", var(--font-serif, serif);
    font-weight: 400;
    font-style: normal;
    font-size: 1.666667vw;
    line-height: 2.222222vw;
    letter-spacing: 0vw;
    color: #1a1c1c;
    vertical-align: middle;
    padding-top: 2.111111vw;
    margin-top: 2.99vw;
    margin-bottom: 2.666667vw;
    border-top: 1px solid var(--color-border);
  }
  
  .order-summary-box .product-buy-btn {
    display: flex;
    margin-bottom: 1.111111vw;
    text-decoration: none;
  }
  
  .order-summary-box>p {
    font-family: "Inter", var(--font-sans, sans-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 0.972222vw;
    /* 14px on 1440px screen */
    line-height: 1.388889vw;
    /* 20px on 1440px screen */
    letter-spacing: 0vw;
    /* 0px */
    color: #444844;
    text-align: center;
    vertical-align: middle;
    margin: 0;
  }
  
  /* ==========================================================================
     CHECKOUT PAGE
     ========================================================================== */
  
  .checkout-header {
    padding: 1.666667vw 0;
    /* 24px on 1440px screen */
    border-bottom: 1px solid var(--color-border);
  }
  
  .checkout-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .checkout-secure-badge {
    display: flex;
    align-items: center;
    gap: 0.555556vw;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    vertical-align: middle;
    text-transform: uppercase;
    color: #444844;
  }
  
  .checkout-lock-icon {
    display: inline-block;
    width: 1vw;
    height: 1vw;
  }
  
  .checkout-page {
    padding-top: 4.3vw;
    padding-bottom: 8.4vw;
  }
  
  .checkout-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.555556vw;
    font-family: var(--font-sans);
    font-size: 0.833333vw;
    font-weight: 600;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 4.3vw;
  }
  
  .checkout-breadcrumb a {
    color: var(--color-muted);
    text-decoration: none;
  }
  
  .checkout-breadcrumb a:hover {
    color: #1a1c1c;
  }
  
  .checkout-breadcrumb-current {
    color: #1a1c1c;
  }
  
  .checkout-breadcrumb-upcoming {
    color: var(--color-muted);
  }
  
  .checkout-breadcrumb-sep {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    vertical-align: middle;
    color: #7f7f7f;
  }
  
  .checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 31.25vw);
    gap: 2.555556vw;
    align-items: start;
  }
  
  /* Form column */
  .checkout-section-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.666667vw;
    line-height: 2.222222vw;
    color: #1a1c1c;
    margin: 0 0 2.3vw;
  }
  
  .checkout-section-title-spaced {
    margin-top: 4.5vw;
  }
  
  .checkout-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.3vw;
  }
  
  .checkout-field label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    vertical-align: middle;
    text-transform: uppercase;
    color: #444844;
    margin-bottom: 0.555556vw;
  }
  
  .checkout-field input,
  .checkout-select-wrap select {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    /* 1.express-store overrides its own rule with an inline
       style="padding-top:0.8vw;padding-bottom:0.9vw" on all 18 checkout inputs.
       Declared here instead so the markup stays free of inline styles and the
       rendered box matches the reference exactly. */
    padding: 0.8vw 0 0.9vw;
    font-family: var(--font-sans);
    font-size: 1vw;
    color: #1a1c1c;
  }
  
  .checkout-field input::placeholder {
    color: var(--color-muted);
  }
  
  .checkout-field input:focus,
  .checkout-select-wrap select:focus {
    outline: none;
    border-bottom-color: #1a1c1c;
  }
  
  /* Browser autofill paints its own light-blue/yellow background over the
     transparent input — force it back to the page background. */
  .checkout-field input:-webkit-autofill,
  .checkout-field input:-webkit-autofill:hover,
  .checkout-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1a1c1c;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-page) inset;
    box-shadow: 0 0 0 1000px var(--bg-page) inset;
    transition: background-color 5000s ease-in-out 0s;
  }
  
  /* Email/Phone are the only required fields — show a red border once an
     empty submit attempt is made, green once filled with a valid value. */
  #checkoutEmail:user-invalid,
  #checkoutPhone:user-invalid {
    border-bottom-color: #d64545;
  }
  
  #checkoutEmail:user-valid,
  #checkoutPhone:user-valid {
    border-bottom-color: #3a7d44;
  }
  
  .checkout-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.666667vw;
    margin-bottom: 2.5vw;
  }
  
  .checkout-field-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .checkout-field-row .checkout-field {
    margin-bottom: 0;
  }
  
  .checkout-select-wrap {
    position: relative;
  }
  
  .checkout-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.111111vw;
    cursor: pointer;
    padding-top: 0.8vw;
    padding-bottom: 0.9vw;
  }
  
  .checkout-select-wrap::after {
    content: "";
    position: absolute;
    right: 0.138889vw;
    /* 2px */
    top: 35%;
    width: 0.416667vw;
    /* 6px */
    height: 0.416667vw;
    border-right: 0.104167vw solid var(--color-muted);
    border-bottom: 0.104167vw solid var(--color-muted);
    transform: rotate(45deg);
    pointer-events: none;
  }
  
  .checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 0.555556vw;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #444844;
    cursor: pointer;
    margin-bottom: 2.777778vw;
    margin-top: 2.3vw;
  }
  
  .checkout-checkbox input[type="checkbox"] {
    width: 1.111111vw;
    /* 16px */
    height: 1.111111vw;
    margin: 0;
    accent-color: #1a1c1c;
    cursor: pointer;
  }
  
  .checkout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.666667vw;
    margin-top: 9.4vw;
    border-top: 1px solid var(--color-border);
    padding-top: 31px;
  }
  
  .checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.555556vw;
    /* 8px */
    font-family: var(--font-sans);
    font-size: 0.972222vw;
    /* 14px */
    color: #1a1c1c;
    text-decoration: none;
  }
  
  .checkout-back-link:hover {
    color: var(--color-muted);
  }
  
  .checkout-back-arrow {
    display: inline-block;
    width: 0.833333vw;
    /* 12px */
    height: 0.833333vw;
  }
  
  .checkout-continue-btn {
    text-decoration: none;
  }
  
  /* Order summary column */
  .checkout-summary-box {
    padding: 0.3vw 5.8vw;
    padding-right: 0vw;
  }
  
  .checkout-summary-box h2 {
    font-family: "Playfair Display", var(--font-serif, serif);
    font-weight: 400;
    font-size: 1.666667vw;
    color: #1a1c1c;
    margin: 0 0 2.4vw;
  }
  
  .checkout-summary-items {
    display: flex;
    flex-direction: column;
    gap: 1.7vw;
    margin-bottom: 2.1vw;
    padding-bottom: 2.4vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .checkout-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 1.6vw;
  }
  
  .checkout-summary-item-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 5.5vw;
    height: 7.3vw;
  }
  
  .checkout-summary-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-section-alt);
  }
  
  .checkout-summary-item-qty {
    position: absolute;
    top: -0.416667vw;
    /* -6px */
    right: -0.516667vw;
    width: 1.3vw;
    /* 16px */
    height: 1.3vw;
    border-radius: 50%;
    background: #1a1c1c;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.625vw;
    /* 9px */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .checkout-summary-item-info {
    flex: 1;
    min-width: 0;
    margin-top: 0.2vw;
  }
  
  .checkout-summary-item-info h3 {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #1a1c1c;
    margin: 0 0 0.477778vw;
  }
  
  .checkout-summary-item-info p {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    vertical-align: middle;
    text-transform: uppercase;
    color: #444844;
    margin: 0;
  }
  
  .checkout-summary-item-price {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #1a1c1c;
    white-space: nowrap;
    margin-top: 0.2vw;
  }
  
  .coupon-code-holder {
    margin-bottom: 2.4vw;
    padding-bottom: 2.3vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .billing-page .billingformholder h2.checkout-section-title-spaced {
    /* margin: 0; */
  }
  
  .checkout-promo-row {
    display: flex;
    gap: 0.833333vw;
    /* margin-bottom: 2.4vw;
    padding-bottom: 2.3vw; */
  }
  
  .checkout-promo-row input {
    flex: 1;
    min-width: 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    /* padding: 0 0 0.555556vw; */
    padding: 0 0;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #1c1c1c;
  }
  
  .checkout-promo-row input::placeholder {
    color: #1c1c1c !important;
  }
  
  .checkout-promo-row input:focus,
  .checkout-promo-row input:focus-visible {
    outline: none;
  }
  
  .checkout-promo-row input::placeholder {
    color: var(--color-muted);
  }
  
  .checkout-apply-btn {
    flex-shrink: 0;
    /* width: 6.527778vw; */
    width: fit-content;
    height: 3.75vw;
    padding: 0.972222vw 1.666667vw;
    background: transparent;
    border: 1px solid #1a1c1c;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    cursor: pointer;
    transition:
      background-color var(--transition),
      color var(--transition);
  }
  
  .checkout-apply-btn:hover {
    background: #1a1c1c;
    color: #ffffff;
  }
  
  .checkout-totals {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
    margin-bottom: 1.8vw;
    padding-bottom: 2.1vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .checkout-totals-row {
    display: flex;
    justify-content: space-between;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #444844;
  }
  
  .checkout-totals-row span:first-child {
    color: var(--color-muted);
  }
  
  .checkout-totals-muted {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #7f7f7f !important;
  }
  
  .checkout-upsell {
    margin-bottom: 2.4vw;
    padding-bottom: 2.3vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .checkout-upsell-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.555556vw;
    margin-bottom: 1.4vw;
    justify-content: space-between;
  }
  
  .checkout-upsell-label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    vertical-align: middle;
    text-transform: uppercase;
    color: #444844;
  }
  
  .checkout-upsell-note {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.972222vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: #fa0000;
  
    display: none;
  }
  
  .checkout-upsell-scarf-img {
    object-position: 50% 25%;
  }
  
  .checkout-upsell-item {
    display: flex;
    align-items: center;
    gap: 1.2vw;
  }
  
  .checkout-upsell-item+.checkout-upsell-item {
    margin-top: 1.111111vw;
    /* 16px */
  }
  
  .checkout-upsell-item img {
    width: 3.055556vw;
    height: 4.4vw;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-section-alt);
  }
  
  .checkout-upsell-info {
    flex: 1;
    min-width: 0;
  }
  
  .checkout-upsell-info h4 {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.972222vw;
    line-height: 1.458333vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #1a1c1c;
    margin: 0 0 0.708333vw;
  }
  
  .checkout-upsell-info p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.972222vw;
    line-height: 1.041667vw;
    letter-spacing: 0;
    vertical-align: middle;
    text-transform: uppercase;
    color: #444844;
    margin: 0;
  }
  
  .checkout-upsell-add {
    flex-shrink: 0;
    padding: 0 0.8vw;
    height: 2.8vw;
    background: transparent;
    border: 1px solid #1a1c1c;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    text-align: center;
    vertical-align: middle;
    color: #181e1a;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      background-color var(--transition),
      color var(--transition);
  }
  
  .checkout-upsell-add:hover {
    background: #1a1c1c;
    color: #ffffff;
  }
  
  .checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  
  .checkout-total-row>span:first-child {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: #1a1c1c;
  }
  
  .checkout-total-value {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1.208333vw;
  }
  
  .checkout-currency {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    line-height: 0.833333vw;
    letter-spacing: 0.083333vw;
    color: #444844;
  }
  
  .checkout-total-amount {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2vw;
    line-height: 2.1875vw;
    letter-spacing: 0;
    text-align: right;
    vertical-align: middle;
    color: #1a1c1c;
  }
  
  .checkout-footer {
    padding: 2.3vw 0;
    border-top: 1px solid var(--color-border);
  }
  
  .checkout-footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.111111vw;
  }
  
  .checkout-footer-wrapper p {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px @ 1440px */
    line-height: 0.833333vw;
    /* 12px @ 1440px */
    letter-spacing: 0.083333vw;
    /* 1.2px @ 1440px */
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0;
    vertical-align: middle;
  }
  
  .checkout-footer-links {
    display: flex;
    gap: 1.666667vw;
    /* 24px */
  }
  
  .checkout-footer-links a {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px @ 1440px */
    line-height: 1.666667vw;
    /* 24px @ 1440px */
    letter-spacing: 0;
    color: #444844;
    text-decoration: none;
    vertical-align: middle;
  }
  
  .checkout-footer-links a:hover {
    color: #1a1c1c;
  }
  
  .checkout-actions .btn-luxe-dark {
    padding: 0 2.3vw;
  }
  
  /* ==========================================================================
     BILLING PAGE (billing.html)
     ========================================================================== */
  
  .checkout-review-block {
    margin-bottom: 2.3vw;
  }
  
  .checkout-review-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.111111vw;
    padding-bottom: 1.111111vw;
    margin-bottom: 1.111111vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .checkout-review-row:last-child {
    margin-bottom: 0;
  }
  
  .checkout-review-row>span:first-child {
    font-family: var(--font-sans);
    font-size: 0.972222vw;
    color: var(--color-muted);
    flex-shrink: 0;
  }
  
  .checkout-review-row>span:last-child {
    font-family: var(--font-sans);
    font-size: 0.972222vw;
    line-height: 1.458333vw;
    color: #1a1c1c;
    text-align: right;
  }
  
  /* Shipping options & payment method radio lists */
  .checkout-radio-list {
    display: flex;
    flex-direction: column;
  }
  
  .checkout-radio-row {
    display: flex;
    align-items: center;
    gap: 0.833333vw;
    padding: 1.111111vw 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
  }
  
  .checkout-radio-list .checkout-radio-row:last-child {
    /* border-bottom: none; */
  }
  
  /* A ::before/::after pseudo-element never paints on a replaced element
     like <input> in any browser, so the checked "dot" needs a real sibling
     element instead — this wrapper positions it over the radio ring. */
  .checkout-radio-control {
    position: relative;
    display: inline-flex;
    width: 1.25vw;
    /* 18px */
    height: 1.25vw;
    flex-shrink: 0;
  }
  
  .checkout-radio-control input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0.069444vw solid #c4c7c3;
    /* 1px */
    border-radius: 50%;
    background: #ffffff;
    outline: none;
    cursor: pointer;
    transition:
      border-color 0.15s ease,
      border-width 0.15s ease;
  }
  
  .checkout-radio-control input[type="radio"]:checked {
    border-width: 0.25vw;
    /* 3.6px, thick selected ring — no center dot */
    border-color: #1a1c1c;
  }
  
  .checkout-radio-dot {
    display: none;
  }
  
  .checkout-radio-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.208333vw;
  }
  
  .checkout-radio-title {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px @ 1440px */
    line-height: 1.666667vw;
    /* 24px @ 1440px */
    letter-spacing: 0;
    color: #1a1c1c;
    vertical-align: middle;
  }
  
  .checkout-radio-sub {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.833333vw;
    /* 12px @ 1440px */
    line-height: 0.833333vw;
    /* 12px @ 1440px */
    letter-spacing: 0.083333vw;
    /* 1.2px @ 1440px */
    color: #7f7f7f;
    vertical-align: middle;
  }
  
  .checkout-radio-price {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px @ 1440px */
    line-height: 1.666667vw;
    /* 24px @ 1440px */
    letter-spacing: 0;
    text-align: right;
    color: #1a1c1c;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  .checkout-payment-row .checkout-radio-title {
    flex: 1;
  }
  
  /* Payment brand marks */
  .checkout-payment-logo-img {
    display: block;
    width: auto;
    height: 2.111111vw;
  }
  
  .checkout-payment-logo-img-afterpay {
    height: 1.7vw;
  }
  
  /* Card sub-form, indented to align under the radio label text */
  .checkout-card-form {
    padding-left: 1.944444vw;
    padding-top: 1vw;
    margin-bottom: 0.5vw;
    border-bottom: 1px solid var(--color-border);
  }
  
  .checkout-field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.555556vw;
  }
  
  .checkout-field-label-row label {
    margin-bottom: 0;
  }
  
  .checkout-whats-this {
    font-family: var(--font-sans);
    font-size: 0.763889vw;
    line-height: 0.833333vw;
    letter-spacing: 0.05vw;
    text-decoration: underline;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  
  .checkout-whats-this:hover {
    color: #1a1c1c;
  }
  
  /* Shared error-state styling — reusable on any .checkout-field or
     .checkout-promo-row wrapper on checkout.html and billing.html. */
  .checkout-field.has-error input,
  .checkout-promo-row.has-error input {
    border-bottom-color: #f00;
  }
  
  .checkout-field-error {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.833333vw;
    color: #f00;
    margin-top: 0.416667vw;
  }
  
  .checkout-promo-error {
    margin-top: 0.555556vw;
    margin-bottom: 0;
  }
  
  .checkout-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.555556vw;
  }
  
  .checkout-spinner {
    display: inline-block;
    width: 0.972222vw;
    height: 0.972222vw;
    border: 0.138889vw solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: checkout-spin 0.8s linear infinite;
  }
  
  @keyframes checkout-spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  .billing-page .checkout-review-row {
    margin-bottom: 1.2vw;
    padding-bottom: 1.2vw;
  }
  
  .billing-page .checkout-section-title-spaced {
    margin: 0 0 2.3vw;
    margin-top: 4.7vw;
  }
  
  .billing-page .checkout-radio-row.checkout-payment-row {
    padding: 2vw 0;
  }
  
  .billing-page .checkout-field-row {
    margin-bottom: 2.6vw;
  }
  
  .billing-page .checkout-actions {
    margin-top: 7.4vw;
  }
  
  /* ==========================================================================
     ORDER ERROR MODAL (checkout-error.html)
     ========================================================================== */
  
  .order-error-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 28, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1.111111vw;
  }
  
  .order-error-overlay[data-app-hidden],
  .order-error-overlay.is-hidden {
    display: none;
  }
  
  .order-error-modal {
    position: relative;
    width: 100%;
    max-width: 41.666667vw;
    background: #ffffff;
    padding: 2.7vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  }
  
  .order-error-close {
    position: absolute;
    top: 1.111111vw;
    right: 1.111111vw;
    width: 1.666667vw;
    height: 1.666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  
  .order-error-close img {
    width: 1.111111vw;
    /* 16px on 1440px screen */
    height: 1.111111vw;
  }
  
  .order-error-title {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.666667vw;
    /* 24px @ 1440px */
    line-height: 2.222222vw;
    /* 32px @ 1440px */
    letter-spacing: 0;
    color: #1a1c1c;
    vertical-align: middle;
    margin: 0 0 1.5vw;
    padding-right: 1.666667vw;
  }
  
  .order-error-text {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.111111vw;
    /* 16px @ 1440px */
    line-height: 1.666667vw;
    /* 24px @ 1440px */
    letter-spacing: 0;
    color: #444844;
    vertical-align: middle;
    margin: 0 0 1.5vw;
  }
  
  .order-error-text a {
    color: #2563eb;
    text-decoration: underline;
  }
  
  .order-error-code {
    display: inline-block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.833333vw;
    /* 12px */
    color: #444844;
    background: var(--bg-section-alt);
    border: 1px solid var(--color-border);
    padding: 0.555556vw 0.833333vw;
  }
  
  /* ==========================================================================
     PRIVACY PAGE (privacy.html)
     ========================================================================== */
  
  /* =========================================================
     LUXE — PRIVACY & DATA GOVERNANCE
     =========================================================
     Page-specific CSS only.
  
     The global LUXE classes are intentionally reused:
     site-header-luxe
     container-luxe
     section-padding-luxe
     row
     col-*
     site-footer-luxe
  
     This file does not redefine the global layout system.
     ========================================================= */
  
  .privacy-page {
    background: var(--bg-page);
    overflow-x: clip;
  }
  
  /*
   * The shared global CSS sets overflow-x:hidden on html/body.
   * That can create a scroll container and prevent position:sticky
   * from behaving correctly. Use clip so horizontal overflow is
   * prevented without creating a sticky scroll boundary.
   */
  html:has(body.privacy-page),
  body.privacy-page {
    overflow-x: clip !important;
  }
  
  .privacy-page main,
  .privacy-page .privacy-content,
  .privacy-page .privacy-content-row,
  .privacy-page .privacy-toc-column,
  .privacy-page .privacy-article {
    overflow: visible;
  }
  
  /* =========================================================
     INTRO / HERO
     ========================================================= */
  
  .privacy-intro {
    padding-top: 4.4912vw;
    padding-bottom: 4.4912vw;
  }
  
  .privacy-intro-row {
    align-items: flex-end;
    margin-top: -0.694444vw;
    /* -10px on 1440px screen */
    --bs-gutter-x: 1.666667vw;
  }
  
  .privacy-intro-main {
    min-width: 0;
  }
  
  .privacy-kicker {
    display: block;
    margin-bottom: 1.65vw;
  
    font-family: var(--font-sans);
    font-size: 0.6944vw;
    line-height: 0.8333vw;
    font-weight: 600;
    letter-spacing: 0.0556vw;
    color: var(--color-dark-subtle);
    text-transform: uppercase;
  }
  
  .privacy-page-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 3.8889vw;
    line-height: 4.85vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.2vw;
    color: var(--color-dark);
  }
  
  .privacy-intro-aside {
    /* padding-top: 4vw; */
    margin-top: 0;
  }
  
  .privacy-intro-statement {
    margin: 0 0 1.05vw;
  
    font-family: var(--font-sans);
    font-size: 1.2632vw;
    line-height: 1.8947vw;
    letter-spacing: 0.0126vw;
    font-weight: 400;
    font-style: italic;
    color: var(--color-muted);
  }
  
  .privacy-updated {
    display: block;
  
    font-family: var(--font-sans);
    font-size: 0.5556vw;
    line-height: 0.8333vw;
    font-weight: 500;
    letter-spacing: 0.0556vw;
    color: var(--color-light-muted);
    text-transform: uppercase;
  }
  
  /* =========================================================
     CONTENT AREA
     ========================================================= */
  
  .privacy-content {
    padding-top: 5.5vw;
    padding-bottom: 7.1vw;
    overflow: visible !important;
  }
  
  .privacy-content .container-luxe {
    overflow: visible !important;
  }
  
  .privacy-content-row {
    align-items: flex-start;
    overflow: visible !important;
    --bs-gutter-x: 1.666667vw;
  }
  
  .privacy-toc-column {
    min-width: 0;
    align-self: flex-start;
  }
  
  .privacy-toc {
    width: 100%;
  }
  
  /* =========================================================
     DESKTOP — STICKY TABLE OF CONTENTS
     The Bootstrap column itself is sticky. Its containing
     .privacy-content section defines the stopping boundary.
     ========================================================= */
  
  .privacy-toc nav {
    margin-top: 1.6842vw;
  }
  
  .privacy-toc nav a {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1228vw;
    line-height: 1.6842vw;
    margin-bottom: 1.1228vw;
    display: block;
  }
  
  .privacy-toc-column {
    margin-top: -0.833333vw;
    /* -12px on 1440px screen */
  }
  
  .privacy-toc-title {
    display: block;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.8421vw;
    line-height: 0.8421vw;
    letter-spacing: 0.0842vw;
    padding-bottom: 1.1228vw;
    border-bottom: 1px solid rgba(196, 199, 195, 0.3);
  }
  
  /* =========================================================
     ARTICLE
     ========================================================= */
  
  .privacy-article {
    min-width: 0;
  }
  
  .privacy-article-section {
    margin-bottom: 5.05vw;
    scroll-margin-top: 8vw;
  }
  
  .privacy-article-section:last-child {
    margin-bottom: 0;
  }
  
  .privacy-article-section h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 2.2vw;
    line-height: 2.3vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    color: var(--color-dark);
  }
  
  .privacy-heading-rule {
    width: 100%;
    height: 1px;
    margin-top: 0.85vw;
    margin-bottom: 2.5vw;
    background: var(--color-border);
  }
  
  .privacy-article-section p {
    margin: 0 0 1.65vw;
    font-family: var(--font-sans);
    font-size: 1.12vw;
    line-height: 1.67vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    color: var(--color-dark-subtle);
  }
  
  .privacy-article-section p:last-child {
    margin-bottom: 0;
  }
  
  .privacy-article-section h3 {
    margin: 1.55vw 0 0.4vw;
  
    font-family: var(--font-sans);
    font-size: 0.8333vw;
    line-height: 1.05vw;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-dark);
  }
  
  /* =========================================================
     INQUIRIES
     ========================================================= */
  
  .privacy-inquiries {
    margin-top: 3.2vw;
    padding-top: 2.05vw;
    border-top: 1px solid var(--color-dark-subtle);
  }
  
  .privacy-inquiries-label {
    display: block;
    margin-bottom: 0.95vw;
  
    font-family: var(--font-sans);
    font-size: 0.6944vw;
    line-height: 0.8333vw;
    font-weight: 600;
    letter-spacing: 0.0556vw;
    color: var(--color-dark);
    text-transform: uppercase;
  }
  
  .privacy-email {
    display: inline-block;
    margin-bottom: 0.7vw;
  
    font-family: var(--font-serif);
    font-size: 1.6667vw;
    line-height: 1.9vw;
    font-weight: 400;
    color: var(--color-dark);
    text-decoration: none;
  }
  
  .privacy-inquiries p {
    margin: 0;
  
    font-size: 0.9722vw;
    line-height: 1.4vw;
    color: var(--color-muted);
  }
  
  .privacy-page .site-footer-luxe {
    border-top: 1px solid var(--color-border);
  }
  
  /* ==========================================================================
     CONTACT PAGE (contact.html)
     ========================================================================== */
  
  /* =========================================================
     LUXE CONTACT PAGE
     Page-specific styles only.
     Shared site/header/footer classes are intentionally untouched.
     ========================================================= */
  
  .contact-page-main {
    overflow: hidden;
    background: var(--bg-page, #f7f7f5);
  }
  
  /* ---------- INTRO ---------- */
  
  .contact-intro {
    padding-top: 3.1vw;
    padding-bottom: 10vw;
  }
  
  .contact-intro-row {
    min-height: 31.5vw;
    --bs-gutter-x: 1.666667vw;
  }
  
  .contact-intro-copy {
    padding-top: 3vw;
  }
  
  .contact-eyebrow,
  .contact-detail-label {
    display: block;
    margin: 0;
    color: var(--color-text, #222);
    font-family: "Inter", sans-serif;
    font-size: 0.8667vw;
    font-weight: 600;
    line-height: 0.8333vw;
    letter-spacing: 0.0833vw;
    text-transform: uppercase;
  }
  
  .contact-eyebrow {
    font-size: 0.8421vw;
    line-height: 0.8421vw;
    letter-spacing: 0.0842vw;
  }
  
  .contact-title {
    margin: 1.6842vw 0;
    color: var(--color-text, #222);
    font-family: "Cormorant Garamond", serif;
    font-size: 4.4912vw;
    line-height: 5.0526vw;
    letter-spacing: -0.0898vw;
    font-weight: 400;
    letter-spacing: -0.0898vw;
  }
  
  .contact-intro-description {
    max-width: 32vw;
    margin: 0;
    color: var(--color-text-muted, #555);
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1.2632vw;
    line-height: 1.8947vw;
    letter-spacing: 0.0126vw;
  }
  
  .contact-intro-image-column {
    display: flex;
    justify-content: flex-end;
  }
  
  .contact-intro-image {
    width: 100%;
    aspect-ratio: 0.83 / 1;
    overflow: hidden;
  }
  
  .contact-intro-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* ---------- ENQUIRY AREA ---------- */
  
  .contact-enquiry {
    padding-top: 0;
    padding-bottom: 11vw;
  }
  
  .contact-enquiry-row {
    align-items: stretch;
    --bs-gutter-x: 1.666667vw;
  }
  
  .contact-details-column {
    padding-right: 2.7vw;
  }
  
  .contact-details {
    height: 100%;
    padding-right: 2.7vw;
    border-right: 0.078125vw solid var(--color-border, #d8d8d5);
  }
  
  .contact-detail-group {
    margin-bottom: 4.5vw;
  }
  
  .contact-detail-group:last-child {
    margin-bottom: 0;
  }
  
  .contact-email,
  .contact-phone {
    display: block;
    color: var(--color-text, #222);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.9842vw;
    font-weight: 400;
    line-height: 2.1053vw;
    text-decoration: none;
  }
  
  .contact-email {
    margin-top: 1.5vw;
  }
  
  .contact-phone {
    margin-top: 1vw;
  }
  
  .contact-appointment .contact-detail-label,
  .contact-studios .contact-detail-label {
    margin-bottom: 1.2vw;
  }
  
  .contact-studios ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .contact-appointment p,
  .contact-studios p,
  .contact-studios ul li {
    max-width: 23.5vw;
    margin: 0;
    color: var(--color-text-muted, #555);
    font-family: "Inter", sans-serif;
    font-size: 1vw;
    font-weight: 400;
    line-height: 1.4211vw;
    letter-spacing: 1px;
    padding-bottom: 5px;
    margin-top: 5px;
  }
  
  .contact-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12vw;
    height: 3.05vw;
    margin-top: 1.5vw;
    padding: 0 1.5vw;
    background: #1e1f1f;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 0.6667vw;
    font-weight: 600;
    line-height: 0.8333vw;
    letter-spacing: 0.0833vw;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .contact-form-column {
    padding-left: 2.4vw;
  }
  
  .contact-form-wrap {
    width: 100%;
  }
  
  .contact-form {
    margin-top: 3.6vw;
  }
  
  .contact-form-row {
    --bs-gutter-x: 2.1vw;
    --bs-gutter-y: 2.25vw;
  }
  
  .contact-field label {
    display: block;
    margin-bottom: 0.85vw;
    color: var(--color-text, #222);
    font-family: "Inter", sans-serif;
    font-size: 0.8vw;
    font-weight: 600;
    line-height: 0.8333vw;
    letter-spacing: 0.0833vw;
    text-transform: uppercase;
  }
  
  .contact-field input,
  .contact-field textarea {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 0.078125vw solid #9d9d9a;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--color-text, #222);
    font-family: "Inter", sans-serif;
    font-size: 1.1vw;
    font-weight: 400;
    line-height: 1.4211vw;
    box-shadow: none;
  }
  
  .contact-field input {
    height: 2.9vw;
  }
  
  .contact-field input:focus,
  .contact-field textarea:focus {
    border-bottom-color: #222;
    box-shadow: none;
  }
  
  .contact-field textarea {
    height: 8.3vw;
    padding-top: 0.15vw;
    resize: none;
  }
  
  .contact-field textarea::placeholder {
    color: #8a8a88;
    opacity: 1;
  }
  
  .contact-message-field {
    margin-top: 4.5vw;
  }
  
  .contact-submit-column {
    display: flex;
    justify-content: flex-end;
    /* margin-top: -0.15vw; */
    margin-top: 3vw;
  }
  
  .contact-submit-btn {
    min-width: 10.1vw;
    height: 3.05vw;
    padding: 0 1.4vw;
    border: 0.078125vw solid #777;
    border-radius: 0;
    background: transparent;
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 0.6667vw;
    font-weight: 600;
    line-height: 0.8333vw;
    letter-spacing: 0.0833vw;
    text-transform: uppercase;
    cursor: pointer;
  }
  
  /* ---------- EDITORIAL IMAGE ---------- */
  
  .contact-editorial-banner {
    width: 100%;
    margin: 0;
  }
  
  .contact-editorial-image {
    position: relative;
    width: 100%;
    height: 30vw;
    overflow: hidden;
  }
  
  .contact-editorial-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .contact-editorial-quote {
    position: absolute;
    left: 5vw;
    bottom: 3.6vw;
    max-width: 31vw;
    margin: 0;
    color: #fff;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.55vw;
    font-style: italic;
    font-weight: 400;
    line-height: 2vw;
  }
  
  .contact_top_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .contact-editorial-image img {
    width: 100%;
    height: 100%;
    min-height: 614px;
    object-fit: cover;
    display: block;
  }
  
  /* ---------- DESKTOP RESTORE
     responsive.css may apply its <=991px rules.
     Contact-specific desktop layout begins at Bootstrap md.
     ---------- */
  
  /* =========================================================
     LUXE CONTACT PAGE — RESPONSIVE
     Loaded after contact.css and responsive.css.
     No global/site classes are redefined.
     ========================================================= */
  
  /* Bootstrap md is the desktop/mobile layout switch used by
     the contact page because the HTML intentionally uses col-md. */
  
  /* ==========================================================================
     SHIPPING & RETURNS PAGE (shipping-returns.html)
     ========================================================================== */
  
  /* =========================================================
     SHIPPING & RETURN PAGE
     Reference width: 1280px
     (Design tokens merged into the shared :root at the top of this file)
  ========================================================= */
  
  /* =========================================================
     SHIPPING / RETURN TOP CONTENT
  ========================================================= */
  
  .shipping_return .top_content h6 {
    font-family: var(--sr-font-inter);
    font-weight: 600;
    font-size: var(--sr-fs-12);
    line-height: var(--sr-lh-12);
    letter-spacing: 0.05375vw;
    vertical-align: middle;
    color: var(--sr-text);
    margin-bottom: 1.6842vw;
  }
  
  .shipping_return .top_content h1 {
    font-family: var(--sr-font-playfair);
    font-weight: 400;
    font-style: normal;
    font-size: 5vw;
    line-height: 5.7vw;
    letter-spacing: -0.4vw;
    vertical-align: middle;
    margin-bottom: 1.2632vw;
  }
  
  .shipping_return .top_content p {
    margin: 0;
    /* override the sitewide "p" reset's fixed 1rem bottom
                  margin, which doesn't scale with this page's vw sizing */
    font-family: var(--sr-font-inter);
    font-weight: 400;
    font-style: normal;
    font-size: 1.3vw;
    line-height: 1.8vw;
    letter-spacing: 0.0141vw;
    vertical-align: middle;
    max-width: 47vw;
  }
  
  /* =========================================================
     SHIPPING POLICY
  ========================================================= */
  
  .shipping-policy-title {
    font-family: var(--sr-font-playfair);
    font-weight: 400;
    font-size: var(--sr-fs-32);
    line-height: var(--sr-lh-42);
    letter-spacing: -0.15625vw;
    /* -2px on 1280px screen */
    vertical-align: middle;
    margin-bottom: 2vw;
  }
  
  .shipping-policy-label {
    font-family: var(--sr-font-inter);
    font-weight: 600;
    font-size: var(--sr-fs-12);
    line-height: var(--sr-lh-12);
    letter-spacing: var(--sr-ls-12);
    vertical-align: middle;
    color: var(--sr-text);
    margin-bottom: 0.78125vw;
    /* 10px on 1280px screen */
  }
  
  .shipping-policy-text {
    margin: 0;
    /* the sitewide "p" reset's 1rem bottom margin is fixed px,
                  which doesn't scale with this page's vw sizing — let
                  .shipping-policy-block's own vw margin control spacing */
    font-family: var(--sr-font-inter);
    font-weight: 400;
    font-size: 1.15vw;
    line-height: 1.675vw;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--sr-text);
  }
  
  .shipping-policy-block {
    margin-bottom: 2.75vw;
  }
  
  .shipping_return {
    padding-bottom: 3.5vw;
  }
  
  .shipping-policy-section {
    padding-top: 0;
  }
  
  .shipping-policy-right .shipping-policy-content {
    padding-top: 3.25vw;
  }
  
  /* Locked to the photo's own aspect ratio (662:640) so width and height
     always scale together during zoom — matches the fixed-aspect-box
     pattern used elsewhere (e.g. .about-hero-img-box) instead of leaving
     height undefined, which let the crop drift as the column reflowed. */
  .shipping-policy-image {
    width: 100%;
    aspect-ratio: 662 / 640;
    overflow: hidden;
  }
  
  .shipping-policy-image img.shipping_policy_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* =========================================================
     RETURN / EXCHANGE PROCESS
  ========================================================= */
  
  .returnexchange_process {
    padding-top: 4.5vw;
    padding-bottom: 4.2vw;
    background: var(--sr-light-bg);
  }
  
  h3 {
    font-family: var(--sr-font-playfair);
    font-weight: 400;
    font-style: normal;
    font-size: var(--sr-fs-32);
    line-height: var(--sr-lh-42);
    letter-spacing: 0;
  }
  
  .returns-exchanges-row {
    --bs-gutter-x: 1.875vw;
    /* 24px on 1280px screen */
  }
  
  .returns-exchanges-row-content {
    padding-top: 2.7vw;
    --bs-gutter-x: 1.875vw;
    /* 24px on 1280px screen */
  }
  
  .returns-exchanges-card {
    background: var(--sr-card-bg);
    padding: 2.7vw;
    padding-bottom: 1.9vw;
    min-height: 25.9375vw;
    /* 332px on 1280px screen */
  }
  
  .returns-exchanges-number {
    font-family: var(--sr-font-playfair);
    font-weight: 400;
    font-style: italic;
    font-size: 2vw;
    line-height: 3.25vw;
    letter-spacing: 0;
    color: var(--sr-muted);
    display: block;
    padding-bottom: 4vw;
  }
  
  .returns-exchanges-row h3 {
    position: relative;
    letter-spacing: -0.15625vw;
    /* -2px on 1280px screen */
    padding-bottom: 0.546875vw;
    /* 7px on 1280px screen */
  }
  
  .returns-exchanges-row h3:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 7.5vw;
    /* 96px on 1280px screen */
    height: 1px;
    background: var(--sr-black);
    z-index: 1;
  }
  
  h4.returns-exchanges-card-title {
    font-family: var(--sr-font-playfair);
    font-weight: 400;
    font-style: normal;
    font-size: var(--sr-fs-24);
    line-height: var(--sr-lh-32);
    letter-spacing: 0;
    color: var(--sr-dark);
    padding-bottom: 1.25vw;
    margin-bottom: 0;
  }
  
  p.returns-exchanges-card-text {
    margin: 0;
    /* override the sitewide "p" reset's fixed 1rem bottom margin */
    font-family: var(--sr-font-inter);
    font-weight: 400;
    font-style: normal;
    font-size: var(--sr-fs-16);
    line-height: 1.675vw;
    letter-spacing: 0;
    color: var(--sr-text);
  }
  
  /* =========================================================
     SPECIFIC GUIDELINES
  ========================================================= */
  
  .guidelines {
    background: var(--sr-white);
    padding-bottom: 7.3vw;
  }
  
  h3.specific-guidelines-heading {
    font-family: var(--sr-font-playfair);
    font-weight: 400;
    font-style: normal;
    font-size: var(--sr-fs-32);
    line-height: var(--sr-lh-42);
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
  }
  
  .accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--sr-white);
    box-shadow: none;
  }
  
  .accordion-item {
    border: none;
    border-bottom: 1px solid rgba(196, 199, 195, 0.5);
  }
  
  /* Bootstrap rounds the first/last accordion item, its button and its
     collapse panel by default — this page's accordion should stay square. */
  .accordion-item:first-of-type,
  .accordion-item:last-of-type,
  .accordion-item:first-of-type>.accordion-header .accordion-button,
  .accordion-item:last-of-type>.accordion-header .accordion-button,
  .accordion-item:last-of-type>.accordion-collapse,
  .accordion-collapse {
    border-radius: 0;
  }
  
  .accordion-button,
  .accordion-body {
    padding: 0;
  }
  
  .specific-guidelines-item {
    padding-block: 2.15vw;
  }
  
  .accordion-button {
    font-family: var(--sr-font-inter);
    font-weight: 600;
    font-style: normal;
    font-size: var(--sr-fs-12);
    line-height: var(--sr-lh-12);
    letter-spacing: var(--sr-ls-12);
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: var(--sr-dark);
  }
  
  .specific-guidelines-body {
    font-family: var(--sr-font-inter);
    font-weight: 400;
    font-style: normal;
    font-size: var(--sr-fs-16);
    line-height: var(--sr-lh-24);
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--sr-text);
    padding-top: 0.6vw;
  }
  
  .specific-guidelines-heading-row {
    --bs-gutter-x: 1.875vw;
    /* 24px on 1280px screen */
  }
  
  .specific-guidelines-content-row {
    margin-top: 2.34375vw;
    /* 30px on 1280px screen */
    --bs-gutter-x: 1.875vw;
    /* 24px on 1280px screen */
  }
  
  .specific-guidelines-content-inside {
    padding-inline: 0;
  }
  
  /* Accordion + / - */
  
  .accordion-button::after {
    content: "+";
    background-image: none;
    width: auto;
    height: auto;
    font-size: 1.25vw;
    /* 16px on 1280px screen */
    font-weight: 400;
    line-height: 1;
    transform: none;
  }
  
  .accordion-button:not(.collapsed)::after {
    content: "−";
    background-image: none;
    transform: none;
  }
  
  .accordion-button:focus {
    outline: none;
    box-shadow: none;
  }
  
  .accordion-button:not(.collapsed) {
    color: var(--sr-dark);
  }
  
  /* =========================================================
     FURTHER ASSISTANCE
  ========================================================= */
  
  .further_assistance {
    text-align: center;
    padding-top: 5.25vw;
    padding-bottom: 5vw;
    background: var(--sr-black);
  }
  
  .assistance-row {
    --bs-gutter-x: 1.875vw;
    /* 24px on 1280px screen */
  }
  
  h3.assistance-title {
    font-family: var(--sr-font-playfair);
    font-weight: 400;
    font-style: normal;
    font-size: 2.2vw;
    line-height: var(--sr-lh-42);
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: var(--sr-white);
    padding-bottom: 1.575vw;
    margin: 0 auto;
    max-width: 39.0625vw;
    /* 500px on 1280px screen */
  }
  
  p.assistance-description {
    font-family: var(--sr-font-inter);
    font-weight: 400;
    font-style: normal;
    font-size: var(--sr-fs-16);
    line-height: var(--sr-lh-24);
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: var(--sr-assist-text);
    max-width: 39.0625vw;
    /* 500px on 1280px screen */
    margin: 0 auto 2.890625vw;
    /* 37px on 1280px screen */
  }
  
  .assistance-actions {
    justify-content: center;
    display: flex;
    gap: 1.875vw;
    /* 24px on 1280px screen */
  }
  
  /* Primary Button */
  
  .assistance-btn-primary {
    width: fit-content;
    height: 3.75vw;
    /* 48px on 1280px screen */
    padding-top: 1.15vw;
    padding-right: 2vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    background: var(--sr-card-bg);
  
    font-family: var(--sr-font-inter);
    font-weight: 600;
    font-style: normal;
    font-size: var(--sr-fs-12);
    line-height: 100%;
    letter-spacing: var(--sr-ls-12);
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
  }
  
  /* Secondary Button */
  
  .assistance-btn-secondary {
    width: fit-content;
    height: 3.75vw;
    /* 48px on 1280px screen */
    padding-top: 1.25vw;
    padding-right: 2.5vw;
    padding-bottom: 1.25vw;
    padding-left: 2.5vw;
    border-width: 0.078125vw;
    outline: 1px solid var(--sr-assist-text);
  
    font-family: var(--sr-font-inter);
    font-weight: 600;
    font-style: normal;
    font-size: var(--sr-fs-12);
    line-height: 100%;
    letter-spacing: var(--sr-ls-12);
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: var(--sr-white);
  }
  
  img.shipping_policy_image {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: block;
  }
  
  /* ==========================================================================
     LUXE — SHIPPING & RETURNS
     MOBILE / TABLET RESPONSIVE OVERRIDES
  
     IMPORTANT:
     - Replace the existing shipping-returns-responsive.css with this file.
     - Global CSS, Bootstrap and HTML structure are NOT changed.
     - Desktop styles (> 991.98px) remain untouched.
     - This file is loaded after responsive.css and style-v1-compact.css.
     ========================================================================== */
  
  /* ==========================================================================
     TABLET + MOBILE
     <= 991.98px
     ========================================================================== */
  
  /* ==========================================================================
     MOBILE
     <= 767.98px
     ========================================================================== */
  
  /* ==========================================================================
     SMALL MOBILE
     <= 575.98px
     ========================================================================== */
  
  /* ==========================================================================
     THANK YOU PAGE (thank-you.html)
     ========================================================================== */
  
  /* =========================================================
     LUXE — THANK YOU PAGE
     Page-specific stylesheet
  
     STRUCTURE:
     site-header-luxe
     container-luxe
     row
     Bootstrap columns
  
     This follows the existing UPSELL page structure.
     Global classes are not redefined.
     ========================================================= */
  
  /* Design tokens merged into the shared :root at the top of this file */
  
  /* =========================================================
     PAGE
     ========================================================= */
  
  .thank-you-page {
    background: var(--thankyou-white);
    color: var(--thankyou-dark);
  }
  
  .thank-you-page .container-luxe {
    background: #fff;
  }
  
  /* =========================================================
     HEADER
     Uses existing .site-header-luxe,
     .container-luxe and .header-luxe-wrapper.
     Only checkout-specific child styling is added.
     ========================================================= */
  
  /* Header is now the shared .checkout-header component (see CHECKOUT PAGE
     section) — reused as-is instead of page-specific header/badge CSS. */
  
  /* =========================================================
     MAIN THANK YOU SECTION
     ========================================================= */
  
  .thank-you-section {
    background: var(--thankyou-white);
    padding-top: 5vw;
  }
  
  .thank-you-row {
    --bs-gutter-x: 1.666667vw;
  }
  
  .thank-you-image-column {
    display: flex;
    align-self: stretch;
  }
  
  .thank-you-image-holder {
    width: 100%;
    overflow: hidden;
  }
  
  .thank-you-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: 0.76;
  }
  
  /* =========================================================
     RIGHT CONTENT
     ========================================================= */
  
  .thank-you-content-column {
    display: flex;
    align-items: center;
  }
  
  .thank-you-content {
    width: 100%;
    max-width: 29vw;
    padding-top: 0;
  }
  
  .thank-you-brand {
    display: block;
    margin-bottom: 5.5vw;
    font-family: var(--thankyou-font-serif);
    font-size: 2.2456vw;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--thankyou-dark);
  }
  
  .thank-you-title {
    margin: 0 0 1.75vw;
  
    font-family: var(--thankyou-font-serif);
    font-style: normal;
    font-size: 4.4912vw;
    line-height: 5.0526vw;
    letter-spacing: -0.0898vw;
    color: var(--thankyou-dark);
  }
  
  .thank-you-description {
    max-width: 27vw;
    margin: 0 0 3.55vw;
  
    font-family: var(--thankyou-font-sans);
    font-size: 1.1228vw;
    line-height: 1.6842vw;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--thankyou-text);
  }
  
  .thank-you-order {
    padding-top: 2.15vw;
    padding-bottom: 3vw;
    border-top: 1px solid var(--thankyou-border);
  }
  
  .thank-you-order-label {
    display: block;
    margin-bottom: 0.4vw;
    font-family: var(--thankyou-font-sans);
    font-size: 0.8421vw;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.0842vw;
    color: var(--thankyou-text);
  }
  
  .thank-you-order-number {
    display: block;
  
    font-family: var(--thankyou-font-sans);
    font-size: 1.1228vw;
    line-height: 1.4;
    font-weight: 600;
    color: var(--thankyou-dark);
  }
  
  .thank-you-actions {
    width: 100%;
  }
  
  .thank-you-btn {
    width: 100%;
    height: 3.05vw;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    background: var(--thankyou-dark);
    color: var(--thankyou-white);
  
    font-family: var(--thankyou-font-sans);
    font-size: 0.8421vw;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.0842vw;
    text-transform: uppercase;
    text-decoration: none;
  
    transition: opacity 0.2s ease-in-out;
  }
  
  .thank-you-btn:hover {
    color: var(--thankyou-white);
    opacity: 0.85;
  }
  
  /* =========================================================
     FOOTER
     Bootstrap .container-luxe + .row + columns preserved.
     ========================================================= */
  
  .thank-you-footer {
    border-top: 1px solid var(--thankyou-border);
    background: var(--thankyou-white);
  }
  
  .thank-you-footer-row {
    min-height: 6.1vw;
    --bs-gutter-x: 1.666667vw;
  }
  
  .thank-you-copyright {
    margin: 0;
  
    font-family: var(--thankyou-font-sans);
    font-size: 0.833333vw;
    /* 12px @ 1440px, matches checkout-footer-wrapper p */
    line-height: 0.833333vw;
    font-weight: 600;
    letter-spacing: 0.083333vw;
    text-transform: uppercase;
    color: var(--thankyou-text);
  }
  
  .thank-you-footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.3vw;
  }
  
  .thank-you-footer-links a {
    font-family: var(--thankyou-font-sans);
    font-size: 1.111111vw;
    /* 16px @ 1440px, matches checkout-footer-links a */
    line-height: 1.666667vw;
    font-weight: 400;
    color: var(--thankyou-text);
    text-decoration: none;
  }
  
  /* =========================================================
     TABLET
     <= 991.98px
  
     Same Bootstrap row/column structure remains.
     Only dimensions change.
     ========================================================= */
  
  /* =========================================================
     MOBILE
     <= 767.98px
  
     Bootstrap columns stack naturally because they are
     col-12 col-md-*.
     ========================================================= */
  
  /* =========================================================
     SMALL MOBILE
     <= 575.98px
     ========================================================= */
  
  /* ==========================================================================
     LUXE THANK YOU — Responsive Overrides
     --------------------------------------------------------------------------
     Page-specific responsive CSS only.
  
     Existing HTML structure, Bootstrap grid, thank-you.css and global CSS
     remain unchanged.
  
     BREAKPOINT:
     - 768px and above = DESKTOP layout
     - below 768px   = MOBILE layout
     ========================================================================== */
  
  /* ==========================================================================
     DESKTOP — 768px+
     --------------------------------------------------------------------------
     The existing global responsive.css and thank-you.css use 991.98px as a
     responsive breakpoint. These overrides restore the desktop composition
     from 768px upward without changing the HTML structure.
     ========================================================================== */
  
  /* ==========================================================================
     MOBILE — below 768px
     --------------------------------------------------------------------------
     Matched to the supplied 390px × 1560px Thank You mobile reference.
  
     Reference composition:
     - 83px header
     - 20px page margins
     - 48px gap before the hero image
     - 350px image width
     - approximately 614px hero image height
     - stacked content
     - centered mobile footer
  
     Bootstrap .row / .col-* structure is preserved.
     ========================================================================== */
  
  /* ==========================================================================
     VERY SMALL MOBILE
     --------------------------------------------------------------------------
     Prevents horizontal overflow below the 390px reference width while
     retaining the same visual hierarchy.
     ========================================================================== */
  
  /* ==========================================================================
     UPSELL PAGE (upsell.html)
     ========================================================================== */
  
  /* =========================================================
     LUXE UPSELL PAGE
     Page-specific stylesheet
     Existing global layout classes are NOT redefined.
  ========================================================= */
  
  /* Design tokens merged into the shared :root at the top of this file */
  
  /* =========================================================
     PAGE
  ========================================================= */
  
  .upsell-page {
    background: var(--upsell-white);
    color: var(--upsell-dark);
  }
  
  /* =========================================================
     HEADER
  ========================================================= */
  
  .upsell-page .brand-luxe {
    text-decoration: none;
    color: var(--upsell-dark);
  }
  
  .upsell-header-nav {
    display: flex;
    align-items: center;
    gap: 3.5vw;
  }
  
  .upsell-header-nav a {
    font-family: var(--upsell-font-sans);
    font-weight: 400;
    font-size: 1.1vw;
    line-height: 1;
    color: var(--upsell-dark);
    text-decoration: none;
  }
  
  /* Header is now the shared .checkout-header component (see CHECKOUT PAGE
     section) — reused as-is instead of page-specific header/badge CSS. */
  
  .upsell-header-actions {
    display: flex;
    align-items: center;
    gap: 2vw;
  }
  
  .upsell-header-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: 1.8vw;
    height: 1.8vw;
  
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--upsell-dark);
    text-decoration: none;
  }
  
  /* Search icon */
  
  .upsell-search-icon {
    display: block;
    position: relative;
  
    width: 1.25vw;
    height: 1.25vw;
  
    border: 0.1vw solid var(--upsell-dark);
    border-radius: 50%;
  }
  
  .upsell-search-icon::after {
    content: "";
    position: absolute;
  
    width: 0.55vw;
    height: 0.1vw;
  
    right: -0.4vw;
    bottom: -0.2vw;
  
    background: var(--upsell-dark);
    transform: rotate(45deg);
  }
  
  /* Bag */
  
  .upsell-bag-icon {
    width: 1.2vw;
    height: 1.35vw;
  
    border: 0.1vw solid var(--upsell-dark);
    display: block;
    position: relative;
  }
  
  .upsell-bag-icon::before {
    content: "";
    position: absolute;
  
    width: 0.55vw;
    height: 0.4vw;
  
    left: 50%;
    top: -0.45vw;
  
    border: 0.1vw solid var(--upsell-dark);
    border-bottom: 0;
  
    transform: translateX(-50%);
  }
  
  .upsell-cart-count {
    position: absolute;
  
    top: -0.65vw;
    right: -0.65vw;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: 1.25vw;
    height: 1.25vw;
  
    border-radius: 50%;
  
    background: var(--upsell-dark);
    color: var(--upsell-white);
  
    font-family: var(--upsell-font-sans);
    font-size: 0.65vw;
    font-weight: 600;
  }
  
  /* Account */
  
  .upsell-account-icon {
    position: relative;
    display: block;
  
    width: 1.25vw;
    height: 1.4vw;
  }
  
  .upsell-account-icon::before {
    content: "";
    position: absolute;
  
    top: 0;
    left: 50%;
  
    width: 0.55vw;
    height: 0.55vw;
  
    border: 0.1vw solid var(--upsell-dark);
    border-radius: 50%;
  
    transform: translateX(-50%);
  }
  
  .upsell-account-icon::after {
    content: "";
    position: absolute;
  
    bottom: 0;
    left: 50%;
  
    width: 1.1vw;
    height: 0.65vw;
  
    border: 0.1vw solid var(--upsell-dark);
    border-radius: 1vw 1vw 0 0;
  
    transform: translateX(-50%);
  }
  
  /* =========================================================
     OPPORTUNITY BAR
  ========================================================= */
  
  .upsell-opportunity-bar {
    background: var(--upsell-dark);
    height: 5.7vw;
    /* 83px */
    padding-block: 2vw;
    box-sizing: border-box;
  }
  
  .upsell-opportunity-text {
    margin: 0;
    font-family: var(--upsell-font-sans);
    font-weight: 600;
    letter-spacing: 0.15vw;
    text-align: center;
    color: var(--upsell-white);
    font-size: 1vw;
    line-height: 1vw;
  }
  
  /* =========================================================
     MAIN PRODUCT
  ========================================================= */
  
  .upsell-product-row {
    --bs-gutter-x: 1.666667vw;
  }
  
  .upsell-product-image-column {
    /* padding-right: 4.5vw; */
    display: flex;
    align-self: flex-start;
  }
  
  .upsell-product-image-holder {
    width: 100%;
    overflow: hidden;
  }
  
  .upsell-product-main-image {
    display: block;
  
    width: 100%;
    height: auto;
  
    object-fit: cover;
  }
  
  .upsell-product-content-column {
    display: flex;
    /* align-items: center; */
  }
  
  .upsell-product-content {
    width: 100%;
    max-width: 29vw;
    padding-top: 75px;
    padding-top: 5.614vw;
  }
  
  /* =========================================================
     PRODUCT TYPOGRAPHY
  ========================================================= */
  
  .upsell-eyebrow {
    display: block;
    margin-bottom: 1.4vw;
    font-family: var(--upsell-font-sans);
    font-size: var(--upsell-fs-12);
    line-height: var(--upsell-lh-12);
    font-weight: 600;
    letter-spacing: var(--upsell-ls-ui);
    color: var(--upsell-dark);
    /* padding-top: 80px; */
    margin-bottom: 1.2632vw;
  }
  
  .upsell-product-title {
    /* margin: 0 0 0.7vw; */
  
    margin: 0 0 1.6vw;
    font-family: var(--upsell-font-serif);
    font-size: 2.2456vw;
    line-height: 2.9474vw;
    font-weight: 400;
    letter-spacing: -0.08vw;
    color: var(--upsell-dark);
    font-size: 2.2456vw;
  }
  
  .upsell-product-description {
    margin: 0 0 2.4vw;
    max-width: 27vw;
    font-family: var(--upsell-font-sans);
    font-size: 1.1228vw;
    line-height: 1.6842vw;
    font-weight: 400;
    color: var(--upsell-text);
    margin-bottom: 2.2456vw;
  }
  
  /* =========================================================
     PRICE
  ========================================================= */
  
  .upsell-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.3vw;
    border-top: 1px solid var(--upsell-border);
    border-bottom: 1px solid var(--upsell-border);
  }
  
  .upsell-price-group {
    display: flex;
    align-items: center;
    gap: 1.4vw;
  }
  
  .upsell-current-price {
    font-family: var(--upsell-font-serif);
    font-size: 2.5vw;
    line-height: 1;
    font-weight: 400;
  
    color: var(--upsell-dark);
  }
  
  .upsell-old-price {
    font-family: var(--upsell-font-sans);
    font-size: 1vw;
    line-height: 1;
  
    color: var(--upsell-muted);
  
    text-decoration: line-through;
  }
  
  .upsell-discount-badge {
    padding: 0.55vw 0.7vw;
  
    background: var(--upsell-green);
  
    font-family: var(--upsell-font-sans);
    font-size: 0.65vw;
    line-height: 1;
    font-weight: 600;
  
    letter-spacing: 0.03vw;
  
    color: var(--upsell-green-text);
  }
  
  /* =========================================================
     LIMITED OPPORTUNITY
  ========================================================= */
  
  .upsell-limited-box {
    margin-top: 2.2vw;
    padding: 1.8vw;
    border: 1px solid var(--upsell-border);
    background: var(--upsell-soft);
    padding: 1.4035vw;
  }
  
  .upsell-limited-heading {
    display: flex;
    align-items: center;
    gap: 1vw;
  
    margin-bottom: 1vw;
  }
  
  .upsell-limited-label {
    font-family: var(--upsell-font-sans);
    font-size: var(--upsell-fs-12);
    line-height: var(--upsell-lh-12);
    font-weight: 600;
    letter-spacing: var(--upsell-ls-ui);
    color: var(--upsell-text);
    letter-spacing: -0.04px;
  }
  
  .upsell-clock-icon {
    display: block;
    position: relative;
    width: 1.3vw;
    height: 1.3vw;
    border: 0.1vw solid var(--upsell-text);
    border-radius: 50%;
  }
  
  .upsell-clock-icon::before {
    content: "";
    position: absolute;
  
    left: 50%;
    top: 20%;
  
    width: 0.08vw;
    height: 0.42vw;
  
    background: var(--upsell-text);
  }
  
  .upsell-clock-icon::after {
    content: "";
    position: absolute;
  
    left: 50%;
    top: 50%;
  
    width: 0.35vw;
    height: 0.08vw;
  
    background: var(--upsell-text);
  
    transform: rotate(40deg);
    transform-origin: left center;
  }
  
  .upsell-limited-description {
    margin: 0;
    padding-left: 2.3vw;
  
    font-family: var(--upsell-font-sans);
    font-size: 1.1vw;
    line-height: 1.55;
    font-style: italic;
  
    color: var(--upsell-text);
  }
  
  /* =========================================================
     ACTIONS
  ========================================================= */
  
  .upsell-actions {
    display: flex;
    flex-direction: column;
    gap: 1.1112vw;
    margin-top: 2.7vw;
    margin-top: 3.3584vw;
  }
  
  .upsell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: 100%;
    min-height: 3.6vw;
  
    padding-inline: 2vw;
  
    font-family: var(--upsell-font-sans);
    font-size: var(--upsell-fs-12);
    line-height: 1;
    font-weight: 600;
  
    letter-spacing: var(--upsell-ls-ui);
    text-align: center;
    text-decoration: none;
  }
  
  .upsell-btn-primary {
    background: var(--upsell-dark);
    border: 1px solid var(--upsell-dark);
  
    color: var(--upsell-white);
  }
  
  .upsell-btn-secondary {
    background: transparent;
    border: 1px solid var(--upsell-dark);
  
    color: var(--upsell-dark);
  }
  
  .upsell-btn:hover {
    opacity: 0.85;
  }
  
  /* =========================================================
     LOADER
  ========================================================= */
  
  .upsell-loader-holder {
    display: flex;
    justify-content: center;
  
    padding-top: 1.7vw;
  }
  
  .upsell-loader {
    display: block;
  
    width: 1.6vw;
    height: 1.6vw;
  
    border: 0.18vw solid transparent;
    border-left-color: var(--upsell-dark);
    border-bottom-color: var(--upsell-dark);
  
    border-radius: 50%;
  
    transform: rotate(-30deg);
  }
  
  /* =========================================================
     FEATURE SECTION
  ========================================================= */
  
  .upsell-features-section {
    padding-top: 4.7vw;
    padding-bottom: 8vw;
  }
  
  .upsell-features-row {
    --bs-gutter-x: 2vw;
  }
  
  .upsell-feature-card {
    height: 100%;
  }
  
  .upsell-feature-image-holder {
    width: 100%;
    margin-bottom: 1.4vw;
  
    overflow: hidden;
  }
  
  .upsell-feature-image {
    display: block;
  
    width: 100%;
    aspect-ratio: 1 / 1;
  
    object-fit: cover;
  
    filter: grayscale(100%);
  }
  
  .upsell-feature-label {
    display: block;
    margin-bottom: 1vw;
    font-family: var(--upsell-font-sans);
    font-size: var(--upsell-fs-12);
    line-height: var(--upsell-lh-12);
    font-weight: 600;
    letter-spacing: var(--upsell-ls-ui);
    color: var(--upsell-dark);
    font-size: 1;
    letter-spacing: 0.5px;
  }
  
  .upsell-feature-description {
    margin: 0;
    max-width: 95%;
    font-family: var(--upsell-font-sans);
    font-size: 1.15vw;
    line-height: 1.55;
    color: var(--upsell-text);
    letter-spacing: -0.01vw;
  }
  
  /* =========================================================
     FOOTER
  ========================================================= */
  
  .upsell-footer {
    border-top: 1px solid var(--upsell-border);
  }
  
  .upsell-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    padding-block: 2.7vw;
  }
  
  .upsell-copyright {
    margin: 0;
  
    font-family: var(--upsell-font-sans);
    font-size: 0.833333vw;
    /* 12px @ 1440px, matches checkout-footer-wrapper p */
    line-height: 0.833333vw;
    font-weight: 600;
    text-transform: uppercase;
  
    letter-spacing: 0.083333vw;
  
    color: var(--upsell-text);
  }
  
  .upsell-footer-links {
    display: flex;
    align-items: center;
    gap: 2.3vw;
  }
  
  .upsell-footer-links a {
    font-family: var(--upsell-font-sans);
    font-size: 1vw;
    font-weight: 400;
  
    color: var(--upsell-text);
    text-decoration: none;
  }
  
  /* ==========================================================================
     LUXE UPSELL — Responsive Overrides
     --------------------------------------------------------------------------
     Page-specific responsive CSS only.
     Existing HTML structure, Bootstrap grid, upsell.css and global CSS remain
     unchanged.
  
     BREAKPOINT:
     - 768px and above = DESKTOP layout
     - below 768px   = MOBILE layout
     ========================================================================== */
  
  /* ==========================================================================
     DESKTOP — 768px+
     --------------------------------------------------------------------------
     The existing global responsive.css switches several shared styles at
     991.98px. These overrides intentionally restore the LUXE desktop treatment
     for this page from 768px upward.
     ========================================================================== */
  
  /* =========================================================
     TABLET
  ========================================================= */
  
  /* ==========================================================================
     MOBILE — below 768px
     --------------------------------------------------------------------------
     Values are matched to the supplied Upsell-Mobile reference:
     249px reference viewport, 13px horizontal page margin, compact header,
     stacked product section, full-width CTAs, one-column feature cards.
     ========================================================================== */
  
  /* ==========================================================================
     SMALL MOBILE — <= 360px
     --------------------------------------------------------------------------
     Keeps the 249px reference proportions while preventing text/button
     overflow on very narrow devices.
     ========================================================================== */
  
  /* =========================================================
     MOBILE
  ========================================================= */
  
  /* Nothing in the bag: the runtime marks the control, the design says what
     unavailable looks like. */
  .btn-minicart-checkout[data-app-disabled] {
    background: #8a8a8a;
    pointer-events: none;
  }
  
  /* ---------------------------------------------------------------------------
     Validation state: red underline + message ONLY.
  
     app.css paints validation state as a full orange/green 1px box with a warning
     or tick PNG in the corner (input.has-error / input.no-error). That is the
     framework's look, not this theme's -- the design says an invalid field keeps
     its underline and turns it red, and a valid one shows nothing at all.
     Override both, for inputs and selects, on every field this theme styles.
     --------------------------------------------------------------------------- */
  body input.has-error,
  body select.has-error,
  body textarea.has-error,
  body input.no-error,
  body select.no-error,
  body textarea.no-error {
    /* app.css sets `background: url(...) ... #fff` -- clearing only the image
       leaves the white fill behind, which shows as a white box on this theme's
       off-white page. Clear the whole shorthand. */
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  
  body input.has-error,
  body select.has-error,
  body textarea.has-error {
    border-bottom-color: #f00 !important;
  }
  
  /* The validator injects its message as
     <span class="error-message-inline" style="color:red;font-size:12px;...">.
     The inline style beats a normal rule, so !important is required to bring it
     onto the theme's scale -- same size and rhythm as .checkout-field-error. */
  .error-message-inline {
    font-family: var(--font-sans) !important;
    font-size: 0.833333vw !important;
    color: #f00 !important;
    margin-top: 0.416667vw !important;
    display: block !important;
  }

  /* The empty-cart message, which the validator prepends to the form as
     <div class="error-msg" id="product_error">. app.css styles that class as an alert box
     (pink panel, red border) and is injected AFTER this stylesheet, so at equal specificity
     it won -- a pink panel above a form whose other errors are plain red lines. The `body`
     prefix is what wins it back, the same way the validation rules above do. Matched to
     .error-message-inline so the form speaks in one voice. */
  body .error-msg {
    font-family: var(--font-sans);
    /* Larger than a field's own error and centred over the form: this one is not about the
       input beside it, it is about the order having nothing in it, so it has to read as a
       statement about the whole page rather than a note on the nearest field. */
    font-size: 1.111111vw;
    text-align: center;
    color: #f00;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1.666667vw;
  }
  
  /* ---------------------------------------------------------------------------
     Order-error modal.
  
     validate-class.js builds its own overlay and appends it to <body>:
       #error_handler_overlay > .error_handler_body > a#..._close + ul > li
     Only the DESIGN is restyled here to match checkout-error.html. The markup and
     the message stay the framework's -- whatever the server returns is what the
     customer reads.
     --------------------------------------------------------------------------- */
  body #error_handler_overlay[style*="block"] {
    display: flex !important;
  }
  
  body #error_handler_overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 28, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1.111111vw;
  }
  
  body #error_handler_overlay .error_handler_body {
    position: relative;
    width: 100%;
    max-width: 41.666667vw;
    background: #ffffff;
    padding: 2.7vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border-radius: 0;
  }
  
  body #error_handler_overlay #error_handler_overlay_close {
    position: absolute;
    top: 1.111111vw;
    right: 1.111111vw;
    width: 1.666667vw;
    height: 1.666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: #1a1c1c;
    font-family: "Inter", sans-serif;
    font-size: 1.111111vw;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }
  
  body #error_handler_overlay ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* The first line reads as the title, the rest as body copy — the same
     hierarchy checkout-error.html sets with its <h2> and <p>. */
  body #error_handler_overlay li {
    font-family: "Inter", sans-serif;
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    color: #444844;
    margin: 0 0 0.555556vw;
  }
  
  body #error_handler_overlay li:first-child {
    font-family: "Playfair Display", serif;
    font-size: 1.666667vw;
    line-height: 2.222222vw;
    color: #1a1c1c;
    margin-bottom: 1.111111vw;
  }
  
  body #error_handler_overlay li:last-child {
    margin-bottom: 0;
  }

  /* A single <li> is BOTH first and last, so the rule above was cancelling the
     title's gap. The error page keeps 21.6px under its <h2>; restore it. */
  body #error_handler_overlay li:first-child:last-child {
    margin-bottom: 1.5vw;
  }

/* ---------------------------------------------------------------------------
   Selected-state rings.

   Only a method the visitor has actually chosen is drawn as selected. Showing the
   first one as pre-selected was misleading: no radio is checked on load and the
   runtime holds no shippingId, so the Order Summary correctly reads $0.00 while
   the control claimed a $10 method was already picked. The ring now appears only
   once the runtime marks the record with data-app-selected.
   --------------------------------------------------------------------------- */
shippingmethod[data-app-selected] .checkout-radio-control input[type="radio"] {
  border-width: 0.25vw;
  border-color: #1a1c1c;
}

/* Same for payment. app.js ticks the theme's radio when a method is applied,
   but applyPayment() only auto-runs when exactly ONE method is shown -- with
   three, nothing is selected until the visitor clicks. Show the first (the card
   form, which is the one already expanded) as chosen until then. */
paymentmethod:not(:has(input[type="radio"]:checked)) > [data-app="payment"]:first-child
  .checkout-radio-control input[type="radio"] {
  border-width: 0.25vw;
  border-color: #1a1c1c;
}

/* Remove control in the checkout Order Summary. Same data-app="remove" role
   and same look as the cart page's button -- .cart-remove-btn's rules are
   scoped to .cart-item-info, so the values are repeated here rather than
   widening that selector. */
.checkout-summary-item-info .checkout-summary-remove-btn {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: "Inter", var(--font-sans, sans-serif);
  font-weight: 600;
  font-style: normal;
  font-size: 0.833333vw;
  line-height: 0.833333vw;
  letter-spacing: 0.083333vw;
  color: #444844;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #c4c7c380;
  text-underline-offset: 0.138889vw;
  cursor: pointer;
}

@media screen and (max-width: 991.98px) {
  .checkout-summary-item-info .checkout-summary-remove-btn {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1.2px;
    text-underline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
   Error overlay: match checkout-error.html's design.

   The markup is the framework's (validate-class.js builds one <li> holding the
   server's message) and is shared by every funnel, so nothing is changed there.
   The title already inherits the right face; what is missing is the supporting
   line and the close glyph. Both are added here, in the theme's own stylesheet,
   so this stays specific to LUXE.
   --------------------------------------------------------------------------- */

/* The framework close link is the letter "X" in bold Inter. The error page uses
   a light multiplication sign; hide the letter and draw that instead. */
body #error_handler_overlay #error_handler_overlay_close {
  font-size: 0;
}

body #error_handler_overlay #error_handler_overlay_close::before {
  content: "\00d7";
  font-family: "Inter", sans-serif;
  font-size: 1.25vw;
  font-weight: 400;
  line-height: 1;
  color: #1a1c1c;
}

@media screen and (max-width: 991.98px) {
  /* The vw sizes above collapse to ~6px at phone widths (checkout-error.html
     has the same gap), so the overlay gets readable fixed sizes here. */
  body #error_handler_overlay .error_handler_body {
    max-width: none;
    padding: 24px 20px;
  }

  body #error_handler_overlay li:first-child {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  body #error_handler_overlay li {
    font-size: 14px;
    line-height: 22px;
  }

  body #error_handler_overlay #error_handler_overlay_close {
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
  }

  body #error_handler_overlay #error_handler_overlay_close::before {
    font-size: 20px;
  }

  body #error_handler_overlay li:first-child:last-child {
    margin-bottom: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Submit progress.

   Two behaviours come from the shared runtime (app_assets), which this theme
   does not modify:
     1. app.css shows a full-screen dimmer with a GIF and "Processing, one
        moment please...".
     2. validate-class.js disables the submit button and REPLACES its label
        with "Submitting...".

   Neither belongs in LUXE, so both are answered here in the theme's own
   stylesheet. The overlay is suppressed, and the button's replaced text is
   hidden and redrawn as the theme's own wording with a spinner beside it --
   keyed off [disabled], which is what the runtime sets while the order posts.
   --------------------------------------------------------------------------- */
body #loading-indicator,
body #loading-indicator::before,
body #loading-indicator::after {
  display: none !important;
}

/* The runtime rewrites this button's text twice -- "Submitting..." while the
   order posts, then "Submit" when the request completes -- destroying the
   theme's own wording both times. The text node cannot be preserved from CSS,
   so any button that states a data-app-busy-label stops showing its own text
   entirely and is labelled from that attribute instead. Applying this in EVERY
   state, not just :disabled, is what keeps "Submit" from appearing afterwards. */
body .checkout-continue-btn[data-app-busy-label] {
  position: relative;
  font-size: 0;
  letter-spacing: 0;
  white-space: nowrap;
}

body .checkout-continue-btn[data-app-busy-label]::after {
  content: attr(data-app-busy-label);
  vertical-align: middle;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.833333vw;
  line-height: 0.833333vw;
  letter-spacing: 0.083333vw;
  text-transform: uppercase;
  color: #ffffff;
}

body .checkout-continue-btn:disabled {
  cursor: wait;
  opacity: 1;
}

/* Absolutely positioned so the spinner does not widen the button: a control
   that grows mid-submit shifts the layout under the customer's cursor. */
body .checkout-continue-btn:disabled::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.111111vw;
  margin-top: -0.486111vw;
  width: 0.972222vw;
  height: 0.972222vw;
  border: 0.138889vw solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: luxe-btn-spin 0.7s linear infinite;
}

@keyframes luxe-btn-spin {
  to { transform: rotate(360deg); }
}

@media screen and (max-width: 991.98px) {
  body .checkout-continue-btn:disabled::before {
    left: 16px;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border-width: 2px;
  }

  body .checkout-continue-btn[data-app-busy-label]::after {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1.2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .checkout-continue-btn:disabled::before {
    animation: none;
  }
}

/* Upsell pages take a different path: their buttons are type="button" with
   data-app="accept"/"next", so validate-class.js never disables them -- the
   only progress signal the runtime gives is #loading-indicator, which this
   theme hides. Key the spinner off that instead, using :has() so the button
   reacts to the loader being shown.

   Only the button the customer actually pressed spins. A click leaves focus on
   that button for the whole request, so :focus is what tells the two apart --
   nothing in the markup or the runtime marks the clicked one. Both are still
   made unclickable, so the idle button cannot be pressed mid-request. */
body:has(#loading-indicator[style*="block"]) .upsell-btn {
  position: relative;
  cursor: wait;
  pointer-events: none;
}

body:has(#loading-indicator[style*="block"]) .upsell-btn:focus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.111111vw;
  margin-top: -0.486111vw;
  width: 0.972222vw;
  height: 0.972222vw;
  border: 0.138889vw solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: luxe-btn-spin 0.7s linear infinite;
}

@media screen and (max-width: 991.98px) {
  body:has(#loading-indicator[style*="block"]) .upsell-btn:focus::before {
    left: 16px;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#loading-indicator[style*="block"]) .upsell-btn:focus::before {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Focus ring.

   app.css paints a focused field as a full 1px #51cbee box with a 5px glow
   (input[type=text]:focus et al). That is the framework's look, not this
   theme's -- the design keeps the field borderless with a single underline that
   darkens on focus. app.css is injected AFTER the theme stylesheet and matches
   with equal specificity, so the theme's own rule is overridden; the `body`
   prefix is what wins it back, the same way the validation and overlay rules
   above do.

   Applied at every width: the theme's .checkout-field rule lives in a
   min-width:992px block, so without this the box also showed on mobile.
   --------------------------------------------------------------------------- */
/* Kill the framework ring everywhere first, so a field the theme has not named
   explicitly (the search box, a coupon input) cannot inherit it either. */
body input:focus,
body select:focus,
body textarea:focus {
  box-shadow: none;
  outline: none;
}

/* Then restore the theme's own focus treatment for the checkout fields: the
   underline darkens, nothing else changes. */
body .checkout-field input:focus,
body .checkout-select-wrap select:focus,
body .checkout-promo-row input:focus {
  background: transparent;
  border: none;
  border-bottom: 1px solid #1a1c1c;
}

/* The search box keeps its own underline rather than gaining a blue box. */
body .search-modal-input:focus {
  background: transparent;
  border: none;
}

/* ---------------------------------------------------------------------------
   Error overlay: supporting line.

   The platform builds #error_handler_overlay after render and puts only the
   server's message in it. The sentence beneath is this theme's copy, so it is
   written here rather than in the shared runtime.

   The address is the funnel's own: each page that can show the overlay renders
   {{ @tokens.company_info.email }} into a hidden .error-support-email holder,
   and js/theme.js reads it. A funnel with no address set simply gets the
   sentence without one.
   --------------------------------------------------------------------------- */
body #error_handler_overlay .error_handler_support {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.111111vw;
  line-height: 1.666667vw;
  letter-spacing: 0;
  color: #444844;
  margin: 0 0 1.5vw;
}

body #error_handler_overlay .error_handler_support a {
  color: #2563eb;
  text-decoration: underline;
}

/* A single <li> is both first and last, so the :last-child rule above would
   otherwise cancel the gap under the title. */
body #error_handler_overlay li:first-child:last-child {
  margin-bottom: 1.5vw;
}

@media screen and (max-width: 991.98px) {
  body #error_handler_overlay .error_handler_support {
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 16px;
  }

  body #error_handler_overlay li:first-child:last-child {
    margin-bottom: 12px;
  }
}


/* ==========================================================================
   Luxurious Custom Select Styling (`.form-select-luxe`)
   ========================================================================== */

/* 1. Opt-in to the modern customizable architecture for this specific class */
select.form-select-luxe, 
::picker(select) {
  appearance: base-select;
  font-family: inherit; /* Ensures option text matches the rest of your site font */
}

/* 2. REMOVE THE DEFAULT NATIVE CARET ARROW */
select.form-select-luxe::picker-icon {
  display: none !important;
}

/* 3. OPTION ROW STYLING - Fixes side-sticking text & font mismatch */
select.form-select-luxe option {
  font-family: inherit;
  font-size: 14px;
  color: #333333;
  
  /* Creates space on top/bottom (8px) and left/right (16px) */
  padding: 8px; 
  cursor: pointer;
}

/* 4. OPTION HOVER/FOCUS STATE */
select.form-select-luxe option:hover, 
select.form-select-luxe option:focus {
  background: var(--color-dark);
  color: #ffffff;
}

/* 5. DROPDOWN BOX CONTAINER STYLING */
::picker(select.form-select-luxe) {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

select.form-select-luxe option::checkmark {
  display: none !important;
  content: none !important;
}