/** Shopify CDN: Minification failed

Line 222:0 All "@import" rules must come first
Line 711:0 Unexpected "`"
Line 1148:0 Unexpected "#"
Line 1149:85 Unexpected "`"
Line 1180:11 Unexpected "{"
Line 1180:13 Expected identifier but found "'base.css'"
Line 1184:5 Unexpected "3"
Line 1206:25 Unterminated string token

**/
/* ============================================================
   DECORLOFT — TYPOGRAPHY MASTER FIX
   Fixes Dawn's 62.5% html override + maps all sections
   to the brand foundation type scale
   ============================================================ */

/* ── 1. Kill Dawn's font-size shrink ── */
html {
  font-size: 100% !important;
}

/* ── 2. Section eyebrows — small uppercase labels ── */
[class*="dl-"][class*="eyebrow"],
[class*="dl-"][class*="__eye"],
[class*="dl-section"] .section-eyebrow,
[class*="dl-"][class*="-tag"],
[class*="dl-"][class*="__label"] {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--decorloft-gold) !important;
  line-height: var(--leading-normal) !important;
}

/* ── 3. Section titles — h2 level ── */
[class*="dl-"][class*="__title"],
[class*="dl-"][class*="__heading"],
[class*="dl-"][class*="-title"],
[class*="dl-"][class*="-heading"] {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  /* color omitted — section CSS handles this */
}

/* ── 4. Card / item headings — h3 level ── */
[class*="dl-"][class*="__item-title"],
[class*="dl-"][class*="__card-title"],
[class*="dl-"][class*="__name"],
[class*="dl-col__title"],
[class*="dl-gift__tier-name"],
[class*="dl-bs__name"],
[class*="dl-occ__name"] {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h4) !important;
  font-weight: var(--weight-regular) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
  /* color omitted — section CSS handles this */
}

/* ── 5. Body text / descriptions ── */
[class*="dl-"][class*="__body"],
[class*="dl-"][class*="__desc"],
[class*="dl-"][class*="__copy"],
[class*="dl-"][class*="__text"],
[class*="dl-"][class*="__sub"]:not([class*="eyebrow"]):not([class*="label"]) {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-light) !important;
  line-height: var(--leading-relaxed) !important;
  /* color omitted — section CSS handles this */
}

/* ── 6. Prices ── */
[class*="dl-"][class*="__price"],
[class*="dl-"][class*="__amount"],
[class*="dl-"][class*="price"] {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h4) !important;
  font-weight: var(--weight-regular) !important;
  /* color omitted — section CSS handles this */
  letter-spacing: var(--tracking-tight) !important;
}

/* ── 7. Small metadata — variant, material, category ── */
[class*="dl-"][class*="__variant"],
[class*="dl-"][class*="__meta"],
[class*="dl-"][class*="__material"],
[class*="dl-"][class*="__category"],
[class*="dl-"][class*="__hint"] {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: var(--tracking-wide) !important;
  /* color omitted — section CSS handles this */
}

/* ── 8. Buttons ── */
[class*="dl-"][class*="__cta"],
[class*="dl-"][class*="__btn"]:not([class*="icon"]):not([class*="qty"]):not([class*="close"]) {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
}

/* ── 9. Quotes / testimonials ── */
[class*="dl-"][class*="__quote"],
[class*="dl-test"][class*="quote"],
[class*="dl-"][class*="testimonial"] {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-size: var(--text-h3) !important;
  font-weight: var(--weight-light) !important;
  line-height: var(--leading-snug) !important;
  /* color omitted — section CSS handles this */
}

/* ── 10. FAQ questions ── */
[class*="dl-faq"][class*="__q"],
[class*="dl-"][class*="accordion"][class*="title"],
[class*="dl-"][class*="accordion"][class*="btn"] {
  font-family: var(--font-body) !important;
  font-size: var(--text-large) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--decorloft-text-dark) !important;
}

[class*="dl-faq"][class*="__a"],
[class*="dl-"][class*="accordion"][class*="body"] {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--decorloft-text-medium) !important;
}

/* ── 11. Hero specific ── */
.dl-hero__h1,
[class*="dl-hero"][class*="__h1"],
[class*="dl-hero"][class*="heading"] {
  font-size: var(--text-hero) !important;
}

[class*="dl-hero"][class*="__sub"],
[class*="dl-hero"][class*="italic"] {
  font-size: var(--text-h2) !important;
}

[class*="dl-hero"][class*="__body"],
[class*="dl-hero"][class*="__desc"] {
  font-size: var(--text-large) !important;
}

/* ── 12. Navigation ── */
.dlhdr__nav-link { font-size: 12px !important; letter-spacing: var(--tracking-wider) !important; }
.dlhdr__drop-link { font-size: 12px !important; }
.dldrw__link { font-size: 13px !important; letter-spacing: var(--tracking-wider) !important; }
.dldrw__sub-link { font-size: 12px !important; }
.dlann__msg { font-size: 11px !important; letter-spacing: var(--tracking-widest) !important; }

/* ── 13. Cart ── */
.dlcart__item-name { font-size: var(--text-base) !important; }
.dlcart__item-price { font-size: var(--text-h4) !important; }
.dlcart__item-variant,
.dlcart__unit { font-size: var(--text-xs) !important; }
.dlcart__ship-msg,
.dlcart__cod-desc { font-size: var(--text-small) !important; }
.dlcart__sum-row--total > span:last-child { font-size: var(--text-h3) !important; }

/* ── 14. Trust bar ── */
[class*="dl-trust"][class*="item"],
[class*="dl-trust"][class*="label"] { font-size: var(--text-small) !important; }

/* ── 15. Footer ── */
[class*="dl-s10"][class*="__link"],
[class*="dl-footer"][class*="__link"] { font-size: var(--text-small) !important; }
[class*="dl-s10"][class*="__head"],
[class*="dl-footer"][class*="__head"] {
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-widest) !important;
}

/* ── 16. Section headings on dark backgrounds ── */
[class*="dl-"][class*="dark"] [class*="__title"],
[class*="dl-"][class*="dark"] [class*="__heading"] {
  color: var(--decorloft-white) !important;
}

/* ── 17. Stats / numbers ── */
[class*="dl-"][class*="__stat-val"],
[class*="dl-"][class*="__number"],
[class*="dl-"][class*="__count"] {
  font-family: var(--font-heading) !important;
  font-size: var(--text-display) !important;
  font-weight: var(--weight-light) !important;
  line-height: 1 !important;
  color: var(--decorloft-gold) !important;
}

/* ============================================================
   END TYPOGRAPHY MASTER FIX
   ============================================================ */


/* ============================================================
   DECORLOFT BRAND FOUNDATION
   "Your Home. Your Story."
   Version 1.0
   ============================================================ */

/* -----------------------------------------------------------
   1. GOOGLE FONTS
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* -----------------------------------------------------------
   2. BRAND COLOR SYSTEM
   ----------------------------------------------------------- */
:root {
  /* Primary Backgrounds */
  --decorloft-white:          #FAF8F5;
  --decorloft-cream:          #F0EBE1;
  --decorloft-cream-dark:     #E8DFD0;

  /* Gold — The Decorloft Signature */
  --decorloft-gold:           #C9A96E;
  --decorloft-gold-light:     #E8D5A3;
  --decorloft-gold-dark:      #A8854A;
  --decorloft-gold-subtle:    #F5EDD8;

  /* Accent Colors */
  --decorloft-rose:           #C4907A;
  --decorloft-rose-light:     #E8C5B5;
  --decorloft-sage:           #8A9E88;
  --decorloft-sage-light:     #C5D4C4;

  /* Text Colors */
  --decorloft-text-dark:      #1A1815;
  --decorloft-text-medium:    #6B6057;
  --decorloft-text-light:     #A09890;
  --decorloft-text-gold:      #C9A96E;

  /* Border & Dividers */
  --decorloft-border:         #E8E0D5;
  --decorloft-border-light:   #F0EBE3;

  /* Functional */
  --decorloft-black:          #1A1815;
  --decorloft-white-pure:     #FFFFFF;
  --decorloft-overlay:        rgba(26, 24, 21, 0.45);
  --decorloft-overlay-light:  rgba(26, 24, 21, 0.15);
}

/* -----------------------------------------------------------
   3. TYPOGRAPHY SYSTEM
   ----------------------------------------------------------- */
:root {
  /* Font Families */
  --font-heading:    'Cormorant Garamond', Georgia, serif;
  --font-body:       'Jost', -apple-system, sans-serif;
  --font-accent:     'Cormorant Garamond', Georgia, serif;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Type Scale — Desktop */
  --text-hero:       clamp(3.5rem, 7vw, 7rem);
  --text-display:    clamp(2.5rem, 5vw, 5rem);
  --text-h1:         clamp(2rem, 4vw, 3.5rem);
  --text-h2:         clamp(1.75rem, 3vw, 2.75rem);
  --text-h3:         clamp(1.375rem, 2.5vw, 2rem);
  --text-h4:         clamp(1.125rem, 2vw, 1.5rem);
  --text-large:      1.125rem;
  --text-base:       1rem;
  --text-small:      0.875rem;
  --text-xs:         0.75rem;

  /* Line Heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.2em;
}

/* -----------------------------------------------------------
   4. SPACING & LAYOUT SYSTEM
   ----------------------------------------------------------- */
:root {
  /* Spacing Scale (8px base) */
  --space-1:   0.5rem;    /* 8px  */
  --space-2:   1rem;      /* 16px */
  --space-3:   1.5rem;    /* 24px */
  --space-4:   2rem;      /* 32px */
  --space-5:   2.5rem;    /* 40px */
  --space-6:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-10:  5rem;      /* 80px */
  --space-12:  6rem;      /* 96px */
  --space-16:  8rem;      /* 128px */
  --space-20:  10rem;     /* 160px */
  --space-24:  12rem;     /* 192px */

  /* Section Padding */
  --section-padding-sm:  clamp(3rem, 6vw, 5rem);
  --section-padding-md:  clamp(4rem, 8vw, 7rem);
  --section-padding-lg:  clamp(5rem, 10vw, 10rem);

  /* Container */
  --container-max:       1440px;
  --container-content:   1200px;
  --container-narrow:    800px;
  --container-padding:   clamp(1rem, 5vw, 3rem);

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(26, 24, 21, 0.06),
                 0 1px 2px rgba(26, 24, 21, 0.04);
  --shadow-md:   0 4px 16px rgba(26, 24, 21, 0.08),
                 0 2px 6px rgba(26, 24, 21, 0.04);
  --shadow-lg:   0 12px 40px rgba(26, 24, 21, 0.12),
                 0 4px 12px rgba(26, 24, 21, 0.06);
  --shadow-gold: 0 4px 20px rgba(201, 169, 110, 0.25);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-slower: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -----------------------------------------------------------
   5. GLOBAL BASE OVERRIDES — Dawn Theme Reset
   ----------------------------------------------------------- */

/* Page Background & Base Text */
body {
  background-color: var(--decorloft-white) !important;
  /* color intentionally not set globally — each section controls its own text color */
  font-family: var(--font-body) !important;
  font-weight: var(--weight-regular) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading Global Styles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-medium) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  /* color intentionally not set globally — each section controls its own heading color */
}

h1 { font-size: var(--text-h1) !important; }
h2 { font-size: var(--text-h2) !important; }
h3 { font-size: var(--text-h3) !important; }
h4 { font-size: var(--text-h4) !important; }

/* Paragraph */
p {
  font-family: var(--font-body) !important;
  line-height: var(--leading-relaxed) !important;
  /* color intentionally not set globally — each section controls its own paragraph color */
}

/* Links */
a {
  color: var(--decorloft-text-dark);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--decorloft-gold);
}

/* -----------------------------------------------------------
   6. DECORLOFT BUTTON SYSTEM
   ----------------------------------------------------------- */

/* PRIMARY BUTTON — Gold filled */
.btn-decorloft-primary,
.button--primary,
.shopify-payment-button__button--unbranded {
  background-color: var(--decorloft-gold) !important;
  color: var(--decorloft-white-pure) !important;
  border: 1.5px solid var(--decorloft-gold) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-small) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  padding: 0.875rem 2.5rem !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all var(--transition-base) !important;
  position: relative;
  overflow: hidden;
}

.btn-decorloft-primary:hover,
.button--primary:hover {
  background-color: var(--decorloft-gold-dark) !important;
  border-color: var(--decorloft-gold-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold) !important;
}

/* SECONDARY BUTTON — Ghost/Outline */
.btn-decorloft-secondary,
.button--secondary {
  background-color: transparent !important;
  color: var(--decorloft-text-dark) !important;
  border: 1.5px solid var(--decorloft-text-dark) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-small) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  padding: 0.875rem 2.5rem !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all var(--transition-base) !important;
}

.btn-decorloft-secondary:hover,
.button--secondary:hover {
  background-color: var(--decorloft-text-dark) !important;
  color: var(--decorloft-white) !important;
  transform: translateY(-1px);
}

/* GHOST BUTTON — On dark backgrounds */
.btn-decorloft-ghost {
  background-color: transparent;
  color: var(--decorloft-white-pure);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 0.875rem 2.5rem;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-block;
}

.btn-decorloft-ghost:hover {
  background-color: var(--decorloft-white-pure);
  color: var(--decorloft-text-dark);
  border-color: var(--decorloft-white-pure);
}

/* TEXT LINK BUTTON — Underline style */
.btn-decorloft-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--decorloft-gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--transition-base);
}

.btn-decorloft-link::after {
  content: '→';
  transition: transform var(--transition-base);
}

.btn-decorloft-link:hover {
  gap: 0.75rem;
}

.btn-decorloft-link:hover::after {
  transform: translateX(3px);
}

/* -----------------------------------------------------------
   7. DECORLOFT TYPOGRAPHY UTILITIES
   ----------------------------------------------------------- */

/* Eyebrow text — small label above headings */
.decorloft-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: 0.75rem;
}

/* Display heading — hero sizes */
.decorloft-display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--decorloft-text-dark);
}

/* Serif italic — for quotes and accents */
.decorloft-serif-italic {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-light);
  color: var(--decorloft-gold);
}

/* Body lead — larger body text */
.decorloft-lead {
  font-family: var(--font-body);
  font-size: var(--text-large);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--decorloft-text-medium);
}

/* Divider with text */
.decorloft-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--decorloft-border);
}

.decorloft-divider::before,
.decorloft-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--decorloft-border);
}

/* -----------------------------------------------------------
   8. UTILITY CLASSES
   ----------------------------------------------------------- */

/* Background utilities */
.bg-decorloft-white   { background-color: var(--decorloft-white); }
.bg-decorloft-cream   { background-color: var(--decorloft-cream); }
.bg-decorloft-gold    { background-color: var(--decorloft-gold); }
.bg-decorloft-dark    { background-color: var(--decorloft-text-dark); }

/* Text utilities */
.text-gold    { color: var(--decorloft-gold); }
.text-dark    { color: var(--decorloft-text-dark); }
.text-medium  { color: var(--decorloft-text-medium); }
.text-light   { color: var(--decorloft-text-light); }
.text-white   { color: var(--decorloft-white-pure); }

/* Layout utilities */
.decorloft-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.decorloft-container--content {
  max-width: var(--container-content);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.decorloft-container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Section spacing */
.decorloft-section {
  padding: var(--section-padding-md) 0;
}

.decorloft-section--sm {
  padding: var(--section-padding-sm) 0;
}

.decorloft-section--lg {
  padding: var(--section-padding-lg) 0;
}

/* Gold accent line — decorative */
.decorloft-gold-line {
  width: 48px;
  height: 1.5px;
  background-color: var(--decorloft-gold);
  display: block;
  margin: var(--space-3) 0;
}

.decorloft-gold-line--center {
  margin: var(--space-3) auto;
}

/* -----------------------------------------------------------
   9. DAWN THEME OVERRIDES — Clean Up Defaults
   ----------------------------------------------------------- */

/* Remove Dawn's default blue focus rings */
:focus-visible {
  outline: 2px solid var(--decorloft-gold);
  outline-offset: 3px;
}

/* Dawn color scheme variables — not overridden. Each section sets its own background. */

/* Clean input fields */
input, textarea, select {
  font-family: var(--font-body) !important;
  border-color: var(--decorloft-border) !important;
  border-radius: 0 !important;
  color: var(--decorloft-text-dark) !important;
  background-color: var(--decorloft-white-pure) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--decorloft-gold) !important;
  box-shadow: 0 0 0 2px var(--decorloft-gold-subtle) !important;
}

/* Remove Dawn's rounded corners from cards */
.card,
.card-wrapper {
  border-radius: 0 !important;
}

/* Image rendering quality */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* -----------------------------------------------------------
   10. SCROLLBAR STYLING
   ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--decorloft-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--decorloft-gold);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--decorloft-gold-dark);
}

/* -----------------------------------------------------------
   11. SELECTION COLOR
   ----------------------------------------------------------- */
::selection {
  background-color: var(--decorloft-gold-light);
  color: var(--decorloft-text-dark);
}

/* -----------------------------------------------------------
   12. SMOOTH SCROLL
   ----------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* -----------------------------------------------------------
   END DECORLOFT BRAND FOUNDATION v1.0
   ----------------------------------------------------------- */
```
/* ============================================================
   DECORLOFT BASE.CSS PATCH v1.1
   Paste this BELOW the existing DECORLOFT BRAND FOUNDATION block
   (after the END DECORLOFT BRAND FOUNDATION comment)
   and ABOVE Dawn's native code.
   ============================================================ */

/* -----------------------------------------------------------
   FIX 1 — FOOTER COLUMN HEADINGS INVISIBLE ON DARK BACKGROUND
   Root cause: Dawn .footer__heading inherits --color-foreground
   (#1A1815 dark) which disappears against the dark footer bg.
   ----------------------------------------------------------- */

.footer,
.footer-section,
[class*="footer"] {
  --color-foreground: 250, 248, 245; /* override Dawn's foreground token to light */
}

.footer__heading {
  color: rgba(250, 248, 245, 0.95) !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* Footer navigation links */
.footer__list-item a,
.footer-block__details a,
.footer a,
.footer__list a {
  color: rgba(250, 248, 245, 0.55) !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 300 !important;
  transition: color 0.2s ease !important;
}
.footer__list-item a:hover,
.footer-block__details a:hover,
.footer a:hover {
  color: var(--decorloft-gold) !important;
}

/* Footer tagline / description text */
.footer__content-top p,
.footer__content-bottom p,
.footer-block p,
.footer p {
  color: rgba(250, 248, 245, 0.45) !important;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
}

/* Footer bottom bar — copyright + policy links */
.footer__copyright,
.footer__copyright * {
  color: rgba(250, 248, 245, 0.35) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 300 !important;
}
.footer__copyright a {
  color: rgba(250, 248, 245, 0.35) !important;
}
.footer__copyright a:hover {
  color: rgba(250, 248, 245, 0.7) !important;
}

/* Footer social icons */
.footer__icon svg,
.list-social__link svg {
  fill: rgba(250, 248, 245, 0.5) !important;
}
.footer__icon:hover svg,
.list-social__link:hover svg {
  fill: var(--decorloft-gold) !important;
}

/* -----------------------------------------------------------
   FIX 2 — DARK-SECTION TEXT CONTRAST
   Any section with a dark background colour scheme needs
   white body text. Dawn's colour scheme 2 (dark) doesn't
   automatically flip all custom text to light.
   ----------------------------------------------------------- */

/* Newsletter / email signup section on dark background */
.email-signup,
.newsletter,
[class*="newsletter"],
.section--newsletter,
.color-scheme-2 p,
.color-scheme-2 li,
.color-scheme-2 span:not([class*="icon"]),
.color-scheme-2 label {
  color: rgba(250, 248, 245, 0.7) !important;
}

/* Headings inside dark colour scheme sections */
.color-scheme-2 h1,
.color-scheme-2 h2,
.color-scheme-2 h3,
.color-scheme-2 h4,
.color-scheme-2 .title,
.color-scheme-2 [class*="heading"] {
  color: rgba(250, 248, 245, 0.95) !important;
}

/* Email input field inside dark section */
.color-scheme-2 input[type="email"],
.color-scheme-2 .field__input {
  background-color: rgba(250, 248, 245, 0.95) !important;
  color: var(--decorloft-text-dark) !important;
  border-color: rgba(250, 248, 245, 0.2) !important;
}

/* Any custom sections that use our dark token directly */
[style*="background-color: #1A1815"] p,
[style*="background-color: #0F0E0C"] p,
.bg-decorloft-dark p,
.bg-decorloft-dark span,
.bg-decorloft-dark li {
  color: rgba(250, 248, 245, 0.7) !important;
}

/* -----------------------------------------------------------
   FIX 3 — PRODUCT CARD GRID SYMMETRY
   Root cause: No enforced aspect ratio on .card__media so
   tall/portrait product images blow up individual card heights.
   Fix: Force uniform 1:1 square images + equal-height card layout.
   ----------------------------------------------------------- */

/* Force the product grid to use start alignment so cards don't
   stretch to match their tallest neighbour */
.product-grid,
ul.product-grid,
.collection__products,
.featured-collection .grid {
  align-items: start !important;
}

/* Each card wrapper fills its grid cell uniformly */
.card-wrapper {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The card itself fills the wrapper */
.card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* CRITICAL: Lock image container to square aspect ratio.
   This is the primary fix for the asymmetric product cards.
   All product images will be cropped to 1:1 with object-fit: cover. */
.card__media,
.card .media,
.card-article-info ~ .media,
.product-card__image-wrapper {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.card__media img,
.card .media img,
.card__media .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Card content area fills remaining space so all info blocks align */
.card__content,
.card__information,
.card-information {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.25rem 0 !important;
}

/* Product title styling */
.card__heading,
.card__heading a,
.card-information__title,
.card-information .h3 {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  color: var(--decorloft-text-dark) !important;
  line-height: 1.35 !important;
  margin-bottom: 0.4rem !important;
  text-decoration: none !important;
}

/* Price display — ensure visibility and correct spacing */
.price,
.price__container,
.price-item,
.price-item--regular {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--decorloft-text-medium) !important;
  letter-spacing: 0.04em !important;
}

.price--sold-out .price__badge-sold-out,
.badge--sold-out {
  background-color: var(--decorloft-text-dark) !important;
  color: var(--decorloft-white) !important;
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

/* Product badge (MOST GIFTED / STATEMENT PIECE / NEW ARRIVAL) */
.card__badge,
.product-badge,
[class*="card-badge"] {
  font-family: var(--font-body) !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background-color: var(--decorloft-text-dark) !important;
  color: rgba(250, 248, 245, 0.9) !important;
  border-radius: 0 !important;
  padding: 0.35rem 0.75rem !important;
}

/* Add to Cart button on product cards */
.card__footer .button,
.card .button--primary,
.quick-add__submit {
  background-color: var(--decorloft-gold) !important;
  color: var(--decorloft-text-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.5rem !important;
  transition: background-color 0.25s ease !important;
}
.card__footer .button:hover,
.card .button--primary:hover,
.quick-add__submit:hover {
  background-color: var(--decorloft-gold-dark) !important;
}

/* -----------------------------------------------------------
   FIX 4 — GIFT BOX PRICES BARELY VISIBLE ON DARK CARDS
   The price text on dark gift box card backgrounds needs to be
   brighter — currently inheriting a muted colour.
   ----------------------------------------------------------- */

/* Gift box / custom section prices on dark backgrounds */
.color-scheme-2 .price,
.color-scheme-2 .price__container,
.color-scheme-2 [class*="price"],
.color-scheme-2 .amount,
[data-section-type*="gift"] .price,
[class*="gift-box"] .price {
  color: rgba(250, 248, 245, 0.85) !important;
}

/* Large display prices (like AED 150 in gift box cards) */
.color-scheme-2 .price--large,
.color-scheme-2 .price-large,
.color-scheme-2 h3.price,
.color-scheme-2 .gift-price {
  color: var(--decorloft-gold-light) !important;
  font-family: var(--font-heading) !important;
  font-weight: 300 !important;
}

/* -----------------------------------------------------------
   FIX 5 — CALENDAR SECTION IMAGE CARD — TEXT VISIBILITY
   The featured image card (centre of bottom row) needs a dark
   overlay gradient so any text placed over it remains readable.
   ----------------------------------------------------------- */

/* Any card that has both a background image and text children
   needs a dark scrim to preserve readability */
.card--media .card__inner,
.card--image-with-text .card__inner,
[class*="calendar"] .card__media + .card__content,
[class*="occasion"] .card--image .card__information {
  background: linear-gradient(
    to top,
    rgba(15, 14, 12, 0.85) 0%,
    rgba(15, 14, 12, 0.4) 50%,
    transparent 100%
  ) !important;
}

/* Ensure overlay text on image cards is white */
.card--media .card__heading,
.card--media .card__heading a,
.card--image-with-text h3,
.card--image-with-text p {
  color: rgba(250, 248, 245, 0.95) !important;
}

/* -----------------------------------------------------------
   FIX 6 — GENERAL DARK SECTION OVERRIDES
   Catch-all for any Decorloft custom sections using dark
   backgrounds where Dawn does not automatically flip text.
   ----------------------------------------------------------- */

/* Any element using our dark background variables */
.bg-decorloft-dark,
.bg-decorloft-dark * {
  --color-foreground: 250, 248, 245;
}

/* Ensure headings in dark custom sections are always light */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark p {
  color: rgba(250, 248, 245, 0.85);
}

/* -----------------------------------------------------------
   FIX 7 — SECTION HEADING VISIBILITY (GLOBAL DARK SECTIONS)
   Any h2/h3 inside a dark colour-scheme section that Dawn
   renders dark-on-dark.
   ----------------------------------------------------------- */

.color-scheme-2 .section__title,
.color-scheme-2 .title--primary,
.color-scheme-2 .section-heading,
.color-scheme-2 h2,
.color-scheme-2 h3,
.color-scheme-2 .h2,
.color-scheme-2 .h3 {
  color: rgba(250, 248, 245, 0.95) !important;
}

/* Eyebrow / subtitle text in dark sections */
.color-scheme-2 .subtitle,
.color-scheme-2 .section__description,
.color-scheme-2 .caption {
  color: rgba(250, 248, 245, 0.6) !important;
}

/* -----------------------------------------------------------
   FIX 8 — ANNOUNCEMENT BAR VISIBILITY
   The announcement bar text needs to be visible against
   the dark bar background.
   ----------------------------------------------------------- */

.announcement-bar,
.announcement-bar__message,
.announcement-bar p,
.announcement-bar a {
  color: rgba(250, 248, 245, 0.9) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
}

.announcement-bar {
  background-color: var(--decorloft-text-dark) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.2) !important;
}

/* -----------------------------------------------------------
   FIX 9 — HEADER / NAV LINK VISIBILITY
   Nav links should be clearly readable at all scroll states.
   ----------------------------------------------------------- */

.header__menu-item a,
.header__menu-item .header__menu-item--link,
.list-menu__item--link {
  color: var(--decorloft-text-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.header__menu-item a:hover,
.list-menu__item--link:hover {
  color: var(--decorloft-gold) !important;
}

/* Header on dark/transparent background (hero overlay state) */
.header--transparent .header__menu-item a,
.header--transparent .header__menu-item--link {
  color: rgba(250, 248, 245, 0.85) !important;
}
.header--transparent .header__menu-item a:hover {
  color: var(--decorloft-gold-light) !important;
}

/* -----------------------------------------------------------
   FIX 10 — CURRENCY FORMAT VISUAL PATCH
   "AED25" → Adds a hair-space between currency symbol and amount.
   NOTE: The permanent fix is in Shopify Admin:
   Settings → Store Details → Store currency → Edit formatting
   Set HTML with currency to:  AED {{ amount }}
   Set HTML without currency to: AED {{ amount }}
   This CSS provides a visual fallback until that is done.
   ----------------------------------------------------------- */

.money {
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* -----------------------------------------------------------
   END DECORLOFT BASE.CSS PATCH v1.1
   ----------------------------------------------------------- */
---

### FILE 3 — Dawn Theme Settings Override
**Where:** Shopify Admin → Online Store → Themes → Customize → Click the `{ }` icon

**In the Theme Settings panel:**
```
COLORS:
Color scheme 1 background → #FAF8F5
Color scheme 1 text → #1A1815
Color scheme 1 button background → #C9A96E
Color scheme 1 button label → #FFFFFF
Color scheme 1 secondary button → #1A1815

TYPOGRAPHY:
Heading font → Select "Cormorant Garamond"
Body font → Select "Jost"

LAYOUT:
Page width → 1440px
Content width → 75ch
Spacing → 100px (sections)
```

---

## How To Apply This — Step By Step
```
STEP 1 — Open Shopify Admin
→ Online Store → Themes
→ Click "Edit Code" on Dawn theme

STEP 2 — Add Google Fonts (5 minutes)
→ Open: layout/theme.liquid
→ Find: {{ 'base.css' | asset_url | stylesheet_tag }}
→ Paste the font import ABOVE that line
→ Save

STEP 3 — Add Brand CSS (10 minutes)
→ Open: assets/base.css
→ Go to the very top of the file
→ Paste the entire CSS block as line 1
→ Save

STEP 4 — Theme Editor Settings (5 minutes)
→ Online Store → Themes → Customize
→ Apply the color and typography settings above
→ Save

STEP 5 — Verify (2 minutes)
→ Preview your theme
→ Open browser DevTools (F12)
→ In Console type: getComputedStyle(document.body)
        .getPropertyValue('--decorloft-gold')
→ Should return: #C9A96E
→ If it does — foundation is live ✓
```

---

## What You've Just Built
```
✅ Complete color system — 18 brand colors
   all accessible via CSS variables

✅ Typography pairing installed
   Cormorant Garamond (headings) +
   Jost (body) — loaded from Google Fonts

✅ Spacing scale — 12 consistent spacing values
   based on 8px grid

✅ Button system — 4 button styles
   Primary / Secondary / Ghost / Link

✅ Typography utilities — eyebrow, display,
   italic accent, lead text

✅ Dawn overrides — removed rounded corners,
   fixed focus rings, cleaned inputs

✅ Brand polish — custom scrollbar,
   selection color, smooth scroll
/* ============================================================
   DECORLOFT HEADER & NAVIGATION
   Version 1.0
   ============================================================ */

/* -----------------------------------------------------------
   ANNOUNCEMENT BAR
   ----------------------------------------------------------- */
.announcement-bar {
  background-color: var(--decorloft-text-dark) !important;
  min-height: 3.6rem !important;
}

.announcement-bar__message {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--decorloft-gold) !important;
  padding: 0.8rem 0 !important;
}

.announcement-bar__link:hover .announcement-bar__message {
  color: var(--decorloft-gold-light) !important;
}

/* -----------------------------------------------------------
   HEADER WRAPPER
   ----------------------------------------------------------- */
.header-wrapper {
  background-color: var(--decorloft-white) !important;
  border-bottom: 1px solid var(--decorloft-border) !important;
  transition: box-shadow var(--transition-base) !important;
}

/* Subtle shadow when sticky + scrolled */
.shopify-section-header-sticky .header-wrapper {
  box-shadow: 0 2px 20px rgba(26, 24, 21, 0.06) !important;
}

/* -----------------------------------------------------------
   LOGO — Text version (until image uploaded)
   ----------------------------------------------------------- */
.header__heading-link .h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--decorloft-text-dark) !important;
}

.header__heading-link:hover .h2 {
  color: var(--decorloft-gold) !important;
}

/* Logo image sizing */
.header__heading-logo {
  max-height: 44px !important;
  width: auto !important;
}

/* -----------------------------------------------------------
   NAVIGATION LINKS
   ----------------------------------------------------------- */
.header__menu-item {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color: var(--decorloft-text-medium) !important;
  padding: 1rem 1.25rem !important;
  transition: color var(--transition-base) !important;
  position: relative;
}

/* Remove Dawn's default underline on hover */
.header__menu-item:hover span {
  text-decoration: none !important;
}

/* Gold underline slide-in on hover */
.header__menu-item span {
  position: relative;
}

.header__menu-item span::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--decorloft-gold);
  transition: width var(--transition-base);
}

.header__menu-item:hover span::after,
details[open] > .header__menu-item span::after {
  width: 100%;
}

.header__menu-item:hover {
  color: var(--decorloft-text-dark) !important;
}

/* Active nav item */
.header__active-menu-item {
  color: var(--decorloft-text-dark) !important;
  text-decoration: none !important;
}

/* -----------------------------------------------------------
   DROPDOWN MENU
   ----------------------------------------------------------- */
.header__submenu.global-settings-popup {
  background-color: var(--decorloft-white) !important;
  border: 1px solid var(--decorloft-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-lg) !important;
  min-width: 220px !important;
  padding: 0.75rem 0 !important;
}

.header__submenu .header__menu-item {
  font-size: 0.75rem !important;
  letter-spacing: var(--tracking-wide) !important;
  padding: 0.75rem 1.75rem !important;
  color: var(--decorloft-text-medium) !important;
  transition: all var(--transition-fast) !important;
}

.header__submenu .header__menu-item:hover {
  color: var(--decorloft-gold) !important;
  padding-left: 2.25rem !important;
  background-color: transparent !important;
}

/* Gold dot before dropdown items */
.header__submenu .header__menu-item::before {
  content: '◆';
  font-size: 0.35rem;
  color: var(--decorloft-gold);
  margin-right: 0.6rem;
  vertical-align: middle;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.header__submenu .header__menu-item:hover::before {
  opacity: 1;
}

/* -----------------------------------------------------------
   HEADER ICONS (Search, Cart, Account)
   ----------------------------------------------------------- */
.header__icon {
  color: var(--decorloft-text-dark) !important;
  transition: color var(--transition-base) !important;
}

.header__icon:hover {
  color: var(--decorloft-gold) !important;
}

.header__icon .icon {
  width: 1.8rem !important;
  height: 1.8rem !important;
}

/* Cart bubble */
.cart-count-bubble {
  background-color: var(--decorloft-gold) !important;
  color: var(--decorloft-white-pure) !important;
  font-family: var(--font-body) !important;
  font-size: 0.6rem !important;
  font-weight: var(--weight-medium) !important;
}

/* -----------------------------------------------------------
   MOBILE HEADER
   ----------------------------------------------------------- */
@media screen and (max-width: 989px) {
  .header-wrapper {
    padding: 0 !important;
  }

  .header__heading-link .h2 {
    font-size: 1.3rem !important;
    letter-spacing: 0.2em !important;
  }
}

/* -----------------------------------------------------------
   MOBILE MENU DRAWER
   ----------------------------------------------------------- */
.menu-drawer {
  background-color: var(--decorloft-white) !important;
}

.menu-drawer__navigation .header__menu-item {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color: var(--decorloft-text-dark) !important;
  border-bottom: 1px solid var(--decorloft-border) !important;
  padding: 1.25rem 0 !important;
}

/* -----------------------------------------------------------
   END DECORLOFT HEADER v1.0
   ----------------------------------------------------------- */
/* ============================================================
   DECORLOFT — S1 HERO BANNER CSS
   Paste this at the BOTTOM of assets/base.css
   (after the END DECORLOFT HEADER comment)
   ============================================================ */

/* ── Layout ───────────────────────────────────────────────── */
.dl-hero {
  display: grid;
  grid-template-columns: 52fr 48fr;
  min-height: calc(100vh - 113px); /* full screen minus header + bar */
  overflow: hidden;
}

/* ── LEFT PANEL ───────────────────────────────────────────── */
.dl-hero__left {
  background-color: var(--decorloft-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 5vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

/* Radial glow top-left */
.dl-hero__left-glow {
  position: absolute;
  top: -30%;
  left: -10%;
  width: 70%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(201,169,110,.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ── BADGE ──────────────────────────────────────────────────*/
.dl-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 2.2rem;
  opacity: 0;
  animation: dlSlideUp .8s .1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.dl-hero__badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--decorloft-gold);
  flex-shrink: 0;
}

.dl-hero__badge-txt {
  font-family: var(--font-body);
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
}

/* ── HEADLINE ───────────────────────────────────────────────*/
.dl-hero__h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(3.8rem, 7vw, 7.2rem) !important;
  font-weight: 300 !important;
  line-height: .95 !important;
  color: var(--decorloft-white) !important;
  letter-spacing: -.02em !important;
  margin: 0 0 .2em !important;
  opacity: 0;
  animation: dlSlideUp .9s .25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* The italic "Your" word — wrap in <em> in customizer if desired */
.dl-hero__h1 em {
  font-style: italic;
  color: var(--decorloft-gold-light);
}

/* ── SUB-HEADLINE ───────────────────────────────────────────*/
.dl-hero__h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.6rem, 3vw, 3rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(250,247,242,.35) !important;
  letter-spacing: -.01em !important;
  margin: 0 0 2.6rem !important;
  line-height: 1.1 !important;
  opacity: 0;
  animation: dlSlideUp .9s .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── BODY COPY ──────────────────────────────────────────────*/
.dl-hero__copy {
  max-width: 390px;
  font-size: .96rem !important;
  color: rgba(250,247,242,.48) !important;
  line-height: 1.9 !important;
  margin: 0 0 3rem !important;
  opacity: 0;
  animation: dlSlideUp .9s .55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── CTA BUTTONS ────────────────────────────────────────────*/
.dl-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: dlSlideUp .9s .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.dl-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  padding: .9rem 2.2rem;
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
}

.dl-hero__btn svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.dl-hero__btn:hover svg {
  transform: translateX(3px);
}

/* Gold filled */
.dl-hero__btn--gold {
  background: var(--decorloft-gold);
  color: #fff !important;
  border: 1.5px solid var(--decorloft-gold);
}

.dl-hero__btn--gold:hover {
  background: var(--decorloft-gold-dark);
  border-color: var(--decorloft-gold-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
  color: #fff !important;
}

/* Ghost on dark */
.dl-hero__btn--ghost {
  background: transparent;
  color: var(--decorloft-white) !important;
  border: 1px solid rgba(250,247,242,.3);
}

.dl-hero__btn--ghost:hover {
  border-color: rgba(250,247,242,.65);
  background: rgba(250,247,242,.06);
  color: var(--decorloft-white) !important;
}

/* ── SCROLL HINT ────────────────────────────────────────────*/
.dl-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: clamp(2.5rem, 5vw, 5.5rem);
  display: flex;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  animation: dlFadeIn 1s 1.2s forwards;
}

.dl-hero__scroll-line {
  display: block;
  width: 30px;
  height: 1px;
  background: rgba(250,247,242,.18);
}

.dl-hero__scroll-txt {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250,247,242,.28);
  font-family: var(--font-body);
}

/* ── RIGHT PANEL ────────────────────────────────────────────*/
.dl-hero__right {
  background-color: #F2EDE4;
  position: relative;
  overflow: hidden;
}

.dl-hero__right-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(201,169,110,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(138,158,136,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgba(196,144,122,.09) 0%, transparent 45%);
}

.dl-hero__right-grid {
  position: absolute;
  inset: 0;
  opacity: .04;
  background-image:
    linear-gradient(var(--decorloft-black) 1px, transparent 1px),
    linear-gradient(90deg, var(--decorloft-black) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── STATS CHIPS ────────────────────────────────────────────*/
.dl-hero__chips {
  position: absolute;
  top: 2.5rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  z-index: 2;
  opacity: 0;
  animation: dlFadeIn 1s .9s forwards;
}

.dl-hero__chip {
  background: #fff;
  border-radius: 8px;
  padding: .65rem 1rem;
  box-shadow: var(--shadow-md);
  text-align: center;
  min-width: 110px;
}

.dl-hero__chip-num {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  line-height: 1;
}

.dl-hero__chip-txt {
  font-family: var(--font-body);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--decorloft-text-light);
  margin-top: 2px;
}

/* ── DECORATIVE RINGS ───────────────────────────────────────*/
.dl-hero__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: dlFadeIn 1.2s .6s forwards;
}

.dl-hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
}

.dl-hero__ring--1 {
  position: absolute;
  inset: 0;
  border-color: rgba(201,169,110,.22);
  animation: dlSpin 22s linear infinite;
}

.dl-hero__ring--2 {
  position: absolute;
  inset: 34px;
  border-color: rgba(201,169,110,.11);
  animation: dlSpinR 34s linear infinite;
}

.dl-hero__ring--3 {
  position: absolute;
  inset: 68px;
  border-color: rgba(201,169,110,.07);
}

/* Orbiting dot on ring 1 */
.dl-hero__ring-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--decorloft-gold);
  border-radius: 50%;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
}

/* Central icon */
.dl-hero__ring-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  color: var(--decorloft-gold);
  filter: drop-shadow(0 6px 18px rgba(201,169,110,.35));
}

/* ── FLOATING PRODUCT CARD ──────────────────────────────────*/
.dl-hero__card {
  position: absolute;
  bottom: 2.5rem;
  left: 2rem;
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 16px 48px rgba(26,24,21,.12), 0 4px 12px rgba(26,24,21,.06);
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 230px;
  z-index: 2;
  opacity: 0;
  animation: dlSlideUp 1s 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.dl-hero__card-icon {
  width: 44px;
  height: 44px;
  background: var(--decorloft-gold-subtle);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dl-hero__card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--decorloft-gold-dark);
}

.dl-hero__card-lbl {
  font-family: var(--font-body);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--decorloft-text-light);
  margin-bottom: 2px;
}

.dl-hero__card-name {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  line-height: 1.3;
}

.dl-hero__card-price {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold-dark);
  margin-top: 1px;
}

.dl-hero__card-link {
  margin-left: auto;
  width: 32px;
  height: 32px;
  background: var(--decorloft-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base), transform var(--transition-base);
  color: #fff;
  text-decoration: none;
}

.dl-hero__card-link:hover {
  background: var(--decorloft-gold-dark);
  transform: scale(1.08);
  color: #fff;
}

.dl-hero__card-link svg {
  width: 14px;
  height: 14px;
}

/* ── KEYFRAMES ───────────────────────────────────────────────*/
@keyframes dlSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dlSpin {
  to { transform: rotate(360deg); }
}

@keyframes dlSpinR {
  to { transform: rotate(-360deg); }
}

/* ── MOBILE ──────────────────────────────────────────────────*/
@media screen and (max-width: 989px) {
  .dl-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: unset;
  }

  .dl-hero__left {
    padding: 3.5rem 1.5rem 3rem;
    order: 1;
  }

  .dl-hero__h1 {
    font-size: clamp(3.2rem, 12vw, 5rem) !important;
  }

  .dl-hero__scroll {
    display: none;
  }

  .dl-hero__right {
    order: 2;
    min-height: 380px;
  }

  .dl-hero__chips {
    flex-direction: row;
    top: 1.2rem;
    right: 1.2rem;
    gap: .5rem;
  }

  .dl-hero__chip {
    min-width: 90px;
    padding: .5rem .75rem;
  }

  .dl-hero__rings {
    width: 220px;
    height: 220px;
  }

  .dl-hero__card {
    bottom: 1.2rem;
    left: 1.2rem;
    min-width: 200px;
    padding: .8rem 1rem;
  }
}

@media screen and (max-width: 600px) {
  .dl-hero__card {
    display: none; /* hidden on very small screens for clean layout */
  }

  .dl-hero__right {
    min-height: 300px;
  }
}

/* ============================================================
   END DECORLOFT HERO CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S2 TRUST STRIP CSS
   Paste this at the BOTTOM of assets/base.css
   (after the END DECORLOFT HERO CSS comment)
   ============================================================ */

.dl-trust {
  background-color: var(--decorloft-black);
  border-bottom: 1px solid rgba(201,169,110,.1);
  padding: 1.6rem var(--container-padding);
}

.dl-trust__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ── Each item ──────────────────────────────────────────── */
.dl-trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
}

/* ── Icon circle ────────────────────────────────────────── */
.dl-trust__ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(201,169,110,.08);
  border: 1px solid rgba(201,169,110,.16);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.dl-trust__item:hover .dl-trust__ico {
  background: rgba(201,169,110,.16);
  border-color: rgba(201,169,110,.35);
}

.dl-trust__ico svg {
  width: 17px;
  height: 17px;
  color: var(--decorloft-gold-light);
}

/* ── Text ───────────────────────────────────────────────── */
.dl-trust__title {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-white);
  margin-bottom: 2px;
}

.dl-trust__sub {
  font-family: var(--font-body);
  font-size: .64rem;
  color: rgba(250,247,242,.38);
  letter-spacing: .04em;
}

/* ── Dividers between items ─────────────────────────────── */
.dl-trust__item + .dl-trust__item {
  border-left: 1px solid rgba(201,169,110,.08);
  padding-left: 1.5rem;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-trust__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .dl-trust__item + .dl-trust__item {
    border-left: none;
    padding-left: 0;
  }

  .dl-trust__item:nth-child(odd) {
    border-right: 1px solid rgba(201,169,110,.08);
    padding-right: 1.2rem;
  }

  .dl-trust__item:nth-child(3),
  .dl-trust__item:nth-child(4) {
    border-top: 1px solid rgba(201,169,110,.08);
    padding-top: 1.2rem;
  }
}

@media screen and (max-width: 480px) {
  .dl-trust__inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dl-trust__item:nth-child(odd) {
    border-right: none;
    padding-right: 0;
  }

  .dl-trust__item:nth-child(3),
  .dl-trust__item:nth-child(4) {
    border-top: 1px solid rgba(201,169,110,.08);
    padding-top: 1rem;
  }

  .dl-trust__item {
    justify-content: flex-start;
  }
}

/* ============================================================
   END DECORLOFT TRUST STRIP CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S3 COLLECTIONS GRID CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT TRUST STRIP CSS)
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────── */
.dl-col {
  background-color: var(--decorloft-white);
  padding: var(--section-padding-lg) var(--container-padding);
}

.dl-col__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────── */
.dl-col__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.dl-col__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-col__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  margin: 0 0 .8rem !important;
  letter-spacing: -.01em !important;
}

.dl-col__sub {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  color: var(--decorloft-text-medium) !important;
  max-width: 480px;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* ── Grid — asymmetric editorial layout ─────────────────── */
/*
  Desktop layout:
  [ Card 1 — tall, spans 2 rows ] [ Card 2 ] [ Card 3 ]
                                  [ Card 4 ] [ Card 5 ]
*/
.dl-col__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

/* Card 1 spans 2 rows — the hero collection card */
.dl-col__card:first-child {
  grid-row: span 2;
}

/* ── Base card styles ───────────────────────────────────── */
.dl-col__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.8rem;
  min-height: 240px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  cursor: pointer;
  /* Prevent any child from overflowing the card */
  contain: layout;
}

.dl-col__card:first-child {
  min-height: 500px;
  padding: 2.5rem 2rem;
}

.dl-col__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

/* ── Color themes per card ──────────────────────────────── */

/* Card 1 — warm ivory / gold accent */
.cc-light {
  background-color: #F5EFE5;
  border: 1px solid var(--decorloft-border);
}

.cc-light .dl-col__num    { color: var(--decorloft-gold); }
.cc-light .dl-col__name   { color: var(--decorloft-black); }
.cc-light .dl-col__desc   { color: var(--decorloft-text-medium); }
.cc-light .dl-col__link   { color: var(--decorloft-gold-dark); }
.cc-light .dl-col__deco   { color: var(--decorloft-gold); opacity: .25; }

/* Card 2 — deep charcoal */
.cc-dark {
  background-color: var(--decorloft-black);
}

.cc-dark .dl-col__num    { color: var(--decorloft-gold); }
.cc-dark .dl-col__name   { color: var(--decorloft-white); }
.cc-dark .dl-col__desc   { color: rgba(250,247,242,.45); }
.cc-dark .dl-col__link   { color: var(--decorloft-gold-light); }
.cc-dark .dl-col__deco   { color: var(--decorloft-gold); opacity: .15; }

/* Card 3 — dusty rose */
.cc-rose {
  background-color: #EDD8CF;
}

.cc-rose .dl-col__num    { color: var(--decorloft-rose); }
.cc-rose .dl-col__name   { color: var(--decorloft-black); }
.cc-rose .dl-col__desc   { color: var(--decorloft-text-medium); }
.cc-rose .dl-col__link   { color: var(--decorloft-rose); }
.cc-rose .dl-col__deco   { color: var(--decorloft-rose); opacity: .2; }

/* Card 4 — sage green */
.cc-sage {
  background-color: #D4DED3;
}

.cc-sage .dl-col__num    { color: var(--decorloft-sage); }
.cc-sage .dl-col__name   { color: var(--decorloft-black); }
.cc-sage .dl-col__desc   { color: var(--decorloft-text-medium); }
.cc-sage .dl-col__link   { color: #5a7558; }
.cc-sage .dl-col__deco   { color: var(--decorloft-sage); opacity: .25; }

/* Card 5 — near-black / gift card */
.cc-black {
  background-color: #2A2622;
}

.cc-black .dl-col__num    { color: var(--decorloft-gold); }
.cc-black .dl-col__name   { color: var(--decorloft-white); }
.cc-black .dl-col__desc   { color: rgba(250,247,242,.42); }
.cc-black .dl-col__link   { color: var(--decorloft-gold-light); }
.cc-black .dl-col__deco   { color: var(--decorloft-gold); opacity: .15; }

/* ── Decorative icon (top-right corner) ─────────────────── */
.dl-col__deco {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 64px;
  height: 64px;
  transition: opacity var(--transition-base), transform var(--transition-slow);
}

.dl-col__deco svg {
  width: 64px;
  height: 64px;
  max-width: 64px;
  max-height: 64px;
  display: block;
}

.dl-col__card:first-child .dl-col__deco {
  width: 88px;
  height: 88px;
  top: 2rem;
  right: 2rem;
}

.dl-col__card:first-child .dl-col__deco svg {
  width: 88px;
  height: 88px;
  max-width: 88px;
  max-height: 88px;
}

.dl-col__card:hover .dl-col__deco {
  opacity: 0.4 !important;
  transform: scale(1.08) rotate(5deg);
}

/* ── Card body text ─────────────────────────────────────── */
.dl-col__body {
  position: relative;
  z-index: 1;
}

.dl-col__num {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  display: block;
  margin-bottom: .5rem;
}

.dl-col__name {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important;
  font-weight: var(--weight-light) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 .6rem !important;
}

.dl-col__card:first-child .dl-col__name {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
}

.dl-col__desc {
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  line-height: 1.65 !important;
  margin: 0 0 1.2rem !important;
  max-width: 240px;
}

.dl-col__card:first-child .dl-col__desc {
  font-size: .86rem !important;
  max-width: 300px;
}

/* ── Explore link ───────────────────────────────────────── */
.dl-col__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  transition: gap var(--transition-base);
}

.dl-col__link svg {
  transition: transform var(--transition-base);
}

.dl-col__card:hover .dl-col__link {
  gap: .65rem;
}

.dl-col__card:hover .dl-col__link svg {
  transform: translateX(3px);
}

/* ── Tablet (2 column) ──────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-col__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .dl-col__card:first-child {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 300px;
  }
}

/* ── Mobile (1 column) ──────────────────────────────────── */
@media screen and (max-width: 600px) {
  .dl-col {
    padding: var(--section-padding-md) var(--container-padding);
  }

  .dl-col__grid {
    grid-template-columns: 1fr;
  }

  .dl-col__card:first-child {
    grid-column: span 1;
    min-height: 260px;
  }

  .dl-col__card {
    min-height: 200px;
  }
}

/* ============================================================
   END DECORLOFT COLLECTIONS GRID CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S4 BESTSELLERS CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT COLLECTIONS GRID CSS)
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────── */
.dl-best {
  background-color: var(--decorloft-cream);
  padding: var(--section-padding-lg) var(--container-padding);
}

.dl-best__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────── */
.dl-best__header {
  text-align: center;
  margin-bottom: 3rem;
}

.dl-best__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-best__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  margin: 0 0 .8rem !important;
  letter-spacing: -.01em !important;
}

.dl-best__sub {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  color: var(--decorloft-text-medium) !important;
  max-width: 460px;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* ── Product grid — 4 columns ───────────────────────────── */
.dl-best__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

/* ── Product card ───────────────────────────────────────── */
.dl-best__card {
  background: var(--decorloft-white);
  border: 1px solid var(--decorloft-border-light);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.dl-best__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Image area ─────────────────────────────────────────── */
.dl-best__img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 280px;
  background: var(--decorloft-cream);
  text-decoration: none;
}

.dl-best__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
}

.dl-best__card:hover .dl-best__img {
  transform: scale(1.04);
}

/* ── Placeholder when no image ──────────────────────────── */
.dl-best__img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-best__img-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--decorloft-text-light);
  flex-shrink: 0;
}

/* ── Badge ──────────────────────────────────────────────── */
.dl-best__badge {
  position: absolute;
  top: .85rem;
  left: .85rem;
  background: var(--decorloft-black);
  color: var(--decorloft-gold-light);
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  padding: .3rem .75rem;
  z-index: 2;
}

/* ── Quick add overlay ──────────────────────────────────── */
.dl-best__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,24,21,.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.25rem;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 3;
}

.dl-best__card:hover .dl-best__overlay {
  opacity: 1;
}

.dl-best__quick-add {
  background: var(--decorloft-white);
  color: var(--decorloft-black);
  border: none;
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  padding: .75rem 1.8rem;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  transform: translateY(8px);
  transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.dl-best__card:hover .dl-best__quick-add {
  transform: translateY(0);
}

.dl-best__quick-add:hover {
  background: var(--decorloft-gold);
  color: #fff;
}

.dl-best__quick-add--done {
  background: var(--decorloft-sage) !important;
  color: #fff !important;
}

/* ── Card info row ──────────────────────────────────────── */
.dl-best__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  gap: .5rem;
  border-top: 1px solid var(--decorloft-border-light);
}

.dl-best__meta {
  flex: 1;
  min-width: 0;
}

.dl-best__name {
  display: block;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .25rem;
  transition: color var(--transition-fast);
}

.dl-best__name:hover {
  color: var(--decorloft-gold-dark);
}

.dl-best__pricing {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.dl-best__price {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold-dark);
}

.dl-best__compare {
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--decorloft-text-light);
  text-decoration: line-through;
}

/* ── Arrow link ─────────────────────────────────────────── */
.dl-best__arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--decorloft-border);
  color: var(--decorloft-text-medium);
  text-decoration: none;
  transition: all var(--transition-base);
}

.dl-best__arrow:hover {
  background: var(--decorloft-gold);
  border-color: var(--decorloft-gold);
  color: #fff;
}

.dl-best__arrow svg {
  width: 13px;
  height: 13px;
}

/* ── Bottom CTA ─────────────────────────────────────────── */
.dl-best__cta {
  text-align: center;
}

.dl-best__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  border: 1.5px solid var(--decorloft-black);
  padding: .9rem 2.8rem;
  text-decoration: none;
  transition: all var(--transition-base);
}

.dl-best__cta-btn:hover {
  background: var(--decorloft-black);
  color: var(--decorloft-white);
}

.dl-best__cta-btn svg {
  transition: transform var(--transition-base);
}

.dl-best__cta-btn:hover svg {
  transform: translateX(4px);
}

/* ── Tablet ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-best__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
  .dl-best__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  .dl-best__info {
    padding: .75rem .8rem;
  }

  .dl-best__name {
    font-size: .75rem;
  }
}

/* ============================================================
   END DECORLOFT BESTSELLERS CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S5 GIFT BOXES CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT BESTSELLERS CSS)
   ============================================================ */

/* ── Section wrapper — dark background ─────────────────── */
.dl-gifts {
  background-color: var(--decorloft-black);
  padding: var(--section-padding-lg) var(--container-padding);
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow behind cards */
.dl-gifts::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(201,169,110,.05) 0%, transparent 65%);
  pointer-events: none;
}

.dl-gifts__wrap {
  max-width: var(--container-content);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Section header ─────────────────────────────────────── */
.dl-gifts__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.dl-gifts__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-gifts__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-white) !important;
  margin: 0 0 .8rem !important;
  letter-spacing: -.01em !important;
}

.dl-gifts__sub {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  color: rgba(250,247,242,.45) !important;
  max-width: 500px;
  margin: 0 auto !important;
  line-height: 1.75 !important;
}

/* ── 3-column grid ──────────────────────────────────────── */
.dl-gifts__grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2rem;
}

/* ── Base card ──────────────────────────────────────────── */
.dl-gifts__card {
  position: relative;
  padding: 2.2rem 1.8rem 2rem;
  border: 1px solid rgba(201,169,110,.12);
  transition: transform var(--transition-slow), border-color var(--transition-base);
}

.dl-gifts__card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,169,110,.28);
}

/* ── Card colour themes ─────────────────────────────────── */

/* Standard — dark with subtle gold tint */
.gb-standard {
  background: rgba(255,255,255,.03);
}

.gb-standard .dl-gifts__icon       { color: var(--decorloft-gold); opacity: .6; }
.gb-standard .dl-gifts__tier-name  { color: rgba(250,247,242,.55); }
.gb-standard .dl-gifts__price-num  { color: var(--decorloft-white); }
.gb-standard .dl-gifts__price-aed  { color: var(--decorloft-gold); }
.gb-standard .dl-gifts__desc       { color: rgba(250,247,242,.4); }
.gb-standard .dl-gifts__item       { color: rgba(250,247,242,.55); }
.gb-standard .dl-gifts__item-dot   { background: var(--decorloft-gold); opacity: .5; }
.gb-standard .dl-gifts__btn        { border-color: rgba(201,169,110,.35); color: var(--decorloft-gold-light); }
.gb-standard .dl-gifts__btn:hover  { background: rgba(201,169,110,.12); border-color: var(--decorloft-gold); }
.gb-standard .dl-gifts__divider    { background: rgba(201,169,110,.1); }
.gb-standard .dl-gifts__includes-label { color: rgba(250,247,242,.3); }

/* Featured — brighter, slightly raised, gold border */
.gb-featured {
  background: rgba(201,169,110,.06);
  border-color: rgba(201,169,110,.35) !important;
  padding-top: 3rem;
}

.gb-featured .dl-gifts__icon       { color: var(--decorloft-gold); opacity: .9; }
.gb-featured .dl-gifts__tier-name  { color: var(--decorloft-gold-light); }
.gb-featured .dl-gifts__price-num  { color: var(--decorloft-white); }
.gb-featured .dl-gifts__price-aed  { color: var(--decorloft-gold); }
.gb-featured .dl-gifts__desc       { color: rgba(250,247,242,.55); }
.gb-featured .dl-gifts__item       { color: rgba(250,247,242,.7); }
.gb-featured .dl-gifts__item-dot   { background: var(--decorloft-gold); }
.gb-featured .dl-gifts__btn        { background: var(--decorloft-gold); border-color: var(--decorloft-gold); color: #fff; }
.gb-featured .dl-gifts__btn:hover  { background: var(--decorloft-gold-dark); border-color: var(--decorloft-gold-dark); }
.gb-featured .dl-gifts__divider    { background: rgba(201,169,110,.2); }
.gb-featured .dl-gifts__includes-label { color: var(--decorloft-gold); opacity: .7; }

/* Luxury — near-white border, premium feel */
.gb-luxury {
  background: rgba(255,255,255,.02);
}

.gb-luxury .dl-gifts__icon       { color: var(--decorloft-gold-light); opacity: .5; }
.gb-luxury .dl-gifts__tier-name  { color: rgba(250,247,242,.55); }
.gb-luxury .dl-gifts__price-num  { color: var(--decorloft-white); }
.gb-luxury .dl-gifts__price-aed  { color: var(--decorloft-gold); }
.gb-luxury .dl-gifts__desc       { color: rgba(250,247,242,.4); }
.gb-luxury .dl-gifts__item       { color: rgba(250,247,242,.55); }
.gb-luxury .dl-gifts__item-dot   { background: var(--decorloft-gold-light); opacity: .5; }
.gb-luxury .dl-gifts__btn        { border-color: rgba(232,213,163,.3); color: var(--decorloft-gold-light); }
.gb-luxury .dl-gifts__btn:hover  { background: rgba(232,213,163,.08); border-color: var(--decorloft-gold-light); }
.gb-luxury .dl-gifts__divider    { background: rgba(201,169,110,.08); }
.gb-luxury .dl-gifts__includes-label { color: rgba(250,247,242,.3); }

/* ── Most Popular tag ───────────────────────────────────── */
.dl-gifts__featured-tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--decorloft-gold);
  color: var(--decorloft-black);
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  padding: .3rem 1.2rem;
  white-space: nowrap;
}

/* ── Icon ───────────────────────────────────────────────── */
.dl-gifts__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.5rem;
}

.dl-gifts__icon svg {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  display: block;
}

/* ── Tier name ──────────────────────────────────────────── */
.dl-gifts__tier-name {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  margin-bottom: .75rem;
}

/* ── Price ──────────────────────────────────────────────── */
.dl-gifts__price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: 1.2rem;
}

.dl-gifts__price-aed {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: var(--weight-medium);
  letter-spacing: .06em;
}

.dl-gifts__price-num {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: -.02em;
}

/* ── Description ────────────────────────────────────────── */
.dl-gifts__desc {
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  line-height: 1.75 !important;
  margin: 0 0 1.5rem !important;
}

/* ── Divider ────────────────────────────────────────────── */
.dl-gifts__divider {
  height: 1px;
  width: 100%;
  margin-bottom: 1.2rem;
}

/* ── Includes label ─────────────────────────────────────── */
.dl-gifts__includes-label {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  margin-bottom: .75rem;
}

/* ── Items list ─────────────────────────────────────────── */
.dl-gifts__items {
  list-style: none;
  margin: 0 0 2rem !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.dl-gifts__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.5;
}

.dl-gifts__item-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── CTA button ─────────────────────────────────────────── */
.dl-gifts__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 1.5px solid;
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: all var(--transition-base);
  cursor: pointer;
}

.dl-gifts__btn svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.dl-gifts__btn:hover svg {
  transform: translateX(3px);
}

/* ── Bottom note ────────────────────────────────────────── */
.dl-gifts__note {
  text-align: center;
  font-family: var(--font-body) !important;
  font-size: .75rem !important;
  color: rgba(250,247,242,.25) !important;
  letter-spacing: .04em;
  margin: 0 !important;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201,169,110,.07);
}

/* ── Tablet ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-gifts__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .dl-gifts__card {
    padding: 2rem 1.8rem;
  }

  .gb-featured {
    padding-top: 2.8rem;
    order: -1;
  }
}

@media screen and (max-width: 480px) {
  .dl-gifts__price-num {
    font-size: 2.4rem;
  }
}

/* ============================================================
   END DECORLOFT GIFT BOXES CSS
   ============================================================ */

/* ============================================================
   DECORLOFT — S6 BRAND STORY CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT GIFT BOXES CSS)
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────── */
.dl-story {
  background-color: var(--decorloft-cream);
  padding: var(--section-padding-lg) var(--container-padding);
}

.dl-story__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* ── LEFT PANEL ─────────────────────────────────────────── */

.dl-story__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-story__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 1.5rem !important;
}

.dl-story__gold-line {
  width: 48px;
  height: 1.5px;
  background: var(--decorloft-gold);
  margin-bottom: 1.8rem;
}

.dl-story__body1 {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--decorloft-text-medium) !important;
  margin: 0 0 1.2rem !important;
}

.dl-story__body2 {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--decorloft-text-medium) !important;
  margin: 0 0 2.5rem !important;
}

/* ── Stats row ──────────────────────────────────────────── */
.dl-story__stats {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--decorloft-border);
  border-bottom: 1px solid var(--decorloft-border);
}

.dl-story__stat-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: var(--weight-light);
  color: var(--decorloft-black);
  line-height: 1;
  letter-spacing: -.02em;
}

.dl-story__stat-lbl {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--decorloft-text-light);
  margin-top: .3rem;
}

.dl-story__stat-divider {
  width: 1px;
  height: 40px;
  background: var(--decorloft-border);
  flex-shrink: 0;
}

/* ── CTA link ───────────────────────────────────────────── */
.dl-story__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  text-decoration: none;
  border-bottom: 1px solid var(--decorloft-black);
  padding-bottom: 2px;
  transition: color var(--transition-base), border-color var(--transition-base), gap var(--transition-base);
}

.dl-story__cta svg {
  transition: transform var(--transition-base);
}

.dl-story__cta:hover {
  color: var(--decorloft-gold-dark);
  border-color: var(--decorloft-gold-dark);
  gap: .8rem;
}

.dl-story__cta:hover svg {
  transform: translateX(3px);
}

/* ── RIGHT PANEL — 2x2 tiles grid ──────────────────────── */
.dl-story__right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--decorloft-border);
  border: 1px solid var(--decorloft-border);
}

/* ── Single tile ────────────────────────────────────────── */
.dl-story__tile {
  background: var(--decorloft-white);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background var(--transition-base);
}

.dl-story__tile:hover {
  background: var(--decorloft-gold-subtle);
}

/* ── Tile icon ──────────────────────────────────────────── */
.dl-story__tile-icon {
  width: 32px;
  height: 32px;
  color: var(--decorloft-gold);
  flex-shrink: 0;
}

.dl-story__tile-icon svg {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  display: block;
}

/* ── Tile text ──────────────────────────────────────────── */
.dl-story__tile-title {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  color: var(--decorloft-black);
  margin-bottom: .3rem;
}

.dl-story__tile-desc {
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  line-height: 1.65 !important;
  color: var(--decorloft-text-medium) !important;
  margin: 0 !important;
}

/* ── Tablet ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-story__wrap {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .dl-story__stats {
    gap: 1.5rem;
  }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
  .dl-story__right {
    grid-template-columns: 1fr;
  }

  .dl-story__stats {
    flex-wrap: wrap;
    gap: 1.2rem;
  }

  .dl-story__stat-divider {
    display: none;
  }
}

/* ============================================================
   END DECORLOFT BRAND STORY CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S7 OCCASIONS CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT BRAND STORY CSS)
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────── */
.dl-occ {
  background-color: var(--decorloft-black);
  padding: var(--section-padding-lg) var(--container-padding);
}

.dl-occ__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────── */
.dl-occ__header {
  text-align: center;
  margin-bottom: 3rem;
}

.dl-occ__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-occ__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-white) !important;
  margin: 0 0 .8rem !important;
  letter-spacing: -.01em !important;
}

.dl-occ__sub {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  color: rgba(250,247,242,.4) !important;
  max-width: 460px;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* ── 5-card grid ────────────────────────────────────────── */
/* Desktop: 3 top + 2 bottom centered */
.dl-occ__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1px;
  background: rgba(201,169,110,.08);
}

/* Last 2 cards span into a 2-col centered row */
.dl-occ__card:nth-child(4) { grid-column: 1; }
.dl-occ__card:nth-child(5) { grid-column: 3; }

/* ── Base card ──────────────────────────────────────────── */
.dl-occ__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.2rem 2rem;
  min-height: 280px;
  text-decoration: none;
  overflow: hidden;
  background: var(--decorloft-black);
  transition: background var(--transition-slow);
}

.dl-occ__card:hover {
  text-decoration: none;
}

/* ── Per-occasion accent colours ───────────────────────── */
.oc-ramadan  { --occ-accent: #C9A96E; --occ-glow: rgba(201,169,110,.06); }
.oc-national { --occ-accent: #7A9E7E; --occ-glow: rgba(122,158,126,.06); }
.oc-wedding  { --occ-accent: #C4907A; --occ-glow: rgba(196,144,122,.06); }
.oc-diwali   { --occ-accent: #E8A44A; --occ-glow: rgba(232,164,74,.06);  }
.oc-house    { --occ-accent: #8A9DBF; --occ-glow: rgba(138,157,191,.06); }

.dl-occ__card:hover {
  background: var(--occ-glow, rgba(201,169,110,.04));
}

/* ── Hover glow overlay ─────────────────────────────────── */
.dl-occ__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, var(--occ-glow, transparent) 0%, transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.dl-occ__card:hover .dl-occ__glow {
  opacity: 1;
}

/* ── Icon ───────────────────────────────────────────────── */
.dl-occ__icon {
  width: 32px;
  height: 32px;
  color: var(--occ-accent, var(--decorloft-gold));
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.dl-occ__icon svg {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  display: block;
}

/* ── Date badge ─────────────────────────────────────────── */
.dl-occ__date {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--occ-accent, var(--decorloft-gold));
  opacity: .7;
  margin-bottom: .6rem;
}

/* ── Occasion name ──────────────────────────────────────── */
.dl-occ__name {
  font-family: var(--font-heading) !important;
  font-size: 1.55rem !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-white) !important;
  margin: 0 0 .75rem !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
}

/* ── Description ────────────────────────────────────────── */
.dl-occ__desc {
  font-family: var(--font-body) !important;
  font-size: .8rem !important;
  line-height: 1.7 !important;
  color: rgba(250,247,242,.38) !important;
  margin: 0 0 auto !important;
  flex: 1;
}

/* ── Arrow ──────────────────────────────────────────────── */
.dl-occ__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201,169,110,.15);
  color: var(--occ-accent, var(--decorloft-gold));
  margin-top: 1.8rem;
  flex-shrink: 0;
  transition: all var(--transition-base);
  transform: translateX(0);
}

.dl-occ__arrow svg {
  width: 13px;
  height: 13px;
}

.dl-occ__card:hover .dl-occ__arrow {
  background: var(--occ-accent, var(--decorloft-gold));
  border-color: var(--occ-accent, var(--decorloft-gold));
  color: var(--decorloft-black);
  transform: translateX(4px);
}

/* ── Tablet — 2 columns ─────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-occ__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dl-occ__card:nth-child(4) { grid-column: auto; }
  .dl-occ__card:nth-child(5) { grid-column: auto; }
}

/* ── Mobile — 1 column ──────────────────────────────────── */
@media screen and (max-width: 480px) {
  .dl-occ__grid {
    grid-template-columns: 1fr;
  }

  .dl-occ__card {
    min-height: 220px;
  }
}

/* ============================================================
   END DECORLOFT OCCASIONS CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S8 TESTIMONIALS CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT OCCASIONS CSS)
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────── */
.dl-testi {
  background-color: var(--decorloft-white);
  padding: var(--section-padding-lg) var(--container-padding);
}

.dl-testi__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────── */
.dl-testi__header {
  text-align: center;
  margin-bottom: 3rem;
}

.dl-testi__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-testi__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
}

/* ── 3-card grid ────────────────────────────────────────── */
.dl-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* ── Base card ──────────────────────────────────────────── */
.dl-testi__card {
  background: var(--decorloft-cream);
  border: 1px solid var(--decorloft-border-light);
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.dl-testi__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Featured (middle) card ─────────────────────────────── */
.dt-featured {
  background: var(--decorloft-black);
  border-color: rgba(201,169,110,.2);
}

.dt-featured .dl-testi__star--on    { color: var(--decorloft-gold); }
.dt-featured .dl-testi__star        { color: rgba(201,169,110,.2); }
.dt-featured .dl-testi__quote-mark  { color: rgba(201,169,110,.18); }
.dt-featured .dl-testi__quote       { color: var(--decorloft-white) !important; }
.dt-featured .dl-testi__divider     { background: rgba(201,169,110,.12); }
.dt-featured .dl-testi__avatar      { background: rgba(201,169,110,.12); color: var(--decorloft-gold); border-color: rgba(201,169,110,.2); }
.dt-featured .dl-testi__name        { color: var(--decorloft-white); }
.dt-featured .dl-testi__location    { color: rgba(250,247,242,.35); }
.dt-featured .dl-testi__product     { color: rgba(250,247,242,.3); border-top-color: rgba(201,169,110,.08); }
.dt-featured .dl-testi__product svg { color: var(--decorloft-gold); opacity: .5; }

/* ── Stars ──────────────────────────────────────────────── */
.dl-testi__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 1.2rem;
}

.dl-testi__star {
  width: 14px;
  height: 14px;
  color: rgba(201,169,110,.2);
}

.dl-testi__star--on {
  color: var(--decorloft-gold);
}

.dl-testi__star svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ── Large quote mark ───────────────────────────────────── */
.dl-testi__quote-mark {
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: .6;
  color: rgba(201,169,110,.1);
  margin-bottom: .5rem;
  user-select: none;
}

/* ── Review text ────────────────────────────────────────── */
.dl-testi__quote {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: var(--decorloft-text-medium) !important;
  margin: 0 0 1.8rem !important;
  flex: 1;
  border: none !important;
  padding: 0 !important;
}

/* ── Divider ────────────────────────────────────────────── */
.dl-testi__divider {
  height: 1px;
  background: var(--decorloft-border-light);
  margin-bottom: 1.4rem;
}

/* ── Reviewer row ───────────────────────────────────────── */
.dl-testi__reviewer {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.dl-testi__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--decorloft-border);
  background: var(--decorloft-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--decorloft-gold-dark);
  flex-shrink: 0;
}

.dl-testi__name {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: var(--weight-semibold);
  color: var(--decorloft-black);
  letter-spacing: .02em;
}

.dl-testi__location {
  font-family: var(--font-body);
  font-size: .7rem;
  color: var(--decorloft-text-light);
  letter-spacing: .06em;
  margin-top: 2px;
}

/* ── Product purchased ──────────────────────────────────── */
.dl-testi__product {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .08em;
  color: var(--decorloft-text-light);
  border-top: 1px solid var(--decorloft-border-light);
  padding-top: .9rem;
  margin-top: auto;
}

.dl-testi__product svg {
  flex-shrink: 0;
  color: var(--decorloft-gold);
  opacity: .7;
}

/* ── Bottom trust line ──────────────────────────────────── */
.dl-testi__trust {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.dl-testi__trust-line {
  flex: 1;
  height: 1px;
  background: var(--decorloft-border);
}

.dl-testi__trust-text {
  font-family: var(--font-body) !important;
  font-size: .7rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--decorloft-text-light) !important;
  white-space: nowrap;
  margin: 0 !important;
}

/* ── Tablet ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-testi__grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .dt-featured {
    order: -1;
  }
}

@media screen and (max-width: 480px) {
  .dl-testi__trust {
    flex-direction: column;
    gap: .8rem;
    text-align: center;
  }

  .dl-testi__trust-line {
    width: 60px;
    flex: none;
  }
}

/* ============================================================
   END DECORLOFT TESTIMONIALS CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S9 FAQ CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT TESTIMONIALS CSS)
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────── */
.dl-faq {
  background-color: var(--decorloft-cream);
  padding: var(--section-padding-lg) var(--container-padding);
}

.dl-faq__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}

/* ── LEFT column ────────────────────────────────────────── */
.dl-faq__left {
  position: sticky;
  top: 6rem;
}

.dl-faq__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-faq__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 1.2rem !important;
}

.dl-faq__sub {
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  line-height: 1.8 !important;
  color: var(--decorloft-text-medium) !important;
  margin: 0 0 2rem !important;
}

.dl-faq__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-white);
  background: var(--decorloft-black);
  padding: .85rem 1.8rem;
  text-decoration: none;
  transition: background var(--transition-base), gap var(--transition-base);
}

.dl-faq__cta svg {
  transition: transform var(--transition-base);
}

.dl-faq__cta:hover {
  background: var(--decorloft-gold-dark);
  gap: .8rem;
}

.dl-faq__cta:hover svg {
  transform: translateX(3px);
}

/* ── RIGHT column — accordion ───────────────────────────── */
.dl-faq__accordion {
  border-top: 1px solid var(--decorloft-border);
}

/* ── Single FAQ item ────────────────────────────────────── */
.dl-faq__item {
  border-bottom: 1px solid var(--decorloft-border);
}

/* ── Question button ────────────────────────────────────── */
.dl-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-base);
}

.dl-faq__question:hover .dl-faq__q-text {
  color: var(--decorloft-gold-dark);
}

.dl-faq__q-text {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  line-height: 1.4;
  transition: color var(--transition-base);
}

.dl-faq__item--open .dl-faq__q-text {
  color: var(--decorloft-gold-dark);
}

/* ── Chevron icon ───────────────────────────────────────── */
.dl-faq__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--decorloft-border);
  color: var(--decorloft-text-light);
  transition: all var(--transition-base);
}

.dl-faq__icon svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-base);
  display: block;
}

.dl-faq__item--open .dl-faq__icon {
  background: var(--decorloft-gold);
  border-color: var(--decorloft-gold);
  color: #fff;
}

.dl-faq__item--open .dl-faq__icon svg {
  transform: rotate(180deg);
}

/* ── Answer panel ───────────────────────────────────────── */
.dl-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dl-faq__answer-inner {
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.8;
  color: var(--decorloft-text-medium);
  padding-bottom: 1.4rem;
  padding-right: 3rem;
}

/* ── Tablet ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-faq__wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .dl-faq__left {
    position: static;
  }
}

@media screen and (max-width: 480px) {
  .dl-faq__answer-inner {
    padding-right: 1rem;
  }
}

/* ============================================================
   END DECORLOFT FAQ CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — S10 EMAIL CTA + FOOTER + WHATSAPP CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT FAQ CSS)
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   EMAIL CTA BANNER
   ══════════════════════════════════════════════════════════ */

.dl-email {
  background-color: var(--decorloft-black);
  padding: var(--section-padding-lg) var(--container-padding);
  position: relative;
  overflow: hidden;
}

/* Decorative rings background -->*/
.dl-email__rings {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  pointer-events: none;
}

.dl-email__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.08);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dl-email__ring--1 { width: 200px; height: 200px; }
.dl-email__ring--2 { width: 320px; height: 320px; border-color: rgba(201,169,110,.05); }
.dl-email__ring--3 { width: 460px; height: 460px; border-color: rgba(201,169,110,.03); }

.dl-email__wrap {
  max-width: var(--container-content);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dl-email__content {
  max-width: 600px;
}

.dl-email__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .9rem;
}

.dl-email__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.8rem, 3.5vw, 3rem) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-white) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 .8rem !important;
}

.dl-email__sub {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  color: rgba(250,247,242,.45) !important;
  line-height: 1.75 !important;
  margin: 0 0 2rem !important;
}

/* ── Email form ─────────────────────────────────────────── */
.dl-email__form {
  margin-bottom: 1.5rem;
}

.dl-email__input-row {
  display: flex;
  gap: 0;
  margin-bottom: .75rem;
  max-width: 480px;
}

.dl-email__input {
  flex: 1;
  padding: .9rem 1.2rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,169,110,.2);
  border-right: none;
  color: var(--decorloft-white);
  font-family: var(--font-body);
  font-size: .88rem;
  outline: none;
  transition: border-color var(--transition-base), background var(--transition-base);
  -webkit-appearance: none;
  border-radius: 0;
}

.dl-email__input::placeholder {
  color: rgba(250,247,242,.3);
}

.dl-email__input:focus {
  background: rgba(255,255,255,.09);
  border-color: rgba(201,169,110,.45);
}

.dl-email__btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.6rem;
  background: var(--decorloft-gold);
  border: 1px solid var(--decorloft-gold);
  color: var(--decorloft-black);
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base), border-color var(--transition-base);
  border-radius: 0;
}

.dl-email__btn:hover {
  background: var(--decorloft-gold-dark);
  border-color: var(--decorloft-gold-dark);
}

.dl-email__btn svg {
  transition: transform var(--transition-base);
}

.dl-email__btn:hover svg {
  transform: translateX(3px);
}

.dl-email__note {
  font-family: var(--font-body) !important;
  font-size: .68rem !important;
  color: rgba(250,247,242,.25) !important;
  margin: 0 !important;
  letter-spacing: .04em;
}

/* ── Perks row ──────────────────────────────────────────── */
.dl-email__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(201,169,110,.1);
}

.dl-email__perk {
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .1em;
  color: rgba(250,247,242,.38);
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */

.dl-footer {
  background-color: #141210;
  border-top: 1px solid rgba(201,169,110,.08);
}

.dl-footer__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 4rem var(--container-padding) 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}

/* ── Brand column ───────────────────────────────────────── */
.dl-footer__logo {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: var(--weight-light);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--decorloft-white);
  text-decoration: none;
  display: block;
  margin-bottom: 1rem;
  transition: color var(--transition-base);
}

.dl-footer__logo:hover {
  color: var(--decorloft-gold-light);
}

.dl-footer__tagline {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-size: .95rem !important;
  color: rgba(250,247,242,.3) !important;
  margin: 0 0 1.5rem !important;
  line-height: 1.5 !important;
}

/* ── Social icons ───────────────────────────────────────── */
.dl-footer__social {
  display: flex;
  gap: .75rem;
}

.dl-footer__social-link {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201,169,110,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(250,247,242,.4);
  text-decoration: none;
  transition: all var(--transition-base);
}

.dl-footer__social-link svg {
  width: 15px;
  height: 15px;
}

.dl-footer__social-link:hover {
  border-color: var(--decorloft-gold);
  color: var(--decorloft-gold);
  background: rgba(201,169,110,.06);
}

/* ── Link columns ───────────────────────────────────────── */
.dl-footer__col-title {
  font-family: var(--font-body);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--decorloft-gold);
  margin-bottom: 1.2rem;
}

.dl-footer__links {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.dl-footer__links a {
  font-family: var(--font-body);
  font-size: .8rem;
  color: rgba(250,247,242,.38);
  text-decoration: none;
  letter-spacing: .03em;
  transition: color var(--transition-base);
}

.dl-footer__links a:hover {
  color: var(--decorloft-gold-light);
}

/* ── Bottom bar ─────────────────────────────────────────── */
.dl-footer__bottom {
  border-top: 1px solid rgba(201,169,110,.07);
}

.dl-footer__bottom-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.4rem var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dl-footer__copy,
.dl-footer__made {
  font-family: var(--font-body) !important;
  font-size: .68rem !important;
  color: rgba(250,247,242,.2) !important;
  letter-spacing: .05em;
  margin: 0 !important;
}

.dl-footer__legal {
  display: flex;
  gap: 1.5rem;
}

.dl-footer__legal a {
  font-family: var(--font-body);
  font-size: .65rem;
  color: rgba(250,247,242,.2);
  text-decoration: none;
  letter-spacing: .06em;
  transition: color var(--transition-base);
}

.dl-footer__legal a:hover {
  color: var(--decorloft-gold);
}

/* ══════════════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ══════════════════════════════════════════════════════════ */

.dl-whatsapp-float {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(37,211,102,.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.dl-whatsapp-float svg {
  width: 26px;
  height: 26px;
  color: #fff;
  flex-shrink: 0;
}

.dl-whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37,211,102,.45);
}

/* Tooltip */
.dl-whatsapp-float__tooltip {
  position: absolute;
  right: calc(100% + .7rem);
  background: var(--decorloft-black);
  color: var(--decorloft-white);
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .4rem .85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.dl-whatsapp-float:hover .dl-whatsapp-float__tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* ── Footer tablet ──────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-footer__wrap {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .dl-footer__col--brand {
    grid-column: span 2;
  }

  .dl-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }

  .dl-email__input-row {
    flex-direction: column;
    max-width: 100%;
  }

  .dl-email__input {
    border-right: 1px solid rgba(201,169,110,.2);
    border-bottom: none;
  }

  .dl-email__btn {
    justify-content: center;
  }
}

/* ── Footer mobile ──────────────────────────────────────── */
@media screen and (max-width: 480px) {
  .dl-footer__wrap {
    grid-template-columns: 1fr;
  }

  .dl-footer__col--brand {
    grid-column: span 1;
  }

  .dl-footer__legal {
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
  }

  .dl-email__rings {
    display: none;
  }

  .dl-whatsapp-float {
    bottom: 1.2rem;
    right: 1.2rem;
  }
}

/* ============================================================
   END DECORLOFT EMAIL CTA + FOOTER + WHATSAPP CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — PRODUCT PAGE (PDP) CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT EMAIL CTA + FOOTER + WHATSAPP CSS)
   ============================================================ */

/* ── Page wrapper ───────────────────────────────────────── */
.dl-pdp {
  background: var(--decorloft-white);
  padding: 2.5rem var(--container-padding) 4rem;
}

.dl-pdp__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4.5rem;
  align-items: start;
}

/* ══════════════════════════════════════════════════════════
   GALLERY — LEFT
   ══════════════════════════════════════════════════════════ */

.dl-pdp__gallery {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ── Main image ─────────────────────────────────────────── */
.dl-pdp__main-img-wrap {
  position: relative;
  background: var(--decorloft-cream);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.dl-pdp__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dl-pdp__main-img-wrap:hover .dl-pdp__main-img {
  transform: scale(1.03);
}

.dl-pdp__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-pdp__img-placeholder svg {
  width: 64px;
  height: 64px;
  color: var(--decorloft-text-light);
}

/* ── Badges ─────────────────────────────────────────────── */
.dl-pdp__badges {
  position: absolute;
  top: .85rem;
  left: .85rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  z-index: 2;
}

.dl-pdp__badge {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  padding: .28rem .7rem;
  display: inline-block;
}

.dl-pdp__badge--sale { background: var(--decorloft-black); color: var(--decorloft-gold-light); }
.dl-pdp__badge--new  { background: var(--decorloft-sage);  color: #fff; }
.dl-pdp__badge--best { background: var(--decorloft-gold);  color: var(--decorloft-black); }

/* ── Thumbnails ─────────────────────────────────────────── */
.dl-pdp__thumbs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.dl-pdp__thumb {
  width: 68px;
  height: 68px;
  border: 1.5px solid var(--decorloft-border-light);
  padding: 0;
  background: var(--decorloft-cream);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-base);
  flex-shrink: 0;
}

.dl-pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.dl-pdp__thumb:hover img {
  transform: scale(1.06);
}

.dl-pdp__thumb--active {
  border-color: var(--decorloft-gold);
}

/* ══════════════════════════════════════════════════════════
   PRODUCT INFO — RIGHT
   ══════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────── */
.dl-pdp__breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dl-pdp__breadcrumb a,
.dl-pdp__breadcrumb span {
  font-family: var(--font-body);
  font-size: .68rem;
  color: var(--decorloft-text-light);
  text-decoration: none;
  letter-spacing: .06em;
  transition: color var(--transition-fast);
}

.dl-pdp__breadcrumb a:hover { color: var(--decorloft-gold-dark); }
.dl-pdp__breadcrumb span:last-child { color: var(--decorloft-text-medium); }

/* ── Title ──────────────────────────────────────────────── */
.dl-pdp__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 .85rem !important;
}

/* ── Rating ─────────────────────────────────────────────── */
.dl-pdp__rating {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}

.dl-pdp__stars {
  display: flex;
  gap: 2px;
}

.dl-pdp__star {
  width: 13px;
  height: 13px;
  color: var(--decorloft-gold);
}

.dl-pdp__review-count {
  font-family: var(--font-body);
  font-size: .72rem;
  color: var(--decorloft-text-light);
  letter-spacing: .04em;
}

/* ── Price ──────────────────────────────────────────────── */
.dl-pdp__price-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.dl-pdp__price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold-dark);
  letter-spacing: -.01em;
  line-height: 1;
}

.dl-pdp__compare {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--decorloft-text-light);
  text-decoration: line-through;
}

.dl-pdp__save {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .08em;
  background: rgba(138,158,136,.15);
  color: #4a7248;
  padding: .2rem .6rem;
  font-weight: var(--weight-medium);
}

/* ── Short description ──────────────────────────────────── */
.dl-pdp__short-desc {
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  line-height: 1.8 !important;
  color: var(--decorloft-text-medium) !important;
  margin: 0 0 1.4rem !important;
}

/* ── Gold divider ───────────────────────────────────────── */
.dl-pdp__gold-line {
  width: 40px;
  height: 1.5px;
  background: var(--decorloft-gold);
  margin-bottom: 1.8rem;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT FORM
   ══════════════════════════════════════════════════════════ */

.dl-pdp__form {
  margin-bottom: 1.5rem;
}

/* ── Option group ───────────────────────────────────────── */
.dl-pdp__option {
  margin-bottom: 1.4rem;
}

.dl-pdp__option-label {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  margin-bottom: .65rem;
  display: flex;
  gap: .5rem;
}

.dl-pdp__option-value {
  color: var(--decorloft-gold-dark);
  font-weight: var(--weight-normal);
  text-transform: none;
  letter-spacing: .04em;
}

.dl-pdp__option-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.dl-pdp__opt-btn {
  padding: .5rem 1.1rem;
  border: 1.5px solid var(--decorloft-border);
  background: transparent;
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--decorloft-text-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  letter-spacing: .04em;
}

.dl-pdp__opt-btn:hover {
  border-color: var(--decorloft-gold);
  color: var(--decorloft-gold-dark);
}

.dl-pdp__opt-btn--active {
  border-color: var(--decorloft-gold) !important;
  background: var(--decorloft-gold) !important;
  color: #fff !important;
}

/* ── Qty + ATC row ──────────────────────────────────────── */
.dl-pdp__atc-row {
  display: flex;
  gap: .75rem;
  margin-bottom: .9rem;
}

.dl-pdp__qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--decorloft-border);
  flex-shrink: 0;
}

.dl-pdp__qty-btn {
  width: 38px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--decorloft-text-medium);
  transition: color var(--transition-fast), background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-pdp__qty-btn:hover {
  background: var(--decorloft-cream);
  color: var(--decorloft-black);
}

.dl-pdp__qty-input {
  width: 44px;
  height: 48px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--decorloft-border);
  border-right: 1px solid var(--decorloft-border);
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--decorloft-black);
  background: transparent;
  -moz-appearance: textfield;
}

.dl-pdp__qty-input::-webkit-outer-spin-button,
.dl-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.dl-pdp__atc-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 48px;
  background: var(--decorloft-black);
  border: 1.5px solid var(--decorloft-black);
  color: var(--decorloft-white);
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.dl-pdp__atc-btn:hover:not(:disabled) {
  background: var(--decorloft-gold-dark);
  border-color: var(--decorloft-gold-dark);
}

.dl-pdp__atc-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── COD badge ──────────────────────────────────────────── */
.dl-pdp__cod {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .72rem;
  color: var(--decorloft-text-light);
  letter-spacing: .04em;
  margin-bottom: 1.6rem;
}

/* ── Trust strip ────────────────────────────────────────── */
.dl-pdp__trust {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.2rem 0;
  border-top: 1px solid var(--decorloft-border-light);
  border-bottom: 1px solid var(--decorloft-border-light);
  margin-bottom: 1.8rem;
}

.dl-pdp__trust-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-size: .72rem;
  color: var(--decorloft-text-medium);
  letter-spacing: .04em;
}

.dl-pdp__trust-item svg {
  color: var(--decorloft-gold);
  flex-shrink: 0;
}

/* ── Accordion ──────────────────────────────────────────── */
.dl-pdp__accordion {
  border-top: 1px solid var(--decorloft-border-light);
  margin-bottom: 1.5rem;
}

.dl-pdp__acc-item {
  border-bottom: 1px solid var(--decorloft-border-light);
}

.dl-pdp__acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  letter-spacing: .04em;
  transition: color var(--transition-fast);
}

.dl-pdp__acc-btn:hover { color: var(--decorloft-gold-dark); }

.dl-pdp__acc-icon {
  flex-shrink: 0;
  color: var(--decorloft-text-light);
  transition: transform var(--transition-base);
}

.dl-pdp__acc-item--open .dl-pdp__acc-icon {
  transform: rotate(180deg);
}

.dl-pdp__acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dl-pdp__acc-inner {
  font-family: var(--font-body);
  font-size: .85rem;
  line-height: 1.8;
  color: var(--decorloft-text-medium);
  padding-bottom: 1.2rem;
}

.dl-pdp__acc-item--open .dl-pdp__acc-body {
  /* height set by JS */
}

.dl-pdp__description h1,
.dl-pdp__description h2,
.dl-pdp__description h3 {
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  margin-top: 1.2rem !important;
  margin-bottom: .5rem !important;
}

.dl-pdp__description ul,
.dl-pdp__description ol {
  padding-left: 1.2rem;
  margin: .75rem 0;
}

.dl-pdp__description li {
  margin-bottom: .35rem;
}

.dl-pdp__description p { margin-bottom: .75rem; }

.dl-pdp__acc-inner p { margin-bottom: .5rem; }
.dl-pdp__acc-inner strong { color: var(--decorloft-black); font-weight: var(--weight-semibold); }

/* ── WhatsApp question ──────────────────────────────────── */
.dl-pdp__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .72rem;
  color: #128C7E;
  text-decoration: none;
  letter-spacing: .06em;
  transition: color var(--transition-fast);
  border-bottom: 1px solid rgba(18,140,126,.2);
  padding-bottom: 1px;
}

.dl-pdp__whatsapp:hover { color: #075E54; }

/* ── Tablet ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-pdp__wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dl-pdp__gallery {
    position: static;
  }

  .dl-pdp__main-img-wrap {
    aspect-ratio: 4 / 3;
  }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
  .dl-pdp {
    padding: 1.5rem var(--container-padding) 3rem;
  }

  .dl-pdp__atc-row {
    flex-direction: column;
  }

  .dl-pdp__qty {
    width: fit-content;
  }

  .dl-pdp__trust {
    gap: 1rem;
  }
}

/* ============================================================
   END DECORLOFT PDP CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — COMPLETE THE LOOK CSS
   Paste at the BOTTOM of assets/base.css
   (after END DECORLOFT PDP CSS)
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────── */
.dl-ctl {
  background: var(--decorloft-cream);
  padding: var(--section-padding-lg) var(--container-padding);
  border-top: 1px solid var(--decorloft-border-light);
}

.dl-ctl__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────── */
.dl-ctl__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.dl-ctl__eyebrow {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-gold);
  display: block;
  margin-bottom: .8rem;
}

.dl-ctl__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-h2) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
}

/* ── Body — 2 col split ─────────────────────────────────── */
.dl-ctl__body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* ══════════════════════════════════════════════════════════
   ROOM IMAGE + HOTSPOT DOTS
   ══════════════════════════════════════════════════════════ */

.dl-ctl__scene {
  position: relative;
  overflow: hidden;
  background: var(--decorloft-white);
  border: 1px solid var(--decorloft-border-light);
}

.dl-ctl__room-img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dl-ctl__scene:hover .dl-ctl__room-img {
  transform: scale(1.02);
}

/* ── Placeholder ────────────────────────────────────────── */
.dl-ctl__room-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--decorloft-white);
}

.dl-ctl__placeholder-inner {
  text-align: center;
  color: var(--decorloft-text-light);
  padding: 2rem;
}

.dl-ctl__placeholder-inner svg {
  width: 48px;
  height: 48px;
  margin-bottom: .75rem;
}

.dl-ctl__placeholder-inner p {
  font-family: var(--font-body);
  font-size: .78rem;
  line-height: 1.6;
  margin: 0;
}

/* ── Hotspot dots ───────────────────────────────────────── */
.dl-ctl__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
}

.dl-ctl__dot-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,169,110,.6);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: dl-dot-pulse 2.4s ease-in-out infinite;
}

.dl-ctl__dot:nth-child(2) .dl-ctl__dot-ring { animation-delay: .8s; }
.dl-ctl__dot:nth-child(3) .dl-ctl__dot-ring { animation-delay: 1.6s; }

@keyframes dl-dot-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: .7; }
  50%       { transform: translate(-50%, -50%) scale(1.35); opacity: .3; }
}

.dl-ctl__dot-core {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--decorloft-gold);
  color: var(--decorloft-black);
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(201,169,110,.4);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.dl-ctl__dot:hover .dl-ctl__dot-core {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(201,169,110,.55);
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARDS
   ══════════════════════════════════════════════════════════ */

.dl-ctl__products {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--decorloft-border-light);
  border: 1px solid var(--decorloft-border-light);
}

/* ── Single card ────────────────────────────────────────── */
.dl-ctl__card {
  background: var(--decorloft-white);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  position: relative;
  transition: background var(--transition-fast);
}

.dl-ctl__card:hover {
  background: var(--decorloft-gold-subtle);
}

/* ── Number badge ───────────────────────────────────────── */
.dl-ctl__card-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--decorloft-gold);
  color: var(--decorloft-black);
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Product image ──────────────────────────────────────── */
.dl-ctl__card-img-wrap {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--decorloft-cream);
  display: block;
  text-decoration: none;
}

.dl-ctl__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.dl-ctl__card:hover .dl-ctl__card-img {
  transform: scale(1.06);
}

.dl-ctl__card-img-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-ctl__card-img-empty svg {
  width: 28px;
  height: 28px;
  color: var(--decorloft-text-light);
}

/* ── Info ───────────────────────────────────────────────── */
.dl-ctl__card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.dl-ctl__card-meta {
  flex: 1;
  min-width: 0;
}

.dl-ctl__card-name {
  display: block;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
  transition: color var(--transition-fast);
}

.dl-ctl__card-name:hover { color: var(--decorloft-gold-dark); }

.dl-ctl__card-price {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--decorloft-gold-dark);
  font-weight: var(--weight-medium);
  margin-bottom: .15rem;
}

.dl-ctl__card-note {
  font-family: var(--font-body);
  font-size: .65rem;
  color: var(--decorloft-text-light);
  letter-spacing: .06em;
}

/* ── Add button ─────────────────────────────────────────── */
.dl-ctl__add-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .9rem;
  border: 1.5px solid var(--decorloft-border);
  background: transparent;
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--decorloft-black);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.dl-ctl__add-btn:hover:not(:disabled) {
  background: var(--decorloft-gold);
  border-color: var(--decorloft-gold);
  color: #fff;
}

.dl-ctl__add-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.dl-ctl__add-btn--done {
  background: var(--decorloft-sage) !important;
  border-color: var(--decorloft-sage) !important;
  color: #fff !important;
}

/* ── Add all button ─────────────────────────────────────── */
.dl-ctl__add-all {
  background: var(--decorloft-black);
  border: none;
  color: var(--decorloft-white);
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  padding: 1rem 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  transition: background var(--transition-base);
}

.dl-ctl__add-all:hover:not(:disabled) {
  background: var(--decorloft-gold-dark);
}

.dl-ctl__add-all svg {
  transition: transform var(--transition-base);
}

.dl-ctl__add-all:hover svg {
  transform: translateX(3px);
}

/* ── Tablet ─────────────────────────────────────────────── */
@media screen and (max-width: 989px) {
  .dl-ctl__body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ── Mobile ─────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
  .dl-ctl__card-img-wrap {
    width: 56px;
    height: 56px;
  }

  .dl-ctl__card-name {
    font-size: .76rem;
  }
}

/* ============================================================
   END DECORLOFT COMPLETE THE LOOK CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — PRODUCT PAGE v2 CSS
   Paste at BOTTOM of assets/base.css
   After: END DECORLOFT COMPLETE THE LOOK CSS
   ============================================================ */

/* ── Base ───────────────────────────────────────────── */
.dlv2 { background: var(--decorloft-white); }

.dlv2__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1rem var(--container-padding) 0;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 4.5rem;
  align-items: start;
}

/* ══════════════════════════════════════════════════════
   GALLERY
══════════════════════════════════════════════════════ */
.dlv2__gallery {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

/* Social pulse */
.dlv2__pulse {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--decorloft-cream);
  border: 1px solid var(--decorloft-border-light);
  padding: .55rem .9rem;
  font-family: var(--font-body);
  font-size: .65rem;
  color: var(--decorloft-text-med);
  letter-spacing: .04em;
}
.dlv2__pulse strong { color: var(--decorloft-black); }
.dlv2__pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--decorloft-sage);
  flex-shrink: 0;
  animation: dlv2Blink 2s ease-in-out infinite;
}
@keyframes dlv2Blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* Main image */
.dlv2__main-img {
  position: relative;
  background: var(--decorloft-cream);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
}
.dlv2__main-img-el {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.dlv2__main-img:hover .dlv2__main-img-el { transform: scale(1.04); }
.dlv2__main-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,.04) 0%, transparent 60%);
  pointer-events: none;
}
.dlv2__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.dlv2__img-placeholder svg { width: 56px; height: 56px; color: var(--decorloft-text-light); }

/* Badges */
.dlv2__badges {
  position: absolute; top: .85rem; left: .85rem;
  display: flex; flex-direction: column; gap: .35rem; z-index: 2;
}
.dlv2__badge {
  font-family: var(--font-body);
  font-size: .55rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: var(--weight-semibold);
  padding: .28rem .75rem; display: inline-block;
}
.dlv2__badge--sale { background: #C4513A; color: #fff; }
.dlv2__badge--best { background: var(--decorloft-gold); color: var(--decorloft-black); }
.dlv2__badge--new  { background: var(--decorloft-sage); color: #fff; }

/* Thumbnails */
.dlv2__thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.dlv2__thumb {
  width: 68px; height: 68px;
  border: 1.5px solid var(--decorloft-border-light);
  overflow: hidden; cursor: pointer;
  background: var(--decorloft-cream);
  transition: border-color var(--transition-base);
  flex-shrink: 0; padding: 0;
}
.dlv2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-base); }
.dlv2__thumb:hover img { transform: scale(1.06); }
.dlv2__thumb--active { border-color: var(--decorloft-gold); }

/* Activity feed */
.dlv2__activity {
  display: flex; align-items: center; gap: .6rem;
  background: var(--decorloft-cream);
  border: 1px solid var(--decorloft-border-light);
  border-left: 2px solid var(--decorloft-gold);
  padding: .6rem .9rem;
  opacity: 1; transition: opacity .4s ease;
}
.dlv2__activity-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--decorloft-white); border: 1px solid var(--decorloft-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: .85rem;
  font-style: italic; color: var(--decorloft-gold-dark);
  flex-shrink: 0;
}
.dlv2__activity-text { flex: 1; font-family: var(--font-body); font-size: .65rem; color: var(--decorloft-text-med); line-height: 1.4; }
.dlv2__activity-text strong { color: var(--decorloft-black); }
.dlv2__activity-time { font-size: .58rem; color: var(--decorloft-text-light); letter-spacing: .06em; white-space: nowrap; }

/* ══════════════════════════════════════════════════════
   INFO — RIGHT
══════════════════════════════════════════════════════ */
.dlv2__info { padding-top: .5rem; }

/* Breadcrumb */
.dlv2__breadcrumb {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-family: var(--font-body); font-size: .62rem;
  color: var(--decorloft-text-light); margin-bottom: .9rem;
}
.dlv2__breadcrumb a { text-decoration: none; color: var(--decorloft-text-light); transition: color var(--transition-fast); }
.dlv2__breadcrumb a:hover { color: var(--decorloft-gold-dark); }
.dlv2__breadcrumb span { color: var(--decorloft-text-light); }

/* Collection tag */
.dlv2__coll-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; font-weight: var(--weight-medium);
  color: var(--decorloft-gold-dark);
  border-bottom: 1px solid var(--decorloft-gold);
  padding-bottom: 1px; margin-bottom: .85rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.dlv2__coll-tag:hover { color: var(--decorloft-gold); }

/* Title */
.dlv2__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 3vw, 2.9rem) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 .6rem !important;
}

/* Tagline */
.dlv2__tagline {
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  color: var(--decorloft-text-med) !important;
  line-height: 1.6 !important;
  margin: 0 0 .9rem !important;
  font-style: italic;
}

/* Rating row */
.dlv2__rating-row {
  display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin-bottom: 1.2rem;
}
.dlv2__stars { display: flex; gap: 2px; }
.dlv2__stars svg { width: 12px; height: 12px; fill: var(--decorloft-gold); }
.dlv2__review-link {
  font-family: var(--font-body); font-size: .68rem;
  color: var(--decorloft-text-light); letter-spacing: .04em;
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.dlv2__review-link:hover { color: var(--decorloft-gold-dark); }
.dlv2__recommend {
  font-family: var(--font-body); font-size: .65rem;
  color: #4a7248; font-weight: var(--weight-medium);
}

/* Origin story */
.dlv2__story { margin-bottom: 1.4rem; }
.dlv2__story-line {
  width: 36px; height: 1.5px;
  background: var(--decorloft-gold);
  margin-bottom: .9rem;
}
.dlv2__story-text {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: var(--decorloft-text-med) !important;
  margin: 0 !important;
}

/* Price block */
.dlv2__price-block {
  background: var(--decorloft-cream);
  border: 1px solid var(--decorloft-border-light);
  border-left: 3px solid var(--decorloft-gold);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
.dlv2__price-main {
  display: flex; align-items: baseline; gap: .75rem;
  flex-wrap: wrap; margin-bottom: .35rem;
}
.dlv2__price {
  font-family: var(--font-heading);
  font-size: 2.3rem; font-weight: var(--weight-normal);
  color: var(--decorloft-black); line-height: 1; letter-spacing: -.02em;
}
.dlv2__compare {
  font-family: var(--font-body); font-size: .95rem;
  color: var(--decorloft-text-light); text-decoration: line-through;
}
.dlv2__price-sub {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
}
.dlv2__vat-note {
  font-family: var(--font-body); font-size: .62rem;
  color: var(--decorloft-text-light); letter-spacing: .06em;
}
.dlv2__tabby {
  font-family: var(--font-body); font-size: .65rem;
  color: var(--decorloft-text-med); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.dlv2__tabby strong { color: var(--decorloft-black); }
.dlv2__tabby-logo {
  background: #3DBBAD; color: #fff;
  font-size: .55rem; font-weight: var(--weight-semibold);
  padding: .15rem .45rem; letter-spacing: .05em; display: inline-block;
}

/* Delivery */
.dlv2__delivery {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem; margin-bottom: 1.2rem;
}
.dlv2__delivery-item {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .75rem .9rem;
  border: 1px solid var(--decorloft-border-light);
  background: var(--decorloft-white);
}
.dlv2__delivery-item--cod {
  background: rgba(201,169,110,.05);
  border-color: rgba(201,169,110,.2);
}
.dlv2__delivery-item--cod svg { stroke: var(--decorloft-gold-dark); }
.dlv2__delivery-item:not(.dlv2__delivery-item--cod) svg { stroke: #4a7248; }
.dlv2__delivery-title {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: var(--weight-semibold);
  color: var(--decorloft-black); display: block; margin-bottom: 1px;
}
.dlv2__delivery-sub {
  font-family: var(--font-body);
  font-size: .6rem; color: var(--decorloft-text-med); letter-spacing: .04em;
}

/* ── Form / Options ─────────────────────────────────── */
.dlv2__form { margin-bottom: .1rem; }

.dlv2__option { margin-bottom: 1.2rem; }
.dlv2__option-label {
  font-family: var(--font-body);
  font-size: .65rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: var(--weight-medium);
  color: var(--decorloft-black); margin-bottom: .6rem;
  display: flex; gap: .5rem; align-items: center;
}
.dlv2__option-chosen {
  color: var(--decorloft-gold-dark); font-weight: var(--weight-normal);
  text-transform: none; letter-spacing: .04em;
}
.dlv2__option-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.dlv2__opt-btn {
  padding: .48rem 1.1rem;
  border: 1.5px solid var(--decorloft-border);
  background: transparent;
  font-family: var(--font-body); font-size: .78rem;
  color: var(--decorloft-text-med); cursor: pointer;
  transition: all var(--transition-base); letter-spacing: .04em;
}
.dlv2__opt-btn:hover { border-color: var(--decorloft-gold); color: var(--decorloft-gold-dark); }
.dlv2__opt-btn--active { border-color: var(--decorloft-gold) !important; background: var(--decorloft-gold) !important; color: #fff !important; }

/* Scarcity */
.dlv2__scarcity {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-size: .7rem;
  color: #A8603A; letter-spacing: .06em;
  margin-bottom: .75rem;
}
.dlv2__scarcity svg { color: #A8603A; flex-shrink: 0; }

/* ATC row */
.dlv2__atc-row {
  display: flex; gap: .65rem; margin-bottom: 1rem;
}
.dlv2__qty {
  display: flex; align-items: center;
  border: 1.5px solid var(--decorloft-border); flex-shrink: 0;
}
.dlv2__qty-btn {
  width: 42px; height: 52px;
  background: transparent; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--decorloft-text-med);
  transition: background var(--transition-fast), color var(--transition-fast);
  display: flex; align-items: center; justify-content: center;
}
.dlv2__qty-btn:hover { background: var(--decorloft-cream); color: var(--decorloft-black); }
.dlv2__qty-num {
  width: 42px; height: 52px;
  border-left: 1px solid var(--decorloft-border);
  border-right: 1px solid var(--decorloft-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: .9rem;
  color: var(--decorloft-black); font-weight: var(--weight-medium);
  user-select: none;
}

.dlv2__atc-btn {
  flex: 1; height: 52px;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--decorloft-black); border: none;
  color: var(--decorloft-white);
  font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; font-weight: var(--weight-semibold);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s;
}
.dlv2__atc-btn::after {
  content: ''; position: absolute; inset: 0;
  background: var(--decorloft-gold-dark);
  transform: translateX(-102%);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94);
}
.dlv2__atc-btn:hover:not(:disabled)::after { transform: translateX(0); }
.dlv2__atc-btn > * { position: relative; z-index: 1; }
.dlv2__atc-btn:active { transform: scale(.98); }
.dlv2__atc-btn:disabled { opacity: .45; cursor: not-allowed; }
.dlv2__atc-btn svg { flex-shrink: 0; }

/* Gift toggle */
.dlv2__gift-toggle {
  border: 1.5px solid var(--decorloft-border-light);
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  cursor: pointer; margin-bottom: 0;
  transition: border-color var(--transition-base), background var(--transition-base);
  user-select: none;
}
.dlv2__gift-toggle:hover,
.dlv2__gift-toggle--active {
  border-color: var(--decorloft-gold);
  background: var(--decorloft-gold-subtle);
}
.dlv2__gift-icon { font-size: 1.1rem; flex-shrink: 0; }
.dlv2__gift-text { flex: 1; }
.dlv2__gift-title {
  font-family: var(--font-body);
  font-size: .78rem; font-weight: var(--weight-medium);
  color: var(--decorloft-black); display: block; margin-bottom: 1px;
}
.dlv2__gift-sub {
  font-family: var(--font-body);
  font-size: .62rem; color: var(--decorloft-text-light); letter-spacing: .04em;
}
.dlv2__gift-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--decorloft-border);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-base); flex-shrink: 0;
}
.dlv2__gift-toggle--active .dlv2__gift-check {
  background: var(--decorloft-gold); border-color: var(--decorloft-gold); color: #fff;
}
.dlv2__gift-check svg { opacity: 0; transition: opacity var(--transition-fast); }
.dlv2__gift-toggle--active .dlv2__gift-check svg { opacity: 1; }

.dlv2__gift-msg {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.25,.46,.45,.94);
  margin-bottom: 0;
}
.dlv2__gift-label {
  display: block; font-family: var(--font-body);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--decorloft-text-med); margin: .85rem 0 .4rem;
}
.dlv2__gift-textarea {
  width: 100%; resize: none;
  border: 1px solid var(--decorloft-border);
  font-family: var(--font-body); font-size: .82rem;
  color: var(--decorloft-black);
  padding: .65rem .85rem; outline: none;
  background: var(--decorloft-white);
  transition: border-color var(--transition-fast);
}
.dlv2__gift-textarea:focus { border-color: var(--decorloft-gold); }

/* Payment options */
.dlv2__pay-opts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem; margin-top: .85rem;
}
.dlv2__pay-opt {
  border: 1.5px solid var(--decorloft-border-light);
  padding: .7rem .85rem;
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; background: transparent;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.dlv2__pay-opt:hover,
.dlv2__pay-opt--active {
  border-color: var(--decorloft-gold);
  background: var(--decorloft-gold-subtle);
}
.dlv2__pay-opt svg { stroke: var(--decorloft-text-med); flex-shrink: 0; }
.dlv2__pay-opt--active svg { stroke: var(--decorloft-gold-dark); }
.dlv2__pay-opt div { text-align: left; }
.dlv2__pay-opt span {
  display: block; font-family: var(--font-body);
  font-size: .72rem; font-weight: var(--weight-medium); color: var(--decorloft-black);
}
.dlv2__pay-opt small {
  font-family: var(--font-body);
  font-size: .6rem; color: var(--decorloft-text-light); letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════
   ZERO RISK BAR
══════════════════════════════════════════════════════ */
.dlv2__zero-risk {
  background: var(--decorloft-black);
  padding: 1.1rem var(--container-padding);
}
.dlv2__zero-risk-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; align-items: flex-start; gap: 1.5rem;
  flex-wrap: wrap;
}
.dlv2__zr-label {
  font-family: var(--font-body);
  font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; font-weight: var(--weight-medium);
  color: var(--decorloft-gold); white-space: nowrap; flex-shrink: 0;
  padding-top: .1rem;
}
.dlv2__zr-items { display: flex; gap: 1.5rem; flex-wrap: wrap; flex: 1; }
.dlv2__zr-item {
  display: flex; align-items: flex-start; gap: .4rem;
  font-family: var(--font-body); font-size: .64rem;
  color: rgba(250,248,245,.45); letter-spacing: .04em; line-height: 1.5;
  max-width: 260px;
}
.dlv2__zr-item svg { stroke: rgba(201,169,110,.55); flex-shrink: 0; margin-top: 2px; }

/* ══════════════════════════════════════════════════════
   CUSTOMER PROOF
══════════════════════════════════════════════════════ */
.dlv2__proof {
  background: var(--decorloft-cream);
  border-top: 1px solid var(--decorloft-border-light);
  border-bottom: 1px solid var(--decorloft-border-light);
  padding: 3rem var(--container-padding);
}
.dlv2__proof-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 3.5rem; align-items: center;
}
.dlv2__proof-photo { position: relative; overflow: hidden; }
.dlv2__proof-photo img {
  width: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover;
}
.dlv2__proof-photo-label {
  position: absolute; bottom: .75rem; left: .75rem;
  background: rgba(26,24,21,.7); backdrop-filter: blur(4px);
  color: rgba(250,248,245,.7); padding: .3rem .75rem;
  font-family: var(--font-body); font-size: .6rem; letter-spacing: .1em;
}
.dlv2__proof-content--full { grid-column: 1 / -1; }
.dlv2__proof-mark {
  font-family: var(--font-heading); font-size: 5rem;
  line-height: .6; color: rgba(201,169,110,.12);
  margin-bottom: .5rem;
}
.dlv2__proof-quote {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-size: 1.45rem !important;
  line-height: 1.65 !important;
  color: var(--decorloft-black) !important;
  margin: 0 0 1.1rem !important;
  font-weight: var(--weight-light) !important;
}
.dlv2__proof-cite {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .68rem;
  color: var(--decorloft-text-med); font-style: normal;
  letter-spacing: .06em; margin-bottom: .9rem;
}
.dlv2__proof-cite svg { fill: var(--decorloft-gold); flex-shrink: 0; width: 10px; height: 10px; }
.dlv2__proof-stats {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-body); font-size: .68rem;
  color: var(--decorloft-text-light); flex-wrap: wrap;
}
.dlv2__proof-stats strong { color: var(--decorloft-black); }

/* ══════════════════════════════════════════════════════
   WHATSAPP CTA
══════════════════════════════════════════════════════ */
.dlv2__wa-zone {
  padding: 2rem var(--container-padding);
  background: var(--decorloft-white);
}
.dlv2__wa-inner { max-width: var(--container-max); margin: 0 auto; }
.dlv2__wa-cta {
  display: flex; align-items: center; gap: .9rem;
  background: #EDFAF4; border: 1px solid rgba(18,140,126,.12);
  padding: 1.1rem 1.3rem; text-decoration: none;
  transition: background var(--transition-base);
}
.dlv2__wa-cta:hover { background: #D9F5EC; }
.dlv2__wa-icon {
  width: 38px; height: 38px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dlv2__wa-icon svg { width: 20px; height: 20px; }
.dlv2__wa-text { flex: 1; }
.dlv2__wa-title {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: var(--weight-medium);
  color: var(--decorloft-black); display: block; margin-bottom: 2px;
}
.dlv2__wa-sub {
  font-family: var(--font-body);
  font-size: .65rem; color: var(--decorloft-text-med); letter-spacing: .04em;
}
.dlv2__wa-arrow { font-size: .85rem; color: #128C7E; }

/* ══════════════════════════════════════════════════════
   ACCORDION ZONE
══════════════════════════════════════════════════════ */
.dlv2__accordion-zone {
  background: var(--decorloft-white);
  border-top: 1px solid var(--decorloft-border-light);
  padding: 0 var(--container-padding);
}
.dlv2__accordion-inner {
  max-width: var(--container-max); margin: 0 auto;
  border-bottom: 1px solid var(--decorloft-border-light);
}

.dlv2__acc { border-top: 1px solid var(--decorloft-border-light); }
.dlv2__acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .85rem;
  font-weight: var(--weight-medium); color: var(--decorloft-black);
  letter-spacing: .04em; text-align: left;
  transition: color var(--transition-fast);
}
.dlv2__acc-btn:hover { color: var(--decorloft-gold-dark); }
.dlv2__acc--open .dlv2__acc-btn { color: var(--decorloft-gold-dark); }
.dlv2__acc-chevron {
  flex-shrink: 0;
  color: var(--decorloft-text-light);
  transition: transform var(--transition-base);
}
.dlv2__acc--open .dlv2__acc-chevron { transform: rotate(180deg); }
.dlv2__acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.25,.46,.45,.94);
}
.dlv2__acc-inner {
  font-family: var(--font-body);
  font-size: .84rem; line-height: 1.85;
  color: var(--decorloft-text-med); padding-bottom: 1.3rem;
}

/* Feature rows */
.dlv2__feature-row {
  padding: .75rem 0;
  border-bottom: 1px solid var(--decorloft-border-light);
}
.dlv2__feature-row:last-child { border-bottom: none; }
.dlv2__feature-title {
  display: block; font-size: .82rem;
  font-weight: var(--weight-medium); color: var(--decorloft-black);
  margin-bottom: .25rem;
}
.dlv2__feature-desc { margin: 0; line-height: 1.7; }

/* Product description fallback */
.dlv2__product-desc h1, .dlv2__product-desc h2, .dlv2__product-desc h3 {
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important;
  margin: 1rem 0 .4rem !important;
}
.dlv2__product-desc ul, .dlv2__product-desc ol { padding-left: 1.2rem; margin: .5rem 0; }
.dlv2__product-desc li { margin-bottom: .3rem; }
.dlv2__product-desc p { margin-bottom: .6rem; }

/* Spec grid */
.dlv2__spec-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .75rem 2rem;
}
.dlv2__spec-label {
  display: block; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--decorloft-text-light); margin-bottom: .15rem;
}
.dlv2__spec-val {
  font-size: .84rem; font-weight: var(--weight-medium); color: var(--decorloft-black);
}

/* FAQ */
.dlv2__faq { padding-bottom: 0 !important; }
.dlv2__faq-item { border-bottom: 1px solid var(--decorloft-border-light); }
.dlv2__faq-item:last-child { border-bottom: none; }
.dlv2__faq-q {
  width: 100%; display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .82rem;
  color: var(--decorloft-black); text-align: left; letter-spacing: .03em;
  transition: color var(--transition-fast);
}
.dlv2__faq-q:hover { color: var(--decorloft-gold-dark); }
.dlv2__faq-item--open .dlv2__faq-q { color: var(--decorloft-gold-dark); }
.dlv2__faq-num {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--decorloft-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; color: var(--decorloft-text-light); flex-shrink: 0; margin-top: 1px;
  transition: all var(--transition-base);
}
.dlv2__faq-item--open .dlv2__faq-num {
  background: var(--decorloft-gold); border-color: var(--decorloft-gold); color: #fff;
}
.dlv2__faq-a p {
  font-family: var(--font-body); font-size: .8rem;
  line-height: 1.8; color: var(--decorloft-text-med);
  padding-bottom: 1rem; margin: 0; padding-left: calc(20px + .7rem);
}

/* ══════════════════════════════════════════════════════
   DECORLOFT PROMISE
══════════════════════════════════════════════════════ */
.dlv2__promise {
  background: var(--decorloft-black);
  padding: 4rem var(--container-padding);
}
.dlv2__promise-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.dlv2__promise-eyebrow {
  font-family: var(--font-body);
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  font-weight: var(--weight-medium); color: var(--decorloft-gold);
  display: block; margin-bottom: .8rem;
}
.dlv2__promise-title {
  font-family: var(--font-heading) !important;
  font-size: 2.5rem !important; font-weight: var(--weight-light) !important;
  color: var(--decorloft-white) !important;
  line-height: 1.15 !important; letter-spacing: -.01em !important;
  margin: 0 0 1rem !important;
}
.dlv2__promise-body {
  font-family: var(--font-body);
  font-size: .84rem; line-height: 1.85;
  color: rgba(250,248,245,.4); margin-bottom: 1.5rem;
}
.dlv2__promise-list { display: flex; flex-direction: column; gap: .7rem; }
.dlv2__promise-item { display: flex; align-items: flex-start; gap: .6rem; }
.dlv2__promise-mark { color: var(--decorloft-gold); font-size: .6rem; flex-shrink: 0; margin-top: .25rem; }
.dlv2__promise-item span {
  font-family: var(--font-body); font-size: .78rem;
  color: rgba(250,248,245,.45); line-height: 1.55;
}
.dlv2__promise-item strong { color: var(--decorloft-white); font-weight: var(--weight-medium); }

.dlv2__promise-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: rgba(201,169,110,.08);
}
.dlv2__stat {
  background: rgba(255,255,255,.02);
  padding: 2.2rem 2rem;
  transition: background var(--transition-base);
}
.dlv2__stat:hover { background: rgba(201,169,110,.05); }
.dlv2__stat-num {
  font-family: var(--font-heading);
  font-size: 3rem; font-weight: var(--weight-light);
  color: var(--decorloft-white); line-height: 1;
  letter-spacing: -.02em; display: block; margin-bottom: .4rem;
}
.dlv2__stat-num em { font-style: normal; color: var(--decorloft-gold); font-size: 2rem; }
.dlv2__stat-label {
  font-family: var(--font-body);
  font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(250,248,245,.25);
}

/* ══════════════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════════════ */
.dlv2__reviews {
  background: var(--decorloft-white);
  padding: 4rem var(--container-padding);
  border-top: 1px solid var(--decorloft-border-light);
}
.dlv2__reviews-inner { max-width: var(--container-max); margin: 0 auto; }
.dlv2__reviews-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.dlv2__section-eyebrow {
  font-family: var(--font-body);
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  font-weight: var(--weight-medium); color: var(--decorloft-gold);
  display: block; margin-bottom: .65rem;
}
.dlv2__section-title {
  font-family: var(--font-heading) !important;
  font-size: 2.2rem !important; font-weight: var(--weight-light) !important;
  color: var(--decorloft-black) !important; letter-spacing: -.01em !important;
  margin: 0 !important;
}
.dlv2__rating-summary { display: flex; align-items: center; gap: 2.5rem; }
.dlv2__rating-big { text-align: center; }
.dlv2__rating-big-num {
  font-family: var(--font-heading); font-size: 3.8rem;
  font-weight: var(--weight-light); color: var(--decorloft-black);
  line-height: 1; letter-spacing: -.02em; display: block;
}
.dlv2__rating-big-stars { display: flex; gap: 2px; justify-content: center; margin: .3rem 0; }
.dlv2__rating-big-stars svg { width: 12px; height: 12px; fill: var(--decorloft-gold); }
.dlv2__rating-big-label {
  font-family: var(--font-body); font-size: .62rem;
  color: var(--decorloft-text-light); letter-spacing: .06em;
}
.dlv2__rating-bars { display: flex; flex-direction: column; gap: .3rem; min-width: 160px; }
.dlv2__rbar { display: flex; align-items: center; gap: .55rem; }
.dlv2__rbar > span:first-child {
  font-family: var(--font-body); font-size: .62rem;
  color: var(--decorloft-text-light); width: 22px; text-align: right; flex-shrink: 0;
}
.dlv2__rbar > span:last-child {
  font-family: var(--font-body); font-size: .6rem;
  color: var(--decorloft-text-light); width: 28px; flex-shrink: 0;
}
.dlv2__rbar-track { flex: 1; height: 4px; background: var(--decorloft-cream-dark, #E8E0D4); border-radius: 2px; overflow: hidden; }
.dlv2__rbar-fill { height: 100%; background: var(--decorloft-gold); border-radius: 2px; }

.dlv2__review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.dlv2__review-card {
  border: 1px solid var(--decorloft-border-light); padding: 1.5rem 1.4rem;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.dlv2__review-card:hover { box-shadow: 0 4px 20px rgba(26,24,21,.08); transform: translateY(-2px); }
.dlv2__review-card--feat { border-color: rgba(201,169,110,.22); background: var(--decorloft-cream); }
.dlv2__review-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; gap: .5rem; }
.dlv2__reviewer { display: flex; align-items: center; gap: .65rem; }
.dlv2__reviewer-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--decorloft-cream-dark, #E8E0D4); border: 1px solid var(--decorloft-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1rem; font-style: italic;
  color: var(--decorloft-gold-dark); flex-shrink: 0;
}
.dlv2__reviewer-name { display: block; font-size: .78rem; font-weight: var(--weight-medium); color: var(--decorloft-black); margin-bottom: 1px; }
.dlv2__reviewer-loc { font-size: .62rem; color: var(--decorloft-text-light); letter-spacing: .05em; }
.dlv2__review-meta { text-align: right; }
.dlv2__review-verified { font-size: .6rem; color: #4a7248; letter-spacing: .06em; display: block; margin-bottom: .2rem; }
.dlv2__review-stars { display: flex; gap: 1px; justify-content: flex-end; }
.dlv2__review-mark { font-family: var(--font-heading); font-size: 3rem; line-height: .55; color: rgba(201,169,110,.1); margin-bottom: .4rem; }
.dlv2__review-text {
  font-family: var(--font-heading) !important;
  font-style: italic !important; font-size: .96rem !important;
  line-height: 1.75 !important; color: var(--decorloft-text-med) !important;
  margin: 0 0 1rem !important;
}
.dlv2__review-purchased {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-body); font-size: .62rem;
  color: var(--decorloft-text-light); letter-spacing: .06em;
  border-top: 1px solid var(--decorloft-border-light); padding-top: .7rem;
}
.dlv2__review-purchased svg { fill: var(--decorloft-gold); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   COMPLETE THE LOOK
══════════════════════════════════════════════════════ */
.dlv2__ctl {
  background: var(--decorloft-cream);
  padding: 4rem var(--container-padding);
  border-top: 1px solid var(--decorloft-border);
}
.dlv2__ctl-inner { max-width: var(--container-max); margin: 0 auto; }
.dlv2__ctl-head { text-align: center; margin-bottom: 2.5rem; }
.dlv2__ctl-scene-label {
  font-family: var(--font-body); font-size: .7rem;
  color: var(--decorloft-text-light); letter-spacing: .1em;
  font-style: italic; margin-top: .5rem;
}
.dlv2__ctl-products {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--decorloft-border-light);
  border: 1px solid var(--decorloft-border-light);
  max-width: 640px; margin: 0 auto;
}
.dlv2__ctl-card {
  background: var(--decorloft-white);
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.2rem; transition: background var(--transition-fast);
}
.dlv2__ctl-card:hover { background: rgba(201,169,110,.04); }
.dlv2__ctl-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--decorloft-gold); color: var(--decorloft-black);
  font-family: var(--font-body); font-size: .58rem; font-weight: var(--weight-semibold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dlv2__ctl-img-wrap {
  width: 68px; height: 68px; overflow: hidden;
  background: var(--decorloft-cream); flex-shrink: 0; display: block;
}
.dlv2__ctl-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-base); }
.dlv2__ctl-card:hover .dlv2__ctl-img-wrap img { transform: scale(1.06); }
.dlv2__ctl-img-empty { width: 100%; height: 100%; background: var(--decorloft-cream-dark, #E8E0D4); }
.dlv2__ctl-info {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.dlv2__ctl-name {
  display: block; font-family: var(--font-body);
  font-size: .82rem; font-weight: var(--weight-medium); color: var(--decorloft-black);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .15rem; transition: color var(--transition-fast);
}
.dlv2__ctl-name:hover { color: var(--decorloft-gold-dark); }
.dlv2__ctl-price {
  font-family: var(--font-heading); font-size: 1rem;
  color: var(--decorloft-gold-dark); font-weight: var(--weight-medium); display: block; margin-bottom: .1rem;
}
.dlv2__ctl-note { font-family: var(--font-body); font-size: .62rem; color: var(--decorloft-text-light); letter-spacing: .05em; display: block; }
.dlv2__ctl-add {
  display: flex; align-items: center; gap: .3rem;
  padding: .48rem .9rem;
  border: 1.5px solid var(--decorloft-border);
  background: transparent;
  font-family: var(--font-body); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  font-weight: var(--weight-medium); color: var(--decorloft-black);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all var(--transition-base);
}
.dlv2__ctl-add:hover { background: var(--decorloft-gold); border-color: var(--decorloft-gold); color: #fff; }
.dlv2__ctl-add--done { background: var(--decorloft-sage) !important; border-color: var(--decorloft-sage) !important; color: #fff !important; }
.dlv2__ctl-soldout { font-family: var(--font-body); font-size: .62rem; color: var(--decorloft-text-light); letter-spacing: .08em; flex-shrink: 0; }
.dlv2__ctl-add-all {
  background: var(--decorloft-black); border: none; color: var(--decorloft-white);
  font-family: var(--font-body); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; font-weight: var(--weight-semibold);
  padding: 1rem; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  transition: background var(--transition-base);
}
.dlv2__ctl-add-all:hover { background: var(--decorloft-gold-dark); }
.dlv2__ctl-add-all svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; transition: transform var(--transition-base); }
.dlv2__ctl-add-all:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════
   STICKY ATC
══════════════════════════════════════════════════════ */
.dlv2__sticky {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--decorloft-white);
  border-top: 2px solid var(--decorloft-gold);
  box-shadow: 0 -8px 30px rgba(26,24,21,.1);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
  z-index: 400;
}
.dlv2__sticky--visible { transform: translateY(0); }
.dlv2__sticky-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: .85rem var(--container-padding);
  display: flex; align-items: center; gap: 1.5rem;
}
.dlv2__sticky-prod { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; }
.dlv2__sticky-img {
  width: 44px; height: 44px; flex-shrink: 0;
  object-fit: cover; background: var(--decorloft-cream);
}
.dlv2__sticky-name {
  display: block; font-family: var(--font-body);
  font-size: .82rem; font-weight: var(--weight-medium);
  color: var(--decorloft-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv2__sticky-price {
  font-family: var(--font-heading); font-size: 1.1rem;
  color: var(--decorloft-gold-dark); font-weight: var(--weight-medium);
}
.dlv2__sticky-right { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.dlv2__sticky-cod {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .62rem;
  color: var(--decorloft-text-light); letter-spacing: .06em; white-space: nowrap;
}
.dlv2__sticky-cod svg { stroke: var(--decorloft-gold); flex-shrink: 0; }
.dlv2__sticky-btn {
  height: 44px; padding: 0 2rem;
  background: var(--decorloft-black); border: none; color: var(--decorloft-white);
  font-family: var(--font-body); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; font-weight: var(--weight-semibold);
  cursor: pointer; white-space: nowrap; transition: background var(--transition-base);
}
.dlv2__sticky-btn:hover { background: var(--decorloft-gold-dark); }

/* ══════════════════════════════════════════════════════
   WHATSAPP FLOAT
══════════════════════════════════════════════════════ */
.dlv2__wa-float {
  position: fixed; bottom: 5.5rem; right: 1.8rem;
  width: 52px; height: 52px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; box-shadow: 0 4px 20px rgba(37,211,102,.4);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.dlv2__wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,.55); }
.dlv2__wa-float svg { width: 26px; height: 26px; flex-shrink: 0; }
.dlv2__wa-float-tip {
  position: absolute; right: calc(100% + .7rem);
  background: var(--decorloft-black); color: var(--decorloft-white);
  font-family: var(--font-body); font-size: .65rem;
  letter-spacing: .06em; padding: .38rem .85rem; white-space: nowrap;
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--transition-base), transform var(--transition-base); pointer-events: none;
}
.dlv2__wa-float:hover .dlv2__wa-float-tip { opacity: 1; transform: translateX(0); }

/* ══════════════════════════════════════════════════════
   PAGE ENTRY ANIMATION
══════════════════════════════════════════════════════ */
@keyframes dlv2FadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dlv2__gallery { animation: dlv2FadeUp .55s ease both; }
.dlv2__info    { animation: dlv2FadeUp .55s .1s ease both; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media screen and (max-width: 989px) {
  .dlv2__wrap { grid-template-columns: 1fr; gap: 2rem; }
  .dlv2__gallery { position: static; }
  .dlv2__promise-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .dlv2__proof-inner { grid-template-columns: 1fr; gap: 2rem; }
  .dlv2__rating-summary { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .dlv2__review-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 600px) {
  .dlv2__delivery { grid-template-columns: 1fr; }
  .dlv2__pay-opts { grid-template-columns: 1fr; }
  .dlv2__spec-grid { grid-template-columns: 1fr; }
  .dlv2__promise-stats { grid-template-columns: 1fr 1fr; }
  .dlv2__zr-items { flex-direction: column; gap: .75rem; }
  .dlv2__sticky-cod { display: none; }
  .dlv2__atc-row { flex-direction: column; }
  .dlv2__qty { width: fit-content; }
}

/* ============================================================
   END DECORLOFT PRODUCT v2 CSS
   ============================================================ */

   :root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}
/* ============================================================
   DECORLOFT — CART PAGE CSS
   Paste at BOTTOM of assets/base.css
   ============================================================ */

.dlcart-section { background: var(--decorloft-white); }
.dlcart { background: var(--decorloft-white); }

/* ── Reservation Timer ──────────────────────────────── */
.dlcart__res { background: #FFFBF0; border-bottom: 1px solid rgba(201,169,110,.2); padding: .6rem 1.5rem; }
.dlcart__res-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-size: .7rem; color: var(--decorloft-text-med); letter-spacing: .04em; flex-wrap: wrap; text-align: center;
}
.dlcart__res-inner svg { stroke: var(--decorloft-gold-dark); flex-shrink: 0; }
.dlcart__timer { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; color: var(--decorloft-gold-dark); letter-spacing: .04em; display: inline-block; min-width: 42px; }

/* ── Progress ───────────────────────────────────────── */
.dlcart__progress { background: var(--decorloft-white); border-bottom: 1px solid var(--decorloft-border-light); padding: 0 var(--container-padding); }
.dlcart__progress-inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; padding: .9rem 0; }
.dlcart__pstep { display: flex; align-items: center; gap: .5rem; }
.dlcart__pline { flex: 1; height: 1px; background: var(--decorloft-border-light); margin: 0 .75rem; min-width: 2rem; }
.dlcart__pnum {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--decorloft-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: .6rem; font-weight: 600;
  color: var(--decorloft-text-light); flex-shrink: 0; transition: all var(--transition-base);
}
.dlcart__pnum--active { background: var(--decorloft-gold); border-color: var(--decorloft-gold); color: #fff; }
.dlcart__plabel { font-family: var(--font-body); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--decorloft-text-light); font-weight: 500; }
.dlcart__pstep--active .dlcart__plabel { color: var(--decorloft-black); }

/* ── Empty ──────────────────────────────────────────── */
.dlcart__empty { max-width: 380px; margin: 5rem auto; text-align: center; padding: 2rem; display: flex; flex-direction: column; align-items: center; }
.dlcart__empty svg { stroke: var(--decorloft-text-light); margin-bottom: 1.5rem; }
.dlcart__empty-title { font-family: var(--font-heading) !important; font-size: 2rem !important; font-weight: 300 !important; color: var(--decorloft-black) !important; margin: 0 0 .6rem !important; }
.dlcart__empty-sub { font-family: var(--font-heading); font-style: italic; font-size: 1rem; color: var(--decorloft-text-med); margin: 0 0 2rem; }
.dlcart__empty-cta { display: inline-flex; align-items: center; padding: .85rem 2rem; background: var(--decorloft-black); color: var(--decorloft-white); font-family: var(--font-body); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: background var(--transition-base); }
.dlcart__empty-cta:hover { background: var(--decorloft-gold-dark); }

/* ── Main grid ──────────────────────────────────────── */
.dlcart__wrap { max-width: var(--container-max); margin: 0 auto; padding: 2.5rem var(--container-padding); display: grid; grid-template-columns: 1fr 360px; gap: 3rem; align-items: start; }
.dlcart__left { display: flex; flex-direction: column; }

/* ── Free shipping bar ──────────────────────────────── */
.dlcart__ship { padding: .85rem 1.1rem; background: var(--decorloft-cream); border: 1px solid var(--decorloft-border-light); margin-bottom: .85rem; }
.dlcart__ship-msg { font-family: var(--font-body); font-size: .72rem; color: var(--decorloft-text-med); margin-bottom: .5rem; letter-spacing: .04em; }
.dlcart__ship-msg strong { color: var(--decorloft-black); }
.dlcart__ship-msg--done { display: flex; align-items: center; gap: .4rem; color: var(--decorloft-sage); font-weight: 500; }
.dlcart__ship-msg--done svg { stroke: var(--decorloft-sage); flex-shrink: 0; }
.dlcart__ship-track { height: 4px; background: var(--decorloft-cream-dark, #E8E0D4); border-radius: 2px; overflow: hidden; }
.dlcart__ship-fill { height: 100%; background: var(--decorloft-gold); border-radius: 2px; transition: width .6s cubic-bezier(.25,.46,.45,.94); }

/* ── Items ──────────────────────────────────────────── */
.dlcart__items { display: flex; flex-direction: column; }
.dlcart__item { display: flex; gap: 1.1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--decorloft-border-light); transition: opacity .3s ease, transform .3s ease; }
.dlcart__item:first-child { border-top: 1px solid var(--decorloft-border-light); }
.dlcart__item-img { width: 100px; height: 100px; flex-shrink: 0; background: var(--decorloft-cream); overflow: hidden; display: block; }
.dlcart__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-base); }
.dlcart__item:hover .dlcart__item-img img { transform: scale(1.04); }
.dlcart__item-img-empty { width: 100%; height: 100%; background: var(--decorloft-cream-dark, #E8E0D4); }
.dlcart__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.dlcart__item-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; }
.dlcart__item-meta { flex: 1; min-width: 0; }
.dlcart__item-name { display: block; font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--decorloft-black); text-decoration: none; margin-bottom: .2rem; transition: color var(--transition-fast); }
.dlcart__item-name:hover { color: var(--decorloft-gold-dark); }
.dlcart__item-variant { display: block; font-size: .68rem; color: var(--decorloft-text-light); letter-spacing: .06em; margin-bottom: .15rem; }
.dlcart__item-prop { display: block; font-size: .68rem; color: var(--decorloft-text-light); font-style: italic; }
.dlcart__item-saving { display: inline-block; font-size: .6rem; letter-spacing: .06em; color: var(--decorloft-sage); font-weight: 500; margin-top: .2rem; }
.dlcart__item-prices { text-align: right; flex-shrink: 0; }
.dlcart__item-price { display: block; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; color: var(--decorloft-black); }
.dlcart__item-was { display: block; font-size: .72rem; color: var(--decorloft-text-light); text-decoration: line-through; }
.dlcart__item-controls { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }

/* Qty */
.dlcart__qty { display: flex; align-items: center; border: 1.5px solid var(--decorloft-border); }
.dlcart__qty-btn { width: 34px; height: 34px; background: transparent; border: none; font-size: 1rem; color: var(--decorloft-text-med); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); }
.dlcart__qty-btn:hover:not(:disabled) { background: var(--decorloft-cream); color: var(--decorloft-black); }
.dlcart__qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.dlcart__qty-val { width: 34px; height: 34px; border-left: 1px solid var(--decorloft-border); border-right: 1px solid var(--decorloft-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: .88rem; font-weight: 500; color: var(--decorloft-black); user-select: none; }
.dlcart__unit { font-size: .65rem; color: var(--decorloft-text-light); letter-spacing: .05em; }
.dlcart__remove { display: flex; align-items: center; gap: .35rem; font-family: var(--font-body); font-size: .65rem; color: var(--decorloft-text-light); letter-spacing: .07em; background: none; border: none; cursor: pointer; padding: 0; transition: color var(--transition-fast); }
.dlcart__remove:hover { color: #C4513A; }

/* Gift */
.dlcart__gift-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem 1rem; background: var(--decorloft-white); border: 1px solid var(--decorloft-border-light); border-top: none; cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base); text-align: left; }
.dlcart__gift-btn:hover, .dlcart__gift-btn--active { background: var(--decorloft-gold-subtle); border-color: rgba(201,169,110,.3); }
.dlcart__gift-btn-left { display: flex; align-items: center; gap: .65rem; }
.dlcart__gift-btn-left svg { stroke: var(--decorloft-gold-dark); flex-shrink: 0; }
.dlcart__gift-btn-left strong { display: block; font-family: var(--font-body); font-size: .78rem; font-weight: 500; color: var(--decorloft-black); margin-bottom: 1px; }
.dlcart__gift-btn-left small { display: block; font-size: .62rem; color: var(--decorloft-text-light); letter-spacing: .04em; }
.dlcart__gift-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--decorloft-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-base); }
.dlcart__gift-check svg { opacity: 0; transition: opacity var(--transition-fast); }
.dlcart__gift-check--on { background: var(--decorloft-gold); border-color: var(--decorloft-gold); }
.dlcart__gift-check--on svg { opacity: 1; stroke: #fff; }
.dlcart__gift-panel { max-height: 0; overflow: hidden; background: var(--decorloft-cream); border: 1px solid var(--decorloft-border-light); border-top: none; }
.dlcart__gift-label { display: block; font-family: var(--font-body); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--decorloft-text-med); padding: 1rem 1rem .35rem; }
.dlcart__gift-textarea { width: 100%; resize: none; border: none; border-top: 1px solid var(--decorloft-border-light); background: var(--decorloft-white); font-family: var(--font-body); font-size: .84rem; color: var(--decorloft-black); padding: .75rem 1rem; outline: none; display: block; }
.dlcart__back { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-size: .65rem; color: var(--decorloft-text-light); letter-spacing: .08em; text-decoration: none; margin-top: 1.1rem; transition: color var(--transition-fast); }
.dlcart__back:hover { color: var(--decorloft-gold-dark); }

/* ── RIGHT / Summary ────────────────────────────────── */
.dlcart__right { position: sticky; top: 1.5rem; }
.dlcart__summary { background: var(--decorloft-cream); border: 1px solid var(--decorloft-border); }
.dlcart__sum-head { padding: 1rem 1.3rem; border-bottom: 1px solid var(--decorloft-border); display: flex; align-items: center; justify-content: space-between; }
.dlcart__sum-title { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--decorloft-text-med); }
.dlcart__sum-count { font-size: .65rem; color: var(--decorloft-text-light); letter-spacing: .06em; }
.dlcart__sum-totals { padding: 1rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; border-bottom: 1px solid var(--decorloft-border); }
.dlcart__sum-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-body); font-size: .78rem; color: var(--decorloft-text-med); }
.dlcart__sum-row--disc { color: var(--decorloft-sage); font-weight: 500; }
.dlcart__sum-row--total { padding-top: .5rem; border-top: 1px solid var(--decorloft-border-light); margin-top: .2rem; }
.dlcart__sum-row--total > span:first-child { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 400; color: var(--decorloft-black); }
.dlcart__sum-row--total > span:last-child { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--decorloft-gold-dark); letter-spacing: -.01em; }
.dlcart__sum-free { color: var(--decorloft-sage); font-weight: 600; }
.dlcart__sum-tbc { color: var(--decorloft-text-light); font-style: italic; font-size: .72rem; }
.dlcart__sum-saving { display: flex; align-items: center; gap: .45rem; padding: .7rem 1.3rem; background: #EEF5F1; border-bottom: 1px solid var(--decorloft-border-light); font-family: var(--font-body); font-size: .72rem; color: var(--decorloft-sage); font-weight: 500; }
.dlcart__sum-saving svg { stroke: var(--decorloft-sage); flex-shrink: 0; }

/* COD */
.dlcart__cod { padding: 1rem 1.3rem; background: rgba(201,169,110,.05); border-bottom: 1px solid var(--decorloft-border); }
.dlcart__cod-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.dlcart__cod-head svg { stroke: var(--decorloft-gold-dark); flex-shrink: 0; }
.dlcart__cod-name { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--decorloft-black); flex: 1; }
.dlcart__cod-badge { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background: var(--decorloft-sage); color: #fff; padding: .15rem .5rem; }
.dlcart__cod-desc { font-family: var(--font-body); font-size: .72rem; color: var(--decorloft-text-med); line-height: 1.6; margin-bottom: .75rem; }
.dlcart__cod-desc strong { color: var(--decorloft-black); }
.dlcart__cod-steps { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.dlcart__cod-steps li { display: flex; align-items: flex-start; gap: .5rem; font-family: var(--font-body); font-size: .7rem; color: var(--decorloft-text-med); line-height: 1.5; }
.dlcart__cod-steps li::before { content: attr(data-n); width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(201,169,110,.4); display: flex; align-items: center; justify-content: center; font-size: .52rem; font-weight: 700; color: var(--decorloft-gold-dark); flex-shrink: 0; margin-top: 1px; }

/* Social proof */
.dlcart__social-proof { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; border-bottom: 1px solid var(--decorloft-border-light); font-family: var(--font-body); font-size: .7rem; color: var(--decorloft-text-med); letter-spacing: .04em; }
.dlcart__sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--decorloft-sage); flex-shrink: 0; animation: dlcartBlink 2s ease-in-out infinite; }
@keyframes dlcartBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
.dlcart__social-proof strong { color: var(--decorloft-black); }

/* Trust */
.dlcart__trust { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .85rem 1.3rem; border-bottom: 1px solid var(--decorloft-border-light); }
.dlcart__trust-item { display: flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-size: .64rem; color: var(--decorloft-text-med); line-height: 1.4; }
.dlcart__trust-item svg { stroke: var(--decorloft-gold-dark); flex-shrink: 0; }
.dlcart__trust-item:nth-child(2) svg { stroke: var(--decorloft-sage); }
.dlcart__trust-item:nth-child(3) svg { stroke: #25D366; }

/* CTA */
.dlcart__cta { height: 56px; display: flex; align-items: center; justify-content: center; gap: .55rem; background: var(--decorloft-black); border: none; color: var(--decorloft-white); font-family: var(--font-body); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; cursor: pointer; margin: 1.1rem 1.3rem .4rem; width: calc(100% - 2.6rem); position: relative; overflow: hidden; transition: transform .15s; }
.dlcart__cta::after { content: ''; position: absolute; inset: 0; background: var(--decorloft-gold-dark); transform: translateX(-102%); transition: transform .38s cubic-bezier(.25,.46,.45,.94); }
.dlcart__cta:hover:not(:disabled)::after { transform: translateX(0); }
.dlcart__cta > * { position: relative; z-index: 1; }
.dlcart__cta:active { transform: scale(.99); }
.dlcart__cta:disabled { opacity: .5; cursor: not-allowed; }
#dlcart-cta-text { display: flex; align-items: center; gap: .45rem; }
.dlcart__cta svg { flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.dlcart__cta-sub { text-align: center; font-family: var(--font-body); font-size: .62rem; color: var(--decorloft-text-light); letter-spacing: .05em; padding: 0 1.3rem .85rem; display: block; }
.dlcart__tabby { margin: 0 1.3rem .9rem; padding: .6rem .85rem; background: rgba(61,187,173,.08); border: 1px solid rgba(61,187,173,.15); font-family: var(--font-body); font-size: .65rem; color: var(--decorloft-text-med); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.dlcart__tabby strong { color: var(--decorloft-black); }
.dlcart__tabby-logo { background: #3DBBAD; color: #fff; font-size: .52rem; font-weight: 700; padding: .12rem .4rem; }

/* ── Exit intent ────────────────────────────────────── */
.dlcart__exit { position: fixed; inset: 0; z-index: 9999; background: rgba(26,24,21,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.dlcart__exit--show { opacity: 1; pointer-events: all; }
.dlcart__exit-modal { background: var(--decorloft-white); max-width: 420px; width: 92%; padding: 2.4rem 2rem; position: relative; transform: translateY(16px); transition: transform .3s ease; }
.dlcart__exit--show .dlcart__exit-modal { transform: translateY(0); }
.dlcart__exit-close { position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--decorloft-text-light); transition: color var(--transition-fast); }
.dlcart__exit-close:hover { color: var(--decorloft-black); }
.dlcart__exit-eye { display: block; font-family: var(--font-body); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--decorloft-gold); margin-bottom: .6rem; }
.dlcart__exit-title { font-family: var(--font-heading) !important; font-size: 1.75rem !important; font-weight: 300 !important; color: var(--decorloft-black) !important; line-height: 1.2 !important; margin: 0 0 .75rem !important; }
.dlcart__exit-body { font-family: var(--font-body); font-size: .8rem; color: var(--decorloft-text-med); line-height: 1.7; margin-bottom: 1.2rem; }
.dlcart__exit-body strong { color: var(--decorloft-gold-dark); }
.dlcart__exit-items { background: var(--decorloft-cream); padding: .85rem 1rem; margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
.dlcart__exit-item { display: flex; align-items: center; gap: .65rem; }
.dlcart__exit-item + .dlcart__exit-item { padding-top: .6rem; border-top: 1px solid var(--decorloft-border-light); }
.dlcart__exit-item img { width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; }
.dlcart__exit-name { flex: 1; font-family: var(--font-body); font-size: .78rem; font-weight: 500; color: var(--decorloft-black); }
.dlcart__exit-price { font-family: var(--font-heading); font-size: .95rem; color: var(--decorloft-gold-dark); flex-shrink: 0; }
.dlcart__exit-cta { width: 100%; height: 50px; background: var(--decorloft-black); border: none; color: var(--decorloft-white); font-family: var(--font-body); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; cursor: pointer; margin-bottom: .65rem; transition: background var(--transition-base); display: block; }
.dlcart__exit-cta:hover { background: var(--decorloft-gold-dark); }
.dlcart__exit-dismiss { display: block; width: 100%; background: none; border: none; cursor: pointer; text-align: center; font-family: var(--font-body); font-size: .65rem; color: var(--decorloft-text-light); letter-spacing: .1em; transition: color var(--transition-fast); padding: .25rem; }
.dlcart__exit-dismiss:hover { color: var(--decorloft-text-med); }

/* ── Responsive ─────────────────────────────────────── */
@media screen and (max-width: 860px) {
  .dlcart__wrap { grid-template-columns: 1fr; gap: 2rem; }
  .dlcart__right { position: static; }
  .dlcart__cta { margin: 1.1rem 1rem .4rem; width: calc(100% - 2rem); }
  .dlcart__cta-sub { padding: 0 1rem .85rem; }
  .dlcart__tabby { margin: 0 1rem .9rem; }
}
@media screen and (max-width: 600px) {
  .dlcart__plabel { display: none; }
  .dlcart__trust { grid-template-columns: 1fr; gap: .35rem; }
  .dlcart__res-inner { font-size: .65rem; }
}

/* ============================================================
   END DECORLOFT CART CSS
   ============================================================ */
   /* ── Announcement Bar ── */
.announcements__message {
  font-size: 11px !important;
  letter-spacing: .18em !important;
}

/* ── Header Navigation ── */
.header__menu-item,
.header__menu-item span,
.list-menu__item {
  font-size: 13px !important;
  letter-spacing: .12em !important;
}

/* ── Cart Icon fix ── */
.header__icon--cart svg,
.header__icon svg {
  width: 22px !important;
  height: 22px !important;
}
/* ── Cart Icon Size Fix ── */
.header__icon--cart,
.header__icon--cart svg {
  width: 28px !important;
  height: 28px !important;
}

/* ── All header icons (search, account, cart) — make uniform ── */
.header__icon svg {
  width: 24px !important;
  height: 24px !important;
}
/* ── Cart icon ── */
.header__icon--cart svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 1.2 !important;
}

/* ── All header icons uniform ── */
.header__icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* ── Announcement bar close button ── */
.announcement-bar__close {
  display: flex !important;
  opacity: 1 !important;
}

/* ── Stats cards — ground them properly ── */
.dl-hero-stats {
  bottom: 2rem !important;
  top: auto !important;
}
/* ── WhatsApp header button ── */
.header__icons::after {
  content: 'WHATSAPP';
  display: flex;
  align-items: center;
  padding: .45rem 1rem;
  background: var(--decorloft-black, #1A1815);
  color: var(--decorloft-gold, #C9A96E);
  font-size: .58rem;
  letter-spacing: .2em;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(201,169,110,.3);
  margin-left: .75rem;
}
/* ── Logo alignment fix ── */
.header__heading-link,
.header__heading {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}

.header__heading-logo {
  vertical-align: middle !important;
  position: relative !important;
  top: 0 !important;
}

/* ── Hero text — push up, vertically center ── */
.dl-hero__content,
.dl-hero-content {
  justify-content: center !important;
  padding-top: 0 !important;
  margin-top: -4rem !important;
}

.dl-hero__eyebrow,
.dl-hero-eyebrow {
  margin-top: 0 !important;
}

/* ── Stats cards — anchor to right edge properly ── */
.dl-hero__stats,
.dl-stat-card {
  position: absolute !important;
  right: 2rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* ── Logo force align ── */
header a[href="/"] {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}

header a[href="/"] img {
  vertical-align: middle !important;
  position: static !important;
  top: auto !important;
}

/* ── Hero text vertical center ── */
[class*="hero"] [class*="content"],
[class*="hero"] [class*="inner"] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* ============================================================
   DECORLOFT — HEADER + ANNOUNCEMENT BAR CSS
   Paste at BOTTOM of assets/base.css
   ============================================================ */

/* ── Announcement Bar ───────────────────────────────────── */
.dlann {
  background: var(--decorloft-black, #1A1815);
  position: relative; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 3.5rem;
  overflow: hidden;
}
.dlann__track {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 38px;
}
.dlann__msg {
  display: none; align-items: center; gap: .55rem;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: rgba(201,169,110,.65);
  text-align: center;
  animation: dlannFade .4s ease both;
}
.dlann__msg--active { display: flex; }
@keyframes dlannFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dlann__dot { color: var(--decorloft-gold, #C9A96E); font-size: .65rem; opacity: .7; }

.dlann__arrows {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; padding: 0 .75rem;
}
.dlann__arrow {
  width: 28px; height: 28px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(201,169,110,.4); pointer-events: all;
  transition: color .2s ease;
}
.dlann__arrow:hover { color: var(--decorloft-gold, #C9A96E); }

.dlann__close {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(201,169,110,.35); transition: color .2s ease;
}
.dlann__close:hover { color: var(--decorloft-gold, #C9A96E); }

/* ── Header ─────────────────────────────────────────────── */
.dlhdr-section { position: sticky; top: 0; z-index: 100; }

.dlann,
.dlhdr {
  position: sticky; z-index: 100;
}
.dlann { top: 0; z-index: 101; }
.dlhdr {
  top: 0; z-index: 100;
  background: var(--decorloft-white, #FAF8F5);
  border-bottom: 1px solid var(--decorloft-border-light, #EDE9E3);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94),
              box-shadow .35s ease,
              background .25s ease;
}
.dlhdr--scrolled {
  box-shadow: 0 2px 24px rgba(26,24,21,.08);
}
.dlhdr--hidden {
  transform: translateY(-100%);
}

.dlhdr__inner {
  max-width: var(--container-max, 1280px); margin: 0 auto;
  padding: 0 var(--container-padding, 2rem);
  height: 68px;
  display: flex; align-items: center; gap: 2rem;
}

/* ── Logo ───────────────────────────────────────────────── */
.dlhdr__logo {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; flex-shrink: 0;
  line-height: 1;
}
.dlhdr__logo-img {
  display: block; height: auto; max-height: 44px; width: auto;
  vertical-align: middle;
}
.dlhdr__logo-mark {
  width: 30px; height: 30px;
  border: 1.5px solid var(--decorloft-gold, #C9A96E);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1rem; color: var(--decorloft-gold-dark, #A8834A);
  flex-shrink: 0; line-height: 1;
}
.dlhdr__logo-text {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.3rem; font-weight: 300;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--decorloft-black, #1A1815);
  line-height: 1;
}

/* ── Desktop Nav ────────────────────────────────────────── */
.dlhdr__nav { flex: 1; }
.dlhdr__nav-list {
  list-style: none; display: flex; align-items: center;
  gap: .15rem; padding: 0; margin: 0;
}
.dlhdr__nav-link {
  display: flex; align-items: center; gap: .3rem;
  padding: .55rem .85rem;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--decorloft-text-med, #5C5650);
  text-decoration: none; background: none; border: none; cursor: pointer;
  position: relative; transition: color .2s ease;
  white-space: nowrap;
}
.dlhdr__nav-link::after {
  content: ''; position: absolute; bottom: 6px; left: .85rem; right: .85rem;
  height: 1px; background: var(--decorloft-gold, #C9A96E);
  transform: scaleX(0); transition: transform .25s ease; transform-origin: left;
}
.dlhdr__nav-link:hover,
.dlhdr__nav-link--active { color: var(--decorloft-black, #1A1815); }
.dlhdr__nav-link:hover::after,
.dlhdr__nav-link--active::after { transform: scaleX(1); }

.dlhdr__caret { transition: transform .25s ease; flex-shrink: 0; }
.dlhdr__nav-item--open .dlhdr__caret { transform: rotate(180deg); }

/* Dropdown */
.dlhdr__nav-item--drop { position: relative; }
.dlhdr__drop {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 200px; background: var(--decorloft-white, #FAF8F5);
  border: 1px solid var(--decorloft-border-light, #EDE9E3);
  box-shadow: 0 8px 32px rgba(26,24,21,.1);
  list-style: none; padding: .5rem 0; margin: 0;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 200;
}
.dlhdr__nav-item--open .dlhdr__drop {
  opacity: 1; pointer-events: all; transform: translateY(0);
}
.dlhdr__drop-link {
  display: block; padding: .65rem 1.2rem;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400;
  color: var(--decorloft-text-med, #5C5650); text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.dlhdr__drop-link:hover,
.dlhdr__drop-link--active {
  color: var(--decorloft-black, #1A1815);
  background: var(--decorloft-cream, #F2EDE4);
}

/* ── Actions ────────────────────────────────────────────── */
.dlhdr__actions {
  display: flex; align-items: center; gap: .25rem; flex-shrink: 0;
}
.dlhdr__icon-btn {
  width: 42px; height: 42px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--decorloft-text-med, #5C5650);
  transition: color .2s ease; text-decoration: none;
  border-radius: 0;
}
.dlhdr__icon-btn:hover { color: var(--decorloft-black, #1A1815); }
.dlhdr__icon-btn svg { display: block; flex-shrink: 0; }

/* Cart with badge */
.dlhdr__cart { position: relative; }
.dlhdr__cart-badge {
  position: absolute; top: 6px; right: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--decorloft-gold, #C9A96E); color: #fff;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: .52rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: transform .2s ease;
}
.dlhdr__cart-badge--hidden { display: none; }
.dlhdr__cart:hover .dlhdr__cart-badge { transform: scale(1.15); }

/* WhatsApp button */
.dlhdr__wa-btn {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem 1.1rem;
  background: var(--decorloft-black, #1A1815);
  color: var(--decorloft-gold, #C9A96E);
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; border: 1px solid rgba(201,169,110,.2);
  transition: background .25s ease, color .25s ease; white-space: nowrap;
  margin-left: .4rem;
}
.dlhdr__wa-btn:hover {
  background: var(--decorloft-gold-dark, #A8834A); color: #fff;
}
.dlhdr__wa-btn svg { flex-shrink: 0; }

/* Burger */
.dlhdr__burger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 42px; height: 42px; background: none; border: none; cursor: pointer;
  padding: 10px;
}
.dlhdr__burger-line {
  display: block; height: 1.5px;
  background: var(--decorloft-black, #1A1815);
  transition: transform .3s ease, opacity .3s ease, width .3s ease;
  transform-origin: center;
}
.dlhdr__burger[aria-expanded="true"] .dlhdr__burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.dlhdr__burger[aria-expanded="true"] .dlhdr__burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.dlhdr__burger[aria-expanded="true"] .dlhdr__burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Search Bar ─────────────────────────────────────────── */
.dlhdr__search {
  background: var(--decorloft-cream, #F2EDE4);
  border-top: 1px solid var(--decorloft-border-light, #EDE9E3);
  border-bottom: 1px solid var(--decorloft-border-light, #EDE9E3);
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.25,.46,.45,.94);
}
.dlhdr__search--open { max-height: 72px; }
.dlhdr__search-inner {
  max-width: var(--container-max, 1280px); margin: 0 auto;
  padding: .75rem var(--container-padding, 2rem);
  display: flex; align-items: center; gap: .75rem;
}
.dlhdr__search-inner form { flex: 1; display: flex; }
.dlhdr__search-input {
  flex: 1; padding: .65rem 1rem;
  border: 1.5px solid var(--decorloft-border, #E2DDD6);
  background: var(--decorloft-white, #FAF8F5);
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: .88rem; color: var(--decorloft-black, #1A1815);
  outline: none; transition: border-color .2s ease;
}
.dlhdr__search-input::placeholder { color: var(--decorloft-text-light, #9A948E); }
.dlhdr__search-input:focus { border-color: var(--decorloft-gold, #C9A96E); }
.dlhdr__search-submit {
  width: 46px; height: 46px; background: var(--decorloft-black, #1A1815); border: none;
  color: var(--decorloft-white, #FAF8F5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s ease;
}
.dlhdr__search-submit:hover { background: var(--decorloft-gold-dark, #A8834A); }
.dlhdr__search-close {
  width: 38px; height: 38px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--decorloft-text-light, #9A948E); flex-shrink: 0;
  transition: color .2s ease;
}
.dlhdr__search-close:hover { color: var(--decorloft-black, #1A1815); }

/* Spacer */
.dlhdr__spacer { display: block; }

/* ── MOBILE DRAWER ──────────────────────────────────────── */
/* Body lock */
.dldrw-lock { overflow: hidden !important; }

.dldrw {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
}
.dldrw--open { pointer-events: all; }

.dldrw__backdrop {
  position: absolute; inset: 0;
  background: rgba(26,24,21,.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s ease;
}
.dldrw--open .dldrw__backdrop { opacity: 1; }

.dldrw__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--decorloft-white, #FAF8F5);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94);
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 4px 0 40px rgba(26,24,21,.15);
}
.dldrw--open .dldrw__panel { transform: translateX(0); }

/* Drawer head */
.dldrw__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--decorloft-border-light, #EDE9E3);
  flex-shrink: 0;
}
.dldrw__logo {
  display: flex; align-items: center; gap: .5rem; text-decoration: none;
}
.dldrw__logo img { display: block; max-height: 36px; width: auto; }
.dldrw__logo-mark {
  width: 26px; height: 26px;
  border: 1.5px solid var(--decorloft-gold, #C9A96E);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: .9rem; color: var(--decorloft-gold-dark, #A8834A); flex-shrink: 0;
}
.dldrw__logo-text {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.1rem; font-weight: 300; letter-spacing: .28em;
  text-transform: uppercase; color: var(--decorloft-black, #1A1815);
}
.dldrw__close {
  width: 36px; height: 36px; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--decorloft-text-light, #9A948E); flex-shrink: 0;
  transition: color .2s ease;
}
.dldrw__close:hover { color: var(--decorloft-black, #1A1815); }

/* Drawer search */
.dldrw__search {
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--decorloft-border-light, #EDE9E3);
  flex-shrink: 0;
}
.dldrw__search-wrap {
  display: flex; align-items: center; gap: .65rem;
  background: var(--decorloft-cream, #F2EDE4);
  padding: .6rem .9rem;
  border: 1px solid var(--decorloft-border-light, #EDE9E3);
}
.dldrw__search-wrap svg { stroke: var(--decorloft-text-light, #9A948E); flex-shrink: 0; }
.dldrw__search-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: .82rem; color: var(--decorloft-black, #1A1815);
}
.dldrw__search-input::placeholder { color: var(--decorloft-text-light, #9A948E); }

/* Drawer nav */
.dldrw__nav { flex: 1; padding: .5rem 0; }
.dldrw__list { list-style: none; padding: 0; margin: 0; }
.dldrw__item { border-bottom: 1px solid var(--decorloft-border-light, #EDE9E3); }
.dldrw__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem 1.4rem;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--decorloft-text-med, #5C5650); text-decoration: none;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: color .2s ease, background .2s ease;
}
.dldrw__link:hover, .dldrw__link--active {
  color: var(--decorloft-black, #1A1815);
  background: var(--decorloft-cream, #F2EDE4);
}
.dldrw__caret { transition: transform .25s ease; flex-shrink: 0; }
.dldrw__item--open .dldrw__caret { transform: rotate(180deg); }

/* Sub-menu */
.dldrw__sub {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.25,.46,.45,.94);
  background: var(--decorloft-cream, #F2EDE4);
  list-style: none; padding: 0; margin: 0;
}
.dldrw__sub-link {
  display: block; padding: .75rem 1.4rem .75rem 2.2rem;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--decorloft-text-med, #5C5650); text-decoration: none;
  transition: color .2s ease;
  border-top: 1px solid var(--decorloft-border-light, #EDE9E3);
}
.dldrw__sub-link:hover, .dldrw__sub-link--active { color: var(--decorloft-black, #1A1815); }

/* Drawer footer */
.dldrw__foot {
  padding: 1.2rem 1.4rem; flex-shrink: 0;
  border-top: 1px solid var(--decorloft-border-light, #EDE9E3);
  display: flex; flex-direction: column; gap: .85rem;
}

/* WhatsApp in drawer */
.dldrw__wa {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1rem; background: #25D366; color: #fff;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; transition: background .2s ease;
}
.dldrw__wa:hover { background: #1ea855; }
.dldrw__wa svg { flex-shrink: 0; }

/* Util row */
.dldrw__util {
  display: flex; gap: .5rem;
}
.dldrw__util-link {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem .75rem; border: 1px solid var(--decorloft-border, #E2DDD6);
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  color: var(--decorloft-text-med, #5C5650); text-decoration: none;
  transition: all .2s ease;
}
.dldrw__util-link:hover { border-color: var(--decorloft-gold, #C9A96E); color: var(--decorloft-black, #1A1815); }
.dldrw__util-link svg { flex-shrink: 0; }
.dldrw__cart-count {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--decorloft-gold, #C9A96E); color: #fff;
  font-size: .5rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Social */
.dldrw__social {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.dldrw__social-link {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--decorloft-text-light, #9A948E); text-decoration: none;
  border: 1px solid var(--decorloft-border-light, #EDE9E3);
  transition: color .2s ease, border-color .2s ease;
}
.dldrw__social-link:hover { color: var(--decorloft-black, #1A1815); border-color: var(--decorloft-gold, #C9A96E); }

.dldrw__tagline {
  text-align: center;
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-style: italic; font-size: .85rem; font-weight: 300;
  color: var(--decorloft-text-light, #9A948E); letter-spacing: .04em;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */

/* Hide desktop nav + show burger on mobile */
@media screen and (max-width: 860px) {
  .dlhdr__nav { display: none; }
  .dlhdr__burger { display: flex; }
  .dlhdr__wa-btn { display: none; }
  .dlhdr__inner { gap: 1rem; }
}

/* Hide burger on desktop */
@media screen and (min-width: 861px) {
  .dlhdr__burger { display: none !important; }
}

/* Compact announcement on small screens */
@media screen and (max-width: 600px) {
  .dlann { padding: 0 2.5rem; }
  .dlann__msg { font-size: 10px; letter-spacing: .14em; }
  .dlhdr__inner { padding: 0 1.2rem; height: 60px; }
}

/* ============================================================
   END DECORLOFT HEADER CSS
   ============================================================ */
/* ============================================================
   DECORLOFT — DEFINITIVE MOBILE CSS
   All values in px (not rem) to bypass Dawn's 62.5% override
   Paste at the VERY BOTTOM of assets/base.css
   AFTER all other Decorloft CSS
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   0. DAWN ROOT FIX — Must be first
══════════════════════════════════════════════════════════ */
html {
  font-size: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   1. HERO SECTION — .dl-hero
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {

  .dl-hero {
    display: block !important;
    min-height: auto !important;
  }

  /* Hide the empty right panel — no product image = dead space */
  .dl-hero__right {
    display: none !important;
  }

  /* Left content takes full screen */
  .dl-hero__left {
    width: 100% !important;
    min-height: 88vh !important;
    padding: 3.5rem 1.4rem 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Badge */
  .dl-hero__badge {
    margin-bottom: 1.25rem !important;
  }
  .dl-hero__badge-txt {
    font-size: 10px !important;
    letter-spacing: .2em !important;
  }

  /* Headlines */
  .dl-hero__h1 {
    font-size: 52px !important;
    line-height: 1.0 !important;
    margin-bottom: .75rem !important;
  }

  .dl-hero__h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-bottom: 1.25rem !important;
  }

  .dl-hero__copy {
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin-bottom: 2rem !important;
    max-width: 100% !important;
  }

  /* CTA buttons — stack full width */
  .dl-hero__ctas {
    flex-direction: column !important;
    gap: .75rem !important;
    width: 100% !important;
  }

  .dl-hero__btn {
    width: 100% !important;
    height: 52px !important;
    font-size: 11px !important;
    letter-spacing: .18em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Hide scroll indicator */
  .dl-hero__scroll { display: none !important; }

}

/* ══════════════════════════════════════════════════════════
   2. ANNOUNCEMENT BAR — .dlann
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dlann {
    min-height: 34px !important;
    padding: 0 2.5rem !important;
  }
  .dlann__msg {
    font-size: 10px !important;
    letter-spacing: .13em !important;
  }
}

/* ══════════════════════════════════════════════════════════
   3. HEADER — .dlhdr
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dlhdr__inner {
    height: 56px !important;
    padding: 0 1.1rem !important;
  }
  .dlhdr__logo-text {
    font-size: 17px !important;
    letter-spacing: .22em !important;
  }
  .dlhdr__logo-img {
    max-height: 34px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   4. TRUST BAR — .dl-trust
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-trust__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .dl-trust__item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.25rem 1rem !important;
    gap: .5rem !important;
    border-right: 1px solid rgba(201,169,110,.15) !important;
    border-bottom: 1px solid rgba(201,169,110,.15) !important;
  }

  .dl-trust__item:nth-child(2n) {
    border-right: none !important;
  }

  .dl-trust__ico {
    margin: 0 auto !important;
  }

  .dl-trust__title {
    font-size: 12px !important;
    letter-spacing: .1em !important;
  }

  .dl-trust__sub {
    font-size: 11px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   5. COLLECTIONS — .dl-col
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-col {
    padding: 48px 0 !important;
  }

  .dl-col__wrap {
    padding: 0 1.25rem !important;
  }

  .dl-col__header {
    text-align: center !important;
    margin-bottom: 2rem !important;
  }

  .dl-col__eyebrow { font-size: 10px !important; }
  .dl-col__title   { font-size: 30px !important; margin: .5rem 0 !important; }
  .dl-col__sub     { font-size: 14px !important; }

  .dl-col__grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 2px !important;
  }

  .dl-col__card:first-child {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: 260px !important;
  }

  .dl-col__card { min-height: 220px !important; }

  .dl-col__name { font-size: 20px !important; }
  .dl-col__desc { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════
   6. BESTSELLERS — .dl-best
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-best {
    padding: 48px 0 !important;
  }

  .dl-best__wrap {
    padding: 0 1.25rem !important;
  }

  .dl-best__header {
    text-align: center !important;
    margin-bottom: 2rem !important;
  }

  .dl-best__eyebrow { font-size: 10px !important; }
  .dl-best__title   { font-size: 30px !important; }
  .dl-best__sub     { font-size: 14px !important; }

  /* Horizontal scroll carousel */
  .dl-best__grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 0 1.25rem 1rem !important;
    margin: 0 -1.25rem !important;
    scrollbar-width: none !important;
    grid-template-columns: unset !important;
  }

  .dl-best__grid::-webkit-scrollbar { display: none !important; }

  .dl-best__card {
    min-width: 68vw !important;
    max-width: 68vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Swipe hint dots */
  .dl-best__name    { font-size: 14px !important; }
  .dl-best__price   { font-size: 16px !important; }
  .dl-best__compare { font-size: 12px !important; }

  .dl-best__cta { margin-top: 1.5rem !important; }
  .dl-best__cta-btn {
    width: 100% !important;
    height: 50px !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════
   7. GIFT BOXES — .dl-gifts
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-gifts {
    padding: 48px 0 !important;
  }

  .dl-gifts__wrap {
    padding: 0 1.25rem !important;
  }

  .dl-gifts__header {
    text-align: center !important;
    margin-bottom: 2rem !important;
  }

  .dl-gifts__eyebrow { font-size: 10px !important; }
  .dl-gifts__title   { font-size: 30px !important; }
  .dl-gifts__sub     { font-size: 14px !important; }

  .dl-gifts__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dl-gifts__card {
    padding: 2rem 1.5rem !important;
  }

  .dl-gifts__tier-name  { font-size: 22px !important; }
  .dl-gifts__price-num  { font-size: 38px !important; }
  .dl-gifts__desc       { font-size: 14px !important; }
}

/* ══════════════════════════════════════════════════════════
   8. BRAND STORY — .dl-story
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-story {
    padding: 48px 0 !important;
  }

  .dl-story__wrap {
    display: block !important;
    padding: 0 1.25rem !important;
  }

  .dl-story__left {
    width: 100% !important;
    padding: 0 0 2rem 0 !important;
  }

  .dl-story__right {
    width: 100% !important;
    min-height: 280px !important;
    margin-bottom: 2rem !important;
  }

  .dl-story__eyebrow  { font-size: 10px !important; }
  .dl-story__title    { font-size: 30px !important; }
  .dl-story__body1,
  .dl-story__body2    { font-size: 15px !important; line-height: 1.75 !important; }

  .dl-story__stats {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
  }

  .dl-story__stat-num { font-size: 28px !important; }
  .dl-story__stat-lbl { font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════════
   9. OCCASIONS — .dl-occ
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-occ {
    padding: 48px 0 !important;
  }

  .dl-occ__wrap {
    padding: 0 1.25rem !important;
  }

  .dl-occ__header {
    text-align: center !important;
    margin-bottom: 2rem !important;
  }

  .dl-occ__eyebrow { font-size: 10px !important; }
  .dl-occ__title   { font-size: 30px !important; }
  .dl-occ__sub     { font-size: 14px !important; }

  .dl-occ__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .dl-occ__card {
    padding: 1.25rem 1rem !important;
    min-height: 140px !important;
  }

  .dl-occ__name { font-size: 13px !important; }
  .dl-occ__desc { font-size: 11px !important; display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   10. TESTIMONIALS — .dl-testi
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-testi {
    padding: 48px 0 !important;
  }

  .dl-testi__wrap {
    padding: 0 1.25rem !important;
  }

  .dl-testi__header {
    text-align: center !important;
    margin-bottom: 2rem !important;
  }

  .dl-testi__eyebrow { font-size: 10px !important; }
  .dl-testi__title   { font-size: 30px !important; }

  /* Horizontal scroll on mobile */
  .dl-testi__grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 0 1.25rem 1rem !important;
    margin: 0 -1.25rem !important;
    scrollbar-width: none !important;
    grid-template-columns: unset !important;
  }

  .dl-testi__grid::-webkit-scrollbar { display: none !important; }

  .dl-testi__card {
    min-width: 82vw !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    padding: 1.75rem 1.25rem !important;
  }

  .dl-testi__quote    { font-size: 17px !important; line-height: 1.55 !important; }
  .dl-testi__name     { font-size: 13px !important; }
  .dl-testi__location { font-size: 11px !important; }
  .dl-testi__product  { font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════════
   11. FAQ — .dl-faq
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-faq {
    padding: 48px 0 !important;
  }

  .dl-faq__wrap {
    display: block !important;
    padding: 0 1.25rem !important;
  }

  .dl-faq__left {
    width: 100% !important;
    margin-bottom: 2rem !important;
    padding-right: 0 !important;
  }

  .dl-faq__right {
    width: 100% !important;
  }

  .dl-faq__eyebrow { font-size: 10px !important; }
  .dl-faq__title   { font-size: 30px !important; }
  .dl-faq__sub     { font-size: 14px !important; }

  .dl-faq__question {
    font-size: 15px !important;
    padding: 1.1rem 0 !important;
  }

  .dl-faq__q-text  { font-size: 15px !important; }

  .dl-faq__answer-inner {
    font-size: 14px !important;
    line-height: 1.75 !important;
    padding-bottom: 1rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   12. FOOTER / EMAIL CTA — .dl-s10
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-s10 {
    padding: 48px 0 0 !important;
  }

  /* Email CTA top block */
  [class*="dl-s10__cta"],
  [class*="dl-emailcta"] {
    padding: 2.5rem 1.25rem !important;
    text-align: center !important;
  }

  /* Footer grid — single column */
  .dl-s10__grid,
  [class*="dl-s10__footer"],
  [class*="dl-footer__grid"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2rem 1.25rem !important;
  }

  [class*="dl-s10__head"],
  [class*="dl-footer__head"] {
    font-size: 11px !important;
    letter-spacing: .18em !important;
    margin-bottom: .75rem !important;
  }

  [class*="dl-s10__link"],
  [class*="dl-footer__link"] {
    font-size: 14px !important;
    padding: .3rem 0 !important;
    display: block !important;
  }

  [class*="dl-s10__bottom"],
  [class*="dl-footer__bottom"] {
    padding: 1.25rem !important;
    flex-direction: column !important;
    gap: .75rem !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════
   13. STICKY WHATSAPP FLOAT — visible on all mobile pages
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .dl-wa-float {
    position: fixed !important;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    z-index: 600 !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: #25D366 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 24px rgba(37,211,102,.4) !important;
    text-decoration: none !important;
  }

  .dl-wa-float svg {
    width: 24px !important;
    height: 24px !important;
    fill: #fff !important;
  }
}

/* ══════════════════════════════════════════════════════════
   14. GLOBAL SECTION TYPOGRAPHY ON MOBILE
   Catches anything section-specific rules above don't catch
══════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {

  /* All section eyebrows */
  .dl-col__eyebrow, .dl-best__eyebrow, .dl-gifts__eyebrow,
  .dl-story__eyebrow, .dl-occ__eyebrow, .dl-testi__eyebrow,
  .dl-faq__eyebrow, .dl-trust__eyebrow, .dlann__msg {
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  /* All section h2 titles */
  .dl-col__title, .dl-best__title, .dl-gifts__title,
  .dl-story__title, .dl-occ__title, .dl-testi__title,
  .dl-faq__title {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  /* All section subtitles */
  .dl-col__sub, .dl-best__sub, .dl-gifts__sub,
  .dl-occ__sub, .dl-faq__sub {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

}

/* ============================================================
   END DECORLOFT MOBILE CSS
   ============================================================ */
   
   /* ====================================
DECORLOFT STORY PAGE
==================================== */

:root{
--story-bg:#FAF8F5;
--story-cream:#F0EBE1;
--story-dark:#1A1815;
--story-gold:#C9A96E;
--story-text:#6B6057;

--story-container:1200px;
}

/* ---------- GLOBAL ---------- */

.story-page{
background:var(--story-bg);
color:var(--story-dark);
font-family:'Jost',sans-serif;
}

.story-container{
max-width:var(--story-container);
margin:auto;
padding:0 24px;
}

.story-eyebrow{
font-size:12px;
letter-spacing:.25em;
text-transform:uppercase;
color:var(--story-gold);
margin-bottom:14px;
display:block;
}

.story-heading{
font-family:'Cormorant Garamond',serif;
font-weight:300;
font-size:clamp(32px,5vw,60px);
line-height:1.2;
}

.story-text{
font-size:16px;
line-height:1.9;
color:var(--story-text);
}

/* ---------- HERO ---------- */

.story-hero{
background:#0F0E0C;
color:#fff;
padding:120px 0 100px;
position:relative;
}

.story-hero h1{
font-family:'Cormorant Garamond',serif;
font-size:clamp(48px,7vw,90px);
line-height:1.05;
font-weight:300;
}

.story-hero p{
margin-top:24px;
max-width:520px;
color:rgba(255,255,255,.65);
}

/* ---------- STORY SECTION ---------- */

.story-section{
padding:100px 0;
}

.story-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
position:relative;
}

.story-divider{
position:absolute;
left:50%;
top:0;
bottom:0;
width:1px;
background:#E8E0D5;
}

.story-col{
min-width:0;
}

.story-col p{
margin-bottom:20px;
}

/* ---------- CITY SECTION ---------- */

.story-city{
background:#1A1815;
color:#fff;
padding:110px 0;
}

.story-city .story-text{
color:rgba(255,255,255,.65);
}

/* ---------- COLLECTION GRID ---------- */

.story-collections{
padding:100px 0;
background:#F0EBE1;
}

.collection-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-top:50px;
}

.collection-card{
background:#fff;
padding:28px;
border:1px solid #E8E0D5;
text-align:center;
transition:.3s;
}

.collection-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.collection-card h4{
font-family:'Cormorant Garamond',serif;
font-size:22px;
margin:10px 0;
}

/* ---------- CTA ---------- */

.story-cta{
background:#0F0E0C;
color:#fff;
text-align:center;
padding:120px 0;
}

.story-btn{
display:inline-block;
padding:14px 32px;
background:var(--story-gold);
color:#1A1815;
font-size:12px;
letter-spacing:.2em;
text-transform:uppercase;
margin-top:28px;
text-decoration:none;
}

/* ---------- MOBILE ---------- */

@media(max-width:1024px){

.collection-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:768px){

.story-grid{
grid-template-columns:1fr;
gap:40px;
}

.story-divider{
display:none;
}

.collection-grid{
grid-template-columns:repeat(2,1fr);
}

.story-hero{
padding:100px 0 70px;
}

}

@media(max-width:480px){

.collection-grid{
grid-template-columns:1fr;
}

.story-section{
padding:70px 0;
}

}