/* =========================
   Dermalion Labs — Collections page (sections 1–3)
   ========================= */

/* ===== SECTION 1: Spectrum Showcase ===== */
.spectrum-showcase{ padding: clamp(64px, 8vw, 104px) 0; position:relative; overflow:hidden; }
.ss-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, 3vw, 40px); align-items:center; }
.ss-title{ font-family:"PrataDL", serif; }
.ss-lede{ max-width: 60ch; }
.ss-chips{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:10px; }
.ss-chip{
  display:inline-flex; align-items:center; height:38px; padding:0 12px;
  border-radius:999px; border:1px solid var(--dl-line); background:#fff;
  text-decoration:none; color:var(--dl-ink-2); font-weight:600;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.ss-chip:hover{ transform: translateY(-2px); border-color:#d7e8e2; background:linear-gradient(135deg, #f7fffb, #fff); }

.ss-mosaic{ position:relative; display:grid; gap:12px; justify-items:center; }
.ss-card{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease, box-shadow .2s ease;
}
.ss-card:hover{ transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 12px 28px rgba(31,31,34,.08), 0 6px 16px rgba(31,31,34,.06); }
.ss-chipimg{
  padding:8px; border:1px solid var(--dl-line); border-radius:999px; background:#fff; box-shadow: var(--dl-shadow);
}
.ss-chipimg img{ border-radius:999px; }

/* небольшая «диагональ» расположения */
.tilt-a{ transform: translate(-6%, -4%); }
.tilt-b{ transform: translate(10%, 4%); }
.tilt-c{ transform: translate(0, -6%); }
@keyframes bobA{ from{ transform: translate(-6%, -4%)} 50%{ transform: translate(-6%, -1%)} to{ transform: translate(-6%, -4%)} }
@keyframes bobB{ from{ transform: translate(10%, 4%)} 50%{ transform: translate(10%, 7%)} to{ transform: translate(10%, 4%)} }
@keyframes bobC{ from{ transform: translate(0, -6%)} 50%{ transform: translate(0, -3%)} to{ transform: translate(0, -6%)} }
.ss-mosaic .tilt-a{ animation: bobA 7s ease-in-out infinite; }
.ss-mosaic .tilt-b{ animation: bobB 7.6s ease-in-out infinite; }
.ss-mosaic .tilt-c{ animation: bobC 6.8s ease-in-out infinite; }

/* soft glows */
.ss-glow{
  position:absolute; pointer-events:none; filter: blur(24px); z-index:-1;
  width: 44vw; height: 44vw; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(179,86,118,.10), transparent 60%);
}
.ss-glow.a{ left: -12vw; top: -10vw; }
.ss-glow.b{ right: -14vw; bottom: -12vw; background: radial-gradient(50% 50% at 50% 50%, rgba(44,109,94,.10), transparent 60%); }

@media (max-width: 980px){
  .ss-grid{ grid-template-columns: 1fr; }
}

/* ===== SECTION 2: Finish Map ===== */
.finish-map{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.fm-title{ font-family:"PrataDL", serif; }
.fm-head .fm-lede{ max-width: 60ch; }
.fm-controls{ display:flex; gap:8px; margin-top: 8px; flex-wrap:wrap; }
.fm-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.fm-chip:hover{ transform: translateY(-2px); }
.fm-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }

.fm-grid{
  margin-top: 12px;
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.fm-card{
  grid-column: span 6;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px 10px 12px; text-align:center; transition: transform .2s ease;
}
.fm-card:hover{ transform: translateY(-3px); }
.fm-card img{ margin-inline:auto; }
.fm-card figcaption{ margin-top:6px; color: var(--dl-ink-2); }

@media (max-width: 720px){
  .fm-card{ grid-column: span 12; }
}

/* ===== SECTION 3: Pairing Lanes ===== */
.pairing-lanes{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.pl-title{ font-family:"PrataDL", serif; }
.pl-track{
  margin-top: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 320px);
  gap: 12px;
  overflow-x: auto; overflow-y: visible;
  padding: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--dl-line);
  border-radius: 16px; background: #fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.pl-card{
  scroll-snap-align: start;
  background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; display:grid; gap:8px; transition: transform .2s ease;
  min-width:0;
}
.pl-card:hover{ transform: translateY(-2px); }
.pl-card figure{ margin:0; }
.pl-card img{ margin-inline:auto; }
.pl-card h3{ margin: 2px 0 0; }
.pl-card p{ margin: 0; color: var(--dl-ink-2); }
.pl-card.text-only{ align-content:start; }

/* responsive: чуть шире карточки на мобильных */
@media (max-width: 520px){
  .pl-track{ grid-auto-columns: 86%; }
}
/* =========================
   SECTION 4 — Climate Lines
   ========================= */
.climate-lines{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.cl-title{ font-family:"PrataDL", serif; }
.cl-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 10px;
}
.cl-card{
  grid-column: span 3;
  position:relative;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0; transition: transform .2s ease, box-shadow .2s ease;
}
.cl-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31,31,34,.08), 0 6px 16px rgba(31,31,34,.06); }
.cl-card.text-only .cl-fig{ display:none; }
.cl-fig{ margin:0 0 8px; }
.cl-fig img{ margin-inline:auto; }
.cl-tags{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:8px 0 0; list-style:none; color:var(--dl-muted); }
.cl-tags li{ padding:6px 10px; border:1px dashed #d7dcdf; border-radius:12px; background:#fff; }
@media (max-width: 1000px){ .cl-card{ grid-column: span 6; } }
@media (max-width: 600px){ .cl-card{ grid-column: span 12; } }

/* =========================
   SECTION 5 — Sizes & Refills
   ========================= */
.sizes-refills{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.sr-title{ font-family:"PrataDL", serif; }
.sr-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 10px; align-items:stretch;
}
.sr-item{
  grid-column: span 3;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0; transition: transform .2s ease;
}
.sr-item:hover{ transform: translateY(-2px); }
.sr-fig{ text-align:center; }
.sr-fig img{ margin-inline:auto; }
.sr-fig figcaption{ margin-top:6px; color:var(--dl-muted); }
.sr-note{ margin-top:10px; color:var(--dl-muted); }
@media (max-width: 1000px){ .sr-item{ grid-column: span 6; } }
@media (max-width: 600px){ .sr-item{ grid-column: span 12; } }

/* =========================
   SECTION 6 — Texture Audit
   ========================= */
.texture-audit{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.ta-title{ font-family:"PrataDL", serif; }
.ta-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 10px; align-items:start;
}
.ta-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; min-width:0;
}
.ta-fig img{ margin-inline:auto; }
.ta-fig figcaption{ margin-top:6px; color:var(--dl-muted); }

.ta-metrics{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; display:grid; gap:10px; min-width:0;
}
.ta-row{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.ta-label{ font-weight:600; color:var(--dl-ink); }
.ta-bar{
  --h: 10px;
  width: 180px; height: var(--h);
  border-radius: 999px; background: #eef2f4; border:1px solid var(--dl-line);
  overflow:hidden; display:inline-block;
}
.ta-bar i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--dl-accent), #3f8b7a);
  border-radius: 999px;
  transition: width .9s ease;
}

@media (max-width: 980px){
  .ta-grid{ grid-template-columns: 1fr; }
  .ta-row{ grid-template-columns: 1fr; }
  .ta-bar{ width: 100%; }
}
/* =========================
   SECTION 7 — Active Ladder
   ========================= */
.active-ladder{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.al-title{ font-family:"PrataDL", serif; }
.al-steps{
  list-style:none; padding:0; margin:10px 0 0;
  display:grid; gap:14px;
}
.al-step{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px; align-items:center;
  position:relative;
}
.al-step::before{
  content:""; position:absolute; left: 24px; top: -6px; bottom: -6px; width: 2px;
  background: linear-gradient(180deg, var(--dl-accent), #dbe9e4 60%, #e9ecef); border-radius:2px;
}
.al-card{
  grid-column: 2 / span 7;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0; transition: transform .2s ease;
}
.al-card:hover{ transform: translateY(-2px); }
.al-fig{ grid-column: 10 / span 3; margin:0; text-align:center; }
.al-fig img{ margin-inline:auto; }

/* зигзаг: чётные шаги меняем стороны */
.al-step:nth-child(even) .al-card{ grid-column: 4 / span 7; }
.al-step:nth-child(even) .al-fig{ grid-column: 1 / span 3; }

@media (max-width: 900px){
  .al-step{ grid-template-columns: 1fr; }
  .al-step::before{ display:none; }
  .al-card, .al-fig{ grid-column: auto; }
}

/* =========================
   SECTION 8 — Tone Guide
   ========================= */
.tone-guide{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.tg-title{ font-family:"PrataDL", serif; }
.tg-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.tg-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; cursor:pointer; font-weight:600;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.tg-chip:hover{ transform: translateY(-2px); }
.tg-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }

.tg-grid{
  margin-top:12px;
  display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; align-items:start;
}
.tg-card{
  grid-column: span 4;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; min-width:0; transition: transform .2s ease;
}
.tg-card:hover{ transform: translateY(-3px); }
.tg-card img{ margin-inline:auto; }
.tg-card.text-only{ align-content:start; text-align:left; }

@media (max-width: 1020px){ .tg-card{ grid-column: span 6; } }
@media (max-width: 600px){ .tg-card{ grid-column: span 12; } }

/* =========================
   SECTION 9 — Shelf Scenes Rail
   ========================= */
.shelf-rail{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.sr2-title{ font-family:"PrataDL", serif; }
.sr2-track{
  margin-top: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 320px);
  gap: 12px;
  overflow-x: auto; overflow-y: visible;
  padding: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--dl-line);
  border-radius: 16px; background:#fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.sr2-card{
  scroll-snap-align: start;
  background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease; min-width:0;
}
.sr2-card:hover{ transform: translateY(-3px); }
.sr2-card img{ margin-inline:auto; }
.sr2-card.text-only{ text-align:left; }

@media (max-width: 520px){
  .sr2-track{ grid-auto-columns: 86%; }
}
/* =========================
   SECTION 10 — Hydrate Line
   ========================= */
.hydrate-line{ padding: clamp(56px, 7vw, 96px) 0; position:relative; overflow:hidden; }
.hy-title{ font-family:"PrataDL", serif; }
.hy-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-top: 10px; align-items:start;
}
.hy-copy{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0;
}
.hy-tags{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:8px 0 0; list-style:none; color:var(--dl-muted); }
.hy-tags li{ padding:6px 10px; border:1px dashed #d7dcdf; border-radius:12px; background:#fff; }
.hy-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center;
}
.hy-fig img{ margin-inline:auto; }
.hy-fig figcaption{ margin-top:6px; color:var(--dl-muted); }

.hy-wave{
  position:absolute; inset:auto -12vw -14vw auto; width:46vw; height:46vw; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(44,109,94,.10), transparent 60%);
  filter: blur(24px); pointer-events:none; z-index:-1;
}
.hy-wave.a{ left:-12vw; top:-10vw; background: radial-gradient(50% 50% at 50% 50%, rgba(179,86,118,.10), transparent 60%); }
@media (max-width: 980px){ .hy-grid{ grid-template-columns: 1fr; } }

/* =========================
   SECTION 11 — Brighten Micro-Lab
   ========================= */
.brighten-lab{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.br-title{ font-family:"PrataDL", serif; }
.br-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top:10px; align-items:start;
}
.br-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; min-width:0;
}
.br-fig img{ margin-inline:auto; }
.br-fig figcaption{ margin-top:6px; color:var(--dl-muted); }

.br-steps{
  list-style:none; padding:12px; margin:0;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  display:grid; gap:10px; min-width:0;
}
.br-step{
  padding:10px; border:1px dashed #d7dcdf; border-radius:12px; background:#fff;
  transition: transform .2s ease;
}
.br-step:hover{ transform: translateY(-2px); }

@media (max-width: 980px){ .br-grid{ grid-template-columns: 1fr; } }

/* =========================
   SECTION 12 — Shield Veils Selector
   ========================= */
.shield-veils{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.sv-title{ font-family:"PrataDL", serif; }
.sv-controls{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.sv-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.sv-chip:hover{ transform: translateY(-2px); }
.sv-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }

.sv-grid{
  margin-top:12px;
  display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; align-items:start;
}
.sv-card{
  grid-column: span 6;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; min-width:0; transition: transform .2s ease;
}
.sv-card:hover{ transform: translateY(-3px); }
.sv-card img{ margin-inline:auto; }

@media (max-width: 720px){ .sv-card{ grid-column: span 12; } }
/* =========================
   SECTION 13 — pH Compass
   ========================= */
.ph-compass{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; position:relative; }
.ph-title{ font-family:"PrataDL", serif; }
.ph-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items:start;
  margin-top: 10px;
}
.ph-dial{
  width: 260px; height: 260px; border-radius: 50%;
  background:
    conic-gradient(from -90deg, #e6c8d2 0 120deg, #cdebe2 120deg 240deg, #e9ecef 240deg 360deg);
  box-shadow: var(--dl-shadow);
  border: 1px solid var(--dl-line);
  position: relative;
}
.ph-needle{
  position:absolute; left:50%; top:50%;
  width: 2px; height: 46%; background: var(--dl-accent);
  transform-origin: bottom center; transform: translate(-50%, -100%) rotate(-30deg);
  border-radius: 2px;
}
.ph-controls{ display:flex; gap:8px; flex-wrap:wrap; }
.ph-chip{
  height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dl-line); background:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.ph-chip:hover{ transform: translateY(-2px); }
.ph-chip.is-active{ background:linear-gradient(135deg, var(--dl-mint), #fff); border-color:#cfe8df; }

.ph-card{
  grid-column: 2 / span 1;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:12px; min-width:0;
}
.ph-card[hidden]{ display:none !important; }

.ph-fig{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center;
}
.ph-fig img{ margin-inline:auto; }
.ph-fig figcaption{ margin-top:6px; color: var(--dl-muted); }

@media (max-width: 940px){
  .ph-grid{ grid-template-columns: 1fr; }
  .ph-card{ grid-column: auto; }
  .ph-dial{ margin-inline:auto; }
}

/* =========================
   SECTION 14 — Climate Capsules
   ========================= */
.capsule-stacks{ padding: clamp(56px, 7vw, 96px) 0; position:relative; overflow:hidden; }
.cs-title{ font-family:"PrataDL", serif; }
.cs-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 10px; align-items:start;
}
.cs-card, .cs-chip{
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
}
.cs-card{
  grid-column: span 4; padding:12px; min-width:0; transition: transform .2s ease;
}
.cs-card:hover{ transform: translateY(-2px); }
.cs-chip{
  grid-column: span 4; padding:10px; text-align:center;
}
.cs-chip img{ margin-inline:auto; }
.cs-chip figcaption{ margin-top:6px; color: var(--dl-muted); }

.cs-glow{
  position:absolute; pointer-events:none; filter: blur(24px); z-index:-1;
  width: 44vw; height: 44vw; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(179,86,118,.10), transparent 60%);
}
.cs-glow.a{ left:-12vw; top:-10vw; }
.cs-glow.b{ right:-14vw; bottom:-12vw; background: radial-gradient(50% 50% at 50% 50%, rgba(44,109,94,.10), transparent 60%); }

/* floating animation */
.float-a{ animation: floatA 7s ease-in-out infinite; }
.float-b{ animation: floatB 7.4s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
@keyframes floatB{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(8px) } }

@media (max-width: 1020px){ .cs-card, .cs-chip{ grid-column: span 6; } }
@media (max-width: 600px){ .cs-card, .cs-chip{ grid-column: span 12; } }

/* =========================
   SECTION 15 — QA Track
   ========================= */
.qa-track{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.qt-title{ font-family:"PrataDL", serif; }
.qt-rail{
  margin-top:10px;
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 320px);
  gap:12px;
  overflow-x:auto; overflow-y:visible;
  padding:12px;
  scroll-snap-type:x mandatory;
  border:1px solid var(--dl-line); border-radius:16px; background:#fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.qt-card{
  scroll-snap-align:start;
  background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease; min-width:0;
}
.qt-card:hover{ transform: translateY(-3px); }
.qt-card img{ margin-inline:auto; }
.qt-card.text-only{ text-align:left; }
@media (max-width: 520px){ .qt-rail{ grid-auto-columns: 86%; } }
/* =========================
   SECTION 16 — Blend Studio (accordion)
   ========================= */
.blend-studio{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.bs-title{ font-family:"PrataDL", serif; }
.bs-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 10px;
}
.bs-panel{
  grid-column: span 12;
  background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow: var(--dl-shadow);
  overflow:hidden;
}
.bs-toggle{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px; background:#fff; border:0; border-bottom:1px solid var(--dl-line);
  cursor:pointer; font-weight:600; color:var(--dl-ink);
}
.bs-icon{ transition: transform .2s ease; }
.bs-panel.is-open .bs-icon{ transform: rotate(180deg); }

.bs-body{
  display:grid; grid-template-columns: 1fr auto; gap:12px; padding:12px; align-items:start;
}
.bs-fig{ margin:0; text-align:center; }
.bs-fig img{ margin-inline:auto; }
.bs-fig figcaption{ margin-top:6px; color: var(--dl-muted); }
.bs-list{ margin:0; padding-left:1.1rem; display:grid; gap:.35rem; color:var(--dl-ink-2); }

@media (max-width: 880px){
  .bs-body{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 17 — Lookbook Reel
   ========================= */
.lookbook-reel{ padding: clamp(56px, 7vw, 96px) 0; overflow:hidden; }
.lb-title{ font-family:"PrataDL", serif; }
.lb-track{
  margin-top:10px;
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 320px);
  gap:12px; overflow-x:auto; overflow-y:visible; padding:12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border:1px solid var(--dl-line); border-radius:16px; background:#fff; box-shadow: var(--dl-shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.lb-card{
  scroll-snap-align:start; background:#fff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
  padding:10px; text-align:center; transition: transform .2s ease; min-width:0;
}
.lb-card:hover{ transform: translateY(-3px); }
.lb-card img{ margin-inline:auto; }
.lb-card.text-only{ text-align:left; }

@media (max-width: 520px){
  .lb-track{ grid-auto-columns: 86%; }
}
/* =========================
   COLLECTIONS — Formulation Handbook (text-only)
   ========================= */
.collection-ethos{
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 12% 10%, rgba(179,86,118,.06) 0%, transparent 60%),
    radial-gradient(60% 60% at 88% 90%, rgba(44,109,94,.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}
.ce-title{ font-family: "PrataDL", serif; }
.ce-lede{ max-width: 70ch; color: var(--dl-ink-2); }

.ce-wrap{ display: grid; gap: 14px; }

/* multi-column, collapses on small screens */
.ce-columns{
  column-width: 520px;
  column-gap: 28px;
  max-width: 1100px;
}
.ce-columns p,
.ce-columns ul,
.ce-columns h3,
.ce-columns blockquote{
  break-inside: avoid;
  margin: 0 0 12px;
}

.ce-columns h3{
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin-top: 6px;
}

/* lists & quote */
.ce-list{
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
  color: var(--dl-ink-2);
}
.ce-quote{
  border-left: 4px solid #cfe8df;
  margin-left: 0;
  padding: 6px 10px;
  color: var(--dl-ink-2);
  font-style: italic;
}
.ce-tail{ color: var(--dl-ink); }

/* soft background glows */
.ce-glow{
  position: absolute; pointer-events: none; filter: blur(28px); z-index: -1;
  width: 44vw; height: 44vw; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(179,86,118,.10), transparent 60%);
}
.ce-glow.a{ left: -12vw; top: -10vw; }
.ce-glow.b{ right: -14vw; bottom: -12vw; background: radial-gradient(50% 50% at 50% 50%, rgba(44,109,94,.10), transparent 60%); }

/* readability & safety (no horizontal scroll) */
.collection-ethos p{
  line-height: 1.65;
  color: var(--dl-ink);
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 720px){
  .ce-columns{ column-width: 100%; }
}