/* ==========================================================================
   Українські народні пісні про кохання — site stylesheet
   1. Fonts · 2. Tokens · 3. Base · 4. Header · 5. Book hero · 6. Intro
   (chapters + shop styles live in story.css / shop.css)
   ========================================================================== */

/* 1. Fonts — self-hosted, Cyrillic + Latin subsets, variable weight */
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/literata-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/literata-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/literata-cyrillic-wght-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/literata-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. Tokens — measured from the physical book */
:root{
  --cloth:#C42C40;      /* binding cloth */
  --cloth-deep:#A8212F; /* cloth in shadow, hover, links on paper */
  --ink:#1C1B19;        /* engraving ink */
  --ink-soft:#4A4640;
  --ink-mute:#5E5952;
  --silence:#141210;    /* intro, dark chapters */
  --paper:#F3F1EC;      /* text block paper */
  --table:#E6E1D7;      /* the surface the book rests on */
  --rule:#CFC9BE;
  --rose:#E2707D;       /* cloth red on dark: accessible accent */
  --sans:"Jost",system-ui,sans-serif;
  --serif:"Literata",Georgia,serif;
  --hdr:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper) url(../img/paper-tile.jpg);color:var(--ink);font:400 18px/1.65 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--cloth-deep)}
a:hover{color:#7E1824}
:focus-visible{outline:2px solid var(--cloth);outline-offset:3px}
.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px;font:600 15px/1 var(--sans)}
.skip-link:focus{top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;font:600 15px/1 var(--sans);letter-spacing:.04em;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform .35s var(--ease),background-color .25s ease,color .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn--cloth{background:var(--cloth);color:#fff}.btn--cloth:hover{background:var(--cloth-deep);color:#fff}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}.btn--line:hover{color:var(--ink);background:rgba(28,27,25,.06)}
.btn--paper{background:var(--paper);color:var(--ink)}.btn--paper:hover{background:#fff;color:var(--ink)}
.btn--ghost-light{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}.btn--ghost-light:hover{color:#fff;background:rgba(255,255,255,.06)}
.lbl{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}

/* 4. Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr);transition:opacity .9s ease,background-color .4s ease,transform .5s var(--ease)}
.site-header__in{height:100%;max-width:1520px;margin:0 auto;padding:0 clamp(16px,3vw,40px);display:flex;align-items:center;gap:28px}
.site-header.is-solid{background:rgba(243,241,236,.92);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);box-shadow:0 1px 0 rgba(28,27,25,.08)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:700 14px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.brand__mark{width:28px;height:28px;border-radius:50%;background:var(--cloth) url(../img/cloth-tile.jpg) center/120px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chapters{display:flex;gap:4px;flex:1;justify-content:center;margin:0;padding:0;list-style:none}
.chapters a{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;color:var(--ink);text-decoration:none;font:500 14px/1 var(--sans);letter-spacing:.02em}
.chapters a span{font-weight:600;color:var(--ink-mute);font-size:11px;letter-spacing:.1em}
.chapters a:hover,.chapters a[aria-current="true"]{color:var(--cloth-deep)}
.chapters a[aria-current="true"] span{color:var(--cloth)}
.chapters a{position:relative}
.chapters a::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.chapters a:hover::after,.chapters a[aria-current="true"]::after{transform:scaleX(1);transform-origin:0 50%}
@media (prefers-reduced-motion:reduce){.chapters a::after{transition:none}}
.header-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.lang{display:flex;align-items:center;gap:2px;font:600 13px/1 var(--sans);letter-spacing:.1em}
.lang a,.lang span{display:flex;align-items:center;min-height:44px;padding:0 6px;color:var(--ink-mute);text-decoration:none}
.lang [aria-current]{color:var(--ink)}
.cart-link{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 10px;color:var(--ink);text-decoration:none;font:500 14px/1 var(--sans)}
.cart-count{min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--cloth);color:#fff;font:600 11px/20px var(--sans);text-align:center}
.cart-count[data-count="0"]{background:var(--rule);color:var(--ink)}
.progress{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:transparent}
.progress__bar{height:100%;width:100%;background:var(--cloth);transform-origin:0 50%;transform:scaleX(0)}
.menu-btn{display:none}
@media (max-width:1080px){
  .chapters{display:none}
  .menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;padding:0;color:var(--ink);cursor:pointer}
  .brand__name{font-size:12px}
}

/* ==========================================================================
   5. THE BOOK — rendered flat (final state) by default; book.js animates it
   Geometry from the real book: page 0.736 : 1, boards overhang ("squares")
   ========================================================================== */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  background:var(--table) radial-gradient(120% 90% at 50% 48%,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 55%,rgba(60,40,30,.10) 100%);
  --ph:min(calc(100svh - var(--hdr) - 64px), calc((100vw - 112px) / 2 / .736 / 1.035));
  --pw:calc(var(--ph) * .736);
  --sq:calc(var(--ph) * .016);
  --t:calc(var(--pw) * .085);
  --bw:calc(var(--pw) + var(--sq));
  --bh:calc(var(--ph) + var(--sq) * 2);
}
.hero__stage{z-index:1;position:absolute;left:0;right:0;top:var(--hdr);bottom:0;display:flex;align-items:center;justify-content:center;perspective:2600px;perspective-origin:50% 42%}
.cam{position:relative;width:calc(var(--bw) * 2);height:var(--bh);transform-style:preserve-3d;flex:none}
.book{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--t) / -2))}
.b{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b-shadow{position:absolute;top:-3%;height:108%;transform:translateZ(calc(var(--t) / -2 - 2px));pointer-events:none}
.b-shadow--r{left:46%;width:58%;background:radial-gradient(ellipse 50% 50% at 46% 52%,rgba(40,22,16,.40) 55%,rgba(40,22,16,0) 100%)}
.b-shadow--l{left:-4%;width:58%;background:radial-gradient(ellipse 50% 50% at 54% 52%,rgba(40,22,16,.40) 55%,rgba(40,22,16,0) 100%)}
.b-back{left:var(--bw);top:0;width:var(--bw);height:var(--bh);background:var(--cloth) url(../img/cloth-tile.jpg) 0 0/220px;transform:translateZ(calc(var(--t) / -2));border-radius:1px 3px 3px 1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.b-spine{left:calc(var(--bw) - var(--t) / 2);top:0;width:var(--t);height:var(--bh);background:var(--cloth-deep) url(../img/cloth-tile.jpg) 0 0/220px;transform:rotateY(-90deg);box-shadow:inset 0 0 calc(var(--t) * .5) rgba(0,0,0,.35)}
.b-edge{background:#EDE9E0}
.b-edge--fore{left:calc(var(--bw) + var(--pw) - var(--t) * .43);top:var(--sq);width:calc(var(--t) * .86);height:var(--ph);transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#F4F1EA 0 1px,#DCD6CA 1px 2px)}
.b-edge--top{left:var(--bw);top:calc(var(--sq) - var(--t) * .43);width:var(--pw);height:calc(var(--t) * .86);transform:rotateX(90deg);background:repeating-linear-gradient(0deg,#F4F1EA 0 1px,#DCD6CA 1px 2px)}
.b-edge--bot{left:var(--bw);top:calc(var(--sq) + var(--ph) - var(--t) * .43);width:var(--pw);height:calc(var(--t) * .86);transform:rotateX(-90deg);background:#D8D2C6}
.b-page{top:var(--sq);width:var(--pw);height:var(--ph);background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px}
.b-page--r{left:var(--bw);transform:translateZ(calc(var(--t) * .43))}
.b-page--l{left:calc(var(--bw) - var(--pw));transform:translateZ(calc(var(--t) / 2 + 1.5px))}
.b-page--r::before,.b-page--l::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.b-page--r::before{background:linear-gradient(90deg,rgba(40,30,20,.22) 0,rgba(40,30,20,.07) 3.5%,rgba(40,30,20,0) 9%)}
.b-page--l::before{background:linear-gradient(270deg,rgba(40,30,20,.24) 0,rgba(40,30,20,.08) 3.5%,rgba(40,30,20,0) 9%)}
.b-landed{left:calc(var(--bw) - var(--pw));transform:translateZ(calc(var(--t) / 2 + .6px))}
.b-landed::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(40,30,20,.24) 0,rgba(40,30,20,.08) 3.5%,rgba(40,30,20,0) 9%)}
.b-page__shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(30,20,12,.55),rgba(30,20,12,.15) 60%,rgba(30,20,12,0));opacity:0}
.b-cover{position:absolute;left:var(--bw);top:0;width:var(--bw);height:var(--bh);transform-origin:0 50%;transform-style:preserve-3d;transform:translateZ(calc(var(--t) / 2)) rotateY(-180deg)}
.tex{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.b-cover__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:1px 3px 3px 1px}
.b-cover__front{background:var(--cloth) url(../img/cloth-cover.jpg) center/100% 100%}
.b-cover__in{transform:rotateY(180deg);background:var(--cloth) url(../img/cloth-tile.jpg) 0 0/220px;border-radius:3px 1px 1px 3px}
.b-cover__in::after{content:"";position:absolute;left:calc(var(--sq) * 1.6);right:0;top:calc(var(--sq) * 1.6);bottom:calc(var(--sq) * 1.6);background:#EFECE5 url(../img/paper-tile.jpg) 0 0/300px}
.b-cover__light{position:absolute;top:0;bottom:0;left:-60%;width:60%;pointer-events:none;background:linear-gradient(100deg,rgba(255,236,226,0) 10%,rgba(255,236,226,.26) 50%,rgba(255,236,226,0) 90%);opacity:0}
.b-cover__shade{position:absolute;inset:0;background:#120806;opacity:0;pointer-events:none}

/* page content — sized in page units (cqw) so the 3D page and the flat page match exactly */
.pg{position:absolute;inset:0;container-type:size;color:var(--ink)}
.pg__woodcut{position:absolute;left:14.7%;top:10.5%;width:70.6%;height:auto}
.pg__title{position:absolute;left:0;right:0;top:59.6%;margin:0;text-align:center;font:700 3.3cqw/1.2 var(--sans);letter-spacing:.015em;text-transform:uppercase}
.pg__hearts{position:absolute;left:39.5%;top:75.4%;width:23%}
.pg__label{position:absolute;left:0;right:0;top:8.2%;margin:0;text-align:center;font:700 2.95cqw/1.24 var(--sans);text-transform:uppercase;letter-spacing:.01em}
.pg__num{position:absolute;left:9.5%;bottom:4.6%;font:600 2.6cqw/1 var(--sans)}
.hero-copy{position:absolute;left:10%;right:10%;top:31%;text-align:center}
.hero-copy__kicker{display:block;font:600 max(11px,1.9cqw)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--cloth)}
.hero-copy h1{margin:4.2cqw 0 0;font:800 9.1cqw/.94 var(--sans);text-transform:uppercase;letter-spacing:-.012em}
.hero-copy p{margin:4.4cqw auto 0;max-width:30em;font:400 max(15px,2.75cqw)/1.55 var(--serif);color:var(--ink-soft)}
.hero-copy__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6cqw}
.hero-copy__cta .btn{min-height:max(48px,8cqw);padding:0 max(20px,4.2cqw);font-size:max(14px,2.45cqw)}
.hero__scroll{position:absolute;left:50%;bottom:14px;z-index:5;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);transition:opacity .8s ease}
.hero__scroll i{width:1px;height:26px;background:currentColor;transform-origin:0 0;animation:scrollcue 2.4s var(--ease) infinite}
@keyframes scrollcue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero__replay{position:absolute;right:clamp(16px,3vw,40px);bottom:12px;z-index:5;min-height:44px;background:none;border:0;padding:0 4px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer}
.hero__replay:hover{color:var(--ink)}

/* portrait / phone: the camera frames the right-hand (title) page; copy reads below */
@media (max-width:760px), (max-aspect-ratio:4/5){
  .hero{height:auto;min-height:0;
    --pw:min(calc(100vw - 64px), 420px);
    --ph:calc(var(--pw) / .736);
    --sq:calc(var(--ph) * .016);
  }
  .hero__stage{position:relative;top:auto;height:calc(var(--bh) + 56px);margin-top:var(--hdr);perspective:1800px}
  .cam{left:calc(var(--bw) / -2)}
  .hero-copy{position:absolute;left:100%;right:auto;width:100%;top:calc(100% + var(--sq) + 34px);text-align:left}
  .hero-copy__kicker{font-size:11px}
  .hero-copy h1{margin-top:14px;font-size:10.4cqw}
  .hero-copy p{margin:16px 0 0;font-size:16px}
  .hero-copy__cta{justify-content:stretch;flex-direction:column;margin-top:26px}
  .hero-copy__cta .btn{min-height:52px;font-size:15px}
  .hero__after{height:calc(var(--pw) * 1.02 + 120px)}
  .hero__scroll{display:none}
  .hero__replay{bottom:auto;top:calc(var(--hdr) + 8px)}
}

/* ==========================================================================
   6. INTRO — only when html.intro-pending (set before first paint)
   ========================================================================== */
.intro{display:none}
div.intro{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
div.intro--night{z-index:0}
html.intro-pending .intro,html.intro-running .intro{display:block}
html.intro-pending,html.intro-running{overflow:hidden}
html.intro-pending .cam{opacity:.01}
html.intro-pending .site-header,html.intro-running .site-header{opacity:0;pointer-events:none}
html.intro-pending .hero__scroll,html.intro-running .hero__scroll,html.intro-pending .hero__replay,html.intro-running .hero__replay{opacity:0;pointer-events:none}
.intro__night{position:absolute;inset:0;z-index:0;background:var(--silence);pointer-events:none}
.intro__dark{position:absolute;left:50%;top:56%;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;z-index:4;pointer-events:none;
  background:radial-gradient(closest-side,rgba(20,18,16,0) 0,rgba(20,18,16,0) 7%,rgba(20,18,16,.6) 16%,rgba(20,18,16,.98) 26%);transform:scale(.6);will-change:transform,opacity}
.intro__grain{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;background:repeating-radial-gradient(circle at 37% 41%,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 71% 63%,rgba(0,0,0,.05) 0 1px,transparent 1px 2px)}
.intro__phrase{position:absolute;left:0;right:0;top:50%;z-index:5;margin:-0.75em 0 0;padding:0 24px;text-align:center;font:400 italic clamp(22px,2.6vw,36px)/1.4 var(--serif);color:#EDE6DA;opacity:0}
.intro__skip{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,36px);z-index:6;min-height:44px;padding:0 20px;background:transparent;border:1px solid rgba(237,230,218,.38);color:#EDE6DA;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:border-color .3s ease,opacity .6s ease}
.intro__skip:hover{border-color:#EDE6DA}
.intro__skip:focus-visible{outline-color:#EDE6DA}
/* leaves exist only while the intro runs */
.b-leaf{position:absolute;left:var(--bw);top:var(--sq);width:var(--pw);height:var(--ph);transform-style:preserve-3d;pointer-events:none}
.b-seg{position:absolute;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.b-seg__f,.b-seg__b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--paper) url(../img/paper-tile.jpg);background-size:300px}
.b-seg__b{transform:rotateY(180deg)}
.b-seg__sh{position:absolute;inset:0;pointer-events:none;z-index:3;background:#1A120C;opacity:0}
.b-seg__b .pg{pointer-events:none}
html.intro-running .b-page--l{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .btn,.site-header{transition:none}
  .hero__scroll i{animation:none}
}

/* ==========================================================================
   7. Table of contents (mobile menu) — styled like the book's own «Зміст»
   ========================================================================== */
.toc{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--paper) url(../img/paper-tile.jpg) 0 0/300px;color:var(--ink)}
.toc[open]{display:block;animation:tocin .5s var(--ease)}
@keyframes tocin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.toc::backdrop{background:rgba(20,18,16,.4)}
.toc__in{max-width:560px;margin:0 auto;padding:88px 24px 40px;min-height:100%;display:flex;flex-direction:column}
.toc__close{position:absolute;top:10px;right:12px;width:48px;height:48px;border:0;background:none;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.toc__title{margin:0 0 28px;text-align:center;font:700 18px/1 var(--sans)}
.toc__list{list-style:none;margin:0;padding:0}
.toc__list a{display:flex;align-items:baseline;gap:8px;padding:14px 0;color:var(--ink);text-decoration:none;font:600 22px/1.2 var(--sans)}
.toc__dots{flex:1;border-bottom:1.5px dotted #A9A196;transform:translateY(-5px)}
.toc__num{font-weight:500;color:var(--cloth)}
.toc__foot{margin-top:auto;padding-top:32px;display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){.toc[open]{animation:none}}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--rule)}
.site-footer__in{max-width:1320px;margin:0 auto;padding:32px clamp(16px,4vw,56px);display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.legal{display:flex;flex-direction:column;gap:12px;font:400 14px/1.5 var(--sans);color:var(--ink-mute)}
.legal ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 22px;flex-wrap:wrap}
.legal a{color:inherit;display:inline-flex;min-height:32px;align-items:center}
.legal__copy{margin:0}
.site-footer--dark .legal{color:#A9A196;width:100%}
.site-footer--dark .legal a{color:#C9C1B5}
.site-footer--dark .legal{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
@media (max-width:1080px){.site-header nav{display:none}}
@media (max-width:520px){
  .site-header__in{gap:6px;padding:0 10px 0 14px}
  .brand{gap:9px;letter-spacing:.1em}
  .brand__mark{width:24px;height:24px}
  .brand__name{font-size:11px}
  .lang a,.lang span{padding:0 5px}
  .cart-link{padding:0 4px}
}