/* =============================================================
   Pimdesigntr — Progressive Enhancement Layer (UI/UX + 3D)
   Additive only. Does not alter framework markup or styles.
   Palette: bronze #c08a4e · soft #d9a968 · copper #a9683a
            ink #0c0b09 · porcelain #f4efe6 · stone #8d8470
   ============================================================= */

:root {
  --pim-bronze: #c08a4e;
  --pim-bronze-soft: #d9a968;
  --pim-copper: #a9683a;
  --pim-ink: #0c0b09;
  --pim-porcelain: #f4efe6;
  --pim-stone: #8d8470;
}

/* ---------- 1. Scroll progress bar ---------- */
#pim-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(90deg, var(--pim-copper), var(--pim-bronze) 45%, var(--pim-bronze-soft));
  box-shadow: 0 0 14px rgba(192, 138, 78, 0.55), 0 0 4px rgba(217, 169, 104, 0.8);
  will-change: transform;
  opacity: 0;
  transition: opacity .6s ease;
}
[dir="rtl"] #pim-progress { transform-origin: right center; }
#pim-progress.is-ready { opacity: 1; }

/* ---------- 2. Custom cursor (fine pointer only) ---------- */
#pim-cursor-ring,
#pim-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease, width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease;
  will-change: transform;
}
#pim-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.4px solid rgba(217, 169, 104, 0.6);
}
#pim-cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--pim-bronze-soft);
}
body.pim-cursor-on #pim-cursor-ring,
body.pim-cursor-on #pim-cursor-dot { opacity: 1; }
body.pim-cursor-hover #pim-cursor-ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(217, 169, 104, 0.95);
  background: rgba(192, 138, 78, 0.08);
}
body.pim-cursor-down #pim-cursor-ring { transform: translate(var(--cx,0), var(--cy,0)) scale(.8); }

/* ---------- 3. Hero 3D depth ---------- */
.pim-hero { perspective: 1400px; transform-style: preserve-3d; }
.pim-hero-depth {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  transform-style: preserve-3d;
}
.pim-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.4s ease;
}
.pim-hero.pim-lit .pim-orb { opacity: 1; }
.pim-orb-a {
  width: 42vmax; height: 42vmax;
  top: -14%; right: -8%;
  background: radial-gradient(circle, rgba(217,169,104,0.22), rgba(192,138,78,0.06) 45%, transparent 70%);
}
.pim-orb-b {
  width: 30vmax; height: 30vmax;
  bottom: -10%; left: -6%;
  background: radial-gradient(circle, rgba(169,104,58,0.20), transparent 68%);
}
.pim-grain-fine {
  position: absolute; inset: -20%;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* particles */
.pim-dust {
  position: absolute;
  border-radius: 50%;
  background: rgba(217, 169, 104, 0.7);
  box-shadow: 0 0 6px rgba(217, 169, 104, 0.8);
  will-change: transform, opacity;
}

/* hero content gets driven via transform from JS; provide GPU hints */
.pim-hero > .pim-tiltable { will-change: transform; }

/* ---------- 4. 3D card tilt + glare ---------- */
.pim-tilt {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.18,.74,.2,1), box-shadow .5s ease;
  will-change: transform;
}
.pim-tilt.is-tilting { transition: box-shadow .4s ease; }
.pim-tilt.is-tilting {
  box-shadow: 0 34px 60px -28px rgba(0,0,0,0.78), 0 0 0 1px rgba(217,169,104,0.18);
}
.pim-glare {
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,244,224,0.28), rgba(217,169,104,0.10) 28%, transparent 60%);
  transition: opacity .4s ease;
}
.pim-tilt.is-tilting .pim-glare { opacity: 1; }

/* ---------- 5. Magnetic buttons ---------- */
.pim-magnetic { will-change: transform; }

/* ---------- 6. Scroll reveal (opt-in, for injected/edge cases) ---------- */
.pim-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.pim-reveal.pim-in { opacity: 1; transform: none; }

/* ---------- 7. Section background parallax wrapper hint ---------- */
.pim-parallax { will-change: transform; }

/* ---------- 8. Smooth scrolling for anchors ---------- */
html.pim-smooth { scroll-behavior: smooth; }

/* ---------- 9. Exploded-view furniture assembly (section "tek tek üretilir") ---------- */
.pim-asm-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  perspective-origin: 50% 48%;
  z-index: 20;
  pointer-events: none;
  opacity: 0;          /* JS drives opacity each frame */
}
/* opaque "studio" background — covers the scrolling section behind, so the screen
   reads as LOCKED while the chair animates (only the chair moves) */
.pim-asm-bg {
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(95% 78% at 50% 4%, rgba(48,35,19,0.62), rgba(20,16,11,0) 56%),
    linear-gradient(180deg, #16110b 0%, #0c0b09 52%, #070605 100%);
}
/* the real headline (cloned, fully revealed) pinned at the top of the locked scene */
.pim-asm-head {
  position: absolute;
  inset-inline: 0;
  top: clamp(10vh, 13vh, 15vh);
  z-index: 3;
  pointer-events: auto;
}
.pim-asm-rig {
  position: relative;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.pim-asm-backdrop {
  position: absolute;
  left: 0; top: 0;
  width: min(64vw, 720px); height: min(56vh, 540px);
  transform: translate(-50%, -48%);
  background: radial-gradient(ellipse 50% 54% at 50% 50%, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.22) 46%, rgba(10,8,6,0.0) 74%);
  z-index: -3;
  pointer-events: none;
}
.pim-asm-spot {
  position: absolute;
  left: 0; top: 0;
  width: min(82vw, 880px); height: min(76vh, 720px);
  transform: translate(-50%, -52%);
  background:
    radial-gradient(ellipse 36% 28% at 50% 14%, rgba(245,214,160,0.46), transparent 60%),
    radial-gradient(ellipse 56% 52% at 50% 50%, rgba(201,148,86,0.30), transparent 70%);
  filter: blur(8px);
  z-index: -2;
  pointer-events: none;
  will-change: opacity;
}
.pim-asm-scene {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.pim-asm-part {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.pim-asm-face {
  position: absolute;
  left: 50%; top: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16);
  backface-visibility: hidden;
}
.pim-asm-face.grain::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(255,235,200,0.04) 0 1px, transparent 1px 9px);
  opacity: .55;
  mix-blend-mode: overlay;
}
.pim-asm-peg .pim-asm-face {
  background: linear-gradient(135deg, #e7c389, #c08a4e 55%, #8a5a2e) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 6px rgba(217,169,104,0.5);
}
.pim-asm-floor {
  position: absolute;
  left: 0; top: 188px;
  width: 360px; height: 70px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 50% 60% at 50% 45%, rgba(201,148,86,0.16), transparent 72%),
    radial-gradient(ellipse 42% 70% at 50% 50%, rgba(0,0,0,0.55), transparent 72%);
  filter: blur(9px);
  z-index: -1;
  will-change: transform, opacity;
}
.pim-asm-hint {
  position: absolute;
  left: 0; top: 268px;
  transform: translateX(-50%);
  font-size: .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--pim-stone);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .6s ease;
}
.pim-asm-stage.is-in .pim-asm-hint { opacity: .6; }

/* scroll budget for the pinned/locked chair scene (longer = more deliberate pin) */
main#icerik section.pim-asm-host { height: 165vh !important; }
@media (min-width: 768px) {
  main#icerik section.pim-asm-host { height: 195vh !important; }
}

/* ---------- Reduced motion: neutralise everything ---------- */
@media (prefers-reduced-motion: reduce) {
  #pim-cursor-ring, #pim-cursor-dot { display: none !important; }
  .pim-orb, .pim-dust { display: none !important; }
  .pim-tilt, .pim-magnetic, .pim-parallax { transform: none !important; }
  html.pim-smooth { scroll-behavior: auto; }
}

/* Touch / coarse pointer: no custom cursor */
@media (hover: none), (pointer: coarse) {
  #pim-cursor-ring, #pim-cursor-dot { display: none !important; }
}

/* =============================================================
   10. PREMIUM FLOATING HEADER  (.pim-header / .pim-header.pim-stuck)
   Detached glass capsule. JS toggles .pim-stuck at scrollY>40.
   We also neutralize the framework's own .glass skin so the
   capsule is the single visible surface in BOTH framework states.
   ============================================================= */
:root {
  --pim-h-gap:        16px;
  --pim-h-gap-sm:     10px;
  --pim-h-inset:      clamp(14px, 3vw, 32px);
  --pim-h-max:        1500px;
  --pim-h-radius:     20px;
  --pim-h-radius-sm:  16px;
  --pim-h-pad-y:      14px;
  --pim-h-pad-y-sm:   9px;
  --pim-h-ease:       var(--ease-silk, cubic-bezier(.22,1,.36,1));
}

/* ---- 10.1 The fixed <header>: kill its own skin; own the top gap ---- */
header.pim-header {
  padding-top: max(env(safe-area-inset-top), var(--pim-h-gap)) !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  transition: padding-top .5s var(--pim-h-ease);
}
header.pim-header.glass {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

/* ---- 10.2 The floating capsule = the existing .container-px wrapper ---- */
header.pim-header > .container-px {
  position: relative;
  isolation: isolate;
  width: auto;
  max-width: var(--pim-h-max);
  margin-inline: auto;
  margin-left: var(--pim-h-inset);
  margin-right: var(--pim-h-inset);
  padding-block: var(--pim-h-pad-y);
  border-radius: var(--pim-h-radius);
  background: linear-gradient(180deg, rgba(20,17,13,0.40) 0%, rgba(12,11,9,0.30) 100%);
  -webkit-backdrop-filter: blur(13px) saturate(150%);
  backdrop-filter: blur(13px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(192,138,78,0.20),
    inset 0 1px 0 0 rgba(244,239,230,0.09),
    0 18px 44px -26px rgba(0,0,0,0.66),
    0 6px 16px -12px rgba(0,0,0,0.50);
  transition:
    margin .5s var(--pim-h-ease),
    padding-block .5s var(--pim-h-ease),
    border-radius .5s var(--pim-h-ease),
    background .5s ease,
    box-shadow .5s ease,
    -webkit-backdrop-filter .5s ease,
    backdrop-filter .5s ease;
  will-change: padding-block, box-shadow, background;
}
header.pim-header > .container-px::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(192,138,78,0.45) 26%,
    rgba(217,169,104,0.85) 50%,
    rgba(192,138,78,0.45) 74%,
    transparent 100%);
  opacity: .55;
  transition: opacity .5s var(--pim-h-ease);
}

/* ---- 10.3 SCROLLED STATE (.pim-stuck) ---- */
header.pim-header.pim-stuck {
  padding-top: max(env(safe-area-inset-top), var(--pim-h-gap-sm)) !important;
}
header.pim-header.pim-stuck > .container-px {
  padding-block: var(--pim-h-pad-y-sm);
  border-radius: var(--pim-h-radius-sm);
  background: linear-gradient(180deg, rgba(20,17,13,0.72) 0%, rgba(12,11,9,0.64) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
  box-shadow:
    inset 0 0 0 1px rgba(192,138,78,0.28),
    inset 0 1px 0 0 rgba(244,239,230,0.11),
    0 22px 52px -26px rgba(0,0,0,0.78),
    0 8px 20px -14px rgba(0,0,0,0.58);
}
header.pim-header.pim-stuck > .container-px::after { opacity: .8; }

/* ---- 10.4 NAV LINK polish ---- */
header.pim-header nav[aria-label="Ana menü"] a.group {
  letter-spacing: .015em;
  transition: color .35s var(--pim-h-ease), transform .35s var(--pim-h-ease);
}
header.pim-header nav[aria-label="Ana menü"] a.group:hover { transform: translateY(-1px); }
header.pim-header nav a.group > span[class*="bg-bronze"] {
  height: 2px !important;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--pim-copper), var(--pim-bronze) 50%, var(--pim-bronze-soft)) !important;
  box-shadow: 0 0 8px rgba(192,138,78,0.45);
  transition: width .42s var(--pim-h-ease) !important;
}
header.pim-header nav a.group:focus-visible > span[class*="bg-bronze"] { width: 100%; }
header.pim-header nav a.group:focus-visible { outline: none; color: var(--pim-porcelain); }

/* ---- 10.5 LOGO lockup hover ---- */
header.pim-header a[aria-label*="Ana Sayfa"] { transition: transform .4s var(--pim-h-ease); }
header.pim-header a[aria-label*="Ana Sayfa"]:hover { transform: translateY(-1px); }
header.pim-header a[aria-label*="Ana Sayfa"] svg { transition: filter .4s ease; }
header.pim-header a[aria-label*="Ana Sayfa"]:hover svg {
  filter: drop-shadow(0 0 7px rgba(217,169,104,0.5));
}

/* ---- 10.6 CTA "Teklif Al" ---- */
header.pim-header a.btn.btn-bronze {
  box-shadow: 0 8px 22px -12px rgba(192,138,78,0.55);
  transition: box-shadow .4s var(--pim-h-ease), transform .15s ease;
}
header.pim-header a.btn.btn-bronze:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,244,224,0.22),
    0 12px 30px -10px rgba(217,169,104,0.8);
}
header.pim-header a.btn.btn-bronze:active { transform: translateY(1px) scale(.985); }
header.pim-header a.btn.btn-bronze:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(12,11,9,0.9), 0 0 0 4px rgba(217,169,104,0.9);
}

/* ---- 10.7 Global focus-visible ring inside the capsule ---- */
header.pim-header :focus-visible {
  outline: 2px solid rgba(217,169,104,0.85);
  outline-offset: 3px;
  border-radius: 8px;
}

/* =============================================================
   11. INLINE 4-FLAG LANGUAGE BAR (.pim-langbar / .pim-flag)
   ============================================================= */
/* visually hide the framework pill+chevron, keep it operable for proxy-clicks */
.pim-lang-host > button[aria-label*="Dil"] {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; pointer-events: none;
}
/* hide the framework dropdown entirely — it is now driven programmatically */
.pim-lang-host > ul {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}

.pim-langbar {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(12,11,9,0.30);
  box-shadow: inset 0 0 0 1px rgba(192,138,78,0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .35s var(--pim-h-ease), box-shadow .35s var(--pim-h-ease);
}
header.pim-header.pim-stuck .pim-langbar {
  background: rgba(12,11,9,0.44);
  box-shadow: inset 0 0 0 1px rgba(192,138,78,0.26);
}

.pim-flag {
  position: relative;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 20px;
  padding: 0; border: 0;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
  opacity: 0.62;
  filter: grayscale(0.5) brightness(0.9) saturate(0.85);
  transform: translateZ(0);
  transition: opacity .3s ease, filter .3s ease, transform .3s var(--pim-h-ease), box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.pim-flag > svg, .pim-flag > img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; border-radius: inherit;
}
.pim-flag::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
}
.pim-flag:hover,
.pim-flag:focus-visible {
  opacity: 1;
  filter: none;
  transform: translateY(-1px) scale(1.06);
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(217,169,104,0.9), 0 4px 10px -4px rgba(0,0,0,0.6);
}
.pim-flag:active { transform: translateY(0) scale(.96); }
.pim-flag[aria-current="true"] {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 1.5px var(--pim-bronze-soft), 0 0 10px -2px rgba(217,169,104,0.55);
}
.pim-flag[aria-current="true"]::before {
  content: ""; position: absolute;
  left: 50%; bottom: -3px; margin-left: -2.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pim-bronze-soft);
  box-shadow: 0 0 6px rgba(217,169,104,0.9);
}

/* =============================================================
   12. RESPONSIVE — 375px → 1500px
   ============================================================= */
@media (max-width: 1279px) {
  :root { --pim-h-max: 100%; }
}
@media (max-width: 639px) {
  :root {
    --pim-h-gap: 12px; --pim-h-gap-sm: 8px;
    --pim-h-inset: 12px;
    --pim-h-radius: 16px; --pim-h-radius-sm: 14px;
    --pim-h-pad-y: 11px; --pim-h-pad-y-sm: 8px;
  }
  /* tighten the framework's clamp() inline padding so logo + flags fit cleanly */
  header.pim-header > .container-px { padding-inline: 16px !important; }
  .pim-langbar { gap: 5px; padding: 3px; }
  .pim-flag { width: 27px; height: 18px; }
}
@media (max-width: 400px) {
  :root { --pim-h-inset: 10px; --pim-h-pad-y: 10px; }
  header.pim-header > .container-px { padding-inline: 12px !important; }
  .pim-langbar { gap: 4px; padding: 2px; }
  .pim-flag { width: 25px; height: 17px; }
}
@media (hover: none), (pointer: coarse) {
  .pim-flag { min-width: 32px; min-height: 26px; }
  .pim-flag:hover { transform: none; }
}

/* =============================================================
   13. RTL (Arabic dir="rtl")
   ============================================================= */
[dir="rtl"] header.pim-header nav[aria-label="Ana menü"] a.group { letter-spacing: normal; }
[dir="rtl"] header.pim-header a[aria-label*="Ana Sayfa"] [class*="tracking-"] { letter-spacing: normal; }

/* =============================================================
   14. Reduced motion (header)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  header.pim-header,
  header.pim-header > .container-px,
  header.pim-header > .container-px::after,
  .pim-langbar, .pim-flag,
  header.pim-header nav a.group { transition: none !important; }
  .pim-flag:hover, .pim-flag[aria-current="true"] { transform: none; }
}

/* =============================================================
   15. Fix: numbered-step titles (Atölye "Her Katman Elle Şekillenir")
   The framework's absolute number badge (40px, start-0/top-0) overlapped
   the title's first letters. Indent the title + paragraph clear of it.
   ============================================================= */
.inline-flex.absolute.start-0.top-0.h-10.w-10.rounded-full ~ h3,
.inline-flex.absolute.start-0.top-0.h-10.w-10.rounded-full ~ p {
  padding-inline-start: 3.5rem;
}

/* =============================================================
   16. Collections — pinned horizontal scroll (DESKTOP ONLY)
   Section becomes a tall scroll track; JS pins the content and slides
   the cards sideways. Cards are sized to fit the viewport (labels visible).
   Mobile keeps the framework's native horizontal swipe.
   ============================================================= */
@media (min-width: 768px) {
  /* overflow-x:clip (NOT hidden) clips off-screen cards WITHOUT becoming a scroll
     container — so native position:sticky still pins to the viewport (zero jitter). */
  main#icerik section.pim-hscroll {
    display: block !important;
    height: var(--pim-hs-h, 300vh) !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  /* heading + track PINNED by native sticky (compositor → no scroll lag / no jump) */
  main#icerik section.pim-hscroll > .pim-hs-head {
    position: sticky !important;
    top: 13vh !important;
    z-index: 2;
  }
  main#icerik section.pim-hscroll > .pim-hs-track {
    position: sticky !important;
    top: 30vh !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    will-change: transform;     /* only translateX (horizontal) is JS-driven */
  }
  /* size each card to fit one viewport (so the bottom labels are never clipped) */
  main#icerik section.pim-hscroll .pim-hs-track > a {
    height: 54vh !important;
    max-height: 560px !important;
  }
  main#icerik section.pim-hscroll .pim-hs-track > a > div:first-child {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
}

/* =============================================================
   17. Lighter, warmer background tone (approved: #241d15)
   Lifts the ink/coal color tokens so every dark surface warms up
   cohesively without touching structure. Light text stays readable.
   The chair "studio" scene (.pim-asm-bg) stays intentionally dark.
   ============================================================= */
:root {
  --color-ink: #241d15 !important;
  --color-coal: #322619 !important;
}
html, body { background-color: #241d15 !important; }