/* =========================================================
   Kur Pigiausia — Swiss Typographic Design
   International Typographic Style: grid, Helvetica, rules,
   black / paper / one red accent, tabular numerals.
   ========================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- Tokens ---------- */
:root{
  --ink:#111110;
  --ink-2:#3a3a36;
  --muted:#7c7b73;
  --paper:#f3f1ea;          /* warm Müller-Brockmann paper */
  --paper-pure:#fbfaf6;
  --card:#ffffff;
  --line:#111110;
  --hair:rgba(17,17,16,.16);
  --red:#e2231a;            /* Swiss red */
  --red-ink:#b51910;

  --maxw:1880px;
  --gut:clamp(16px,2.6vw,56px);
  --col-gap:24px;

  --ff:"Helvetica Neue",Helvetica,"Arial Nova",Arial,"Inter",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,monospace;

  /* fluid type scale */
  --t-xs:11px;
  --t-sm:13px;
  --t-base:15px;
  --t-md:clamp(17px,1.1vw + 13px,21px);
  --t-lg:clamp(24px,2.4vw + 10px,40px);
  --t-xl:clamp(40px,6vw + 8px,104px);
  --t-display:clamp(58px,11vw,176px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
html,body{background:var(--paper);color:var(--ink)}
body{
  font-family:var(--ff);
  font-size:var(--t-base);
  line-height:1.45;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.tnum{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}

/* ---------- Grid container ---------- */
.grid{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);
}

/* eyebrow / label */
.eyebrow{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow .idx{color:var(--red);font-feature-settings:"tnum" 1}

/* section heading shared */
.sec{padding-block:clamp(48px,7vw,104px);border-top:2px solid var(--line)}
.sec--flush{border-top:none}
.sec__head{
  display:grid;grid-template-columns:1fr;gap:14px;
  margin-bottom:clamp(28px,4vw,56px);
}
.sec__head h2{
  font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  max-width:20ch;
}
.sec__head .lead{color:var(--ink-2);max-width:52ch;font-size:var(--t-md);line-height:1.3}
@media(min-width:860px){
  .sec__head{grid-template-columns:minmax(0,1fr) minmax(0,42ch);align-items:end}
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead{position:sticky;top:0;z-index:60;background:var(--paper)}
.masthead__grid{
  display:flex;align-items:center;gap:clamp(10px,1.3vw,20px);
  min-height:72px;padding-block:14px;
}
.masthead__rule{height:2px;background:var(--line);width:100%}

.brand{display:flex;align-items:baseline;gap:.42em;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(20px,1.4vw + 14px,27px);white-space:nowrap}
.brand__mark{
  align-self:center;width:.62em;height:.62em;background:var(--red);
  display:inline-block;border-radius:1px;transform:translateY(.02em)
}
.brand__name em{font-style:normal;color:var(--ink)}
.brand em{font-style:normal}
.brand__name{font-weight:800}
.brand__name em{font-weight:300}
.brand__tld{color:var(--red);font-weight:800;font-size:.5em;letter-spacing:0;transform:translateY(-.55em)}

.mainnav{display:none;margin-left:6px}
.mainnav a{
  font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;border-radius:999px;
  display:inline-flex;align-items:center;gap:.5em;color:var(--ink-2);
  transition:color .2s,background .2s;
}
.mainnav a .n{font-size:var(--t-xs);color:var(--red);font-weight:700}
.mainnav a:hover{color:var(--ink);background:rgba(17,17,16,.06)}
.mainnav a.is-active{background:var(--ink);color:var(--paper)}
.mainnav a.is-active .n{color:var(--paper)}

.search{display:flex;align-items:center;position:relative;
  border:1.5px solid var(--line);border-radius:999px;background:var(--card);
  height:42px;padding-left:16px;width:min(230px,26vw);transition:width .25s var(--ease)}
.search__label{position:absolute;left:-9999px}
.search__input{flex:1;border:none;background:none;outline:none;font-size:var(--t-sm);min-width:0}
.search__input::placeholder{color:var(--muted)}
.search__btn{display:grid;place-items:center;width:42px;height:40px;color:var(--ink)}
.search__btn svg{fill:currentColor}
@media(max-width:680px){.search{width:42px;padding-left:0;justify-content:center}
  .search__input{display:none}.search.is-open{width:min(78vw,340px);padding-left:16px}
  .search.is-open .search__input{display:block}}

.burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;
  gap:5px;align-items:center;border:1.5px solid var(--line);border-radius:999px}
.burger span{width:18px;height:2px;background:var(--ink);transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1079px){.burger{display:flex}}

/* mobile nav sheet */
.navsheet{position:fixed;inset:0;z-index:55;background:var(--paper);
  transform:translateY(-100%);transition:transform .4s var(--ease);
  padding:96px var(--gut) 40px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.navsheet.is-open{transform:none}
.navsheet a{display:flex;justify-content:space-between;align-items:baseline;
  padding:18px 4px;border-top:1px solid var(--hair);font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em}
.navsheet a .n{font-size:var(--t-sm);color:var(--red)}
.navsheet a:last-child{border-bottom:1px solid var(--hair)}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding-block:clamp(40px,6vw,92px) clamp(36px,5vw,72px)}
.hero__top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;
  padding-bottom:18px}
.hero h1{
  font-size:var(--t-display);font-weight:800;line-height:.86;letter-spacing:-.045em;
  text-transform:uppercase;margin-top:8px;
}
.hero h1 .hl{color:var(--red)}
.hero__sub{display:grid;gap:28px;margin-top:30px}
@media(min-width:900px){.hero__sub{grid-template-columns:minmax(0,1fr) minmax(0,38ch);align-items:end}}
.hero__lede{font-size:var(--t-md);line-height:1.32;max-width:46ch;color:var(--ink-2)}
.hero__lede strong{color:var(--ink);font-weight:700}

/* stats row */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:2px solid var(--line);margin-top:clamp(28px,4vw,52px)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:22px 18px 22px 0;border-right:1px solid var(--hair)}
.stat:last-child{border-right:none}
.stat__n{font-size:clamp(34px,4.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat__l{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:10px;font-weight:600}

/* =========================================================
   CATEGORY INDEX
   ========================================================= */
.catindex{display:grid;grid-template-columns:1fr;border-top:2px solid var(--line)}
.catrow{display:grid;grid-template-columns:auto 1fr auto 46px;align-items:center;gap:clamp(14px,3vw,40px);
  padding:clamp(20px,3vw,34px) 10px clamp(20px,3vw,34px) 4px;border-bottom:1px solid var(--hair);
  transition:background .25s;position:relative}
.catrow:hover{background:var(--ink);color:var(--paper)}
.catrow:hover .catrow__meta,.catrow:hover .catrow__n{color:rgba(243,241,234,.6)}
.catrow:hover .catrow__arrow{transform:none;opacity:1;color:var(--paper)}
.catrow__n{font-size:var(--t-sm);font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:.05em}
.catrow__name{font-size:clamp(24px,4.2vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;min-width:0}
.catrow__meta{font-size:var(--t-sm);color:var(--muted);text-align:right;line-height:1.3;white-space:nowrap}
.catrow__arrow{opacity:0;transform:translateX(-10px);transition:.3s var(--ease);justify-self:end;display:flex}
@media(max-width:640px){
  .catrow{grid-template-columns:auto 1fr 30px;gap:14px;padding-right:6px}
  .catrow__meta{display:none}
  .catrow__arrow{opacity:1;transform:none}
  .catrow__arrow svg{width:22px;height:22px}
}

/* =========================================================
   CATALOG GRID + CARDS
   ========================================================= */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 8px;align-items:center;margin-bottom:30px}
.chip{font-size:var(--t-sm);font-weight:600;padding:8px 15px;border:1.5px solid var(--line);
  border-radius:999px;transition:.2s;white-space:nowrap}
.chip:hover{background:rgba(17,17,16,.06)}
.chip.is-active{background:var(--ink);color:var(--paper)}
.chip .c{opacity:.55;font-variant-numeric:tabular-nums;margin-left:.4em}
.toolbar__count{margin-left:auto;font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums}

.cards{
  display:grid;gap:1px;background:var(--hair);
  border:1px solid var(--hair);
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:560px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.cards{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1240px){.cards{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1640px){.cards{grid-template-columns:repeat(6,1fr)}}

.card{background:var(--card);display:flex;flex-direction:column;position:relative;
  transition:transform .3s var(--ease);min-width:0}
.card:hover{z-index:2}
.card__media{position:relative;background:var(--paper-pure);overflow:hidden;
  aspect-ratio:240/339;border-bottom:1px solid var(--hair)}
.card__img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s var(--ease);background:#fff}
.card:hover .card__img{transform:scale(1.04)}
.card__store{position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__pages{position:absolute;bottom:8px;right:8px;background:var(--paper);color:var(--ink);
  font-size:var(--t-xs);font-weight:700;padding:4px 8px;border-radius:999px;
  font-variant-numeric:tabular-nums;border:1px solid var(--hair)}
.card__body{padding:13px 13px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__title{font-size:var(--t-sm);font-weight:600;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;border-top:1px solid var(--hair);font-size:var(--t-xs)}
.card__dates{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600;letter-spacing:.02em}
.card__cta{color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:.4em}
.card__cta svg{transition:transform .25s var(--ease)}
.card:hover .card__cta svg{transform:translateX(3px)}
.card__link{position:absolute;inset:0;z-index:1}

/* empty state */
.empty{padding:80px 0;text-align:center;color:var(--muted)}
.empty b{display:block;font-size:var(--t-lg);color:var(--ink);font-weight:800;margin-bottom:8px;letter-spacing:-.02em}

/* =========================================================
   STORE DIRECTORY
   ========================================================= */
.dir{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(min-width:680px){.dir{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.dir{grid-template-columns:repeat(4,1fr)}}
.dir__item{background:var(--card);padding:18px 16px;display:flex;flex-direction:column;gap:6px;
  transition:background .2s,color .2s;position:relative;min-height:104px;justify-content:space-between}
.dir__item:hover{background:var(--red);color:#fff}
.dir__item:hover .dir__cat,.dir__item:hover .dir__cnt{color:rgba(255,255,255,.8)}
.dir__name{font-size:var(--t-md);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.dir__cat{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.dir__cnt{font-size:var(--t-xs);color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:600}

/* =========================================================
   ABOUT
   ========================================================= */
.about{display:grid;gap:28px}
@media(min-width:900px){.about{grid-template-columns:minmax(0,30ch) minmax(0,1fr);gap:clamp(32px,5vw,80px)}}
.about__copy{columns:1;font-size:var(--t-md);line-height:1.4;color:var(--ink-2);max-width:68ch}
.about__copy p{margin-bottom:1em}
.about__copy strong{color:var(--ink);font-weight:700}
.about h2{font-size:var(--t-lg);font-weight:800;letter-spacing:-.025em;line-height:1.02}

/* =========================================================
   PAGE HEADER (store / category / search routes)
   ========================================================= */
.phead{padding-block:clamp(34px,5vw,72px) 0}
.phead__crumb{font-size:var(--t-sm);color:var(--muted);margin-bottom:18px;display:flex;gap:.6em;align-items:center}
.phead__crumb a:hover{color:var(--ink)}
.phead h1{font-size:var(--t-xl);font-weight:800;letter-spacing:-.04em;line-height:.92;text-transform:uppercase}
.phead__meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:var(--t-sm);color:var(--ink-2);
  border-top:1px solid var(--hair);padding-top:18px}
.phead__meta b{font-weight:700;color:var(--ink)}

/* =========================================================
   CATALOG VIEWER
   ========================================================= */
body.viewing{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:80;background:#0d0d0c;color:#f3f1ea;display:flex;flex-direction:column}
.viewer__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid rgba(243,241,234,.14);flex:none;position:relative}
.viewer__back{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-sm);font-weight:600;
  padding:8px 12px;border:1px solid rgba(243,241,234,.25);border-radius:999px;transition:.2s}
.viewer__back:hover{background:rgba(243,241,234,.12)}
.viewer__meta{min-width:0;flex:1}
.viewer__store{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.viewer__title{font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3f1ea}
.viewer__dates{font-size:var(--t-xs);color:rgba(243,241,234,.6);font-variant-numeric:tabular-nums;white-space:nowrap}
.viewer__tools{display:flex;align-items:center;gap:8px;flex:none}
.vbtn{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(243,241,234,.25);
  border-radius:999px;transition:.2s}
.vbtn:hover{background:rgba(243,241,234,.12)}
.vbtn svg{fill:currentColor}
.viewer__counter{font-size:var(--t-sm);font-variant-numeric:tabular-nums;min-width:74px;text-align:center;
  display:inline-flex;gap:.35em;align-items:baseline;justify-content:center}
.viewer__counter input{width:2.4em;background:none;border:none;border-bottom:1px solid rgba(243,241,234,.4);
  text-align:right;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.viewer__counter .tot{color:rgba(243,241,234,.55)}
.viewer__progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--red);width:0;transition:width .25s}

.viewer__stage{flex:1;position:relative;overflow:auto;display:flex;justify-content:center;
  scroll-behavior:smooth;background:#0d0d0c;-webkit-overflow-scrolling:touch;overflow-anchor:none}
.viewer__track{overflow-anchor:none}
.viewer__track{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 16px 40px;width:100%}
.vpage{position:relative;width:auto;max-width:min(960px,94vw)}
.vpage img{width:100%;height:auto;background:#1a1a18;box-shadow:0 18px 50px rgba(0,0,0,.5);
  border-radius:2px;aspect-ratio:auto 124/175}
.vpage__no{position:absolute;top:10px;left:10px;background:rgba(13,13,12,.78);color:#fff;
  font-size:var(--t-xs);font-weight:700;padding:4px 9px;border-radius:999px;font-variant-numeric:tabular-nums;backdrop-filter:blur(4px)}
.viewer__stage.fit-h .vpage{max-width:none;height:calc(100vh - 160px)}
.viewer__stage.fit-h .vpage img{width:auto;height:100%}

/* side nav arrows */
.vnav{position:fixed;top:50%;transform:translateY(-50%);z-index:82;width:54px;height:54px;
  display:grid;place-items:center;background:rgba(243,241,234,.1);border:1px solid rgba(243,241,234,.22);
  border-radius:999px;color:#fff;transition:.2s;backdrop-filter:blur(6px)}
.vnav:hover{background:var(--red);border-color:var(--red)}
.vnav--prev{left:18px}.vnav--next{right:18px}
.vnav svg{fill:currentColor;width:24px;height:24px}
@media(max-width:760px){.vnav{width:44px;height:44px}.vnav--prev{left:8px}.vnav--next{right:8px}}

/* thumbnail rail */
.rail{flex:none;background:#111110;border-top:1px solid rgba(243,241,234,.14);
  display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scroll-behavior:smooth;height:0;
  transition:height .3s var(--ease),padding .3s var(--ease);padding-block:0}
.rail.is-open{height:110px;padding-block:10px}
.rail__t{flex:none;width:64px;height:90px;border:2px solid transparent;background:#222;cursor:pointer;
  overflow:hidden;position:relative;opacity:.55;transition:opacity .2s,border-color .2s}
.rail__t img{width:100%;height:100%;object-fit:cover;object-position:top}
.rail__t:hover{opacity:1}
.rail__t.is-active{opacity:1;border-color:var(--red)}
.rail__t .rn{position:absolute;bottom:2px;right:3px;font-size:9px;font-weight:700;color:#fff;
  text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}

/* related under viewer not used; viewer is full screen */

/* =========================================================
   FOOTER
   ========================================================= */
.footer{border-top:2px solid var(--line);background:var(--ink);color:var(--paper);margin-top:0}
.footer__grid{display:grid;gap:38px;padding-block:clamp(48px,6vw,84px)}
@media(min-width:860px){.footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.footer__brand .brand{color:var(--paper)}
.footer__brand .brand__name em{color:var(--paper)}
.footer__tag{margin-top:18px;color:rgba(243,241,234,.7);max-width:34ch;font-size:var(--t-sm);line-height:1.45}
.footer__apps{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.footer__apps a{border:1px solid rgba(243,241,234,.3);border-radius:8px;padding:9px 14px;font-size:var(--t-sm);
  font-weight:600;display:inline-flex;gap:.5em;align-items:center;transition:.2s}
.footer__apps a:hover{background:rgba(243,241,234,.12)}
.footer__col h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:rgba(243,241,234,.5);
  margin-bottom:16px;font-weight:700}
.footer__col a{display:block;padding:5px 0;color:rgba(243,241,234,.85);font-size:var(--t-sm);transition:.15s}
.footer__col a:hover{color:#fff;padding-left:6px}
.footer__bottom{border-top:1px solid rgba(243,241,234,.16);padding-block:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--t-xs);color:rgba(243,241,234,.55)}
.footer__bottom a:hover{color:#fff}

/* =========================================================
   utilities + motion
   ========================================================= */
html.js .reveal{opacity:0;transform:translateY(14px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}}

.skip{position:absolute;left:-9999px}
hr.rule{border:none;border-top:1px solid var(--hair);margin:0}

/* =========================================================
   v2 — masthead nav rework, lang switch, tools
   ========================================================= */
.mainnav{display:none}
@media(min-width:1500px){
  .mainnav{display:flex;gap:0;flex:0 1 auto;min-width:0;align-items:center;
    overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .mainnav::-webkit-scrollbar{display:none}
}
.grow{flex:1 1 auto;min-width:8px}
.mainnav a{padding:7px 10px;font-size:var(--t-xs);letter-spacing:.01em;white-space:nowrap;flex:none}
.mainnav a .n{margin-right:.45em}

.headlist{display:none;align-items:center;gap:.5em;flex:none;font-size:var(--t-sm);font-weight:700;
  padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;white-space:nowrap;transition:.2s}
.headlist svg{stroke:currentColor}
.headlist:hover{background:var(--red);border-color:var(--red);color:#fff}
.headlist.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(min-width:760px){.headlist{display:inline-flex}}

.langswitch{display:flex;gap:1px;align-items:center;flex:none}
.lang{font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 7px;border-radius:6px;color:var(--muted);line-height:1}
.lang:hover{color:var(--ink);background:rgba(17,17,16,.07)}
.lang.is-active{background:var(--ink);color:var(--paper)}
@media(max-width:420px){.lang{padding:5px 5px;font-size:10px}}

.navsheet__tool{color:var(--red)!important}
.navsheet__tool .n{color:var(--red)}

/* show burger until 1280 (matches inline nav) */
@media(max-width:1499px){.burger{display:flex}}
@media(min-width:1500px){.burger{display:none}}

/* =========================================================
   hero product search
   ========================================================= */
.herosearch{display:flex;gap:0;border:2px solid var(--line);border-radius:999px;background:var(--card);
  overflow:hidden;height:54px;max-width:520px;justify-self:start;align-self:end;width:100%}
.herosearch input{flex:1;border:none;background:none;outline:none;padding:0 20px;font-size:var(--t-md);min-width:0}
.herosearch button{flex:none;display:inline-flex;align-items:center;gap:.5em;background:var(--red);color:#fff;
  border:none;padding:0 22px;font-weight:700;font-size:var(--t-sm);cursor:pointer;transition:background .2s}
.herosearch button:hover{background:var(--red-ink)}
.herosearch button svg{fill:currentColor}

/* =========================================================
   tool cards (home)
   ========================================================= */
.tools{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);grid-template-columns:1fr}
@media(min-width:760px){.tools{grid-template-columns:1fr 1fr}}
.toolcard{background:var(--card);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px;
  position:relative;transition:background .25s,color .25s;min-height:200px}
.toolcard:hover{background:var(--ink);color:var(--paper)}
.toolcard:hover .toolcard__text{color:rgba(243,241,234,.7)}
.toolcard:hover .toolcard__cta{color:#fff}
.toolcard:hover .toolcard__ico{border-color:rgba(243,241,234,.4)}
.toolcard__n{font-size:var(--t-xs);font-weight:700;color:var(--red);letter-spacing:.1em}
.toolcard__ico{width:48px;height:48px;border:1.5px solid var(--line);border-radius:999px;display:grid;place-items:center;margin-bottom:4px}
.toolcard__ico svg{width:24px;height:24px}
.toolcard__title{font-size:var(--t-lg);font-weight:800;letter-spacing:-.025em;line-height:1.02;max-width:18ch}
.toolcard__text{font-size:var(--t-sm);color:var(--ink-2);max-width:42ch;line-height:1.4}
.toolcard__cta{margin-top:auto;font-size:var(--t-sm);font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em}

/* =========================================================
   page header lede + big search (product page)
   ========================================================= */
.phead__lede{margin-top:18px;font-size:var(--t-md);color:var(--ink-2);max-width:60ch;line-height:1.4}
.bigsearch{display:flex;margin-top:28px;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);height:64px;max-width:720px}
.bigsearch input{flex:1;border:none;background:none;outline:none;padding:0 22px;font-size:var(--t-md);min-width:0}
.bigsearch button{flex:none;width:64px;display:grid;place-items:center;background:var(--ink);color:var(--paper);border:none;cursor:pointer;transition:background .2s}
.bigsearch button:hover{background:var(--red)}
.hintchips{margin-top:14px;font-size:var(--t-sm);color:var(--muted)}

/* =========================================================
   product search results
   ========================================================= */
.pstate{padding:48px 0;color:var(--muted);font-size:var(--t-md);display:flex;align-items:center;gap:12px}
.pstate--idle{color:var(--ink-2)}
.pstate--err{color:var(--red-ink)}
.spinner{width:18px;height:18px;border:2px solid var(--hair);border-top-color:var(--red);border-radius:999px;
  display:inline-block;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

.psummary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--line);border-bottom:1px solid var(--hair);padding:16px 0;margin-bottom:8px}
.psummary__main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.psummary__v{font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em}
.psummary__k{font-size:var(--t-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.psummary__range{font-size:var(--t-md);font-weight:700;color:var(--ink)}

.pofferlist{display:flex;flex-direction:column}
.poffer{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:16px 0;
  border-bottom:1px solid var(--hair)}
.poffer.is-cheapest{background:linear-gradient(90deg,rgba(226,35,26,.06),transparent 60%);
  box-shadow:inset 3px 0 0 var(--red);padding-left:14px;padding-right:8px}
.poffer__img{width:72px;height:90px;background:var(--paper-pure);border:1px solid var(--hair);overflow:hidden}
.poffer__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.poffer__main{min-width:0}
.poffer__store{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.poffer__logo{width:18px;height:18px;border-radius:4px;object-fit:contain;background:#fff}
.poffer__badge{background:var(--red);color:#fff;font-size:9px;padding:2px 7px;border-radius:999px;letter-spacing:.08em}
.poffer__name{font-size:var(--t-md);font-weight:600;margin:3px 0 5px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poffer__meta{font-size:var(--t-xs);color:var(--muted)}
.poffer__meta a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.poffer__meta a:hover{color:var(--red)}
.poffer__bar{margin-top:8px;height:4px;background:rgba(17,17,16,.07);border-radius:2px;overflow:hidden;max-width:320px}
.poffer__bar span{display:block;height:100%;background:var(--ink)}
.poffer.is-cheapest .poffer__bar span{background:var(--red)}
.poffer__price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:96px}
.poffer__now{font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1}
.poffer.is-cheapest .poffer__now{color:var(--red)}
.poffer__old{font-size:var(--t-sm);color:var(--muted);text-decoration:line-through}
.poffer__disc{font-size:var(--t-xs);font-weight:700;color:var(--red)}
.datacredit{margin-top:24px;font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}

/* =========================================================
   shopping-list optimizer
   ========================================================= */
.listtool{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(min-width:920px){.listtool{grid-template-columns:minmax(0,360px) minmax(0,1fr)}}
.listtool__input{background:var(--card);padding:22px;display:flex;flex-direction:column;gap:14px}
.listtool__input textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:14px;resize:vertical;
  font-family:var(--mono);font-size:var(--t-sm);line-height:1.7;min-height:200px;background:var(--paper-pure)}
.listtool__input textarea:focus{outline:none;border-color:var(--red)}
.listtool__btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{font-size:var(--t-sm);font-weight:600;padding:11px 18px;border:1.5px solid var(--line);border-radius:999px;transition:.2s;cursor:pointer;background:var(--card)}
.btn:hover{background:rgba(17,17,16,.06)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:var(--red);border-color:var(--red)}
.listtool__out{background:var(--card);padding:22px;min-width:0}

.lcards{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);grid-template-columns:1fr;margin-bottom:22px}
@media(min-width:620px){.lcards{grid-template-columns:repeat(3,1fr)}}
.lcard{background:var(--card);padding:18px}
.lcard--accent{box-shadow:inset 0 3px 0 var(--red)}
.lcard--save{background:var(--ink);color:var(--paper)}
.lcard__k{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);margin-bottom:10px}
.lcard--save .lcard__k{color:rgba(243,241,234,.6)}
.lcard__store{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--t-md)}
.lcard__store img{width:22px;height:22px;border-radius:5px;object-fit:contain;background:#fff}
.lcard__big{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1}
.lcard__sub{font-size:var(--t-sm);color:var(--ink-2);margin-top:8px}
.lcard--save .lcard__sub{color:rgba(243,241,234,.7)}
.lcard__note{font-size:var(--t-xs);color:var(--muted);margin-top:8px;line-height:1.35}

.storeranking{display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-bottom:22px}
.srow{background:var(--card);display:grid;grid-template-columns:minmax(90px,1.2fr) minmax(60px,2fr) auto auto;
  gap:12px;align-items:center;padding:11px 14px;font-size:var(--t-sm)}
.srow.is-best{box-shadow:inset 3px 0 0 var(--red)}
.srow__store{display:flex;align-items:center;gap:8px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow__store img{width:18px;height:18px;border-radius:4px;object-fit:contain;background:#fff;flex:none}
.srow__bar{height:6px;background:rgba(17,17,16,.07);border-radius:3px;overflow:hidden}
.srow__bar span{display:block;height:100%;background:var(--ink)}
.srow.is-best .srow__bar span{background:var(--red)}
.srow__cnt{color:var(--muted);font-size:var(--t-xs)}
.srow__total{font-weight:800;text-align:right;min-width:64px}

.ltable{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.ltable th{text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  padding:10px 10px;border-bottom:2px solid var(--line);font-weight:700}
.ltable th.tr{text-align:right}
.ltable td{padding:11px 10px;border-bottom:1px solid var(--hair);vertical-align:middle}
.lrow .litem{font-weight:600;text-transform:capitalize}
.lrow .lprod{color:var(--ink-2);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lstore{white-space:nowrap}
.lrow .lstore img{width:16px;height:16px;border-radius:3px;object-fit:contain;background:#fff;vertical-align:-3px;margin-right:6px}
.lrow .lprice{text-align:right;font-weight:800;white-space:nowrap}
.lrow--miss{color:var(--muted)}
.lrow--miss .lmiss{text-align:right;font-style:italic}

/* =========================================================
   MOBILE hardening
   ========================================================= */
.hero h1{overflow-wrap:break-word}
@media(max-width:680px){
  .masthead__grid{gap:10px;min-height:64px}
  .herosearch{height:50px}
  .poffer__name{font-size:var(--t-sm)}
}
@media(max-width:560px){
  .poffer{grid-template-columns:54px 1fr auto;gap:11px}
  .poffer__img{width:54px;height:70px}
  .poffer__now{font-size:20px}
  .poffer__price{min-width:74px}
  .poffer__bar{display:none}
  .psummary__range{font-size:var(--t-sm)}
  .ltable .lprod{display:none}            /* keep item / store / price on small screens */
  .ltable th:nth-child(2){display:none}
  .srow{grid-template-columns:1fr auto auto;gap:8px}
  .srow__bar{display:none}
  .hero__sub .herosearch{max-width:none}
}
@media(max-width:380px){
  .lang{padding:5px 4px}
  .brand{font-size:19px}
}

/* =========================================================
   v3 — action-first header, autocomplete, product filters,
   add-to-list, toast
   ========================================================= */
.masthead__grid{gap:clamp(10px,1.4vw,18px)}
.brand{flex:none}

.hsearch{flex:1 1 auto;min-width:0;display:flex;align-items:center;height:48px;position:relative;
  border:2px solid var(--line);border-radius:999px;background:var(--card);padding-left:16px;max-width:720px}
.hsearch__ico{fill:var(--muted);flex:none}
.hsearch__input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--t-md);padding:0 12px}
.hsearch__input::placeholder{color:var(--muted)}
.hsearch__btn{flex:none;height:100%;padding:0 24px;background:var(--red);color:#fff;font-weight:700;
  border-radius:0 999px 999px 0;font-size:var(--t-sm);letter-spacing:.02em;cursor:pointer;transition:background .2s}
.hsearch__btn:hover{background:var(--red-ink)}
.hsearch__sug{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);border:1.5px solid var(--line);
  border-radius:14px;overflow:hidden;z-index:70;box-shadow:0 18px 44px rgba(0,0,0,.14)}
.qsug__i{display:block;width:100%;text-align:left;padding:11px 18px;font-size:var(--t-sm);
  text-transform:capitalize;border-bottom:1px solid var(--hair)}
.qsug__i:last-child{border-bottom:none}
.qsug__i:hover{background:rgba(17,17,16,.06)}

.burger{display:flex}
@media(min-width:761px){.langswitch{margin-left:2px}}
@media(max-width:760px){
  .headlist{display:none}
  .masthead__grid{flex-wrap:wrap;row-gap:10px}
  .brand{order:0;margin-right:auto}
  .langswitch{order:1}
  .burger{order:2}
  .hsearch{order:5;flex-basis:100%;max-width:none;height:46px}
}

/* product filters */
.pfilters{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin:6px 0 16px}
.pfilters__sort{display:flex;gap:6px}
.pchip{font-size:var(--t-sm);font-weight:600;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;transition:.2s}
.pchip:hover{background:rgba(17,17,16,.06)}
.pchip.is-active{background:var(--ink);color:var(--paper)}
.pselect{font:inherit;font-size:var(--t-sm);font-weight:600;padding:8px 16px;border:1.5px solid var(--line);
  border-radius:999px;background:var(--card);cursor:pointer;max-width:62vw}

/* offer: store logo + add-to-list */
.poffer{grid-template-columns:60px 1fr auto}
.poffer__logo{width:60px;height:60px;border:1px solid var(--hair);border-radius:10px;display:grid;place-items:center;background:#fff;overflow:hidden}
.poffer__logo img{width:100%;height:100%;object-fit:contain;padding:7px}
.poffer__logo b{font-size:var(--t-sm);font-weight:800;color:var(--muted);text-transform:uppercase}
.poffer__add{margin-top:7px;font-size:var(--t-xs);font-weight:700;padding:5px 11px;border:1.5px solid var(--line);
  border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.poffer__add:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:560px){
  .poffer{grid-template-columns:46px 1fr auto;gap:11px}
  .poffer__logo{width:46px;height:46px}
}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);
  padding:13px 20px;border-radius:999px;font-size:var(--t-sm);font-weight:600;z-index:90;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);box-shadow:0 12px 32px rgba(0,0,0,.28);max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#ff8a82;margin-left:8px;font-weight:700}
.toast a:hover{color:#fff}

/* =========================================================
   v4 — days-left badge (ending soon) + favorites
   ========================================================= */
.card__days{position:absolute;top:0;right:0;background:var(--ink);color:var(--paper);
  font-size:var(--t-xs);font-weight:700;padding:5px 9px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.card__days.is-urgent{background:var(--red)}

.phead__titlerow{display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.favbtn{font-size:var(--t-sm);font-weight:700;padding:10px 18px;border:1.5px solid var(--line);border-radius:999px;
  display:inline-flex;align-items:center;gap:.4em;transition:.2s;cursor:pointer;white-space:nowrap}
.favbtn:hover{background:rgba(17,17,16,.06)}
.favbtn.is-on{background:var(--red);color:#fff;border-color:var(--red)}

/* =========================================================
   v5 — functional hero (search-led, less marketing)
   ========================================================= */
.hero--fn{padding-block:clamp(28px,4vw,56px) clamp(28px,4vw,52px)}
.hero__h{font-size:clamp(30px,5vw,66px);font-weight:800;letter-spacing:-.035em;line-height:.96;
  text-transform:uppercase;margin:8px 0 24px}
.hero__h .hl{color:var(--red)}
.herosearch--big{height:clamp(56px,6vw,68px);max-width:780px;padding-left:20px;align-items:center}
.herosearch--big .herosearch__ico{fill:var(--muted);flex:none}
.herosearch--big input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--t-md);padding:0 14px}
.herosearch--big input::placeholder{color:var(--muted)}
.herosearch--big button{flex:none;height:100%;padding:0 clamp(20px,2.4vw,34px);background:var(--red);color:#fff;
  font-weight:700;border:none;border-radius:0;font-size:var(--t-sm);letter-spacing:.02em;cursor:pointer;transition:background .2s}
.herosearch--big button:hover{background:var(--red-ink)}
.hero__chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.hero__chips-l{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-right:2px}
.hchip{font-size:var(--t-sm);font-weight:600;padding:7px 14px;border:1.5px solid var(--hair);border-radius:999px;
  transition:.2s;text-transform:capitalize;cursor:pointer}
.hchip:hover{border-color:var(--line);background:rgba(17,17,16,.05)}
.stats--compact{margin-top:clamp(34px,4.5vw,60px)}
.stats--compact .stat__n{font-size:clamp(26px,3.2vw,44px)}
@media(max-width:560px){ .herosearch--big{max-width:none} }

/* =========================================================
   v6 — leaflet-page thumbnail in product results + deep link
   ========================================================= */
.poffer__thumb{position:relative;display:block;width:60px;height:84px;border:1px solid var(--hair);
  border-radius:8px;overflow:hidden;background:#fff;flex:none;transition:box-shadow .2s,transform .2s}
.poffer__thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.poffer__thumb:hover{box-shadow:0 4px 16px rgba(0,0,0,.18);transform:translateY(-1px)}
.poffer__thumb:hover::after{content:"";position:absolute;inset:0;border:2px solid var(--red);border-radius:8px}
.poffer__pageno{position:absolute;right:3px;bottom:3px;background:var(--ink);color:var(--paper);
  font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px;font-variant-numeric:tabular-nums}
.lprod a{text-decoration:underline;text-underline-offset:2px}
.lprod a:hover{color:var(--red)}
@media(max-width:560px){ .poffer__thumb{width:46px;height:64px} }