/* Compass Coffee — общие стили. Токены дизайн-системы + правила сайта. Без сборки. */

/* ---------- Токены ---------- */
:root{
  --color-yellow:#F2D50E; --color-emerald:#009E6E; --color-teal:#00A9B5; --color-coral:#E8543F; --color-magenta:#D6246E;
  --color-black:#0E0E0E; --color-ink:#1A1B1A; --color-white:#FFFFFF; --color-gray:#87897F; --color-gray-200:#DFDBCE;
  --surface-page:var(--color-white); --surface-roastery:var(--color-black); --surface-card:var(--color-white);
  --text-primary:var(--color-ink); --text-inverse:var(--color-white); --text-muted:var(--color-gray);
  --border-default:var(--color-gray-200); --link:var(--color-ink); --link-hover:var(--color-magenta);
  --product-brazil:var(--color-yellow); --product-colombia:var(--color-teal); --product-ethiopia:var(--color-coral);
  --product-house:var(--color-emerald); --product-limited:var(--color-magenta);
  /* у Sora и Public Sans нет кириллицы — Golos Text подхватывает её */
  --font-display:'Sora','Golos Text',sans-serif;
  --font-body:'Public Sans','Golos Text',sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-sm:4px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(14,14,14,.06),0 8px 24px rgba(14,14,14,.08);
  --ease-standard:cubic-bezier(.4,0,.2,1); --duration-fast:120ms; --duration-standard:200ms;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.75rem; --text-4xl:3.75rem; --text-5xl:5rem;
  --leading-tight:1.05; --leading-snug:1.25; --leading-normal:1.55;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.05em; --tracking-widest:0.12em;
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F4F3F0;font-family:var(--font-body);color:var(--text-primary)}
a{color:var(--color-ink);text-decoration:none}
a:hover{color:var(--color-magenta)}
section[id]{scroll-margin-top:72px}
img{max-width:100%}
input::placeholder,textarea::placeholder{color:#9A9A9A}
input:focus,select:focus,textarea:focus{border-color:var(--color-black)!important}
:focus-visible{outline:2px solid var(--color-magenta);outline-offset:2px}
.wrap{max-width:1440px;margin:0 auto;overflow-x:clip;background:var(--color-white);font-family:var(--font-body);color:var(--color-ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--color-yellow);color:var(--color-black);padding:8px 16px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600}
.skip:focus{left:8px}
[data-m~=hdr] nav a.is-active{color:#fff!important;box-shadow:0 2px 0 var(--color-yellow)}
[data-m~=hdr] nav a:hover{color:#fff!important}

/* ---------- Компоненты дизайн-системы: Button, Tag ---------- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:600;line-height:normal;text-align:center;text-decoration:none;cursor:pointer;
  border:2px solid var(--_c);border-radius:var(--radius-pill);background:var(--_c);color:var(--_fg);
  transition:transform var(--duration-fast) var(--ease-standard);-webkit-appearance:none;appearance:none}
.btn:hover{color:var(--_fg)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn--sm{padding:8px 18px;font-size:var(--text-sm)}
.btn--md{padding:12px 26px;font-size:var(--text-base)}
.btn--lg{padding:16px 34px;font-size:var(--text-lg)}
.btn--black{--_c:var(--color-black);--_fg:var(--color-white)}
.btn--yellow{--_c:var(--color-yellow);--_fg:var(--color-black)}
.btn--emerald{--_c:var(--color-emerald);--_fg:var(--color-white)}
.btn--teal{--_c:var(--color-teal);--_fg:var(--color-white)}
.btn--coral{--_c:var(--color-coral);--_fg:var(--color-white)}
.btn--magenta{--_c:var(--color-magenta);--_fg:var(--color-white)}
.btn--outline{background:transparent;color:var(--_c)}
.btn--outline:hover{color:var(--_c)}

.tag{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:var(--text-xs);letter-spacing:var(--tracking-wide);
  padding:5px 14px;border-radius:var(--radius-pill);border:1.5px solid var(--_c);color:var(--_c);background:transparent}
.tag--black{--_c:var(--color-black)} .tag--yellow{--_c:var(--color-yellow)} .tag--emerald{--_c:var(--color-emerald)}
.tag--teal{--_c:var(--color-teal)} .tag--coral{--_c:var(--color-coral)} .tag--magenta{--_c:var(--color-magenta)}
.tag--solid{background:var(--_c);color:var(--color-white)}
.tag--yellow.tag--solid{color:var(--color-black)}

/* ---------- Трек «Система защиты вкуса» ---------- */
.node{display:flex;flex-direction:column;gap:16px;cursor:pointer;outline-offset:4px}
.node-line{position:absolute;left:0;top:5px;width:calc(100% + 20px);height:1px;background:rgba(255,255,255,.2)}
.node-dot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22);transition:background 160ms var(--ease-standard)}
.node-card{flex:1;padding:16px 16px 20px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-md);background:transparent;
  transition:background 160ms var(--ease-standard),border-color 160ms var(--ease-standard)}
.node-num{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;transition:color 160ms var(--ease-standard)}
.node:hover .node-dot{background:rgba(255,255,255,.55)}
.node:hover .node-card{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.07)}
.node.is-open .node-dot{background:var(--color-yellow)}
.node.is-open .node-card{border-color:var(--color-yellow);background:rgba(242,213,14,.10)}
.node.is-open .node-num{color:var(--color-yellow)}

/* ---------- Формы ---------- */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:16px;font-size:15px;line-height:1.5;display:none;padding:14px 16px;border-radius:var(--radius-md)}
.form-status.is-ok{display:block;background:rgba(0,158,110,.10);border:1px solid var(--color-emerald);color:var(--color-ink)}
.form-status.is-err{display:block;background:rgba(232,84,63,.08);border:1px solid var(--color-coral);color:var(--color-ink)}
.form-status.is-busy{display:block;color:var(--color-gray);padding-left:0;padding-right:0}

/* ---------- Адаптив (атрибуты data-m из макета) ---------- */
@media (max-width:1100px){
  [data-m~=sec]{padding-left:40px!important;padding-right:40px!important}
  [data-m~=hdr]{padding-left:24px!important;padding-right:24px!important}
  [data-m~=hide1100]{display:none!important}
  [data-m~=stack]{grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
  [data-m~=stack]>*{grid-column:auto!important}
  [data-m~=c3]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-m~=g2]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-m~=g2]>*{border-bottom:1px solid rgba(255,255,255,.14)}
  [data-m~=track]{grid-template-columns:repeat(7,170px)!important;overflow-x:auto!important;padding-bottom:8px}
  [data-m~=unstick]{position:static!important}
}
@media (max-width:640px){
  [data-m~=sec]{padding-left:20px!important;padding-right:20px!important}
  section[data-m~=sec][style*="112px"]{padding-top:64px!important}
  section[data-m~=sec][style*="margin-top: 112px"],section[data-m~=sec][style*="margin-top:112px"]{margin-top:64px!important;padding-top:56px!important;padding-bottom:56px!important}
  section.first[data-m~=sec]{padding-top:40px!important}
  [data-m~=hdr]{padding:10px 14px!important}
  [data-m~=hide640]{display:none!important}
  [data-m~=c3]{grid-template-columns:minmax(0,1fr)!important}
  [data-m~=t3]{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
  [data-m~=t3h]{display:none!important}
  [data-m~=t3s]{gap:10px!important;font-size:13px!important}
  [data-m~=t3s]>div:first-child{font-size:13px!important}
  [data-m~=prow]{grid-template-columns:minmax(0,1fr) 64px 84px!important;gap:10px!important}
  [data-m~=himg]{height:320px!important}
  [data-m~=bimg]{height:200px!important}
  [data-m~=pad]{padding:24px 20px!important}
  [data-m~=g2]>div{padding:20px!important}
  [data-m~=wrap] h1{font-size:38px!important}
  [data-m~=wrap] h2{font-size:30px!important}
  [data-m~=wrap] h3{font-size:26px!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.node-dot,.node-card{transition:none}}