/* ================================================================
   Boxes Trading — 2026 visual direction
   A quiet, editorial luxury layer shared by every page.
   It intentionally loads after site.css and enhance.css.
   ================================================================ */

:root {
  --bg-dark: #0b0806;
  --bg-card: rgba(24, 18, 13, .86);
  --bg-card-hover: rgba(31, 23, 16, .96);
  --gold-primary: #cfa85d;
  --gold-light: #f0d9a4;
  --gold-deep: #8f692c;
  --gold-glow: rgba(207, 168, 93, .22);
  --text-main: #f4eee4;
  --text-muted: #bdb0a0;
  --text-gold: #e2c481;
  --border-gold: rgba(207, 168, 93, .20);
  --border-gold-bright: rgba(231, 198, 126, .52);
  --surface: rgba(21, 16, 12, .76);
  --surface-strong: #17110d;
  --hairline: rgba(255, 255, 255, .075);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --shadow-luxury: 0 32px 80px -34px rgba(0, 0, 0, .92);
  --transition: all .36s cubic-bezier(.2, .72, .2, 1);
}

/* Keep mobile browsers from auto-recolouring this intentionally dark theme. */
html { color-scheme: only dark; }

body {
  background-color: var(--bg-dark);
  /* Restored original Damascene atmosphere and geometric inlay motif. */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(45, 26, 8, .85) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 50%, rgba(126, 30, 18, .22) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(212, 175, 55, .12) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='rgba(212,175,55,0.08)' stroke-width='1.2'%3E%3Cpath d='M60 24l7.4 21 20.9-7.2-7.2 20.9 21 7.3-21 7.3 7.2 20.9-20.9-7.2-7.4 21-7.4-21-20.9 7.2 7.2-20.9-21-7.3 21-7.3-7.2-20.9 20.9 7.2z'/%3E%3Cpath d='M0 0l6 14 14 6-14 6-6 14-6-14-14-6 14-6zM120 0l6 14 14 6-14 6-6 14-6-14-14-6 14-6zM0 120l6 14 14 6-14 6-6 14-6-14-14-6 14-6zM120 120l6 14 14 6-14 6-6 14-6-14-14-6 14-6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, cover, cover, 120px 120px;
  letter-spacing: .002em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.018) 50%, transparent 100%),
    radial-gradient(circle at 50% 25%, transparent, rgba(0,0,0,.18) 75%);
}

body::after { opacity: .03; }

::selection { background: rgba(207, 168, 93, .34); color: #fff8e8; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold-light) !important;
  outline-offset: 4px;
}

.container {
  width: min(100%, 1400px);
  padding-inline: clamp(22px, 4.6vw, 72px);
}

section { padding-block: clamp(84px, 8.5vw, 132px); }

.bg-watermark {
  opacity: .48;
  -webkit-text-stroke-color: rgba(207, 168, 93, .065);
}

/* Navigation — a lighter, framed bar with clearer brand hierarchy. */
header.navbar {
  top: 12px;
  left: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  padding: 11px 0;
  background: rgba(12, 9, 7, .76);
  border: 1px solid rgba(235, 209, 156, .16);
  border-radius: 18px;
  box-shadow: 0 18px 55px -26px rgba(0, 0, 0, .92), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}

header.navbar.scrolled {
  top: 8px;
  padding: 8px 0;
  background: rgba(11, 8, 6, .93);
  border-color: rgba(235, 209, 156, .24);
  box-shadow: 0 20px 48px -28px #000;
}

header.navbar .container { padding-inline: clamp(18px, 2.4vw, 38px); }
.nav-content { min-height: 52px; gap: clamp(14px, 2vw, 30px); }
.brand-logo { gap: 12px; min-width: max-content; }

.brand-logo img {
  width: 52px;
  height: 52px;
  padding: 3px;
  border: 1px solid rgba(238, 213, 159, .35);
  border-radius: 12px;
  background: #e9dfcb;
  object-fit: cover;
  box-shadow: 0 10px 26px -16px rgba(238, 213, 159, .55);
}

.brand-title { font-size: 1.28rem; letter-spacing: .015em; }
.brand-title small { margin-top: 3px; font-size: .69rem; opacity: .84; }
.nav-links { gap: clamp(16px, 2vw, 28px); font-size: .86rem; }
.nav-links a { color: #c9bdad; padding: 11px 0; }

.nav-links a::after {
  height: 1px;
  bottom: 4px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.nav-links a:hover,
.nav-links a.active { color: #fff7e8; }

.nav-actions { gap: 8px; }
.lang-btn,
.cart-btn {
  min-height: 42px;
  padding: 9px 13px;
  border-color: rgba(225, 194, 126, .26);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.lang-btn:hover,
.cart-btn:hover { background: rgba(207, 168, 93, .11); }

.cart-badge {
  width: 19px;
  height: 19px;
  background: #8e2d21;
  box-shadow: 0 0 0 3px rgba(142,45,33,.14);
}

/* Homepage hero — stronger photography, calmer copy and a floating proof bar. */
.hero-section {
  min-height: max(780px, 100svh);
  padding: 148px 0 62px;
  isolation: isolate;
}

.hero-bg img {
  filter: brightness(.78) saturate(.86) contrast(1.03);
  transform: scale(1.012);
}

.hero-section:hover .hero-bg img { transform: scale(1.045); }

.hero-overlay {
  background:
    linear-gradient(180deg, rgba(8,6,4,.22) 0%, rgba(8,6,4,.18) 30%, rgba(8,6,4,.76) 74%, #0b0806 100%),
    linear-gradient(90deg, rgba(8,6,4,.80) 0%, rgba(8,6,4,.34) 44%, rgba(8,6,4,.24) 100%),
    radial-gradient(circle at 70% 34%, transparent 0 13rem, rgba(8,6,4,.18) 43rem);
}

html[dir="rtl"] .hero-overlay {
  background:
    linear-gradient(180deg, rgba(8,6,4,.22) 0%, rgba(8,6,4,.18) 30%, rgba(8,6,4,.76) 74%, #0b0806 100%),
    linear-gradient(270deg, rgba(8,6,4,.72) 0%, rgba(8,6,4,.26) 46%, rgba(8,6,4,.48) 100%),
    radial-gradient(circle at 26% 34%, transparent 0 13rem, rgba(8,6,4,.18) 43rem);
}

.hero-word-bg { opacity: .19; filter: blur(.1px); }

.hero-content {
  width: min(100%, 1160px);
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.hero-subtitle {
  margin-bottom: 18px;
  padding: 8px 15px;
  gap: 10px;
  color: #f0dbad;
  font-size: .88rem;
  letter-spacing: .055em;
  border: 1px solid rgba(234,205,145,.22);
  border-radius: 999px;
  background: rgba(10, 7, 5, .28);
  backdrop-filter: blur(10px);
}

.hero-subtitle::before { width: 22px; opacity: .7; }

.hero-title {
  max-width: 920px;
  margin: 0 auto 24px;
  font-size: clamp(3rem, 6vw, 5.45rem);
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: -.018em;
}

.hero-desc {
  max-width: 720px;
  margin: 0 auto 30px;
  color: #d3c8b9;
  font-size: clamp(1rem, 1.22vw, 1.15rem);
  line-height: 1.95;
  text-wrap: pretty;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}

.hero-buttons { margin-top: 30px; gap: 12px; }
.btn-gold,
.btn-outline,
.btn-whatsapp-order,
.cart-empty-cta {
  min-height: 52px;
  padding: 13px 26px;
  border-radius: 13px;
  justify-content: center;
}

.btn-gold {
  background: linear-gradient(135deg, #f0d9a2, #cda459 56%, #a77935) !important;
  box-shadow: 0 18px 34px -18px rgba(222, 184, 103, .75), inset 0 1px rgba(255,255,255,.48);
}

.btn-outline { background: rgba(13, 9, 7, .52); border-color: rgba(234,205,145,.36); }

.hero-features {
  max-width: 1080px;
  margin: 54px auto 0;
  padding: 18px;
  gap: 0;
  border: 1px solid rgba(235, 209, 156, .18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(19,14,10,.62), rgba(12,9,7,.78));
  box-shadow: 0 28px 60px -38px #000, inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}

.hero-features .feature-item {
  min-height: 104px;
  padding: 13px clamp(12px, 2vw, 24px);
  border-inline-start: 1px solid rgba(235, 209, 156, .14);
}

.hero-features .feature-item:first-child { border-inline-start: 0; }
.hero-features .feature-item .icon-svg-lg { width: 26px; height: 26px; margin-bottom: 8px; }
.hero-features .feature-item strong { font-size: 1.02rem; }
.hero-features .feature-item span { color: #a99c8d; font-size: .76rem; }

.hero-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  width: 1px;
  height: 32px;
  background: linear-gradient(var(--gold-light), transparent);
  opacity: .55;
}

.inlay-divider { height: 8px; opacity: .62; background-size: 24px 12px; }
.marquee-wrapper { padding: 12px 0; background: rgba(20, 14, 10, .78); }
.marquee-item { font-size: .88rem; letter-spacing: .025em; opacity: .86; }

/* Shared editorial language. */
.section-header { margin-bottom: clamp(34px, 4.2vw, 58px); }
.section-header.text-center { max-width: 760px; }

.section-tag {
  min-height: 30px;
  padding: 5px 12px;
  gap: 8px;
  color: #e2c481;
  font-size: .74rem;
  letter-spacing: .12em;
  border: 1px solid rgba(207,168,93,.22);
  border-radius: 999px;
  background: rgba(207,168,93,.055);
}

.section-tag::before { width: 16px; }

.section-title {
  max-width: 17ch;
  margin-top: 15px;
  color: #f6efe4;
  font-size: clamp(2.25rem, 4.35vw, 4rem);
  line-height: 1.13;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.text-center .section-title,
.section-header[style*="text-align:center"] .section-title,
.section-header[style*="text-align: center"] .section-title { margin-inline: auto; }

.section-desc { color: #b9ad9e; font-size: 1rem; line-height: 1.95; text-wrap: pretty; }

#maison { overflow: hidden; }
.story-grid { grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: clamp(52px, 7vw, 108px); }
.story-grid > div:first-child { align-self: center; }
.story-grid .section-title { margin-bottom: 24px; }
.story-grid p { line-height: 1.95 !important; }

.story-card-wrapper {
  min-height: 630px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 42px 90px -46px #000;
  isolation: isolate;
}

.story-card-wrapper::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(244,222,176,.32);
  border-radius: 20px;
}

.story-img-main { height: 100%; min-height: 630px; object-fit: cover; filter: saturate(.82) contrast(1.02); }

.story-stats {
  margin-top: 34px;
  padding: 18px 0 0;
  gap: 16px;
  border-top: 1px solid var(--hairline);
}

.story-stats > div { padding-inline: 12px; }
.stat-num { font-size: clamp(1.55rem, 2.4vw, 2.15rem); }
.stat-label { color: #a99d8e; }

.counters-band {
  padding-block: 30px;
  background: transparent;
  border: 0;
}

.counters-grid {
  padding: 30px 18px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(33,24,16,.86), rgba(14,10,8,.92));
  box-shadow: var(--shadow-luxury);
}

.counters-grid > div + div { border-inline-start: 1px solid rgba(207,168,93,.14); }
.counter-num { font-size: clamp(2rem, 4vw, 3.5rem); }
.counter-lbl { color: #aaa091; }

/* Catalog and product cards. */
#shop { overflow: hidden; }
#shop .section-header { max-width: 780px; margin-inline: auto; }

.filter-bar,
.shop-controls {
  padding: 14px;
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  background: rgba(18, 13, 10, .72);
  box-shadow: 0 24px 60px -44px #000;
  backdrop-filter: blur(16px);
}

.tab-btn,
.cat-pill {
  min-height: 42px;
  padding: 9px 17px;
  border-radius: 11px;
}

.tab-btn.active,
.cat-pill.active { box-shadow: inset 0 1px rgba(255,255,255,.26), 0 12px 22px -16px var(--gold-primary); }

.search-box input,
.sort-select {
  min-height: 46px;
  border-radius: 11px;
  background: rgba(5,4,3,.56);
}

.product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.product-card {
  border-color: rgba(226,194,128,.16);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(29,21,15,.92), rgba(15,11,8,.96));
  box-shadow: 0 28px 68px -48px #000;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,219,163,.54), transparent);
  opacity: .65;
}

.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(235,205,143,.42);
  box-shadow: 0 34px 76px -38px rgba(0,0,0,.96), 0 0 0 1px rgba(207,168,93,.06);
}

.product-img-wrapper,
.home-product-media {
  aspect-ratio: 1.08 / 1;
  padding: 18px;
  border-bottom-color: rgba(226,194,128,.14);
  background:
    radial-gradient(circle at 50% 40%, rgba(42, 26, 12, .95) 0%, rgba(12, 7, 2, .98) 100%),
    linear-gradient(135deg, rgba(212, 175, 55, .05) 0%, transparent 100%) !important;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, .85);
}

.product-img-wrapper img,
.home-product-media .home-product-image {
  mix-blend-mode: normal;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .85));
}

.home-product-media .home-product-image { padding: 18px; }
.product-details { padding: 22px 22px 20px; }
.product-cat { margin-bottom: 9px; letter-spacing: .08em; }
.product-title { font-size: 1.2rem; margin-bottom: 8px; }
.product-desc { color: #a99f92; }
.product-footer { padding-top: 15px; border-top-color: rgba(255,255,255,.07); }
.product-price { font-size: 1.28rem; }

.btn-add-cart {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(207,168,93,.09);
}

.product-tag {
  top: 13px;
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 8px 22px -14px rgba(207,168,93,.8);
}

.showcase-scroll { gap: 18px; padding-bottom: 20px; }
.show-card { border-radius: 20px; overflow: hidden; }

/* High-value blocks. */
.corp-sec { padding-top: 34px; }
.corp-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-color: rgba(226,194,128,.22);
  background: linear-gradient(145deg, rgba(33,24,16,.94), rgba(12,9,7,.98));
  box-shadow: 0 42px 90px -54px #000;
}

.corp-txt { padding: clamp(36px, 5vw, 72px); }
.corp-txt .section-title { font-size: clamp(2rem, 3.5vw, 3.35rem); }
.corp-imgs img { filter: saturate(.82) contrast(1.03); }

.simulator-section {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 15% 28%, rgba(126, 30, 18, .16), transparent 29rem),
    radial-gradient(circle at 84% 65%, rgba(207, 168, 93, .10), transparent 32rem),
    linear-gradient(180deg, rgba(9,6,4,.30), rgba(21,14,9,.74) 48%, rgba(9,6,4,.38));
}

.simulator-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23CFA85D' stroke-opacity='.13'%3E%3Cpath d='M48 11l8 21 21 8-21 8-8 21-8-21-21-8 21-8z'/%3E%3Ccircle cx='48' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, #000, transparent 38%, transparent 62%, #000);
}

.simulator-section .section-header.text-center {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  align-items: end;
  column-gap: clamp(30px, 6vw, 92px);
  row-gap: 12px;
  padding-bottom: clamp(30px, 4vw, 48px);
  border-bottom: 1px solid rgba(231, 198, 126, .18);
  text-align: start;
}

.simulator-section .section-header.text-center .section-tag { justify-content: flex-start; }
.simulator-section .section-header .section-tag {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.simulator-section .section-header .section-title {
  grid-column: 1;
  grid-row: 2;
  max-width: 11ch;
  margin: 16px 0 0;
  font-size: clamp(3rem, 5.6vw, 5rem);
  line-height: 1.02;
}
.simulator-section .section-header .section-desc {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 590px;
  margin: 0;
  justify-self: end;
  color: #c8baaa;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
}

.bsp-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 52px);
  padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid rgba(231, 198, 126, .20);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(25,18,13,.88), rgba(10,7,5,.92));
  box-shadow: 0 48px 100px -62px #000, inset 0 1px rgba(255,255,255,.035);
}

.bsp-preview,
.bsp-form,
.pd-info,
.ct-form-wrap,
.contact-card {
  border-radius: var(--radius-md);
  border-color: rgba(226,194,128,.20);
  background: linear-gradient(150deg, rgba(29,21,15,.94), rgba(13,10,8,.97));
  box-shadow: 0 32px 74px -50px #000;
}

.bsp-preview { top: 104px; }

.preview-box-wood {
  aspect-ratio: 4 / 3;
  padding: clamp(26px, 4vw, 46px);
  border: 12px solid #3d240f;
  border-radius: 24px;
  background:
    linear-gradient(110deg, transparent 12%, rgba(255,255,255,.055) 28%, transparent 42%),
    repeating-linear-gradient(4deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,.025) 2px 5px),
    radial-gradient(circle at 50% 44%, #42260e 0%, #251306 55%, #120802 100%);
  box-shadow:
    inset 0 0 58px rgba(0,0,0,.88),
    inset 0 1px rgba(255,240,204,.12),
    0 30px 62px -28px rgba(0,0,0,.95),
    0 0 0 1px rgba(207,168,93,.18);
}

.preview-box-wood::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(242, 214, 153, .18);
  border-radius: 12px;
  box-shadow: inset 0 0 0 5px rgba(7,4,2,.24);
}

.preview-inlay-frame {
  inset: 26px;
  border: 1px solid rgba(233, 199, 126, .72);
  outline: 1px solid rgba(233, 199, 126, .18);
  outline-offset: 7px;
  border-radius: 10px;
}

.preview-engraved-text {
  max-width: 82%;
  font-size: clamp(1.8rem, 3.5vw, 3.15rem);
  text-shadow: 0 4px 18px rgba(0,0,0,.92), 0 0 22px rgba(207,168,93,.12);
}

.corner-rosette { width: 30px; height: 30px; opacity: .92; }
.sim-badge {
  bottom: 17px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8,5,3,.78);
  backdrop-filter: blur(10px);
}

.bsp-estimate {
  margin-top: 12px;
  padding: 17px 19px;
  border-color: rgba(231,198,126,.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(207,168,93,.13), rgba(19,13,9,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.bsp-est-val { font-size: clamp(1.8rem, 3vw, 2.45rem); }

.bsp-panel {
  position: relative;
  display: grid;
  gap: 0;
  padding: 13px 15px 17px;
  border: 1px solid rgba(231,198,126,.18);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(31,22,15,.90), rgba(12,8,6,.96));
  box-shadow: 0 30px 68px -52px #000, inset 0 1px rgba(255,255,255,.035);
}

.bsp-panel::before {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,211,150,.55), transparent);
}

.bsp-step {
  padding: 22px 14px 24px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 0;
  background: transparent;
}

.bsp-step:nth-of-type(4) { border-bottom: 0; }
.bsp-step:focus-within,
.bsp-step:hover {
  border-color: rgba(255,255,255,.07);
  background: rgba(207,168,93,.035);
}

.bsp-step-head { margin-bottom: 14px; gap: 11px; }
.bsp-num {
  width: 30px;
  height: 30px;
  border-color: rgba(231,198,126,.46);
  background: rgba(207,168,93,.06);
  box-shadow: none;
}

.bsp-step-head h3 { font-size: .94rem; letter-spacing: .012em; }
.bsp-input-wrap input {
  min-height: 56px;
  border-radius: 13px;
  background: rgba(6,4,3,.52);
}

.bsp-pills,
.bsp-sizes,
.bsp-woods { gap: 8px; }

.bsp-pill,
.bsp-size,
.bsp-wood {
  min-width: 0;
  border-radius: 13px;
  background: rgba(7,5,3,.55);
}

.bsp-pill.on,
.bsp-size.on,
.bsp-wood.on {
  border-color: #d8b66b;
  background: linear-gradient(180deg, rgba(207,168,93,.16), rgba(207,168,93,.055));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 12px 25px -20px rgba(207,168,93,.8);
}

.bsp-size-tag { border-radius: 999px; }
.bsp-swatch { width: 38px; height: 38px; }
.bsp-cta { margin-top: 16px; min-height: 56px; border-radius: 14px; }
.bsp-foot { margin: 12px 8px 0; line-height: 1.6; }
.bsp-form { padding: clamp(22px, 3vw, 36px); }

/* Inner pages. */
.shop-intro {
  padding: 154px 24px 72px;
  background:
    radial-gradient(circle at 50% 0%, rgba(207,168,93,.13), transparent 33rem),
    linear-gradient(180deg, rgba(29,21,14,.58), rgba(11,8,6,.2));
}

.shop-intro-title { font-size: clamp(2.8rem, 6vw, 5rem); }
.shop-body { padding-top: 46px; }
.shop-resultline { margin-block: 20px 28px; }

.ab-hero {
  min-height: min(800px, 78svh) !important;
  align-items: flex-end;
}

.ab-hero .ab-bg img { filter: saturate(.78) contrast(1.03) brightness(.78); }
.ab-hero::before {
  background:
    linear-gradient(180deg, rgba(7,5,4,.16), rgba(7,5,4,.30) 40%, rgba(7,5,4,.92) 100%),
    linear-gradient(90deg, rgba(7,5,4,.32), transparent 58%);
}

.ab-hero .container { padding-bottom: 68px; }
.ab-glass {
  max-width: 790px;
  padding: clamp(28px, 4vw, 50px);
  border: 1px solid rgba(234,205,145,.20);
  border-radius: 24px;
  background: rgba(12,9,7,.50);
  box-shadow: 0 32px 70px -42px #000;
  backdrop-filter: blur(16px);
}

.ab-hero h1 { font-size: clamp(2.8rem, 5.5vw, 5.2rem) !important; line-height: 1.12; }
.contact-page .ab-hero .container { max-width: 900px; }

.ct-hero {
  min-height: 430px;
  display: flex;
  align-items: center;
  padding: 146px 24px 76px;
  background: #0d0907;
}

.ct-hero-bg img { opacity: .42; filter: saturate(.78) contrast(1.04); }
.ct-hero-overlay {
  background:
    linear-gradient(180deg, rgba(9,6,4,.48), rgba(9,6,4,.84)),
    radial-gradient(circle at 50% 36%, transparent, rgba(9,6,4,.42) 72%);
}
.ct-hero h1 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); }
.ct-layout { gap: clamp(24px, 4vw, 46px); max-width: 1100px; }
.ct-line,
.ct-quick { border-radius: 16px; background: linear-gradient(150deg, rgba(29,21,15,.92), rgba(14,10,8,.96)); }
.ct-line { padding: 19px 20px; }
.ct-quick { padding: clamp(24px, 3vw, 36px); }

.timeline::before { background: linear-gradient(transparent, var(--gold-primary) 12%, var(--gold-primary) 88%, transparent); opacity: .4; }
.tl-item { gap: clamp(24px, 4vw, 56px); }
.tl-card,
.prc-card { border-radius: 18px; overflow: hidden; }
.prc-card { background: linear-gradient(150deg, rgba(28,20,14,.90), rgba(14,10,8,.96)); }
.gal-grid { gap: 14px; }
.gal-grid img { border-radius: 14px; }

.pd-grid { gap: clamp(32px, 5vw, 70px); align-items: start; }
.pd-gallery-shell,
.pd-gallery-main { border-radius: 22px; overflow: hidden; }
.pd-gallery-main { background: radial-gradient(circle, #2b1d12, #0c0907 72%); }
.pd-info { padding: clamp(26px, 4vw, 46px); }
.related-title { margin-top: clamp(68px, 8vw, 110px); }

.ct-grid { gap: clamp(24px, 4vw, 46px); }
.contact-card { padding: 28px; }
.contact-card:hover { transform: translateY(-4px); }

/* Cart, footer and utility surfaces. */
.cart-drawer { background: #120d0a; border-inline-start-color: rgba(226,194,128,.22); }
.cart-header { border-bottom-color: var(--hairline); }
.cart-item { border-radius: 14px; background: rgba(255,255,255,.025); }
.toast { border-radius: 12px; }

.wa-float {
  width: 56px;
  height: 56px;
  inset-inline-end: 24px;
  inset-block-end: 24px;
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 18px 38px -16px rgba(37,211,102,.58), 0 12px 30px -18px #000;
}

footer {
  padding-top: clamp(72px, 8vw, 110px);
  background:
    radial-gradient(circle at 50% 0%, rgba(207,168,93,.07), transparent 30rem),
    #080604;
  border-top-color: rgba(226,194,128,.14);
}

.footer-grid { gap: clamp(34px, 5vw, 72px); }
.footer-col h3, .footer-col h4 { color: #ede2cf; letter-spacing: .035em; }
.footer-col li,
.footer-col p { color: #9e9588; }
.footer-bottom { margin-top: 58px; padding-block: 22px; border-top-color: var(--hairline); }

/* Tablet. */
@media (max-width: 1120px) {
  .nav-links { gap: 14px; }
  .brand-title small { display: none; }
  .story-grid { grid-template-columns: 1fr 1fr; gap: 46px; }
  .story-card-wrapper,
  .story-img-main { min-height: 540px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  header.navbar { left: 10px; right: 10px; }
  header.navbar .nav-content {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto 88px;
    align-items: center;
  }
  header.navbar .brand-logo { justify-self: start; overflow: hidden; }
  header.navbar .nav-links { display: none !important; }
  header.navbar .nav-actions { justify-self: end; margin: 0 !important; }
  header.navbar .nav-burger {
    width: 88px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    justify-self: end;
    padding: 0 38px 0 12px;
    border-radius: 11px;
    background: rgba(207,168,93,.06);
    direction: ltr;
  }
  .nav-burger-label {
    display: block;
    color: #f0d9a4;
    font-family: 'Marcellus', serif;
    font-size: .67rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    pointer-events: none;
  }
  header.navbar .nav-burger span {
    left: auto;
    right: 12px;
    width: 18px;
    margin: 0;
    transform-origin: center;
  }
  header.navbar .nav-burger span:nth-of-type(1) { transform: translateY(-7px); }
  header.navbar .nav-burger span:nth-of-type(2) { transform: translateY(-1px); }
  header.navbar .nav-burger span:nth-of-type(3) { transform: translateY(5px); }
  body.menu-open header.navbar .nav-burger span:nth-of-type(1) { transform: translateY(-1px) rotate(45deg); }
  body.menu-open header.navbar .nav-burger span:nth-of-type(2) { opacity: 0; }
  body.menu-open header.navbar .nav-burger span:nth-of-type(3) { transform: translateY(-1px) rotate(-45deg); }
  .story-grid { grid-template-columns: 1fr; }
  .story-card-wrapper { order: -1; min-height: 520px; }
  .story-img-main { min-height: 520px; }
  .counters-grid > div + div { border-inline-start: 0; }
  .counters-grid > div:nth-child(even) { border-inline-start: 1px solid rgba(207,168,93,.14); }
}

@media (max-width: 980px) {
  .simulator-section .section-header.text-center {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .simulator-section .section-header .section-tag,
  .simulator-section .section-header .section-title,
  .simulator-section .section-header .section-desc {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .bsp-grid { grid-template-columns: 1fr; }
  .bsp-preview { position: static; width: min(100%, 720px); margin-inline: auto; }
}

/* Mobile — roomy typography, full-width actions and compact proof cards. */
@media (max-width: 640px) {
  .container { padding-inline: 18px; }
  section { padding-block: 72px; }
  header.navbar { top: 8px; padding: 7px 0; border-radius: 15px; }
  header.navbar.scrolled { top: 5px; }
  header.navbar .container { padding-inline: 9px; }
  header.navbar .nav-content { grid-template-columns: minmax(0,1fr) auto 72px; gap: 6px; min-height: 47px; }
  .brand-logo { gap: 8px; }
  .brand-logo img { width: 42px; height: 42px; border-radius: 10px; }
  .brand-title { font-size: .98rem; }
  .brand-title small { display: none; }
  .nav-actions { gap: 5px; }
  .lang-btn { min-height: 38px; padding: 8px 10px; }
  .cart-btn { width: 39px; min-height: 38px; padding: 7px; }
  .cart-btn > span:not(.cart-badge) { display: none; }
  .cart-badge { position: absolute; top: -4px; inset-inline-end: -3px; }
  header.navbar .nav-burger { width: 72px; height: 38px; padding-left: 9px; padding-right: 31px; }
  .nav-burger-label { font-size: .62rem; }
  header.navbar .nav-burger span { right: 9px; width: 16px; }

  .hero-section { min-height: auto; padding: 116px 0 48px; }
  .hero-bg img { object-position: 61% center; filter: brightness(.67) saturate(.82); }
  .hero-overlay,
  html[dir="rtl"] .hero-overlay {
    background:
      linear-gradient(180deg, rgba(7,5,4,.26), rgba(7,5,4,.46) 39%, #0b0806 82%, #0b0806),
      radial-gradient(circle at 50% 24%, transparent, rgba(7,5,4,.36) 74%);
  }
  .hero-word-bg { display: none; }
  .hero-subtitle { font-size: .72rem; margin-bottom: 16px; padding: 7px 10px; letter-spacing: .02em; }
  /*
    Some mobile WebKit/Android builds render transparent gradient text as black.
    Use a solid, explicit palette on phones so the hero stays identical everywhere.
  */
  .hero-title.gold-shine {
    color: #fffaf0 !important;
    -webkit-text-fill-color: #fffaf0 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    text-shadow: 0 4px 22px rgba(0,0,0,.96), 0 0 18px rgba(255,248,220,.14) !important;
  }
  .hero-title { font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1.14; margin-bottom: 18px; }
  .hero-subtitle { color: #f0d9a4 !important; -webkit-text-fill-color: #f0d9a4 !important; }
  .hero-desc { color: #e7ddcf !important; -webkit-text-fill-color: #e7ddcf !important; font-size: .93rem; line-height: 1.82; margin-bottom: 22px; }
  .hero-features .feature-item strong { color: #fff7e8 !important; -webkit-text-fill-color: #fff7e8 !important; }
  .hero-buttons { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 24px; }
  .hero-buttons .btn-gold,
  .hero-buttons .btn-outline { width: 100%; min-height: 50px; }
  .hero-features { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 34px; padding: 8px; border-radius: 17px; }
  .hero-features .feature-item { min-height: 94px; padding: 12px 7px; border: 0; }
  .hero-features .feature-item:nth-child(even) { border-inline-start: 1px solid rgba(235,209,156,.12); }
  .hero-features .feature-item:nth-child(n+3) { border-top: 1px solid rgba(235,209,156,.12); }
  .hero-features .feature-item .icon-svg-lg { width: 24px; height: 24px; }
  .hero-features .feature-item strong { font-size: .82rem; line-height: 1.4; }
  .hero-features .feature-item span { display: none; }
  .hero-section::after { display: none; }

  .section-title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .section-desc { font-size: .93rem; line-height: 1.82; }
  .section-tag { font-size: .68rem; }
  .simulator-section { padding-block: 76px; }
  .simulator-section .section-header.text-center { padding-bottom: 28px; }
  .simulator-section .section-header .section-title {
    max-width: 10ch;
    font-size: clamp(2.75rem, 13vw, 3.7rem) !important;
  }
  .simulator-section .section-header .section-desc { font-size: .94rem; }
  .bsp-grid { padding: 10px; border-radius: 22px; }
  .preview-box-wood { aspect-ratio: 1.12 / 1; padding: 22px; border-width: 9px; border-radius: 18px; }
  .preview-inlay-frame { inset: 19px; outline-offset: 5px; }
  .corner-rosette { width: 24px; height: 24px; }
  .bsp-panel { padding: 8px 9px 13px; border-radius: 18px; }
  .bsp-step { padding: 19px 9px 21px; }
  .bsp-step-head h3 { font-size: .88rem; }
  .bsp-pills,
  .bsp-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bsp-pill { padding: 12px 5px; font-size: .65rem; }
  .bsp-pill-demo { font-size: 1.22rem; }
  .bsp-size { padding: 18px 5px 12px; }
  .bsp-size-name { font-size: .68rem; }
  .bsp-woods { grid-template-columns: 1fr; }
  .bsp-wood {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    text-align: start;
    padding: 11px 13px;
  }
  .story-card-wrapper,
  .story-img-main { min-height: 390px; }
  .story-card-wrapper { border-radius: 20px; }
  .story-card-wrapper::before { inset: 10px; border-radius: 13px; }
  .story-stats { grid-template-columns: 1fr; }
  .story-stats > div { padding-block: 14px; border-bottom: 1px solid var(--hairline); }
  .story-stats > div:last-child { border-bottom: 0; }
  .counters-band { padding-block: 18px; }
  .counters-grid { padding: 20px 8px; border-radius: 17px; }
  .counter-num { font-size: 2rem; }
  .counter-lbl { font-size: .72rem; }
  .filter-bar,
  .shop-controls { padding: 10px; border-radius: 15px; }
  .product-grid { grid-template-columns: 1fr; gap: 18px; }
  .product-card { border-radius: 17px; }
  .product-img-wrapper,
  .home-product-media { aspect-ratio: 1.12 / 1; padding: 12px; }
  .home-product-media .home-product-image { padding: 12px; }
  .product-details { padding: 19px 18px 17px; }
  .product-title { font-size: 1.14rem; }
  .shop-intro { padding: 124px 18px 54px; }
  .shop-intro-title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .corp-card { border-radius: 20px !important; }
  .corp-txt { padding: 26px 20px; }
  .ab-hero { min-height: 72svh !important; }
  .ab-hero .container { padding: 118px 18px 34px !important; }
  .ab-glass { padding: 24px 18px; border-radius: 18px; }
  .ab-hero h1 { font-size: clamp(2.35rem, 11vw, 3.35rem) !important; }
  .ct-hero { min-height: 370px; padding: 116px 18px 54px; }
  .ct-hero h1 { font-size: clamp(2.45rem, 11vw, 3.35rem); }
  .ct-hero .breadcrumb { margin-bottom: 14px; }
  .pd-info { padding: 24px 19px; }
  .contact-card { padding: 22px 18px; }
  .wa-float { width: 52px; height: 52px; inset-inline-end: 16px; inset-block-end: 16px; }
  .footer-bottom { margin-top: 38px; }

  /* Mobile collection: compact, readable cards with every product visible. */
  #shop .filter-bar { gap: 11px; }
  #shop .categories-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    margin-inline: -10px;
    padding: 2px 10px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #shop .categories-tabs::-webkit-scrollbar { display: none; }
  #shop .tab-btn { flex: 0 0 auto; min-height: 40px; padding: 9px 15px; white-space: nowrap; }

  #productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #productGrid .product-card { min-width: 0; border-radius: 14px; }
  #productGrid .product-img-wrapper,
  #productGrid .home-product-media { aspect-ratio: 1 / 1; padding: 6px; }
  #productGrid .home-product-media .home-product-image { padding: 7px; }
  #productGrid .product-desc { display: none; }
  #productGrid .product-details { padding: 11px 10px 10px; }
  #productGrid .product-cat { margin-bottom: 5px; font-size: .58rem; letter-spacing: .055em; }
  #productGrid .product-title {
    display: -webkit-box;
    min-height: 2.45em;
    margin: 0;
    overflow: hidden;
    font-size: .94rem;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #productGrid .product-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
  }
  #productGrid .product-price {
    min-width: 0;
    overflow: visible;
    font-size: .91rem;
    line-height: 1.1;
    white-space: nowrap;
  }
  #productGrid .btn-add-cart {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
  }
  #productGrid .btn-add-cart span { display: none; }
  #productGrid .btn-add-cart svg { width: 16px; height: 16px; }
  #productGrid .product-card:hover { transform: none; }

  /* Dedicated catalogue: a legible row per product; no hidden inventory. */
  .shop-body { padding-top: 24px; }
  .shop-body .container { padding-inline: 12px; }
  .shop-controls { gap: 12px; margin-bottom: 15px; padding: 11px; }
  .cat-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: -11px;
    padding: 1px 11px 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cat-pills::-webkit-scrollbar { display: none; }
  .cat-pill { flex: 0 0 auto; min-height: 42px; padding: 9px 14px; white-space: nowrap; }
  .shop-controls-row { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .shop-controls-row .search-box,
  .shop-controls-row .sort-select { width: 100%; min-width: 0; min-height: 46px; }
  .shop-resultline { margin-block: 14px 18px; padding: 12px 3px; }

  #shopGrid { grid-template-columns: 1fr; gap: 10px; }
  #shopGrid .product-card {
    min-width: 0;
    min-height: 146px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    border-radius: 15px;
  }
  #shopGrid .product-img-wrapper {
    width: 100%;
    height: 100%;
    min-height: 146px;
    aspect-ratio: auto;
    padding: 7px;
    border-bottom: 0;
    border-inline-end: 1px solid rgba(226,194,128,.14);
  }
  #shopGrid .product-details { min-width: 0; padding: 13px 12px 11px; }
  #shopGrid .product-cat { margin-bottom: 5px; font-size: .58rem; letter-spacing: .055em; }
  #shopGrid .product-title {
    display: -webkit-box;
    min-height: 2.35em;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #shopGrid .product-desc { display: none; }
  #shopGrid .product-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
  }
  #shopGrid .product-price {
    min-width: 0;
    overflow: visible;
    font-size: 1.05rem;
    line-height: 1.05;
    white-space: nowrap;
  }
  #shopGrid .product-price span { font-size: .69rem; }
  #shopGrid .btn-add-cart {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
  }
  #shopGrid .btn-add-cart span { display: none; }
  #shopGrid .btn-add-cart svg { width: 16px; height: 16px; }
  #shopGrid .product-tag { max-width: calc(100% - 12px); padding: 4px 7px; font-size: .54rem; }
  #shopGrid .pc-dots { bottom: 6px; }

}

/* ================= V9 · TRULY SEAMLESS MARQUEE ================= */

.marquee-wrapper { direction: ltr; }

.marquee-track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  animation: none !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.marquee-group {
  display: flex;
  flex: 0 0 auto;
  min-width: max-content;
}

html[dir="ltr"] .marquee-track.is-ready {
  animation: marqueeSeamlessLTR 30s linear infinite !important;
}

html[dir="rtl"] .marquee-track.is-ready {
  animation: marqueeSeamlessRTL 30s linear infinite !important;
}

html[dir="ltr"] .marquee-item { direction: ltr; }
html[dir="rtl"] .marquee-item { direction: rtl; }

/* Touch devices can leave :hover latched after a swipe. Never pause there. */
.marquee-track:hover { animation-play-state: running; }

@media (hover: hover) and (pointer: fine) {
  .marquee-track:hover { animation-play-state: paused; }
}

@keyframes marqueeSeamlessLTR {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes marqueeSeamlessRTL {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.pc-photo-count {
  position: absolute;
  inset-inline-start: 7px;
  bottom: 6px;
  z-index: 4;
  min-width: 31px;
  padding: 4px 6px;
  border: 1px solid rgba(244,215,125,.34);
  border-radius: 999px;
  background: rgba(8,6,4,.78);
  color: #f4dfad;
  font: 700 .58rem/1 'Cairo', sans-serif;
  text-align: center;
  direction: ltr;
  backdrop-filter: blur(6px);
}

@media (max-width: 370px) {
  #productGrid .product-price { font-size: .84rem; }
  #shopGrid .product-card { grid-template-columns: 118px minmax(0, 1fr); }
  #shopGrid .product-img-wrapper { min-height: 140px; }
}

@media (max-width: 370px) {
  .brand-title { display: none; }
  header.navbar .nav-content { grid-template-columns: minmax(44px,1fr) auto 70px; }
  .hero-subtitle::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg img,
  .product-card,
  .story-page .ab-hero .ab-bg img { transition: none !important; animation: none !important; }
}

/* ================================================================
   iPhone / mobile colour and motion safety
   Safari can paint transparent clipped text black when Dark Mode,
   Smart Invert or compositing is active. Keep every mobile text fill
   tied to its real colour and reserve gradients for surfaces only.
   ================================================================ */
@media (max-width: 640px) {
  html {
    color-scheme: only dark !important;
    background: #0b0806 !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    color: #f4eee4 !important;
    background-color: #0b0806 !important;
  }

  /* `-webkit-text-fill-color` is inherited on iOS. Reset it everywhere
     so an old transparent title rule cannot black out nearby copy. */
  body,
  body * {
    -webkit-text-fill-color: currentColor !important;
  }

  .gold-shine,
  .hero-title.gold-shine,
  .shop-intro-title.gold-shine,
  .ab-hero .gold-shine,
  .ct-hero .gold-shine,
  .notfound-page .gold-shine {
    color: #fffaf0 !important;
    -webkit-text-fill-color: #fffaf0 !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 4px 24px rgba(0,0,0,.92), 0 0 20px rgba(240,217,164,.12) !important;
  }

  :where(.section-title, .related-title, .product-title, .pd-title,
    .ct-quick-head h2, .faq-q, .tl-card h3, .prc-card h3,
    .footer-col h3, .footer-col h4, .contact-card h3, .nf-section h1) {
    color: #fff8ec !important;
  }

  :where(.section-tag, .product-cat, .breadcrumb, .breadcrumb a,
    .tl-year, .ct-line-txt b, .bsp-est-lbl, .product-price,
    .bsp-est-val, .stat-num, .counter-num) {
    color: #efd79f !important;
  }

  :where(.hero-desc, .section-desc, .ab-hero p, .ct-hero p,
    .story-grid p, .tl-card p, .prc-card p, .ct-quick-head p,
    .ct-line-txt small, .ct-hours, .faq-a, .product-desc,
    .footer-grid p, .footer-col a, .pd-desc, .pd-meta) {
    color: #d8ccbd !important;
  }

  :where(input, textarea, select) {
    color: #fff8ec !important;
    background-color: rgba(8,6,4,.82) !important;
    caret-color: #f0d9a4;
  }

  :where(input, textarea)::placeholder {
    color: #a99d8e !important;
    opacity: 1;
  }

  /* A flex footer is more reliable than directional grid placement in
     iOS Safari, especially when the page switches between Arabic/English. */
  #productGrid .product-footer,
  #shopGrid .product-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 7px !important;
  }

  #productGrid .product-price,
  #shopGrid .product-price {
    flex: 1 1 auto;
    min-width: 0;
  }

  #productGrid .btn-add-cart,
  #shopGrid .btn-add-cart {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    color: #f0d9a4 !important;
    border-color: rgba(240,217,164,.38) !important;
    background: rgba(207,168,93,.11) !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #productGrid .btn-add-cart { min-height: 36px !important; }
  #shopGrid .btn-add-cart { min-height: 38px !important; }

  #productGrid .btn-add-cart svg,
  #shopGrid .btn-add-cart svg {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .ct-line-primary .ct-wa-thin {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.25 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Keep reveal content readable even before the observer runs. */
  [data-rv] { will-change: opacity, transform; }

  @media (hover: none) {
    #productGrid .product-card:active,
    #shopGrid .product-card:active,
    .ct-line:active {
      transform: scale(.985) !important;
      border-color: rgba(240,217,164,.48) !important;
    }
  }
}

@keyframes mobileTitleReveal {
  0% { opacity: .35; transform: translateY(12px); text-shadow: 0 2px 8px rgba(0,0,0,.95); }
  100% { opacity: 1; transform: translateY(0); text-shadow: 0 4px 24px rgba(0,0,0,.92), 0 0 20px rgba(240,217,164,.12); }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .hero-title.gold-shine,
  .shop-intro-title.gold-shine,
  .ab-hero .gold-shine,
  .ct-hero .gold-shine,
  .notfound-page .gold-shine {
    animation: mobileTitleReveal .78s cubic-bezier(.2,.75,.2,1) both !important;
  }

  #productGrid .product-card.rv-in,
  #shopGrid .product-card.rv-in {
    transition-duration: .62s !important;
  }
}

/* ================================================================
   v7 — resilient imagery and a more editorial mobile collection
   ================================================================ */
img.asset-placeholder {
  object-fit: cover !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 640px) {
  html,
  body { overflow-x: clip; }

  /* Give the hero copy a stable dark canvas even when a replacement
     photograph is very bright. The four proof tiles keep their layout. */
  .hero-content {
    isolation: isolate;
    padding-inline: 16px !important;
  }

  .hero-content::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -18px;
    inset-inline: 6px;
    height: calc(100% - 190px);
    min-height: 470px;
    border: 1px solid rgba(240,217,164,.10);
    border-radius: 26px;
    background:
      radial-gradient(ellipse at 50% 25%, rgba(6,4,3,.88), rgba(8,5,3,.70) 54%, rgba(8,5,3,.28) 82%, transparent 100%);
    box-shadow: 0 32px 76px -48px #000;
    pointer-events: none;
  }

  .hero-subtitle {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 8px 12px;
    justify-content: center;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .7rem;
    line-height: 1.5;
    color: #f4dda9 !important;
    background: rgba(8,5,3,.76) !important;
    border-color: rgba(240,217,164,.30) !important;
    box-shadow: 0 12px 28px -22px #000;
  }

  .hero-subtitle::before { display: none !important; }

  .hero-title {
    max-width: 12ch;
    font-size: clamp(2.15rem, 10.5vw, 3.05rem) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
    text-shadow:
      0 3px 2px rgba(0,0,0,.88),
      0 8px 28px rgba(0,0,0,.98),
      0 0 24px rgba(255,244,214,.14) !important;
  }

  .hero-desc {
    max-width: 35rem;
    margin-inline: auto;
    padding: 12px 14px;
    border: 1px solid rgba(240,217,164,.10);
    border-radius: 15px;
    color: #efe7db !important;
    background: rgba(6,4,3,.62);
    text-shadow: 0 2px 12px rgba(0,0,0,.95) !important;
  }

  /* Collection header: decorative without depending on another image. */
  .shop-intro {
    min-height: 360px;
    padding: 122px 18px 50px;
    display: grid;
    align-items: center;
    background:
      radial-gradient(circle at 20% 20%, rgba(207,168,93,.18), transparent 18rem),
      radial-gradient(circle at 82% 72%, rgba(126,30,18,.18), transparent 20rem),
      linear-gradient(145deg, #17100b, #0b0806 72%) !important;
  }

  .shop-intro::before {
    content: "✦";
    position: absolute;
    inset-inline-end: 9%;
    top: 36%;
    color: rgba(240,217,164,.17);
    font-size: 7rem;
    line-height: 1;
    transform: rotate(18deg);
    pointer-events: none;
  }

  .shop-intro::after {
    height: 100%;
    opacity: .82;
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 82%, transparent);
  }

  .shop-intro .container {
    width: 100%;
    padding: 22px 18px;
    border: 1px solid rgba(240,217,164,.14);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(9,6,4,.80), rgba(17,12,8,.62));
    box-shadow: 0 30px 70px -48px #000, inset 0 1px rgba(255,255,255,.035);
    backdrop-filter: blur(12px);
  }

  .shop-intro-title {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(2.2rem, 11.2vw, 3.15rem) !important;
    line-height: 1.08;
    text-wrap: balance;
  }

  .shop-intro-sub {
    max-width: 31rem;
    color: #ddd1c1 !important;
    font-size: .91rem;
    line-height: 1.75;
    text-wrap: pretty;
  }

  .shop-body {
    background:
      radial-gradient(circle at 8% 18%, rgba(207,168,93,.07), transparent 22rem),
      linear-gradient(180deg, rgba(19,13,9,.36), transparent 36rem);
  }

  .shop-controls {
    overflow: hidden;
    border: 1px solid rgba(240,217,164,.15);
    background: linear-gradient(150deg, rgba(28,20,14,.88), rgba(12,9,7,.95));
    box-shadow: 0 24px 60px -46px #000;
  }

  .cat-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
    padding: 2px 2px 8px !important;
    overflow: visible !important;
  }

  .cat-pill {
    width: 100%;
    max-width: none;
    min-height: 46px;
    padding: 8px 10px;
    justify-content: space-between;
    font-size: .78rem;
  }

  .cat-pill:first-child {
    grid-column: 1 / -1;
  }

  .cat-pill span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.25;
    text-align: start;
  }

  .shop-resultline {
    min-width: 0;
    gap: 10px;
  }

  .shop-resultline-txt {
    min-width: 0;
    flex: 1 1 auto;
  }

  .shop-resultline-cat {
    flex: 0 1 50%;
    min-width: 0;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: end;
  }

  /* One editorial lead card breaks the catalogue's monotony; the rest
     remain compact rows so browsing 36 pieces is still fast. */
  #shopGrid {
    counter-reset: shop-card;
    gap: 12px;
  }

  #shopGrid .product-card {
    counter-increment: shop-card;
    position: relative;
    overflow: hidden;
    border-color: rgba(240,217,164,.19);
    background:
      linear-gradient(145deg, rgba(34,24,16,.95), rgba(13,10,8,.98));
    box-shadow: 0 24px 54px -42px #000, inset 0 1px rgba(255,255,255,.035);
  }

  #shopGrid .product-card::after {
    content: counter(shop-card, decimal-leading-zero);
    position: absolute;
    z-index: 5;
    inset-inline-start: 10px;
    top: 9px;
    color: rgba(240,217,164,.42);
    font: 500 .57rem/1 'Marcellus', serif;
    letter-spacing: .08em;
    pointer-events: none;
  }

  #shopGrid .product-card:first-child {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 19px;
    border-color: rgba(240,217,164,.30);
    background:
      radial-gradient(circle at 72% 18%, rgba(207,168,93,.13), transparent 18rem),
      linear-gradient(145deg, rgba(40,28,18,.97), rgba(13,9,7,.99));
    box-shadow: 0 32px 72px -42px #000, 0 0 0 1px rgba(207,168,93,.04);
  }

  #shopGrid .product-card:first-child .product-img-wrapper {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.48 / 1;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(240,217,164,.18);
    padding: 12px;
  }

  #shopGrid .product-card:first-child .product-details {
    padding: 18px 17px 16px;
  }

  #shopGrid .product-card:first-child .product-title {
    min-height: 0;
    margin-bottom: 7px;
    font-size: 1.3rem;
    line-height: 1.18;
  }

  #shopGrid .product-card:first-child .product-desc {
    display: -webkit-box !important;
    margin: 0 0 13px;
    color: #cfc2b2 !important;
    font-size: .82rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #shopGrid .product-card:first-child .product-footer {
    margin-top: 0;
    padding-top: 13px;
  }

  #shopGrid .product-card:first-child .product-price {
    font-size: 1.2rem;
  }

  #shopGrid .product-card:not(:first-child) .product-img-wrapper {
    background:
      radial-gradient(circle at 50% 42%, rgba(55,35,18,.88), rgba(11,7,4,.98) 72%) !important;
  }

  #shopGrid .product-card:not(:first-child) .product-title {
    padding-inline-end: 4px;
  }
}

@media (max-width: 350px) {
  .shop-intro { padding-inline: 12px; }
  .shop-intro .container { padding-inline: 14px; }
  .shop-intro-title { font-size: 2.15rem !important; }
  #shopGrid .product-card:not(:first-child) { grid-template-columns: 108px minmax(0,1fr); }
  #shopGrid .product-card:not(:first-child) .product-details { padding-inline: 10px; }
}

/* ================= V8 · DESKTOP ALIGNMENT + CONTROLLED MASTERWORKS ================= */

/* The SVG motif is 12px tall at this scale: keep the strip equally tall so
   the lower tips of the diamonds are never clipped. */
.inlay-divider {
  height: 12px !important;
  min-height: 12px;
  background-position: center center;
  background-repeat: repeat-x;
  background-size: 24px 12px !important;
}

@media (min-width: 641px) {
  .story-stats > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
  }

  html[lang="en"] .story-stats .stat-num[data-i18n="stat_2_val"] {
    font-size: clamp(1.55rem, 2.1vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    white-space: nowrap;
  }
}

.showcase-shell {
  position: relative;
  padding-inline: 58px;
}

.showcase-scroll {
  gap: 18px;
  padding: 10px 2px 22px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.showcase-scroll::-webkit-scrollbar { display: none; }

.show-card {
  min-width: 0;
  flex-basis: calc((100% - 36px) / 3);
  scroll-snap-align: center;
}

.show-card h3 {
  overflow: visible;
  white-space: normal;
  text-wrap: pretty;
}

.showcase-nav {
  position: absolute;
  z-index: 10;
  top: calc(50% - 23px);
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0 0 3px;
  place-items: center;
  border: 1px solid rgba(240, 217, 164, .38);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(38, 27, 18, .97), rgba(13, 9, 7, .98));
  box-shadow: 0 18px 38px -18px #000, inset 0 1px rgba(255,255,255,.07);
  color: #f0d9a4;
  font: 400 2rem/1 'Marcellus', serif;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, opacity .25s ease, background .25s ease;
}

.showcase-prev { inset-inline-start: 0; }
.showcase-next { inset-inline-end: 0; }

.showcase-nav:hover:not(:disabled),
.showcase-nav:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(240, 217, 164, .82);
  background: linear-gradient(145deg, rgba(69, 48, 27, .98), rgba(20, 13, 8, .99));
  outline: none;
}

.showcase-nav:disabled {
  opacity: .26;
  cursor: default;
}

.cart-overlay.open { z-index: 1200; }

@media (min-width: 701px) and (max-width: 1099px) {
  .show-card { flex-basis: calc((100% - 18px) / 2); }
}

@media (max-width: 700px) {
  .showcase-shell {
    padding-inline: 0;
    padding-bottom: 58px;
  }

  .show-card { flex-basis: 100%; }

  .showcase-nav {
    top: auto;
    bottom: 0;
  }

  .showcase-prev { inset-inline-start: calc(50% - 54px); }
  .showcase-next { inset-inline-end: calc(50% - 54px); }
}

@media (max-width: 640px) {
  #shopGrid .product-title {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset !important;
    line-clamp: unset;
    text-wrap: pretty;
  }

  #productGrid .product-title {
    min-height: 3.66em;
    -webkit-line-clamp: 3;
  }
}

/* ===== Credit — Solaris Futura ===== */
.footer-bottom .footer-credit{
  opacity:.72;
  font-size:.8rem;
  letter-spacing:.02em;
}
.footer-bottom .footer-credit a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(212,175,55,.28);
  padding-bottom:1px;
  transition:color .25s ease,border-color .25s ease,opacity .25s ease;
}
.footer-bottom .footer-credit a:hover,
.footer-bottom .footer-credit a:focus-visible{
  color:var(--gold-primary,#d4af37);
  border-bottom-color:var(--gold-primary,#d4af37);
}
@media (max-width:720px){
  .footer-bottom .footer-credit{width:100%;text-align:center;}
}