/* Geek.az — site.css. Colours are derived from the shop's own logo/storefront (see DECISIONS.md) and every pair is contrast-gated. */
@font-face{font-family:"Unbounded";src:url("../fonts/Unbounded.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Onest";src:url("../fonts/Onest.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#FFFFFF; --paper-2:#F7F3EB; --paper-3:#EFE9DC;
  --ink:#0B0A0E; --ink-2:#514C57; --ink-3:#6E6875;
  --line:#E3DDD0; --line-2:#CFC7B8;
  --red:#E00000; --red-ink:#C80000; --red-soft:#FCE4E2; --red-deep:#9E0000;
  --blue:#3444B5; --blue-soft:#E3E7F9; --blue-ink:#2A3796;
  --sand:#F1E8D6; --sand-ink:#665633;
  --green:#12703B; --green-soft:#DDF3E4;
  --amber:#8A5A00; --amber-soft:#FFF0CC;
  --ink-strong:#000000;
  --shadow:0 1px 2px rgba(11,10,14,.06),0 12px 32px -12px rgba(11,10,14,.18);
  --shadow-lg:0 2px 6px rgba(11,10,14,.08),0 30px 60px -24px rgba(11,10,14,.35);
  --r:14px; --r-sm:10px; --r-lg:22px;
  --ic-ink:#0B0A0E; --ic-red:#E00000; --ic-blue:#3444B5; --ic-paper:#FFFFFF; --ic-sand:#EAD9B3;
  --font-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Unbounded","Onest",system-ui,sans-serif;
  --header-h:64px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --paper:#0F0E12; --paper-2:#17161C; --paper-3:#1F1D25;
  --ink:#F4F1EA; --ink-2:#C2BCB4; --ink-3:#A29B93;
  --line:#2B2932; --line-2:#3A3742;
  --red:#FF4B3E; --red-ink:#FF6A5F; --red-soft:#3B1613; --red-deep:#FF4B3E;
  --blue:#A9B6FF; --blue-soft:#1E2246; --blue-ink:#C0CAFF;
  --sand:#2A2419; --sand-ink:#E3CFA0;
  --green:#5BD48A; --green-soft:#12301E;
  --amber:#FFCF6E; --amber-soft:#3A2A05;
  --ink-strong:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 30px 60px -24px rgba(0,0,0,.8);
  --ic-ink:#F4F1EA; --ic-red:#FF4B3E; --ic-blue:#A9B6FF; --ic-paper:#0F0E12; --ic-sand:#8C7A55;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color .15s ease}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.35rem,2.6vw,2rem)}
h3{font-size:1.1rem}
p{margin:0}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2rem,1180px);margin-inline:auto}
.icon{width:1.25em;height:1.25em;fill:none;flex:none}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}
.kicker{font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)}
.sec{padding-block:clamp(2.6rem,6vw,4.5rem)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:.8rem 1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.sec-head p{margin-top:.35rem;color:var(--ink-2);max-width:56ch}
.sec-head .btn{white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.62rem 1.1rem;border-radius:999px;font-weight:600;border:1.5px solid transparent;transition:transform .12s ease,background .15s,color .15s,border-color .15s;line-height:1.2;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
html[data-theme="dark"] .btn-primary{color:#0F0E12}
.btn-primary:hover{filter:brightness(.94)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-soft{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.btn-wa{background:var(--green);color:#fff;border-color:var(--green)}
html[data-theme="dark"] .btn-wa{color:#0F0E12}
.btn-sm{min-height:38px;padding:.45rem .9rem;font-size:.9rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
.logo{display:flex;align-items:center;gap:.5rem;flex:none}
.logo svg{height:34px;width:auto}
.nav{display:none;gap:.25rem;margin-left:.5rem}
.nav a{padding:.5rem .8rem;border-radius:999px;font-weight:600;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--paper-2);color:var(--ink)}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--ink);position:relative}
.ibtn:hover{background:var(--paper-2)}
.ibtn .icon{width:22px;height:22px}
.badge{position:absolute;top:4px;right:2px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font-display)}
html[data-theme="dark"] .badge{color:#0F0E12}
.badge[data-n="0"]{display:none}
.lang{display:flex;border:1.5px solid var(--line-2);border-radius:999px;overflow:hidden}
.lang a{padding:.3rem .45rem;font-size:.8rem;font-weight:700;color:var(--ink-2);font-family:var(--font-display)}
.lang a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.menu-btn{display:inline-flex}
@media (min-width:920px){.nav{display:flex}.menu-btn{display:none}}
@media (max-width:479px){.hdr-actions [data-theme-toggle]{display:none}}
.sheet{position:fixed;inset:0;z-index:60;background:var(--paper);padding:1rem;display:flex;flex-direction:column;gap:.5rem;overflow:auto}
.sheet a{font-family:var(--font-display);font-size:1.4rem;font-weight:700;padding:.8rem .5rem;border-bottom:1px solid var(--line)}
.sheet .sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.sheet .sheet-foot{margin-top:auto;display:grid;gap:.6rem;padding-top:1rem}
.sheet .sheet-foot .btn-ghost{justify-content:flex-start}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2rem,5vw,4.5rem) clamp(1.5rem,4vw,3rem);position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.05fr 1fr;gap:3rem}}
.hero h1{margin:.6rem 0 1rem}
.hero h1 em{font-style:normal;color:var(--red-ink)}
.hero .lead{font-size:1.08rem;color:var(--ink-2);max-width:52ch;margin-bottom:1.4rem}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.7rem}
.open-pill{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-size:.9rem;color:var(--ink-2)}
.open-pill i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.collage{position:relative;aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%}
.collage .tile{position:absolute;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--paper-2);border:4px solid var(--paper);display:grid;place-items:center;padding:clamp(8px,3.4vw,16px)}
.collage .tile img{width:100%;height:100%;object-fit:cover}
.collage .tile > svg{width:100%;height:100%}
.collage .tile{aspect-ratio:1/1}
.collage .tile.tint-red{background:var(--red-soft)}.collage .tile.tint-blue{background:var(--blue-soft)}.collage .tile.tint-sand{background:var(--sand)}.collage .tile.tint-ink{background:var(--paper-3)}
.collage .t1{left:2%;top:8%;width:38%;transform:rotate(-6deg)}
.collage .t2{right:4%;top:2%;width:34%;transform:rotate(5deg)}
.collage .t3{left:6%;bottom:4%;width:34%;transform:rotate(4deg)}
.collage .t4{right:2%;bottom:6%;width:38%;transform:rotate(-5deg)}
.collage .t5{left:33%;top:33%;width:34%;transform:rotate(2deg);z-index:2}
.collage .tile{transition:transform .35s cubic-bezier(.2,.8,.25,1),box-shadow .35s ease}
.collage .tile > svg{transform-origin:50% 60%}
/* Each hero tile is picked up on hover and its illustration plays the motion that suits it.
   Motions are paired with the artwork in data/catalog.json, not hard-coded to a position. */
@media (hover:hover){
  .collage .tile:hover{z-index:6;transform:translateY(-9px) scale(1.05) rotate(0deg);box-shadow:0 4px 10px rgba(11,10,14,.10),0 30px 52px -18px rgba(11,10,14,.42)}
  .collage .tile:hover > svg{animation-duration:.75s;animation-timing-function:cubic-bezier(.34,1.4,.5,1);animation-fill-mode:both}
  .collage .fx-pop:hover > svg{animation-name:hv-pop}
  .collage .fx-nudge:hover > svg{animation-name:hv-nudge}
  .collage .fx-tilt:hover > svg{animation-name:hv-tilt}
  .collage .fx-launch:hover > svg{animation-name:hv-launch}
  .collage .fx-bounce:hover > svg{animation-name:hv-bounce}
}
/* No hover on a phone, so the tiles introduce themselves once, staggered. */
@media (hover:none){
  .collage .tile > svg{animation-duration:.75s;animation-timing-function:cubic-bezier(.34,1.4,.5,1);animation-fill-mode:both}
  .collage .fx-pop > svg{animation-name:hv-pop}
  .collage .fx-nudge > svg{animation-name:hv-nudge}
  .collage .fx-tilt > svg{animation-name:hv-tilt}
  .collage .fx-launch > svg{animation-name:hv-launch}
  .collage .fx-bounce > svg{animation-name:hv-bounce}
  .collage .t1 > svg{animation-delay:.35s}.collage .t2 > svg{animation-delay:.5s}.collage .t3 > svg{animation-delay:.65s}
  .collage .t4 > svg{animation-delay:.8s}.collage .t5 > svg{animation-delay:.95s}
}
@keyframes hv-pop{0%{transform:none}35%{transform:scale(1.16) rotate(-5deg)}65%{transform:scale(.97) rotate(2deg)}100%{transform:none}}
@keyframes hv-nudge{0%{transform:none}30%{transform:translateY(-10%) rotate(-3deg)}62%{transform:translateY(3%) rotate(2deg)}100%{transform:none}}
@keyframes hv-tilt{0%{transform:none}25%{transform:rotate(-11deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes hv-launch{0%{transform:none}32%{transform:translateY(-15%) scale(1.06)}70%{transform:translateY(4%) scale(.98)}100%{transform:none}}
@keyframes hv-bounce{0%{transform:none}30%{transform:scale(1.12,.9)}56%{transform:scale(.94,1.08)}80%{transform:scale(1.03,.98)}100%{transform:none}}
.collage .blob{position:absolute;inset:10% 6%;border-radius:40% 60% 55% 45%/50% 40% 60% 50%;background:var(--red-soft);z-index:-1}
.collage .stamp{position:absolute;left:50%;top:-6px;transform:translateX(-50%) rotate(-3deg);background:var(--ink);color:var(--paper);font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:.35rem .7rem;border-radius:999px;z-index:3;white-space:nowrap}
.marquee{border-block:1px solid var(--line);background:var(--paper-2);overflow:hidden;white-space:nowrap;padding:.55rem 0;font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.marquee span{display:inline-block;padding-inline:1.4rem}
.marquee span::before{content:"◆";color:var(--red);margin-right:1.4rem;font-size:.6rem;vertical-align:middle}
.marquee-inner{display:inline-block;animation:mq 42s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-inner{animation:none}}

/* ---------- category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (min-width:680px){.cat-grid{grid-template-columns:repeat(4,1fr);gap:1rem}}
.cat{display:flex;flex-direction:column;gap:.7rem;padding:1rem;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);transition:transform .15s ease,box-shadow .15s ease}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cat .ill{width:100%;aspect-ratio:5/4;border-radius:var(--r);display:grid;place-items:center;padding:12%}
.cat .ill svg{width:100%;height:100%}
.cat h3{font-size:1rem}
.cat p{font-size:.85rem;color:var(--ink-2)}
.tint-red{background:var(--red-soft)}.tint-blue{background:var(--blue-soft)}.tint-sand{background:var(--sand)}.tint-ink{background:var(--paper-3)}

/* ---------- occasions ---------- */
.occ-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
@media (min-width:900px){.occ-row{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
.occ{scroll-snap-align:start;padding:1rem;border-radius:var(--r-lg);border:1px solid var(--line);display:flex;flex-direction:column;gap:.3rem;min-height:130px;transition:transform .15s ease}
.occ:hover{transform:translateY(-3px)}
.occ .em{font-size:1.7rem;line-height:1}
.occ h3{font-size:1rem;margin-top:.4rem}
.occ p{font-size:.82rem;color:var(--ink-2)}

/* ---------- product cards ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.frame{aspect-ratio:4/3;background:var(--paper-2);display:grid;place-items:center;overflow:hidden;position:relative}
.frame img{width:100%;height:100%;object-fit:cover}
.frame svg{width:62%;height:62%}
.frame.is-icon.tint-red svg,.frame.is-icon.tint-blue svg,.frame.is-icon.tint-sand svg,.frame.is-icon.tint-ink svg{filter:drop-shadow(0 8px 14px rgba(11,10,14,.12))}
.card-body{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card h3{font-size:.95rem;font-family:var(--font-body);font-weight:700;line-height:1.3}
.card h3 a::after{content:"";position:absolute;inset:0}
.card .cat-tag{font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.price{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.price.ask{font-family:var(--font-body);font-weight:600;font-size:.88rem;color:var(--blue-ink)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.3rem;flex-wrap:wrap}
.card-foot .btn{flex:1 1 auto}
.card .btn{position:relative;z-index:2}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--paper-2);color:var(--ink-2)}
.pill.ok{background:var(--green-soft);color:var(--green)}
.pill.ask{background:var(--blue-soft);color:var(--blue-ink)}
.pill.var{background:var(--sand);color:var(--sand-ink)}
.badge-age{position:absolute;left:.6rem;top:.6rem;background:var(--paper);color:var(--ink);font-size:.7rem;font-weight:700;padding:.2rem .5rem;border-radius:999px;box-shadow:var(--shadow);z-index:1;font-family:var(--font-display)}

/* ---------- finder promo / services ---------- */
.promo{display:grid;gap:1.5rem;align-items:center;border-radius:var(--r-lg);background:var(--ink);color:var(--paper);padding:clamp(1.4rem,4vw,2.6rem);position:relative;overflow:hidden}
html[data-theme="dark"] .promo{background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
@media (min-width:800px){.promo{grid-template-columns:1.2fr .8fr}}
.promo h2{color:inherit}
.promo p{opacity:.85;margin:.6rem 0 1.2rem;max-width:48ch}
.promo .art{display:grid;place-items:center}
.promo .art svg{width:min(240px,60%);height:auto;--ic-ink:#F4F1EA;--ic-paper:#0B0A0E}
html[data-theme="dark"] .promo .art svg{--ic-ink:#F4F1EA;--ic-paper:#0F0E12}
.promo .btn-primary{background:var(--red);border-color:var(--red)}
.svc{display:grid;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem;background:var(--paper-2)}
@media (min-width:700px){.svc{grid-template-columns:auto 1fr auto}}
.svc .ill{width:96px;aspect-ratio:1;border-radius:var(--r);display:grid;place-items:center;padding:14px}
.svc .ill svg{width:100%;height:100%}

/* ---------- store ---------- */
.store{display:grid;gap:1rem;grid-template-areas:"visual" "facts" "visit"}
@media (min-width:900px){.store{grid-template-columns:.95fr 1.05fr;grid-template-areas:"visual facts" "visit facts";gap:1.1rem 2rem;align-items:start}}
.store-visual{grid-area:visual}
.store-visit{grid-area:visit}
.store-facts{grid-area:facts;display:grid;gap:.8rem;align-content:start}
.store .photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;max-width:360px;max-height:480px;background:var(--paper-2);border:1px solid var(--line)}
.store .photo.ill{aspect-ratio:4/3;max-width:none;max-height:none;background:var(--sand);display:grid;place-items:center;padding:clamp(14px,4%,30px)}
.store .photo.ill > svg{width:100%;height:100%}
.store .photo img{width:100%;height:100%;object-fit:cover}
.visit{padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2)}
.visit h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-family:var(--font-body);font-weight:700}
.visit p{margin-top:.4rem;color:var(--ink-2);font-size:.92rem}
.visit .links{margin-top:.9rem}
.fact{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.fact .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.fact .ic .icon{width:21px;height:21px}
.fact h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-family:var(--font-body);font-weight:700;margin-bottom:.3rem}
.fact p{font-weight:600;line-height:1.4}
.fact p + p{margin-top:.15rem}
.fact .sub{font-weight:400;color:var(--ink-2);font-size:.88rem}
.fact a:hover{color:var(--ink-strong)}
.fact .pill{margin-top:.5rem}
.fact-grid{display:grid;gap:.8rem}
@media (min-width:560px){.fact-grid{grid-template-columns:1fr 1fr}}
.ic-red{background:var(--red-soft);color:var(--red-ink)}
.ic-blue{background:var(--blue-soft);color:var(--blue-ink)}
.ic-green{background:var(--green-soft);color:var(--green)}
.ic-sand{background:var(--sand);color:var(--sand-ink)}
.wa-band{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.1rem;border-radius:var(--r);background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 32%,transparent)}
.wa-band strong{display:block;font-family:var(--font-display);font-size:1rem}
.wa-band span{font-size:.88rem;color:var(--ink-2)}
.wa-band .btn{flex:none}
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.links{display:flex;flex-wrap:wrap;gap:.5rem}
.hours-badge{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}

/* ---------- filters / catalogue ---------- */
.filters{margin-bottom:1rem;max-width:640px}
.filters .search input{min-height:52px;font-size:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.field select,.field input,.field textarea{min-height:44px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:.55rem .75rem;background:var(--paper);width:100%}
.field textarea{min-height:96px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.field .err{color:var(--red-ink);font-size:.82rem;font-weight:600;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}
.search{position:relative}
.search .icon{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--ink-3);width:20px;height:20px}
.search input{padding-left:2.5rem;padding-right:2.6rem}
.q-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:var(--ink-2)}
.q-clear:hover{background:var(--paper-2);color:var(--ink-strong)}
.q-clear .icon{width:18px;height:18px}
.search input::-webkit-search-cancel-button{display:none}
.search-note{font-size:.9rem;color:var(--amber);background:var(--amber-soft);padding:.6rem .8rem;border-radius:var(--r-sm);font-weight:600;margin-bottom:1rem}
mark{background:var(--amber-soft);color:var(--ink);border-radius:4px;padding:0 .12em}
.active-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.afilter{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .35rem .3rem .8rem;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-2);font-size:.88rem;font-weight:600}
.afilter-k{color:var(--ink-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.afilter button{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:var(--ink-2)}
.afilter button:hover{background:var(--paper-3);color:var(--ink-strong)}
.afilter.neg{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 30%,transparent);text-decoration:line-through;text-decoration-color:var(--red-ink)}
.afilter.neg .afilter-k{color:var(--red-ink);text-decoration:none}
.afilter .icon{width:15px;height:15px}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;min-height:38px;padding:.35rem .85rem;border-radius:999px;border:1.5px solid var(--line-2);font-weight:600;font-size:.88rem;background:var(--paper);color:var(--ink);cursor:pointer;user-select:none}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip[aria-pressed="true"],.chip:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;color:var(--ink-2);font-weight:600}
.empty{padding:2.5rem 1.5rem;text-align:center;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);color:var(--ink-2)}
.empty .btn{margin-top:1rem}

/* ---------- product page ---------- */
.pdp{display:grid;gap:1.5rem}
@media (min-width:860px){.pdp{grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}}
.pdp .frame{border-radius:var(--r-lg);border:1px solid var(--line);aspect-ratio:4/3;max-width:520px}
.pdp .frame svg{width:52%;height:52%}
.pdp h1{font-size:clamp(1.5rem,3vw,2.2rem);margin:.4rem 0 .8rem}
.pdp .price{font-size:1.7rem}
.pdp .price.ask{font-size:1rem}
.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.2rem 0}
.meta div{padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2)}
.meta dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700}
.meta dd{margin:.15rem 0 0;font-weight:600}
.buy{display:grid;gap:.8rem;padding:1.1rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow)}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:999px;overflow:hidden}
.stepper button{width:42px;height:42px;display:grid;place-items:center}
.stepper button:hover{background:var(--paper-2)}
.stepper output{min-width:36px;text-align:center;font-weight:700;font-family:var(--font-display)}
.buy-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.buy-row .btn{flex:1}
.note-box{padding:.9rem 1rem;border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue-ink);font-size:.9rem;font-weight:500}
.crumbs{display:flex;gap:.4rem;align-items:center;font-size:.85rem;color:var(--ink-3);flex-wrap:wrap}
.crumbs a:hover{color:var(--ink-strong)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tags a{padding:.3rem .7rem;border-radius:999px;background:var(--paper-2);font-size:.8rem;font-weight:600;color:var(--ink-2)}
.tags a:hover{background:var(--paper-3);color:var(--ink-strong)}
.desc{font-size:1.05rem;color:var(--ink-2);max-width:52ch}

/* ---------- basket ---------- */
.basket{display:grid;gap:1.5rem}
@media (min-width:900px){.basket{grid-template-columns:1.1fr .9fr;gap:2rem;align-items:start}
/* with nothing to check out there is no second column, so don't leave its space empty */
.basket:has([data-summary][hidden]){grid-template-columns:1fr}
.basket:has([data-summary][hidden]) .basket-main{width:100%;max-width:760px;margin-inline:auto}}
.basket-main{display:grid;gap:1rem;align-content:start;min-width:0}
.keep-shopping{justify-self:start}
.recs h2{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.75rem}
.recs .hits{grid-template-columns:1fr}
.lines{display:grid;gap:.7rem}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:.8rem;align-items:center;padding:.7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);transition:transform .15s ease,box-shadow .15s ease}
.line:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.line .frame{border-radius:var(--r-sm);aspect-ratio:1}
.line .frame svg{width:60%;height:60%}
.line h3{font-size:.95rem;font-family:var(--font-body);font-weight:700}
.line .var{font-size:.8rem;color:var(--ink-2)}
.line .ctl{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;flex-wrap:wrap}
.line .stepper button{width:38px;height:38px}
.line .rm{display:inline-flex;align-items:center;gap:.3rem;color:var(--ink-3);font-size:.82rem;font-weight:600;padding:.4rem .5rem;border-radius:8px}
.line .rm:hover{color:var(--red-ink);background:var(--red-soft)}
.line .sum{font-family:var(--font-display);font-weight:700;text-align:right}
.line .sum.ask{font-family:var(--font-body);font-weight:600;font-size:.82rem;color:var(--blue-ink);max-width:8rem}
.summary{position:sticky;top:calc(var(--header-h) + 1rem);display:grid;gap:1rem;padding:1.2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2)}
.summary h2{font-size:1.05rem}
.summary .tot{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-display);font-weight:700;font-size:1.25rem;padding-top:.8rem;border-top:1px solid var(--line-2)}
.summary .rows{display:grid;gap:.35rem;font-size:.92rem;color:var(--ink-2)}
.quote-note{font-size:.82rem;color:var(--amber);background:var(--amber-soft);padding:.5rem .7rem;border-radius:var(--r-sm);font-weight:600}
.summary .rows div{display:flex;justify-content:space-between;gap:1rem}
.form{display:grid;gap:.9rem}
.form .two{display:grid;gap:.9rem}
@media (min-width:560px){.form .two{grid-template-columns:1fr 1fr}}
.radios{display:grid;gap:.6rem}
@media (min-width:560px){.radios{grid-template-columns:1fr 1fr}}
.radio{position:relative;display:flex;gap:.7rem;align-items:flex-start;padding:.9rem;border:1.5px solid var(--line-2);border-radius:var(--r);cursor:pointer;background:var(--paper)}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio .icon{width:22px;height:22px;color:var(--ink-2);margin-top:2px}
.radio strong{display:block}
.radio span{font-size:.85rem;color:var(--ink-2)}
.radio:has(input:checked){border-color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--ink)}
.radio:has(input:checked) .icon{color:var(--red-ink)}
.consent{font-size:.8rem;color:var(--ink-3)}
.done{display:grid;gap:.9rem;padding:1.4rem;border-radius:var(--r-lg);background:var(--green-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--green) 40%,transparent)}
.done .num{font-family:var(--font-display);font-size:1.6rem;font-weight:800}
.alert{padding:.9rem 1rem;border-radius:var(--r-sm);background:var(--amber-soft);color:var(--amber);font-weight:600;font-size:.9rem}

/* ---------- gift finder ---------- */
/* The page reads as a sequence: ask, then answer. Side-by-side columns left a tall form beside a short
   result list, and the mismatch showed up as dead space whichever way round it was arranged. */
.finder{display:grid;gap:1.3rem}
.finder-form{display:grid;gap:1.2rem;padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2)}
.q-grid{display:grid;gap:1.1rem 2rem;align-items:start}
@media (min-width:760px){.q-grid{grid-template-columns:1fr 1fr}}
.finder-form .chips{gap:.4rem}
.finder-form .chip{min-height:38px;padding:.32rem .78rem;font-size:.86rem}
.q{display:grid;gap:.5rem;min-width:0}
.q > span{font-weight:700}
.finder-foot{display:grid;gap:.9rem;align-items:end;padding-top:1.1rem;border-top:1px solid var(--line)}
@media (min-width:760px){.finder-foot{grid-template-columns:1fr auto}}
.finder-foot textarea{min-height:76px}
.finder-actions{display:flex;gap:.6rem;align-items:center}
.finder-actions .btn-primary{flex:1}
@media (min-width:760px){.finder-actions .btn-primary{flex:none;min-width:210px}}
.finder-results{display:grid;gap:.9rem;align-content:start}
.finder-results .active-filters{margin-bottom:0}
.results-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0}
.results-head,.finder-results .empty,.occ-sec,#store{scroll-margin-top:calc(var(--header-h) + 1.2rem)}
.results-head h2{font-size:1.3rem}
.results-head p{margin-top:.25rem;max-width:60ch}
.near-head{margin:.6rem 0 .2rem}
.near-head h3{font-family:var(--font-display);font-size:1.05rem}
.hits{display:grid;gap:.7rem}
@media (min-width:1100px){.hits{grid-template-columns:1fr 1fr}}
.hit{position:relative;display:grid;grid-template-columns:76px 1fr;gap:.85rem;align-items:center;padding:.7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);transition:transform .15s ease,box-shadow .15s ease}
.hit:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.hit .frame{aspect-ratio:1;border-radius:var(--r-sm)}
.hit .frame svg{width:64%;height:64%}
.hit .frame img{width:100%;height:100%;object-fit:cover}
.hit-main{display:grid;gap:.25rem;min-width:0}
.hit-tags{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.hit h3{font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:1.3}
.hit h3 a::after{content:"";position:absolute;inset:0}
.hit .price{font-size:1rem}
.hit .price.ask{font-size:.85rem}
.hit-buy{grid-column:2/-1;display:flex;justify-content:flex-start}
.hit-buy .btn{position:relative;z-index:2;white-space:nowrap}
@media (min-width:520px){.hit{grid-template-columns:76px 1fr auto}.hit-buy{grid-column:auto;justify-content:flex-end}}
.pill.best{background:var(--red-soft);color:var(--red-ink)}
.why{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.1rem}
.why span{font-size:.7rem;font-weight:600;color:var(--green);background:var(--green-soft);padding:.15rem .5rem;border-radius:999px}
.placeholder{display:grid;place-items:center;text-align:center;padding:1.8rem 1.5rem;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);color:var(--ink-2);gap:.6rem}
.placeholder svg{width:76px;height:76px}
.finder-help{margin-top:.2rem}

/* ---------- occasions page ---------- */
.occ-sec{padding-block:1.6rem;border-top:1px solid var(--line)}
.occ-sec .sec-head h2{display:flex;align-items:center;gap:.5rem}
.occ-sec .sec-head h2 .em{font-size:1.4em}

/* ---------- kassa ---------- */
.kassa{display:grid;gap:.8rem}
.korder{display:grid;gap:.5rem;padding:1rem;border:1px solid var(--line);border-left:6px solid var(--blue);border-radius:var(--r);background:var(--paper)}
.korder[data-status="preparing"]{border-left-color:var(--amber)}
.korder.late{border-left-color:var(--red)}
.korder .top{display:flex;justify-content:space-between;gap:1rem;font-weight:700;font-family:var(--font-display)}
.korder ul{margin:0;padding-left:1.1rem}
.korder .acts{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- footer ---------- */
.site-footer{margin-top:3rem;border-top:1px solid var(--line);background:var(--paper-2);padding:2.5rem 0 1.5rem}
.foot{display:grid;gap:1.6rem}
@media (min-width:620px){.foot{grid-template-columns:1fr 1fr;gap:1.6rem 2rem}}
@media (min-width:1000px){.foot{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}}
.foot h4{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:.6rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot ul{color:var(--ink-2)}
.foot a:hover{color:var(--ink-strong)}
.foot .contact a{display:inline-flex;align-items:center;gap:.5rem}
.foot .contact .icon{width:18px;height:18px;flex:none;color:var(--ink-3)}
.foot .contact a:hover .icon{color:var(--ink-strong)}
.foot .logo svg{height:30px}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
.social{display:flex;gap:.4rem}
.social a{display:inline-flex;width:40px;height:40px;border-radius:999px;border:1.5px solid var(--line-2);align-items:center;justify-content:center;color:var(--ink)}
.social a:hover{border-color:var(--ink)}

/* ---------- toast / misc ---------- */
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--paper);padding:.7rem .7rem .7rem 1.1rem;border-radius:999px;display:flex;align-items:center;gap:.8rem;box-shadow:var(--shadow-lg);z-index:70;transition:transform .2s ease,opacity .2s ease;pointer-events:none;font-weight:600;max-width:calc(100% - 2rem)}
.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast a{background:var(--red);color:#fff;padding:.4rem .8rem;border-radius:999px;font-size:.85rem;white-space:nowrap}
html[data-theme="dark"] .toast a{color:#0F0E12}
.wa-fab{position:fixed;right:1rem;bottom:1rem;z-index:40;width:52px;height:52px;border-radius:999px;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--paper),0 10px 24px -8px rgba(11,10,14,.45);transition:transform .15s ease,box-shadow .15s ease,opacity .25s ease}
.wa-fab.hide{opacity:0;transform:translateY(10px) scale(.9);pointer-events:none}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 0 0 4px var(--paper),0 16px 30px -10px rgba(11,10,14,.5)}
.wa-fab:active{transform:translateY(0)}
html[data-theme="dark"] .wa-fab{color:#0F0E12}
.wa-fab .icon{width:28px;height:28px}
@media (min-width:920px){.wa-fab{right:1.5rem;bottom:1.5rem;width:58px;height:58px}.wa-fab .icon{width:31px;height:31px}}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
.collage .tile{transition:none}.collage .tile > svg,.collage .tile:hover > svg{animation:none}}
.notfound{text-align:center;padding:4rem 1rem}