/* ===== S1: Hero ===== */
.atl-hero{padding:clamp(32px,5vw,64px) 0 var(--space-7)}
.atl-hero__grid{display:grid;gap:24px;grid-template-columns:1.1fr .9fr;align-items:center}
.atl-hero__copy h1{font-family:Fraunces,serif;font-weight:900;font-size:clamp(28px,4vw,48px);line-height:1.05;color:var(--kiln);margin-bottom:8px}
.atl-search{display:grid;grid-template-columns:1fr auto;gap:10px;margin:14px 0 8px}
.atl-quick{display:flex;flex-wrap:wrap;gap:8px}
.atl-hero__gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.atl-hero__ph--tall{grid-column:1/-1}
.atl-hero__ph img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-card)}
@media (max-width:900px){.atl-hero__grid{grid-template-columns:1fr}}

/* ===== S2: Region spotlight ===== */
.atl-spot{padding:var(--space-7) 0}
.atl-spot__grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.atl-spot__card{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
.atl-spot__media{aspect-ratio:4/3;background:var(--foam)}
.atl-spot__body{padding:14px 14px 16px}
@media (max-width:600px){.atl-spot__grid{grid-template-columns:1fr}}

/* ===== S3: Map + stats ===== */
.atl-map{padding:var(--space-7) 0}
.atl-map__grid{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:start}
.atl-map__canvas{position:relative;border-radius:var(--radius-card);box-shadow:var(--shadow-1);background:linear-gradient(180deg, color-mix(in oklab, var(--foam) 35%, transparent), transparent 60%), var(--paper);padding:12px}
.atl-map__svg{width:100%;aspect-ratio:16/9;display:block}
.atl-land{fill:color-mix(in oklab, var(--leaf) 18%, transparent);stroke:color-mix(in oklab, var(--leaf) 50%, transparent);stroke-width:1.5}

/* Pins */
.atl-pin{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 3px color-mix(in oklab, var(--copper) 30%, transparent);border:2px solid var(--paper);cursor:pointer;transition:transform .16s, box-shadow .16s}
.atl-pin:hover{transform:scale(1.06)}
.atl-pin:focus-visible{outline:3px solid color-mix(in oklab, var(--leaf) 70%, transparent);outline-offset:2px}
.atl-pin--na{top:22%;left:22%}
.atl-pin--sa{top:58%;left:32%}
.atl-pin--eu{top:28%;left:54%}
.atl-pin--af{top:48%;left:53%}
.atl-pin--as{top:34%;left:70%}
.atl-pin--oc{top:66%;left:82%}

.atl-side{display:grid;gap:12px}
.atl-stats{background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:14px 14px 16px}
.atl-stats__title{font-weight:700;color:var(--kiln)}
.atl-stats__region{color:#6a5f57}
.atl-stats__dl{display:grid;grid-template-columns:repeat(2,auto);gap:10px 16px;margin:10px 0 14px}
.atl-mini-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atl-mini{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}

@media (max-width:900px){.atl-map__grid{grid-template-columns:1fr}}
/* ===== S3 (new): Roast distribution ===== */
.atl-roastdist{padding:var(--space-7) 0}
/* дефолтные проценты (будут переопределяться классами state-*) */
.atl-roastdist{ --light:38%; --medium:47%; --dark:15%; }

.atl-roast__grid{
  display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:start;
}
.atl-roast__panel{background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:16px}
.atl-roast__regions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}

.atl-bars{display:grid;gap:10px;margin:10px 0 12px}
.atl-bar{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.atl-bar__label{min-width:70px;color:var(--kiln);font-weight:600}
.atl-bar__track{position:relative;height:10px;border-radius:999px;background:color-mix(in oklab, var(--foam) 60%, transparent);overflow:hidden}
.atl-bar__fill{position:absolute;inset:0 auto 0 0}
.atl-bar__fill--light{width:var(--light);background:color-mix(in oklab, var(--leaf) 55%, transparent)}
.atl-bar__fill--medium{width:var(--medium);background:color-mix(in oklab, var(--copper) 65%, transparent)}
.atl-bar__fill--dark{width:var(--dark);background:color-mix(in oklab, var(--kiln) 30%, transparent)}
.atl-bar__val{font-family:"IBM Plex Mono", ui-monospace;font-size:13px;color:#6a5f57;min-width:46px;text-align:right}

.atl-side{display:grid;gap:12px}
.atl-mini-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atl-mini{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}

@media (max-width:900px){
  .atl-roast__grid{grid-template-columns:1fr}
}

/* состояния (переключают проценты через CSS-переменные, без инлайна) */
.atl-roastdist.state-eu{ --light:38%; --medium:47%; --dark:15%; }
.atl-roastdist.state-na{ --light:28%; --medium:52%; --dark:20%; }
.atl-roastdist.state-sa{ --light:24%; --medium:56%; --dark:20%; }
.atl-roastdist.state-af{ --light:42%; --medium:45%; --dark:13%; }
.atl-roastdist.state-as{ --light:31%; --medium:53%; --dark:16%; }
.atl-roastdist.state-oc{ --light:36%; --medium:50%; --dark:14%; }
/* ===== Chips (pill buttons) ===== */
.cra-chip{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border:2px solid color-mix(in oklab, var(--foam) 70%, transparent);
  background:color-mix(in oklab, var(--foam) 22%, transparent);
  color:var(--kiln);
  font:600 14px/1.2 Inter, system-ui, sans-serif;
  cursor:pointer;
  transition:background .18s, border-color .18s, box-shadow .18s, transform .06s;
}
.cra-chip:hover{ background:color-mix(in oklab, var(--foam) 32%, transparent); }
.cra-chip:active{ transform:translateY(1px); }
.cra-chip:focus-visible{
  outline:3px solid color-mix(in oklab, var(--leaf) 70%, transparent);
  outline-offset:2px;
}
.cra-chip[aria-pressed="true"]{
  background:var(--leaf);
  border-color:color-mix(in oklab, var(--leaf) 70%, transparent);
  color:var(--on-accent); /* светлый текст на ярком фоне */
}
.cra-chip[disabled]{ opacity:.6; cursor:not-allowed; }

/* опционально: размер поменьше */
.cra-chip--sm{ padding:6px 10px; font-size:13px; border-radius:10px; }
/* ===== S4 & S6: cards grid ===== */
.atl-grid{padding:var(--space-7) 0}
.atl-cards{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.atl-card{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
.atl-card__media{aspect-ratio:4/3;background:var(--foam)}
.atl-card__body{padding:14px 14px 16px}
.atl-meta{color:#6a5f57}
.atl-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.atl-card--flat{box-shadow:none;border:2px dashed color-mix(in oklab, var(--leaf) 35%, transparent)}
@media (max-width:900px){ .atl-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .atl-cards{grid-template-columns:1fr} }

/* compare bar */
.atl-comparebar{
  margin-top:12px;padding:12px 14px;border-radius:14px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:color-mix(in oklab, var(--foam) 30%, transparent);
  border:1px solid color-mix(in oklab, var(--foam) 70%, transparent);
}
.atl-comparebar__txt{margin:0}

/* ===== S5: Roast ↔ Brew matrix ===== */
.atl-matrix{padding:var(--space-7) 0}
.atl-matrix__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.atl-controls{display:grid;gap:6px;max-width:520px;margin-top:8px}
.atl-roast__value{font-family:"IBM Plex Mono", ui-monospace;font-size:13px;color:var(--kiln)}
.atl-matrix__gallery{display:grid;gap:12px}
.atl-matrix__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){ .atl-matrix__grid{grid-template-columns:1fr} }
/* ===== S7: Compare teaser ===== */
.atl-compareteaser{padding:var(--space-7) 0}
.atl-ct__grid{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:start}
.atl-ct__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.atl-ct__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){.atl-ct__grid{grid-template-columns:1fr}.atl-ct__gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.atl-ct__gallery{grid-template-columns:1fr 1fr}}

/* ===== S8: Origins grid ===== */
.atl-origins{padding:var(--space-7) 0}
.atl-origins__grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.atl-origin--lg{grid-column:span 2}
.atl-origin--flat{display:flex;align-items:stretch}
.atl-tag{display:inline-block;padding:10px 12px;border-radius:12px;border:2px dashed color-mix(in oklab, var(--leaf) 55%, transparent);background:transparent}
@media (max-width:900px){.atl-origins__grid{grid-template-columns:repeat(2,1fr)}.atl-origin--lg{grid-column:span 2}}
@media (max-width:600px){.atl-origins__grid{grid-template-columns:1fr}}

/* карточка-линк */
.cra-card{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden;color:inherit;text-decoration:none}
.cra-card__media{aspect-ratio:4/3;background:var(--foam)}
.cra-card__body{padding:14px 14px 16px}
.cra-card__title{font-weight:700;color:var(--kiln)}
.cra-card:hover{transform:translateY(-1px);transition:transform .12s}

/* ===== S9: Shipping ===== */
.atl-ship{padding:var(--space-7) 0}
.atl-ship__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.atl-ship__gallery{display:grid;gap:12px}
.atl-ship__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
.atl-flags{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.atl-flags label{display:inline-flex;gap:6px;align-items:center}
@media (max-width:900px){.atl-ship__grid{grid-template-columns:1fr}}
/* ===== S10: New this month ===== */
.atl-new{padding:var(--space-7) 0}

/* ===== S11: Altitude bands ===== */
.atl-alt{padding:var(--space-7) 0}
.atl-alt__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.atl-alt__gallery{display:grid;gap:12px}
.atl-alt__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
/* bar: smooth left→right gradient, no инлайнов */
.atl-alt__bars{
  position:relative; height:110px; border-radius:12px;
  background:linear-gradient(90deg,#e9f3ec, #d8ebdf 20%, #c4e3d2 40%, #b2dbc7 60%, #a2d3bb 80%, #94ccaf);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--foam) 70%, transparent);
  margin:8px 0 10px;
}
.atl-alt__bars > span{position:absolute; inset:0; background:
  repeating-linear-gradient(90deg, transparent 0 24px, color-mix(in oklab, var(--foam) 70%, transparent) 24px 25px);
  border-radius:12px; pointer-events:none;}
@media (max-width:900px){ .atl-alt__grid{grid-template-columns:1fr} }

/* ===== S12: Process lab ===== */
.atl-proc{padding:var(--space-7) 0}
.atl-proc__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.atl-proc__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.atl-proc__gallery{display:grid;gap:12px}
.atl-proc__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){ .atl-proc__grid{grid-template-columns:1fr} }
/* ===== S13 & S14 reuse cards grid ===== */
.atl-espresso, .atl-filter { padding: var(--space-7) 0; }

/* ===== S15: Bundles ===== */
.atl-bundles{padding:var(--space-7) 0}
.atl-bun__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.atl-bun{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
.atl-bun__media{aspect-ratio:4/3;background:var(--foam)}
.atl-bun__body{padding:14px 14px 16px}
@media (max-width:900px){ .atl-bun__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .atl-bun__grid{grid-template-columns:1fr} }

/* ===== S16: Wholesale ===== */
.atl-wholesale{padding:var(--space-7) 0}
.atl-wh__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.atl-wh__gallery{display:grid;gap:12px}
.atl-wh__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
@media (max-width:900px){ .atl-wh__grid{grid-template-columns:1fr} }
/* ===== S17: Save boards ===== */
.atl-save{padding:var(--space-7) 0}
.atl-save__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.atl-save__gallery{display:grid;gap:12px}
.atl-save__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
.atl-save__actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.atl-save__note{color:#6a5f57;margin-top:6px}
@media (max-width:900px){.atl-save__grid{grid-template-columns:1fr}}

/* ===== S18: FAQ ===== */
.atl-faq{padding:var(--space-7) 0}
.atl-faq__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:start}
.atl-faq__gallery{display:grid;gap:12px}
.atl-faq__ph{aspect-ratio:4/3;background:var(--foam);border-radius:var(--radius-card);overflow:hidden}
.atl-faq__item{background:var(--paper);border-radius:12px;box-shadow:var(--shadow-1);padding:12px;margin-bottom:10px}
.atl-faq__item > summary{cursor:pointer;font-weight:700;color:var(--kiln)}
.atl-faq__item[open]{outline:1px solid color-mix(in oklab, var(--foam) 60%, transparent)}
@media (max-width:900px){.atl-faq__grid{grid-template-columns:1fr}}
.atl-acc{padding:var(--space-7) 0;display:grid;gap:10px}
.acc{background:var(--paper);border-radius:14px;box-shadow:var(--shadow-1);overflow:hidden}
.acc > summary{list-style:none;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:10px;cursor:pointer}
.acc__thumb{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--foam)}
.acc[open]{outline:1px solid color-mix(in oklab, var(--foam) 60%, transparent)}
.acc > p{padding:0 12px 12px}
.atl-whstack{padding:var(--space-7) 0}
.whs__grid{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;align-items:center}
.whs__media{position:relative;min-height:280px}
.pol{position:absolute;inset:auto auto 0 0;width:68%;aspect-ratio:4/3;background:var(--paper);border-radius:16px;box-shadow:var(--shadow-2,0 12px 30px rgba(0,0,0,.25));overflow:hidden}
.pol--a{transform:rotate(-4deg);z-index:1}
.pol--b{left:auto;right:0;transform:rotate(5deg);width:62%}
.pol img{width:100%;height:100%;object-fit:cover;display:block}
.whs__copy .cra-list{margin-top:8px}
@media (max-width:900px){.whs__grid{grid-template-columns:1fr}.whs__media{min-height:220px}}
/* === ATLAS: универсальный фикс медиа === */

/* 1) Любые figure с медиа — безопасные контейнеры */
figure[class*="__ph"],
figure[class*="__media"],
.atl-card__media,
.atl-mo__media,
.atl-ct__ph,
.atl-mini,
.atl-bun__media,
.atl-ship__ph,
.atl-alt__ph,
.atl-proc__ph,
.atl-wh__ph,
.rel__thumb,
.esp-thumb,
.spec__media,
.acc__thumb {
  background: var(--foam);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* 2) Картинка всегда заполняет контейнер без искажений */
figure[class*="__ph"] > img,
figure[class*="__media"] > img,
.atl-card__media > img,
.atl-mo__media > img,
.atl-ct__ph > img,
.atl-mini > img,
.atl-bun__media > img,
.atl-ship__ph > img,
.atl-alt__ph > img,
.atl-proc__ph > img,
.atl-wh__ph > img,
.rel__thumb > img,
.esp-thumb > img,
.spec__media > img,
.acc__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3) Карточки растягиваются по высоте ячейки грида (иначе остаются пустые «яма») */
.cra-card,
.atl-card,
.atl-mo,
.atl-bun,
.spec,
.acc { height: 100%; }

/* 4) Сетка «origins / region spotlight» — выравнивание без лишней высоты */
.atl-origins__grid { align-items: stretch; grid-auto-rows: auto; }
.atl-origin > .cra-card { display: grid; grid-template-rows: auto 1fr; }

/* 5) Чуть более широкое фото для крупных карточек origins, чтобы не были «узкими полосками» */
.atl-origin--lg .cra-card__media { aspect-ratio: 16 / 9; }

/* 6) Герой и мозаики: контент не прилипает к краям */
.atl-mosaic__grid, .atl-ct__gallery, .atl-rail, .atl-bun__grid,
.atl-wh__gallery, .atl-ship__gallery { gap: 12px; }

/* 7) Мобилка — избегаем «башен» */
@media (max-width: 600px){
  .atl-origin--lg .cra-card__media { aspect-ratio: 4 / 3; }
}
/* --- FIX: изоляция секций и усмирение переполнений --- */
.atl-acc,
.atl-whstack,
.atl-save,
.atl-releases,
.atl-esptable,
.atl-specbar {
  position: relative;          /* создаём контекст позиционирования */
  isolation: isolate;          /* обрезаем "краску" детей секции */
  z-index: 0;
}

/* Полароиды в Wholesale: гарантируем высоту и обрезку краёв,
   чтобы не нависали над следующей секцией */
.whs__media{
  position: relative;
  min-height: 420px;           /* было 280px — не хватало под наклон */
  overflow: hidden;            /* не даём вываливаться за секцию */
  border-radius: 18px;         /* аккуратная рамка вокруг стопки */
}

/* Полароиды — чуть меньше и без агрессивного вылета */
.pol{ box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.pol--a{ transform: rotate(-3.5deg); width: 64%; bottom: 6%; left: 4%; z-index: 1; }
.pol--b{ transform: rotate(4deg);   width: 58%; bottom: 0;   right: 6%; }

/* Саму секцию Save boards поднимаем по слою на случай пересечения */
.atl-save{ z-index: 1; }

/* Аккордеон Bundles (S15): любые внутренние элементы не должны
   перелетать за границы секции */
.atl-acc{ overflow: hidden; }
.acc{ position: relative; z-index: 0; }

/* Универсально: любые figure внутри atlas — гарантированная заливка
   без "чёрных пустот" и корректная обрезка */
figure[class*="__ph"],
figure[class*="__media"]{
  background: var(--foam);
  border-radius: var(--radius-card);
  overflow: hidden;
}
figure[class*="__ph"] > img,
figure[class*="__media"] > img{ width:100%; height:100%; object-fit:cover; display:block; }