/* ============================================================
   Figurify — visual system (bright + lively)
   A crisp, light workshop for custom 3D-printed figures.
   Bright white base, a vivid violet lifted with a warm coral,
   Fraunces serif + Hanken Grotesk. Motion evokes a print
   building layer by layer: reveals rise, the hero prints itself.
   ============================================================ */

:root{
  --paper:#F6F8FF;         /* bright cool page base */
  --surface:#FFFFFF;
  --surface-2:#EAF0FF;     /* light blue tint */
  --ink:#15171E;           /* near-black text */
  --muted:#586074;
  --violet:#2563FF;        /* primary = bright blue */
  --violet-2:#5E86FF;      /* light blue / gradients */
  --violet-soft:rgba(37,99,255,.12);
  --coral:#FFC400;         /* accent = vivid yellow */
  --coral-2:#FFD84D;
  --coral-soft:rgba(255,196,0,.20);
  --accent-ink:#8A6D00;    /* dark gold: readable "yellow" text on light */
  --line:#E1E7F5;          /* cool hairline */
  --danger:#E5486B;
  --radius:14px;
  --radius-sm:9px;
  --wrap:1180px;
  --shadow:0 22px 50px -26px rgba(20,30,60,.34);
  --shadow-sm:0 10px 26px -18px rgba(20,30,60,.22);
  --ease:cubic-bezier(.22,.7,.2,1);
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:opacity .28s var(--ease);
}
/* soft, clean color ambiance — behind everything, never overlaps content */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(680px 520px at -6% -4%, rgba(37,99,255,.16), transparent 60%),
    radial-gradient(720px 560px at 106% 2%, rgba(255,196,0,.18), transparent 60%),
    radial-gradient(760px 620px at 50% 118%, rgba(37,99,255,.10), transparent 62%);
}
body.is-leaving{opacity:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.12;margin:0;letter-spacing:-.005em}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.ta-r{text-align:right}
.txt-err{color:var(--danger)}

/* ---------- motion primitives ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes badgePop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes floatUpDown{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Reveal-on-scroll (only when JS is on; content stays visible otherwise) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
/* safety net: if JS never reveals an element (error, no observer, etc.),
   CSS still shows it shortly after load so content is never stuck hidden */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{animation:revealSafety .01s linear 2s forwards}
}
@keyframes revealSafety{to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{
  --b:transparent;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:.74em 1.4em;border-radius:100px;border:1px solid var(--line);
  background:var(--b);color:var(--ink);cursor:pointer;transition:.2s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--b:linear-gradient(120deg,var(--violet),var(--violet-2));border-color:transparent;color:#fff;box-shadow:0 12px 26px -12px rgba(109,59,234,.6)}
.btn--primary:hover{box-shadow:0 18px 34px -12px rgba(109,59,234,.7)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn--sm{padding:.5em 1em;font-size:.85rem}
.btn--lg{padding:.92em 1.8em;font-size:1rem}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn--ok{--b:var(--coral)!important;color:#fff!important;border-color:transparent!important}
.btn--danger{--b:var(--danger)!important;color:#fff!important;border-color:transparent!important}

.link{color:var(--violet);font-weight:600;background:none;border:0;cursor:pointer;font-size:inherit;padding:0}
.link:hover{text-decoration:underline}
.link--danger{color:var(--danger)}
.backlink{display:inline-block;color:var(--muted);font-size:.9rem;margin-bottom:14px;transition:.18s}
.backlink:hover{color:var(--violet);transform:translateX(-3px)}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s}
.nav.is-stuck{box-shadow:0 10px 30px -22px rgba(60,40,110,.4)}
.nav__inner{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.brand__name{font-size:1.22rem}
.brand .mark{transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-6deg) scale(1.08)}
.nav__links{display:flex;gap:26px;margin-left:10px}
.nav__links a{color:var(--muted);font-weight:500;font-size:.95rem;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;border-radius:2px;background:var(--violet);transition:right .25s var(--ease)}
.nav__links a:hover{color:var(--violet)}
.nav__links a:hover::after{right:0}
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{font-size:.82rem;color:var(--ink);border:1px solid var(--line);padding:.42em .72em;border-radius:100px;background:var(--surface);transition:.18s}
.lang span{color:var(--muted)}
.lang:hover{border-color:var(--violet)}
.cartbtn{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:100px;color:var(--ink);background:var(--surface);transition:.2s var(--ease)}
.cartbtn:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
.cartbtn__badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;background:var(--coral);color:#fff;font-size:.7rem;font-weight:700;border-radius:100px;display:grid;place-items:center;font-variant-numeric:tabular-nums;box-shadow:0 4px 10px -3px var(--coral)}
.cartbtn__badge.is-pop{animation:badgePop .45s var(--ease)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__inner{position:relative;z-index:1;padding:104px 24px 92px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__title{font-size:clamp(2.7rem,6.6vw,4.9rem);letter-spacing:-.02em;font-weight:400;max-width:16ch}
.hero__title em{font-style:italic;background:linear-gradient(120deg,var(--violet),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{color:var(--muted);font-size:1.18rem;max-width:48ch;margin:24px 0 34px}

/* ---------- section titles ---------- */
.section-title{font-size:clamp(1.8rem,3.5vw,2.5rem);letter-spacing:-.015em;position:relative;padding-left:22px;font-weight:500}
.section-title::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:9px;border-radius:1px;
  background:linear-gradient(var(--violet),var(--coral))}
/* Reviews heading skips the decorative bar — flagged as too busy right next
   to the star ratings/avatars below it. */
.reviewssection .section-title{padding-left:0}
.reviewssection .section-title::before{display:none}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:96px 24px;align-items:start}
.about__text p{color:var(--muted);font-size:1.1rem;margin-top:22px;max-width:52ch}
.features{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)}
.feature{padding:24px 26px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline;transition:background .2s}
.feature:last-child{border-bottom:0}
.feature:hover{background:var(--surface-2)}
.feature__n{font-family:var(--font-display);color:var(--coral);font-size:1rem;font-weight:600;grid-row:span 2;font-variant-numeric:tabular-nums}
.feature h3{font-size:1.18rem;font-weight:600}
.feature p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------- shop ---------- */
.shop{padding:24px 24px 110px}
.shop__head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.searchbar{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:100px;overflow:hidden;transition:.2s}
.searchbar:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}
.searchbar input{background:none;border:0;color:var(--ink);padding:.64em 1em;font-size:.92rem;outline:none;min-width:210px;font-family:var(--font-body)}
.searchbar input::placeholder{color:var(--muted)}
.searchbar button{background:none;border:0;color:var(--muted);padding:0 14px;height:44px;cursor:pointer;transition:.18s}
.searchbar button:hover{color:var(--violet)}

.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.chip{padding:.5em 1.15em;border:1px solid var(--line);border-radius:100px;font-size:.86rem;color:var(--muted);font-weight:500;background:var(--surface);transition:.2s var(--ease)}
.chip:hover{color:var(--violet);border-color:var(--violet);transform:translateY(-2px)}
.chip--on{background:linear-gradient(120deg,var(--violet),var(--violet-2));border-color:transparent;color:#fff}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:26px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .28s var(--ease),box-shadow .28s var(--ease);box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card__media{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,var(--surface-2),#fff);display:block;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card--oos .card__media img{filter:grayscale(.6) brightness(.94)}
.badge{position:absolute;top:12px;left:12px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.34em .72em;border-radius:100px;background:var(--coral);color:#fff;border:0;box-shadow:0 6px 14px -6px var(--coral)}
.badge--oos{background:#fff;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 34%,transparent);box-shadow:none}
.badge--mto{background:var(--violet-2);color:#fff;box-shadow:0 6px 14px -6px var(--violet-2)}
.card__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--violet);font-weight:700}
.card__name{font-family:var(--font-display);font-size:1.22rem;font-weight:600;letter-spacing:-.005em}
.card__name a:hover{color:var(--violet)}
.card__spec{color:var(--muted);font-size:.86rem;margin:0}
.card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-family:var(--font-display);font-weight:600;font-size:1.16rem;font-variant-numeric:tabular-nums}
.price--lg{font-size:2.05rem;color:var(--ink)}

.empty{color:var(--muted);padding:44px 0;text-align:center}

/* Phones: 2 product cards per row instead of 1 — less scrolling, still
   legible (price + button stack instead of squeezing side by side, and
   type/padding shrink a bit to fit). */
@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card__body{padding:12px 12px 14px;gap:6px}
  .card__cat{font-size:.64rem}
  .card__name{font-size:1rem}
  .card__spec{font-size:.78rem}
  .card__foot{flex-direction:column;align-items:stretch;gap:8px}
  .card__foot .btn{width:100%;text-align:center}
  .price{font-size:.92rem}
  .badge{font-size:.6rem;padding:.28em .6em;top:8px;left:8px}
}

/* ---------- product detail ---------- */
.product{padding:32px 24px 110px}
.product__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;margin-top:6px}
.product__media{background:linear-gradient(150deg,var(--surface-2),#fff);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:1;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.product__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product__media:hover img{transform:scale(1.05)}
.product__info h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.02em;margin:12px 0 16px;font-weight:500}
.product__desc{color:var(--muted);font-size:1.06rem}
.specs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin:28px 0}
.specs>div{display:flex;justify-content:space-between;gap:16px;background:var(--surface);padding:.78em 1.05em}
.specs dt{color:var(--muted);font-size:.92rem}
.specs dd{margin:0;font-weight:600}
.product__buy{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}

/* ---------- qty box ---------- */
.qtybox{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--surface)}
.qtybox__btn{width:44px;height:48px;background:none;border:0;color:var(--ink);font-size:1.2rem;cursor:pointer;transition:.15s}
.qtybox__btn:hover{background:var(--surface-2);color:var(--violet)}
.qtybox input{width:50px;height:48px;text-align:center;background:none;border:0;color:var(--ink);font-size:1rem;outline:none;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.qtybox input::-webkit-outer-spin-button,.qtybox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtybox--sm .qtybox__btn{width:34px;height:38px}
.qtybox--sm input{width:38px;height:38px;font-size:.9rem}

/* ---------- cart ---------- */
.cartpage{padding:38px 24px 110px}
.cartpage__grid{display:grid;grid-template-columns:1fr 350px;gap:40px;margin-top:28px;align-items:start}
.cartlist{display:flex;flex-direction:column;gap:12px}
.cartrow{display:grid;grid-template-columns:80px 1fr auto auto auto;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px 14px 14px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s}
.cartrow:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cartrow__img{width:80px;height:80px;border-radius:9px;overflow:hidden;background:var(--surface-2)}
.cartrow__img img{width:100%;height:100%;object-fit:cover}
.cartrow__main{display:flex;flex-direction:column;gap:4px;min-width:0}
.cartrow__name{font-family:var(--font-display);font-weight:600;font-size:1.06rem}
.cartrow__name:hover{color:var(--violet)}
.cartrow__spec{color:var(--muted);font-size:.84rem}
.cartrow__line{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cartrow__del button{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;transition:.15s}
.cartrow__del button:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}

.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:sticky;top:94px;box-shadow:var(--shadow-sm)}
.summary h2{font-size:1.32rem;margin-bottom:18px;font-weight:600}
.summary__items{list-style:none;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.summary__items li{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--muted)}
.summary__items li span:last-child{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.summary__row{display:flex;justify-content:space-between;padding:6px 0;color:var(--muted)}
.summary__row span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}
.summary__total{margin-top:8px;padding-top:16px;border-top:1px solid var(--line);font-size:1.1rem;color:var(--ink)}
.summary__total span:last-child{font-weight:700;font-size:1.32rem;font-family:var(--font-display)}
.summary .btn{margin-top:16px}
.paynote{color:var(--muted);font-size:.82rem;text-align:center;margin:12px 0 0}
.checkout__accept{display:flex;align-items:flex-start;gap:9px;margin:16px 0 14px;line-height:1.4}
.checkout__accept input{margin-top:3px;flex:none}
.checkout__accept a{color:var(--violet);font-weight:600}
.checkout__accept a:hover{text-decoration:underline}
.checkout__accept.is-err,.checkout__accept input.is-err{outline:2px solid var(--coral);outline-offset:4px;border-radius:8px}

.empty-state{text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;gap:18px}
.empty-state p{color:var(--muted);font-size:1.1rem}

/* ---------- checkout ---------- */
.checkoutpage{padding:38px 24px 110px}
.checkoutpage__grid{display:grid;grid-template-columns:1fr 370px;gap:40px;align-items:start;margin-top:24px}
.checkform{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.checkform h2{font-size:1.36rem;margin-bottom:22px;font-weight:600}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field--grow{flex:1}
.field label{font-size:.85rem;color:var(--muted);font-weight:600}
.field input,.field textarea,.field select{
  background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  padding:.76em .9em;font-size:.95rem;font-family:var(--font-body);outline:none;transition:.18s;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}

/* ---------- reviews: CSS-only star rating input (review.php) ---------- */
.reviewform{display:flex;flex-direction:column;gap:20px;max-width:520px}
.reviewitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.reviewitem__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.reviewitem__head img{width:56px;height:56px;border-radius:9px;object-fit:cover;border:1px solid var(--line)}
.starinput{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin-bottom:12px;width:fit-content}
.starinput input{position:absolute;opacity:0;pointer-events:none}
.starinput label{cursor:pointer;font-size:1.9rem;line-height:1;color:var(--line);transition:.15s}
.starinput input:checked ~ label,
.starinput label:hover,
.starinput label:hover ~ label{color:var(--coral)}
.reviewitem textarea{background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  padding:.76em .9em;font-size:.92rem;font-family:var(--font-body);outline:none;transition:.18s;width:100%;resize:vertical}
.reviewitem textarea:focus{border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}

/* ---------- reviews: read-only star display (product page) ---------- */
.stars{display:inline-flex;gap:1px;font-size:1rem;line-height:1}
.stars__on{color:var(--coral)}
.stars__off{color:var(--line)}
.ratingsummary{display:flex;align-items:center;gap:8px;margin:6px 0}
.ratingsummary .stars{font-size:1.15rem}
.ratingsummary__count{color:var(--muted);font-size:.88rem}
.reviewslist{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.reviewcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.reviewcard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.reviewcard__name{font-weight:600}
.reviewcard__date{color:var(--muted);font-size:.8rem}
.reviewcard__body{color:var(--ink);font-size:.94rem;line-height:1.6;margin:0}
.field .is-err,.is-err{border-color:var(--danger)!important}
/* Honeypot field (custom_request.php) — invisible to real visitors, bots
   that blindly fill every input still catch themselves on it. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.field-row{display:flex;gap:16px}
.field-row--3{flex-wrap:wrap}
.field-row .field{flex:1;min-width:120px}
.formerror{background:color-mix(in srgb,var(--danger) 8%,#fff);border:1px solid color-mix(in srgb,var(--danger) 32%,transparent);color:var(--danger);padding:.75em 1em;border-radius:9px;margin-bottom:20px;font-size:.92rem}

/* ---------- success / cancel / 404 ---------- */
.success,.empty-page{max-width:640px;margin-inline:auto;text-align:center;padding:80px 24px 110px;display:flex;flex-direction:column;align-items:center;gap:16px}
.success__check{color:var(--violet);animation:floatUpDown 3s ease-in-out infinite}
.success h1,.empty-page h1{font-size:2.4rem;letter-spacing:-.015em;font-weight:500}
.success__ref{color:var(--muted)}
.success__paid{color:var(--violet);font-weight:600}
.paybox{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:var(--radius);padding:24px 26px;text-align:left;color:var(--muted);white-space:normal;line-height:1.7;width:100%;box-shadow:var(--shadow-sm)}
.paybox__amt{margin:14px 0 0;color:var(--ink)}
.empty-page .btn{margin-top:6px}

/* ---------- newsletter signup card (homepage only) ---------- */
.nlcard{max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow-sm)}
.nlcard__form{display:flex;flex-direction:column;gap:14px}
.nlcard__row{display:flex;gap:10px;flex-wrap:wrap}
.nlcard__input{flex:1;min-width:200px;border:1px solid var(--line);border-radius:100px;padding:.75em 1.2em;font-family:var(--font-body);font-size:.92rem;background:#fff;color:var(--ink)}
.nlcard__input:focus{border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}
.nlcard__consent{display:flex;align-items:flex-start;gap:9px;font-size:.78rem;line-height:1.45;color:var(--muted);cursor:pointer}
.nlcard__consent input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--violet)}
.nlcard__consent a{color:var(--violet);font-weight:600}
@media (max-width:640px){
  .nlcard{padding:22px}
  .nlcard__row{flex-direction:column}
}

/* ---------- license badge + newsletter, side by side (brand_strip_box()) ---------- */
.brandstrip{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.brandstrip__nl{max-width:440px}
.brandstrip__nltitle{padding-left:0;font-size:1.5rem;margin:6px 0 8px}
.brandstrip__nltitle::before{display:none}
.brandstrip__nlnote{color:var(--muted);margin:0 0 16px;font-size:.95rem}
.brandstrip__nl .nlcard{margin:0}

.licenseband{display:flex;align-items:center;justify-content:center;gap:26px;max-width:460px;margin:0 auto}
.licenseband__badge{width:150px;height:150px;border-radius:50%;box-shadow:var(--shadow-sm);flex-shrink:0}
.licenseband__text{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}
@media (max-width:860px){
  .brandstrip{grid-template-columns:1fr;gap:34px;text-align:center}
  .brandstrip__nl{max-width:420px;margin:0 auto}
  .brandstrip__nltitle{text-align:center}
  .brandstrip__nl .nlcard{margin:0 auto}
}
/* Phone: badge stays a compact row (small badge + short text) instead of
   stacking large — the old stacked-and-big treatment took a lot of
   vertical room for what's a minor legal note. */
@media (max-width:560px){
  .licenseband{gap:14px;max-width:360px}
  .licenseband__badge{width:56px;height:56px}
  .licenseband__text{font-size:.8rem;line-height:1.5;text-align:left}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:20px;background:var(--surface)}
.foot__inner{display:flex;justify-content:space-between;align-items:center;padding:30px 24px;flex-wrap:wrap;gap:12px}
.foot__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600}
.foot__social{display:flex;align-items:center;gap:14px}
.foot__social a{display:inline-flex;color:var(--muted);transition:.15s}
.foot__social a:hover{color:var(--violet)}
.foot__meta{color:var(--muted);font-size:.88rem}
.foot__meta a:hover{color:var(--violet)}

/* ============================================================
   ADMIN
   ============================================================ */
.adminbody{background:var(--paper)}

/* Admin shell: a sidebar (nav) + main content area. On a phone the sidebar
   is an off-canvas drawer (opened from the slim top bar's hamburger); at
   --admin-desktop it becomes a persistent left column instead, and the top
   bar disappears — same markup either way, see admin_nav() in auth.php. */
.adminshell{min-height:100vh}
.adminshell__main{min-width:0}

.adminnav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.adminnav__inner{display:flex;align-items:center;gap:14px;height:62px;padding-inline:24px}
.adminnav .navburger{display:inline-flex}
.adminnav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600}
.adminnav__inner .stripemode{margin-left:auto}

.adminsidebar__mode{padding:16px 12px 2px}
.adminsidebar__testtoggle{padding:8px 12px 4px}
.adminsidebar__testtoggle .field__hint{margin-top:6px}
.stripemode--owntest{background:var(--coral-soft);color:var(--accent-ink)}

.adminmain{max-width:1400px;margin-inline:auto;padding:36px 32px 90px}
.adminmain--narrow{max-width:820px}
.adminh1{font-size:2rem;letter-spacing:-.015em;font-weight:500}

@media (min-width:960px){
  .adminshell{display:flex;align-items:flex-start}
  .adminnav{display:none}
  /* .sidepanel.adminsidebar (not bare .adminsidebar): the base .sidepanel
     rule below (position:fixed, visibility:hidden) has the same one-class
     specificity, and appears later in this file — with a bare .adminsidebar
     selector that later rule would win the cascade by source order alone
     and this override would silently do nothing. The compound selector's
     higher specificity wins regardless of where either rule sits in the file. */
  .sidepanel.adminsidebar{
    position:sticky;top:0;left:0;height:100vh;visibility:visible;pointer-events:auto;
    flex:none;width:236px;z-index:1;
  }
  .adminsidebar .sidepanel__overlay{display:none}
  .adminsidebar .sidepanel__panel{
    position:static;transform:none;width:100%;height:100%;
    box-shadow:none;border-radius:0;
  }
  .adminsidebar .sidepanel__close{display:none}
  .adminshell__main{flex:1}
}
.adminsection__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:38px 0 16px}
.adminsection__head:first-child{margin-top:0}

/* Groups the Analytics page into clearly separated "Most / Forgalom / Termékek"
   clusters (each with its own .sec-kicker label, reusing the storefront's own
   section-kicker style) instead of one long undifferentiated stack. */
.anggroup{margin:0 0 44px}
.anggroup:last-child{margin-bottom:0}
.anggroup > .sec-kicker{display:block;margin-bottom:14px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:26px 0 10px}
.stats--sm{grid-template-columns:repeat(auto-fit,minmax(150px,220px));margin-top:0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s;min-width:0}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat__label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
/* Sans, not the display serif — a dashboard's headline figure is read at a
   glance, not admired; the serif reads as decoration here. Proportional
   (not tabular) figures for the same reason: tabular-nums is for aligning
   columns of numbers, not a single big standalone value. min-width:0 lets
   the box actually shrink on a narrow phone instead of forcing the whole
   grid — and the page — wider than the viewport. */
.stat__val{font-family:var(--font-body);font-size:1.6rem;font-weight:700;letter-spacing:-.01em;min-width:0}

.dtable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.dtable th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:13px 15px;border-bottom:1px solid var(--line)}
.dtable td{padding:13px 15px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr{transition:background .15s}
.dtable tbody tr:hover{background:var(--surface-2)}
.dtable tfoot td{padding:11px 15px;border-top:1px solid var(--line);color:var(--muted)}
.tfoot-total td{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.thumb{width:46px;height:46px;object-fit:cover;border-radius:8px;background:var(--surface-2)}
.row--off{opacity:.5}
.rowactions{display:flex;gap:14px;align-items:center}
.rowactions form{display:inline}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.dot--on{background:var(--violet)}.dot--off{background:var(--muted)}

.pill{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.34em .72em;border-radius:100px;border:1px solid}
.pill--pending{background:var(--coral-soft);color:#b5502f;border-color:color-mix(in srgb,var(--coral) 40%,transparent)}
.pill--paid{background:var(--violet-soft);color:var(--violet);border-color:color-mix(in srgb,var(--violet) 34%,transparent)}
.pill--shipped{background:color-mix(in srgb,#2fae7a 14%,#fff);color:#1f8f61;border-color:color-mix(in srgb,#2fae7a 34%,transparent)}
.pill--cancelled{background:color-mix(in srgb,var(--danger) 10%,#fff);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.pill--test{background:repeating-linear-gradient(135deg,#FFC400,#FFC400 4px,#15171E 4px,#15171E 8px);color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.5)}

.chips--admin{margin:24px 0 26px}

/* edit form */
.editform{display:grid;grid-template-columns:270px 1fr;gap:32px;align-items:start;margin-top:22px}
.editform__preview{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2)}
.editform__preview--wide{aspect-ratio:21/9}
.filebtn{display:block;margin-top:12px;text-align:center;border:1px dashed color-mix(in srgb,var(--ink) 24%,transparent);border-radius:9px;padding:.85em;cursor:pointer;color:var(--muted);font-size:.85rem;transition:.18s}
.filebtn:hover{border-color:var(--violet);color:var(--ink)}
.filebtn input{display:none}
.editform__fields{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.field--sm{max-width:150px}
.check{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:.92rem;cursor:pointer;align-self:center}
.check input{width:18px;height:18px;accent-color:var(--violet)}
.checklist{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin:10px 0 4px}
.checklist .check{align-self:stretch}

/* newsletter product picker (admin/newsletter.php) */
.nlpicklist{display:flex;flex-direction:column;gap:2px;max-height:380px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;margin:10px 0 4px}
.nlpickrow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;transition:background .15s}
.nlpickrow:hover{background:var(--surface-2)}
.nlpickrow input[type="checkbox"]{width:17px;height:17px;accent-color:var(--violet);flex-shrink:0}
.nlpickrow__img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--line);flex-shrink:0;background:var(--surface-2)}
.nlpickrow__name{flex:1;font-size:.9rem}
.nlpickrow__price{font-size:.85rem;color:var(--muted);white-space:nowrap}
.nlpickrow--fixed{background:color-mix(in srgb,var(--violet) 6%,transparent);cursor:default}

/* ---------- admin/keychain_showcase.php: per-product card grid ---------- */
.khadmin{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:8px}
.khadmin__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px}
.khadmin__head{display:flex;align-items:center;gap:10px}
.khadmin__thumb{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--line);flex-shrink:0;background:var(--surface-2)}
.khadmin__name{font-size:.9rem;font-weight:600;line-height:1.3}
.khadmin__body{display:flex;flex-direction:column;gap:8px}
.khadmin__preview{width:100%;height:150px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.khadmin__empty{width:100%;height:150px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:.82rem;background:var(--surface-2)}
.khadmin__uploadform{display:flex;gap:6px;align-items:center}
.khadmin__uploadform input[type="file"]{flex:1;min-width:0;font-size:.78rem}
.khadmin__togglelabel{display:flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer}
.khadmin__togglelabel input{width:16px;height:16px;accent-color:var(--violet)}
.khadmin__togglelabel.is-disabled{color:var(--muted);cursor:default}

.certline{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem;margin:0 0 10px}
.certline svg{flex:none}
.certline a{color:var(--muted);text-decoration:underline}
.certline a:hover{color:var(--violet)}
.editform__actions{display:flex;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}

/* order view */
.orderhead{display:flex;align-items:center;gap:14px}
.ordergrid{display:grid;grid-template-columns:minmax(420px,1.3fr) minmax(340px,460px);gap:26px;margin-top:26px;align-items:start}
.ordercard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.ordercard h2{font-size:1.2rem;margin-bottom:16px;font-weight:600}
.ordercard .dtable{border:0;background:none;box-shadow:none}
.ordercard .dtable td{padding:9px 6px}

/* Right column: small independent cards instead of one long stack — short
   ones (status/packed/invoice/review) flow side by side where there's room,
   wider ones (customer, shipping&label) always take the full row. */
.ordercards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.ordercards .ordercard{padding:20px}
.ordercards .ordercard--wide{grid-column:1/-1}

/* ---------- FoxPost tracking timeline ---------- */
.fptracking{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.fptracking h3{font-size:.95rem;font-weight:600;margin:0 0 10px}
.fptimeline{display:flex;flex-direction:column}
.fptimeline__row{display:flex;gap:12px;padding:6px 0;position:relative}
.fptimeline__row:not(:last-child)::before{content:"";position:absolute;left:5px;top:22px;bottom:-6px;width:2px;background:var(--line)}
.fptimeline__dot{width:12px;height:12px;border-radius:100px;background:var(--line);flex:none;margin-top:4px;position:relative;z-index:1}
.fptimeline__row--current .fptimeline__dot{background:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.fptimeline__row--exception .fptimeline__dot{background:var(--danger);box-shadow:0 0 0 3px rgba(229,72,107,.18)}
.fptimeline__body{display:flex;flex-direction:column;gap:1px}
.fptimeline__body strong{font-size:.9rem;color:var(--muted);font-weight:500}
.fptimeline__row--current .fptimeline__body strong{color:var(--ink);font-weight:700}
.fptimeline__row--exception .fptimeline__body strong{color:var(--danger);font-weight:700}
.fptimeline__date{font-size:.76rem;color:var(--muted)}

.orderitem{display:flex;align-items:center;gap:12px}
.orderitem__img{width:64px;height:64px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:var(--surface-2);flex:none}
.orderitem__packcell{width:1%;white-space:nowrap}
.orderitem__packcell input{width:20px;height:20px;accent-color:var(--violet);cursor:pointer}
.orderitemrow.is-packed{opacity:.55}
.orderitemrow.is-packed .orderitem span{text-decoration:line-through}
.kv{display:flex;flex-direction:column;gap:13px;margin:0 0 22px}
.kv div{display:flex;flex-direction:column;gap:2px}
.kv dt{color:var(--muted);font-size:.8rem}
.kv dd{margin:0}
.statusform{border-top:1px solid var(--line);padding-top:20px}
.statusform label{display:block;color:var(--muted);font-size:.85rem;margin-bottom:8px;font-weight:600}
.statusform__row{display:flex;gap:10px}
.statusform select{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--ink);padding:.66em .76em;font-family:var(--font-body)}

/* login */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(680px 400px at 78% -6%,var(--coral-soft),transparent 65%),
    radial-gradient(680px 420px at 12% 4%,var(--violet-soft),transparent 65%),var(--paper)}
.logincard{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px;box-shadow:var(--shadow)}
.logincard__brand{display:flex;align-items:center;gap:10px;justify-content:center;font-family:var(--font-display);font-weight:600;margin-bottom:20px}
.logincard h1{text-align:center;font-size:1.6rem;margin-bottom:24px;font-weight:500}
.logincard .btn{margin-top:6px}
.loginback{display:block;text-align:center;color:var(--muted);font-size:.85rem;margin-top:20px}
.loginback:hover{color:var(--violet)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:38px;padding:66px 24px}
  .product__grid{grid-template-columns:1fr;gap:32px}
  .cartpage__grid,.checkoutpage__grid{grid-template-columns:1fr}
  .summary{position:static}
  .ordergrid{grid-template-columns:1fr}
  .editform{grid-template-columns:1fr}
  .editform__media{max-width:280px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* 14 daily bars need real width to stay readable — rather than squeezing
     them illegibly thin, let the strip scroll horizontally like any other
     admin table on a phone. */
  .anchart__bars{overflow-x:auto;padding-bottom:4px}
  .anchart__col{flex:0 0 40px}
}
@media (max-width:620px){
  .nav__links{display:none}
  .hero__inner{padding:66px 24px 58px}
  .hero__specs{gap:28px}
  .field-row{flex-direction:column;gap:0}
  .cartrow{grid-template-columns:60px 1fr auto;grid-template-areas:"img main del" "img qty line";row-gap:12px}
  .cartrow__img{grid-area:img;width:60px;height:60px}
  .cartrow__main{grid-area:main}
  .cartrow__qty{grid-area:qty}
  .cartrow__line{grid-area:line;align-self:center}
  .cartrow__del{grid-area:del;justify-self:end}
  .dtable{font-size:.85rem}
  .dtable th:nth-child(3),.dtable td:nth-child(3){display:none}
}

/* accessibility — motion off for those who ask */
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .success__check{animation:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ---------- FAQ accordion ---------- */
.faqlist{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.faqitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 20px;box-shadow:var(--shadow-sm)}
.faqitem summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--ink);list-style:none}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::before{content:'+';display:inline-block;width:18px;color:var(--violet);font-weight:700}
.faqitem[open] summary::before{content:'−'}
.faqitem p{color:var(--muted);margin:0 0 18px;padding-left:18px;line-height:1.6}
.faqitem p a{color:var(--violet);font-weight:600}
.faqitem p a:hover{text-decoration:underline}

/* Flash messages */
.flash{margin:0 0 20px;padding:14px 18px;border-radius:11px;font-size:.92rem;line-height:1.5;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.flash--warn{border-color:color-mix(in srgb,var(--coral) 45%,var(--line));background:color-mix(in srgb,var(--coral) 8%,#fff)}
.flash strong{color:var(--violet)}

/* admin: inline form/status alerts (errors, confirmations, "still needs doing" notices) */
.alert{margin:0 0 20px;padding:14px 18px;border-radius:11px;font-size:.92rem;line-height:1.5;border:1px solid var(--line);background:var(--surface)}
.alert--err{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 8%,#fff);color:var(--danger)}
.alert--ok{border-color:color-mix(in srgb,var(--violet) 35%,var(--line));background:var(--violet-soft);color:var(--ink)}
.alert--warn{border-color:color-mix(in srgb,var(--coral) 45%,var(--line));background:color-mix(in srgb,var(--coral) 8%,#fff);color:var(--ink)}
.alert ul{margin:8px 0 0;padding-left:20px}
.alert li{margin:2px 0}

/* shop: "made to order" notice — deliberately loud, per the brief (no stock
   on hand, but still orderable; shipping just takes a bit longer) */
.mtobanner{display:flex;align-items:flex-start;gap:12px;margin:16px 0;padding:14px 16px;
  border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--violet-2) 45%,var(--line));
  background:color-mix(in srgb,var(--violet-2) 10%,#fff)}
.mtobanner__ic{font-size:1.3rem;line-height:1}
.mtobanner strong{color:var(--violet);display:block;margin-bottom:2px}
.mtobanner p{margin:0;font-size:.9rem;color:var(--ink);line-height:1.5}
.mtobanner--sm{margin:14px 0}
.mtobanner--sm p{font-size:.84rem}
.cartrow__mto{display:block;color:var(--violet);font-size:.8rem;margin-top:2px}

/* ---------- footer legal links ---------- */
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}
.foot__legal a{color:var(--muted);font-size:.88rem;transition:.15s}
.foot__legal a:hover{color:var(--violet)}

/* ---------- legal pages ---------- */
.legal{max-width:760px;padding:40px 24px 100px}
.legal__title{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:500;letter-spacing:-.015em;margin:6px 0 26px}
.legal__body{color:var(--ink)}
.legal__body h2{font-size:1.2rem;font-weight:600;margin:30px 0 10px}
.legal__body p{color:var(--muted);margin:0 0 14px}
.legal__body ul{color:var(--muted);margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.legal__body a{color:var(--violet);font-weight:600}
.legal__body a:hover{text-decoration:underline}
.legal__dl{display:flex;flex-direction:column;gap:12px;margin:6px 0 20px}
.legal__dl>div{display:grid;grid-template-columns:220px 1fr;gap:8px 20px}
.legal__dl dt{color:var(--muted);font-size:.9rem}
.legal__dl dd{margin:0;font-weight:500}
.legal__form{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:8px 0 18px;color:var(--ink);line-height:2}
.legal__meta{margin-top:28px;color:var(--muted);font-size:.85rem;font-style:italic}
.legal__nav{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.legal__nav a{color:var(--muted);font-size:.9rem;font-weight:600}
.legal__nav a:hover{color:var(--violet)}
@media (max-width:560px){.legal__dl>div{grid-template-columns:1fr;gap:2px}}

/* ============================================================
   Sticky footer, hamburger + side panel, logo slot, extras
   ============================================================ */

/* sticky footer: content area grows, footer sits at the bottom.
   (The wrapper avoids turning .wrap sections into shrink-to-fit flex items,
   which previously collapsed the product grid to one column.) */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.page{flex:1 0 auto}
.foot{flex-shrink:0}

/* thin colourful scroll-progress bar (added by app.js) */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet),var(--coral));z-index:60;pointer-events:none}

/* logo image in the header (replaces the wordmark) */
.brand{display:inline-flex;align-items:center}
.brand__img{height:40px;width:auto;display:block;transition:transform .5s var(--ease)}
.brand:hover .brand__img{transform:scale(1.04)}
@media (max-width:620px){.brand__img{height:32px}}

/* shared wordmark logo used in footer, side panel, admin, login, etc. */
.brandlogo{height:34px;width:auto;display:block;object-fit:contain}
.brandlogo--sm{height:26px}
.foot__brand,.sidepanel__title,.adminnav__brand,.logincard__brand{display:flex;align-items:center}
@media (max-width:620px){.brandlogo{height:28px}}

/* logo placeholder to the left of the wordmark */
.brand__logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  overflow:hidden;background:var(--surface-2);flex:none;transition:transform .5s var(--ease)}
.brand__logo img{width:100%;height:100%;object-fit:contain}
.brand:hover .brand__logo{transform:rotate(-6deg) scale(1.06)}

/* hamburger */
.navburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:100px;
  background:var(--surface);cursor:pointer;transition:.2s var(--ease)}
.navburger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:.28s var(--ease)}
.navburger:hover{border-color:var(--violet)}
.navburger:hover span{background:var(--violet)}
.navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* slide-in side panel */
.sidepanel{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.sidepanel.is-open{visibility:visible;pointer-events:auto}
.sidepanel__overlay{position:absolute;inset:0;background:rgba(35,27,51,.42);opacity:0;transition:opacity .32s var(--ease);backdrop-filter:blur(2px)}
.sidepanel.is-open .sidepanel__overlay{opacity:1}
.sidepanel__panel{position:absolute;top:0;left:0;height:100%;width:min(84vw,320px);
  background:var(--surface);border-right:1px solid var(--line);box-shadow:var(--shadow);
  padding:20px 18px;display:flex;flex-direction:column;gap:2px;
  transform:translateX(-100%);transition:transform .34s var(--ease);overflow-y:auto}
.sidepanel.is-open .sidepanel__panel{transform:translateX(0)}
.sidepanel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sidepanel__title{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600}
.sidepanel__close{width:36px;height:36px;border:0;background:var(--surface-2);border-radius:100px;
  font-size:1.4rem;line-height:1;color:var(--ink);cursor:pointer;transition:.18s}
.sidepanel__close:hover{background:var(--violet);color:#fff}
.sidepanel__panel>a{padding:11px 12px;border-radius:9px;color:var(--ink);font-weight:500;transition:.16s var(--ease)}
.sidepanel__panel>a:hover{background:var(--surface-2);color:var(--violet);transform:translateX(3px)}
.sidepanel__sec{margin:14px 12px 4px;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}

/* admin packed checkbox cells */
.packedcell{display:inline-flex}
.packedcell input,.packedbox input{width:20px;height:20px;accent-color:var(--violet);cursor:pointer}
.packedbox{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.packedbox .check{cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .sidepanel__panel,.sidepanel__overlay{transition:none!important}
  .scrollprog{display:none}
}

/* ---------- featured products ---------- */
.featured{padding:70px 24px 10px}
.featured__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.featured__note{color:var(--muted);font-size:.92rem}

/* ---------- product gallery + lightbox ---------- */
.product__media{display:flex;flex-direction:column;gap:12px;background:none;border:0;box-shadow:none;aspect-ratio:auto;overflow:visible;place-items:stretch}
.product__mainbtn{position:relative;display:block;width:100%;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(150deg,var(--surface-2),#fff);cursor:zoom-in;padding:0;box-shadow:var(--shadow-sm)}
.product__mainbtn img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.product__mainbtn:hover img{transform:scale(1.05)}
.product__zoom{position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.92);border-radius:100px;color:var(--ink);box-shadow:var(--shadow-sm)}
.product__mainbtn .product__badge{position:absolute;top:12px;right:12px;width:64px;height:64px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.22);pointer-events:none;z-index:2;transform:none}
.product__mainbtn:hover .product__badge{transform:none}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumb{width:64px;height:64px;border:1px solid var(--line);border-radius:9px;overflow:hidden;padding:0;cursor:pointer;background:var(--surface-2);transition:.18s var(--ease)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb--on{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet-soft)}
.thumb:hover{border-color:var(--violet);transform:translateY(-2px)}

.lightbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(20,15,30,.9);padding:24px;animation:lbFade .25s var(--ease)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.lightbox.is-open{display:flex}
.lightbox__img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 90px -20px rgba(0,0,0,.7)}
.lightbox__close{position:absolute;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:100px;background:rgba(255,255,255,.16);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer}
.lightbox__close:hover{background:rgba(255,255,255,.3)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:100px;background:rgba(255,255,255,.16);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.lightbox__nav:hover{background:rgba(255,255,255,.3)}
.lightbox__prev{left:20px}.lightbox__next{right:20px}

/* admin gallery editor */
.gallerygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:12px}
.galthumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.galthumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.galthumb__del{display:flex;align-items:center;gap:5px;justify-content:center;font-size:.68rem;color:var(--muted);padding:5px;cursor:pointer}
.galthumb__del input{width:14px;height:14px;accent-color:var(--danger)}

@media (prefers-reduced-motion:reduce){.lightbox{animation:none}.product__mainbtn:hover img{transform:none}}

/* ---------- toast pop-ups ---------- */
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:.8em 1.2em;border-radius:100px;font-size:.92rem;font-weight:600;box-shadow:0 18px 44px -14px rgba(0,0,0,.45);opacity:0;transform:translateY(16px) scale(.95);transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:90vw}
.toast.is-in{opacity:1;transform:none}
.toast__ic{width:22px;height:22px;border-radius:100px;display:grid;place-items:center;font-size:.78rem;background:var(--violet);color:#fff;flex:none}
.toast--error{background:var(--danger)}
.toast--error .toast__ic{background:rgba(255,255,255,.25)}

/* ---------- maintenance page (public) ---------- */
.maint{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(700px 420px at 78% -6%,var(--coral-soft),transparent 65%),
    radial-gradient(700px 440px at 12% 4%,var(--violet-soft),transparent 65%),var(--paper)}
.maint__card{text-align:center;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:48px 36px;box-shadow:var(--shadow)}
.maint__logo{height:64px;width:auto;margin:0 auto 6px;border-radius:12px}
.maint__dots{display:flex;gap:8px;justify-content:center;margin:18px 0}
.maint__dots span{width:10px;height:10px;border-radius:100px;background:var(--violet);animation:maintBounce 1.2s ease-in-out infinite}
.maint__dots span:nth-child(2){background:var(--coral);animation-delay:.15s}
.maint__dots span:nth-child(3){animation-delay:.3s}
@keyframes maintBounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-9px);opacity:1}}
.maint h1{font-size:2.1rem;margin:6px 0 10px;font-weight:500}
.maint p{color:var(--muted)}

/* ---------- admin maintenance bar ---------- */
.maintbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:24px 0 6px;box-shadow:var(--shadow-sm)}
.maintbar--on{border-color:color-mix(in srgb,var(--coral) 50%,var(--line));background:color-mix(in srgb,var(--coral) 7%,#fff)}
.maintbar__info{display:flex;align-items:center;gap:14px}
.maintbar__info p{margin:2px 0 0;font-size:.88rem}
.maintbar__dot{width:12px;height:12px;border-radius:100px;background:#2fae7a;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,#2fae7a 20%,transparent)}
.maintbar--on .maintbar__dot{background:var(--coral);box-shadow:0 0 0 4px var(--coral-soft);animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px var(--coral-soft)}50%{box-shadow:0 0 0 9px transparent}}

/* ---------- Stripe live/sandbox indicator ---------- */
.maintbar--danger{border-color:color-mix(in srgb,var(--danger) 50%,var(--line));background:color-mix(in srgb,var(--danger) 7%,#fff)}
.maintbar__dot--live{background:var(--danger);box-shadow:0 0 0 4px rgba(229,72,107,.22);animation:pulseDotDanger 1.6s ease-in-out infinite}
.maintbar__dot--sandbox{background:#2fae7a;box-shadow:0 0 0 4px color-mix(in srgb,#2fae7a 20%,transparent)}
@keyframes pulseDotDanger{0%,100%{box-shadow:0 0 0 4px rgba(229,72,107,.22)}50%{box-shadow:0 0 0 9px transparent}}
/* small badge in the admin nav — visible on every admin page */
.stripemode{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.35em .7em;border-radius:100px}
.stripemode__dot{width:9px;height:9px;border-radius:100px;flex:none}
.stripemode--live{color:var(--danger);background:rgba(229,72,107,.12)}
.stripemode--live .stripemode__dot{background:var(--danger);box-shadow:0 0 0 3px rgba(229,72,107,.22);animation:pulseDotDanger 1.6s ease-in-out infinite}
.stripemode--sandbox{color:#1f8a5c;background:color-mix(in srgb,#2fae7a 14%,#fff)}
.stripemode--sandbox .stripemode__dot{background:#2fae7a}
@media (prefers-reduced-motion:reduce){.stripemode--live .stripemode__dot{animation:none}}

/* ---------- admin gallery section (full width) ---------- */
.editform__gallery{grid-column:1/-1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm);margin-top:4px}
.editform__gallery h3{font-size:1.05rem;font-weight:600;margin:0 0 4px}
.editform__gallery .muted{font-size:.88rem;margin:0 0 14px}
.galthumb{position:relative}
.galthumb__new{position:absolute;top:4px;left:4px;background:var(--violet);color:#fff;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2em .5em;border-radius:100px}

@media (prefers-reduced-motion:reduce){.maint__dots span,.maintbar--on .maintbar__dot,.maintbar__dot--live{animation:none}.toast{transition:none}}

/* gentle page-enter fade (makes navigation + language switch feel smooth) */
@media (prefers-reduced-motion:no-preference){
  body{animation:pageIn .4s var(--ease)}
  @keyframes pageIn{from{opacity:0}to{opacity:1}}
}

/* ---------- category tiles (Shop by category) ---------- */
.cattiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin:8px 0 30px}
.cattile{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;padding:0;text-align:left;
  background-size:cover;background-position:center;
  background-image:linear-gradient(150deg,var(--violet-soft),var(--coral-soft));
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.cattile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cattile__inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:16px}
.cattile__label{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(20,15,30,.35);line-height:1.15}
.cattile__count{font-size:.82rem;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(20,15,30,.4)}
.cattile--all{background-image:linear-gradient(140deg,var(--violet),var(--coral))}
.cattile--all .cattile__label,.cattile--all .cattile__count{color:#fff}
.cattile.is-on{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft),var(--shadow)}
.cattile.is-on::after{content:"✓";position:absolute;top:10px;right:10px;width:26px;height:26px;display:grid;place-items:center;background:#fff;color:var(--violet);border-radius:100px;font-size:.8rem;font-weight:700;box-shadow:var(--shadow-sm)}
@media (max-width:560px){.cattiles{grid-template-columns:repeat(2,1fr);gap:12px}.cattile__label{font-size:1rem}}

/* shop bar: heading + live search */
.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:4px 0 22px}
.shop__count{font-size:1.15rem;font-weight:600;margin:0}
.searchbar{position:relative;display:flex;align-items:center}
.searchbar input{border:1px solid var(--line);border-radius:100px;padding:.6em 2.4em .6em 1em;font-family:var(--font-body);font-size:.95rem;background:var(--surface);min-width:210px}
.searchbar input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.searchbar__ic{position:absolute;right:12px;color:var(--muted);pointer-events:none;display:flex}

/* "only discounted" toggle — combinable with the category tiles above it, so
   it's deliberately a small switch/pill, not another big tile. */
.saletoggle{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;cursor:pointer;font-size:.92rem;color:var(--ink);user-select:none}
.saletoggle input{position:absolute;opacity:0;width:0;height:0}
.saletoggle__box{position:relative;width:38px;height:22px;border-radius:100px;background:var(--line);transition:background .2s var(--ease);flex:none}
.saletoggle__box::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease)}
.saletoggle input:checked+.saletoggle__box{background:var(--danger)}
.saletoggle input:checked+.saletoggle__box::after{transform:translateX(16px)}
.saletoggle input:focus-visible+.saletoggle__box{outline:2px solid var(--violet);outline-offset:2px}

/* smooth cross-fade when the filter changes */
#shopgrid{transition:opacity .18s var(--ease)}
#shopgrid.is-switching{opacity:0}

/* low-stock badge accent */
.badge--low{background:var(--coral);color:#fff}

/* ---------- admin sandbox/test-mode banner (storefront) ---------- */
.testbanner{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;background:repeating-linear-gradient(135deg,#FFC400,#FFC400 12px,#15171E 12px,#15171E 24px);
  color:#15171E;font-size:.82rem;font-weight:700;padding:9px 16px;text-align:center;
}
.testbanner span{background:#fff;padding:.35em .8em;border-radius:100px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.testbanner form{margin:0}
.testbanner__x{background:#15171E;color:#fff;border:0;border-radius:100px;padding:.4em 1em;font-size:.8rem;font-weight:700;cursor:pointer}
.testbanner__x:hover{background:var(--violet)}

/* ---------- announcement bar ---------- */
.annbar{position:relative;background:linear-gradient(90deg,var(--violet),var(--coral));color:#fff;text-align:center;font-size:.86rem;font-weight:600;padding:9px 40px;overflow:hidden}
.annbar__track{position:relative;height:1.3em}
.annbar__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(9px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.annbar__msg.is-on{opacity:1;transform:none}
.annbar__x{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.8}
.annbar__x:hover{opacity:1}
.annbar.is-hidden{display:none}

/* ---------- section head with note ---------- */
.sec-head{margin-bottom:24px}
.sec-head__note{color:var(--muted);margin:6px 0 0}
.cats{padding-top:58px}
.shop{padding-top:8px}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:48px 24px;margin-top:8px}
.trust__item{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.trust__item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.trust__ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet)}
.trust__item b{display:block;font-size:.98rem;margin-bottom:2px}
.trust__item span{color:var(--muted);font-size:.85rem;line-height:1.45}
@media (max-width:880px){.trust{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust{grid-template-columns:1fr}}

/* ---------- badges: New (top-left, violet) vs stock (top-right) ---------- */
.badge--new{background:var(--violet);box-shadow:0 6px 14px -6px var(--violet)}
.badge--sale{background:var(--danger);color:#fff;box-shadow:0 6px 14px -6px var(--danger);font-weight:700}
.badge--stock,.badge--oos{left:auto;right:12px}

/* ---------- fly-to-cart chip ---------- */
.flychip{position:fixed;z-index:120;width:32px;height:32px;border-radius:100px;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;pointer-events:none;box-shadow:var(--shadow);
  transition:transform .75s cubic-bezier(.5,-0.35,.35,1.3),opacity .75s ease}
@media (prefers-reduced-motion:reduce){.annbar__msg{transition:none}.flychip{display:none}}

/* ---------- admin analytics ---------- */
.adminh2{font-size:1.05rem;font-weight:600;margin:26px 0 12px}
.anchart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);margin-top:8px}
.anchart__bars{display:flex;align-items:flex-end;gap:8px;height:170px;margin-top:8px}
.anchart__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.anchart__bar{width:100%;max-width:24px;min-height:3px;background:linear-gradient(180deg,var(--violet),var(--coral));border-radius:4px 4px 0 0;position:relative;transition:height .5s var(--ease);display:flex;align-items:flex-start;justify-content:center}
.anchart__bar span{color:#fff;font-size:.66rem;font-weight:700;margin-top:3px}
.anchart__col em{font-size:.62rem;color:var(--muted);font-style:normal}
.an2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
@media (max-width:820px){.an2col{grid-template-columns:1fr}}
.thumb--sm{width:38px;height:38px;border-radius:8px;object-fit:cover}
.dtable .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:.2em .6em;border-radius:100px;font-size:.75rem;font-weight:700}
.pill--low{background:var(--coral-soft);color:var(--coral)}
.pill--out{background:#f3d0d0;color:#b23b3b}
.related{padding-top:20px;border-top:1px solid var(--line);margin-top:30px}

/* ============ homepage bands (clear section rhythm) ============ */
.band{padding:clamp(52px,7vw,92px) 0;position:relative}
.band--surface{background:var(--surface)}
.band--soft{background:linear-gradient(180deg,color-mix(in srgb,var(--violet) 7%,#fff),color-mix(in srgb,var(--coral) 6%,#fff))}
.band>.wrap{width:100%}
/* Lower-priority sections below the product grid (delivery info, story,
   badge/newsletter) — same rhythm, just noticeably more compact, so the
   page doesn't keep going long after the products themselves. */
.band--tight{padding:clamp(34px,4.5vw,58px) 0}
/* neutralise the old per-section paddings now that .band handles spacing */
.cats,.shop,.featured,.about{padding:0}
.trust{padding:0}
.featured__head{margin:0}

/* centered section header with kicker */
.sec-head{max-width:680px;margin:0 auto 38px;text-align:center}
.sec-head .section-title{margin:0}
.sec-head__note{color:var(--muted);margin:9px 0 0;font-size:1.02rem}
.sec-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:12px}
.sec-kicker::before{content:"";width:20px;height:2px;background:var(--violet);border-radius:2px;opacity:.7}

/* products bar: kicker+title on the left, search on the right */
.shop__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.shop__bar-head{display:flex;flex-direction:column}
.shop__bar .section-title{margin:0}

/* the trust band sits flush inside the band padding */
.trust{margin:0}

/* about band: two-column, aligned */
.about{align-items:start}
@media (max-width:760px){.sec-head{margin-bottom:28px}}

/* ============ story + folded values ============ */
.about2{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.about2__story .section-title{margin:6px 0 14px}
.about2__story p{color:var(--muted);font-size:1.06rem;line-height:1.72;max-width:46ch}
.about2__cta{margin-top:24px}
.about2__values{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.valuecard{background:color-mix(in srgb,var(--violet) 4%,#fff);border:1px solid var(--line);border-radius:16px;padding:18px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.valuecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.valuecard__ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--violet-soft);color:var(--violet);margin-bottom:11px}
.valuecard b{display:block;font-size:.98rem;margin-bottom:3px}
.valuecard span{color:var(--muted);font-size:.85rem;line-height:1.45}
@media (max-width:820px){.about2{grid-template-columns:1fr;gap:32px}}
@media (max-width:460px){.about2__values{grid-template-columns:1fr}}

/* ============ category tall immersive tiles (signature) ============ */
/* A wrapping grid, not a horizontal scroller — a sideways-scroll strip meant
   desktop visitors only ever saw the first couple of tiles ("Összes" /
   "Kedvezmény") before scrolling on down the page, never discovering the
   actual product categories past them. Wrapping puts every tile in view. */
.catscroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:16px;padding:6px 2px 18px}
.catcard{aspect-ratio:3/4.3;border-radius:20px;position:relative;overflow:hidden;border:1px solid var(--line);cursor:pointer;padding:0;text-align:left;background-size:cover;background-position:center;background-image:linear-gradient(155deg,var(--violet-soft),var(--coral-soft));box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.catcard:hover{transform:translateY(-6px)}
.catcard .cattile__inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;gap:3px}
.catcard .cattile__label{font-family:var(--font-display);font-size:1.42rem;font-weight:600;color:#fff;text-shadow:0 2px 12px rgba(20,15,30,.5);line-height:1.12}
.catcard .cattile__count{color:rgba(255,255,255,.92);font-size:.84rem;text-shadow:0 1px 8px rgba(20,15,30,.5)}
.catcard.cattile--all{background-image:linear-gradient(150deg,var(--violet),var(--coral))}
.catcard.is-on{outline:3px solid var(--violet);outline-offset:-3px;box-shadow:0 0 0 4px var(--violet-soft),var(--shadow)}
.catcard.is-on::after{content:"✓";position:absolute;top:12px;right:12px;width:28px;height:28px;display:grid;place-items:center;background:#fff;color:var(--violet);border-radius:100px;font-size:.82rem;font-weight:800;box-shadow:var(--shadow-sm)}
/* On phones, keep it to a compact, fully-visible 2-column grid. */
@media (max-width:640px){
  .catscroll{grid-template-columns:repeat(2,1fr);gap:10px;padding:6px 0 4px}
  .catcard{aspect-ratio:1/1.05}
  .catcard .cattile__inner{padding:12px}
  .catcard .cattile__label{font-size:1.02rem}
  .catcard .cattile__count{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){.catcard,.valuecard{transition:none}}

/* cart: per-unit price + qty×unit breakdown */
.cartrow__price{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.cartrow__amount{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.cartrow__each{color:var(--muted);font-size:.78rem;margin-top:2px;white-space:nowrap}
.anchart__bar--v{background:linear-gradient(180deg,#20b2aa,#54d6c6)}

/* ===== clickable analytics bars + day filter ===== */
.anchart__col--link{cursor:pointer;text-decoration:none;border-radius:8px 8px 0 0;transition:background .15s}
.anchart__col--link:hover{background:var(--violet-soft)}
.anchart__col--link:hover .anchart__bar{filter:brightness(1.08)}
.dayfilter{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:18px}

/* ===== cart coupon box + discount row ===== */
.summary__row--discount span:last-child{color:var(--coral);font-weight:600}
.summary__coupon{font-style:normal;font-size:.78rem;background:var(--coral-soft);color:var(--coral);padding:.1em .5em;border-radius:100px;margin-left:6px}
.couponbox{display:flex;gap:8px;align-items:center;margin:14px 0 4px}
.couponbox input{flex:1;border:1px solid var(--line);border-radius:10px;padding:.55em .8em;font-family:var(--font-body);text-transform:uppercase}
.couponbox input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.couponbox--on{justify-content:space-between;background:var(--violet-soft);border-radius:10px;padding:10px 14px;font-size:.9rem}
.couponbox__msg{font-size:.82rem;margin:6px 0 0}
.couponbox__msg.is-err{color:var(--coral)}.couponbox__msg.is-ok{color:#2e9e6b}

/* ===== first-visit coupon popup ===== */
.couponpop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(28,20,45,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .28s var(--ease)}
.couponpop.is-open{opacity:1}
.couponpop__box{position:relative;width:100%;max-width:400px;background:var(--surface);border-radius:22px;padding:34px 30px 28px;text-align:center;box-shadow:0 30px 80px -20px rgba(28,20,45,.5);transform:translateY(16px) scale(.97);transition:transform .3s var(--ease);overflow:hidden}
.couponpop.is-open .couponpop__box{transform:none}
.couponpop__box::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--violet),var(--coral))}
.couponpop__spark{font-size:1.6rem;color:var(--coral)}
.couponpop__kicker{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin:6px 0 4px}
.couponpop__title{font-family:var(--font-display);font-size:2.1rem;margin:2px 0 6px;color:var(--ink)}
.couponpop__sub{color:var(--muted);margin:0 0 16px}
.couponpop__code{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--paper);border:2px dashed var(--violet);border-radius:14px;padding:12px;margin-bottom:14px}
.couponpop__code code{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:.06em;color:var(--violet)}
.couponpop__exp{font-size:.85rem;color:var(--muted);margin:0 0 18px}
.couponpop__x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer}
.couponpop__x:hover{color:var(--ink)}

/* admin toggle row + hint */
.switchrow{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:6px}
.field__hint{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
@media (prefers-reduced-motion:reduce){.couponpop,.couponpop__box{transition:none}}

/* ===== editorial, product-focused hero =====
   One real product — auto-picked in index.php as the current best-seller,
   never manually uploaded/maintained — presented large with generous
   negative space. Shown in a plain, clean rounded card (same visual
   language as .product__media/.card__media elsewhere on the site — soft
   gradient backing, thin border, shadow) rather than any experimental
   masking/fading treatment. Only a one-time load-in animation; nothing on
   the product itself loops, floats, or spins. */
.hero__inner--edit{
  display:grid;grid-template-columns:.92fr 1.18fr;gap:64px;align-items:center;
  text-align:left;min-height:min(78vh,720px);padding-top:64px;padding-bottom:64px;
}
.hero__inner--edit .hero__copy{display:flex;flex-direction:column;align-items:flex-start;max-width:46ch}
.hero__inner--edit .hero__title{max-width:none;animation:fadeUp .7s var(--ease) both}
.hero__inner--edit .hero__sub{animation:fadeUp .7s var(--ease) .12s both}
.hero__inner--edit .btn{animation:fadeUp .7s var(--ease) .22s both}

.hero__stage{display:flex;flex-direction:column;gap:18px;animation:heroStageIn 1s cubic-bezier(.16,1,.3,1) .16s both}
.hero__eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero__eyebrow i{display:block;width:22px;height:1px;background:var(--line)}
.hero__stagelink{
  align-self:center;display:block;width:100%;max-width:480px;aspect-ratio:1/1;
  background:linear-gradient(150deg,var(--surface-2),#fff);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.hero__stageimg{width:100%;height:100%;object-fit:contain;padding:34px;transition:transform .5s var(--ease)}
.hero__stagelink:hover .hero__stageimg{transform:scale(1.03)}
.hero__stagename{align-self:center;font-family:var(--font-display);font-size:.98rem;font-weight:500;color:var(--ink);opacity:.82}
@keyframes heroStageIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:none}}

.hero__scrolldown{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);color:var(--muted);background:var(--surface);
  animation:heroScrollHint 2.4s ease-in-out 1.2s infinite;transition:color .18s,border-color .18s;
}
.hero__scrolldown:hover{color:var(--violet);border-color:var(--violet)}
@keyframes heroScrollHint{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}

@media (max-width:860px){
  .hero__inner--edit{grid-template-columns:1fr;gap:30px;min-height:0;padding-top:52px;padding-bottom:56px;text-align:center}
  .hero__inner--edit .hero__copy{align-items:center;max-width:none}
  .hero__stage{order:-1}
  .hero__eyebrow{align-self:center}
  .hero__stagelink{max-width:320px}
}
@media (max-width:640px){
  .hero__inner--edit{padding-top:40px;padding-bottom:44px;gap:22px}
  .hero__title{font-size:clamp(2rem,8vw,2.6rem)}
  .hero__stagelink{max-width:260px}
  .hero__stageimg{padding:22px}
  /* Phone: no separate scroll hint — the CTA button is the only way down to
     the collection here. */
  .hero__scrolldown{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__inner--edit .hero__title,.hero__inner--edit .hero__sub,.hero__inner--edit .btn,
  .hero__stage,.hero__scrolldown{animation:none}
}

/* ---------- homepage promo carousel (admin → Hirdetések) ---------- */
.bannerband{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(28px,4vw,44px)}
.bannerslider{position:relative}
.bannerslider__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  border-radius:var(--radius);box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.bannerslider__track::-webkit-scrollbar{display:none}
.bannerslide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:21/9;background:var(--surface-2)}
.bannerslide__link{position:relative;display:block;width:100%;height:100%}
.bannerslide__img{width:100%;height:100%;object-fit:cover}
.bannerslide__overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;
  padding:22px 26px;background:linear-gradient(0deg,rgba(12,10,20,.72) 0%,rgba(12,10,20,.28) 45%,transparent 75%);
  color:#fff;
}
.bannerslide__title{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,2.1rem);font-weight:500;line-height:1.15;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.bannerslide__sub{font-size:.95rem;opacity:.92;max-width:44ch}
.bannerslide__cta{margin-top:8px;pointer-events:none}
.bannerslider__arrow{
  position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer;transition:.18s;z-index:2;
}
.bannerslider__arrow:hover{background:#fff;color:var(--violet);transform:translateY(-50%) scale(1.06)}
.bannerslider__arrow--prev{left:14px}
.bannerslider__arrow--next{right:14px}
.bannerslider__dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:2}
.bannerslider__dot{width:8px;height:8px;padding:0;border:none;border-radius:100px;background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;transition:.22s var(--ease)}
.bannerslider__dot:hover{background:rgba(255,255,255,.85)}
.bannerslider__dot.is-on{width:22px;background:#fff}
@media (max-width:640px){
  .bannerslide{aspect-ratio:4/5}
  .bannerslider__arrow{display:none}
  .bannerslide__overlay{padding:16px}
}
@media (prefers-reduced-motion:reduce){.bannerslider__track{scroll-behavior:auto}}

/* ---------- keychain showcase "coverflow" (index.php, near the top) ----------
   .khero__track is a fixed-height stage; every .khero__slide is absolutely
   centered in it and JS (keychainCarousel() in app.js) sets each one's
   translateX/scale/opacity per frame — the center slide sits at scale(1)/
   opacity 1, its two neighbors smaller/faded to the sides, everything else
   invisible. No native scrolling involved. */
.khero-band{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(20px,3vw,36px)}
.khero-head{margin:0 auto 18px}
.khero-head .section-title{padding-left:0}
.khero-head .section-title::before{display:none}
.khero{position:relative}
.khero__track{position:relative;height:clamp(440px,54vw,640px);overflow:hidden;touch-action:pan-y}
.khero__slide{
  position:absolute;top:50%;left:50%;width:clamp(340px,42vw,540px);height:100%;
  transform:translate(-50%,-50%);
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s ease,width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.khero__img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 34px rgba(35,27,51,.18));pointer-events:none}
.khero__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:100px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:5;color:var(--ink);transition:.18s var(--ease)}
.khero__arrow:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-50%) scale(1.06)}
.khero__arrow--prev{left:-8px}
.khero__arrow--next{right:-8px}
.khero__dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.khero__dot{width:8px;height:8px;padding:0;border:none;border-radius:100px;background:var(--line);cursor:pointer;transition:.22s var(--ease)}
.khero__dot:hover{background:color-mix(in srgb,var(--violet) 40%,var(--line))}
.khero__dot.is-on{width:22px;background:var(--violet)}
.khero__caption{max-width:520px;margin:14px auto 0;text-align:center}
.khero__capname{font-family:var(--font-display);font-size:1.4rem;font-weight:500;margin:0 0 8px;letter-spacing:-.01em}
.khero__capdesc{color:var(--muted);line-height:1.65;margin:0 0 18px;min-height:1.65em}
@media (max-width:760px){
  .khero-band{padding-top:clamp(14px,3vw,24px);padding-bottom:clamp(14px,3vw,24px)}
  .khero-head{margin-bottom:12px}
  .khero__track{height:clamp(340px,108vw,480px)}
  .khero__slide{width:clamp(300px,88vw,400px)}
  .khero__arrow{display:none}
}

/* make the [hidden] attribute always win over display rules (fixes overlay/rows
   that set display and would otherwise ignore hidden) */
[hidden]{display:none !important}
/* single-column admin form (no image column) */
.editform--single{grid-template-columns:1fr;max-width:520px}
.couponpop[hidden]{display:none}

/* selected day on the visitors chart + chart hint */
.anchart__hint{color:var(--muted);font-size:.82rem;margin:2px 0 10px}
.anchart__col--link.is-sel{background:var(--violet-soft)}
.anchart__col--link.is-sel .anchart__bar{outline:2px solid var(--violet);outline-offset:1px;filter:brightness(1.08)}

/* ===== checkout delivery method selector ===== */
.checkform__sep{margin-top:26px}
.shipmethods{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.shipmethod{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s}
.shipmethod:hover{border-color:var(--violet)}
.shipmethod.is-sel{border-color:var(--violet);background:var(--violet-soft);box-shadow:0 0 0 2px var(--violet-soft)}
.shipmethod input{accent-color:var(--violet);width:18px;height:18px;flex:none}
.shipmethod__dot{width:10px;height:10px;border-radius:100px;flex:none}
.shipmethod__main{flex:1;display:flex;flex-direction:column;gap:2px}
.shipmethod__name{font-weight:600}
.shipmethod__eta{font-style:normal;font-size:.76rem;color:var(--violet);background:var(--violet-soft);padding:.1em .5em;border-radius:100px;margin-left:6px}
.shipmethod__desc{color:var(--muted);font-size:.85rem}
.shipmethod__fee{font-weight:700;white-space:nowrap}
.pickupfield{margin-bottom:14px}

/* ===== homepage delivery band ===== */
/* minmax(0,1fr), not plain 1fr — otherwise a card whose text has a long
   unbreakable word (e.g. "MPL házhozszállítás") refuses to shrink below
   its min-content width and the 3 columns end up uneven. */
.delivgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.delivcard{display:flex;flex-direction:column;gap:5px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.delivcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.delivcard__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);margin-bottom:6px}
.delivcard__name{font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.delivcard__desc{color:var(--muted);font-size:.86rem;flex:1}
.delivcard__meta{font-size:.85rem;margin-top:4px}
.delivgrid__free{text-align:center;color:var(--muted);font-size:.9rem;margin:20px 0 0}
/* Stay 3-across even on phones (per owner request — "side by side, not
   stacked") rather than collapsing to 1 column; cards shrink instead so
   three still fit without wrapping/overflowing. */
@media (max-width:460px){
  .delivgrid{gap:8px}
  .delivcard{padding:12px 8px;gap:3px;text-align:center;align-items:center}
  .delivcard__ic{width:34px;height:34px;border-radius:10px;margin-bottom:2px}
  .delivcard__ic svg{width:18px;height:18px}
  .delivcard__name{font-size:.76rem;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
  .delivcard__desc{display:none}
  .delivcard__meta{font-size:.68rem;margin-top:2px}
}

/* pickup row (input + map button) */
.pickuprow{display:flex;gap:8px;align-items:stretch}
.pickuprow input{flex:1}
.pickuprow input[readonly]{cursor:pointer;background:var(--surface-2)}
.pickuprow .btn{white-space:nowrap}

/* carrier map modal */
.mapmodal{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;background:rgba(28,20,45,.6);backdrop-filter:blur(3px)}
.mapmodal[hidden]{display:none}
.mapmodal__box{position:relative;width:100%;max-width:920px;height:80vh;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(28,20,45,.5)}
.mapmodal__box iframe{width:100%;height:100%;border:0;display:block}
.mapmodal__x{position:absolute;top:8px;right:10px;z-index:2;width:34px;height:34px;border:0;border-radius:100px;background:#fff;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm)}
@media (max-width:560px){.mapmodal__box{height:88vh}.pickuprow{flex-direction:column}}

/* ===== black · blue · yellow: readability fixes for the new palette ===== */
/* yellow badges/pills need dark text; blue ones keep white */
.badge{color:var(--ink)}
.badge--new,.badge--mto{color:#fff}
.badge--low,.badge--stock,.badge--oos{color:var(--ink)}
/* announcement bar becomes a sleek black bar (the "black" of the trio) */
.annbar{background:var(--ink)}
.annbar__msg,.annbar__x{color:#fff}
/* gradient text / dark fills that carry text stay blue-dominant so they're legible */
.hero__title span{background:linear-gradient(120deg,var(--violet),#12205e);-webkit-background-clip:text;background-clip:text;color:transparent}
.cattile--all,.catcard.cattile--all{background-image:linear-gradient(145deg,var(--violet),#12205e)}
/* visitor bars solid blue so they read against orders (blue→yellow) */
.anchart__bar--v{background:var(--violet)}
/* "yellow" text on light surfaces -> dark gold so it stays readable */
.summary__row--discount span:last-child{color:var(--accent-ink)}
.summary__coupon{color:var(--accent-ink)}
.pill--low{color:var(--accent-ink)}
.cartrow__price{color:var(--muted)}


/* SKU row: input + generate button */
.skurow{display:flex;gap:8px;align-items:stretch}
.skurow input{flex:1}
.skurow .btn{white-space:nowrap}

/* "price is per 1 item" note (product page) + per-piece unit on cards */
.peritem-note{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.82rem;line-height:1.4;margin:8px 0 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:7px 11px}
.peritem-note svg{flex:none;color:var(--violet)}
.price__unit{font-size:.72rem;font-weight:500;color:var(--muted)}
.price__was{color:var(--muted);text-decoration:line-through;font-weight:500;font-size:.85em;margin-right:5px}
.salepill{display:inline-block;background:var(--danger);color:#fff;font-size:.62em;font-weight:700;letter-spacing:.04em;padding:.28em .6em;border-radius:100px;vertical-align:middle;margin-left:8px}

/* ===== product options / variants ===== */
.prodopts{display:flex;flex-direction:column;gap:16px;margin:18px 0 20px}
.prodopt__label{display:block;font-size:.9rem;font-weight:600;margin-bottom:8px}
.prodopt__val{font-style:normal;font-weight:500;color:var(--muted)}
.prodopt__choices{display:flex;flex-wrap:wrap;gap:8px}
.optbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--surface);border-radius:100px;padding:.5em .95em;font-family:var(--font-body);font-size:.9rem;font-weight:500;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.optbtn:hover{border-color:var(--violet)}
.optbtn.is-on{border-color:var(--violet);background:var(--violet-soft);box-shadow:0 0 0 2px var(--violet-soft)}
.optbtn__dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:none}
/* chosen options in cart */
.cartrow__opts{display:block;color:var(--violet);font-size:.8rem;font-weight:600;margin-top:2px}
/* admin: per-image option tag */
.galthumb__opt{width:100%;margin-top:6px;font-size:.8rem;padding:.3em;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.galthumb__opt--main{margin-top:8px}

/* ===== admin: variant cards (name, stock, desc, several photos) ===== */
.varbox{border:1px solid var(--line);border-radius:12px;padding:16px;margin:18px 0;background:var(--surface-2)}
.varbox__axis{display:block;max-width:280px}
.varbox__axis span{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
.varbox__axis input{width:100%}
.varbox__head .field__hint{margin:8px 0 14px}
.varrows{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.varcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.varcard__top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.varcard__name{flex:1;min-width:0;font-weight:600}
.varcard__stocklbl{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);white-space:nowrap}
.varcard__stock{width:74px}
.varcard__del{flex:none;width:34px;height:34px;border:0;border-radius:8px;background:var(--surface-2);color:var(--muted);cursor:pointer}
.varcard__del:hover{background:#ffe0e6;color:var(--danger)}
.varcard__desc{width:100%;margin-bottom:10px;resize:vertical}
.varcard__imgs{display:flex;flex-wrap:wrap;gap:8px}
.varimg{position:relative;width:70px;height:70px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.varimg img{width:100%;height:100%;object-fit:cover}
.varimg__del{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.varimg--add{display:grid;place-items:center;cursor:pointer;border-style:dashed;color:var(--violet);font-size:.72rem;font-weight:600;text-align:center;padding:4px}
.varimg--add input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* clear "add photos" button under a variant's thumbs */
.varupload{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:.5em .9em;border:1.5px dashed var(--violet);border-radius:9px;color:var(--violet);font-size:.82rem;font-weight:600;cursor:pointer;background:var(--violet-soft)}
.varupload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.varimg--preview{outline:2px solid var(--violet);outline-offset:-2px}

/* product page: per-variant description */
.product__vardesc{background:var(--surface-2);border-left:3px solid var(--violet);border-radius:8px;padding:10px 14px;margin:0 0 16px;font-size:.92rem;color:var(--ink)}

/* ===== product page: variant selector ===== */
.prodvars{margin:18px 0 20px}
.optbtn.is-oos{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.optbtn__x{font-size:.7rem;color:var(--danger);text-decoration:none;font-weight:600}
.optbtn.is-oos .optbtn__x{text-decoration:none}

/* ===== card: colour dots + "multiple colours" ===== */
.card__variants{display:flex;align-items:center;gap:5px;margin:2px 0 4px;flex-wrap:wrap}
.cvdot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:none}
.cvdot--x{background:conic-gradient(#FF5C9D,#FFC400,#22C55E,#2563FF,#8B5CF6,#FF5C9D)}
.card__variants-label{font-size:.72rem;color:var(--violet);font-weight:600;margin-left:2px}

/* ===== Packli FoxPost point search modal ===== */
.mapmodal__box--search{max-width:560px;height:auto;max-height:82vh;display:flex;flex-direction:column;padding:22px}
.pointsearch{display:flex;flex-direction:column;min-height:0}
.pointsearch h3{margin:0 0 12px;font-family:var(--font-display)}
.pointsearch__input{width:100%;margin-bottom:12px}
.pointsearch__results{overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.pointsearch__hint{color:var(--muted);font-size:.9rem;padding:8px 2px}
.pointrow{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.pointrow:hover{border-color:var(--violet);background:var(--violet-soft)}
.pointrow strong{font-size:.95rem}
.pointrow span{color:var(--muted);font-size:.82rem}
/* admin: label button box */
.packli-box{margin:14px 0 4px}
.labelpreview{margin:10px 0 4px}
.labelpreview__frame{width:100%;height:520px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);margin-top:8px}
.packli-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* admin: orders list — wide table scrolls on its own instead of the page */
.tablewrap{width:100%;overflow-x:auto}

/* admin: orders list — inline status icon badges (invoice/label/overdue) */
.obadge{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;
  font-size:.78rem;line-height:1;width:22px;height:22px;border-radius:100px}
.obadge--ok{background:color-mix(in srgb,#2fae7a 20%,#fff)}
.obadge--warn{background:var(--coral-soft)}
.obadge--danger{background:color-mix(in srgb,var(--danger) 16%,#fff)}
.obadge--sale{display:inline-block;margin-left:4px;font-weight:800;color:var(--danger);font-size:.85rem}

/* admin: orders list — coloured dot for shipping method */
.shipdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}

/* admin: orders list — "needs action" quick-filter chips */
.chips--quick{margin-bottom:12px}
.chip--warn{border-color:var(--coral-2);color:var(--accent-ink);background:var(--coral-soft)}
.chip--warn:hover{color:var(--accent-ink);border-color:var(--coral)}
.chip--warn.chip--on{background:linear-gradient(120deg,var(--coral),var(--coral-2));color:var(--accent-ink);border-color:transparent}
.chip--danger{border-color:var(--danger);color:var(--danger);background:rgba(229,72,107,.1)}
.chip--danger:hover{color:var(--danger);border-color:var(--danger)}
.chip--danger.chip--on{background:var(--danger);color:#fff;border-color:transparent}
.chip--zero{opacity:.45}

/* admin: orders list — search + dropdown filters */
.orderfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 22px}
.orderfilters__search{flex:1 1 240px;min-width:180px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55em .9em;font-family:var(--font-body);font-size:.92rem}
.orderfilters select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55em .8em;font-family:var(--font-body);font-size:.92rem;background:var(--surface);color:var(--ink)}

/* admin: dashboard — action-needed panel */
.actionpanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:22px 0}
.actioncard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .2s var(--ease),box-shadow .2s}
.actioncard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.actioncard__icon{font-size:1.5rem;line-height:1}
.actioncard__num{font-family:var(--font-display);font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums}
.actioncard__label{color:var(--muted);font-size:.82rem}
.actioncard--allclear{opacity:.6}
.rawbox{background:#0f1220;color:#c8d0e0;padding:12px;border-radius:8px;font-size:.75rem;overflow:auto;max-height:280px;white-space:pre-wrap;word-break:break-word}