/* ==========================================================================
   NẾP CÓI — Design System
   Concept: MODERN CRAFT × VIETNAMESE CONTEMPORARY
   60% Kem gạo/cói · 25% Nâu đất · 10% Xanh lá trầm · 5% Đỏ đất nung
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* 60% — kem gạo / cói tự nhiên */
  --rice:        #F7F2E8;
  --rice-2:      #F1EADC;
  --rice-3:      #E8DECB;
  --sand:        #DCCDB2;

  /* 25% — nâu đất */
  --earth:       #47331F;
  --earth-2:     #6B5540;
  --earth-3:     #9B8A76;
  --earth-mute:  #8A7A66;

  /* 10% — xanh lá trầm */
  --moss:        #3F5A46;
  --moss-2:      #547A5F;

  /* 5% — đỏ đất nung */
  --terra:       #B0543A;

  --ink:         #201509;
  --white:       #FFFDF8;

  --line:        rgba(71,51,31,.14);
  --line-soft:   rgba(71,51,31,.08);

  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;

  --r-sm: 4px;
  --r:    10px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(71,51,31,.06), 0 4px 14px rgba(71,51,31,.05);
  --shadow:    0 10px 40px rgba(71,51,31,.10);
  --shadow-lg: 0 24px 70px rgba(71,51,31,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 96px;

  --wrap: 1320px;
  --gut: 24px;
}
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--rice);
  color:var(--earth);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
input,select,textarea,button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; border-radius:2px; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:600; line-height:1.14; letter-spacing:-.015em; color:var(--earth); }
p{ margin:0 0 1em; }
.serif{ font-family:var(--font-serif); font-weight:500; letter-spacing:-.02em; }

.display{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(2.6rem, 7.5vw, 5.6rem);
  line-height:1.02; letter-spacing:-.035em;
}
.h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:-.03em; }
.h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(1.7rem,3.3vw,2.6rem); line-height:1.14; letter-spacing:-.025em; }
.h3{ font-size:clamp(1.12rem,1.6vw,1.35rem); font-weight:600; letter-spacing:-.01em; }

.eyebrow{
  font-size:.688rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--moss); margin:0 0 1rem;
}
.eyebrow--muted{ color:var(--earth-mute); }
.lead{ font-size:clamp(1rem,1.25vw,1.125rem); color:var(--earth-2); max-width:62ch; }
.muted{ color:var(--earth-mute); }
.small{ font-size:.875rem; }
.xs{ font-size:.75rem; }
.mono-label{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:860px; }
.wrap--mid{ max-width:1080px; }
.section{ padding-block:clamp(56px,8vw,112px); }
.section--tight{ padding-block:clamp(40px,5vw,64px); }
.section--rice2{ background:var(--rice-2); }
.section--sand{ background:var(--rice-3); }
.section--earth{ background:var(--earth); color:var(--rice); }
.section--earth h1,.section--earth h2,.section--earth h3{ color:var(--rice); }
.section--earth .lead{ color:rgba(247,242,232,.74); }
.section--earth .eyebrow{ color:var(--sand); }

.grid{ display:grid; gap:24px; }
.grid > *{ min-width:0; }
.g2{ display:grid; gap:clamp(16px,2.4vw,32px); grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ display:grid; gap:clamp(16px,2.4vw,32px); grid-template-columns:repeat(3,minmax(0,1fr)); }
.g2 > *, .g3 > *{ min-width:0; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.center{ text-align:center; }
.mt0{margin-top:0}.mb0{margin-bottom:0}

.hr{ height:1px; background:var(--line); border:0; margin:0; }

[id]{ scroll-margin-top: calc(var(--header-h) + 24px); }

.section-head{ margin-bottom:clamp(28px,4vw,48px); }
.section-head .h2{ margin-bottom:.35em; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--earth); --fg:var(--rice); --bd:var(--earth);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  padding:.92em 1.7em; border-radius:var(--r-pill);
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:.35s var(--ease); text-align:center; line-height:1.2;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(0); }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn--moss{ --bg:var(--moss); --bd:var(--moss); --fg:var(--rice); }
.btn--terra{ --bg:var(--terra); --bd:var(--terra); --fg:#fff; }
.btn--ghost{ --bg:transparent; --fg:var(--earth); --bd:var(--earth); }
.btn--ghost:hover{ --bg:var(--earth); --fg:var(--rice); }
.btn--light{ --bg:var(--rice); --fg:var(--earth); --bd:var(--rice); }
.btn--outline-light{ --bg:transparent; --fg:var(--rice); --bd:rgba(247,242,232,.45); }
.btn--outline-light:hover{ --bg:var(--rice); --fg:var(--earth); }
.btn--sm{ padding:.68em 1.25em; font-size:.688rem; }
.btn--lg{ padding:1.08em 2.2em; font-size:.8rem; }
.btn--block{ width:100%; }

.link-u{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid currentColor; color:var(--earth);
  transition:.3s var(--ease);
}
.link-u:hover{ gap:.9em; color:var(--moss); }
.section--earth .link-u{ color:var(--sand); }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:200;
  background:rgba(247,242,232,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck{ box-shadow:0 1px 20px rgba(71,51,31,.07); }
.header__bar{
  height:var(--header-h);
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px;
}
.brand{ display:inline-flex; align-items:center; justify-self:start; flex:none; }
.brand__logo{ display:block; width:94px; height:84px; object-fit:contain; }
.nav{ display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); justify-self:center; }
.nav a{
  position:relative; font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--earth-2); padding:6px 0; transition:color .25s var(--ease); white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--moss);
  transition:right .35s var(--ease);
}
.nav a:hover{ color:var(--earth); }
.nav a:hover::after, .nav a.is-active::after{ right:0; }
.nav a.is-active{ color:var(--earth); }
.nav a.is-new::before{
  content:''; position:absolute; top:2px; right:-9px; width:5px; height:5px; border-radius:50%; background:var(--terra);
}
.header__tools{ display:flex; align-items:center; gap:2px; justify-self:end; }
.icon-btn{
  position:relative; display:inline-grid; place-items:center;
  width:40px; height:40px; border:0; background:transparent; border-radius:50%;
  cursor:pointer; color:var(--earth); transition:background .25s var(--ease);
}
.icon-btn:hover{ background:rgba(71,51,31,.07); }
.icon-btn svg{ width:19px; height:19px; }
.badge{
  position:absolute; top:5px; right:4px; min-width:16px; height:16px; padding:0 4px;
  display:none; place-items:center; border-radius:var(--r-pill);
  background:var(--terra); color:#fff; font-size:.625rem; font-weight:700; line-height:1;
}
.badge.is-on{ display:grid; }
.burger{ display:none; }

/* announcement */
.announce{
  background:var(--earth); color:var(--rice); text-align:center;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:9px 16px;
}
.announce a{ border-bottom:1px solid rgba(247,242,232,.5); }

/* ---------- Mobile nav ---------- */
.mnav{
  position:fixed; inset:0; z-index:400; background:var(--rice);
  transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.mnav.is-open{ transform:none; }
.mnav__top{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding-inline:var(--gut); border-bottom:1px solid var(--line-soft); }
.mnav__links{ padding:28px var(--gut) 12px; display:flex; flex-direction:column; }
.mnav__links a{
  font-family:var(--font-serif); font-size:1.75rem; padding:.42em 0; color:var(--earth);
  border-bottom:1px solid var(--line-soft);
}
.mnav__foot{ margin-top:auto; padding:24px var(--gut) 36px; display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Overlays: search / cart drawer ---------- */
.scrim{
  position:fixed; inset:0; z-index:380; background:rgba(32,21,9,.42);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
  backdrop-filter:blur(2px);
}
.scrim.is-on{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:420; width:min(440px,100%);
  background:var(--rice); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .45s var(--ease);
  box-shadow:var(--shadow-lg);
}
.drawer.is-open{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line-soft); }
.drawer__body{ flex:1; overflow-y:auto; padding:18px 22px; }
.drawer__foot{ border-top:1px solid var(--line-soft); padding:18px 22px 24px; background:var(--rice-2); }

.searchbar{
  position:fixed; top:0; left:0; right:0; z-index:420; background:var(--rice);
  border-bottom:1px solid var(--line); padding:20px var(--gut) 24px;
  transform:translateY(-102%); transition:transform .4s var(--ease);
  max-height:88vh; overflow-y:auto;
}
.searchbar.is-open{ transform:none; }
.searchbar input{
  width:100%; border:0; border-bottom:1px solid var(--line); background:transparent;
  font-family:var(--font-serif); font-size:clamp(1.4rem,3vw,2.1rem); padding:.3em 0; color:var(--earth);
}
.searchbar input:focus{ outline:none; border-bottom-color:var(--moss); }
.search-res{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px; margin-top:24px; }

/* ---------- Media ---------- */
.media{ position:relative; overflow:hidden; background:var(--rice-3); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), opacity .6s var(--ease); }
.media--4x5{ aspect-ratio:4/5; }
.media--1x1{ aspect-ratio:1/1; }
.media--3x4{ aspect-ratio:3/4; }
.media--16x9{ aspect-ratio:16/9; }
.media--3x2{ aspect-ratio:3/2; }
.media--r{ border-radius:var(--r-lg); }
img.is-loading{ opacity:0; }
.img-fallback{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  background:
    repeating-linear-gradient(45deg, rgba(71,51,31,.05) 0 7px, transparent 7px 14px),
    linear-gradient(135deg, var(--rice-3), var(--sand));
  color:var(--earth-2);
}
.img-fallback span{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; opacity:.7; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:clamp(560px,92svh,900px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(32,21,9,.62) 0%, rgba(32,21,9,.30) 42%, rgba(32,21,9,0) 72%),
    linear-gradient(180deg, rgba(32,21,9,.34) 0%, rgba(32,21,9,.06) 30%, rgba(32,21,9,.66) 100%);
}
@media (max-width:720px){
  .hero__bg::after{
    background:linear-gradient(180deg, rgba(32,21,9,.40) 0%, rgba(32,21,9,.18) 26%, rgba(32,21,9,.74) 100%);
  }
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(40px,7vh,80px); color:var(--rice); }
.hero h1{ color:var(--rice); margin-bottom:.12em; }
.hero__slogan{
  font-family:var(--font-serif); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.7rem);
  color:rgba(247,242,232,.92); margin:0 0 .7em;
}
.hero__desc{ color:rgba(247,242,232,.8); max-width:44ch; margin-bottom:2rem; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
/* ---------- Hero film ---------- */
.hero__bg{ background:var(--ink); }
.hero__img, .hero__video{
  width:100%; height:100%; object-fit:cover;
  transform:translate3d(var(--px,0),var(--py,0),0) scale(1.05);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.hero__img{ opacity:0; }
.hero.is-ready .hero__img{ opacity:1; transition:opacity .7s var(--ease), transform .6s cubic-bezier(.2,.7,.3,1); }

/* lớp phim — chồng lên poster, chỉ lộ ra khi đã chạy được */
.hero__video{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.hero.is-filming .hero__video{
  opacity:1;
  transition:opacity 1.1s var(--ease), transform .6s cubic-bezier(.2,.7,.3,1);
}

/* hero nền phim sáng → cần lớp phủ đậm hơn để chữ đọc được */
.hero--film .hero__bg::after{
  background:
    linear-gradient(90deg, rgba(32,21,9,.78) 0%, rgba(32,21,9,.48) 40%, rgba(32,21,9,.12) 72%, rgba(32,21,9,.05) 100%),
    linear-gradient(180deg, rgba(32,21,9,.42) 0%, rgba(32,21,9,.18) 28%, rgba(32,21,9,.72) 100%);
}
@media (max-width:720px){
  .hero--film .hero__bg::after{
    background:linear-gradient(180deg, rgba(32,21,9,.52) 0%, rgba(32,21,9,.32) 24%, rgba(32,21,9,.82) 100%);
  }
}

/* chữ nổi lên sau khi poster hiện */
.hero__copy > *{ opacity:0; transform:translateY(20px); }
.hero.is-ready .hero__copy > *{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease) var(--td), transform .9s cubic-bezier(.16,.86,.3,1) var(--td);
}
.hero__copy > *:nth-child(1){ --td:.10s } .hero__copy > *:nth-child(2){ --td:.20s }
.hero__copy > *:nth-child(3){ --td:.30s } .hero__copy > *:nth-child(4){ --td:.38s }
.hero__copy > *:nth-child(5){ --td:.46s }
.hero__scroll{ opacity:0; }
.hero.is-ready .hero__scroll{ opacity:1; transition:opacity .8s var(--ease) .7s; }

@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
  .hero__img, .hero__copy > *, .hero__scroll{ opacity:1 !important; transform:none !important; }
}

.hero__scroll{
  position:absolute; bottom:22px; right:var(--gut); z-index:3; color:rgba(247,242,232,.7);
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:.6em;
}
.hero__scroll i{ display:block; width:1px; height:32px; background:currentColor; animation:drop 2.2s var(--ease) infinite; transform-origin:top; }
@keyframes drop{ 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* ---------- Brand statement ---------- */
.statement{ display:grid; gap:0; }
.statement__line{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(1.55rem,4.8vw,3.4rem); line-height:1.15; letter-spacing:-.03em;
  padding:.16em 0; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:.5em;
}
.statement__line:last-child{ border-bottom:0; }
.statement__line b{ font-weight:500; color:var(--earth); }
.statement__line em{ font-style:normal; color:var(--moss); }
.statement__num{ font-family:var(--font-sans); font-size:.625rem; letter-spacing:.2em; color:var(--earth-mute); font-weight:600; }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.09s } .rv[data-d="2"]{ transition-delay:.18s }
.rv[data-d="3"]{ transition-delay:.27s } .rv[data-d="4"]{ transition-delay:.36s }
.rv[data-d="5"]{ transition-delay:.45s } .rv[data-d="6"]{ transition-delay:.54s }

/* ---------- Product card ---------- */
.pcard{ position:relative; display:block; }
.pcard__media{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--rice-3); aspect-ratio:4/5; }
.pcard__media img{ width:100%; height:100%; object-fit:cover; }
.pcard__media img.alt{ position:absolute; inset:0; opacity:0; }
.pcard:hover .pcard__media img.main{ transform:scale(1.045); opacity:0; }
.pcard:hover .pcard__media img.alt{ opacity:1; transform:scale(1.045); }
.pcard__tags{ position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; z-index:2; }
.tag{
  font-size:.594rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:5px 9px; border-radius:var(--r-pill); background:var(--rice); color:var(--earth);
}
.tag--moss{ background:var(--moss); color:var(--rice); }
.tag--terra{ background:var(--terra); color:#fff; }
.tag--earth{ background:var(--earth); color:var(--rice); }
.tag--ghost{ background:rgba(247,242,232,.9); color:var(--earth-2); }
.pcard__wish{
  position:absolute; top:8px; right:8px; z-index:3; width:34px; height:34px; border-radius:50%;
  border:0; background:rgba(247,242,232,.9); display:grid; place-items:center; cursor:pointer;
  opacity:0; transform:translateY(-4px); transition:.3s var(--ease); color:var(--earth);
}
.pcard:hover .pcard__wish, .pcard__wish.is-on{ opacity:1; transform:none; }
.pcard__wish.is-on{ color:var(--terra); }
.pcard__wish svg{ width:16px; height:16px; }
.pcard__quick{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  opacity:0; transform:translateY(8px); transition:.35s var(--ease);
}
.pcard:hover .pcard__quick{ opacity:1; transform:none; }
.pcard__body{ padding:14px 2px 0; }
.pcard__name{ font-size:.938rem; font-weight:600; margin:0 0 3px; letter-spacing:-.005em; }
.pcard__meta{ font-size:.75rem; color:var(--earth-mute); margin:0 0 7px; }
.pcard__price{ font-size:.875rem; font-weight:600; color:var(--earth); }
.pcard__price del{ color:var(--earth-mute); font-weight:400; margin-left:.5em; font-size:.8rem; }
.swatches{ display:flex; gap:5px; margin-top:9px; }
.sw{ width:13px; height:13px; border-radius:50%; border:1px solid rgba(71,51,31,.2); }

.pgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,30px) clamp(12px,1.6vw,24px); }
.pgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ---------- Scroller ---------- */
.scroller{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin; }
.scroller > *{ scroll-snap-align:start; flex:0 0 clamp(230px,26vw,300px); }
.scroller::-webkit-scrollbar{ height:4px; }
.scroller::-webkit-scrollbar-thumb{ background:var(--sand); border-radius:4px; }

/* ---------- Editorial split ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; }
.split--wide-l{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.split--wide-r{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
.split__text{ max-width:52ch; }

/* ---------- Category tiles ---------- */
.cats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cat{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; display:block; }
.cat img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.cat:hover img{ transform:scale(1.06); }
.cat::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(32,21,9,.62)); }
.cat__label{
  position:absolute; left:14px; bottom:13px; z-index:2; color:var(--rice);
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px); counter-reset:s; }
.steps--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.steps > *{ min-width:0; }
.step{ position:relative; padding-top:20px; border-top:1px solid var(--line); }
.step__n{ font-size:.625rem; letter-spacing:.2em; font-weight:700; color:var(--moss); display:block; margin-bottom:10px; }
.step h3{ margin-bottom:.35em; }
.step p{ font-size:.875rem; color:var(--earth-2); margin:0; }

/* ---------- Flow / chain ---------- */
.chain{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chain span{
  font-size:.688rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--rice);
}
.chain i{ font-style:normal; color:var(--moss); }
.section--earth .chain span{ background:transparent; border-color:rgba(247,242,232,.28); color:var(--rice); }
.section--earth .chain i{ color:var(--sand); }

/* ---------- Cards ---------- */
.card{ background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,32px); }
.card--flat{ background:var(--rice-2); border-color:transparent; }
.card--pad0{ padding:0; overflow:hidden; }

/* ---------- Forms ---------- */
.field{ margin-bottom:16px; }
.field > label, .lbl{
  display:block; font-size:.688rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--earth-2); margin-bottom:8px;
}
.input, select.input, textarea.input{
  width:100%; padding:.86em 1em; border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); color:var(--earth); font-size:.938rem; transition:.25s var(--ease);
}
.input:focus{ outline:none; border-color:var(--moss); box-shadow:0 0 0 3px rgba(63,90,70,.1); }
textarea.input{ resize:vertical; min-height:110px; }
select.input{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347331F' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px; }
.help{ font-size:.75rem; color:var(--earth-mute); margin-top:6px; }
.err{ font-size:.75rem; color:var(--terra); margin-top:6px; display:none; }
.field.has-err .input{ border-color:var(--terra); }
.field.has-err .err{ display:block; }
.grid-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; }

/* choice chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  padding:.6em 1.05em; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--white); font-size:.813rem; font-weight:500; transition:.25s var(--ease);
}
.chip:hover{ border-color:var(--earth-2); }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip.is-on{ background:var(--earth); color:var(--rice); border-color:var(--earth); }
.chip.is-on .chip__price{ color:rgba(247,242,232,.7); }
.chip__price{ font-size:.75rem; color:var(--earth-mute); }
.chip--moss.is-on{ background:var(--moss); border-color:var(--moss); }

/* color swatch picker */
.colorpick{ display:flex; gap:10px; flex-wrap:wrap; }
.colorpick button{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(71,51,31,.22); cursor:pointer;
  position:relative; transition:.25s var(--ease); padding:0;
}
.colorpick button:hover{ transform:scale(1.08); }
.colorpick button.is-on{ box-shadow:0 0 0 2px var(--rice), 0 0 0 3px var(--earth); }

/* qty */
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:var(--white); }
.qty button{ width:36px; height:36px; border:0; background:transparent; cursor:pointer; font-size:1rem; line-height:1; }
.qty button:hover{ background:var(--rice-2); }
.qty span{ min-width:30px; text-align:center; font-size:.875rem; font-weight:600; }

/* ---------- Tabs / filters ---------- */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs button{
  border:0; background:transparent; cursor:pointer; padding:12px 16px; white-space:nowrap;
  font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--earth-mute); border-bottom:2px solid transparent; margin-bottom:-1px; transition:.25s var(--ease);
}
.tabs button:hover{ color:var(--earth); }
.tabs button.is-on{ color:var(--earth); border-bottom-color:var(--earth); }

.filterbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-block:18px; }

/* ---------- Toast ---------- */
.toasts{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:600; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
/* khi mở drawer/overlay, đẩy toast lên trên để không che nút CTA */
body.is-locked .toasts{ bottom:auto; top:18px; }
.toast{
  background:var(--earth); color:var(--rice); padding:12px 20px; border-radius:var(--r-pill);
  font-size:.813rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.6em;
  animation:toastIn .4s var(--ease); max-width:90vw;
}
.toast--moss{ background:var(--moss); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------- Cart line ---------- */
.cline{ display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.cline__img{ border-radius:var(--r-sm); overflow:hidden; aspect-ratio:4/5; background:var(--rice-3); position:relative; }
.cline__img img{ width:100%; height:100%; object-fit:cover; }
.cline__name{ font-size:.875rem; font-weight:600; margin:0 0 3px; }
.cline__opt{ font-size:.75rem; color:var(--earth-mute); margin:0; line-height:1.55; }
.cline__opt b{ color:var(--earth-2); font-weight:600; }
.cline__rm{ border:0; background:none; cursor:pointer; font-size:.688rem; letter-spacing:.1em; text-transform:uppercase; color:var(--earth-mute); text-decoration:underline; padding:0; margin-top:8px; }
.cline__rm:hover{ color:var(--terra); }

.totals{ font-size:.875rem; }
.totals .t{ display:flex; justify-content:space-between; padding:7px 0; }
.totals .t--big{ font-size:1.06rem; font-weight:700; border-top:1px solid var(--line); margin-top:8px; padding-top:14px; }

/* ---------- Product page ---------- */
.pdp{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.gal{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; position:sticky; top:calc(var(--header-h) + 20px); }
.gal__thumbs{ display:flex; flex-direction:column; gap:9px; }
.gal__thumbs button{ border:1px solid transparent; border-radius:var(--r-sm); overflow:hidden; padding:0; cursor:pointer; background:var(--rice-3); aspect-ratio:4/5; }
.gal__thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal__thumbs button.is-on{ border-color:var(--earth); }
.gal__main{ border-radius:var(--r); overflow:hidden; background:var(--rice-3); aspect-ratio:4/5; position:relative; }
.gal__main img{ width:100%; height:100%; object-fit:cover; }
.pdp__price{ font-size:1.35rem; font-weight:700; }

.acc{ border-top:1px solid var(--line); }
.acc__h{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 0; border:0; background:none; cursor:pointer; text-align:left;
  font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}
.acc__h span:last-child{ transition:transform .3s var(--ease); font-size:1.1rem; line-height:1; }
.acc.is-open .acc__h span:last-child{ transform:rotate(45deg); }
.acc__c{ display:none; padding-bottom:20px; font-size:.875rem; color:var(--earth-2); }
.acc.is-open .acc__c{ display:block; }
.spec{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; font-size:.875rem; }
.spec dt{ color:var(--earth-mute); }
.spec dd{ margin:0; }

/* ---------- Custom studio ---------- */
.studio{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:clamp(24px,3vw,48px); align-items:start; }
.studio__preview{ position:sticky; top:calc(var(--header-h) + 20px); }
.preview-stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1;
  background:linear-gradient(160deg,var(--rice-2),var(--rice-3)); display:grid; place-items:center;
}
.preview-stage img{ width:100%; height:100%; object-fit:cover; }
.pv-layer{ position:absolute; inset:0; pointer-events:none; }
.pv-text{
  position:absolute; left:50%; top:58%; transform:translate(-50%,-50%) rotate(-1.5deg);
  font-weight:700; letter-spacing:.06em; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.25);
  max-width:72%; overflow:hidden; text-overflow:ellipsis;
}
.pv-motif{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); font-size:2.4rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.pv-charm{ position:absolute; right:14%; top:20%; font-size:1.7rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); animation:sway 3.4s var(--ease) infinite; }
@keyframes sway{ 0%,100%{ transform:rotate(-7deg) } 50%{ transform:rotate(7deg) } }
.pv-note{ position:absolute; left:12px; bottom:12px; z-index:3; }

.stepper{ display:flex; gap:4px; margin-bottom:22px; overflow-x:auto; padding-bottom:4px; }
.stepper button{
  flex:1; min-width:56px; border:0; background:none; cursor:pointer; padding:0 0 9px;
  border-bottom:2px solid var(--line); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--earth-mute); transition:.25s var(--ease); white-space:nowrap;
}
.stepper button.is-on{ color:var(--earth); border-bottom-color:var(--earth); }
.stepper button.is-done{ color:var(--moss); border-bottom-color:var(--moss); }

.spanel{ display:none; }
.spanel.is-on{ display:block; animation:fadeUp .4s var(--ease); }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1;transform:none} }

.basepick{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.basepick > *{ min-width:0; }
.basepick figcaption{ overflow-wrap:anywhere; }
.basepick button{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--white);
  cursor:pointer; padding:0; text-align:left; transition:.25s var(--ease);
}
.basepick button:hover{ border-color:var(--earth-2); }
.basepick button.is-on{ border-color:var(--earth); box-shadow:0 0 0 1px var(--earth); }
.basepick figure{ margin:0; aspect-ratio:1/1; background:var(--rice-3); }
.basepick figure img{ width:100%; height:100%; object-fit:cover; }
.basepick figcaption{ padding:8px 9px; font-size:.75rem; font-weight:600; }
.basepick small{ display:block; font-weight:400; color:var(--earth-mute); font-size:.688rem; }

.summary-list{ font-size:.813rem; }
.summary-list div{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line-soft); }
.summary-list div:last-child{ border-bottom:0; }
.summary-list span:first-child{ color:var(--earth-mute); }

/* ---------- AI ---------- */
.ai-shell{ max-width:760px; margin-inline:auto; }
.ai-q{ display:none; }
.ai-q.is-on{ display:block; animation:fadeUp .45s var(--ease); }
.ai-prog{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:30px; }
.ai-prog i{ display:block; height:100%; background:var(--moss); width:0; transition:width .5s var(--ease); }
.ai-bubble{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  border-bottom-left-radius:4px; padding:16px 20px; margin-bottom:22px; box-shadow:var(--shadow-sm);
  font-size:1rem;
}
.ai-typing{ display:inline-flex; gap:4px; }
.ai-typing i{ width:6px; height:6px; border-radius:50%; background:var(--earth-mute); animation:blink 1.3s infinite; }
.ai-typing i:nth-child(2){ animation-delay:.2s } .ai-typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }
.ai-opts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ai-opts > *{ min-width:0; }
.ai-opt{
  border:1px solid var(--line); border-radius:var(--r); background:var(--white); padding:14px 12px;
  cursor:pointer; text-align:left; transition:.25s var(--ease);
}
.ai-opt:hover{ border-color:var(--earth-2); transform:translateY(-2px); }
.ai-opt.is-on{ border-color:var(--moss); background:rgba(63,90,70,.06); box-shadow:0 0 0 1px var(--moss); }
.ai-opt b{ display:block; font-size:.875rem; margin-bottom:2px; }
.ai-opt small{ color:var(--earth-mute); font-size:.75rem; line-height:1.45; display:block; }
.ai-opt .emo{ font-size:1.25rem; display:block; margin-bottom:6px; }

/* ---------- Journal ---------- */
.jcard{ display:block; }
.jcard__media{ border-radius:var(--r); overflow:hidden; aspect-ratio:3/2; background:var(--rice-3); }
.jcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.jcard:hover .jcard__media img{ transform:scale(1.05); }
.jcard h3{ margin:14px 0 6px; font-size:1.06rem; }
.jcard p{ font-size:.875rem; color:var(--earth-2); margin:0; }

.article{ max-width:720px; margin-inline:auto; font-size:1.06rem; line-height:1.78; }
.article h2{ margin-top:2em; }
.article h3{ margin-top:1.8em; font-size:1.12rem; }
.article blockquote{
  margin:2em 0; padding:0 0 0 24px; border-left:2px solid var(--moss);
  font-family:var(--font-serif); font-size:1.28rem; font-style:italic; color:var(--earth);
}
.article ul,.article ol{ padding-left:1.25em; }
.article li{ margin-bottom:.5em; }
.article figure{ margin:2.4em 0; }
.article figcaption{ font-size:.813rem; color:var(--earth-mute); margin-top:10px; text-align:center; }

/* ---------- Story / QR ---------- */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--line); }
.tl-item{ position:relative; padding-bottom:36px; }
.tl-item::before{ content:''; position:absolute; left:-26px; top:7px; width:11px; height:11px; border-radius:50%; background:var(--rice); border:2px solid var(--moss); }
.tl-item:last-child{ padding-bottom:0; }

.qr-box{ display:grid; place-items:center; gap:14px; padding:26px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); }
.qr-box svg{ width:150px; height:150px; }

/* ---------- Footer ---------- */
.footer{ background:var(--earth); color:rgba(247,242,232,.78); padding-block:clamp(48px,6vw,80px) 0; margin-top:auto; }
.footer h4{ color:var(--rice); font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; margin-bottom:16px; }
.footer a{ color:rgba(247,242,232,.78); font-size:.875rem; line-height:2; transition:color .25s var(--ease); }
.footer a:hover{ color:var(--rice); }
.footer__grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr); gap:clamp(24px,3vw,48px); }
.footer__bottom{
  margin-top:clamp(36px,5vw,64px); padding-block:26px 30px;
  border-top:1px solid rgba(247,242,232,.14);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center; gap:18px 28px; font-size:.75rem;
}
.footer__bottom .fb-side{ margin:0; color:rgba(247,242,232,.6); }
.footer__bottom .fb-side--end{ text-align:right; }

/* ---------- credit / signature ---------- */
.credit{ margin:0; display:inline-flex; align-items:flex-end; gap:clamp(14px,1.8vw,22px); }
.credit__rule{
  display:block; width:clamp(22px,5.5vw,62px); height:1px; flex:none;
  margin-bottom:11px;
  background:linear-gradient(90deg, transparent, rgba(247,242,232,.5));
  transition:width .55s var(--ease), opacity .45s var(--ease);
}
.credit__rule:last-child{ background:linear-gradient(90deg, rgba(247,242,232,.5), transparent); }
.credit__text{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.2; }
.credit__label{
  font-size:.5625rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(247,242,232,.42); padding-left:.34em;
  transition:color .4s var(--ease);
}
.credit__name{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:1.25rem; letter-spacing:.015em; color:var(--rice);
  margin-top:7px; position:relative;
}
.credit__name::after{
  content:''; position:absolute; left:50%; right:50%; bottom:-3px; height:1px;
  background:var(--sand); transition:left .5s var(--ease), right .5s var(--ease);
}
.credit:hover .credit__name::after{ left:0; right:0; }
.credit:hover .credit__label{ color:var(--sand); }
.credit:hover .credit__rule{ width:clamp(32px,7.5vw,86px); }
.footer .brand{ padding:12px; background:var(--rice); border-radius:12px; }
.footer .brand__logo{ width:180px; height:auto; }
.social{ display:flex; gap:10px; margin-top:16px; }
.social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(247,242,232,.22); display:grid; place-items:center; }
.social a:hover{ background:rgba(247,242,232,.1); }
.social svg{ width:16px; height:16px; }
.newsletter{ display:flex; gap:8px; margin-top:14px; }
.newsletter input{
  flex:1; min-width:0; background:transparent; border:0; border-bottom:1px solid rgba(247,242,232,.3);
  color:var(--rice); padding:.6em 0; font-size:.875rem;
}
.newsletter input::placeholder{ color:rgba(247,242,232,.45); }
.newsletter input:focus{ outline:none; border-bottom-color:var(--sand); }

/* ---------- Page head ---------- */
.phead{ padding-block:clamp(36px,5vw,68px) clamp(24px,3vw,40px); }
.crumbs{ font-size:.75rem; color:var(--earth-mute); margin-bottom:16px; }
.crumbs a:hover{ color:var(--earth); }
.crumbs i{ font-style:normal; margin-inline:.5em; opacity:.5; }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line-soft); padding-block:14px; background:var(--rice-2); }
.marquee__track{ display:flex; gap:48px; width:max-content; animation:slide 34s linear infinite; }
.marquee span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--earth-2); display:flex; align-items:center; gap:48px; white-space:nowrap; }
.marquee span::after{ content:'◆'; font-size:.5rem; color:var(--moss); }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- Empty ---------- */
.empty{ text-align:center; padding:60px 20px; }
.empty svg{ width:48px; height:48px; color:var(--sand); margin-bottom:16px; }

/* ---------- Progress steps (checkout) ---------- */
.cksteps{ display:flex; gap:10px; align-items:center; font-size:.688rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--earth-mute); margin-bottom:28px; flex-wrap:wrap; }
.cksteps b{ color:var(--earth); font-weight:600; }
.cksteps i{ font-style:normal; opacity:.4; }

/* ---------- Utilities ---------- */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--earth); color:var(--rice); padding:12px 20px; }
.skip:focus{ left:8px; top:8px; }
.hide{ display:none !important; }
.fill{ width:100%; }

/* ==========================================================================
   Responsive — mobile first priority
   ========================================================================== */
@media (max-width:1100px){
  .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .studio{ grid-template-columns:minmax(0,1fr); }
  .studio__preview{ position:static; }
  .preview-stage{ max-width:min(440px,100%); margin-inline:auto; }
}
@media (max-width:980px){
  :root{ --gut:20px; }
  .nav{ display:none; }
  .burger{ display:inline-grid; }
  .header__bar{ grid-template-columns:minmax(0,1fr) auto; }
  .brand{ justify-self:start; }
  .header__tools{ justify-self:end; }
  .pdp{ grid-template-columns:minmax(0,1fr); }
  .gal{ position:static; grid-template-columns:minmax(0,1fr); }
  .gal__thumbs{ flex-direction:row; overflow-x:auto; }
  .gal__thumbs button{ flex:0 0 66px; }
  .split, .split--wide-l, .split--wide-r{ grid-template-columns:minmax(0,1fr); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-opts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .pgrid, .pgrid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .g2, .g3{ grid-template-columns:minmax(0,1fr); }
  .steps, .steps--2{ grid-template-columns:minmax(0,1fr); }
  .grid-2{ grid-template-columns:minmax(0,1fr); }
  .footer__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .basepick{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero{ min-height:88svh; }
  .statement__line{ gap:.35em; }
  .hero__scroll{ display:none; }
}
@media (max-width:520px){
  .ai-opts{ grid-template-columns:minmax(0,1fr); }
  .cats{ grid-template-columns:minmax(0,1fr); }
  .cats .cat{ aspect-ratio:4/3; }
  .footer__grid{ grid-template-columns:minmax(0,1fr); }
  .cline{ grid-template-columns:64px minmax(0,1fr); }
  .cline__price{ grid-column:2; }
  .footer__bottom{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; gap:22px; }
  .footer__bottom .fb-side--end{ text-align:center; }
  .btn{ font-size:.7rem; padding:.9em 1.4em; }
}

/* Chừa đủ chỗ cho nhãn điều hướng tiếng Việt. */
@media (min-width:981px) and (max-width:1280px){
  .nav{ display:none; }
  .burger{ display:inline-grid; }
  .header__bar{ grid-template-columns:minmax(0,1fr) auto; }
  .header__tools{ justify-self:end; }
}