/* ==========================================================================
   GRIMOIRE ART — DESIGN SYSTEM & MOTION LAYER  v4.0
   --------------------------------------------------------------------------
   Loaded AFTER styles.css. This file does not modify styles.css, provides normalization layer.
   Can be safely disabled by removing the link tag.

   Table of Contents:
     00  Design tokens (EU/US calibrated palette, spacing, typography, ratios, motion)
     01  Image aspect ratio normalization
     02  Media slot — hybrid picture/video container
     03  Motion: scroll reveal, stagger, marquee, parallax
     04  Interactive hover states: cards, buttons, links, swatches, navigation
     05  Smart sticky header
     06  CSS components (bundles, FAQ, accordions, badges, etc.)
     07  Responsive breakpoints: 480 / 768 / 1024 / 1280
     08  Accessibility & prefers-reduced-motion

   Original color palette: GrimoireArt_UX_UI_Color_Interaction_Guide.txt (Option 2)
   Calibrated for European fine art aesthetics: high-contrast typography,
   matching high-end European art ateliers (Desenio, Poster Store, Juniqe).
   Brand heritage hues (Delft Navy, Antique Gold) preserved.
   ========================================================================== */

/* ==========================================================================
   00. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Surfaces: Warm Alabaster / Museum Ivory #FAF8F5 --- */
  --bg-color: #FAF8F5;          /* Warm Alabaster / Museum Ivory — Grimoire Art standard */
  --bg-surface: #F4EFE6;        /* Warm Surface Mist */
  --bg-card: #F7F3EC;           /* Warm Porcelain:
                                   Harmonized warm ivory surfaces */
  --card-bg: #F7F3EC;
  --bg-inset: #EAE3D7;
  --bg-ink: #1D335E;

  /* --- Ink: brand specification --- */
  --text-color: #1D335E;        /* Delft Royal Navy */
  --text-primary: #1D335E;
  --text-secondary: #533B34;    /* Van Dyke Brown */
  --text-muted: #7C6C63;        /* Muted Warm Taupe */
  --text-faint: #A0928A;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #FAF8F5;

  /* --- Accent: Old Money Gold --- */
  --accent-color: #B88E56;      /* Heritage Antique Gold */
  --accent-primary: #B88E56;
  --accent-primary-hover: #9E743F;
  --accent-primary-active: #845D2B;
  --accent-primary-soft: #F5EFE6;
  --accent-secondary: #3C6383;  /* Blue Ashes */
  --accent-secondary-hover: #284478;

  /* --- Materials --- */
  --natural-oak: #b2967d;
  --classic-walnut: #4a342a;
  --gallery-gold: #C99742;      /* Venetian Gilt — brand specification */
  --gallery-gold-soft: #e8c98a;

  /* --- Lines --- */
  --border-color: #D1BFA4;      /* Oat Sand Border — brand specification */
  --border-subtle: #E0D4C0;
  --border-strong: #BFA987;
  --divider-color: #D1BFA4;
  --border-focus: #1D335E;
  --border-active: #DFCA80;

  /* --- Chrome --- */
  --announcement-bg: #1D335E;
  --announcement-text: #FAF8F5;
  --footer-bg: #162645;
  --footer-text: #FAF8F5;
  --footer-muted: #A8B3C4;

  /* --- Feedback --- */
  --success: #2f6b4f;
  --warning: #9a6b1f;
  --danger: #a33b2c;
  --sale: #a33b2c;

  /* --- Elevation: soft vertical shadows --- */
  --shadow-xs: 0 1px 2px rgba(23, 35, 63, .04);
  --shadow-sm: 0 2px 8px rgba(23, 35, 63, .06);
  --shadow-md: 0 8px 24px rgba(23, 35, 63, .09);
  --shadow-lg: 0 18px 48px rgba(23, 35, 63, .13);
  --shadow-xl: 0 32px 72px rgba(23, 35, 63, .17);
  --shadow-cta: 0 8px 24px rgba(142, 81, 48, .30);
  --shadow-dark-card: 0 16px 40px rgba(19, 32, 58, .26);

  /* --- Motion --- */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .55s;
  --dur-4: .85s;
  --transition-fast: all var(--dur-1) var(--ease-out-quart);
  --transition-smooth: all var(--dur-2) var(--ease-out-expo);
  --transition-slow: all var(--dur-3) var(--ease-out-expo);
  --premium-ease: cubic-bezier(.16, 1, .3, 1);
  --premium-transition: all var(--dur-2) var(--ease-out-expo);

  /* --- Radius --- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- Spacing (thang 4px) --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section-y: clamp(56px, 7vw, 112px);
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1440px;
  --maxw-text: 68ch;

  /* --- Type scale (fluid) --- */
  --font-serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Cinzel", "Playfair Display", Georgia, serif;   /* overline, badge, monogram */
  --fs-display: clamp(2.6rem, 5.2vw, 4.6rem);
  --fs-h1: clamp(2.1rem, 3.8vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 2.6vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.6rem);
  --fs-body: clamp(.95rem, .35vw + .88rem, 1.06rem);
  --fs-sm: .875rem;
  --fs-xs: .78rem;
  --tracking-eyebrow: .18em;
  --leading-tight: 1.12;
  --leading-body: 1.65;

  /* --- ASPECT RATIO: Unified brand aspect ratios --- */
  --ratio-art: 4 / 5;        /* art card — fine art standard */
  --ratio-portrait: 3 / 4;   /* collection / category card */
  --ratio-square: 1 / 1;     /* instagram, avatar, swatch */
  --ratio-landscape: 3 / 2;  /* journal, lifestyle, interior room views */
  --ratio-hero: 16 / 9;      /* banner desktop */
  --ratio-hero-m: 4 / 5;     /* banner mobile */
  --ratio-wide: 21 / 9;      /* strip banner */
}

/* Unified tokens overriding legacy conflicts */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background-color: var(--bg-color); color: var(--text-primary); }

::selection { background: var(--accent-primary); color: #fff; }

/* ==========================================================================
   01. ASPECT RATIO NORMALIZATION
   Standardized responsive aspect ratios.
   ========================================================================== */
.product-card .product-img-wrap,
.product-card .card-img-wrap,
.fp-product-card .product-img-wrap,
.sd-product-card .product-img-wrap,
.qv-slide,
.ccl-img-wrap,
.gallery-item,
.art-card-img {
  position: relative;
  aspect-ratio: var(--ratio-art);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-surface);
}

.collection-card,
.category-card,
.col-image-block,
.nav-promo-card,
.page-card {
  aspect-ratio: var(--ratio-portrait);
}

.ier-item {
  aspect-ratio: var(--ratio-portrait) !important;
}

.journal-card,
.blog-card .blog-img-wrap,
.in-every-room-card,
.rd-lifestyle-stage {
  aspect-ratio: var(--ratio-landscape);
  overflow: hidden;
  border-radius: var(--r-md);
}

.avatar-stack img,
.team-card img,
.frame-swatch,
.pdp-swatch-btn span {
  aspect-ratio: var(--ratio-square) !important;
}

/* All images fit cleanly without distortion */
[style*="aspect-ratio"] > img,
.product-img-wrap > img, .card-img-wrap > img, .qv-slide > img,
.ccl-img-wrap > img, .gallery-item > img, .collection-card > img,
.category-card > img, .col-image-block > img, .nav-promo-card > img,
.page-card > img, .journal-card > img, .in-every-room-card > img,
.media-slot > img, .media-slot > video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

img { max-width: 100%; }

/* ==========================================================================
   02. MEDIA SLOTS — Hybrid Picture & Video Showcase
   Usage:
     <div class="media-slot" data-ratio="hero">
       <video src="clip.mp4" poster="fallback.jpg" autoplay muted loop playsinline></video>
     </div>
   Image fallback with data-video trigger on hover or visibility:
     <img src="a.jpg" data-video="a.mp4" data-video-trigger="hover">
   ========================================================================== */
.media-slot {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  aspect-ratio: var(--ratio-landscape);
  isolation: isolate;
}
.media-slot[data-ratio="art"]       { aspect-ratio: var(--ratio-art); }
.media-slot[data-ratio="portrait"]  { aspect-ratio: var(--ratio-portrait); }
.media-slot[data-ratio="square"]    { aspect-ratio: var(--ratio-square); }
.media-slot[data-ratio="landscape"] { aspect-ratio: var(--ratio-landscape); }
.media-slot[data-ratio="hero"]      { aspect-ratio: var(--ratio-hero); }
.media-slot[data-ratio="wide"]      { aspect-ratio: var(--ratio-wide); }
.media-slot[data-ratio="free"]      { aspect-ratio: auto; }

.media-slot > img,
.media-slot > video,
.media-slot > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  transition: transform var(--dur-4) var(--ease-out-expo),
              opacity var(--dur-2) var(--ease-out-quart);
}
.media-slot > video { z-index: 1; opacity: 0; }
.media-slot > video.is-playing,
.media-slot[data-video-mode="always"] > video { opacity: 1; }

/* Contrast scrim for typography legibility */
.media-slot[data-scrim]::after,
.col-image-block::after,
.collection-card::after,
.category-card::after,
.nav-promo-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,35,64,0) 0%, rgba(20,35,64,.28) 55%, rgba(20,35,64,.75) 100%);
  pointer-events: none;
  z-index: 2;
  transition: opacity var(--dur-3) var(--ease-out-expo);
}
.media-slot[data-scrim="soft"]::after {
  background: linear-gradient(180deg, rgba(20,35,64,0) 35%, rgba(20,35,64,.55) 100%);
}
.media-slot__body {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 2.4vw, 32px);
  color: var(--text-on-dark);
}
.media-slot__body h2,
.media-slot__body h3,
.media-slot__body h4 {
  color: var(--text-on-dark);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  margin: 0 0 var(--s-2);
  transition: color var(--dur-2) var(--ease-out-quart), transform var(--dur-2) var(--ease-out-expo);
}
.media-slot__body p {
  color: var(--text-on-dark-muted);
  opacity: .92;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  margin: 0;
}
.media-slot:hover > img,
.media-slot:hover > video { transform: scale(1.06); }
.media-slot:hover .media-slot__body h2,
.media-slot:hover .media-slot__body h3,
.media-slot:hover .media-slot__body h4 { color: var(--gallery-gold); transform: translateX(3px); }

/* Mute/unmute toggle for video banner */
.media-slot__sound {
  position: absolute; z-index: 4; right: 14px; bottom: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer;
  transition: var(--transition-smooth);
}
.media-slot__sound:hover { background: rgba(255,255,255,.3); transform: scale(1.08); }

/* ==========================================================================
   03. MOTION — scroll reveal / stagger / marquee / parallax
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--dur-4) var(--ease-out-expo),
    transform var(--dur-4) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
[data-reveal="right"] { transform: translate3d(32px, 0, 0); }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal="clip"]  { clip-path: inset(0 0 100% 0); transform: none; opacity: 1; transition: clip-path var(--dur-4) var(--ease-out-expo); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Staggered headline typography animation */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-4) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-in .line-mask > span,
.line-mask.is-in > span { transform: translateY(0); }

/* Marquee */
.gm-marquee { overflow: hidden; display: flex; gap: 0; user-select: none; }
.gm-marquee__track {
  display: flex; flex-shrink: 0; gap: var(--s-7);
  padding-right: var(--s-7);
  animation: gm-scroll 34s linear infinite;
}
.gm-marquee:hover .gm-marquee__track { animation-play-state: paused; }
.gm-marquee[data-speed="slow"] .gm-marquee__track { animation-duration: 55s; }
.gm-marquee[data-speed="fast"] .gm-marquee__track { animation-duration: 20s; }
@keyframes gm-scroll { to { transform: translateX(-100%); } }

/* Subtle parallax for banner imagery */
[data-parallax] { will-change: transform; }

/* Progressive blur-up image loader */
img[data-blurup] { filter: blur(14px); transform: scale(1.03); transition: filter .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }
img[data-blurup].is-loaded { filter: none; transform: none; }

/* ==========================================================================
   04. ELEVATED HOVER INTERACTIONS
   ========================================================================== */

/* --- 4.1 Product card: gentle lift + secondary image crossfade + quick-add reveal --- */
.fp-product-card,
.sd-product-card,
.ccl-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    transform var(--dur-3) var(--ease-out-expo),
    box-shadow var(--dur-3) var(--ease-out-expo),
    border-color var(--dur-2) var(--ease-out-quart);
}
.fp-product-card:hover,
.sd-product-card:hover,
.ccl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--natural-oak);
}
.product-card img.main-img,
.product-card .product-img-wrap img,
.fp-product-card .product-img-wrap img {
  transition: transform var(--dur-4) var(--ease-out-expo), opacity var(--dur-3) var(--ease-out-quart);
}
.product-card:hover img.main-img,
.product-card:hover .product-img-wrap img,
.fp-product-card:hover .product-img-wrap img { transform: scale(1.055); }

/* Secondary image crossfade (.hover-img) */
.product-img-wrap .hover-img,
.card-img-wrap .hover-img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out-quart), transform var(--dur-4) var(--ease-out-expo);
}
.product-card:hover .hover-img { opacity: 1; transform: scale(1.055); }

/* Quick-add slides up from card bottom */
.hover-actions,
.product-card .btn-quick-add,
.product-card .btn-choose-options {
  transition: transform var(--dur-3) var(--ease-out-expo), opacity var(--dur-2) var(--ease-out-quart);
}
@media (hover: hover) and (min-width: 769px) {
  .product-card .hover-actions {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    transform: translateY(calc(100% + 16px));
    opacity: 0;
  }
  .product-card:hover .hover-actions { transform: translateY(0); opacity: 1; }
}

/* --- 4.2 Buttons: sweep fill transition + animated arrow + magnetic --- */
.btn-primary, .btn-add-to-cart, .btn-shop-now, .btn-qv-add,
.cart-checkout-btn, .hero-btn-explore, .btn-marquee-shop, .btn-continue,
.btn-bundle-atc, button.btn-primary, .gm-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--accent-primary);
  color: #fff;
  border: 1.5px solid var(--accent-primary);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(142, 81, 48, .18);
  transition:
    transform var(--dur-2) var(--ease-out-expo),
    box-shadow var(--dur-2) var(--ease-out-expo),
    background-color var(--dur-2) var(--ease-out-quart);
}
.btn-primary::before, .btn-add-to-cart::before, .btn-shop-now::before,
.cart-checkout-btn::before, .hero-btn-explore::before, .btn-bundle-atc::before,
.gm-btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--accent-primary-hover);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.btn-primary:hover::before, .btn-add-to-cart:hover::before, .btn-shop-now:hover::before,
.cart-checkout-btn:hover::before, .hero-btn-explore:hover::before,
.btn-bundle-atc:hover::before, .gm-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.btn-primary:hover, .btn-add-to-cart:hover, .btn-shop-now:hover,
.cart-checkout-btn:hover, .hero-btn-explore:hover, .btn-bundle-atc:hover, .gm-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
  border-color: var(--accent-primary-hover);
}
.btn-primary:active, .btn-add-to-cart:active, .btn-shop-now:active,
.cart-checkout-btn:active, .btn-bundle-atc:active, .gm-btn:active {
  transform: translateY(0) scale(.985);
  background-color: var(--accent-primary-active);
}

/* Outline button */
.btn-secondary, .btn-quick-view, .btn-mockup, .btn-filter, .btn-shop-white,
.hero-btn-mockup, .btn-marquee-shop-white, .btn-continue-shopping {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.btn-secondary::before, .btn-quick-view::before, .btn-mockup::before,
.hero-btn-mockup::before::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--text-primary);
  transform: translateY(101%);
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.btn-secondary:hover::before, .btn-quick-view:hover::before, .btn-mockup:hover::before,
.hero-btn-mockup:hover::before:hover::before { transform: translateY(0); }
.btn-secondary:hover, .btn-quick-view:hover, .btn-mockup:hover,
.hero-btn-mockup:hover:hover {
  color: #fff;
  border-color: var(--text-primary);
  transform: translateY(-1.5px);
}

/* Magnetic positioning (--mx/--my) */
[data-magnetic] { transition: transform var(--dur-2) var(--ease-spring); }
[data-magnetic].is-pulling { transform: translate(var(--mx, 0), var(--my, 0)); }

/* Arrow icon within button */
.arrow-circle, .btn-arrow-circle, .icon-btn-black {
  background: rgba(255,255,255,.2); color: #fff;
  transition: var(--transition-smooth);
}
.btn-shop-now:hover .arrow-circle,
.hero-btn-explore:hover .btn-arrow-circle,
.icon-btn-black:hover { background: #fff; color: var(--accent-primary); transform: translateX(3px) scale(1.05); }
.gm-btn svg, .btn-primary svg { transition: transform var(--dur-2) var(--ease-out-expo); }
.gm-btn:hover svg, .btn-primary:hover svg { transform: translateX(4px); }

/* --- 4.3 Underline hover sweep link --- */
.nav-link, .gm-link, .footer-col-links a, .legal-links a {
  position: relative;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out-quart);
}
.nav-link::after, .gm-link::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1.5px;
  background: var(--accent-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out-expo);
}
.gm-link:hover::after { transform: scaleX(1); transform-origin: left; }
.gm-link:hover { color: var(--accent-primary); }

/* --- 4.5 Swatch / size / frame --- */
.size-option-btn, .border-option-btn, .qv-size-btn, .pdp-pill-btn {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--r-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.size-option-btn:hover, .border-option-btn:hover, .qv-size-btn:hover, .pdp-pill-btn:hover {
  background: var(--bg-surface);
  border-color: var(--text-primary);
  transform: translateY(-1px);
}
.size-option-btn.active, .border-option-btn.active, .qv-size-btn.active, .pdp-pill-btn.active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.frame-swatch, .pdp-swatch-btn {
  border: 1.5px solid var(--border-color);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.frame-swatch:hover, .pdp-swatch-btn:hover { transform: scale(1.14); border-color: var(--accent-secondary); }
.frame-swatch.active, .pdp-swatch-btn.active {
  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--text-primary);
  transform: scale(1.08);
}

/* --- 4.6 Form --- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
select, textarea, .pdp-select {
  background: #fff;
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  transition: var(--transition-smooth);
}
input:hover, select:hover, textarea:hover { border-color: var(--accent-secondary); }
input:focus, select:focus, textarea:focus {
  border-color: var(--text-primary);
  outline: 2px solid rgba(23,35,63,.18);
  outline-offset: 1px;
}
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--r-xs); }

/* Exempt integrated/embedded input fields inside custom pill wrappers */
.shop-search-box-wrap input,
.shop-mini-search-input,
.shop-main-search-input,
.shop-toolbar-search-input,
.search-wrapper input,
.search-bar input,
.subscribe-form input,
.site-footer .subscribe-form input,
.custom-footer .subscribe-form input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.shop-search-box-wrap input:focus,
.shop-mini-search-input:focus,
.shop-main-search-input:focus,
.shop-toolbar-search-input:focus,
.search-wrapper input:focus,
.search-bar input:focus,
.subscribe-form input:focus,
.site-footer .subscribe-form input:focus,
.custom-footer .subscribe-form input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   06. ESSENTIAL UI COMPONENTS
   Bundle, PDP accordions, FAQ, badges, progress bars
   ========================================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Badge */
.badge:not(.float-digital):not(.float-objects):not(.float-arts):not(.promo-cards *),
.badge-hero, .badge-sale, .badge-hot, .badge-popular, .badge-new,
.badge-top20, .badge-stock, .discount-badge, .card-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  background: var(--accent-primary); color: #fff;
  line-height: 1;
}
.nav-promo-card .badge {
  position: absolute !important;
  z-index: 10 !important;
  top: 14px !important;
  left: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(250, 248, 245, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #FFFFFF !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  display: inline-block !important;
  line-height: normal !important;
}
.badge-sale, .discount-badge { background: var(--sale); }
.badge-new, .badge-top20 { background: var(--accent-secondary); }
.badge-hot, .badge-popular { background: var(--gallery-gold); color: #1b1408; }
.badge-stock { background: var(--success); }

/* Price */
.current-price, .pdp-price-display { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; color: var(--text-primary); }
.compare-price, .bundle-orig-price, .pdp-compare-display {
  color: var(--text-faint); text-decoration: line-through; font-size: var(--fs-sm); margin-left: 8px;
}
.bundle-sale-price { color: var(--sale); font-weight: 700; }

/* Accordion PDP */
.pdp-acc-item, .acc-item, .faq-accordion-item {
  border-bottom: 1px solid var(--border-color);
}
.pdp-acc-header, .accordion-header, .faq-accordion-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  background: none; border: 0;
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600;
  color: var(--text-primary); text-align: left; cursor: pointer;
  transition: color var(--dur-1) var(--ease-out-quart);
}
.pdp-acc-header:hover, .accordion-header:hover, .faq-accordion-header:hover { color: var(--accent-primary); }
.pdp-acc-icon, .accordion-arrow, .faq-accordion-icon {
  flex-shrink: 0; display: grid; place-items: center;
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.pdp-acc-item.active .pdp-acc-icon,
.acc-item.active .accordion-arrow,
.faq-accordion-item.active .faq-accordion-icon { transform: rotate(180deg); }
.pdp-acc-body, .accordion-body, .faq-accordion-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-out-expo);
  color: var(--text-secondary); line-height: var(--leading-body);
}
.pdp-acc-body > *, .accordion-body > *, .faq-accordion-body > * { overflow: hidden; }
.pdp-acc-item.active .pdp-acc-body,
.acc-item.active .accordion-body,
.faq-accordion-item.active .faq-accordion-body { grid-template-rows: 1fr; padding-bottom: var(--s-4); }
/* Accordion fallback structure */
.pdp-acc-item .pdp-acc-body:not(:has(*)) { display: block; max-height: 0; overflow: hidden; transition: max-height var(--dur-3) var(--ease-out-expo), padding var(--dur-2) linear; padding-bottom: 0; }
.pdp-acc-item.active .pdp-acc-body:not(:has(*)) { max-height: 640px; padding-bottom: var(--s-4); }

/* Bundle block */
.bundle-cta-card, .bundle-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: var(--transition-smooth);
}
.bundle-item-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); align-items: stretch; }
.bundle-header { text-align: center; margin-bottom: var(--s-6); }
.bundle-eyebrow { font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-primary); font-weight: 700; }
.bundle-title { font-family: var(--font-serif); font-size: var(--fs-h2); margin: var(--s-2) 0; }
.bundle-sub { color: var(--text-muted); max-width: var(--maxw-text); margin-inline: auto; }
.bundle-item-img { aspect-ratio: var(--ratio-square); border-radius: var(--r-md); overflow: hidden; background: var(--bg-surface); }
.bundle-item-img img { width: 100%; height: 100%; object-fit: cover; }
.bundle-item-info { padding-top: var(--s-3); }
.bundle-item-tag { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bundle-item-price { font-weight: 600; }
.bundle-plus { display: grid; place-items: center; font-size: 1.4rem; color: var(--text-faint); }
.bundle-pricing, .bundle-prices { display: flex; align-items: baseline; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.bundle-total-label { font-size: var(--fs-sm); color: var(--text-muted); }
.bundle-savings { background: var(--accent-primary-soft); color: var(--accent-primary); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-sm); }

/* Progress (freeship / carousel) */
.cs-progress-bar, .progress-track {
  height: 3px; background: var(--border-subtle); border-radius: var(--r-pill); overflow: hidden;
}
.cs-progress-fill, .progress-fill {
  height: 100%; background: var(--accent-primary); border-radius: var(--r-pill);
  transition: width var(--dur-3) var(--ease-out-expo);
}
.cs-text { font-size: var(--fs-sm); color: var(--text-muted); }

/* Misc */
.btn, .btn-icon, .btn-text-link {
  font-family: var(--font-sans); cursor: pointer;
  transition: var(--transition-smooth);
}
.btn-text-link { background: none; border: 0; color: var(--accent-primary); text-decoration: underline; text-underline-offset: 3px; }
.btn-text-link:hover { color: var(--accent-primary-hover); }
.btn-icon { display: grid; place-items: center; background: none; border: 1px solid var(--border-color); border-radius: 50%; width: 38px; height: 38px; }
.btn-icon:hover { border-color: var(--text-primary); background: var(--bg-surface); }
.account-icon, .cart-icon, .cart-icon-svg { cursor: pointer; transition: var(--transition-fast); }
.account-icon:hover, .cart-icon:hover { color: var(--accent-primary); transform: translateY(-1px); }
.big-score { font-family: var(--font-serif); font-size: var(--fs-display); line-height: 1; color: var(--text-primary); }
.canvas-mat { background: #fff; padding: 6%; box-shadow: inset 0 0 0 1px var(--border-color); }
.arrow-spin { transition: transform var(--dur-3) var(--ease-out-expo); }
.arrow-spin:hover { transform: rotate(45deg); }
.custom-select-wrap { position: relative; }
.custom-select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.custom-select-wrap select { appearance: none; width: 100%; padding: 12px 38px 12px 14px; }
.emerald { color: var(--success); }
.art-artist, .art-sizes { color: var(--text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   07. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1280px) {
  :root { --maxw: 1160px; }
}
@media (max-width: 1024px) {
  :root { --section-y: clamp(44px, 6vw, 80px); }
  .bundle-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 768px) {
  :root {
    --ratio-art: 4 / 5;
    --ratio-hero: var(--ratio-hero-m);
    --gutter: 16px;
  }
  .media-slot[data-ratio="hero"],
  .media-slot[data-ratio="wide"] { aspect-ratio: var(--ratio-hero-m); }
  .product-card .hover-actions { position: static; transform: none; opacity: 1; }
  
  .bundle-plus { transform: rotate(90deg); }
}
@media (max-width: 480px) {
  :root { --section-y: 40px; }
  .bundle-grid { grid-template-columns: 1fr; }
  .media-slot__body { padding: 14px; }
}

/* ==========================================================================
   08. ACCESSIBILITY
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .line-mask > span { transform: none !important; }
  .gm-marquee__track { animation: none !important; }
}

/* ==========================================================================
   09. HORIZONTAL OVERFLOW PREVENTION
   Ensures carousel tracks do not trigger horizontal viewport scrollbars.
   ========================================================================== */
html, body { overflow-x: clip; max-width: 100%; }

.qv-gallery, .qv-gallery-track, .rd-ctl-wrap, .rd-ctl-track,
.framed-art-card, .framed-art-box, .press-logos, .press-logo-track,
.pdp-ymal-track, .pdp-hc-track, .ccl-track, .hot-week-slider,
.slider-track, .carousel-track {
  max-width: 100%;
}
.qv-gallery, .rd-ctl-wrap, .press-logos, .pdp-ymal-wrap,
.pdp-hc-wrap, .ccl-wrap, .hot-week-wrap {
  overflow: hidden;
}

/* Contained slide imagery */
.qv-slide, .rd-ctl-card, .framed-inner-art { max-width: 100%; }
.qv-slide > img, .rd-ctl-card img, .framed-inner-art img { max-width: 100%; height: auto; }

/* Responsive grid containment */
[class*="-grid"], [class*="-row"] { min-width: 0; }
[class*="-grid"] > *, [class*="-row"] > * { min-width: 0; }

/* ==========================================================================
   10. ANIMATION SAFETY FALLBACK
   Ensures content remains visible even if JavaScript is unavailable.
   ========================================================================== */
.no-js [data-reveal],
html:not(.gm-js) [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   11. MOBILE ACCESSIBLE TAP TARGETS (WCAG 2.5.5 / Apple HIG: 44px)
   ========================================================================== */
@media (max-width: 768px) {
  button, .btn, .btn-primary, .btn-secondary, .nav-link, .dropdown-list a,
  .footer-col-links a, .size-option-btn, .border-option-btn, .qv-size-btn,
  .pdp-pill-btn, .cart-item-qty button, .tag, .icon-btn, .btn-icon,
  .social-icon-btn, .close-cart, .pdp-acc-header, .accordion-header {
    min-height: 44px;
  }
  button, .btn, .icon-btn, .btn-icon, .social-icon-btn, .cart-item-qty button {
    min-width: 44px;
  }
  .cart-item-qty button, .icon-btn, .btn-icon, .social-icon-btn { display: grid; place-items: center; }
  .nav-link, .dropdown-list a, .footer-col-links a, .pdp-acc-header, .accordion-header {
    display: flex; align-items: center;
  }
  /* Minimum 14px-16px font size preventing automatic iOS input zoom */
  input, select, textarea { font-size: 16px; }
}

/* ==========================================================================
   12. VISUAL POLISH PASS
   (Refinements across catalog components)
   ========================================================================== */

/* 12.2 Badges: calibrated with heritage brand palette */
.badge-hot     { background: var(--gallery-gold) !important; color: #1b1408 !important; }
.badge-popular { background: var(--accent-secondary) !important; color: #fff !important; }
.badge-sale    { background: var(--sale) !important; color: #fff !important; }
.badge-new     { background: var(--accent-secondary) !important; }
/* 12.3 Shop Product Cards: unified styling with index.html */
.shop-img-box,
.shop-products-grid .product-image {
  aspect-ratio: 4 / 5 !important;
  padding: 0 !important;
  border-radius: 20px !important;
  background: #FAF8F5 !important;
  box-shadow: 0 4px 16px rgba(29, 51, 94, 0.08) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.shop-img-box img,
.shop-products-grid .product-image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.5s cubic-bezier(0.3, 1, 0.3, 1) !important;
}
.shop-item-card,
.shop-products-grid .product-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: transform var(--dur-3) var(--ease-out-expo) !important;
}
.shop-item-card:hover,
.shop-products-grid .product-card:hover {
  transform: translateY(-4px) !important;
}
.shop-item-card:hover .shop-img-box,
.shop-products-grid .product-card:hover .product-image {
  box-shadow: 0 12px 30px rgba(29, 51, 94, 0.16) !important;
}
.shop-item-card:hover .shop-img-box img,
.shop-products-grid .product-card:hover .product-image img {
  transform: scale(1.05) !important;
}

/* 12.4 Product card typography & info details */
.shop-item-info,
.shop-products-grid .product-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 2px 0 !important;
  text-align: left !important;
}
.shop-item-cat,
.shop-products-grid .category {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #B88E56 !important;
  margin: 0 !important;
}
.shop-item-title,
.shop-products-grid .product-title {
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #1D335E !important;
  margin: 0 !important;
  transition: color 0.25s ease !important;
}
.shop-item-card:hover .shop-item-title,
.shop-products-grid .product-card:hover .product-title {
  color: #B88E56 !important;
}
.shop-item-artist,
.shop-products-grid .product-artist {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: rgba(29, 51, 94, 0.65) !important;
  margin: 0 !important;
}
.shop-item-price-wrap,
.shop-products-grid .product-price-wrap {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 3px 6px !important;
  margin-top: 2px !important;
}
.shop-price-discount,
.shop-price-regular,
.shop-products-grid .product-price {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1D335E !important;
  margin: 0 !important;
}
.shop-price-old,
.shop-products-grid .product-price-old {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #8C7D75 !important;
  text-decoration: line-through !important;
  margin: 0 !important;
}
.shop-size-tag,
.shop-products-grid .product-sizes {
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  color: rgba(29, 51, 94, 0.55) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* 12.5 Header Search: pill-shaped input matching homepage */
.header-search {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-pill);
  transition: var(--transition-smooth);
}
.header-search:focus-within {
  background: #fff; border-color: var(--text-primary); box-shadow: var(--shadow-sm);
}
.site-header .search-wrapper,
.search-wrapper:not(.active) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.site-header .search-bar,
.search-wrapper .search-bar {
  display: flex !important;
  align-items: center !important;
  background: #e7e2d6 !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 8px 14px !important;
  width: 210px !important;
  min-height: unset !important;
  height: auto !important;
  gap: 8px !important;
  box-shadow: none !important;
}
.site-header .search-bar input,
.search-wrapper .search-bar input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  height: auto !important;
  color: #1D335E !important;
  line-height: normal !important;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* 12.6 Hero Banner: enhanced gradient scrim for text legibility */
.shop-hero { min-height: clamp(220px, 26vw, 340px); }
.shop-hero::before {
  background: linear-gradient(180deg, rgba(19,32,58,.05) 0%, rgba(19,32,58,.34) 45%, rgba(19,32,58,.72) 100%) !important;
}
.shop-hero-title {
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  letter-spacing: -.01em;
}
.shop-breadcrumb { letter-spacing: .03em; }

/* 12.7 Unified vertical section rhythm */
section, .section { padding-block: var(--section-y); }
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  letter-spacing: -.015em;
  color: var(--text-primary);
}
.subtitle, p.desc {
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: var(--maxw-text);
}
.eyebrow, .option-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 12.8 Shop Badges: standardized brand heritage palette (.sale/.new/.popular/.hot) */
.shop-badge,
.shop-products-grid .badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 5 !important;
  background: #1D335E !important;
  color: #FAF8F5 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 5px 12px !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(29, 51, 94, 0.2) !important;
  line-height: 1.2 !important;
}
.shop-badge.sale,
.shop-badge.hot,
.shop-products-grid .badge.sale,
.shop-products-grid .badge.hot {
  background: #B88E56 !important;
  color: #FAF8F5 !important;
}
.shop-badge.new,
.shop-badge.popular,
.shop-products-grid .badge.new,
.shop-products-grid .badge.popular {
  background: #1D335E !important;
  color: #FAF8F5 !important;
}

/* 12.9 Shop Banner: calibrated architectural interior with clean brand proportions */
.shop-hero {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: clamp(240px, 24vw, 360px) !important;
  background-size: cover !important;
  background-position: center 62% !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 768px) {
  .shop-hero {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    background-image: url("assets/images/shop-hero-banner-mobile.webp") !important;
    padding: 24px 20px !important;
  }
}

/* 12.10 PDP: full card cover image sizing for non-poster products */
.rd-main-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  padding: 0;
}
.rd-main-card > .rd-framed-art-wrap,
.rd-framed-art-wrap { width: 100%; height: 100%; display: block; }
.rd-lifestyle-stage,
.rd-framed-box {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
}
.rd-lifestyle-stage > img,
.rd-framed-box > img,
#rd-main-art-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
  transition: transform var(--dur-4) var(--ease-out-expo);
}
.rd-main-card:hover #rd-main-art-img { transform: scale(1.035); }

/* Thumbnail strip: synchronized aspect ratio and active state */
#rd-thumbs-strip .rd-thumb,
.rd-thumb {
  aspect-ratio: var(--ratio-square);
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition: var(--transition-smooth);
  cursor: pointer;
}
.rd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rd-thumb:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.rd-thumb.active { border-color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* 12.11 Candle Fragrance Pyramid: structured note hierarchy */
.scent-level-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
.scent-tag {
  flex: 0 0 62px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-dark); background: var(--text-primary);
  padding: 4px 8px; border-radius: var(--r-xs); text-align: center;
}
.scent-tag.tag-heart { background: var(--accent-primary); }
.scent-tag.tag-base  { background: var(--classic-walnut); }
.scent-notes-text { color: var(--text-secondary); font-size: var(--fs-sm); }
.scent-pyramid-badge {
  display: inline-block; font-family: var(--font-sans); font-size: 11px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gallery-gold); border: 1px solid var(--gallery-gold);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.scent-levels.is-swap .scent-notes-text { animation: gm-fade-up .45s var(--ease-out-expo) both; }
@keyframes gm-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 12.12 Savings Badge: heritage brand sale accent */
.pdp-save-badge, #pdp-save-badge, .save-badge, .discount-pill {
  background: var(--sale) !important; color: #fff !important;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-xs);
}

/* 12.13 Shop Hero: viewport height containment on desktop */
@media (min-width: 769px) {
  .shop-hero { max-height: 440px; }
}
.tap-extra-badge {
  background: var(--sale) !important; color: #fff !important;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-xs); margin-left: 8px;
  display: inline-block; line-height: 1.3;
}

/* ==========================================================================
   13. FLOATING BADGES — In Every Room
   --------------------------------------------------------------------------
   Floating badges: 3 distinct geometric silhouettes (starburst, circle, pill)
   calibrated to the heritage color system.
   ========================================================================== */
.floating-badges .badge {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--text-primary);
  background: none;
  box-shadow: none;
  line-height: 1;
  padding: 0;
  border-radius: 0;
  transform: rotate(var(--rot, 0deg));
}

/* 1. OBJECTS — starburst silhouette, oak tone */
.floating-badges .badge.float-objects {
  width: clamp(96px, 9vw, 132px);
  aspect-ratio: 1/1;
  height: auto;
  --rot: -30deg;
  color: #fff;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 98.0,50.0 L 93.8,53.8 L 97.3,58.3 L 92.5,61.4 L 95.1,66.4 L 89.9,68.6 L 91.6,74.0 L 86.0,75.2 L 86.8,80.9 L 81.1,81.1 L 80.9,86.8 L 75.2,86.0 L 74.0,91.6 L 68.6,89.9 L 66.4,95.1 L 61.4,92.5 L 58.3,97.3 L 53.8,93.8 L 50.0,98.0 L 46.2,93.8 L 41.7,97.3 L 38.6,92.5 L 33.6,95.1 L 31.4,89.9 L 26.0,91.6 L 24.8,86.0 L 19.1,86.8 L 18.9,81.1 L 13.2,80.9 L 14.0,75.2 L 8.4,74.0 L 10.1,68.6 L 4.9,66.4 L 7.5,61.4 L 2.7,58.3 L 6.2,53.8 L 2.0,50.0 L 6.2,46.2 L 2.7,41.7 L 7.5,38.6 L 4.9,33.6 L 10.1,31.4 L 8.4,26.0 L 14.0,24.8 L 13.2,19.1 L 18.9,18.9 L 19.1,13.2 L 24.8,14.0 L 26.0,8.4 L 31.4,10.1 L 33.6,4.9 L 38.6,7.5 L 41.7,2.7 L 46.2,6.2 L 50.0,2.0 L 53.8,6.2 L 58.3,2.7 L 61.4,7.5 L 66.4,4.9 L 68.6,10.1 L 74.0,8.4 L 75.2,14.0 L 80.9,13.2 L 81.1,18.9 L 86.8,19.1 L 86.0,24.8 L 91.6,26.0 L 89.9,31.4 L 95.1,33.6 L 92.5,38.6 L 97.3,41.7 L 93.8,46.2 Z" fill="%23B2967D"/></svg>')
    no-repeat center / contain;
}

/* 2. DIGITAL — circular silhouette, antique gold tone */
.floating-badges .badge.float-digital {
  width: clamp(84px, 7.6vw, 112px);
  aspect-ratio: 1/1;
  height: auto;
  border-radius: 50%;
  --rot: -14deg;
  background: var(--gallery-gold-soft);
  color: #4A342A;
  box-shadow: 0 10px 26px rgba(192,143,62,.22);
}

/* 3. ARTS — pill silhouette, Blue Ashes tone */
.floating-badges .badge.float-arts {
  width: auto;
  height: auto;
  padding: 15px 32px;
  border-radius: var(--r-pill);
  --rot: 14deg;
  background: var(--accent-secondary);
  color: #fff;
  box-shadow: 0 10px 26px rgba(54,91,121,.22);
}

@media (max-width: 768px) {
  .floating-badges .badge.float-objects { width: 78px; }
  .floating-badges .badge.float-digital { width: 66px; font-size: 13px; }
  .floating-badges .badge.float-arts { padding: 10px 20px; font-size: 13px; }
}
@media (max-width: 480px) {
  .floating-badges { display: none; }
}

/* ==========================================================================
   14. CTA HIERARCHY & CARD HOVER
   --------------------------------------------------------------------------
   Calibrated with international luxury ecommerce standards:
      --color-primary-button-background: var(--color-input-text)
    Primary buy button uses bold contrast tone
    Aligned with premium art print standards (Poster Store, LostPrint, Desenio).
    Color roles:
      Delft Navy #1D335E -> Primary CTA button
       Heritage Gold #B88E56 / #DFCA80 -> sale badges, hover links, active borders
   ========================================================================== */
:root {
  --btn-primary-bg: var(--text-primary);          /* #1D335E */
  --btn-primary-bg-hover: #142544;
  --btn-primary-bg-active: #0E1B33;
  --btn-primary-text: #FFFFFF;
  --shadow-cta: 0 8px 24px rgba(29, 51, 94, .26);
}

.btn-primary, .btn-add-to-cart, .btn-shop-now, .btn-qv-add,
.cart-checkout-btn, .hero-btn-explore, .btn-marquee-shop, .btn-continue,
.btn-bundle-atc, button.btn-primary, .gm-btn,
.tap-atc-main-btn, #pdp-submit-atc, #sticky-atc-btn,
.pdp-bundle-add-btn, .pdp-mat-btn, .pdp-faq-contact-btn {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: 0 4px 12px rgba(29, 51, 94, .16);
}
.btn-primary::before, .btn-add-to-cart::before, .btn-shop-now::before,
.cart-checkout-btn::before, .hero-btn-explore::before, .btn-bundle-atc::before,
.gm-btn::before { background: var(--btn-primary-bg-hover); }

.btn-primary:hover, .btn-add-to-cart:hover, .btn-shop-now:hover, .btn-qv-add:hover,
.cart-checkout-btn:hover, .hero-btn-explore:hover, .btn-marquee-shop:hover,
.btn-continue:hover, .btn-bundle-atc:hover, button.btn-primary:hover, .gm-btn:hover,
.tap-atc-main-btn:hover, #pdp-submit-atc:hover, #sticky-atc-btn:hover,
.pdp-bundle-add-btn:hover, .pdp-mat-btn:hover, .pdp-faq-contact-btn:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
  box-shadow: var(--shadow-cta);
}
.btn-primary:active, .btn-add-to-cart:active, .btn-shop-now:active,
.cart-checkout-btn:active, .btn-bundle-atc:active, .gm-btn:active,
.tap-atc-main-btn:active, #pdp-submit-atc:active {
  background-color: var(--btn-primary-bg-active);
}
.btn-shop-now:hover .arrow-circle,
.hero-btn-explore:hover .btn-arrow-circle,
.icon-btn-black:hover { color: var(--btn-primary-bg); }

/* Russet accent detail */
.badge-sale, .shop-badge.sale, .tap-extra-badge, .discount-badge,
.pdp-category-eyebrow, .pdp-feat-tag, .bundle-eyebrow {
  color: var(--accent-primary);
}
.badge-sale, .shop-badge.sale, .tap-extra-badge, .discount-badge {
  background: var(--accent-primary) !important;
  color: #fff !important;
}
.shop-item-card:hover .shop-item-title,
.product-card:hover .product-title { color: var(--accent-primary); }
.gm-link::after { background: var(--accent-primary); }

/* --- Card hover: smooth secondary image crossfade --- */
.product-card:hover img.main-img,
.product-card:hover .product-img-wrap img,
.fp-product-card:hover .product-img-wrap img {
  transform: none;                    /* subtle elevation */
}
.product-img-wrap .hover-img,
.card-img-wrap .hover-img,
.product-image .product-img-secondary,
.shop-img-box .shop-img-secondary {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; visibility: hidden;
  transform: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.product-card:hover .hover-img,
.product-card:hover .product-img-secondary,
.shop-item-card:hover .shop-img-secondary {
  opacity: 1; visibility: visible; transform: none;
}
.product-card:hover:has(.product-img-secondary) .product-img-primary,
.shop-item-card:hover:has(.shop-img-secondary) .shop-img-box img.product-img-primary {
  opacity: 0; visibility: hidden;
}
.product-img-primary { transition: opacity .3s ease, visibility .3s ease; }

/* Quick-add reveal animation */
@media (hover: hover) and (min-width: 769px) {
  .product-card .hover-actions,
  .product-card .product-hover-actions,
  .shop-hover-actions {
    transform: translateY(1.5rem);
    opacity: 0;
    transition: opacity .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
  }
  .product-card:hover .hover-actions,
  .product-card:hover .product-hover-actions,
  .shop-item-card:hover .shop-hover-actions,
  .product-card .hover-actions:focus-within,
  .shop-hover-actions:focus-within {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Gentle card lift without heavy shadow */
.product-card:hover, .fp-product-card:hover, .shop-item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   15. TYPOGRAPHY SPECIFICATION
     Heading      → Playfair Display
     Body / UI -> Plus Jakarta Sans
     Overline / Badge -> Cinzel
   ========================================================================== */
body, input, select, textarea, button, .nav-link, .btn, p, li, td, th, label {
  font-family: var(--font-sans);
}
h1, h2, h3, h4, .section-title, .pdp-title, .product-title,
.shop-item-title, .pdp-feat-heading, .pdp-why-title, .pdp-ymal-title,
.pdp-hc-title, .pdp-faq-main-title, .bundle-title, .faq-page-title {
  font-family: var(--font-serif);
  letter-spacing: -.015em;
}
.eyebrow, .pdp-category-eyebrow, .pdp-feat-tag, .bundle-eyebrow,
.subtitle, .press-section-tag, .scent-pyramid-badge,
.media-slot__body .eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}


/* ==========================================================================
   17. BUTTON SYSTEM
   --------------------------------------------------------------------------
     --button-height:        4.8rem  → 48px
     Button border radius: 10px
     --button-padding-inline:2.4rem  → 24px
     --button-icon-gap:      0.8rem  → 8px
     Hover sweep fill effect
   ========================================================================== */
:root {
  --btn-h: 48px;
  --btn-h-sm: 40px;
  --btn-h-lg: 56px;
  --btn-r: 10px;
  --btn-px: 24px;
  --btn-gap: 8px;
  --btn-ease: cubic-bezier(.4, 0, .2, 1);
}

.btn-primary, .btn-add-to-cart, .btn-shop-now, .btn-qv-add, .cart-checkout-btn,
.hero-btn-explore, .btn-marquee-shop, .btn-continue, .btn-bundle-atc,
button.btn-primary, .gm-btn, .tap-atc-main-btn, #pdp-submit-atc, #sticky-atc-btn,
.pdp-bundle-add-btn, .pdp-mat-btn, .pdp-faq-contact-btn,
.btn-secondary, .btn-quick-view, .btn-mockup, .btn-filter, .btn-shop-white,
.hero-btn-mockup, .btn-marquee-shop-white, .btn-continue-shopping,
.btn-choose-options, .shop-btn-quickview, .pdp-visualizer-trigger,
.services-contact-btn, .btn-checkout {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-r);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    color .25s var(--btn-ease),
    border-color .25s var(--btn-ease),
    box-shadow .25s var(--btn-ease),
    transform .18s var(--btn-ease);
}

/* Sweep fill animation */
.btn-primary::before, .btn-add-to-cart::before, .btn-shop-now::before,
.cart-checkout-btn::before, .hero-btn-explore::before, .btn-bundle-atc::before,
.gm-btn::before, .tap-atc-main-btn::before, #pdp-submit-atc::before,
.btn-secondary::before, .btn-quick-view::before, .btn-mockup::before,
.hero-btn-mockup::before::before,
.shop-btn-quickview::before, .pdp-visualizer-trigger::before,
.services-contact-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  z-index: -1;
  transform: none;
  transition: width .45s var(--btn-ease);
}
.btn-primary:hover::before, .btn-add-to-cart:hover::before, .btn-shop-now:hover::before,
.cart-checkout-btn:hover::before, .hero-btn-explore:hover::before, .btn-bundle-atc:hover::before,
.gm-btn:hover::before, .tap-atc-main-btn:hover::before, #pdp-submit-atc:hover::before,
.btn-secondary:hover::before, .btn-quick-view:hover::before, .btn-mockup:hover::before,
.hero-btn-mockup:hover::before:hover::before,
.shop-btn-quickview:hover::before, .pdp-visualizer-trigger:hover::before,
.services-contact-btn:hover::before { width: 100%; }

/* --- Primary button: Delft Navy base with interactive sweep transition --- */
.btn-primary, .btn-add-to-cart, .btn-shop-now, .btn-qv-add, .cart-checkout-btn,
.hero-btn-explore, .btn-marquee-shop, .btn-continue, .btn-bundle-atc,
button.btn-primary, .gm-btn, .tap-atc-main-btn, #pdp-submit-atc, #sticky-atc-btn,
.pdp-bundle-add-btn, .pdp-mat-btn, .pdp-faq-contact-btn, .btn-checkout {
  background-color: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-bg);
  color: #fff;
  box-shadow: none;
}
.btn-primary::before, .btn-add-to-cart::before, .btn-shop-now::before,
.cart-checkout-btn::before, .hero-btn-explore::before, .btn-bundle-atc::before,
.gm-btn::before, .tap-atc-main-btn::before, #pdp-submit-atc::before { background: #fff; }

.btn-primary:hover, .btn-add-to-cart:hover, .btn-shop-now:hover, .btn-qv-add:hover,
.cart-checkout-btn:hover, .hero-btn-explore:hover, .btn-marquee-shop:hover,
.btn-continue:hover, .btn-bundle-atc:hover, button.btn-primary:hover, .gm-btn:hover,
.tap-atc-main-btn:hover, #pdp-submit-atc:hover, #sticky-atc-btn:hover,
.pdp-bundle-add-btn:hover, .pdp-mat-btn:hover, .pdp-faq-contact-btn:hover, .btn-checkout:hover {
  color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  box-shadow: 0 6px 20px rgba(29, 51, 94, .16);
  transform: translateY(-1px);
}
.btn-primary:active, .btn-add-to-cart:active, .btn-shop-now:active,
.cart-checkout-btn:active, .btn-bundle-atc:active, .gm-btn:active,
.tap-atc-main-btn:active, #pdp-submit-atc:active {
  transform: translateY(0) scale(.99);
  box-shadow: none;
}

/* --- Outline button: navy hover sweep with white text transition --- */
.btn-secondary, .btn-quick-view, .btn-mockup, .btn-filter, .btn-shop-white,
.hero-btn-mockup, .btn-marquee-shop-white, .btn-continue-shopping,
.pdp-visualizer-trigger {
  background-color: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.btn-secondary::before, .btn-quick-view::before, .btn-mockup::before,
.hero-btn-mockup::before::before, .pdp-visualizer-trigger::before {
  background: var(--btn-primary-bg);
}
.btn-secondary:hover, .btn-quick-view:hover, .btn-mockup:hover,
.hero-btn-mockup:hover:hover, .btn-continue-shopping:hover,
.pdp-visualizer-trigger:hover {
  color: #fff;
  border-color: var(--btn-primary-bg);
  transform: translateY(-1px);
}

/* --- Card quick-add: frosted glass background with navy hover --- */
.shop-btn-quickview, .btn-quick-add {
  width: 100%;
  min-height: 42px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 0;
  color: var(--text-primary);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shop-btn-quickview::before { background: var(--btn-primary-bg); }
.shop-btn-quickview:hover, .btn-quick-add:hover { color: #fff; }

/* --- Sizes --- */
.btn-sm, .btn--small, .pdp-visualizer-trigger { min-height: var(--btn-h-sm); padding: 0 20px; font-size: 13px; }
.btn-lg, .btn--large, .tap-atc-main-btn, #pdp-submit-atc, .cart-checkout-btn { min-height: var(--btn-h-lg); font-size: 15px; }

/* --- Button icon slide effect --- */
.gm-btn svg, .btn-primary svg, .btn-secondary svg,
.pdp-mat-btn svg, .pdp-faq-contact-btn svg { transition: transform .3s var(--btn-ease); }
.gm-btn:hover svg, .btn-primary:hover svg, .btn-secondary:hover svg,
.pdp-mat-btn:hover svg, .pdp-faq-contact-btn:hover svg { transform: translateX(3px); }

/* Arrow container inside button */
.arrow-circle, .btn-arrow-circle, .pdp-mat-btn-arrow, .pdp-faq-btn-circle {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: background .25s var(--btn-ease), color .25s var(--btn-ease);
}
.btn-primary:hover .arrow-circle, .btn-shop-now:hover .arrow-circle,
.hero-btn-explore:hover .btn-arrow-circle, .gm-btn:hover .pdp-mat-btn-arrow,
.pdp-faq-contact-btn:hover .pdp-faq-btn-circle {
  background: var(--btn-primary-bg);
  color: #fff;
  transform: none;
}

/* Form input styling matching button heights and corners */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
select, .pdp-select {
  min-height: var(--btn-h);
  border-radius: var(--btn-r);
  padding: 0 16px;
}
textarea { border-radius: var(--btn-r); padding: 14px 16px; }

@media (max-width: 768px) {
  :root { --btn-h: 48px; --btn-px: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, .btn-secondary::before, .gm-btn::before { transition: none; }
}

/* TA-BTN HOVER TO GRIMOIRE GOLD */
.ta-card:hover .ta-btn,
.ta-btn:hover { background: #DFCA80 !important; color: #1D335E !important; transform: scale(1.15) rotate(90deg) !important; box-shadow: 0 6px 20px rgba(223, 202, 128, 0.5) !important; }


/* ==========================================================================
   PRESS SECTION (EDITORIAL 2-COLUMN LUXURY GRID - DELFT BLUE EDITION)
   ========================================================================== */
.press-section {
  padding: 80px 40px;
  background-color: transparent !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
}
.press-container {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: center;
}
.press-left {
  border-right: 1px solid rgba(29, 51, 94, 0.12);
  padding-right: 30px;
}
.press-section-tag {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #B88E56;
  line-height: 1.5;
  margin: 0;
}
.press-right {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.press-quote {
  font-family: var(--font-serif), 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  color: #1D335E !important;
  margin: 0;
  transition: opacity 0.3s ease;
}
.press-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(29, 51, 94, 0.08);
  padding-top: 25px;
  flex-wrap: wrap;
}
.press-logos {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.press-logo {
  font-family: var(--font-display), 'Cinzel', var(--font-serif), serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(29, 51, 94, 0.45);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.press-logo:hover,
.press-logo.active {
  color: #1D335E !important;
  font-weight: 800;
  border-bottom: 2px solid #DFCA80;
  opacity: 1;
}
.press-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}
.press-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #1D335E;
  background: transparent;
  color: #1D335E;
  font-size: 18px;
  font-family: var(--font-sans), sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.press-btn:hover {
  background: #1D335E !important;
  color: #ffffff !important;
  transform: scale(1.06);
}

@media (max-width: 900px) {
  .press-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .press-left {
    border-right: none;
    border-bottom: 1px solid rgba(29, 51, 94, 0.12);
    padding-right: 0;
    padding-bottom: 15px;
  }
}

/* ==========================================================================
   PRESS ARROW BUTTONS (WHITE CIRCLE -> DELFT BLUE ON HOVER)
   ========================================================================== */
.press-nav {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
.press-arrow,
.press-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: 1.5px solid rgba(29, 51, 94, 0.18) !important;
  color: #1D335E !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  outline: none !important;
}
.press-arrow svg,
.press-btn svg {
  stroke: #1D335E !important;
  transition: stroke 0.3s ease !important;
}
.press-arrow:hover,
.press-btn:hover {
  background-color: #1D335E !important;
  border-color: #1D335E !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 18px rgba(29, 51, 94, 0.3) !important;
}
.press-arrow:hover svg,
.press-btn:hover svg {
  stroke: #ffffff !important;
}


/* ==========================================================================
   MOBILE PRESS SECTION REFINEMENT (PARISIAN EDITORIAL LUXURY)
   ========================================================================== */
@media (max-width: 900px) {
  .press-section,
  .grimoire-style-40 {
    padding: 50px 20px 55px 20px !important;
    background: #FAF8F5 !important;
    text-align: center !important;
  }
  .press-container,
  .grimoire-style-41 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 0 !important;
  }
  .press-left,
  .grimoire-style-42 {
    width: 100% !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }
  .press-left p,
  .press-section-tag,
  .grimoire-style-43 {
    font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #B88E56 !important;
    text-transform: uppercase !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .press-right,
  .grimoire-style-44 {
    width: 100% !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .press-quote,
  .grimoire-style-45 {
    font-family: var(--font-serif), 'Playfair Display', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    color: #1D335E !important;
    margin: 0 auto 24px auto !important;
    max-width: 90% !important;
    text-align: center !important;
    min-height: 90px !important;
    letter-spacing: 0.2px !important;
    text-shadow: none !important;
  }
  .press-bottom-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    border-top: 1px solid rgba(29, 51, 94, 0.08) !important;
    padding-top: 20px !important;
  }
  .press-logos,
  .grimoire-style-46 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .press-logo {
    display: none !important;
  }
  .press-logo.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 2px solid #DFCA80 !important;
    padding-bottom: 5px !important;
  }
  .press-logo.active span {
    font-family: var(--font-display), 'Cinzel', var(--font-serif), serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    color: #1D335E !important;
    text-transform: uppercase !important;
  }
  .press-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 auto !important;
  }
  .press-arrow,
  .press-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1.5px solid rgba(29, 51, 94, 0.18) !important;
    color: #1D335E !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
}


/* ==========================================================================
   BUNDLE & SAVE HARMONIZATION (WARM ALABASTER & ANTIQUE LINEN CREAM)
   ========================================================================== */
.bundle-save,
.grimoire-style-53 {
  background-color: #FAF8F5 !important;
}

.bs-card-box,
.grimoire-style-54 {
  background-color: #F3EDE2 !important;
  border: 1px solid #E5DDD0 !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 40px rgba(29, 51, 94, 0.06) !important;
}

.bs-info-side,
.bs-content-side {
  background-color: #F3EDE2 !important;
}

.bs-desktop-header .subtitle,
.bundle-header .subtitle {
  color: #B88E56 !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}

.bs-desktop-header .section-title,
.bundle-header .section-title {
  color: #1D335E !important;
}

@media (max-width: 900px) {
  .bundle-save,
  .grimoire-style-53 {
    background-color: #FAF8F5 !important;
    padding: 40px 16px 50px 16px !important;
  }
  .bs-card-box,
  .grimoire-style-54 {
    background-color: #F3EDE2 !important;
    border: 1px solid #E5DDD0 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(29, 51, 94, 0.05) !important;
  }
  .bs-info-side {
    background-color: #F3EDE2 !important;
    padding: 24px 20px !important;
  }
}


/* ==========================================================================
   BUNDLE & SAVE - EXACT MOBILE SAND BEIGE COLOR (#eae3d3)
   ========================================================================== */
.bundle-save,
.grimoire-style-53 {
  background-color: #FAF8F5 !important;
}

.bs-card-box,
.grimoire-style-54 {
  background-color: #eae3d3 !important;
  border: 1px solid #dcd3c3 !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05) !important;
}

.bs-info-side,
.bs-content-side {
  background-color: #eae3d3 !important;
}

@media (max-width: 900px) {
  .bundle-save,
  .grimoire-style-53 {
    background-color: #FAF8F5 !important;
    padding: 40px 16px 50px 16px !important;
  }
  .bs-card-box,
  .grimoire-style-54 {
    background-color: #eae3d3 !important;
    border: 1px solid #dcd3c3 !important;
    border-radius: 24px !important;
  }
  .bs-info-side {
    background-color: #eae3d3 !important;
  }
}


/* ==========================================================================
   BUNDLE & SAVE - PURE WHITE #FFFFFF STYLE (MATCHING LARGE SCALE STATEMENTS)
   ========================================================================== */
.bundle-save,
.grimoire-style-53 {
  background-color: #FAF8F5 !important;
}

.bs-card-box,
.grimoire-style-54 {
  background-color: #FFFFFF !important;
  border: none !important;
  border-radius: 28px !important;
  box-shadow: 0 12px 36px rgba(29, 51, 94, 0.07) !important;
}

.bs-info-side,
.bs-content-side {
  background-color: #FFFFFF !important;
}

.bs-item-num {
  background-color: #1D335E !important;
  color: #FFFFFF !important;
}

.bs-desktop-header .section-title,
.bundle-header .section-title,
.bs-item-title {
  color: #1D335E !important;
}

.bs-desktop-header .subtitle,
.bundle-header .subtitle {
  color: #B88E56 !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}

@media (max-width: 900px) {
  .bundle-save,
  .grimoire-style-53 {
    background-color: #FAF8F5 !important;
    padding: 40px 16px 50px 16px !important;
  }
  .bs-card-box,
  .grimoire-style-54 {
    background-color: #FFFFFF !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(29, 51, 94, 0.06) !important;
  }
  .bs-info-side {
    background-color: #FFFFFF !important;
    padding: 24px 20px !important;
  }
}


/* ==========================================================================
   BUNDLE & SAVE INTERACTIVE PINS & VARIANT SELECTORS
   ========================================================================== */
.bs-pin {
  cursor: pointer !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}
.bs-pin:hover {
  transform: scale(1.3) !important;
  box-shadow: 0 0 16px rgba(223, 202, 128, 0.9) !important;
  background-color: #DFCA80 !important;
  color: #1D335E !important;
}
.bs-variant-select:hover,
.bs-variant-select:focus {
  border-color: #DFCA80 !important;
  box-shadow: 0 0 0 3px rgba(223, 202, 128, 0.25) !important;
}
.bs-add-btn:hover {
  background-color: #152544 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(29, 51, 94, 0.3) !important;
}


/* ==========================================================================
   JOURNAL SECTION (EUROPEAN ART EDITORIAL UPGRADE)
   ========================================================================== */
.journal-section {
  padding: 80px 40px;
  background-color: #FAF8F5 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.journal-section .section-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  color: #1D335E !important;
}
.journal-section .section-header .view-all {
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 700;
  color: #1D335E !important;
  letter-spacing: 1px;
}
.journal-main {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 40px rgba(29, 51, 94, 0.08) !important;
}
.journal-main .badge {
  background: #FAF8F5 !important;
  color: #1D335E !important;
  border: 1px solid #DFD5C4 !important;
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
.journal-content h3 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  color: #ffffff !important;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  margin-bottom: 12px;
}
.journal-main .meta {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 16px;
}
.journal-main .read-more {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: #DFCA80 !important;
  text-decoration: none;
  border-bottom: 2px solid #DFCA80;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}
.journal-main:hover .read-more {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

.journal-side-card img {
  width: 110px;
  height: 110px;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(29, 51, 94, 0.08);
}
.journal-side-card .badge {
  background: #FAF8F5 !important;
  color: #1D335E !important;
  border: 1px solid #DFD5C4 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
}
.journal-side-card h4 {
  font-family: var(--font-serif);
  font-size: 18.5px;
  font-weight: 600;
  color: #1D335E !important;
  line-height: 1.35;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}
.journal-side-card:hover h4 {
  color: #DFCA80 !important;
}
.journal-side-card .meta {
  font-family: var(--font-sans);
  font-size: 14px;
  color: #635B54 !important;
  font-weight: 500;
}

/* ==========================================================================
   BUNDLE & SAVE MOBILE OVERFLOW & RESPONSIVE FIX
   ========================================================================== */
@media (max-width: 900px) {
  .bs-product-item,
  .grimoire-style-59 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bs-item-info {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bs-variant-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    border: 1px solid #DFD5C4 !important;
    background-color: #FAF8F5 !important;
    color: #1D335E !important;
  }
  .bs-thumb-wrap {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 14px !important;
    padding: 4px !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
  }
}


/* ==========================================================================
   BUNDLE & SAVE MOBILE VARIANT & THUMBNAIL GOLDEN ALIGNMENT
   ========================================================================== */
@media (max-width: 900px) {
  .bs-product-item,
  .grimoire-style-59 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 0 !important;
  }
  .bs-item-num,
  .grimoire-style-60 {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background-color: #1D335E !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .bs-thumb-wrap {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 14px !important;
    padding: 4px !important;
    background: #FFFFFF !important;
    border: 1px solid #DFD5C4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .bs-thumb-img,
  .grimoire-style-61 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  .bs-item-info {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }
  .bs-item-title,
  .grimoire-style-62 {
    font-family: var(--font-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1D335E !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.25 !important;
  }
  .bs-item-price,
  .grimoire-style-63 {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1D335E !important;
    margin: 0 0 6px 0 !important;
  }
  .bs-item-price .sale-price {
    color: #B88E56 !important;
    font-weight: 700 !important;
  }
  .bs-item-price .old-price {
    color: #888888 !important;
    font-weight: 400 !important;
    margin-left: 6px !important;
  }
  .bs-variant-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    border: 1px solid #DFD5C4 !important;
    color: #1D335E !important;
    outline: none !important;
    cursor: pointer !important;
    display: block !important;
  }
  .bs-variant-select:focus {
    border-color: #DFCA80 !important;
    box-shadow: 0 0 0 2px rgba(223, 202, 128, 0.3) !important;
  }
}

/* ==========================================================================
   REVIEW CARDS LUXURY TYPOGRAPHY SYSTEM
   ========================================================================== */
.review-card .quote {
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: #222222 !important;
  margin-bottom: 20px !important;
}
.review-card .author {
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1D335E !important;
}
.review-product span {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #222222 !important;
}
@media (max-width: 900px) {
  .review-card .quote {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
  .review-card .author {
    font-size: 16px !important;
    color: #1D335E !important;
  }
  .review-product span {
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   JOURNAL LUXURY EDITORIAL LAYOUT (EXPANDED GRID & 18.5PX HEADINGS)
   ========================================================================== */
@media (min-width: 901px) {
  .journal-section .journal-grid {
    grid-template-columns: 1fr 1.35fr !important;
    gap: 36px !important;
  }
}
.journal-side-card {
  gap: 18px !important;
}
.journal-side-card img {
  width: 110px !important;
  height: 110px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.journal-side-card h4 {
  font-family: var(--font-serif) !important;
  font-size: 18.5px !important;
  font-weight: 600 !important;
  color: #1D335E !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

/* ==========================================================================
   HOMEPAGE JOURNAL 2-COLUMN BALANCED GRID (ENLARGED LUXURY EDITORIAL)
   ========================================================================== */
.journal-section .journal-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: stretch !important;
}
.journal-section .journal-main {
  width: 100% !important;
  height: 580px !important;
  min-height: 580px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 44px 38px !important;
}
.journal-section .journal-main .journal-content h3 {
  font-family: var(--font-serif) !important;
  font-size: clamp(32px, 3.5vw, 42px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}
.journal-section .journal-main .meta {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 18px !important;
}
.journal-section .journal-main .read-more {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #DFCA80 !important;
}
.journal-section .journal-sidebar {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 28px !important;
}
.journal-section .journal-side-card {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  text-decoration: none !important;
}
.journal-section .journal-side-card img {
  width: 145px !important;
  height: 145px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 18px rgba(29, 51, 94, 0.08) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.journal-section .journal-side-card:hover img {
  transform: scale(1.05) !important;
}
.journal-section .journal-side-card .content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.journal-section .journal-side-card .badge {
  background: #FAF8F5 !important;
  color: #1D335E !important;
  border: 1px solid #DFD5C4 !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 10px !important;
}
.journal-section .journal-side-card h4 {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1D335E !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
  transition: color 0.3s ease !important;
}
.journal-section .journal-side-card:hover h4 {
  color: #DFCA80 !important;
}
.journal-section .journal-side-card .meta {
  font-family: var(--font-sans) !important;
  font-size: 14.5px !important;
  color: #635B54 !important;
  font-weight: 500 !important;
}
@media (max-width: 900px) {
  .journal-section .journal-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .journal-section .journal-main {
    height: 380px !important;
    min-height: 380px !important;
    padding: 24px 20px !important;
  }
  .journal-section .journal-side-card {
    gap: 16px !important;
  }
  .journal-section .journal-side-card img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 14px !important;
  }
  .journal-section .journal-side-card h4 {
    font-size: 17px !important;
  }
}
.journal-section .journal-main {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
}
.journal-section .journal-sidebar {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 24px !important;
}
.journal-section .journal-side-card {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
.journal-section .journal-side-card img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.journal-section .journal-side-card .content {
  flex: 1 !important;
  min-width: 0 !important;
}
.journal-section .journal-side-card h4 {
  font-family: var(--font-serif) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #1D335E !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}
@media (max-width: 900px) {
  .journal-section .journal-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
}