/* Page heading helpers */
.sec-h{ font-family: Playfair, serif; font-size: clamp(26px,3.2vw,38px); }
.sec-lead{ color: var(--muted); margin-top: 10px; max-width: 62ch; }

/* ===== SECTION 1: Curations (3 photos) ===== */
.curations{ max-width: 1200px; margin: 92px auto 0; padding: 28px 16px; position: relative; }
.cur-grid{
  margin-top: 18px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  transform-style: preserve-3d;
}
.cur-card{
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.cur-card:hover{
  transform: translateY(-6px) rotateZ(-.2deg);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.cur-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* gentle stagger per row */
.cur-card:nth-child(1){ transform: translateY(0); }
.cur-card:nth-child(2){ transform: translateY(10px); }
.cur-card:nth-child(3){ transform: translateY(20px); }

/* ambient ribbons */
.cur-orb{
  position: absolute; border-radius: 999px; filter: blur(24px);
  mix-blend-mode: screen; pointer-events: none; opacity: .35; animation: curFloat 22s linear infinite;
}
.cur-orb.a{ width: 220px; height: 220px; left: -40px; top: -40px; background: radial-gradient(circle at 50% 50%, #ffdcb5, transparent 60%); }
.cur-orb.b{ width: 180px; height: 180px; right: -30px; top: 20px; background: radial-gradient(circle at 50% 50%, #cfe4d8, transparent 60%); animation-duration: 28s; }
@keyframes curFloat{ 50%{ transform: translateY(-6px) } }

/* ===== SECTION 2: Material Duets (2 photos) ===== */
.duets{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.duet-grid{
  margin-top: 18px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.duet-card{
  background: linear-gradient(180deg, #171a20, #15171c);
  border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.duet-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.duet-copy{ color: var(--muted); margin-top: 8px; }

/* ===== SECTION 3: Shelf Blueprints (2 photos + SVG lines) ===== */
.blueprints{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 28px; }
.bp-grid{
  margin-top: 18px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.bp-card{
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
}
.bp-fig figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }
.bp-copy{ color: var(--muted); margin-top: 8px; }

/* animated path */
.bp-svg{ position: absolute; inset: -6px -6px auto -6px; height: 60px; overflow: hidden; pointer-events: none; }
.bp-svg .path path{
  fill: none; stroke: color-mix(in srgb, var(--brand) 55%, var(--brand-2) 45%);
  stroke-width: 1.4; opacity: .55; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
  stroke-dasharray: 6 12;
  animation: pathRun 9s linear infinite;
}
@keyframes pathRun{ to{ stroke-dashoffset: -360; } }

/* Responsive */
@media (max-width: 1000px){
  .cur-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bp-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .cur-grid{ grid-template-columns: 1fr; }
  .duet-grid{ grid-template-columns: 1fr; }
}

/* Safety */
html, body{ overflow-x: hidden; }
/* ===== SECTION 4: Compact Corners (2 photos) ===== */
.corners{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.corn-grid{
  margin-top: 18px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.corn-card{
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.corn-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.corn-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* soft mask sweep on hover */
.corn-mask{
  position: absolute; inset: -20% -10%;
  background: radial-gradient(40% 60% at 30% 50%, rgba(214,169,123,.18), transparent 60%),
              radial-gradient(60% 40% at 70% 60%, rgba(155,182,167,.16), transparent 60%);
  mix-blend-mode: screen; filter: blur(18px); opacity: .0; transition: opacity .35s ease, transform .35s ease;
}
.corn-card:hover .corn-mask{ opacity: .8; transform: translateY(-4px); }

/* ===== SECTION 5: Gallery Triad (3 photos, snap row) ===== */
.triad{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.tri-scroller{
  margin-top: 18px; display: grid; grid-auto-flow: column; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.tri-card{
  scroll-snap-align: start;
  min-width: min(84vw, 360px);
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.tri-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.tri-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

.tri-controls{
  display: flex; justify-content: center; gap: 10px; margin-top: 12px;
}
.tri-nav{
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: #111; font-weight: 700; box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.tri-nav:hover{ transform: translateY(-1px); }

/* ===== SECTION 6: Runner Rhythm (2 photos, flip cards) ===== */
.runner{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 28px; }
.run-grid{
  margin-top: 18px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  perspective: 1000px;
}
.run-card{
  position: relative; height: 260px;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.run-card:hover{ transform: rotateY(180deg); }

.run-face{
  position: absolute; inset: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  backface-visibility: hidden; display: grid; align-content: center;
}
.run-face.front h3{ margin: 0 0 6px; font-size: 18px; }
.run-face.front p{ margin: 0; color: var(--muted); }
.run-face.back{ transform: rotateY(180deg); }
.run-face figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* Responsive */
@media (max-width: 980px){
  .corn-grid{ grid-template-columns: 1fr; }
  .run-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .tri-card{ min-width: 82vw; }
}
/* ===== SECTION 7: Modular Stack (2 photos + 2 text cards) ===== */
.mstack{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.ms-presets{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ms-btn{
  height: 40px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line); background: #171a20; color: var(--ink);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.ms-btn:hover, .ms-btn:focus-visible{ transform: translateY(-1px); background:#1d2026; border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.ms-btn[data-active="true"]{ outline: 2px solid var(--brand); }

.ms-grid{
  margin-top: 16px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.ms-card{
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.ms-card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.ms-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* layout presets */
.ms-airy{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.ms-balanced{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.ms-compact{ grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1000px){
  .ms-compact{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 760px){
  .ms-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ===== SECTION 8: Tea Hour Sets (3 photos + dots) ===== */
.teahour{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.tea-track{
  margin-top: 18px; display: grid; grid-auto-flow: column; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 8px;
}
.tea-card{
  scroll-snap-align: start;
  min-width: min(84vw, 360px);
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.tea-card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.tea-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

.tea-dots{ display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.dot{ width: 6px; height: 6px; border-radius: 999px; background: #4a4e57; transition: transform .2s ease, background .2s ease; }
.dot.is-on{ background: color-mix(in srgb, var(--brand) 75%, var(--brand-2)); transform: scale(1.6); }

.tea-controls{ display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.tea-nav{
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: #111; font-weight: 700; box-shadow: var(--shadow); transition: transform .2s ease;
}
.tea-nav:hover{ transform: translateY(-1px); }
@media (max-width: 560px){
  .tea-card{ min-width: 82vw; }
}

/* ===== SECTION 9: Texture Compare (tabs; 2 photos) ===== */
.tcompare{ max-width: 1100px; margin: 20px auto 40px; padding: 0 16px 16px; }
.tc-tabs{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tc-tab{
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #171a20; color: var(--ink);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.tc-tab:hover, .tc-tab:focus-visible{ transform: translateY(-1px); background:#1d2026; border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.tc-tab[aria-selected="true"]{ outline: 2px solid var(--brand); }

.tc-panels{ margin-top: 14px; }
.tc-panel{ display: none; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.tc-panel.is-active{ display: block; animation: fadeTc .35s ease both; }
@keyframes fadeTc{ from{ opacity:.6; transform: translateY(6px);} to{ opacity:1; transform:none;} }
.tc-copy{ color: var(--muted); margin-top: 8px; }

/* Safety */
html, body{ overflow-x: hidden; }
/* ===== SECTION 10: Window Light (3 photos + mode overlay) ===== */
.wlight{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.wl-modes{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.wl-btn{
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #171a20; color: var(--ink);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.wl-btn:hover, .wl-btn:focus-visible{ transform: translateY(-1px); background:#1d2026; border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.wl-btn[data-active="true"]{ outline: 2px solid var(--brand); }

.wl-grid{
  margin-top: 16px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.wl-card{
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  overflow: hidden;
}
.wl-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* light overlay driven by vars */
:root{
  --wl-a: rgba(214,169,123,.18); /* morning default */
  --wl-b: rgba(155,182,167,.16);
}
.wl-card::after{
  content:""; position: absolute; inset: -20% -10%;
  background: radial-gradient(40% 60% at 30% 50%, var(--wl-a), transparent 60%),
              radial-gradient(60% 40% at 70% 60%, var(--wl-b), transparent 60%);
  mix-blend-mode: screen; filter: blur(18px); opacity: .8;
  pointer-events: none; transition: opacity .35s ease, transform .35s ease, background .35s ease;
}
.wl-card:hover::after{ transform: translateY(-4px); opacity: 1; }

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

/* ===== SECTION 11: Scale Guide (2 photos + ruler ticks) ===== */
.scale{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.sc-presets{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-btn{
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #171a20; color: var(--ink);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.sc-btn:hover, .sc-btn:focus-visible{ transform: translateY(-1px); background:#1d2026; border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.sc-btn[data-active="true"]{ outline: 2px solid var(--brand); }

.sc-grid{
  margin-top: 16px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.sc-card{
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26); overflow: hidden;
}
.sc-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* animated ticks */
.ticks{
  position: absolute; inset: 0; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
  opacity: .45; mix-blend-mode: screen; animation: tickslide 12s linear infinite; pointer-events: none;
}
@keyframes tickslide{ to{ transform: translate3d(-12px,-12px,0); } }

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

/* scale frames (affect captions sizing tone) */
.sc-cups .sc-card figcaption{ color: color-mix(in srgb, var(--muted) 90%, #ffdcb5); }
.sc-trays .sc-card figcaption{ color: color-mix(in srgb, var(--muted) 90%, #cfe4d8); }

/* ===== SECTION 12: Entryway Kits (3 photos + wave) ===== */
.entrykits{ max-width: 1100px; margin: 20px auto 40px; padding: 0 16px 16px; }
.ek-grid{
  margin-top: 16px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.ek-card{
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26); overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.ek-card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.ek-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* decorative wave */
.ek-wave{
  position: absolute; left: -20%; right: -20%; top: -30%;
  height: 60%; pointer-events: none; opacity: .4; filter: blur(14px); mix-blend-mode: screen;
  background:
    radial-gradient(40% 60% at 20% 50%, rgba(214,169,123,.20), transparent 60%),
    radial-gradient(60% 40% at 60% 60%, rgba(155,182,167,.18), transparent 60%);
  animation: waveDrift 16s linear infinite;
}
@keyframes waveDrift{
  50%{ transform: translateY(6px); opacity: .5; }
}

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

/* Safety */
html, body{ overflow-x: hidden; }
/* ===== SECTION 13: Calm Desk (2 photos + mood overlay) ===== */
.cdesk{ max-width: 1100px; margin: 20px auto 0; padding: 0 16px 16px; }
.cd-modes{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.cd-btn{
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #171a20; color: var(--ink);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.cd-btn:hover, .cd-btn:focus-visible{ transform: translateY(-1px); background:#1d2026; border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.cd-btn[data-active="true"]{ outline: 2px solid var(--brand); }

.cd-grid{
  margin-top: 16px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.cd-card{
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.cd-card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.cd-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* mood overlay by CSS vars */
:root{
  --cd-a: rgba(242,243,245,.06); /* Focus default: crisper */
  --cd-b: rgba(214,169,123,.16);
}
.cd-glow{
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(40% 60% at 30% 50%, var(--cd-a), transparent 60%),
    radial-gradient(60% 40% at 70% 60%, var(--cd-b), transparent 60%);
  mix-blend-mode: screen; filter: blur(18px); opacity: .7; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .35s ease;
}
.cd-card:hover .cd-glow{ transform: translateY(-4px); opacity: .9; }

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

/* ===== SECTION 14: Night Shelves (3 photos, mosaic + veil) ===== */
.nights{ max-width: 1100px; margin: 20px auto 60px; padding: 0 16px 16px; }
.ng-grid{
  margin-top: 16px;
  display: grid; gap: 16px;
  grid-template-columns: 1.2fr .8fr;
  grid-auto-rows: 1fr;
}
.ng-card{
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.ng-card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.ng-card figcaption{ margin-top: 8px; color: var(--muted); font-size: 14px; }

/* mosaic sizing */
.ng-card.tall{ grid-row: span 2; }
.ng-card.wide{ grid-column: 1 / -1; }

.ng-veil{
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(40% 60% at 30% 50%, rgba(214,169,123,.20), transparent 60%),
    radial-gradient(60% 40% at 70% 60%, rgba(155,182,167,.18), transparent 60%);
  mix-blend-mode: screen; filter: blur(18px); opacity: .35; pointer-events: none;
  animation: nightPulse 16s ease-in-out infinite;
}
@keyframes nightPulse{
  0%,100%{ opacity: .35; transform: translateY(0); }
  50%{ opacity: .55; transform: translateY(-4px); }
}

@media (max-width: 980px){
  .ng-grid{ grid-template-columns: 1fr; }
  .ng-card.tall{ grid-row: auto; }
  .ng-card.wide{ grid-column: auto; }
}

/* Safety */
html, body{ overflow-x: hidden; }
/* ==== MODULAR STACK overflow fix ==== */
.mstack{                /* сам раздел */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  overflow: hidden;     /* на всякий */
}

.ms-grid{               /* грид с карточками */
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  justify-items: center; /* центруем карточки в колонках */
}

/* единые ограничения карточки */
.ms-card{
  width: 100%;
  max-width: 350px;     /* требование: фото/карточки не шире 350px */
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  padding: 12px;
  overflow: hidden;     /* чтобы внутренности не вылезали */
  box-sizing: border-box;
}

/* изображение внутри — фикс-пропорция и обрезка без искажений */
.ms-card .thumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #111418;
}
.ms-card .thumb > img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* подпись не режется и не двигает сетку */
.ms-card figcaption{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

/* если где-то был «сдвиг» карточки ради эффекта — убираем горизонтальные смещения */
.ms-card{ transform: translateY(0); }
.ms-card:hover{ transform: translateY(-6px); } /* только по Y */

/* мобильная сетка — строго по одной в ряд */
@media (max-width: 640px){
  .ms-grid{ grid-template-columns: 1fr; }
  .ms-card{ max-width: min(350px, 92vw); }
}
/* ==== Page 2 — guard rails for sections 1–2 (mobile overflow fix) ==== */

/* 1) Подрежем горизонтальные «вылезания» у первых двух секций */
main section:nth-of-type(-n+2){
  padding-inline: 16px;      /* внутренние поля у края экрана */
  overflow-x: hidden;        /* на всякий случай */
}

/* 2) Фигуры и изображения — фикс-лимиты */
main section:nth-of-type(-n+2) figure{
  width: 100%;
  max-width: 350px;          /* картинки/карточки не шире 350px */
  margin-inline: auto;       /* центрируем */
  box-sizing: border-box;
}

main section:nth-of-type(-n+2) img,
main section:nth-of-type(-n+2) .cap-img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;          /* жёсткий лимит для любых правил выше */
  object-fit: cover;         /* без искажений, если высоту фиксировали где-то */
  border-radius: 14px;
}

/* 3) Если в секциях 1–2 используются гриды — центрируем карточки */
main section:nth-of-type(-n+2) .grid,
main section:nth-of-type(-n+2) [class*="grid"]{
  justify-items: center;
}

/* 4) На узких — одна колонка, чтобы точно ничего не резало */
@media (max-width: 640px){
  main section:nth-of-type(-n+2) .grid,
  main section:nth-of-type(-n+2) [class*="grid"]{
    grid-template-columns: 1fr !important;
  }
  main section:nth-of-type(-n+2) figure{
    max-width: min(350px, 92vw);
  }
}
/* ==== Shelf Blueprints overflow fix ==== */

/* общий страховочный лимит для всей страницы */
main.collection img.cap-img{
  display:block;
  width:100%;
  height:auto;
  max-width:350px;        /* требование проекта */
}

/* конкретно для раздела Shelf Blueprints */
.blueprints{              /* класс секции */
  max-width:1100px;
  margin:20px auto 0;
  padding:0 16px 16px;
  overflow:hidden;        /* на всякий случай */
}

.bp-grid{
  margin-top:16px;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  justify-items:center;   /* центрируем карточки в колонках */
}

.bp-card{
  width:100%;
  max-width:350px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:0 10px 30px rgba(0,0,0,.26);
  padding:12px;
  overflow:hidden;
  box-sizing:border-box;
}

/* картинка держит пропорцию; без искажений */
.bp-card .thumb{
  width:100%;
  aspect-ratio:4 / 3;     /* можно 1/1, если хочется квадрат */
  overflow:hidden;
  border-radius:14px;
  background:#111418;
}
.bp-card .thumb > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* на узких — одна колонка и безопасная ширина */
@media (max-width:640px){
  .bp-grid{ grid-template-columns:1fr; }
  .bp-card{ max-width:min(350px,92vw); }
}