/* Serikov Coffee 2026 — шапка и подвал.
   Выборка из прототипа: переменные масштаба, шрифты, контейнер .mac,
   шапка .site-head/.hd-* и подвал .site-foot/.ft-*.
   Общих селекторов по тегам, кроме html/body, здесь нет — Bootstrap сайта не задевается. */
@font-face{font-family:'Gotham Pro';src:url('fonts/gothampro.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Pro';src:url('fonts/gothampro_medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Pro';src:url('fonts/gothampro_bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Pro';src:url('fonts/gothampro_black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
:root{
  --green-deep:#205b28; --green-deep-2:#22612b; --green:#009144; --green-bright:#00904c;
  --green-brand:#00723b; --green-pale:#d9f2dd;
  --teal:#00a8bc; --teal-2:#019db0; --orange:#f47920; --orange-2:#f36d0c;
  --yellow:#f7ab01; --yellow-2:#fdb913; --crimson:#9c1c3c; --crimson-2:#ab1a40; --bordo:#861e22;
  --ink:#1a1a1a; --ink-soft:#4d4d4d; --line:#e4e4e0; --bg:#ffffff; --bg-soft:#f4f6f3;
  --r-sm:8px; --r:12px; --r-md:20px; --r-lg:36px; --r-xl:52px;
  --shadow:0 4px 18px rgba(20,30,20,.07); --shadow-lift:0 12px 34px rgba(20,30,20,.13);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Gotham Pro','Montserrat',system-ui,-apple-system,sans-serif;
  --font-ui:'Geologica','Montserrat',system-ui,sans-serif;
  --font-display:'Gotham Pro','Oswald',sans-serif;
  --wrap:1280px;
  /* Единый масштаб макета. Крупнее/мельче — меняется здесь одним числом. */
  --u: clamp(.70px, .0556vw, .8px);
  /* Ширина контентной колонки. Хотите уже поля по бокам — увеличьте число.
     1640 при масштабе .8 даёт колонку 1312px. */
  --wrap-w: calc(1640 * var(--u));
}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
@keyframes mmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* --- совместимость с Bootstrap рабочего сайта --- */
.site-head a,.site-foot a,.hd-drop a,.fab{text-decoration:none}
.site-head a:hover,.site-foot a:hover,.hd-drop a:hover{text-decoration:none}
.hd-cat{border:0;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none}
.ft-col{padding-left:0;margin-bottom:0}
.site-head *,.site-foot *,.hd-drop *{box-sizing:border-box}
.site-foot p{margin:0}
/* --- шапка --- */
#site-header{position:sticky;top:0;z-index:100}
.site-head{background:transparent;padding:calc(14 * var(--u)) 0 calc(12 * var(--u));will-change:transform;transition:transform .42s var(--ease),box-shadow .3s ease}
.site-head.is-hidden{transform:translateY(-102%)}
.site-head.is-stuck .head-inner{box-shadow:0 10px 30px rgba(20,40,20,.14)}
.site-head.is-stuck .head-inner::before{background:rgba(255,255,255,.78)}
@media(prefers-reduced-motion:reduce){.site-head{transition:none}}
.head-plate{max-width:var(--wrap-w);margin:0 auto;padding:0 calc(24 * var(--u))}
.head-inner{position:relative;height:calc(64 * var(--u));display:flex;align-items:center;gap:calc(16 * var(--u));
  padding:0 calc(22 * var(--u)) 0 calc(20 * var(--u));border-radius:calc(22 * var(--u));
  border:1px solid rgba(255,255,255,.7);box-shadow:0 6px 26px rgba(20,40,20,.10)}
/* Матовое стекло — отдельным слоем под плашкой, а не на ней самой.
   Если backdrop-filter стоит на родителе выпадающего меню, Chrome
   рисует это меню полупрозрачным и сквозь него видно баннер. */
.head-inner::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.head-inner::before{background:#fff}}
@media(max-width:1100px){.head-plate{padding:0 16px}.head-inner{height:auto;padding:10px 14px;flex-wrap:wrap}}
.hd-logo{flex-shrink:0;display:block;line-height:0;margin-right:calc(16 * var(--u))}
.hd-logo img{width:calc(144 * var(--u));height:auto;max-height:calc(78 * var(--u));object-fit:contain}
@media(max-width:1100px){.hd-logo img{width:112px}}
.hd-cat{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));
  width:calc(160 * var(--u));height:calc(50 * var(--u));background:url(img/hd-shape-btn.svg?v=2) no-repeat center/100% 100%;
  color:#f5f5f5;font-family:var(--font);font-weight:500;font-size:calc(18 * var(--u));letter-spacing:.01em;
  white-space:nowrap;transition:transform .18s var(--ease),filter .18s ease}
.hd-cat:hover{transform:translateY(-1px);filter:brightness(1.08)}
.hd-menu{position:static}
.hd-cat.is-open{filter:brightness(1.12)}
.hd-drop{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:120;
  background:#fff;border:1px solid var(--line);border-radius:calc(24 * var(--u));
  box-shadow:0 22px 54px rgba(20,40,20,.20);overflow:hidden;animation:mmIn .28s cubic-bezier(.22,1,.36,1)}
.hd-drop[hidden]{display:none}
.hd-drop-in{display:grid;gap:0}
@media(min-width:900px){.hd-drop-in{grid-template-columns:minmax(0,1fr) calc(286 * var(--u))}}
.hd-cat-cols{display:grid;gap:calc(26 * var(--u));padding:calc(26 * var(--u)) calc(30 * var(--u))}
@media(min-width:620px){.hd-cat-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hd-cat-col{display:flex;flex-direction:column;gap:calc(9 * var(--u))}
.hd-cat-h{font-family:var(--font);font-weight:900;font-size:calc(19 * var(--u));text-transform:uppercase;
  color:var(--green-deep-2);letter-spacing:-.01em;margin-bottom:calc(4 * var(--u));transition:color .15s}
.hd-cat-h:hover{color:var(--green-brand)}
.hd-cat-col a:not(.hd-cat-h){font-weight:500;font-size:calc(16 * var(--u));line-height:1.25;color:var(--ink);transition:color .15s,transform .15s}
.hd-cat-col a:not(.hd-cat-h):hover{color:var(--green-brand);transform:translateX(3px)}
.hd-drop-side{display:flex;flex-direction:column;gap:calc(9 * var(--u));
  padding:calc(26 * var(--u)) calc(30 * var(--u));background:var(--bg-soft);border-left:1px solid var(--line)}
@media(max-width:899px){.hd-drop-side{border-left:0;border-top:1px solid var(--line)}}
.hd-drop-cap{font-family:var(--font);font-weight:900;font-size:calc(13 * var(--u));text-transform:uppercase;letter-spacing:.05em;color:var(--green-brand)}
.hd-drop-cap.gap{margin-top:calc(14 * var(--u))}
.hd-drop-side a{font-weight:500;font-size:calc(15 * var(--u));line-height:1.25;color:var(--ink-soft);transition:color .15s}
.hd-drop-side a:hover{color:var(--green-brand)}
.hd-drop-tel{margin-top:auto;padding-top:calc(16 * var(--u));font-family:var(--font);font-weight:700;font-size:calc(19 * var(--u));color:var(--green-deep-2)!important;white-space:nowrap}
.hd-drop a.is-here{color:var(--green-brand);font-weight:700}
@media(max-width:620px){.hd-drop{left:calc(-16 * var(--u));right:calc(-16 * var(--u))}.hd-cat-cols,.hd-drop-side{padding:calc(20 * var(--u)) calc(22 * var(--u))}}
.hd-cat-ico{width:calc(18 * var(--u));height:calc(13 * var(--u));flex-shrink:0;margin-top:1px}
.hd-search{flex:1;min-width:0;max-width:calc(860 * var(--u));display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(50 * var(--u));
  padding:0 calc(24 * var(--u));background:url(img/hd-shape-search.svg?v=2) no-repeat center/100% 100%}
.hd-search input{flex:1;border:none;outline:none;background:none;font-family:var(--font);font-weight:500;font-size:calc(16 * var(--u));color:var(--ink);min-width:0;box-shadow:none}
.hd-search input::placeholder{color:var(--green-brand);opacity:1}
.hd-search-ico{width:calc(18 * var(--u));height:calc(18 * var(--u));flex-shrink:0}
/* margin-left:auto прижимает иконки к правому краю плашки:
   без него они липли к полю поиска, а справа оставалась пустота. */
.hd-right{display:flex;align-items:flex-start;gap:calc(24 * var(--u));flex-shrink:0;margin-left:auto}
/* Иконки приходят из компонента корзины, он оборачивает их в свои
   .bx-basket и #header-basket-sc-containter — раскладку задаём им. */
.hd-right .bx-basket{display:flex}
.hd-right-in{display:flex;align-items:flex-start;gap:calc(24 * var(--u))}
.hd-ico:not(.cart) .cnt{color:var(--green-brand)}
.hd-ico{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--green-deep-2);font-family:var(--font);font-weight:500;font-size:calc(16 * var(--u));line-height:1;white-space:nowrap;transition:opacity .15s}
.hd-ico:hover{opacity:.72}
.hd-ico.cart{color:#8b2628}
.hd-ico .cnt{position:absolute;top:-7px;right:-4px;font-family:var(--font);font-weight:900;font-size:13px;color:#8b2628}
@media(max-width:1100px){.hd-right{gap:16px;order:2;margin-left:auto;align-items:center}.hd-ico span:not(.cnt){display:none}
.hd-search{order:3;flex-basis:100%;max-width:none;height:48px;padding:0 18px}.hd-search input{font-size:16px}.hd-cat{width:132px;height:46px;font-size:16px;order:1}}
/* --- подвал --- */
/* flex:none обязателен: тема делает <body> флекс-контейнером, и подвал
   как флекс-элемент сжимается до нулевой высоты. */
/* Высота была жёсткой, а строка с реквизитами висела абсолютом на 276u
   от верха. Стоило ссылке в колонке перенестись на вторую строку —
   колонка доезжала до реквизитов и налезала на них. Теперь подвал растёт
   по содержимому, а реквизиты идут обычным потоком. */
.site-foot{flex:none;position:relative;padding:0 0 calc(26 * var(--u));margin-top:64px;
  min-height:calc(319 * var(--u));color:#fff;font-family:var(--font);overflow:hidden}
/* Зелёная заливка с рваным краем раньше была фиксированной высоты и
   висела у нижней кромки. Подвал теперь растёт по содержимому, поэтому
   тянем заливку от той же линии до самого низа — иначе верхние ссылки
   оказывались на белом фоне и пропадали. */
.site-foot .ft-shape{position:absolute;left:0;right:0;top:calc(43 * var(--u));bottom:0;height:auto;background:url(img/foot-shape.svg) no-repeat center bottom/100% 100%;pointer-events:none}
.site-foot .ft-wave{position:absolute;inset:0;z-index:1;background:url(img/foot-wave.svg) no-repeat center/100% 100%;pointer-events:none}
.ft-in{position:relative;z-index:2;max-width:var(--wrap-w);margin:0 auto;padding:calc(78 * var(--u)) calc(82 * var(--u)) 0;
  display:grid;grid-template-columns:calc(291 * var(--u)) calc(202 * var(--u)) calc(215 * var(--u)) calc(322 * var(--u)) 1fr;align-items:start}
.ft-logo{display:block;line-height:0}
.ft-logo img{width:calc(223 * var(--u));height:auto}
.ft-col{list-style:none;margin-top:18px}
.ft-col li{list-style:none;line-height:0}
.ft-col a{display:block;font-weight:700;font-size:14px;line-height:17px;color:#fff;transition:opacity .15s}
.ft-col a:hover{opacity:.72;color:#fff}
.ft-col.c1 a{margin-bottom:7px}
.ft-col.c2 a{margin-bottom:11px}
.ft-col.c3{margin-top:18px}
.ft-col.c3 p{font-weight:700;font-size:14px;line-height:17px;margin:0 0 10px}
.ft-col.c3 a{display:inline;font-weight:700;line-height:17px}
.ft-col.c3 .cap{font-weight:500;text-transform:uppercase;letter-spacing:.01em}
.ft-col.c3 .gap{margin-top:35px}
.ft-col.c3 p:nth-child(4){margin-bottom:5px}
.ft-tel{margin-top:18px}
.ft-tel a{display:block;font-weight:500;font-size:calc(22 * var(--u));line-height:22px;margin-bottom:24px;color:#fff;white-space:nowrap;transition:opacity .15s}
.ft-tel a:hover{opacity:.8;color:#fff}
.ft-legal{position:relative;z-index:2;max-width:var(--wrap-w);margin:0 auto;padding:calc(34 * var(--u)) calc(82 * var(--u)) 0;
  display:flex;flex-wrap:wrap;gap:4px 46px;font-weight:700;font-size:10px;line-height:1.4;color:#fff}
@media(max-width:1200px){.site-foot{height:auto;padding-bottom:34px}
.site-foot::before{content:'';position:absolute;left:0;right:0;top:0;height:34px;z-index:0;background:url(img/foot-shape.svg) no-repeat center top/1440px auto}
.site-foot .ft-shape{top:26px;bottom:0;height:auto;background:var(--green-deep-2)}
.site-foot .ft-wave{inset:26px 0 0;background:url(img/foot-wave.svg) repeat center top/1440px auto}
.ft-in{grid-template-columns:1fr 1fr 1fr;gap:26px;padding:56px 28px 0}
.ft-logo{grid-column:1/-1}.ft-logo img{width:190px}
.ft-col,.ft-col.c3,.ft-tel{margin-top:0}
.ft-legal{position:static;padding:26px 28px 0;margin-top:0}}
@media(max-width:700px){.ft-in{grid-template-columns:1fr 1fr;padding:46px 18px 0;gap:22px}
.ft-logo img{width:160px}.ft-tel{grid-column:1/-1}.ft-tel a{font-size:20px;margin-bottom:14px}
.ft-legal{padding:22px 18px 0;font-size:11px;gap:4px 20px}}
.fab{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:9px;background:#25d366;color:#fff;font-weight:800;font-size:14px;padding:14px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .2s}
.fab:hover{transform:scale(1.04);color:#fff}
@media(max-width:560px){.fab span{display:none}.fab{padding:15px}}
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.mac{max-width:var(--wrap-w);margin:0 auto;padding:0 calc(24 * var(--u))}
@media(max-width:1100px){.mac{padding:0 16px}}