/* ==========================================================================
   HemDynamics - Luxury Climate Bedding Theme Stylesheet
   Designed for Unify CMS V6 Engine
   ========================================================================== */

   @import "cart.css";
   @import "checkout.css";
   
   :root {
     /* Color Palette - Luxury Warm Linen & Deep Obsidian Night */
     --bg: #F8F5EE;
     --surface: #FFFFFF;
     --surface-2: #F1ECE1;
     --surface-3: #E7E0D2;
     --line: #E2DACB;
     --line-subtle: rgba(20, 23, 30, 0.08);
   
     --ink: #14171E;
     --ink-secondary: #3B3F4A;
     --muted: #615C53;
     --faint: #8F887C;
   
     --night: #0E121A;
     --night-card: #151A25;
     --night-2: #1D2433;
     --night-ink: #FAF7F2;
     --night-muted: #A3AAB8;
     --night-line: rgba(255, 255, 255, 0.12);
   
     --cool: #6C93B5;
     --cool-glow: rgba(108, 147, 181, 0.35);
     --warm: #D48C53;
     --warm-glow: rgba(212, 140, 83, 0.35);
     --accent: #182230;
     --accent-h: #0F1722;
     --save: #3C7043;
     --gold: #D4AF37;
   
     /* Typography */
     --display: 'Zodiak', 'Iowan Old Style', 'Playfair Display', Georgia, serif;
     --body: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   
     /* Radii */
     --r-xs: 6px;
     --r-sm: 10px;
     --r: 16px;
     --r-lg: 24px;
     --r-xl: 32px;
     --r-full: 9999px;
   
     /* Spacing Scale */
     --s1: 4px;
     --s2: 8px;
     --s3: 12px;
     --s4: 16px;
     --s5: 24px;
     --s6: 32px;
     --s7: 48px;
     --s8: 64px;
     --s9: 96px;
     --s10: 128px;
   
     /* Font Sizes */
     --t-xs: 0.75rem;
     --t-sm: 0.875rem;
     --t-base: 1rem;
     --t-lg: 1.125rem;
     --t-xl: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
     --t-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
     --t-hero: clamp(2.8rem, 1.8rem + 4.6vw, 5.5rem);
   
     /* Shadows */
     --shadow-sm: 0 2px 8px rgba(20, 23, 30, 0.04);
     --shadow-md: 0 8px 24px rgba(20, 23, 30, 0.06);
     --shadow-lg: 0 20px 48px rgba(20, 23, 30, 0.09);
     --shadow-hover: 0 24px 56px rgba(20, 23, 30, 0.12);
   
     /* Transitions */
     --ease: cubic-bezier(0.16, 1, 0.3, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* Reset & Base */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
   }
   
   body,
   body.ignore-app-design {
     font-family: var(--body) !important;
     font-size: var(--t-base) !important;
     line-height: 1.6;
     color: var(--ink);
     background: var(--bg) !important;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   img {
     display: block;
     max-width: 100%;
     height: auto;
   }
   
   a {
     color: inherit;
     text-decoration: none;
     transition: color 0.2s var(--ease);
   }
   
   button {
     font: inherit;
     color: inherit;
     background: none;
     border: 0;
     cursor: pointer;
   }
   
   h1,
   h2,
   h3 {
     font-family: var(--display);
     font-weight: 400;
     letter-spacing: -0.02em;
     line-height: 1.1;
     color: var(--ink);
   }
   
   h1 em,
   h2 em {
     font-style: italic;
     font-weight: 300;
   }
   
   h2 {
     font-size: var(--t-2xl);
   }
   
   :focus-visible {
     outline: 0;
   }
   
   [hidden] {
     display: none !important;
   }
   
   .sr {
     position: absolute;
       width: 1px;
       height: 1px;
       overflow: hidden;
       clip: rect(0 0 0 0);
       white-space: nowrap;
   }
   
   .skip {
     position: absolute;
     left: -999px;
     top: 0;
     background: var(--ink);
     color: #fff;
     padding: 10px 16px;
     border-radius: var(--r-xs);
     z-index: 1000;
   }
   
   .skip:focus {
     left: 12px;
     top: 12px;
   }
   
   .wrap {
     width: min(1280px, 100% - 2 * clamp(20px, 4.5vw, 56px));
     margin-inline: auto;
   }
   
   /* Eyebrow Pill Tag */
   .eyebrow {
     display: inline-block;
     font-size: var(--t-xs);
     letter-spacing: 0.16em;
     text-transform: uppercase;
     font-weight: 600;
     color: var(--night-muted);
     margin-bottom: var(--s3);
   }
   
   .eyebrow--dark {
     color: var(--faint);
   }
   
   /* Buttons */
   .btn,
   .ignore-app-design .btn {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 10px !important;
     padding: 15px 28px !important;
     border-radius: var(--r-full) !important;
     font-size: var(--t-sm) !important;
     font-weight: 600 !important;
     letter-spacing: 0.02em !important;
     border: 1px solid transparent !important;
     transition: all 0.28s var(--ease) !important;
     position: relative !important;
     overflow: hidden !important;
     width: auto;
   }
   
   .btn:active,
   .ignore-app-design .btn:active {
     transform: scale(0.97) !important;
   }
   
   .btn--light,
   .ignore-app-design .btn--light {
     background: var(--surface) !important;
     color: var(--ink) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
   }
   
   .btn--light:hover,
   .ignore-app-design .btn--light:hover {
     background: #FFFFFF !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
   }
   
   .btn--glow,
   .ignore-app-design .btn--glow {
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
   }
   
   .btn--ghost,
   .ignore-app-design .btn--ghost {
     border: 1px solid rgba(255, 255, 255, 0.5) !important;
     color: #FFFFFF !important;
     background: rgba(255, 255, 255, 0.04) !important;
     backdrop-filter: blur(8px) !important;
   }
   
   .btn--ghost:hover,
   .ignore-app-design .btn--ghost:hover {
     border-color: #FFFFFF !important;
     background: rgba(255, 255, 255, 0.14) !important;
     transform: translateY(-2px) !important;
   }
   
   .btn--dark,
   .ignore-app-design .btn--dark {
     background: var(--accent) !important;
     color: #FFFFFF !important;
     box-shadow: 0 4px 16px rgba(24, 34, 48, 0.2) !important;
   }
   
   .btn--dark:hover,
   .ignore-app-design .btn--dark:hover {
     background: var(--accent-h) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 8px 24px rgba(24, 34, 48, 0.3) !important;
   }
   
   .btn--block,
   .ignore-app-design .btn--block {
     width: 100% !important;
   }
   
   .btn--grow,
   .ignore-app-design .btn--grow {
     flex: 1 !important;
   }
   
   .icon-btn,
   .ignore-app-design .icon-btn {
     width: 42px !important;
     height: 42px !important;
     border-radius: var(--r-full) !important;
     font-size: 24px !important;
     line-height: 1 !important;
     display: grid !important;
     place-items: center !important;
     color: var(--ink) !important;
     background: rgba(20, 23, 30, 0.04) !important;
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer !important;
     transition: all 0.2s var(--ease) !important;
   }
   
   .icon-btn:hover,
   .ignore-app-design .icon-btn:hover {
     background: var(--surface-3) !important;
     transform: scale(1.05) !important;
   }
   
   /* Announcement Bar */
   .announce {
     background: var(--night);
     min-height: 43.6px;
     color: var(--night-ink);
     text-align: center;
     font-size: .97rem;
     letter-spacing: 0.04em;
     padding: 10px 16px;
     border-bottom: 1px solid var(--night-line);
   }
   
   .announce p {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 0;
     color: var(--night-ink);
   }
   
   .announce span.dot {
     opacity: 0.4;
   }
   
   /* Header & Glassmorphism Nav */
   .header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(248, 245, 238, 0.7);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid transparent;
     transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
   }
   
   .header.is-scrolled {
     border-bottom-color: var(--line);
     background: rgba(248, 245, 238, 0.96);
     box-shadow: var(--shadow-sm);
   }
   
   .header__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 72px;
     gap: var(--s5);
   }
   
   .wordmark {
     font-family: var(--display);
     font-size: 1.85rem;
     letter-spacing: -0.03em;
     line-height: 1;
     font-weight: 500;
     color: var(--ink);
     transition: opacity 0.2s;
     width: 180px;
     display: block;
   }
   
   .wordmark img {
     width: 100%;
   }
   
   .wordmark:hover {
     opacity: 0.85;
   }
   
   .wordmark--lg {
     font-size: 2.6rem;
   }
   
   .nav {
     display: flex;
     gap: var(--s6);
     font-size: var(--t-sm);
     font-weight: 500;
   }
   
   .nav a {
     color: var(--muted);
     position: relative;
     padding: 6px 0;
     transition: color 0.2s var(--ease);
     font-size: 15px;
   }
   
   .nav a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--ink);
     transition: width 0.25s var(--ease);
   }
   
   .nav a:hover {
     color: var(--ink);
   }
   
   .nav a:hover::after {
     width: 100%;
   }
   
   .cart-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: var(--t-sm);
     font-weight: 600;
     padding: 9px 14px 9px 16px;
     border-radius: var(--r-full);
     border: 1px solid var(--line);
     background: var(--surface);
     transition: all 0.24s var(--ease);
     box-shadow: var(--shadow-sm);
   }
   
   .cart-btn:hover {
     background: var(--surface-2);
     border-color: var(--ink);
     transform: translateY(-1px);
   }
   
   .cart-count {
     min-width: 24px;
     height: 24px;
     padding: 0 7px;
     border-radius: var(--r-full);
     background: var(--accent);
     color: #FFFFFF;
     font-size: var(--t-xs);
     font-weight: 700;
     display: grid;
     place-items: center;
     font-variant-numeric: tabular-nums;
     transition: transform 0.2s;
   }
   
   .cart-count.bump {
     animation: bump 0.4s var(--ease);
   }
   
   @keyframes bump {
     50% {
       transform: scale(1.3);
     }
   }
   
   /* Hero Section */
   .hero {
     position: relative;
     min-height: min(90vh, 860px);
     display: flex;
     align-items: center;
     color: #FFFFFF;
     overflow: hidden;
     background: var(--night);
   }
   
   .hero__img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: 68% center;
     transform: scale(1.02);
     transition: transform 1.2s var(--ease);
   }
   
   .hero__shade {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg,
         rgba(14, 18, 26, 0.65) 45%,
         rgba(14, 18, 26, 0.15) 75%,
         rgba(14, 18, 26, 0.4) 100%);
   }
   
   .hero__content {
     position: relative;
     padding-block: var(--s9) var(--s8);
   
   }
   
   .hero h1 {
     font-size: var(--t-hero);
     color: #FFFFFF;
     max-width: 12ch;
     margin-bottom: var(--s5);
     text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
   }
   
   .hero__lede {
     max-width: 48ch;
     font-size: 1.15rem;
     line-height: 1.65;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: var(--s7);
     font-weight: 400;
   }
   
   .hero__ctas {
     display: flex;
     gap: var(--s4);
     flex-wrap: wrap;
     margin-bottom: var(--s8);
   }
   
   .hero__facts {
     list-style: none;
     display: flex;
     gap: var(--s4);
     flex-wrap: wrap;
     padding-left: 0;
   }
   
   .hero__facts li {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    transition: transform 0.25s var(--ease), background 0.25s;
   }
   
   .hero__facts li:hover {
     background: rgba(255, 255, 255, 0.14);
     transform: translateY(-2px);
   }
   
   .hero__facts strong {
     display: block;
     color: #FFFFFF;
     font-weight: 600;
     font-size: var(--t-base);
     margin-bottom: 2px;
   }
   
   
   /* Value Strip (01, 02, 03, 04) */
   .strip {
     border-bottom: 1px solid var(--line);
     background: var(--surface);
     box-shadow: var(--shadow-sm);
     position: relative;
     z-index: 2;
   }
   
   .strip__inner {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--s5);
     padding-block: var(--s7);
   }
   
   .strip__card {
     padding: var(--s4) var(--s5);
     border-radius: var(--r);
     border: 1px solid var(--line-subtle);
     background: var(--bg);
     transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
   }
   
   .strip__card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
     border-color: var(--line);
     background: #FFFFFF;
   }
   
   .strip__k {
     font-family: var(--display);
     font-size: 1.5rem;
     font-weight: 500;
     color: var(--warm);
     display: inline-block;
     margin-bottom: var(--s2);
   }
   
   .strip p {
     font-size: var(--t-sm);
     color: var(--muted);
     line-height: 1.5;
     margin-bottom: 0;
   }
   
   .strip strong {
     color: var(--ink);
     font-weight: 600;
     display: block;
     font-size: 0.95rem;
     margin-bottom: 2px;
   }
   
   /* Sections */
   .section {
     padding-block: var(--s9);
   }
   
   .section__head {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: var(--s6);
     margin-bottom: var(--s7);
     flex-wrap: wrap;
   }
   
   .section__head h2 {
     max-width: 18ch;
   }
   
   .section__head--stack {
     display: block;
     text-align: center;
   }
   
   .section__head--stack h2 {
     max-width: none;
     margin-inline: auto;
   }
   
   /* Filter Chips */
   .filters {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
   }
   .filters button.chip {
    padding: 9px 16px !important;
    border-radius: 999px !important;
    border: 1px solid var(--line) !important;
    font-size: var(--t-sm) !important;
    font-weight: 500 !important;
    color: var(--muted);
    transition: all .2s !important;
}
   .chip,
   .ignore-app-design .chip {
     padding: 8px 18px !important;
     border-radius: var(--r-full) !important;
     font-size: var(--t-sm) !important;
     font-weight: 500 !important;
     color: var(--muted) !important;
     background: transparent !important;
     border: 0 !important;
     cursor: pointer !important;
     display: inline-flex !important;
     align-items: center !important;
     width: auto !important;
     transition: all 0.22s var(--ease) !important;
   }
   
   .chip span,
   .ignore-app-design .chip span {
     display: inline-block !important;
     background: rgba(0, 0, 0, 0.06) !important;
     font-size: 11px !important;
     padding: 1px 7px !important;
     border-radius: var(--r-full) !important;
     margin-left: 6px !important;
     color: var(--ink) !important;
   }
   
   .chip:hover,
   .ignore-app-design .chip:hover {
     color: var(--ink) !important;
     background: rgba(255, 255, 255, 0.6) !important;
   }
   
   .chip.is-active,
   .ignore-app-design .chip.is-active {
     background: var(--accent) !important;
     color: #FFFFFF !important;
     box-shadow: 0 4px 12px rgba(24, 34, 48, 0.2) !important;
   }
   
   .chip.is-active span,
   .ignore-app-design .chip.is-active span {
     background: rgba(255, 255, 255, 0.2) !important;
     color: #FFFFFF !important;
   }
   
   /* Product Grid */
   .grid,
   product-paginate,
   .grid>product-paginate,
   product-paginate.grid,
   #grid {
     display: grid !important;
     grid-template-columns: repeat(4, 1fr) !important;
     gap: var(--s6) var(--s5) !important;
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     list-style: none !important;
   }
   
   /* Product Cards */
   .card {
     float: none !important;
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
     background: var(--surface) !important;
     border: 1px solid var(--line) !important;
     border-radius: var(--r) !important;
     overflow: hidden !important;
     transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s !important;
     box-shadow: var(--shadow-sm) !important;
     margin: 0 !important;
   }
   
   .card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow-hover);
     border-color: rgba(20, 23, 30, 0.16);
   }
   
   .card.is-hidden,
   .card[hidden],
   .ignore-app-design .card.is-hidden,
   .ignore-app-design .card[hidden] {
     display: none !important;
   }
   
   .card__media {
     position: relative;
     background: var(--surface-2);
     aspect-ratio: 4 / 5;
     overflow: hidden;
     cursor: pointer;
   }
   
   .card__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .card:hover .card__media img {
     transform: scale(1.06);
   }
   
   /* Product Badges */
   .badge {
     position: absolute;
     top: 14px;
     left: 14px;
     background: rgba(255, 255, 255, 0.94);
     backdrop-filter: blur(10px);
     color: var(--ink);
     font-size: var(--t-xs);
     font-weight: 600;
     padding: 6px 14px;
     border-radius: var(--r-full);
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
     letter-spacing: 0.02em;
     border: 1px solid rgba(255, 255, 255, 0.7);
     z-index: 2;
   }
   
   .badge--dark {
     background: var(--night);
     color: #FFFFFF;
     border-color: rgba(255, 255, 255, 0.15);
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
   }
   
   .badge--accent {
     background: var(--accent);
     color: #FFFFFF;
     border-color: rgba(255, 255, 255, 0.15);
   }
   
   .badge--cool {
     background: #3B6B94;
     color: #FFFFFF;
     border-color: rgba(255, 255, 255, 0.2);
   }
   
   .card__quick,
   .ignore-app-design .card__quick,
   button.card__quick {
     position: absolute !important;
     left: 12px !important;
     right: 12px !important;
     bottom: 12px !important;
     background: rgba(251, 248, 242, 0.95) !important;
     color: var(--ink) !important;
     padding: 11px 16px !important;
     border-radius: 999px !important;
     font-size: var(--t-sm) !important;
     font-weight: 600 !important;
     text-align: center !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 6px !important;
     opacity: 0 !important;
     transform: translateY(8px) !important;
     transition: all 0.25s var(--ease) !important;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
     border: 1px solid rgba(0, 0, 0, 0.05) !important;
     backdrop-filter: blur(8px) !important;
     -webkit-backdrop-filter: blur(8px) !important;
     cursor: pointer !important;
     pointer-events: none !important;
     z-index: 10 !important;
     width: calc(100% - 24px) !important;
     box-sizing: border-box !important;
   }
   
   .card:hover .card__quick,
   .card__media:hover .card__quick,
   .card__quick:focus-visible,
   .ignore-app-design .card:hover .card__quick,
   .ignore-app-design .card__media:hover .card__quick {
     opacity: 1 !important;
     transform: translateY(0) !important;
     pointer-events: auto !important;
   }
   
   .card__quick:hover,
   .ignore-app-design .card__quick:hover {
     background: #FFFFFF !important;
     color: var(--accent) !important;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
     transform: translateY(-1px) !important;
   }
   
   .card__body {
     padding: var(--s5);
     display: flex;
     flex-direction: column;
     gap: 6px;
     flex: 1;
   }
   
   .card__meta-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 2px;
   }
   
   .card__cat {
     font-size: 11px;
     color: var(--faint);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     font-weight: 600;
   }
   
   .card__rating {
     font-size: 11px;
     font-weight: 600;
     color: var(--gold);
     letter-spacing: 0.02em;
   }
   
   .card__row {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     gap: var(--s3);
     margin-block: 2px;
   }
   
   .card__name {
     font-weight: 600;
     font-size: 1.05rem;
     line-height: 1.3;
     color: var(--ink);
     cursor: pointer;
     transition: color 0.2s;
   }
   
   .card__name:hover {
     color: var(--accent);
   }
   
   .card__price {
     font-variant-numeric: tabular-nums;
     font-weight: 600;
     font-size: 1.05rem;
     color: var(--ink);
     white-space: nowrap;
   }
   
   .card__desc {
     font-size: var(--t-sm);
     color: var(--muted);
     line-height: 1.5;
     margin-bottom: var(--s4);
   }
   
   .card__desc ul {
     padding: 0;
   }
   
   .card__add,
   .ignore-app-design .card__add {
     margin-top: auto !important;
     width: 100% !important;
     font-size: var(--t-sm) !important;
     font-weight: 600 !important;
     padding: 12px 18px !important;
     border-radius: var(--r-full) !important;
     border: 1px solid var(--line) !important;
     background: var(--bg) !important;
     color: var(--ink) !important;
     text-align: center !important;
     transition: all 0.24s var(--ease) !important;
     cursor: pointer !important;
     display: block !important;
   }
   
   .card:hover .card__add,
   .ignore-app-design .card:hover .card__add {
     background: var(--accent) !important;
     border-color: var(--accent) !important;
     color: #FFFFFF !important;
     box-shadow: 0 4px 14px rgba(24, 34, 48, 0.2) !important;
   }
   
   .card__add:hover {
     transform: scale(1.02);
   }
   
   /* Bundle Section */
   .bundle {
     background: var(--surface-2);
     border-block: 1px solid var(--line);
     position: relative;
     overflow: hidden;
   }
   
   .bundle__inner {
     display: grid;
     grid-template-columns: 1fr 1.15fr;
     gap: var(--s8);
     align-items: center;
     padding-block: var(--s10);
   }
   
   .bundle__badge {
     display: inline-block;
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     font-weight: 700;
     padding: 6px 14px;
     border-radius: var(--r-full);
     background: rgba(60, 112, 67, 0.12);
     color: var(--save);
     border: 1px solid rgba(60, 112, 67, 0.25);
     margin-bottom: var(--s3);
   }
   
   .bundle__text h2 {
     font-size: var(--t-2xl);
     margin-bottom: var(--s3);
   }
   
   .bundle__text>p {
     color: var(--muted);
     max-width: 48ch;
     line-height: 1.6;
     margin-bottom: var(--s6);
   }
   
   .bundle__list {
    list-style: none;
    display: grid;
    gap: var(--s3);
    margin-bottom: var(--s6);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 0 var(--s5);
   }
   
   .bundle__list li {
     display: flex;
     justify-content: space-between;
     gap: var(--s4);
     padding-block: 10px;
     border-bottom: 1px solid var(--line-subtle);
     font-size: var(--t-sm);
     font-weight: 500;
   }
   
   .bundle__list li:last-child {
     border-bottom: none;
   }
   
   .bundle__list li span:last-child {
     font-variant-numeric: tabular-nums;
     color: var(--muted);
   }
   
   .bundle__item-name strong {
     color: var(--save);
     margin-right: 6px;
   }
   
   .bundle__price {
     display: flex;
     align-items: center;
     gap: var(--s4);
     margin-bottom: var(--s6);
     flex-wrap: wrap;
   }
   
   .bundle__was {
     color: var(--faint);
     text-decoration: line-through;
     font-size: 1.15rem;
   }
   
   .bundle__now {
     font-family: var(--display);
     font-size: 2.2rem;
     font-weight: 600;
   }
   
   .bundle__saved {
     font-size: var(--t-xs);
     font-weight: 700;
     color: var(--save);
     background: rgba(60, 112, 67, 0.1);
     padding: 4px 12px;
     border-radius: var(--r-full);
     letter-spacing: 0.02em;
   }
   
   .bundle__img {
     position: relative;
   }
   
   .bundle__img img {
     border-radius: var(--r-xl);
     box-shadow: var(--shadow-lg);
     aspect-ratio: 4 / 3;
     object-fit: cover;
     width: 100%;
   }
   
   /* Night / Timeline Section */
   .night {
     background: var(--night);
     color: var(--night-ink);
     position: relative;
     overflow: hidden;
   }
   
   .night h2 {
     color: #FFFFFF;
     margin-bottom: var(--s5);
   }
   
   /* Phase Quick-Select Buttons */
   .timeline__phases {
     display: flex;
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: var(--s7);
   }
   
   .phase-btn,
   .ignore-app-design .phase-btn {
     padding: 10px 20px !important;
     border-radius: var(--r-full) !important;
     background: var(--night-card) !important;
     border: 1px solid var(--night-line) !important;
     color: var(--night-muted) !important;
     font-size: var(--t-xs) !important;
     font-weight: 600 !important;
     letter-spacing: 0.04em !important;
     cursor: pointer !important;
     transition: all 0.24s var(--ease) !important;
     display: inline-block !important;
     width: auto !important;
   }
   
   .phase-btn:hover,
   .ignore-app-design .phase-btn:hover {
     color: #FFFFFF !important;
     border-color: rgba(255, 255, 255, 0.3) !important;
     background: var(--night-2) !important;
   }
   
   .phase-btn.is-active,
   .ignore-app-design .phase-btn.is-active {
     background: var(--surface) !important;
     color: var(--ink) !important;
     border-color: var(--surface) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
   }
   
   .timeline {
     display: grid;
     grid-template-columns: 1.5fr 1fr;
     gap: var(--s8);
     align-items: center;
   }
   
   .timeline__chart {
     background: var(--night-card);
     border: 1px solid var(--night-line);
     border-radius: var(--r-lg);
     padding: var(--s7) var(--s6) var(--s5);
     box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
   }
   
   .timeline__chart svg {
     width: 100%;
     height: auto;
     overflow: visible;
     filter: drop-shadow(0 4px 12px rgba(108, 147, 181, 0.3));
   }
   
   #dot {
     transition: cx 0.5s var(--ease), cy 0.5s var(--ease);
     filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
   }
   
   .timeline__labels {
     display: flex;
     justify-content: space-between;
     font-size: var(--t-xs);
     color: var(--night-muted);
     margin-top: var(--s4);
     font-weight: 500;
     letter-spacing: 0.05em;
   }
   
   .timeline__panel {
     /* background: var(--night-card);
     border: 1px solid var(--night-line);
     border-radius: var(--r-lg);
     padding: var(--s6); */
   }
   
   .timeline__panel-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--s2);
   }
   
   .timeline__label {
     font-size: var(--t-xs);
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--night-muted);
     font-weight: 600;
     display: block;
   }
   
   .timeline__zones {
     display: flex;
     gap: 8px;
   }
   
   .zone-pill {
     font-size: 11px;
     font-weight: 500;
     padding: 3px 10px;
     border-radius: var(--r-full);
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.12);
     color: var(--night-muted);
   }
   
   .zone-pill strong {
     font-weight: 700;
   }
   
   .zone-pill--cool strong {
     color: var(--cool);
   }
   
   .zone-pill--balanced strong {
     color: var(--warm);
   }
   
   input[type=range] {
     width: 100%;
     margin-block: var(--s4) var(--s6);
     accent-color: var(--cool);
     height: 8px;
     background: var(--night-2);
     border-radius: var(--r-full);
     outline: none;
     cursor: pointer;
   }
   
   .timeline__time {
     font-family: var(--display);
     font-size: 2.2rem;
     color: #FFFFFF;
   }
   
   .timeline__temp {
     color: var(--cool);
     font-weight: 600;
     font-size: 1.15rem;
     margin-block: var(--s1) var(--s3);
     display: inline-flex;
     align-items: center;
     gap: 8px;
   }
   
   .timeline__temp.warm {
     color: var(--warm);
   }
   
   .timeline__copy {
     color: var(--night-muted);
     font-size: var(--t-sm);
     line-height: 1.65;
     max-width: 44ch;
   }
   
   /* Comparison Table */
   .table-wrap {
     overflow-x: auto;
     border: 1px solid var(--line);
     border-radius: var(--r-lg);
     /* background: var(--surface); */
     box-shadow: var(--shadow-sm);
   }
   
   .compare {
     width: 100%;
     border-collapse: collapse;
     min-width: 680px;
     font-size: var(--t-sm);
   }
   
   .compare th,
   .compare td {
     padding: 20px 24px;
     text-align: left;
     border-bottom: 1px solid var(--line-subtle);
     vertical-align: middle;
   }
   .compare td:nth-child(2) {
    background: rgba(126, 155, 181, .08);
}
   .compare thead th {
     font-weight: 600;
     font-size: 1.05rem;
     background: var(--surface-2);
     line-height: 1.35;
   }
   
   .compare thead th.compare__highlight {
     background: rgba(212, 140, 83, 0.12) !important;
     border-top: 3px solid var(--warm);
   }
   
   .compare td.compare__highlight {
     background: rgba(212, 140, 83, 0.05) !important;
     font-weight: 600;
     color: var(--ink);
   }
   
   .compare__badge {
     display: block;
     font-size: 10px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--warm);
     margin-bottom: 4px;
   }
   
   .check {
     color: var(--save);
     font-weight: 700;
     margin-right: 4px;
   }
   
   .compare__p {
    font-weight: 400;
    color: var(--muted);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
   }
   
   .compare tbody th {
     font-weight: 500;
     color: var(--muted);
     width: 26%;
   }
   
   .compare tbody tr:last-child>* {
     border-bottom: 0;
   }
   
   /* Materials & Split Section */
   .split {
     padding-block: var(--s9);
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     gap: var(--s8);
     align-items: center;
   }
   
   .split__img img {
     border-radius: var(--r-xl);
     box-shadow: var(--shadow-lg);
     width: 100%;
     aspect-ratio: 4 / 3;
     object-fit: cover;
   }
   
   .split__text h2 {
     margin-bottom: var(--s4);
   }
   
   .split__text>p {
     color: var(--muted);
     line-height: 1.65;
     margin-bottom: var(--s6);
   }
   
   .specs {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--s4);
   }
   
   .specs>div {
    padding: var(--s2) var(--s5);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
    flex-direction: column;
    gap: 0px;
   }
   
   .specs>div:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-sm);
     border-color: rgba(20, 23, 30, 0.18);
   }
   
   .specs__icon {
     width: 40px;
     height: 40px;
     border-radius: var(--r-xs);
     background: var(--surface-2);
     color: var(--accent);
     display: grid;
     place-items: center;
     flex-shrink: 0;
   }
   
   .specs dt {
     font-size: var(--t-xs);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--faint);
     font-weight: 600;
     margin-bottom: 2px;
   }
   
   .specs dd {
     font-size: var(--t-base);
     font-weight: 600;
     color: var(--ink);
   }
   
   /* Reviews / Quotes Section */
   .reviews {
     background: var(--surface);
     border-block: 1px solid var(--line);
   }
   
   .quotes {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--s6);
   }
   
   .quote__card,
   figure {
     padding: var(--s6);
     border-radius: var(--r-lg);
     background: var(--bg);
     border: 1px solid var(--line);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: var(--s4);
     transition: transform 0.3s var(--ease), box-shadow 0.3s;
   }
   
   .quote__card:hover,
   figure:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
     border-color: rgba(20, 23, 30, 0.14);
   }
   
   .quote__head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: var(--s2);
   }
   
   .quote__stars {
     color: var(--gold);
     font-size: 1rem;
     letter-spacing: 3px;
   }
   
   .quote__verified {
     font-size: 11px;
     font-weight: 600;
     color: var(--save);
     background: rgba(60, 112, 67, 0.08);
     padding: 3px 9px;
     border-radius: var(--r-full);
   }
   
   blockquote {
     font-family: var(--display);
     font-size: 1.25rem;
     line-height: 1.45;
     color: var(--ink);
     font-style: italic;
     font-weight: 400;
   }
   
   figcaption {
     font-size: var(--t-sm);
     color: var(--muted);
     font-weight: 500;
     border-top: 1px solid var(--line-subtle);
     padding-top: var(--s3);
   }
   
   /* 100-Night Trial Section */
   .trial {
    background: var(--accent);
    color: #fff;
    padding-block: var(--s9);
   }
   
   .trial__inner {
     display: grid;
     grid-template-columns: 1fr 1.25fr;
     gap: var(--s8);
     align-items: center;
   }
   
   .trial h2 {
     margin-bottom: var(--s3);
   }
   
   .trial p {
     color: var(--muted);
     line-height: 1.6;
   }
   .trial .eyebrow,
   .trial h2 {
       color: rgba(255, 255, 255);
   }
   
   .trial__list {
     list-style: none;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--s4);
   }
 
   /* .trial__item,
   .trial__list li {
     padding: var(--s5);
     background: var(--surface);
     border: 1px solid var(--line);
     border-radius: var(--r);
     display: flex;
     align-items: flex-start;
     gap: var(--s4);
     transition: transform 0.25s var(--ease), box-shadow 0.25s;
   } */
   
   .trial__item:hover,
   .trial__list li:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-md);
   }
   
   .trial__icon {
     font-size: 1.6rem;
     line-height: 1;
     flex-shrink: 0;
   }
   
   .trial__list strong {
     display: block;
     font-size: 1.05rem;
     color: var(--surface);
     font-weight: 600;
     margin-bottom: 4px;
   }
   
   .trial__list span {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, .72);
   }
   
   /* FAQ Accordion */
   .faq {
     display: grid;
     grid-template-columns: 1fr 1.6fr;
     gap: var(--s8);
     align-items: start;
   }
   
   .faq__list {
     display: flex;
       flex-direction: column;
       /* gap: var(--s3);*/
   }
   .faq__list details{
     background: transparent;
     border: none;
     border-bottom: 1px solid var(--line);
     border-radius: 0;
   }
   
   details {
     border: 1px solid var(--line);
     border-radius: var(--r);
     background: var(--surface);
     transition: border-color 0.2s, box-shadow 0.2s;
     overflow: hidden;
   }
   
   details[open] {
     border-color: rgba(20, 23, 30, 0.2);
     box-shadow: var(--shadow-sm);
   }
   
   summary {
     padding: 11px 14px;
     font-weight: 600;
     font-size: 1.05rem;
     color: var(--ink);
     cursor: pointer;
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     user-select: none;
   }
   
   summary::-webkit-details-marker {
     display: none;
   }
   
   summary::after {
     content: '+';
     font-size: 1.4rem;
     font-weight: 300;
     color: var(--muted);
     transition: transform 0.25s var(--ease);
   }
   
   details[open] summary::after {
     transform: rotate(45deg);
   }
   
   details p {
     padding: 0 24px 22px;
     color: var(--muted);
     font-size: var(--t-sm);
     line-height: 1.65;
   }
   
   /* Newsletter Section */
   .news {
     border-top: 1px solid var(--line);
     padding-block: var(--s8);
   }
   
   .news__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s6);
    flex-wrap: wrap;
   }
   
   .news h2 {
     font-size: var(--t-xl);
   }
   
   .news__form {
     display: flex;
       gap: var(--s2);
       flex: 1;
       max-width: 460px;
   }
   
   .news__form input {
     flex: 1;
       min-width: 0;
       padding: 14px 18px;
       border-radius: 999px;
       border: 1px solid var(--line);
       background: var(--surface);
       font: inherit;
   }
   
   .news__form input::placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
   
   .news__form button {
     background: #FFFFFF;
     color: var(--ink);
     padding: 12px 28px;
     border-radius: var(--r-full);
     font-weight: 600;
     font-size: var(--t-sm);
     transition: transform 0.2s, background 0.2s;
   }
   
   .news__form button:hover {
     background: var(--bg);
     transform: scale(1.02);
   }
   
   .news__msg {
    width: 100%;
    font-size: var(--t-sm);
    color: var(--save);
    min-height: 1.2em;
   }
   
   .news__msg.err {
     color: #FF8A8A;
   }
   
   /* Footer */
   .footer {
     background: var(--night);
     color: var(--night-ink);
     padding-block: var(--s9) var(--s6);
     border-top: 1px solid var(--night-line);
   }
   
   .footer__inner {
     display: flex;
     justify-content: space-between;
     gap: var(--s8);
     flex-wrap: wrap;
   }
   
   .footer__tag {
     color: var(--night-muted);
     font-size: var(--t-sm);
     margin-top: var(--s2);
   }
   
   .footer__cols {
     display: flex;
     gap: var(--s8);
     flex-wrap: wrap;
   }
   
   .footer__cols h3 {
     color: #FFFFFF;
     font-size: var(--t-xs);
     text-transform: uppercase;
     letter-spacing: 0.14em;
     font-weight: 600;
     margin-bottom: var(--s4);
   }
   
   .footer__cols a {
     display: block;
     color: var(--night-muted);
     font-size: var(--t-sm);
     margin-bottom: 10px;
     transition: color 0.2s;
   }
   
   .footer__cols a:hover {
     color: #FFFFFF;
   }
   
   .footer__base {
     padding-top: var(--s5);
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: var(--t-xs);
     color: var(--night-muted);
     flex-wrap: wrap;
     gap: var(--s3);
     border-top: 1px solid var(--night-line);
     width: 100%;
   }
   
   /* Modal (Quick View) */
   /* .show is Bootstrap's own open state, which the platform's popup.js drives.
         This theme predates that and uses .is-open, so a popup opened by popup.js was
         hidden here by :not(.is-open) -- display:none !important beats the inline
         display:block Bootstrap sets, so the popup opened invisibly behind a backdrop.
         Both conventions are now accepted as "open". */
   .modal,
   .modal[hidden],
   .ignore-app-design .modal[hidden],
   .modal:not(.is-open):not(.show) {
     display: none !important;
     pointer-events: none !important;
     visibility: hidden !important;
   }
   
   .modal.is-open,
   .modal.show,
   .ignore-app-design .modal.is-open,
   .ignore-app-design .modal.show {
     position: fixed !important;
     inset: 0 !important;
     z-index: 99999 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     padding: 16px !important;
     overflow-y: auto !important;
     -webkit-overflow-scrolling: touch !important;
     pointer-events: auto !important;
     visibility: visible !important;
   }
   
   .modal__backdrop,
   .ignore-app-design .modal__backdrop {
     position: fixed !important;
     inset: 0 !important;
     background: rgba(14, 18, 26, 0.72) !important;
     backdrop-filter: blur(8px) !important;
     -webkit-backdrop-filter: blur(8px) !important;
     animation: fadeIn 0.2s var(--ease) !important;
     z-index: 1 !important;
   }
   
   .modal__panel,
   .ignore-app-design .modal__panel {
     position: relative !important;
     background: #FFFFFF !important;
     border-radius: 20px !important;
     width: min(880px, 94vw) !important;
     max-height: min(88vh, 680px) !important;
     display: flex !important;
     flex-direction: row !important;
     align-items: stretch !important;
     box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35) !important;
     border: 1px solid var(--line) !important;
     animation: pop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
     z-index: 2 !important;
     overflow: hidden !important;
   }
   
   @keyframes fadeIn {
     from {
       opacity: 0;
     }
   
     to {
       opacity: 1;
     }
   }
   
   @keyframes pop {
     from {
       opacity: 0;
       transform: scale(0.96) translateY(8px);
     }
   
     to {
       opacity: 1;
       transform: scale(1) translateY(0);
     }
   }
   
   .modal__close,
   .ignore-app-design .modal__close {
     position: absolute !important;
     top: 14px !important;
     right: 14px !important;
     z-index: 50 !important;
     width: 36px !important;
     height: 36px !important;
     border-radius: 50% !important;
     background: rgba(255, 255, 255, 0.95) !important;
     border: 1px solid var(--line) !important;
     display: grid !important;
     place-items: center !important;
     font-size: 20px !important;
     line-height: 1 !important;
     color: var(--ink) !important;
     cursor: pointer !important;
     transition: all 0.2s var(--ease) !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
     padding: 0 !important;
     margin: 0 !important;
   }
   
   .modal__close:hover,
   .ignore-app-design .modal__close:hover {
     background: #FFFFFF !important;
     transform: scale(1.08) !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16) !important;
   }
   
   .modal__img,
   .ignore-app-design .modal__img {
     width: 44% !important;
     min-width: 300px !important;
     max-width: 400px !important;
     flex: 0 0 44% !important;
     background: var(--surface-2) !important;
     position: relative !important;
     overflow: hidden !important;
     border-radius: 20px 0 0 20px !important;
     display: block !important;
     margin: 0 !important;
     padding: 0 !important;
   }
   
   .modal__img img,
   .ignore-app-design .modal__img img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     object-position: center !important;
     display: block !important;
     border: 0 !important;
   }
   
   .modal__body,
   .ignore-app-design .modal__body {
     width: 56% !important;
     flex: 1 1 56% !important;
     padding: 32px 28px 24px !important;
     display: flex !important;
     flex-direction: column !important;
     gap: 8px !important;
     overflow-y: auto !important;
     background: #FFFFFF !important;
     box-sizing: border-box !important;
     position: relative !important;
   }
   
   .modal__body::-webkit-scrollbar {
     width: 6px;
   }
   
   .modal__body::-webkit-scrollbar-track {
     background: transparent;
   }
   
   .modal__body::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.18);
     border-radius: 3px;
   }
   
   .modal__body::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 0, 0, 0.3);
   }
   
   .modal__body .eyebrow {
     margin-bottom: 0;
     color: var(--warm);
     font-size: 11px;
   }
   
   #mTitle {
     font-family: var(--display);
     font-size: 1.65rem;
     font-weight: 500;
     line-height: 1.2;
     color: var(--ink);
   }
   
   .modal__price {
     font-family: var(--display);
     font-size: 1.55rem;
     font-weight: 600;
     color: var(--ink);
     font-variant-numeric: tabular-nums;
     margin-block: 2px 4px;
   }
   
   .modal__desc {
     font-size: 0.875rem;
     color: var(--muted);
     line-height: 1.5;
   }
   
   .modal__feats,
   .ignore-app-design .modal__feats {
     list-style: none !important;
     list-style-type: none !important;
     display: flex !important;
     flex-direction: column !important;
     gap: 6px !important;
     margin-block: 6px !important;
     padding-block: 10px !important;
     border-block: 1px solid var(--line-subtle) !important;
     font-size: 0.8125rem !important;
     color: var(--ink-secondary) !important;
     padding-left: 0 !important;
     margin-left: 0 !important;
   }
   
   .modal__feats li,
   .ignore-app-design .modal__feats li {
     list-style: none !important;
     list-style-type: none !important;
     position: relative !important;
     padding-left: 20px !important;
     line-height: 1.35 !important;
     margin: 0 !important;
   }
   
   .modal__feats li::marker,
   .ignore-app-design .modal__feats li::marker {
     content: none !important;
     display: none !important;
   }
   
   .modal__feats li::before {
     content: '✓' !important;
     position: absolute !important;
     left: 0 !important;
     color: var(--save) !important;
     font-weight: 700 !important;
     font-size: 0.875rem !important;
   }
   
   /* Fieldset Reset for Size Selector */
   .sizes {
     border: 0;
     padding: 0;
     margin: 4px 0 10px 0;
   }
   
   .sizes legend {
     font-size: 11px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--faint);
     margin-bottom: 6px;
     display: block;
   }
   
   .sizes div {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
   }
   
   .size,
   .ignore-app-design .size {
     padding: 7px 16px !important;
     border-radius: var(--r-full) !important;
     border: 1px solid var(--line) !important;
     font-size: 0.8125rem !important;
     font-weight: 600 !important;
     transition: all 0.2s var(--ease) !important;
     background: var(--surface) !important;
     color: var(--ink) !important;
     cursor: pointer !important;
     display: inline-block !important;
     width: auto !important;
     line-height: normal !important;
   }
   
   .size:hover,
   .ignore-app-design .size:hover {
     border-color: var(--ink) !important;
     background: var(--surface-2) !important;
   }
   
   .size[aria-pressed=true],
   .ignore-app-design .size[aria-pressed=true] {
     background: var(--accent) !important;
     border-color: var(--accent) !important;
     color: #FFFFFF !important;
     box-shadow: 0 2px 8px rgba(24, 34, 48, 0.25) !important;
   }
   
   .modal__buy {
     display: flex !important;
     gap: 10px !important;
     align-items: center !important;
     visibility: visible !important;
     margin-top: 30px !important;
   }
   
   .qty,
   .ignore-app-design .qty {
     display: inline-flex !important;
     align-items: center !important;
     border: 1px solid var(--line) !important;
     border-radius: var(--r-full) !important;
     background: var(--surface) !important;
     height: 44px !important;
     flex-shrink: 0 !important;
     padding: 0 4px !important;
   }
   
   .qty button,
   .ignore-app-design .qty button {
     width: 38px !important;
     height: 100% !important;
     font-size: 1.2rem !important;
     color: var(--muted) !important;
     transition: all 0.15s !important;
     background: transparent !important;
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer !important;
     display: grid !important;
     place-items: center !important;
   }
   
   .qty button:hover,
   .ignore-app-design .qty button:hover {
     color: var(--ink) !important;
     background: rgba(0, 0, 0, 0.04) !important;
   }
   
   .qty span {
     min-width: 26px;
     text-align: center;
     font-weight: 700;
     font-size: 0.9rem;
     font-variant-numeric: tabular-nums;
     color: var(--ink);
   }
   
   #mAdd {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     height: 44px !important;
     padding: 0 22px !important;
     font-size: 0.875rem !important;
     font-weight: 600 !important;
     white-space: nowrap !important;
     background: var(--accent) !important;
     color: #FFFFFF !important;
     border-radius: var(--r-full) !important;
     border: 1px solid transparent !important;
     cursor: pointer !important;
     flex: 1 !important;
     box-shadow: 0 4px 14px rgba(24, 34, 48, 0.25) !important;
     transition: all 0.2s var(--ease) !important;
     visibility: visible !important;
     opacity: 1 !important;
   }
   
   #mAdd:hover {
     background: var(--accent-h) !important;
     transform: translateY(-1px) !important;
     box-shadow: 0 6px 18px rgba(24, 34, 48, 0.35) !important;
   }
   
   .modal__note {
     font-size: 11px;
     color: var(--faint);
     margin-top: 4px;
     line-height: 1.35;
   }
   
   /* Cart Page */
   main.section:has(.cart-page-layout),
   body.ignore-app-design main.section {
     background-color: var(--bg);
     min-height: calc(100vh - 120px);
     padding: 56px 0 96px;
   }
   
   .cart-page-layout {
     display: grid !important;
     grid-template-columns: 1fr 400px !important;
     gap: 48px !important;
     align-items: start !important;
     max-width: 1240px !important;
     margin: 0 auto !important;
   }
   
   .cart-page-items {
     display: flex !important;
     flex-direction: column !important;
     min-width: 0 !important;
   }
   
   .cart-page-items .ship,
   .ship {
     background: var(--surface) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r) !important;
     padding: 18px 24px !important;
     margin-bottom: 24px !important;
     box-shadow: var(--shadow-sm) !important;
   }
   
   .cart-page-items .ship p,
   #pageShipMsg {
     font-family: var(--body) !important;
     font-size: 14px !important;
     color: var(--ink) !important;
     margin: 0 0 10px !important;
     line-height: 1.4 !important;
   }
   
   .cart-page-items .ship p strong,
   #pageShipMsg strong {
     font-weight: 600 !important;
     color: var(--save) !important;
   }
   
   .cart-page-items .ship__bar,
   .ship__bar {
     width: 100% !important;
     height: 8px !important;
     background: var(--surface-2) !important;
     border-radius: var(--r-full) !important;
     overflow: hidden !important;
   }
   
   .cart-page-items .ship__bar span,
   #pageShipFill {
     display: block !important;
     height: 100% !important;
     background: linear-gradient(90deg, #6C93B5 0%, #3C7043 100%) !important;
     border-radius: var(--r-full) !important;
     transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
   }
   
   .cart-page-list {
     display: flex !important;
     flex-direction: column !important;
     gap: 16px !important;
   }
   
   .cart-page-row {
     display: grid !important;
     grid-template-columns: 104px 1fr auto !important;
     gap: 24px !important;
     align-items: center !important;
     padding: 24px 26px !important;
     background: var(--surface) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r) !important;
     box-shadow: var(--shadow-sm) !important;
     transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
     position: relative !important;
   }
   
   .cart-page-row:hover {
     border-color: #CDC4B3 !important;
     box-shadow: var(--shadow-md) !important;
   }
   
   .cart-page-row img,
   .cart-page-row [data-attr-app="image"] {
     width: 104px !important;
     height: 114px !important;
     object-fit: cover !important;
     border-radius: var(--r-sm) !important;
     border: 1px solid var(--line-subtle) !important;
     background: var(--surface-2) !important;
     display: block !important;
   }
   
   .cart-page-row>div:nth-child(2) {
     display: flex !important;
     flex-direction: column !important;
     justify-content: center !important;
     min-width: 0 !important;
   }
   
   .cart-page-row h4,
   .cart-page-row [data-attr-app="name"] {
     font-family: var(--body) !important;
     font-size: 17px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
     margin: 0 0 6px !important;
     line-height: 1.35 !important;
   }
   
   .cart-page-row p {
     font-family: var(--body) !important;
     font-size: 13.5px !important;
     color: var(--muted) !important;
     margin: 0 0 12px !important;
     line-height: 1.4 !important;
   }
   
   .cart-page-row .line__rm,
   .cart-page-row button[data-app="remove"],
   .cart-page-row button.line__rm {
     align-self: flex-start !important;
     background: transparent !important;
     border: none !important;
     padding: 0 !important;
     font-family: var(--body) !important;
     font-size: 12.5px !important;
     font-weight: 500 !important;
     color: var(--faint) !important;
     cursor: pointer !important;
     text-decoration: underline !important;
     text-underline-offset: 3px !important;
     transition: color 0.15s ease !important;
   }
   
   .cart-page-row .line__rm:hover,
   .cart-page-row button[data-app="remove"]:hover {
     color: #D92D20 !important;
   }
   
   .cart-page-row>div:last-child {
     display: flex !important;
     flex-direction: column !important;
     align-items: flex-end !important;
     justify-content: center !important;
     gap: 12px !important;
   }
   
   .cart-page-row>div:last-child>span {
     font-family: var(--body) !important;
     font-size: 18px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
     letter-spacing: -0.01em !important;
   }
   
   .cart-page-row .qty,
   .qty {
     display: inline-flex !important;
     align-items: center !important;
     height: 38px !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-full) !important;
     background: var(--surface-2) !important;
     overflow: hidden !important;
     box-shadow: inset 0 1px 2px rgba(24, 34, 48, 0.04) !important;
   }
   
   .cart-page-row .qty button,
   .qty button {
     width: 36px !important;
     height: 100% !important;
     background: transparent !important;
     border: none !important;
     padding: 0 !important;
     font-family: var(--body) !important;
     font-size: 16px !important;
     font-weight: 500 !important;
     color: var(--ink) !important;
     cursor: pointer !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     transition: background-color 0.15s ease, color 0.15s ease !important;
   }
   
   .cart-page-row .qty button:hover,
   .qty button:hover {
     background: var(--line) !important;
     color: var(--ink) !important;
   }
   
   .cart-page-row .qty .quantity-val,
   .qty .quantity-val {
     min-width: 34px !important;
     text-align: center !important;
     font-family: var(--body) !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
   }
   
   .cart-page-items .empty,
   #pageEmptyState {
     background: var(--surface) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-lg) !important;
     padding: 80px 32px !important;
     text-align: center !important;
     box-shadow: var(--shadow-sm) !important;
   }
   
   .cart-page-items .empty p,
   #pageEmptyState p {
     font-family: var(--display) !important;
     font-size: 26px !important;
     font-weight: 400 !important;
     color: var(--ink) !important;
     margin: 0 0 24px !important;
     line-height: 1.3 !important;
   }
   
   .cart-page-items .empty .btn,
   #pageEmptyState .btn {
     display: inline-flex !important;
     align-items: center !important;
     padding: 15px 38px !important;
     background: var(--accent) !important;
     color: #FFFFFF !important;
     border-radius: var(--r-full) !important;
     font-family: var(--body) !important;
     font-size: 13.5px !important;
     font-weight: 600 !important;
     letter-spacing: 0.1em !important;
     text-transform: uppercase !important;
     text-decoration: none !important;
     box-shadow: 0 6px 18px rgba(24, 34, 48, 0.22) !important;
     transition: all 0.25s ease !important;
   }
   
   .cart-page-items .empty .btn:hover,
   #pageEmptyState .btn:hover {
     background: var(--accent-h) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 8px 24px rgba(24, 34, 48, 0.32) !important;
   }
   
   .cart-summary-card {
     background: var(--surface) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-lg) !important;
     padding: 36px 30px !important;
     box-shadow: var(--shadow-md) !important;
     position: sticky !important;
     top: 100px !important;
     display: flex !important;
     flex-direction: column !important;
   }
   
   .cart-summary-card h3 {
     font-family: var(--display) !important;
     font-size: 24px !important;
     font-weight: 500 !important;
     letter-spacing: -0.01em !important;
     color: var(--ink) !important;
     margin: 0 0 22px !important;
     padding-bottom: 16px !important;
     border-bottom: 1px solid var(--line) !important;
     line-height: 1.2 !important;
   }
   
   .cart-summary-card .row {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
     font-family: var(--body) !important;
     font-size: 14.5px !important;
     color: var(--muted) !important;
     margin-bottom: 14px !important;
   }
   
   .cart-summary-card .row span:last-child {
     font-weight: 500 !important;
     color: var(--ink) !important;
   }
   
   .cart-summary-card .row.row--save {
     color: var(--save) !important;
     background: rgba(60, 112, 67, 0.08) !important;
     padding: 10px 14px !important;
     border-radius: var(--r-xs) !important;
     font-weight: 600 !important;
     margin: 6px 0 16px !important;
   }
   
   .cart-summary-card .row.row--save span:last-child {
     color: var(--save) !important;
     font-weight: 600 !important;
   }
   
   .cart-summary-card .row.row--total {
     border-top: 1.5px solid var(--line) !important;
     margin-top: 20px !important;
     padding-top: 20px !important;
     margin-bottom: 6px !important;
   }
   
   .cart-summary-card .row.row--total span:first-child {
     font-size: 17px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
   }
   
   .cart-summary-card .row.row--total span:last-child {
     font-family: var(--display) !important;
     font-size: 28px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
     letter-spacing: -0.02em !important;
   }
   
   #pageCheckoutBtn,
   .cart-summary-card .btn--block {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     width: 100% !important;
     height: 54px !important;
     margin-top: 24px !important;
     background: var(--accent) !important;
     color: #FFFFFF !important;
     border: none !important;
     border-radius: var(--r-full) !important;
     font-family: var(--body) !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     letter-spacing: 0.1em !important;
     text-transform: uppercase !important;
     text-decoration: none !important;
     box-shadow: 0 6px 20px rgba(24, 34, 48, 0.22) !important;
     transition: all 0.25s ease !important;
     cursor: pointer !important;
   }
   
   #pageCheckoutBtn:hover,
   .cart-summary-card .btn--block:hover {
     background: var(--accent-h) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 10px 28px rgba(24, 34, 48, 0.32) !important;
   }
   
   #pageCheckoutBtn:active {
     transform: translateY(0) !important;
   }
   
   /* Slide-out Cart Drawer */
   .drawer {
     position: fixed;
     inset: 0;
     z-index: 90;
     visibility: hidden;
     pointer-events: none !important;
     transition: visibility 0.35s;
   }
   
   .drawer.is-open,
   .drawer[data-app-open] {
     visibility: visible;
     pointer-events: auto !important;
   }
   
   .drawer__backdrop {
     position: absolute;
     inset: 0;
     background: rgba(14, 18, 26, 0.6);
     backdrop-filter: blur(4px);
     opacity: 0;
     transition: opacity 0.35s var(--ease);
   }
   
   .drawer.is-open .drawer__backdrop,
   .drawer[data-app-open] .drawer__backdrop {
     opacity: 1;
   }
   
   .drawer__panel {
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     width: min(440px, 100%);
     background: var(--surface);
     display: flex;
     flex-direction: column;
     transform: translateX(100%);
     transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
     box-shadow: -8px 0 40px rgba(0, 0, 0, 0.2);
   }
   
   .drawer.is-open .drawer__panel,
   .drawer[data-app-open] .drawer__panel {
     transform: none;
   }
   
   .drawer__head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--s5) var(--s6);
     border-bottom: 1px solid var(--line);
   }
   
   .drawer__head h2 {
     font-size: 1.5rem;
   }
   
   .ship {
     padding: var(--s4) var(--s6);
     background: var(--surface-2);
   }
   
   .ship p {
     font-size: var(--t-sm);
     margin-bottom: var(--s2);
   }
   
   .ship__bar {
     height: 6px;
     border-radius: var(--r-full);
     background: var(--line);
     overflow: hidden;
   }
   
   .ship__bar span {
     display: block;
     height: 100%;
     width: 0;
     background: linear-gradient(90deg, var(--cool), var(--warm));
     transition: width 0.4s var(--ease);
   }
   
   .drawer__items {
     flex: 1;
     overflow-y: auto;
     padding: var(--s3) var(--s6);
   }
   
   .empty {
     text-align: center;
     padding: var(--s8) var(--s4);
     color: var(--muted);
   }
   
   .empty p {
     margin-bottom: var(--s4);
   }
   
   .line {
     display: grid;
     grid-template-columns: 76px 1fr auto;
     gap: var(--s4);
     padding: var(--s4) 0;
     border-bottom: 1px solid var(--line-subtle);
     align-items: center;
   }
   
   .line img {
     width: 76px;
     height: 92px;
     object-fit: cover;
     border-radius: var(--r-sm);
   }
   
   .line__name {
     font-weight: 600;
     font-size: var(--t-sm);
     line-height: 1.35;
     color: var(--ink);
   }
   
   .line__meta {
     font-size: var(--t-xs);
     color: var(--faint);
     margin-top: 3px;
   }
   
   .line__ctrl {
     display: flex;
     align-items: center;
     gap: var(--s3);
     margin-top: var(--s2);
   }
   
   .line__ctrl .qty button,
   .ignore-app-design .line__ctrl .qty button {
     width: 28px !important;
     height: 28px !important;
     font-size: 1rem !important;
     background: transparent !important;
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer !important;
     display: grid !important;
     place-items: center !important;
   }
   
   .line__rm,
   .ignore-app-design .line__rm {
     font-size: var(--t-xs) !important;
     color: var(--muted) !important;
     text-decoration: underline !important;
     text-underline-offset: 2px !important;
     background: transparent !important;
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer !important;
     display: inline-block !important;
     width: auto !important;
   }
   
   .line__rm:hover,
   .ignore-app-design .line__rm:hover {
     color: var(--ink) !important;
     background: transparent !important;
   }
   
   .line__price {
     font-size: var(--t-sm);
     font-weight: 600;
     font-variant-numeric: tabular-nums;
   }
   
   .drawer__foot {
     padding: var(--s5) var(--s6) var(--s6);
     border-top: 1px solid var(--line);
     display: grid;
     gap: 8px;
     background: var(--surface);
   }
   
   .row,
   .drawer__foot .row,
   .cart-summary-card .row {
     display: flex !important;
     justify-content: space-between !important;
     font-size: var(--t-sm) !important;
     font-variant-numeric: tabular-nums !important;
     color: var(--muted) !important;
     margin: 0 !important;
     padding: 0 !important;
   }
   
   .row--save {
     color: var(--save);
     font-weight: 600;
   }
   
   .row--total {
     font-weight: 700;
     font-size: 1.15rem;
     color: var(--ink);
     padding-block: var(--s2) var(--s3);
     border-top: 1px solid var(--line-subtle);
   }
   
   .drawer__note {
     font-size: var(--t-xs);
     color: var(--faint);
     text-align: center;
     margin-top: 6px;
   }
   
   .toast {
     position: fixed;
     left: 50%;
     bottom: 28px;
     transform: translate(-50%, 20px);
     background: var(--accent);
     color: #FFFFFF;
     padding: 14px 24px;
     border-radius: var(--r-full);
     font-size: var(--t-sm);
     font-weight: 500;
     opacity: 0;
     pointer-events: none;
     transition: all 0.3s var(--ease);
     z-index: 1000;
     box-shadow: var(--shadow-lg);
     border: 1px solid rgba(255, 255, 255, 0.15);
   }
   
   .toast.show {
     opacity: 1;
     transform: translate(-50%, 0);
   }
   
   /* Responsive Media Queries */
   @media (max-width: 1024px) {
   
     .grid,
     product-paginate,
     .grid>product-paginate {
       grid-template-columns: repeat(3, 1fr) !important;
     }
   
     .strip__inner {
       grid-template-columns: repeat(2, 1fr);
     }
   
     .quotes {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   @media (max-width: 860px) {
     .nav {
       display: none;
     }
   
     .grid,
     product-paginate,
     .grid>product-paginate {
       grid-template-columns: repeat(2, 1fr) !important;
       gap: var(--s5) var(--s4) !important;
     }
   
     .bundle__inner,
     .timeline,
     .trial__inner,
     .faq,
     .split,
     .cart-page-layout {
       grid-template-columns: 1fr;
     }
   
     .bundle__inner {
       gap: var(--s6);
     }
   
     .bundle__img {
       order: -1;
     }
   
     .quotes {
       grid-template-columns: 1fr;
     }
   
     .modal,
     .ignore-app-design .modal {
       padding: 0 !important;
       align-items: flex-end !important;
     }
   
     .modal__panel,
     .ignore-app-design .modal__panel {
       flex-direction: column !important;
       border-radius: 20px 20px 0 0 !important;
       max-height: 88vh !important;
       width: 100% !important;
       overflow-y: auto !important;
     }
   
     .modal__img,
     .ignore-app-design .modal__img {
       height: 190px !important;
       min-height: 190px !important;
       max-height: 190px !important;
       width: 100% !important;
       min-width: 100% !important;
       max-width: 100% !important;
       flex: 0 0 190px !important;
       border-radius: 20px 20px 0 0 !important;
     }
   
     .modal__img img,
     .ignore-app-design .modal__img img {
       height: 100% !important;
       width: 100% !important;
       object-fit: cover !important;
     }
   
     .modal__body,
     .ignore-app-design .modal__body {
       padding: 20px 18px 24px !important;
       max-height: none !important;
       overflow-y: visible !important;
       width: 100% !important;
       flex: 1 1 auto !important;
     }
   
     .modal__close,
     .ignore-app-design .modal__close {
       top: 12px !important;
       right: 12px !important;
       background: rgba(255, 255, 255, 0.95) !important;
     }
   
     .card__quick {
       display: none;
     }
   }
   
   @media (max-width: 560px) {
   
     .grid,
     product-paginate,
     .grid>product-paginate {
       grid-template-columns: 1fr !important;
     }
   
     .section,
     .bundle__inner,
     .trial,
     .split {
       padding-block: var(--s7);
     }
   
     .strip__inner {
       grid-template-columns: 1fr;
     }
   
     .trial__list,
     .specs {
       grid-template-columns: 1fr;
     }
   
     .hero h1 {
       font-size: 2.5rem;
     }
   }
   
   /* ==========================================================================
         UNIFY CMS BUTTON OVERRIDE SHIELD (!important)
         Guarantees no CMS default stylesheets (app.css / app-override.css)
         can corrupt or revert button layouts, positions, dimensions, or styling.
         ========================================================================== */
   .ignore-app-design .btn,
   .ignore-app-design button.btn,
   .ignore-app-design a.btn {
     display: inline-flex !important;
     width: auto !important;
     align-items: center !important;
     justify-content: center !important;
   }
   
   .ignore-app-design .btn--block {
     width: 100% !important;
   }
   
   .ignore-app-design .btn--grow {
     flex: 1 1 auto !important;
   }
   
   .ignore-app-design .modal__close,
   button.modal__close {
     position: absolute !important;
     top: 14px !important;
     right: 14px !important;
     width: 36px !important;
     height: 36px !important;
     border-radius: 50% !important;
     display: grid !important;
     place-items: center !important;
     background: rgba(255, 255, 255, 0.95) !important;
     border: 1px solid var(--line) !important;
     font-size: 20px !important;
     line-height: 1 !important;
     color: var(--ink) !important;
     cursor: pointer !important;
     padding: 0 !important;
     margin: 0 !important;
     z-index: 50 !important;
   }
   
   .ignore-app-design .card__add,
   button.card__add {
     display: flex !important;
     width: 100% !important;
     padding: 12px 18px !important;
     border-radius: var(--r-full) !important;
     border: 1px solid var(--line) !important;
     background: var(--bg) !important;
     color: var(--ink) !important;
     cursor: pointer !important;
     align-items: center !important;
     justify-content: center !important;
   }
   
   .ignore-app-design .size,
   button.size {
     display: inline-block !important;
     width: auto !important;
     padding: 7px 16px !important;
     border-radius: var(--r-full) !important;
     border: 1px solid var(--line) !important;
     background: var(--surface) !important;
     color: var(--ink) !important;
     font-size: 0.8125rem !important;
     font-weight: 600 !important;
     cursor: pointer !important;
   }
   
   .ignore-app-design .size[aria-pressed="true"],
   button.size[aria-pressed="true"] {
     background: var(--accent) !important;
     border-color: var(--accent) !important;
     color: #FFFFFF !important;
   }
   
   .ignore-app-design .qty button,
   .qty button {
     width: 38px !important;
     height: 100% !important;
     background: transparent !important;
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer !important;
     display: grid !important;
     place-items: center !important;
     color: var(--muted) !important;
   }
   
   .ignore-app-design .chip,
   button.chip {
     display: inline-flex !important;
     width: auto !important;
     padding: 8px 18px !important;
     background: transparent !important;
     border: 0 !important;
     cursor: pointer !important;
   }
   
   .ignore-app-design .phase-btn,
   button.phase-btn {
     display: inline-block !important;
     width: auto !important;
     padding: 10px 20px !important;
     cursor: pointer !important;
   }
   
   .ignore-app-design .line__rm,
   button.line__rm {
     display: inline-block !important;
     width: auto !important;
     background: transparent !important;
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer !important;
   }
   
   /* ==========================================================================
         HEMDYNAMICS LUXURY CHECKOUT STYLES
         ========================================================================== */
   
   .shop-intro-banner {
     background: var(--surface) !important;
     border-bottom: 1px solid var(--line) !important;
     padding: 16px 0 !important;
   }
   
   .shop-intro-banner .container,
   .shop-intro-banner .wrap {
     max-width: 1240px !important;
     margin: 0 auto !important;
     padding: 0 24px !important;
     box-sizing: border-box !important;
   }
   
   .shop-intro-breadcrumb,
   .breadcrumb {
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
     list-style: none !important;
     margin: 0 !important;
     padding: 0 !important;
     font-family: var(--body) !important;
     font-size: 12px !important;
     font-weight: 600 !important;
     letter-spacing: 0.14em !important;
     text-transform: uppercase !important;
   }
   
   .shop-intro-breadcrumb .breadcrumb-item,
   .breadcrumb .breadcrumb-item {
     display: inline-flex !important;
     align-items: center !important;
   }
   
   .shop-intro-breadcrumb .breadcrumb-item a,
   .breadcrumb .breadcrumb-item a {
     color: var(--muted) !important;
     text-decoration: none !important;
     transition: color 0.15s ease !important;
   }
   
   .shop-intro-breadcrumb .breadcrumb-item a:hover,
   .breadcrumb .breadcrumb-item a:hover {
     color: var(--ink) !important;
   }
   
   .shop-intro-breadcrumb .breadcrumb-item.active,
   .breadcrumb .breadcrumb-item.active {
     color: var(--ink) !important;
     font-weight: 600 !important;
   }
   
   .shop-intro-breadcrumb .breadcrumb-item+.breadcrumb-item::before,
   .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
     content: "›" !important;
     color: var(--faint) !important;
     padding-right: 8px !important;
     font-size: 14px !important;
     line-height: 1 !important;
   }
   
   .checkout-page {
     background-color: var(--bg) !important;
     min-height: 100vh !important;
     padding-bottom: 96px !important;
   }
   
   .luxe-container {
     max-width: 1240px !important;
     margin: 0 auto !important;
     padding: 0 24px !important;
     box-sizing: border-box !important;
   }
   
   .checkout-wrapper {
     display: grid !important;
     grid-template-columns: 1.45fr 420px !important;
     gap: 48px !important;
     align-items: start !important;
     padding: 44px 0 80px !important;
   }
   
   .checkout-main {
     background: var(--surface) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-lg) !important;
     padding: 44px 40px !important;
     box-shadow: var(--shadow-sm) !important;
   }
   
   .checkout-steps {
     display: flex !important;
     align-items: center !important;
     gap: 14px !important;
     margin-bottom: 36px !important;
     padding-bottom: 22px !important;
     border-bottom: 1px solid var(--line) !important;
     font-family: var(--body) !important;
     font-size: 11px !important;
     font-weight: 600 !important;
     letter-spacing: 0.18em !important;
     text-transform: uppercase !important;
     color: var(--faint) !important;
   }
   
   .checkout-steps .active {
     color: var(--ink) !important;
     font-weight: 700 !important;
   }
   
   .checkout-section {
     margin-bottom: 36px !important;
     padding-bottom: 32px !important;
     border-bottom: 1px solid var(--line) !important;
   }
   
   .checkout-section:last-of-type {
     border-bottom: none !important;
     margin-bottom: 0 !important;
     padding-bottom: 0 !important;
   }
   
   .checkout-title {
     font-family: var(--display) !important;
     font-size: 24px !important;
     font-weight: 500 !important;
     letter-spacing: -0.01em !important;
     color: var(--ink) !important;
     margin: 0 0 24px !important;
     line-height: 1.25 !important;
   }
   
   /* Flexible Grid for Fields (.row, .col-*) */
   .checkout-main .row,
   .shipping-section .row,
   .card-fields .row,
   #billingfields.row,
   #billingfields .row {
     display: flex !important;
     flex-wrap: wrap !important;
     margin-left: -8px !important;
     margin-right: -8px !important;
   }
   
   .checkout-main .col-12,
   .checkout-main .col-md-12,
   .checkout-main .col-lg-12,
   #billingfields .col-12,
   #billingfields .col-md-12 {
     flex: 0 0 100% !important;
     max-width: 100% !important;
     padding-left: 8px !important;
     padding-right: 8px !important;
     box-sizing: border-box !important;
   }
   
   @media (min-width: 768px) {
   
     .checkout-main .col-md-6,
     #billingfields .col-md-6 {
       flex: 0 0 50% !important;
       max-width: 50% !important;
       padding-left: 8px !important;
       padding-right: 8px !important;
       box-sizing: border-box !important;
     }
   
     .checkout-main .col-md-4,
     #billingfields .col-md-4 {
       flex: 0 0 33.333333% !important;
       max-width: 33.333333% !important;
       padding-left: 8px !important;
       padding-right: 8px !important;
       box-sizing: border-box !important;
     }
   }
   
   @media (min-width: 992px) {
     .checkout-main .col-lg-4 {
       flex: 0 0 33.333333% !important;
       max-width: 33.333333% !important;
       padding-left: 8px !important;
       padding-right: 8px !important;
       box-sizing: border-box !important;
     }
   }
   
   @media (max-width: 767px) {
   
     .checkout-main .col-md-6,
     .checkout-main .col-md-4,
     .checkout-main .col-lg-4,
     #billingfields .col-md-6,
     #billingfields .col-md-4 {
       flex: 0 0 100% !important;
       max-width: 100% !important;
       padding-left: 8px !important;
       padding-right: 8px !important;
       box-sizing: border-box !important;
     }
   }
   
   /* Form Groups, Labels & Inputs (Every Single Field) */
   .form-group,
   .checkout-page .form-group,
   body.ignore-app-design .form-group {
     position: relative !important;
     margin-bottom: 20px !important;
     width: 100% !important;
     box-sizing: border-box !important;
   }
   
   .form-group label,
   .checkout-page .form-group label,
   body.ignore-app-design .form-group label {
     display: block !important;
     margin-bottom: 8px !important;
     font-family: var(--body) !important;
     font-size: 11.5px !important;
     font-weight: 600 !important;
     letter-spacing: 0.1em !important;
     text-transform: uppercase !important;
     color: var(--ink-secondary) !important;
     line-height: 1.3 !important;
   }
   
   .form-group input,
   .form-group input[type="text"],
   .form-group input[type="email"],
   .form-group input[type="tel"],
   .form-group input[type="number"],
   .form-group input.ignore-style,
   .checkout-page input[type="text"],
   .checkout-page input[type="email"],
   .checkout-page input[type="tel"],
   .checkout-page input[type="number"],
   .checkout-page input.ignore-style,
   body.ignore-app-design input.ignore-style,
   body.ignore-app-design input.cc-field,
   input.cc-field {
     width: 100% !important;
     height: 50px !important;
     padding: 0 16px !important;
     background: #FFFFFF !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-sm) !important;
     font-family: var(--body) !important;
     font-size: 15px !important;
     font-weight: 500 !important;
     color: var(--ink) !important;
     box-shadow: none !important;
     outline: none !important;
     transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
     box-sizing: border-box !important;
     line-height: normal !important;
     appearance: none !important;
     -webkit-appearance: none !important;
   }
   
   .form-group input:hover,
   .checkout-page input:hover,
   body.ignore-app-design input.ignore-style:hover {
     border-color: #BDB4A3 !important;
   }
   
   .form-group input:focus,
   .checkout-page input:focus,
   body.ignore-app-design input.ignore-style:focus,
   body.ignore-app-design input.cc-field:focus,
   input.cc-field:focus {
     background: #FFFFFF !important;
     border-color: var(--ink) !important;
     box-shadow: 0 0 0 3px rgba(24, 34, 48, 0.1) !important;
   }
   
   .form-group input::placeholder,
   .checkout-page input::placeholder {
     color: #A39D91 !important;
     font-weight: 400 !important;
   }
   
   .form-group select,
   .checkout-page select,
   body.ignore-app-design select.ignore-style,
   body.ignore-app-design select.cc-field,
   select.cc-field {
     width: 100% !important;
     height: 50px !important;
     padding: 0 42px 0 16px !important;
     background-color: #FFFFFF !important;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314171E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
     background-repeat: no-repeat !important;
     background-position: right 14px center !important;
     background-size: 16px !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-sm) !important;
     font-family: var(--body) !important;
     font-size: 15px !important;
     font-weight: 500 !important;
     color: var(--ink) !important;
     appearance: none !important;
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     outline: none !important;
     cursor: pointer !important;
     box-shadow: none !important;
     transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
     box-sizing: border-box !important;
   }
   
   .form-group select:hover,
   .checkout-page select:hover,
   body.ignore-app-design select.ignore-style:hover {
     border-color: #BDB4A3 !important;
   }
   
   .form-group select:focus,
   .checkout-page select:focus,
   body.ignore-app-design select.ignore-style:focus,
   body.ignore-app-design select.cc-field:focus,
   select.cc-field:focus {
     border-color: var(--ink) !important;
     box-shadow: 0 0 0 3px rgba(24, 34, 48, 0.1) !important;
   }
   
   .form-group input.has-error,
   .form-group select.has-error,
   input.has-error,
   select.has-error {
     border-color: #D92D20 !important;
     box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12) !important;
     background-color: #FFFDFD !important;
   }
   
   .checkout-page input:-webkit-autofill,
   .checkout-page input:-webkit-autofill:hover,
   .checkout-page input:-webkit-autofill:focus,
   body.ignore-app-design input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
     -webkit-text-fill-color: var(--ink) !important;
   }
   
   /* Custom Checkbox */
   .checkout-checkbox {
     display: flex !important;
     align-items: center !important;
     gap: 12px !important;
     margin: 16px 0 24px !important;
     cursor: pointer !important;
   }
   
   .checkout-checkbox input[type="checkbox"],
   .checkout-checkbox .form-check-input,
   .shipping-option__checkbox,
   input#termsCheckboxOneTime,
   input#termsCheckboxSubscription {
     appearance: none !important;
     -webkit-appearance: none !important;
     width: 22px !important;
     height: 22px !important;
     min-width: 22px !important;
     border: 1.5px solid #C4C0B6 !important;
     border-radius: 6px !important;
     background: #FFFFFF !important;
     cursor: pointer !important;
     position: relative !important;
     margin: 0 !important;
     transition: all 0.18s ease !important;
     outline: none !important;
     box-sizing: border-box !important;
   }
   
   .checkout-checkbox input[type="checkbox"]:hover,
   .shipping-option__checkbox:hover,
   input#termsCheckboxOneTime:hover,
   input#termsCheckboxSubscription:hover {
     border-color: var(--ink) !important;
   }
   
   .checkout-checkbox input[type="checkbox"]:checked,
   .checkout-checkbox .form-check-input:checked,
   .shipping-option__checkbox:checked,
   input#termsCheckboxOneTime:checked,
   input#termsCheckboxSubscription:checked {
     background: var(--accent) !important;
     border-color: var(--accent) !important;
   }
   
   .checkout-checkbox input[type="checkbox"]:checked::after,
   .checkout-checkbox .form-check-input:checked::after,
   .shipping-option__checkbox:checked::after,
   input#termsCheckboxOneTime:checked::after,
   input#termsCheckboxSubscription:checked::after {
     content: "" !important;
     position: absolute !important;
     left: 6.5px !important;
     top: 2.5px !important;
     width: 6px !important;
     height: 11px !important;
     border: solid #FFFFFF !important;
     border-width: 0 2px 2px 0 !important;
     transform: rotate(45deg) !important;
   }
   
   .checkout-checkbox label {
     font-family: var(--body) !important;
     font-size: 14.5px !important;
     font-weight: 500 !important;
     color: var(--ink) !important;
     margin: 0 !important;
     cursor: pointer !important;
     user-select: none !important;
   }
   
   /* Billing Address Form Box */
   #billingfields {
     background: var(--bg) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-sm) !important;
     padding: 24px !important;
     margin-top: 14px !important;
     margin-bottom: 24px !important;
   }
   
   #billingfields .checkout-title {
     font-size: 18px !important;
     margin-bottom: 16px !important;
   }
   
   /* Payment Methods */
   .payment-options {
     display: flex !important;
     flex-direction: column !important;
     gap: 12px !important;
     width: 100% !important;
   }
   
   .payment-option {
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-sm) !important;
     background: #FFFFFF !important;
     overflow: hidden !important;
     transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
   }
   
   .payment-option:hover {
     border-color: #BDB4A3 !important;
   }
   
   .payment-option:has(input[type="radio"]:checked) {
     border-color: var(--ink) !important;
     box-shadow: 0 0 0 1px var(--ink) !important;
   }
   
   .payment-option-header {
     display: flex !important;
     align-items: center !important;
     gap: 14px !important;
     padding: 18px 20px !important;
     margin: 0 !important;
     cursor: pointer !important;
     background: transparent !important;
     width: 100% !important;
     box-sizing: border-box !important;
   }
   
   .payment-option input[type="radio"] {
     appearance: none !important;
     -webkit-appearance: none !important;
     width: 20px !important;
     height: 20px !important;
     min-width: 20px !important;
     border: 2px solid #C4C0B6 !important;
     border-radius: 50% !important;
     background: #FFFFFF !important;
     position: relative !important;
     margin: 0 !important;
     cursor: pointer !important;
     transition: border-color 0.2s ease !important;
     outline: none !important;
     box-sizing: border-box !important;
   }
   
   .payment-option input[type="radio"]:checked {
     border-color: var(--ink) !important;
   }
   
   .payment-option input[type="radio"]:checked::after {
     content: "" !important;
     position: absolute !important;
     top: 4px !important;
     left: 4px !important;
     width: 8px !important;
     height: 8px !important;
     border-radius: 50% !important;
     background: var(--ink) !important;
   }
   
   .payment-option-label {
     font-family: var(--body) !important;
     font-size: 15px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
     letter-spacing: -0.01em !important;
   }
   
   .payment-option-header img {
     height: 24px !important;
     width: auto !important;
     object-fit: contain !important;
   }
   
   .card-fields {
     padding: 8px 20px 22px 20px !important;
     background: var(--surface-2) !important;
     border-top: 1px solid var(--line) !important;
   }
   
   /* Right Column: Order Summary Card */
   .checkout-summary {
     background: var(--surface) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-lg) !important;
     padding: 36px 30px !important;
     box-shadow: var(--shadow-md) !important;
     position: sticky !important;
     top: 100px !important;
     display: flex !important;
     flex-direction: column !important;
   }
   
   .summary-title {
     font-family: var(--display) !important;
     font-size: 24px !important;
     font-weight: 500 !important;
     letter-spacing: -0.01em !important;
     color: var(--ink) !important;
     margin: 0 0 24px !important;
     padding-bottom: 16px !important;
     border-bottom: 1px solid var(--line) !important;
     line-height: 1.2 !important;
   }
   
   .summary-products {
     display: flex !important;
     flex-direction: column !important;
     gap: 16px !important;
     padding-bottom: 24px !important;
     border-bottom: 1px solid var(--line) !important;
   }
   
   .summary-product {
     display: flex !important;
     align-items: center !important;
     gap: 16px !important;
   }
   
   .product-thumb {
     width: 66px !important;
     height: 66px !important;
     flex-shrink: 0 !important;
     border-radius: var(--r-sm) !important;
     overflow: hidden !important;
     border: 1px solid var(--line) !important;
     background: var(--bg) !important;
   }
   
   .product-thumb img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     display: block !important;
   }
   
   .product-info {
     flex: 1 !important;
     min-width: 0 !important;
   }
   
   .product-info h4 {
     font-family: var(--body) !important;
     font-size: 15px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
     margin: 0 0 4px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     line-height: 1.35 !important;
   }
   
   .summary-product>span {
     font-family: var(--body) !important;
     font-size: 15.5px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
     white-space: nowrap !important;
   }
   
   /* Coupon / Discount Code Row */
   .discount-row-wrapper {
     padding: 22px 0 !important;
     border-bottom: 1px solid var(--line) !important;
   }
   
   .discount-row {
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
     background: var(--surface-2) !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-sm) !important;
     padding: 6px 8px 6px 14px !important;
     transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
     box-sizing: border-box !important;
   }
   
   .discount-row:focus-within {
     border-color: var(--ink) !important;
     background: #FFFFFF !important;
     box-shadow: 0 0 0 3px rgba(24, 34, 48, 0.08) !important;
   }
   
   .discount-row input#coupon_box,
   .discount-row input {
     flex: 1 !important;
     height: 42px !important;
     background: transparent !important;
     border: none !important;
     padding: 0 !important;
     font-family: var(--body) !important;
     font-size: 14px !important;
     color: var(--ink) !important;
     outline: none !important;
     box-shadow: none !important;
   }
   
   .discount-row button#coupon_button,
   .discount-row button,
   .discount-row .modal-sp-btn {
     height: 42px !important;
     padding: 0 20px !important;
     background: var(--accent) !important;
     color: #FFFFFF !important;
     border: none !important;
     border-radius: var(--r-xs) !important;
     font-family: var(--body) !important;
     font-size: 12px !important;
     font-weight: 600 !important;
     letter-spacing: 0.1em !important;
     text-transform: uppercase !important;
     cursor: pointer !important;
     transition: all 0.2s ease !important;
   }
   
   .discount-row button#coupon_button:hover,
   .discount-row button:hover,
   .discount-row .modal-sp-btn:hover {
     background: var(--accent-h) !important;
     transform: translateY(-1px) !important;
   }
   
   /* Summary Totals */
   .summary-totals {
     padding: 22px 0 !important;
   }
   
   .summary-line {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
     font-family: var(--body) !important;
     font-size: 14.5px !important;
     color: var(--muted) !important;
     margin-bottom: 12px !important;
   }
   
   .summary-line span:last-child {
     font-weight: 500 !important;
     color: var(--ink) !important;
   }
   
   .summary-total {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
     border-top: 1.5px solid var(--line) !important;
     margin-top: 20px !important;
     padding-top: 20px !important;
   }
   
   .summary-total span:first-child {
     font-family: var(--body) !important;
     font-size: 17px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
   }
   
   .summary-total .final_amount strong,
   #grtotal {
     font-family: var(--display) !important;
     font-size: 28px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
     letter-spacing: -0.02em !important;
   }
   
   /* Shipping Options / Upsell Cards */
   .shipping-options {
     margin: 22px 0 !important;
     display: flex !important;
     flex-direction: column !important;
     gap: 12px !important;
   }
   
   .shipping-option {
     display: block !important;
     padding: 16px 18px !important;
     border: 1.5px solid var(--line) !important;
     border-radius: var(--r-sm) !important;
     background: #FFFFFF !important;
     cursor: pointer !important;
     transition: all 0.2s ease !important;
   }
   
   .shipping-option:hover {
     border-color: #BDB4A3 !important;
     background: var(--surface-2) !important;
   }
   
   .shipping-option:has(input[type="checkbox"]:checked) {
     border-color: var(--ink) !important;
     background: #FAF7F2 !important;
     box-shadow: 0 0 0 1px var(--ink) !important;
   }
   
   .shipping-option .topShip {
     display: flex !important;
     align-items: center !important;
     gap: 12px !important;
     width: 100% !important;
   }
   
   .shipping-option__icon img {
     width: 28px !important;
     height: 28px !important;
     object-fit: contain !important;
   }
   
   .shipping-option__title {
     font-family: var(--body) !important;
     font-size: 14.5px !important;
     font-weight: 600 !important;
     color: var(--ink) !important;
   }
   
   .shipping-price {
     margin-left: auto !important;
     font-family: var(--body) !important;
     font-size: 14px !important;
     font-weight: 700 !important;
     color: var(--ink) !important;
   }
   
   .shipping-option .bottomShip {
     display: block !important;
     margin-top: 6px !important;
     padding-left: 36px !important;
   }
   
   .shipping-option__description {
     font-family: var(--body) !important;
     font-size: 12px !important;
     color: var(--muted) !important;
     line-height: 1.4 !important;
   }
   
   /* Legal / Terms Agreements */
   #oneTimeTerms,
   #subscriptionTerms {
     font-family: var(--body) !important;
     font-size: 12px !important;
     color: var(--muted) !important;
     line-height: 1.55 !important;
     margin-top: 18px !important;
     padding-bottom: 14px !important;
   }
   
   #oneTimeTerms label,
   #subscriptionTerms label {
     display: flex !important;
     align-items: flex-start !important;
     gap: 10px !important;
     cursor: pointer !important;
   }
   
   #oneTimeTerms a,
   #subscriptionTerms a {
     color: var(--ink) !important;
     text-decoration: underline !important;
   }
   
   /* Confirm Order Action Button */
   .checkout-actions {
     margin-top: 24px !important;
   }
   
   .collection-btn,
   button[onclick="submitForm()"],
   .checkout-actions button {
     width: 100% !important;
     height: 54px !important;
     background: var(--accent) !important;
     color: #FFFFFF !important;
     border: none !important;
     border-radius: var(--r-full) !important;
     font-family: var(--body) !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     letter-spacing: 0.12em !important;
     text-transform: uppercase !important;
     cursor: pointer !important;
     box-shadow: 0 6px 20px rgba(24, 34, 48, 0.22) !important;
     transition: all 0.25s ease !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
   }
   
   .collection-btn:hover,
   button[onclick="submitForm()"]:hover,
   .checkout-actions button:hover {
     background: var(--accent-h) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 10px 28px rgba(24, 34, 48, 0.32) !important;
   }
   
   .collection-btn:active,
   button[onclick="submitForm()"]:active {
     transform: translateY(0) !important;
   }
   
   /* Responsive Breakpoints */
   @media (max-width: 992px) {
     .checkout-wrapper {
       grid-template-columns: 1fr !important;
       gap: 36px !important;
     }
   
     .checkout-summary {
       position: static !important;
     }
   
     .cart-page-layout {
       grid-template-columns: 1fr !important;
       gap: 36px !important;
     }
   
     .cart-summary-card {
       position: static !important;
     }
   }
   
   @media (max-width: 576px) {
     .checkout-main {
       padding: 28px 20px !important;
     }
   
     .cart-page-row {
       grid-template-columns: 80px 1fr !important;
       padding: 16px !important;
       gap: 16px !important;
     }
   
     .cart-page-row>div:last-child {
       grid-column: 1 / -1 !important;
       flex-direction: row !important;
       justify-content: space-between !important;
       align-items: center !important;
       width: 100% !important;
       padding-top: 12px !important;
       border-top: 1px solid var(--line) !important;
     }
   }
   
   
   /* ── Quick view popup ──
      The product detail page is loaded into the funnel popup in an iframe (js/quick-view.js).
      The popup body is built by the platform's popup.js, so only the frame is styled here. */
   .quick-view__frame {
     display: block;
     width: 100%;
     height: 82vh;
     border: 0;
   }
   
   /* popup.js pads the modal body for text content; the frame fills it instead.
      overflow:hidden matters -- the iframe does its own scrolling, so without this
      the modal body scrolls too and the popup shows two scrollbars side by side. */
   .modal-body:has(.quick-view__frame),
   .sp-modal-body:has(.quick-view__frame) {
     padding: 0;
     overflow: hidden;
   }
   
   /* The quick-view popup is wider than popup.js's default 700px: the detail page is a
      two-column layout (gallery | buy box) and squeezing it into 700px cramps both. */
   /* The theme makes .modal.show a flex container, so .modal-dialog is a flex item and
      shrinks to its content (~300px) instead of filling. max-width alone does nothing
      about that -- it needs an explicit width and flex-basis to grow into. */
   .modal-dialog:has(.quick-view__frame),
   .modal.show .modal-dialog:has(.quick-view__frame) {
     width: min(1100px, 94vw) !important;
     max-width: min(1100px, 94vw) !important;
     flex: 0 0 auto !important;
     margin: auto !important;
   }
   
   .modal-content:has(.quick-view__frame) {
     width: 100% !important;
   }
   
   .sp-modal:has(.quick-view__frame) {
     width: min(1100px, 94vw) !important;
     max-width: min(1100px, 94vw) !important;
   }
   
   /* The header and footer popup.js builds are dead weight here -- the framed page has
      its own close affordance in the modal header, and the footer is an empty bar
      eating vertical space the product needs. */
   .modal-content:has(.quick-view__frame) .modal-footer,
   .sp-modal:has(.quick-view__frame) .sp-modal-footer {
     display: none;
   }
   
   /* The modal header is an empty white band above the product -- popup.js blanks its
      title, so only the close button is doing any work. It is floated over the frame
      instead of sitting above it, which reclaims the band and stops the framed page's
      first line being pushed out of view. */
   .modal-content:has(.quick-view__frame) .modal-header {
     position: absolute !important;
     top: 0 !important;
     right: 0 !important;
     z-index: 2 !important;
     padding: 10px 12px !important;
     border: 0 !important;
     background: transparent !important;
     min-height: 0 !important;
   }
   
   .modal-content:has(.quick-view__frame) {
     position: relative !important;
     overflow: hidden !important;
     border-radius: 12px !important;
   }
   
   /* The close button needs to stay legible over whatever the page puts behind it. */
   .modal-content:has(.quick-view__frame) .modal-header .btn-close {
     background-color: rgba(255, 255, 255, 0.9) !important;
     border-radius: 999px !important;
     padding: 10px !important;
     opacity: 1 !important;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     font-size: 10px;
     line-height: 1;
     display: grid;
     place-items: center;
     transition: background .2s;
     position: absolute;
     right: 27px;
     top: 15px;
   }
   
   @media (max-width: 575.98px) {
     .quick-view__frame {
       height: 78vh;
     }
   }
   
   /* ── Inside the quick view iframe ──
      product-details.html includes the full site chrome (header, nav, cart drawer,
      footer). In a modal that reads as a second website, so it is hidden. The flag is
      set by js/quick-view.js on the framed document, from the ?quick_view=1 param. */
   body.is-quick-view>header,
   body.is-quick-view>footer,
   body.is-quick-view .announce,
   body.is-quick-view .header,
   body.is-quick-view .footer,
   body.is-quick-view .mobile-drawer,
   body.is-quick-view .search-modal-overlay {
     display: none !important;
   }
   
   /* The cart drawer stays in the DOM: adding to cart from in here opens it, and the
      shopper needs to see that it worked. It is only hidden while closed, which is
      what the platform's own data-app-open attribute already tracks. */
   
   body.is-quick-view {
     padding-top: 0 !important;
   }
   
   body.is-quick-view main {
     padding-top: 0 !important;
   }
   
   .custom_product_details_page.product-detail-layout {
     gap: 4vw !important;
   }
   
   .custom_product_details_page h1.product-detail-title {
     font-size: 2.25rem;
     margin-bottom: 20px;
     line-height: 3.2rem;
   }
   
   .custom_product_details_page .product-detail-copy {
     max-width: 100%;
   }
   
   .custom_product_details_page .product-detail-copy p {
     color: var(--muted);
     font-size: var(--t-sm);
     margin-bottom: var(--s4);
   }
   
   .custom_product_details_page .product-detail-copy ul {
     list-style: none;
     display: grid;
     gap: 6px;
     font-size: var(--t-sm);
     margin-bottom: var(--s5);
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   .custom_product_details_page .product-detail-copy ul li {
     padding-left: 20px;
     position: relative;
   }
   
   .custom_product_details_page .product-detail-copy ul li:before {
     content: '';
     position: absolute;
     left: 2px;
     top: .55em;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--cool), var(--warm));
   }
   
   .custom_product_details_page .btn-luxe-dark {
     background: #23324a;
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 14px 24px;
     border-radius: 999px;
     font-size: var(--t-sm);
     font-weight: 600;
     letter-spacing: .01em;
     transition: background .2s var(--ease), color .2s, transform .2s var(--ease), border-color .2s;
     margin-bottom: 0;
   }
   
   .custom_product_details_page .pd-packs {
     display: flex;
     flex-wrap: wrap;
     gap: var(--s2);
   }
   
   .custom_product_details_page .pd-packs button {
     padding: 10px 14px;
     border: 1px solid var(--line);
     border-radius: var(--r-sm);
     font-size: var(--t-sm);
     font-weight: 500;
     transition: all .15s;
   }
   
   .custom_product_details_page .product-detail-price {
     font-size: var(--t-xl);
     font-variant-numeric: tabular-nums;
     margin-bottom: var(--s4);
     line-height: var(--t-xl);
   }
   
   .custom_product_details_page .product-summary-panel .product-qty-wrap {
     display: flex;
     align-items: center;
     border: 1px solid var(--line);
     border-radius: 999px;
     padding: 0 24px;
   }
   
   .custom_product_details_page .product-summary-panel .product-qty-wrap input {
     border: none;
     text-align: center;
   }
   
   .fotter_logo {
     filter: brightness(0) invert(1);
   }
   
   #billingfields.row.d-none,
   #billingfields.d-none,
   [data-app="billing-fields"].d-none {
     display: none !important;
   }
   
   [data-app="submit"].is-submitting {
     opacity: .75;
     cursor: progress;
     pointer-events: none;
   }
   
   .btn-spinner {
     display: inline-block;
     width: 15px;
     height: 15px;
     margin-right: 9px;
     vertical-align: -2px;
     border: 2px solid rgba(255, 255, 255, .45);
     border-top-color: #fff;
     border-radius: 50%;
     animation: btn-spin .6s linear infinite;
   }
   
   @keyframes btn-spin {
     to {
       transform: rotate(360deg);
     }
   }
   
   html.is-order-submitting [data-app="card-fields"],
   html.is-order-submitting .checkout-form-col {
     pointer-events: none;
     opacity: .85;
   }
   
   .pd-packs {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 0 0 16px;
   }
   
   .pd-pack {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 68px;
     padding: 9px 16px;
     border: 1px solid rgba(0, 0, 0, .18);
     border-radius: 999px;
     background: #fff;
     font-size: 14px;
     font-weight: 600;
     line-height: 1;
     cursor: pointer;
   }
   
   .pd-pack__input {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
     pointer-events: none;
   }
   
   .pd-pack:has(.pd-pack__input:checked){
     background: var(--ink, #15202b) !important;
     color: #fff !important;
     border-color: var(--ink, #15202b) !important;
   }
   
   .product-qty-wrap {
     display: inline-flex;
     align-items: center;
     gap: 2px;
     border: 1px solid rgba(0, 0, 0, .18);
     border-radius: 999px;
     padding: 4px;
     background: #fff;
     flex: 0 0 auto;
   }
   
   .product-qty-btn {
     width: 34px;
     height: 34px;
     border: 0;
     background: transparent;
     border-radius: 50%;
     font-size: 17px;
     line-height: 1;
     cursor: pointer;
   }
   
   .product-qty-wrap .product-qty-val {
     width: 48px;
     flex: 0 0 48px;
     border: 0;
     padding: 0;
     background: transparent;
     text-align: center;
     box-shadow: none;
   }
   
   .product-qty-val::-webkit-outer-spin-button,
   .product-qty-val::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
   
   .minicart-crosssell:not(:has(.minicart-crosssell-item)) {
     display: none;
   }
   
   
   ul.hlx-footer__contact {
     list-style: none;
     margin: 0;
     padding: 0;
   }
   
   ul.hlx-footer__contact li {
      display: flex;
      color: var(--night-muted);
      font-size: var(--t-sm);
      margin-bottom: 0;
      transition: color 0.2s;
   }
   
   body:has(#loading-indicator[style*="block"]) [data-app="submit"],
   [data-app="submit"]:disabled {
     position: relative;
     cursor: wait;
     pointer-events: none;
     opacity: .85;
   }
   
   body:has(#loading-indicator[style*="block"]) [data-app="submit"]::before,
   [data-app="submit"]:disabled::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 18px;
     width: 15px;
     height: 15px;
     margin-top: -8px;
     border: 2px solid currentColor;
     border-top-color: transparent;
     border-radius: 50%;
     opacity: .9;
     animation: order-btn-spin .65s linear infinite;
   }
   
   @keyframes order-btn-spin {
     to {
       transform: rotate(360deg);
     }
   }
   
   /* ── Cart drawer: step products ("You may also like") ── */
   .minicart-recommend:not(:has(.minicart-rec-item)) {
     display: none;
   }
   
   .minicart-recommend {
     padding: 16px 20px 4px;
     border-top: 1px solid rgba(0, 0, 0, 0.08);
   }
   
   .minicart-recommend-title {
     margin: 0 0 10px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .08em;
     color: var(--muted, #6b7280);
   }
   
   .minicart-rec-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px;
     margin-bottom: 8px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 10px;
   }
   
   .minicart-rec-img {
     width: 48px !important;
     height: 48px !important;
     flex: 0 0 48px;
     object-fit: cover;
     border-radius: 6px;
   }
   
   .minicart-rec-info {
     display: flex;
     flex-direction: column;
     gap: 2px;
     flex: 1 1 auto;
     min-width: 0;
   }
   
   .minicart-rec-name {
     font-size: 13px;
     font-weight: 600;
     line-height: 1.3;
   }
   
   .minicart-rec-price {
     font-size: 13px;
     color: var(--muted, #6b7280);
   }
   
   .minicart-rec-add {
     flex: 0 0 auto;
     padding: 7px 16px;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 999px;
     background: #fff;
     font-size: 13px;
     font-weight: 600;
     line-height: 1;
     cursor: pointer;
     white-space: nowrap;
   }
   
   .minicart-rec-add:hover {
     background: rgba(0, 0, 0, 0.05);
   }
   
   
   /***********Terms*************/
     
   @media (min-width: 768px) {
     .luxe-container { padding-inline: var(--s7); }
   }
    
   /* =========================================================
      INTRO BANNER + BREADCRUMB
      ========================================================= */
   .shop-intro-banner {
     position: relative;
     padding-block: var(--s7) var(--s6);
     background: var(--bg);
     border-bottom: 1px solid var(--line);
     overflow: hidden;
     isolation: isolate;
   }
    
   .shop-intro-banner::before,
   .shop-intro-banner::after {
     content: "";
     position: absolute;
     z-index: -1;
     border-radius: 50%;
     filter: blur(20px);
     pointer-events: none;
   }
    
   .shop-intro-banner::before {
     width: 520px;
     height: 520px;
     top: -340px;
     right: -140px;
     background: radial-gradient(circle, var(--warm-glow) 0%, transparent 65%);
     opacity: 0.45;
   }
    
   .shop-intro-banner::after {
     width: 420px;
     height: 420px;
     bottom: -320px;
     left: -140px;
     background: radial-gradient(circle, var(--cool-glow) 0%, transparent 65%);
     opacity: 0.35;
   }
    
   .shop-intro-breadcrumb {
     display: inline-flex !important;
       flex-wrap: wrap;
       align-items: center !important;
       gap: var(--s2) !important;
       margin: 0 !important;
       padding: var(--s2) var(--s4) !important;
       list-style: none !important;
       background: var(--surface);
       border: 1px solid var(--line);
       border-radius: var(--r-full);
       box-shadow: var(--shadow-sm);
       font-size: var(--t-xs) !important;
       font-weight: 500 !important;
       letter-spacing: 0.16em !important;
       text-transform: uppercase !important;
   }
    
   .shop-intro-breadcrumb .breadcrumb-item {
     display: inline-flex;
     align-items: center;
     gap: var(--s2);
     padding: 0;
     color: var(--muted);
   }
    
   /* override Bootstrap's "/" divider with a chevron */
   .shop-intro-breadcrumb .breadcrumb-item + .breadcrumb-item {
     padding-left: 0;
   }
    
   .shop-intro-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
     content: "";
     float: none;
     padding: 0;
     width: 5px;
     height: 5px;
     border-top: 1px solid var(--faint);
     border-right: 1px solid var(--faint);
     transform: rotate(45deg);
   }
    
   .shop-intro-breadcrumb a {
     color: var(--muted);
   }
    
   .shop-intro-breadcrumb a:hover,
   .shop-intro-breadcrumb a:focus-visible {
     color: var(--ink);
   }
    
   .shop-intro-breadcrumb .active {
     color: var(--ink);
   }
    
   .text-gradient {
     background: linear-gradient(90deg, var(--accent) 0%, var(--warm) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
    
   @media (min-width: 768px) {
     .shop-intro-banner { padding-block: var(--s8) var(--s7); }
   }
    
   /* =========================================================
      BODY SECTION
      ========================================================= */
   .terms-bg {
     background: var(--bg);
   }
    
   .section-gap { padding-top: var(--s7); }
   .section-gap-bottom { padding-bottom: var(--s9); }
    
   @media (min-width: 768px) {
     .section-gap { padding-top: var(--s9); }
     .section-gap-bottom { padding-bottom: var(--s10); }
   }
    
   /* ---------- Neutralise the legacy table layout ---------- */
   .terms_body table,
   .terms_body tbody,
   .terms_body tr,
   .terms_body td {
     display: block;
     width: 100% !important;
     height: auto !important;
     margin: 0;
     padding: 0;
     border: 0;
     text-align: left;
   }
    
   .terms_body table {
     font-size: inherit !important;
   }
    
   /* readable, centred document column */
   .terms_body > table {
     max-width: 780px;
     margin-inline: auto;
   }
    
   /* inline color:#000 spans → inherit the token colour */
   .terms_body span[style] {
     color: inherit !important;
   }
    
   /* stray spacing <br>s between sections */
   .terms_body td[align="left"] > div > br {
     display: none;
   }
    
   /* ---------- Company header ---------- */
   .terms_body td[valign="top"] > div > h3:first-child {
     font-family: var(--display);
     font-size: var(--t-2xl);
     font-weight: 400;
     line-height: 1.05;
     letter-spacing: -0.03em;
     color: var(--ink);
   }
    
   .terms_body td[valign="top"] > div > h3:first-child::before {
     content: "LEGAL DOCUMENT / TERMS";
     display: block;
     margin-bottom: var(--s4);
     font-family: var(--body);
     font-size: var(--t-xs);
     font-weight: 500;
     letter-spacing: 0.22em;
     color: var(--muted);
   }
    
   .terms_body td[valign="top"] > div > h4 {
     display: flex;
     align-items: flex-start;
     gap: var(--s3);
     margin-top: var(--s4);
     padding-bottom: var(--s6);
     border-bottom: 1px solid var(--line);
     font-family: var(--body);
     font-size: var(--t-sm);
     font-weight: 400;
     line-height: 1.6;
     letter-spacing: 0.01em;
     color: var(--muted);
   }
    
   .terms_body td[valign="top"] > div > h4::before {
     content: "";
     flex: 0 0 auto;
     width: 24px;
     height: 1px;
     margin-top: 0.8em;
     background: var(--ink);
   }
    
   /* ---------- Pre-order notice card (h3 + 2 paragraphs) ----------
      Built from the three existing elements, each forming one
      slice of a single card.                                       */
   .terms_body td[align="left"] > div > h3:first-child,
   .terms_body td[align="left"] > div > h3:first-child + p,
   .terms_body td[align="left"] > div > h3:first-child + p + p {
     background: var(--surface);
     border: 1px solid var(--line);
     border-left: 2px solid var(--warm);
     padding-inline: var(--s5);
   }
    
   .terms_body td[align="left"] > div > h3:first-child {
     margin-top: var(--s6);
     padding-top: var(--s6);
     border-bottom: 0;
     border-radius: var(--r-lg) var(--r-lg) 0 0;
     font-family: var(--body);
     font-size: var(--t-xs);
     font-weight: 600;
     line-height: 1.7;
     letter-spacing: 0.16em;
     color: var(--ink);
   }
    
   .terms_body td[align="left"] > div > h3:first-child + p {
     margin: 0;
     padding-block: var(--s4);
     border-block: 0;
     font-size: var(--t-base);
     line-height: 1.8;
     color: var(--ink-secondary);
   }
    
   .terms_body td[align="left"] > div > h3:first-child + p b {
     font-weight: 600;
     letter-spacing: 0.1em;
     color: var(--warm);
   }
    
   .terms_body td[align="left"] > div > h3:first-child + p + p {
     margin: 0;
     padding-top: var(--s4);
     padding-bottom: var(--s6);
     border-top: 0;
     border-radius: 0 0 var(--r-lg) var(--r-lg);
     /* inset divider line + card fill */
     background:
       linear-gradient(var(--line), var(--line)) var(--s5) 0 / calc(100% - var(--s5) * 2) 1px no-repeat,
       var(--surface);
     box-shadow: var(--shadow-md);
     font-size: var(--t-xs);
     font-weight: 500;
     letter-spacing: 0.08em;
     line-height: 1.7;
     color: var(--muted);
   }
    
   @media (min-width: 768px) {
     .terms_body td[align="left"] > div > h3:first-child,
     .terms_body td[align="left"] > div > h3:first-child + p,
     .terms_body td[align="left"] > div > h3:first-child + p + p {
       padding-inline: var(--s7);
     }
    
     .terms_body td[align="left"] > div > h3:first-child { padding-top: var(--s7); }
     .terms_body td[align="left"] > div > h3:first-child + p + p {
       padding-bottom: var(--s7);
       background:
         linear-gradient(var(--line), var(--line)) var(--s7) 0 / calc(100% - var(--s7) * 2) 1px no-repeat,
         var(--surface);
     }
    
     .terms_body td[align="left"] > div > h3:first-child + p { font-size: var(--t-lg); }
   }
    
   /* ---------- Collections (auto-numbered sections) ---------- */
   .terms_body td[align="left"] > div {
     counter-reset: terms-section;
   }
    
   .terms_body .collection {
     counter-increment: terms-section;
     padding-block: var(--s7);
     border-bottom: 1px solid var(--line-subtle);
   }
    
   .terms_body .collection:first-of-type {
     margin-top: var(--s5);
   }
    
   .terms_body .collection h3 {
     display: flex;
     align-items: baseline;
     gap: var(--s4);
     font-family: var(--display);
     font-size: var(--t-xl);
     font-weight: 400;
     line-height: 1.2;
     letter-spacing: -0.02em;
     color: var(--ink);
   }
    
   .terms_body .collection h3::before {
     content: counter(terms-section, decimal-leading-zero);
     flex: 0 0 auto;
     font-family: var(--body);
     font-size: var(--t-xs);
     font-weight: 500;
     letter-spacing: 0.14em;
     color: var(--warm);
     transform: translateY(-0.35em);
   }
    
   /* warm accent rule under each heading */
   .terms_body .collection h3 + * {
     position: relative;
     margin-top: var(--s6);
   }
    
   .terms_body .collection h3 + *::before {
     content: "";
     position: absolute;
     left: 0;
     top: calc(var(--s4) * -1);
     width: 48px;
     height: 1px;
     background: var(--warm);
     transform-origin: 0 50%;
   }
    
   .terms_body .collection p {
     font-size: var(--t-base);
     line-height: 1.8;
     color: var(--ink-secondary);
   }
    
   .terms_body .collection p + p {
     margin-top: var(--s4);
   }
    
   .terms_body .collection a {
     color: var(--ink);
     border-bottom: 1px solid var(--warm);
   }
    
   /* ---------- Representations list ---------- */
   .terms_body .collection ol {
     counter-reset: terms-rep;
     list-style: none;
     display: grid;
     gap: var(--s3);
     margin: var(--s5) 0 0;
     padding: 0;
   }
    
   .terms_body .collection ol li {
     counter-increment: terms-rep;
     display: flex;
     align-items: flex-start;
     gap: var(--s4);
     padding: var(--s4) var(--s5);
     background: var(--surface);
     border: 1px solid var(--line);
     border-radius: var(--r);
     transition:
       border-color 0.3s var(--ease),
       box-shadow 0.3s var(--ease),
       transform 0.3s var(--ease);
   }
    
   .terms_body .collection ol li:hover {
     border-color: var(--surface-3);
     box-shadow: var(--shadow-md);
     transform: translateY(-2px);
   }
    
   .terms_body .collection ol li::before {
     content: counter(terms-rep, lower-roman);
     flex: 0 0 auto;
     display: grid;
     place-items: center;
     width: 28px;
     height: 28px;
     margin-top: 2px;
     border-radius: 50%;
     background: var(--surface-2);
     font-family: var(--display);
     font-style: italic;
     font-size: var(--t-sm);
     color: var(--ink);
   }
    
   .terms_body .collection ol li p {
     margin: 0;
   }
    
   /* ---------- Billing & support (last section) as dark card ---------- */
   .terms_body .collection:last-child {
     position: relative;
     margin-top: var(--s7);
     padding: var(--s6);
     border: 0;
     border-radius: var(--r-lg);
     background: var(--night);
     box-shadow: var(--shadow-lg);
     overflow: hidden;
     isolation: isolate;
   }
    
   .terms_body .collection:last-child::before {
     content: "";
     position: absolute;
     z-index: -1;
     width: 340px;
     height: 340px;
     top: -170px;
     right: -110px;
     border-radius: 50%;
     background: radial-gradient(circle, var(--cool-glow) 0%, transparent 70%);
   }
    
   .terms_body .collection:last-child h3 { color: var(--night-ink); }
   .terms_body .collection:last-child p { color: var(--night-muted); }
    
   /* phone + email lines */
   .terms_body .collection:last-child p:nth-of-type(2),
   .terms_body .collection:last-child p:nth-of-type(3) {
     margin-top: var(--s2);
     font-family: var(--display);
     font-size: var(--t-lg);
     color: var(--night-ink);
     word-break: break-word;
   }
    
   /* company + address */
   .terms_body .collection:last-child p:last-child {
     margin-top: var(--s5);
     padding-top: var(--s4);
     border-top: 1px solid var(--night-line);
     font-size: var(--t-sm);
   }
    
   @media (min-width: 768px) {
     .terms_body .collection { padding-block: var(--s8); }
     .terms_body .collection p { font-size: var(--t-lg); }
     .terms_body .collection:last-child { padding: var(--s7); }
   }
    
   /* =========================================================
      SCROLL-DRIVEN MOTION (pure CSS, progressive enhancement)
      ========================================================= */
   @keyframes terms-progress {
     from { transform: scaleX(0); }
     to   { transform: scaleX(1); }
   }
    
   @keyframes terms-rise {
     from { opacity: 0; transform: translateY(28px); }
     to   { opacity: 1; transform: none; }
   }
    
   @keyframes terms-draw {
     from { transform: scaleX(0); }
     to   { transform: scaleX(1); }
   }
    
   @media (prefers-reduced-motion: no-preference) {
     @supports (animation-timeline: scroll()) {
       /* reading progress bar along the top of the viewport */
       .terms-bg::before {
         content: "";
         position: fixed;
         inset: 0 0 auto 0;
         height: 2px;
         z-index: 1000;
         pointer-events: none;
         background: linear-gradient(90deg, var(--cool), var(--warm));
         transform-origin: 0 50%;
         animation: terms-progress linear both;
         animation-timeline: scroll(root);
       }
    
       /* sections rise in as they enter the viewport */
       .terms_body td[align="left"] > div > h3:first-child,
       .terms_body td[align="left"] > div > h3:first-child + p,
       .terms_body td[align="left"] > div > h3:first-child + p + p,
       .terms_body .collection {
         animation: terms-rise var(--ease) both;
         animation-timeline: view();
         animation-range: entry 0% entry 45%;
       }
    
       /* heading accent rule draws in */
       .terms_body .collection h3 + *::before {
         animation: terms-draw linear both;
         animation-timeline: view();
         animation-range: entry 20% cover 30%;
       }
     }
   }
    
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     .terms_body .collection ol li { transition: none; }
     .terms_body .collection ol li:hover { transform: none; }
   }
    
   /* =========================================================
      PRINT ("print a copy for your records")
      ========================================================= */
   @media print {
     .shop-intro-banner,
     .terms-bg::before { display: none !important; }
    
     .terms-bg { background: #fff !important; }
    
     .terms_body * {
       animation: none !important;
       box-shadow: none !important;
     }
    
     .terms_body .collection { break-inside: avoid; }
    
     .terms_body .collection:last-child {
       background: #fff !important;
       border: 1px solid #ccc;
     }
    
     .terms_body .collection:last-child h3,
     .terms_body .collection:last-child p { color: #000 !important; }
   }
   /***********Terms*************/
   
   
   /* =========================================================
      PRIVACY POLICY PAGE — CSS ONLY
      Requires the :root design tokens.
      Works on the existing (table-based) markup as-is.
      Everything is scoped to .privacy-page-main / the banner,
      so it won't touch the cart drawer or other pages.
      ========================================================= */
   
   /* =========================================================
      INTRO BANNER + BREADCRUMB
      ========================================================= */
      .shop-intro-banner {
       position: relative;
       padding-block: var(--s7) var(--s6);
       background: var(--bg);
       border-bottom: 1px solid var(--line);
       overflow: hidden;
       isolation: isolate;
     }
     
     .shop-intro-banner::before,
     .shop-intro-banner::after {
       content: "";
       position: absolute;
       z-index: -1;
       border-radius: 50%;
       filter: blur(20px);
       pointer-events: none;
     }
     
     .shop-intro-banner::before {
       width: 520px;
       height: 520px;
       top: -340px;
       right: -140px;
       background: radial-gradient(circle, var(--warm-glow) 0%, transparent 65%);
       opacity: 0.45;
     }
     
     .shop-intro-banner::after {
       width: 420px;
       height: 420px;
       bottom: -320px;
       left: -140px;
       background: radial-gradient(circle, var(--cool-glow) 0%, transparent 65%);
       opacity: 0.35;
     }
     
     .shop-intro-breadcrumb {
       display: inline-flex;
       flex-wrap: wrap;
       align-items: center;
       gap: var(--s2);
       margin: 0;
       padding: var(--s2) var(--s4);
       list-style: none;
       background: var(--surface);
       border: 1px solid var(--line);
       border-radius: var(--r-full);
       box-shadow: var(--shadow-sm);
       font-size: var(--t-xs);
       font-weight: 500;
       letter-spacing: 0.16em;
       text-transform: uppercase;
     }
     
     .shop-intro-breadcrumb .breadcrumb-item {
       display: inline-flex;
       align-items: center;
       gap: var(--s2);
       padding: 0;
       color: var(--muted);
     }
     
     /* replace Bootstrap's "/" divider with a chevron */
     .shop-intro-breadcrumb .breadcrumb-item + .breadcrumb-item {
       padding-left: 0;
     }
     
     .shop-intro-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
       content: "";
       float: none;
       padding: 0;
       width: 5px;
       height: 5px;
       border-top: 1px solid var(--faint);
       border-right: 1px solid var(--faint);
       transform: rotate(45deg);
     }
     
     .shop-intro-breadcrumb a { color: var(--muted); }
     
     .shop-intro-breadcrumb a:hover,
     .shop-intro-breadcrumb a:focus-visible { color: var(--ink); }
     
     .shop-intro-breadcrumb .active { color: var(--ink); }
     
     .text-gradient {
       background: linear-gradient(90deg, var(--accent) 0%, var(--warm) 100%);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
     }
     
     @media (min-width: 768px) {
       .shop-intro-banner { padding-block: var(--s8) var(--s7); }
     }
     
     /* =========================================================
        PAGE SHELL
        ========================================================= */
     .privacy-page-main {
       background: var(--bg);
     }
     
     .privacy-page-main .section-gap { padding-top: var(--s7); }
     .privacy-page-main .section-gap-bottom { padding-bottom: var(--s9); }
     
     .privacy-page-main .luxe-container {
       max-width: 1240px;
       margin-inline: auto;
       padding-inline: var(--s5);
     }
     
     /* the container's Bootstrap mt-5 doubles the top gap */
     .privacy-page-main .luxe-container.mt-5 { margin-top: 0 !important; }
     
     @media (min-width: 768px) {
       .privacy-page-main .section-gap { padding-top: var(--s9); }
       .privacy-page-main .section-gap-bottom { padding-bottom: var(--s10); }
       .privacy-page-main .luxe-container { padding-inline: var(--s7); }
     }
     
     /* ---------- Neutralise the legacy table layout ---------- */
     .privacy-page-main table,
     .privacy-page-main tbody,
     .privacy-page-main tr,
     .privacy-page-main td {
       display: block;
       width: 100% !important;
       height: auto !important;
       margin: 0;
       padding: 0;
       border: 0;
       text-align: left;
     }
     
     /* readable, centred document column */
     .privacy-page-main .luxe-container > table {
       max-width: 780px;
       margin-inline: auto;
     }
     
     /* empty spacer div at the top of the table */
     .privacy-page-main td > div:empty { display: none; }
     
     /* long emails / URLs never overflow on phones */
     .privacy-page-main td p { overflow-wrap: anywhere; }
     
     /* =========================================================
        DOCUMENT HEADER (company name + address)
        ========================================================= */
     .privacy-page-main td[valign="top"] > div > h3:first-child {
       font-family: var(--display);
       font-size: var(--t-2xl);
       font-weight: 400;
       line-height: 1.05;
       letter-spacing: -0.03em;
       color: var(--ink);
     }
     
     .privacy-page-main td[valign="top"] > div > h3:first-child::before {
       content: "LEGAL DOCUMENT / PRIVACY";
       display: flex;
       align-items: center;
       gap: var(--s3);
       margin-bottom: var(--s4);
       font-family: var(--body);
       font-size: var(--t-xs);
       font-weight: 500;
       letter-spacing: 0.22em;
       color: var(--muted);
     }
     
     .privacy-page-main td[valign="top"] > div > h3:first-child + p {
       display: flex;
       align-items: flex-start;
       gap: var(--s3);
       margin-top: var(--s4);
       padding-bottom: var(--s6);
       border-bottom: 1px solid var(--line);
       font-size: var(--t-sm);
       line-height: 1.6;
       color: var(--muted);
     }
     
     .privacy-page-main td[valign="top"] > div > h3:first-child + p::before {
       content: "";
       flex: 0 0 auto;
       width: 24px;
       height: 1px;
       margin-top: 0.8em;
       background: var(--ink);
     }
     
     /* =========================================================
        POLICY BODY
        ========================================================= */
     .privacy-page-main td[align="left"] > div {
       padding-top: var(--s6);
     }
     
     .privacy-page-main td[align="left"] > div > p {
       font-size: var(--t-base);
       line-height: 1.8;
       color: var(--ink-secondary);
     }
     
     .privacy-page-main td[align="left"] > div > p + p {
       margin-top: var(--s4);
     }
     
     /* ---------- Opening paragraphs (before the first heading) ---------- */
     .privacy-page-main td[align="left"] > div > p:not(h2 ~ p) {
       color: var(--ink);
     }
     
     .privacy-page-main td[align="left"] > div > p:first-child {
       font-family: var(--display);
       font-size: var(--t-xl);
       font-weight: 300;
       line-height: 1.4;
       letter-spacing: -0.01em;
       color: var(--ink);
     }
     
     /* the "Address: … " line as a quiet tagged row */
     .privacy-page-main td[align="left"] > div > p:first-child + p {
       margin-top: var(--s5);
       padding: var(--s3) var(--s4);
       background: var(--surface);
       border: 1px solid var(--line);
       border-radius: var(--r-sm);
       font-size: var(--t-sm);
       color: var(--muted);
     }
     
     /* ---------- Section headings ---------- */
     .privacy-page-main td[align="left"] > div > h2 {
       position: relative;
       margin-top: var(--s8);
       margin-bottom: var(--s5);
       padding-top: var(--s6);
       border-top: 1px solid var(--line);
       font-family: var(--display);
       font-size: var(--t-xl);
       font-weight: 400;
       line-height: 1.25;
       letter-spacing: -0.02em;
       color: var(--ink);
     }
     
     /* warm segment sitting on the hairline */
     .privacy-page-main td[align="left"] > div > h2::before {
       content: "";
       position: absolute;
       left: 0;
       top: -1px;
       width: 56px;
       height: 1px;
       background: var(--warm);
       transform-origin: 0 50%;
     }
     
     /* first paragraph under each heading reads slightly larger */
     .privacy-page-main td[align="left"] > div > h2 + p {
       color: var(--ink);
     }
     
     /* ---------- Corporate address (closing block) ---------- */
     .privacy-page-main td[align="left"] > div > p:last-child {
       position: relative;
       margin-top: var(--s8);
       padding: var(--s6);
       border-radius: var(--r-lg);
       background: var(--night);
       box-shadow: var(--shadow-lg);
       font-family: var(--display);
       font-size: var(--t-lg);
       line-height: 1.5;
       color: var(--night-ink);
       overflow: hidden;
       isolation: isolate;
     }
     
     .privacy-page-main td[align="left"] > div > p:last-child::before {
       content: "";
       position: absolute;
       z-index: -1;
       width: 320px;
       height: 320px;
       top: -160px;
       right: -100px;
       border-radius: 50%;
       background: radial-gradient(circle, var(--cool-glow) 0%, transparent 70%);
     }
     
     .privacy-page-main td[align="left"] > div > p:last-child strong {
       display: block;
       margin-bottom: var(--s3);
       font-family: var(--body);
       font-size: 0.6875rem;
       font-weight: 600;
       letter-spacing: 0.22em;
       color: var(--night-muted);
     }
     
     .privacy-page-main td[align="left"] > div > p:last-child br {
       display: none;
     }
     
     @media (min-width: 768px) {
       .privacy-page-main td[align="left"] > div > p { font-size: var(--t-lg); }
       .privacy-page-main td[align="left"] > div > p:first-child { font-size: var(--t-xl); }
       .privacy-page-main td[align="left"] > div > p:first-child + p { font-size: var(--t-sm); }
       .privacy-page-main td[align="left"] > div > h2 { margin-top: var(--s9); }
       .privacy-page-main td[align="left"] > div > p:last-child {
         padding: var(--s7);
         font-size: var(--t-xl);
       }
     }
     
     /* =========================================================
        SCROLL-DRIVEN MOTION (pure CSS, progressive enhancement)
        ========================================================= */
     @keyframes pp-progress {
       from { transform: scaleX(0); }
       to   { transform: scaleX(1); }
     }
     
     @keyframes pp-rise {
       from { opacity: 0; transform: translateY(24px); }
       to   { opacity: 1; transform: none; }
     }
     
     @media (prefers-reduced-motion: no-preference) {
       @supports (animation-timeline: scroll()) {
         /* reading progress bar along the top of the viewport */
         .privacy-page-main::before {
           content: "";
           position: fixed;
           inset: 0 0 auto 0;
           height: 2px;
           z-index: 1000;
           pointer-events: none;
           background: linear-gradient(90deg, var(--cool), var(--warm));
           transform-origin: 0 50%;
           animation: pp-progress linear both;
           animation-timeline: scroll(root);
         }
     
         /* headings and the closing card rise in */
         .privacy-page-main td[align="left"] > div > h2,
         .privacy-page-main td[align="left"] > div > p:last-child {
           animation: pp-rise var(--ease) both;
           animation-timeline: view();
           animation-range: entry 0% entry 50%;
         }
     
         /* warm segment draws along the hairline */
         .privacy-page-main td[align="left"] > div > h2::before {
           animation: pp-progress linear both;
           animation-timeline: view();
           animation-range: entry 30% cover 35%;
         }
       }
     }
     
     @media (prefers-reduced-motion: reduce) {
       html { scroll-behavior: auto; }
     }
     
     /* =========================================================
        PRINT
        ========================================================= */
     @media print {
       .shop-intro-banner,
       .privacy-page-main::before { display: none !important; }
     
       .privacy-page-main,
       .privacy-page-main td[align="left"] > div > p:first-child + p { background: #fff !important; }
     
       .privacy-page-main * {
         animation: none !important;
         box-shadow: none !important;
       }
     
       .privacy-page-main td[align="left"] > div > h2 { break-after: avoid; }
     
       .privacy-page-main td[align="left"] > div > p:last-child {
         background: #fff !important;
         border: 1px solid #ccc;
         color: #000 !important;
       }
     
       .privacy-page-main td[align="left"] > div > p:last-child strong { color: #000 !important; }
     }
   
   
     /* =========================================================
      CONTACT INFO CARDS
      Requires the :root design tokens + Bootstrap Icons.
      ========================================================= */
   
   .info-card {
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
     padding: var(--s6) var(--s5);
     background: var(--surface);
     border: 1px solid var(--line);
     border-radius: var(--r-lg);
     box-shadow: var(--shadow-sm);
     overflow: hidden;
     isolation: isolate;
     transition:
       transform 0.5s var(--ease),
       box-shadow 0.5s var(--ease),
       border-color 0.5s var(--ease);
   }
   
   /* soft warm glow that appears on hover */
   .info-card::before {
     content: "";
     position: absolute;
     z-index: -1;
     width: 260px;
     height: 260px;
     top: -140px;
     right: -110px;
     border-radius: 50%;
     background: radial-gradient(circle, var(--warm-glow) 0%, transparent 70%);
     opacity: 0;
     transition: opacity 0.6s var(--ease);
   }
   
   /* warm line along the top edge that draws in on hover */
   .info-card::after {
     content: "";
     position: absolute;
     left: var(--s5);
     right: var(--s5);
     top: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--warm), var(--cool));
     border-radius: 0 0 var(--r-full) var(--r-full);
     transform: scaleX(0);
     transform-origin: 0 50%;
     transition: transform 0.6s var(--ease);
   }
   
   .info-card:hover,
   .info-card:focus-within {
     transform: translateY(-4px);
     border-color: var(--surface-3);
     box-shadow: var(--shadow-hover);
   }
   
   .info-card:hover::before,
   .info-card:focus-within::before { opacity: 0.6; }
   
   .info-card:hover::after,
   .info-card:focus-within::after { transform: scaleX(1); }
   
   /* ---------- Icon ---------- */
   .info-icon {
     display: grid;
     place-items: center;
     width: 52px;
     height: 52px;
     margin-bottom: var(--s5);
     background: var(--surface-2);
     border: 1px solid var(--line);
     border-radius: var(--r);
     color: var(--ink);
     font-size: 1.25rem;
     line-height: 1;
     transition:
       background 0.4s var(--ease),
       color 0.4s var(--ease),
       border-color 0.4s var(--ease),
       transform 0.5s var(--ease);
   }
   
   .info-icon i { display: block; line-height: 1; }
   
   .info-card:hover .info-icon,
   .info-card:focus-within .info-icon {
     background: var(--accent);
     border-color: var(--accent);
     color: var(--night-ink);
     transform: rotate(-6deg);
   }
   
   /* ---------- Text ---------- */
   .info-card h3 {
     margin: 0 0 var(--s3);
     font-family: var(--display);
     font-size: var(--t-lg);
     font-weight: 400;
     line-height: 1.25;
     letter-spacing: -0.01em;
     color: var(--ink);
   }
   
   .info-card h3::after {
     content: "";
     display: block;
     width: 32px;
     height: 1px;
     margin-top: var(--s3);
     background: var(--warm);
   }
   
   .info-card p {
     margin: 0;
     font-family: var(--body);
     font-size: var(--t-sm);
     line-height: 1.7;
     color: var(--muted);
     overflow-wrap: anywhere;
   }
   
   /* first line (e.g. company name) reads as the lead */
   .info-card h3 + p {
     color: var(--ink-secondary);
     font-weight: 500;
   }
   
   .info-card p + p { margin-top: var(--s1); }
   
   /* ---------- Links ---------- */
   .info-link {
     position: relative;
     display: inline-block;
     font-family: var(--display);
     font-size: var(--t-lg);
     font-weight: 400;
     color: var(--ink);
     text-decoration: none;
     transition: color 0.3s var(--ease);
   }
   
   .info-link::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -2px;
     height: 1px;
     background: var(--warm);
     transform: scaleX(0);
     transform-origin: 100% 50%;
     transition: transform 0.5s var(--ease);
   }
   
   .info-link:hover,
   .info-link:focus-visible { color: var(--ink); }
   
   .info-link:hover::after,
   .info-link:focus-visible::after {
     transform: scaleX(1);
     transform-origin: 0 50%;
   }
   
   .info-link:focus-visible {
     outline: 1px solid var(--ink);
     outline-offset: 4px;
     border-radius: var(--r-xs);
   }
   
   /* ---------- Larger screens ---------- */
   @media (min-width: 768px) {
     .info-card { padding: var(--s7) var(--s6); }
     .info-card::after { left: var(--s6); right: var(--s6); }
   }
   
   /* ---------- Reduced motion ---------- */
   @media (prefers-reduced-motion: reduce) {
     .info-card,
     .info-card::before,
     .info-card::after,
     .info-icon,
     .info-link::after { transition: none; }
   
     .info-card:hover,
     .info-card:focus-within,
     .info-card:hover .info-icon,
     .info-card:focus-within .info-icon { transform: none; }
   }
   
   
   .trial__inner>div>p {
       color: rgba(255, 255, 255, .78);
       max-width: 42ch;
       margin-top: var(--s4);
   }
   
   .trial__list li {
       border-top: 1px solid rgba(255, 255, 255, .22);
       padding-top: var(--s4);
   }


   /* =========================================================
   COOKIE CONSENT POPUP — CSS ONLY
   Requires the :root design tokens.
   Your JS keeps controlling visibility through the inline
   style="display: …". Nothing here overrides that, and the
   layout works whether it's shown as block or flex.
   ========================================================= */

#cookiePopup {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: 9999;
  max-width: 440px;
  padding: var(--s5);
  background: var(--night);
  color: var(--night-ink);
  border: 1px solid var(--night-line);
  border-radius: var(--r-lg);
  box-shadow:
    0 24px 64px rgba(14, 18, 26, 0.35),
    0 2px 8px rgba(14, 18, 26, 0.2);
  font-family: var(--body);
  overflow: hidden;
  isolation: isolate;
  /* plays every time the popup is shown */
  animation: cookie-in 0.7s var(--ease) both;
  flex-direction: column;
}

/* soft glows in the corner */
#cookiePopup::before,
#cookiePopup::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

#cookiePopup::before {
  width: 280px;
  height: 280px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, var(--warm-glow) 0%, transparent 70%);
  opacity: 0.7;
}

#cookiePopup::after {
  width: 220px;
  height: 220px;
  bottom: -150px;
  left: -90px;
  background: radial-gradient(circle, var(--cool-glow) 0%, transparent 70%);
  opacity: 0.6;
}

/* ---------- Text ---------- */
#cookiePopup .cookie_content h4 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--night-ink);
}

/* small warm marker before the title */
#cookiePopup .cookie_content h4::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 0 4px rgba(212, 140, 83, 0.18);
}

#cookiePopup .cookie_content p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--night-muted);
}

#cookiePopup .cookie_content a {
  color: var(--night-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--warm);
  padding-bottom: 1px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

#cookiePopup .cookie_content a:hover,
#cookiePopup .cookie_content a:focus-visible {
  color: var(--warm);
}

/* ---------- Buttons ---------- */
#cookiePopup .cookieBtns {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--night-line);
}

#cookiePopup .cookieBtns button {
  flex: 1 1 0;
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-full);
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

#cookiePopup #acceptCookie {
  background: var(--night-ink);
  color: var(--ink);
  border: 1px solid var(--night-ink);
}

#cookiePopup #acceptCookie:hover {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--night);
  transform: translateY(-1px);
}

#cookiePopup #declineCookie {
  background: transparent;
  color: var(--night-ink);
  border: 1px solid var(--night-line);
}

#cookiePopup #declineCookie:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

#cookiePopup .cookieBtns button:active { transform: translateY(0) scale(0.98); }

#cookiePopup .cookieBtns button:focus-visible,
#cookiePopup .cookie_content a:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
}

/* ---------- Larger screens: compact card bottom-left ---------- */
@media (min-width: 576px) {
  #cookiePopup {
    left: var(--s5);
    right: auto;
    bottom: var(--s5);
    width: calc(100% - var(--s5) * 2);
    padding: var(--s6);
  }

  #cookiePopup .cookieBtns button { flex: 0 0 auto; }
}

/* ---------- Entrance ---------- */
@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cookiePopup { animation: none; }
  #cookiePopup .cookieBtns button { transition: none; }
  #cookiePopup #acceptCookie:hover { transform: none; }
}

/* never print the banner */
@media print {
  #cookiePopup { display: none !important; }
}