/* COCHIE sheet. Palette and names live in _tokens.js; the builder fills the root block. */
:root {
  --cch-ink: #28231c;
  --cch-paper: #ffffff;
  --cch-craft: #f7f1e5;
  --cch-cork: #c9995f;
  --cch-apple: #bf3a2b;
  --cch-apple-deep: #992e22;
  --cch-board: #2e5f49;
  --cch-board-lit: #3a7a5d;
  --cch-stone: #6d6558;
  --cch-star: #836427;
  --cch-kick: var(--cch-apple-deep);
  --cch-rule: rgba(40,35,28,.14);
  --cch-rule-dark: rgba(255,255,255,.22);
  --cch-display: 'Shantell Sans', 'Comic Sans MS', cursive;
  --cch-text: 'ABeeZee', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cch-text);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--cch-ink);
  background: var(--cch-paper);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--cch-display); line-height: 1.18; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; }
p { margin: 0 0 1em; }

.deskleaf { width: min(1160px, calc(100% - 44px)); margin-inline: auto; }

/* ---- header ---- */
.jumpline {
  position: absolute; left: -999px; top: 0; z-index: 60;
  background: var(--cch-apple); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.jumpline:focus { left: 0; }
.boardhead {
  position: sticky; top: 0; z-index: 50;
  background: var(--cch-paper);
  border-bottom: 2px solid var(--cch-rule);
}
.boardhead .deskleaf { display: flex; align-items: center; gap: 26px; min-height: 66px; }
.chalkmark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.chalkmark img { height: 40px; width: auto; }
.chalkmark b { font-family: var(--cch-display); font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; }
.chalkmenu { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.chalkmenu a {
  text-decoration: none; padding: 8px 11px; border-radius: 9px;
  font-size: .95rem; color: var(--cch-ink);
}
.chalkmenu a:hover { background: var(--cch-craft); }
.headcta {
  display: inline-block; text-decoration: none; white-space: nowrap;
  background: var(--cch-board); color: #fff; padding: 9px 16px; border-radius: 10px;
  font-weight: 700; font-size: .93rem;
}
.headcta:hover { background: var(--cch-board-lit); }
#foldchalk {
  display: none; margin-left: auto;
  background: none; border: 2px solid var(--cch-rule); border-radius: 9px;
  font: inherit; padding: 6px 12px; cursor: pointer; color: inherit;
}

/* ---- bands ---- */
.paperband { padding-block: 58px; background: var(--cch-paper); }
.craftband { padding-block: 58px; background: var(--cch-craft); }
.slateband, .lockerfoot {
  --cch-ink: #f6f1e7;
  --cch-stone: #d9d2c3;
  --cch-kick: #f2c9a6;
  --cch-rule: rgba(255, 255, 255, .22);
  background: var(--cch-board);
  color: var(--cch-ink);
}
.slateband { padding-block: 64px; }
.boardkick {
  display: block; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  font-size: .78rem; color: var(--cch-kick); margin-bottom: 10px;
}
.boardtitle { max-width: 640px; }
.boarddeck { color: var(--cch-stone); max-width: 620px; margin-bottom: 28px; }

/* ---- buttons ---- */
.tackbtn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--cch-text); font-weight: 700; font-size: .95rem;
  background: var(--cch-apple); color: #fff; padding: 11px 20px; border-radius: 10px;
}
.tackbtn:hover { background: var(--cch-apple-deep); }
.chalkedge {
  display: inline-block; text-decoration: none; text-align: center; cursor: pointer;
  font-family: var(--cch-text); font-weight: 700; font-size: .95rem;
  background: transparent; color: inherit; padding: 9px 18px; border-radius: 10px;
  border: 2px solid var(--cch-rule);
}
.chalkedge:hover { border-color: var(--cch-cork); }

/* ---- hero ---- */
.welcomesplit { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.welcomecopy h1 { margin-bottom: .4em; }
.welcomecopy p { font-size: 1.07rem; color: var(--cch-stone); max-width: 34em; }
.welcomecopy .pinact { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.welcomerail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.welcomerail .pinname { font-size: .85rem; }

/* ---- trust cards ---- */
.gluerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gluecard {
  border: 2px solid var(--cch-rule); border-radius: 14px; padding: 18px 18px 10px;
  background: var(--cch-paper);
}
.gluecard h3 { font-size: 1rem; margin-bottom: .35em; }
.gluecard p { font-size: .92rem; color: var(--cch-stone); }

/* ---- category tiles ---- */
.corktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.corkdoor {
  text-decoration: none; border: 2px solid var(--cch-rule); border-radius: 14px;
  overflow: hidden; background: var(--cch-paper); display: flex; flex-direction: column;
}
.corkdoor:hover { border-color: var(--cch-cork); }
.corkdoor .pinsnap { border-bottom: 2px solid var(--cch-rule); }
.corkdoor b { padding: 12px 14px 2px; font-family: var(--cch-display); }
.corkdoor span { padding: 0 14px 12px; font-size: .87rem; color: var(--cch-stone); }

/* ---- product tiles ---- */
.toppins, .freshpins, .goeswith { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pincase {
  display: flex; flex-direction: column; min-width: 0;
  border: 2px solid var(--cch-rule); border-radius: 14px; background: #fff;
  overflow: hidden; color: var(--cch-ink);
}
.pincase:hover { border-color: var(--cch-cork); }
.pintile { flex: 1; text-decoration: none; display: flex; flex-direction: column; min-height: 0; color: inherit; }
/* ⚠ `display: block` тут обязателен, а не украшение: обойма — <span>, и на строчном элементе
   `aspect-ratio` не работает вовсе, а лежащая внутри `position:absolute` картинка меряет
   `inset: 0` от коробки нулевой высоты и пропадает целиком. В сетках полок этого не видно —
   там потомки блокируются самим гридом, — а на карточке товара обойма лежит в обычном div,
   и фото там не было ни одного. Приёмка была зелёной: тег на месте, файл на месте, габарит
   в атрибутах. Поймал кадр. */
.pinsnap { display: block; position: relative; aspect-ratio: 1 / 1; background: #fff; }
.pinsnap img { position: absolute; inset: 0; margin: auto; max-width: 88%; max-height: 88%; width: auto; height: auto; }
.seasontag {
  position: absolute; left: 10px; top: 10px;
  background: var(--cch-craft); border: 1px solid var(--cch-rule); border-radius: 999px;
  font-size: .72rem; font-weight: 700; padding: 2px 9px; color: var(--cch-ink);
}
.pinname {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 11px 13px 0; font-size: .92rem; line-height: 1.35; min-height: 2.7em;
}
.pinmeta { display: flex; align-items: baseline; gap: 9px; padding: 7px 13px 11px; }
.pinmeta b { font-size: 1.02rem; }
.starchalk { color: var(--cch-star); font-size: .85rem; letter-spacing: .05em; white-space: nowrap; }
.starchalk small { color: var(--cch-stone); font-size: .82rem; margin-left: 4px; }
.pincase > .tackbtn { margin: 0 13px 13px; border-radius: 9px; padding: 9px 12px; font-size: .88rem; }

/* ---- promo duet ---- */
.duetboard { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duetcard { border-radius: 18px; padding: 34px 32px; background: var(--cch-craft); }
.duetcard h3 { font-size: 1.45rem; }
.duetcard p { color: var(--cch-stone); max-width: 30em; }
.duetcard.slateband { padding-block: 34px; }

/* ---- season pills ---- */
.seasonline { display: flex; flex-wrap: wrap; gap: 10px; }
.seasonpill {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--cch-text); font-size: .93rem; font-weight: 700; color: var(--cch-ink);
  background: var(--cch-paper); border: 2px solid var(--cch-rule); border-radius: 999px;
  padding: 7px 16px;
}
.seasonpill:hover { border-color: var(--cch-cork); }
.seasonpill.picked { background: var(--cch-board); border-color: var(--cch-board); color: #fff; }

/* ---- reviews ---- */
.hallnotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hallquote {
  border: 2px solid var(--cch-rule); border-radius: 14px; background: var(--cch-craft);
  padding: 20px; font-size: .95rem;
}
.hallquote p { margin: 0 0 12px; }
.hallsigner { font-weight: 700; font-size: .88rem; color: var(--cch-stone); }
.hallsigner .starchalk { display: block; margin-bottom: 4px; }

/* ---- guide teasers ---- */
/* Ширина ячейки задана так, чтобы на широком экране вставало ТРИ колонки: гайдов пять, и при
   четырёх колонках пятая карточка стоит одна в ряду с дырой на три места. */
.ideaspread { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ideaspread a {
  text-decoration: none; border: 2px solid var(--cch-rule); border-radius: 14px;
  padding: 20px; background: var(--cch-paper); display: block;
}
.ideaspread a:hover { border-color: var(--cch-cork); }
.ideaspread h3 { margin-bottom: .4em; }
.ideaspread p { font-size: .9rem; color: var(--cch-stone); margin: 0; }

/* ---- closing band + note ---- */
.assemblycall { text-align: center; }
.assemblycall .boardtitle, .assemblycall .boarddeck { margin-inline: auto; }
.assemblycall .pinact { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Заметка в две колонки: заголовок слева, текст справа. Одной колонкой в 720px она оставляла
   полэкрана пустыми и читалась как недогрузившийся блок, а не как замыкающий абзац. */
.chalknote { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 18px 48px; }
.chalknote h2 { grid-column: 1; grid-row: 1 / -1; margin: 0; }
.chalknote p { grid-column: 2; color: var(--cch-stone); }
@media (max-width: 860px) {
  .chalknote { grid-template-columns: 1fr; }
  .chalknote h2, .chalknote p { grid-column: 1; grid-row: auto; }
}

/* ---- PDP ---- */
.papertrail { font-size: .85rem; color: var(--cch-stone); margin-bottom: 22px; }
.papertrail a { color: inherit; }
.setmain { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.setshot {
  position: sticky; top: 90px;
  border: 2px solid var(--cch-rule); border-radius: 16px; background: #fff;
}
.setshot .pinsnap { aspect-ratio: 1 / 1; }
.setside h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.setword { color: var(--cch-ink); }
.setword p { max-width: 38em; }
.setspecs { margin: 0 0 1.2em; padding: 0; list-style: none; }
.setspecs li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--cch-rule); }
.setspecs li::before { content: '\2606'; position: absolute; left: 2px; color: var(--cch-cork); }
.pricetray {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 2px solid var(--cch-rule); border-radius: 14px; background: var(--cch-craft);
  padding: 16px 18px; margin: 18px 0 22px;
}
.pricetray b { font-size: 1.6rem; font-family: var(--cch-display); }
.pricetray img { width: auto; }

/* ---- guides ---- */
.ideapage { max-width: 760px; }
.ideahead p { font-size: 1.05rem; color: var(--cch-stone); }
.ideasec h2 { margin-top: 1.6em; }
.ideafacts {
  border: 2px solid var(--cch-rule); border-radius: 14px; background: var(--cch-craft);
  padding: 20px 24px; margin: 26px 0;
}
.ideafacts ul { margin: 0; padding-left: 20px; }
.ideafacts li { margin: 6px 0; }
.ideaclose { border-top: 2px solid var(--cch-rule); padding-top: 20px; margin-top: 30px; }

/* ---- planner ---- */
.planrung { margin-bottom: 26px; }
.planrung h2 { font-size: 1.25rem; margin-bottom: .6em; }
.planchoice { display: flex; flex-wrap: wrap; gap: 10px; }
.plannerout { margin-top: 34px; }
.plannerout > p { font-weight: 700; }

/* ---- footer ---- */
.lockerfoot { padding-block: 46px 30px; margin-top: 70px; }
.cubbycols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }
.cubbycols h3 { font-size: .98rem; }
.cubbycols a { display: block; text-decoration: none; padding: 4px 0; font-size: .92rem; }
.cubbycols a:hover { text-decoration: underline; }
.cubbysmall {
  border-top: 2px solid var(--cch-rule); margin-top: 30px; padding-top: 18px;
  font-size: .85rem; color: var(--cch-stone);
}
.cubbynote img { max-width: min(380px, 100%); height: auto; margin-top: 12px; }
/* Тег address взят за смысл, а вид возвращаем руками: браузер набирает его курсивом, и
   почтовая строка в подвале выглядит цитатой. */
.lockerfoot address { font-style: normal; font-size: .92rem; color: var(--cch-stone); }
.lockerfoot address span, .lockerfoot address small { display: block; margin-top: 6px; }
.lockerfoot address small { font-size: .84rem; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .welcomesplit, .setmain, .duetboard { grid-template-columns: 1fr; }
  .setshot { position: static; }
  .gluerow { grid-template-columns: 1fr 1fr; }
  .toppins, .freshpins, .goeswith { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .hallnotes { grid-template-columns: 1fr 1fr; }
  .cubbycols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 660px) {
  body { font-size: 15.5px; }
  .paperband, .craftband { padding-block: 40px; }
  #foldchalk { display: inline-block; margin-left: 0; }
  /* ⚠ Кнопку планировщика на телефоне НЕ прятать: в выпадающем меню её нет (там только полки
     и хаб гайдов), и, спрятанная, она оставляла подборщик доступным лишь из подвала — то есть
     главный интерактив сайта на телефоне надо было домотать до конца страницы. Ужимаем и
     оставляем в шапке рядом с «Menu». */
  .headcta { margin-left: auto; padding: 8px 12px; font-size: .88rem; }
  .chalkmenu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cch-paper); border-bottom: 2px solid var(--cch-rule);
    padding: 10px 22px 16px; flex-direction: column; gap: 2px;
  }
  .chalkmenu.chalkout { display: flex; }
  .boardhead .deskleaf { position: relative; gap: 10px; }
  .toppins, .freshpins, .goeswith, .welcomerail { grid-template-columns: 1fr 1fr; }
  .hallnotes { grid-template-columns: 1fr; }
  .gluerow { grid-template-columns: 1fr; }
}