/* ---------------------------------------------------------------------------
   Inter — saját kiszolgálásban, MAGYAR RÉSZHALMAZRA vágva.

   Miért nem a Google Fontsról: az három ugrásos lánc volt két idegen
   kiszolgálóra (HTML → googleapis CSS → gstatic woff2), a PageSpeed mérése
   szerint 458 ms. Ráadásul a látogató IP-címét is továbbította a Google-nek.

   Miért részhalmaz: a Google nyelvenként darabolja a betűt, és a magyar ő/ű
   miatt a „latin-ext" fájl KELL — az viszont rengeteg olyan glifát is hoz,
   amit egy magyar bolt sosem használ. Két fájl, 129 KB. Csak azt tartottuk
   meg, ami itt előfordul (magyar + nyugati + közép-európai ékezetek,
   tipográfia, valuta, jelek): 290 glifa, EGY fájl, 51 KB.

   Változó betűkészlet maradt (100–900), tehát minden vastagság ebből jön.
   `font-display: swap`: a szöveg azonnal olvasható rendszer-betűvel, majd
   lecserélődik — sosem marad üres a lap.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/themes/mixora/fonts/inter-hu.woff2') format('woff2');
}

/*
 * Mixora téma — bolti stíluslap.
 * A paletta a téma-tokenekhez (--shop-*) kötött, hogy a boltos a Megjelenés
 * menüben átszínezhesse; a fallback a Mixora alap-hexeket adja.
 */
:root{
  --orange: var(--shop-primary, #ef5b16);
  --orange-dark: var(--shop-primary-dark, #ce4100);
  --yellow: var(--shop-accent, #ffd84d);
  --cream: var(--shop-cream, #fff3ea);
  --black:#0b0b0b;
  --text: var(--shop-text, #1d1d1f);
  --muted: var(--shop-muted, #6f6f73);
  --line: var(--shop-border, #e9e9eb);
  --green:#22864f;
  --radius: var(--shop-radius, 22px);
  --shadow:0 14px 38px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.mixora{
  margin:0;
  font-family: var(--shop-font, Inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:#fff;
}
.mixora a{text-decoration:none;color:inherit}
/* A Tailwind utility-k @layer utilities-ben élnek; a mixora.css réteg nélküli,
   így a fenti a{color:inherit} felülírná a utility szövegszíneket a base
   aloldalakon (pl. text-white a sötét pénztár-gombon). Ezeket visszaállítjuk. */
.mixora a.text-white{color:#fff}
.mixora a.text-slate-900{color:#0f172a}
.mixora button,.mixora input{font:inherit}
.mixora img{display:block;max-width:100%}
.mixora .container{width:100%;max-width:var(--shop-content-width,none);margin-left:auto;margin-right:auto;padding-left:clamp(18px,3vw,56px);padding-right:clamp(18px,3vw,56px)}
/* Base (nem Mixora-specifikus) bolti aloldalak burkolója: a tartalom ne tapadjon
   a képernyő széléhez, és tartsa a téma tartalom-szélességét. */
.mixora .shop-page{width:100%;max-width:var(--shop-content-width,none);margin-left:auto;margin-right:auto;padding:34px clamp(18px,3vw,56px) 60px}
.mixora .section{padding:78px 0}
.mixora .section-title{margin:0 0 12px;text-align:center;font-size:clamp(28px,4vw,48px);line-height:1;color:var(--orange);text-transform:uppercase;letter-spacing:-1.6px;font-weight:950}
.mixora .section-lead{width:min(760px,100%);margin:0 auto 36px;text-align:center;color:var(--muted);line-height:1.65}
.mixora .btn{border:0;border-radius:999px;padding:14px 23px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--black);color:#fff;font-weight:850;cursor:pointer;transition:.2s ease}
.mixora .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.mixora .btn.orange{background:var(--orange)}
.mixora .btn.light{background:#fff;color:var(--black)}
.mixora .eyebrow{color:var(--orange);font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}

/* top */
.mixora .helpbar{background:#f7f7f7;border-bottom:1px solid var(--line);font-size:12px}
.mixora .helpbar-inner{min-height:34px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.mixora .help-links{display:flex;gap:20px;color:#555}
/* FIGYELEM: ide NE kerüljön vissza `backdrop-filter`. A háttér átlátszatlan
   fehér, tehát vizuálisan semmit nem adott — viszont a `backdrop-filter`
   igazodási pontot (containing block) csinál a benne lévő `position:fixed`
   elemeknek. Emiatt a mobil teljes képernyős kereső csak a fejléc dobozát
   fedte le, nem a képernyőt. */
.mixora .main-header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.06)}
.mixora .header-row{min-height:76px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
.mixora .logo img{height:40px;width:auto;max-width:100%;object-fit:contain}
.mixora .logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:950;letter-spacing:-1px}
.mixora .logo-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--orange);font-size:20px}
.mixora .search{display:flex;background:#f7f7f7;border:1px solid transparent;border-radius:999px;overflow:hidden;transition:.2s}
.mixora .search:focus-within{border-color:var(--orange);background:#fff}
.mixora .search input{width:100%;border:0;outline:0;background:transparent;padding:14px 18px}
.mixora .search button{border:0;background:transparent;padding:0 18px;cursor:pointer}
.mixora .header-actions{display:flex;align-items:center;gap:10px}
.mixora .icon-btn{width:44px;height:44px;border-radius:50%;background:#f5f5f5;display:grid;place-items:center;border:0;cursor:pointer;font-size:19px;position:relative;color:inherit;text-decoration:none}
/* Fejléc-ikonok visszajelzése: egérrel fölé állva a szürke korong KÉKRE vált,
   az ikon fehérre. Enélkül semmi nem jelezte, hogy kattintható — a fiók és a
   kedvencek ikonja néma díszként állt a fejlécben. Az egész ikon-sor kapja,
   mert egy reagáló és egy néma ikon egymás mellett hibának látszik. */
.mixora .icon-btn{transition:background .15s,color .15s,transform .15s}
.mixora .icon-btn:hover,.mixora .icon-btn:focus-visible{background:#29b3f0;color:#fff;transform:translateY(-1px)}
.mixora .icon-btn:hover svg,.mixora .icon-btn:focus-visible svg{color:#fff}
.mixora .badge{position:absolute;right:-2px;top:-2px;background:var(--yellow);min-width:19px;height:19px;border-radius:999px;font-size:10px;font-weight:900;display:grid;place-items:center}
.mixora .nav-row{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line)}
/* A főoldali menüsáv betűje: kicsit nagyobb és kevésbé vastag, mint korábban
   (14px/800). A kettő EGY helyen áll, hogy egyben visszaállítható legyen. */
.mixora .nav-links{display:flex;gap:28px;align-items:center;font-size:15.5px;font-weight:650}
.mixora .nav-links a:hover{color:var(--orange)}
.mixora .nav-cat-icon{display:inline-flex;align-items:center;vertical-align:-3px;margin-right:6px}
.mixora .nav-link-button .nav-cat-icon{margin-right:0}
.mixora .sale-link{color:var(--orange)}
.mixora .mobile-toggle{display:none}

/* hero */
.mixora .hero{padding:0}
.mixora .hero-card{min-height:560px;background:radial-gradient(circle at 80% 28%,rgba(255,216,77,.9),transparent 25%),linear-gradient(115deg,#fff0e8 0 52%,#f8f8f8 52%);border-radius:0;overflow:hidden;display:grid;grid-template-columns:1.08fr .92fr;box-shadow:var(--shadow);position:relative}
.mixora .hero-copy{padding:clamp(42px,6vw,80px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.mixora .hero h1{margin:12px 0 18px;font-size:clamp(46px,7vw,86px);line-height:.88;letter-spacing:-5px;font-weight:1000;text-transform:uppercase;color:var(--orange)}
.mixora .hero p{max-width:570px;color:#454545;line-height:1.65;font-size:17px}
.mixora .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.mixora .hero-art{position:relative;min-height:440px;display:grid;place-items:center;overflow:hidden}
.mixora .hero-art::before{content:"";width:min(390px,72vw);aspect-ratio:1;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 35px rgba(255,216,77,.22);position:absolute}
.mixora .game-box{width:250px;height:310px;border-radius:22px;background:#121212;box-shadow:0 28px 55px rgba(0,0,0,.3);transform:rotate(-8deg);padding:28px;color:white;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:space-between}
.mixora .game-box .small{font-size:12px;color:#f8c644;font-weight:900;letter-spacing:2px}
.mixora .game-box .big{font-size:42px;line-height:.9;font-weight:1000;text-transform:uppercase}
.mixora .game-box .seal{width:72px;height:72px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:31px;align-self:flex-end}
.mixora .hero-art img{position:relative;z-index:3;max-height:420px;width:auto;border-radius:22px;box-shadow:0 28px 55px rgba(0,0,0,.25)}

/* categories */
.mixora .category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.mixora .category{border-radius:16px;padding:22px;color:white;background:#0b0b0b;display:flex;align-items:flex-end;min-height:170px;font-size:18px;font-weight:950;text-transform:uppercase;position:relative;overflow:hidden;transition:.25s ease}
.mixora .category:hover{transform:translateY(-4px)}
.mixora .category::after{content:"";width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08);position:absolute;right:-35px;top:-35px}
.mixora .category:nth-child(7n+1){background:linear-gradient(145deg,#111,#242424)}
.mixora .category:nth-child(7n+2){background:linear-gradient(145deg,#ef5b16,#be3600)}
.mixora .category:nth-child(7n+3){background:linear-gradient(145deg,#162641,#0a0f19)}
.mixora .category:nth-child(7n+4){background:linear-gradient(145deg,#6f45b6,#3b1d70)}
.mixora .category:nth-child(7n+5){background:linear-gradient(145deg,#0c8561,#034733)}
.mixora .category:nth-child(7n+6){background:linear-gradient(145deg,#f5b100,#da7000)}
.mixora .category:nth-child(7n+7){background:linear-gradient(145deg,#e73c61,#9e1534)}
.mixora .category-icon{position:absolute;right:16px;top:12px;font-size:44px;opacity:.7}

/* slider */
.mixora .mixora-slider{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;box-shadow:var(--shadow)}
.mixora .mixora-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:center;padding:clamp(28px,5vw,64px);background:linear-gradient(115deg,#111,#2a2a2a);background-size:cover;background-position:center;color:#fff}
.mixora .mixora-slide.active{opacity:1;position:relative}
.mixora .mixora-slide-copy{max-width:560px}
.mixora .mixora-slide-copy h2{font-size:clamp(30px,4vw,54px);line-height:1;text-transform:uppercase;margin:0 0 14px;font-weight:1000}
.mixora .mixora-slide-copy p{font-size:17px;line-height:1.6;margin:0 0 20px;color:#eee}
.mixora .mixora-slider-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;gap:8px;justify-content:center;z-index:3}
.mixora .mixora-slider-dots button{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.mixora .mixora-slider-dots button.active{width:26px;background:var(--yellow)}

/* ticker */
.mixora .ticker-wrap{overflow:hidden;background:var(--yellow);border-block:1px solid #e7b800}
.mixora .ticker{white-space:nowrap;padding:14px 0;font-weight:950;text-transform:uppercase;animation:mixora-ticker 22s linear infinite;display:inline-block}
.mixora .ticker-star{color:var(--orange-dark)}
@keyframes mixora-ticker{to{transform:translateX(-50%)}}

/* products */
.mixora .product-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:20px}
.mixora .product-toolbar h2{margin:0;font-size:32px}
/* Szekció-fejléc a főoldali terv szerint: kis kicker + tömör cím, a másik
   oldalon az „Összes … →" link, alapvonalra igazítva. */
.mixora .sec-head{align-items:baseline;margin:0 0 20px}
.mixora .sec-head .eyebrow{display:block;margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.14em}
.mixora .sec-head h2{font-size:27px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
@media(max-width:680px){.mixora .sec-head h2{font-size:22px}}
/* „Összes … →" link a szekció fejlécében, a cím ellenoldalán. */
/* A „megtekintés" link egy sorban marad (`nowrap`), ezért keskeny telefonon
   a cím mellett nem fért el, és oldalra görgethetővé tette a lapot. A fejléc
   ezért tördelhet: ilyenkor a link a cím ALÁ kerül. */
.mixora .section-more{font-size:14px;font-weight:800;color:var(--orange);white-space:nowrap}
@media(max-width:520px){
  .mixora .product-toolbar, .mixora .sec-head{flex-wrap:wrap;gap:10px}
  .mixora .section-more{white-space:normal}
}
.mixora .section-more:hover{color:var(--orange-dark);text-decoration:underline}
.mixora .chips{display:flex;gap:8px;flex-wrap:wrap}
.mixora .chip{padding:10px 14px;border-radius:999px;background:#f5f5f5;font-weight:800;font-size:13px}
.mixora .chip.active{background:var(--black);color:#fff}
.mixora .products{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch}
/* Oldal-szintű oszlopszám (pl. Újdonságok oldal): a --page-cols változóból;
   a lenti töréspontok felülírják, hogy mobilon ne szoruljon össze. */
.mixora .products--cols{grid-template-columns:repeat(var(--page-cols,4),minmax(0,1fr))}
/* OSZLOP-elrendezés: a kosárgomb (margin-top:auto) a kártya aljára kerül, így
   egy sorban EGY VONALBAN állnak a gombok — akkor is, ha az egyik terméknév
   három sor, a másik egy, vagy ha csak az egyiknél van egységár.

   FIGYELEM: itt NEM lehet `height:100%`. A kártya rács- és flex-sávban is él,
   és a nyúlás (align-items:stretch) csak akkor működik, ha a magasság `auto` —
   a százalékos magasság kikapcsolja, és a kártya a saját tartalmához zsugorodik
   (mérve: 440/458/477 px egy soron belül, height:auto-val egységesen 477). */
.mixora .product{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s;position:relative;display:flex;flex-direction:column;color:inherit}
.mixora .product:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(0,0,0,.25)}
.mixora .wish{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;z-index:2;cursor:pointer}
/* Nagyobb termékkép: a kosárgomb kikerült az ár mellől, a felszabaduló
   helyet a kép kapja. */
/* A termékkép doboza NÉGYZETES: a konverziók is 1:1-ben készülnek (500×500,
   fehér háttérrel kitöltve), ezért bármilyen más arány levágna a képből. */
.mixora .product-media{aspect-ratio:1;background:#f4f4f4;display:grid;place-items:center;position:relative;overflow:hidden}
.mixora .product-media img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Sarok-jelvény: akció-százalék vagy a termék matricája. A szín alapból az
   akciós szín (a boltos átszínezheti), matricánál a matrica saját színe. */
.mixora .product-media .flag{position:absolute;top:10px;left:10px;z-index:2;background:var(--shop-sale,var(--orange));color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:4px 10px;line-height:1.4}
.mixora .mock-product{width:65%;height:78%;border-radius:15px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 15px 30px rgba(0,0,0,.15);transform:rotate(-4deg);background:var(--orange)}
.mixora .mock-product strong{font-size:23px;line-height:.95;text-transform:uppercase}
.mixora .product-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1 1 auto}
.mixora .stock{display:flex;align-items:center;gap:6px;color:var(--green);font-size:11.5px;font-weight:700;margin-bottom:6px}
.mixora .stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.mixora .stock.out{color:#b91c1c}
.mixora .product-name{font-size:14px;font-weight:700;min-height:38px;line-height:1.35}
/* FŐOLDALI MODULOK: a terméknév legfeljebb két sor, a többi „…" — a
   moduloknál a kártyák egymás mellett futnak, és egy négysoros név a
   szomszédjához képest szétlökné a kártyát. A kategória-/listaoldalon
   (.products--cols) marad a teljes név: ott a vevő böngészik, nem
   ajánlót néz. */
.mixora .products:not(.products--cols) .product-name,
.mixora .related-scroll .product-name{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Az ÁR-sor a kártya aljához tapad (margin-top:auto), a kosárgomb pedig
   fix távolságra alatta — így egy soron belül nemcsak a gombok, hanem az
   ÁRAK is egy vonalban állnak, akármilyen hosszú a terméknév. A szabad hely
   a név alá kerül, nem az ár és a gomb közé. */
.mixora .price-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px}
/* Bal oldalt az ár, jobb oldalt a kiegészítő árinformáció (egységár és
   betétdíj) — a vevő így egy pillantással összeveti a kettőt. A betétdíjat
   MÁR a listában látnia kell: a pénztárnál felbukkanó plusz tétel
   bizalmatlanságot szül. */
.mixora .price-main{min-width:0}
.mixora .price-extra{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;font-size:11px;color:var(--muted);line-height:1.35;white-space:nowrap}
/* A kosárgomb a kártya TELJES szélességében, alul — nagyobb célfelület,
   és az ár mellől felszabaduló hely a terméknévnek jut. */
.mixora .cart-row{margin-top:12px}
.mixora .cart-row .cart-btn{width:100%;border-radius:14px;padding:12px 14px;font-size:13.5px}
.mixora .cart-row .cart-btn-label{display:inline}
.mixora .old-price{font-size:12px;text-decoration:line-through;color:var(--muted);font-weight:600}
.mixora .price{font-size:17px;color:var(--shop-price,var(--orange));font-weight:800}
.mixora .price.sale{color:var(--shop-sale,var(--orange))}
.mixora .cart-btn{border-radius:999px;border:0;background:var(--shop-cart-button, var(--black));color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;font-weight:700;font-size:12.5px;line-height:1;transition:.2s ease}
.mixora .cart-btn:hover{background:var(--shop-cart-button, var(--orange));filter:brightness(1.08);transform:translateY(-1px)}
.mixora .cart-btn-label{white-space:nowrap}
/* Az „Értesítést kérek" gomb UGYANAZT a színt kapja, mint a Kosárba gomb: a
   kettő egymás helyén áll a terméklistában, és a boltos egy helyen (Megjelenés →
   Kosárba gomb színe) állítja mindkettőt. */
.mixora .cart-btn--notify{background:var(--shop-cart-button, var(--black));color:var(--shop-cart-button-text, #fff)}
.mixora .cart-btn--notify:hover{background:var(--shop-cart-button, var(--orange));filter:brightness(1.08)}
.mixora .cart-btn--notify svg.ic{color:var(--shop-cart-button-text, #fff)}
.mixora .cart-btn--ghost{background:#f1f1f1;color:#9a9a9a;width:38px;height:38px;padding:0}

/* vásárlói vélemények (reviews modul) */
.mixora .reviews-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.mixora .reviews-head .kicker{display:block;margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.mixora .reviews-head h2{margin:0;font-size:27px;font-weight:800;letter-spacing:-.5px}
.mixora .reviews-count{font-size:14px;font-weight:700;color:var(--muted)}
.mixora .reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mixora .review{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}
.mixora .review .stars{color:#f59e0b;font-size:14px;letter-spacing:2px}
.mixora .review p{font-size:14px;line-height:1.6;margin:10px 0 14px;color:#374151}
/* `min-width:0`: a flex-elem alapból nem zsugorodhat a tartalma alá. A
   terméknév `nowrap`-es, így a sor MINIMUMA a teljes szöveg szélessége lett —
   ez feszítette szét a rácsot, és tette a főoldalt mobilon oldalra
   görgethetővé (mérve: 390 px nézet, 489 px lap). */
.mixora .review .who{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;min-width:0}
.mixora .review .ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;flex:none}
.mixora .review .review-product{font-weight:600;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mixora .review .review-product a:hover{color:var(--orange)}
@media(max-width:1100px){.mixora .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.mixora .reviews{grid-template-columns:minmax(0,1fr)}}

/* A keresőoldal mezője és gombja a téma gomb-formáját veszi fel (pill),
   ugyanúgy lekerekítve, mint a „Kosárba" gomb a termékkártyán. */
.mixora .search-page-input{border-radius:999px;padding-left:20px;padding-right:20px}
.mixora .search-page-btn{border-radius:999px;background:var(--black);font-weight:700;padding-left:26px;padding-right:26px;transition:.2s ease}
.mixora .search-page-btn:hover{background:var(--orange);transform:translateY(-1px)}

/* lapozó: „N megjelenítve, összesen: M" + Mutass még terméket */
/* A blokk alatt levegő kell: e nélkül a gomb a lábléchez tapadna. */
.mixora .load-more{margin-top:34px;margin-bottom:clamp(48px,6vw,84px);text-align:center}
/* A felirat két oldalán vízszintes vonal fut ki a szélekig. */
.mixora .load-more-meta{display:flex;align-items:center;gap:18px;font-size:15px;color:var(--text)}
.mixora .load-more-meta::before,.mixora .load-more-meta::after{content:"";flex:1;height:1px;background:var(--black)}
.mixora .load-more-meta b{font-weight:900}
.mixora .load-more-btn{display:inline-block;margin-top:22px;border-radius:999px;padding:16px 40px;background:var(--orange);color:#fff;font-weight:900;font-size:15px;letter-spacing:.06em;text-transform:uppercase;transition:.2s ease}
.mixora .load-more-btn:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.16)}
@media(max-width:680px){
  .mixora .load-more-meta{font-size:13px;gap:12px}
  .mixora .load-more-btn{padding:14px 26px;font-size:13.5px;width:100%}
}

/* club */
.mixora .club-card{border-radius:30px;background:var(--orange);color:white;overflow:hidden;min-height:340px;display:grid;grid-template-columns:1fr 1fr;position:relative}
.mixora .club-copy{padding:55px}
.mixora .club-copy h2{font-size:44px;line-height:.95;margin:10px 0 20px;text-transform:uppercase}
.mixora .club-copy p{line-height:1.65;max-width:520px}
.mixora .club-visual{display:grid;place-items:center;position:relative}
.mixora .club-person{width:270px;height:270px;border-radius:48% 48% 42% 42%;background:linear-gradient(135deg,#ffd84d,#fff3c3);display:grid;place-items:center;font-size:110px;border:12px solid rgba(255,255,255,.2)}
.mixora .sticker{position:absolute;background:#fff;color:#111;padding:12px 18px;border-radius:999px;font-weight:950;box-shadow:0 12px 20px rgba(0,0,0,.15);transform:rotate(-8deg)}
.mixora .sticker.s1{left:7%;top:23%}.mixora .sticker.s2{right:10%;top:17%;transform:rotate(10deg)}.mixora .sticker.s3{left:15%;bottom:12%;transform:rotate(5deg)}

/* editorial */
.mixora .editorial{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mixora .article{border-radius:24px;overflow:hidden;background:#f5f5f5}
.mixora .article-cover{min-height:310px;padding:32px;display:flex;align-items:flex-end;color:#fff;position:relative;background:linear-gradient(135deg,#17202f,#6c7d2b);background-size:cover;background-position:center}
.mixora .article:nth-child(2n) .article-cover{background:linear-gradient(135deg,#c62d64,#f29558)}
.mixora .article-cover h3{font-size:38px;line-height:.95;text-transform:uppercase;margin:0;position:relative;z-index:2}
.mixora .article-body{padding:25px}
.mixora .article-body p{color:var(--muted);line-height:1.6}

/* reviews */
.mixora .review-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}
.mixora .score{text-align:right;font-weight:950;font-size:34px}
.mixora .stars{color:#ffb000;font-size:16px}
.mixora .reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mixora .review{border:1px solid var(--line);border-radius:18px;padding:22px}
.mixora .review p{line-height:1.55;color:#555}
.mixora .reviewer{font-weight:900;margin-top:20px}

/* newsletter/media */
.mixora .newsletter{background:var(--cream);border-radius:28px;padding:42px;display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.mixora .newsletter h2{font-size:40px;color:var(--orange);margin:0 0 8px;text-transform:uppercase}
.mixora .newsletter-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.mixora .newsletter input{border:1px solid #ddd;background:#fff;border-radius:999px;padding:14px 18px;outline:0}

/* hírlevél kártya (kép + színes panel) — a színek per-blokk felülírhatók */
/* hírlevél-sáv (a főoldali terv szerint: ikon + szöveg + űrlap egy sorban) */
.mixora .nl{display:flex;align-items:center;gap:30px;flex-wrap:wrap;border-radius:20px;padding:34px 40px;color:#fff;background:linear-gradient(120deg,var(--nl-bg) 0%,var(--nl-bg2) 100%);box-shadow:0 18px 44px rgba(0,0,0,.12)}
.mixora .nl-emoji{font-size:48px;line-height:1;flex:none}
.mixora .nl-emoji--img img{width:64px;height:64px;object-fit:contain;border-radius:12px}
.mixora .nl-grow{flex:1;min-width:220px}
.mixora .nl h3{margin:0;font-size:23px;font-weight:800;line-height:1.2;text-transform:none;letter-spacing:-.3px}
.mixora .nl h3 .nl-hl{color:var(--yellow)}
.mixora .nl p{margin:5px 0 0;font-size:14.5px;opacity:.9;line-height:1.5}
.mixora .nl-form{display:flex;flex-direction:column;gap:10px;min-width:440px}
.mixora .nl-fields{display:flex;gap:10px}
.mixora .nl-inp{flex:1;min-width:0;height:48px;padding:0 17px;border:0;outline:0;border-radius:12px;font:inherit;font-size:14.5px;color:#0f172a;background:#fff}
.mixora .nl-inp:focus{outline:2px solid var(--yellow)}
.mixora .nl-btn{height:48px;padding:0 24px;border:0;border-radius:12px;background:var(--black);color:#fff;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease}
.mixora .nl-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
/* Kötelező adatvédelmi elfogadás — az űrlap alatt, olvashatóan. */
.mixora .nl-consent{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.94)}
.mixora .nl-consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--yellow)}
.mixora .nl-consent a{text-decoration:underline}
.mixora .nl-ok{background:#fff;border-radius:14px;padding:16px 20px;font-weight:800;color:var(--green)}
.mixora .nl-err{margin:0;color:#fff;background:rgba(0,0,0,.25);border-radius:8px;padding:6px 10px;font-size:13px}
@media(max-width:900px){
  .mixora .nl{padding:26px 22px;gap:18px}
  .mixora .nl-form{min-width:0;width:100%}
  .mixora .nl-fields{flex-wrap:wrap}
  .mixora .nl-inp{flex:1 1 100%}
  .mixora .nl-btn{width:100%}
}


/* benefits/footer */
.mixora .benefits{background:var(--cream);padding:32px 0}
.mixora .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mixora .benefit{display:flex;gap:14px;align-items:center}
.mixora .benefit-icon{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:22px}
.mixora .benefit strong{display:block}
/* ===== Lábléc (candy-csík + sötét, 4 oszlop) ===== */
.mixora .sep-candy{height:10px;background:linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%)}
.mixora footer.mixora-footer{--fdim:#9ca3af;--fpanel:#14171c;--fline:rgba(255,255,255,.09);background:var(--shop-footer-bg,#0b0d10);color:#e5e7eb;margin-top:0}
.mixora .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding:52px 0 40px}
.mixora .footer-brand .logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px}
.mixora .footer-brand .logo-badge{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px}
.mixora .footer-brand .desc{margin-top:14px;font-size:14px;line-height:1.65;color:var(--fdim);max-width:340px}
.mixora .footer-brand .contact-line{margin-top:14px;color:#cfd0d3;font-size:14px}
.mixora .socials{display:flex;gap:10px;margin-top:20px}
.mixora .soc{width:42px;height:42px;border-radius:12px;background:var(--fpanel);border:1px solid var(--fline);display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;text-decoration:none;transition:.15s}
.mixora .soc:hover{background:var(--orange);transform:translateY(-2px)}
.mixora .mixora-footer h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.mixora .mixora-footer h4::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--orange)}
.mixora .footer-grid>div:nth-child(2) h4::before{background:#f472b6}
.mixora .footer-grid>div:nth-child(3) h4::before{background:#fbbf24}
.mixora .footer-grid>div:nth-child(4) h4::before{background:#34d399}
/* A lábléc oszlop-nyitó gombja csak keskeny kijelzőn látszik (lásd a
   mobil blokkot): szélesen minden lista nyitva van, ott nincs mit nyitni. */
/* Ha csak az aláírás marad (jogi sor kikapcsolva), középre kerül. */
.mixora .copyright.copyright-alairas{justify-content:center;text-align:center}
.mixora .footer-nyit{display:none;background:none;border:none;color:inherit;padding:0;cursor:pointer}
.mixora .footer-nyit svg{width:16px;height:16px;transition:transform .18s}
.mixora .mixora-footer ul{list-style:none;padding:0;margin:0}
.mixora .mixora-footer ul a{display:inline-block;color:var(--fdim);text-decoration:none;font-size:14.5px;padding:6px 0;transition:.12s}
.mixora .mixora-footer ul a:hover{color:#fff;transform:translateX(3px)}
.mixora .contact-item{display:flex;gap:14px;align-items:flex-start;padding:9px 0}
.mixora .contact-item .ic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--fpanel);border:1px solid var(--fline);display:grid;place-items:center;font-size:16px}
.mixora .contact-item b{display:block;font-size:14.5px;color:#fff}
.mixora .contact-item span{font-size:13px;color:var(--fdim)}
.mixora .open-badge{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:rgba(34,197,94,.12);color:#4ade80;font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 14px}
.mixora .open-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.mixora .chips{display:flex;gap:8px;flex-wrap:wrap}
.mixora .chip{background:#fff;color:#111;font-size:12px;font-weight:800;border-radius:8px;padding:8px 13px}
.mixora .chip.dark{background:var(--fpanel);color:#fff;border:1px solid var(--fline);font-weight:600}
.mixora .copyright{border-top:1px solid var(--fline);padding:20px 0 26px;margin:0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:var(--fdim);flex-wrap:wrap}
.mixora .legal-links{display:flex;gap:22px;flex-wrap:wrap}
.mixora .legal-links a{color:var(--fdim);text-decoration:none}
.mixora .legal-links a:hover{color:#fff}
.mixora .copyright a{color:inherit}
.mixora .chat{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:var(--orange);color:#fff;border:0;box-shadow:0 15px 30px rgba(239,91,22,.35);font-size:24px;cursor:pointer;z-index:30}

/* mega menü */
.mixora .nav-item{position:relative}
.mixora .nav-link-button{border:0;background:transparent;padding:18px 0;font:inherit;font-weight:650;cursor:pointer;display:flex;align-items:center;gap:7px;color:inherit}
.mixora .nav-link-button::after{content:"⌄";font-size:12px;transition:transform .2s ease}
.mixora .nav-item:hover .nav-link-button,.mixora .nav-item.open .nav-link-button{color:var(--orange)}
.mixora .nav-item:hover .nav-link-button::after,.mixora .nav-item.open .nav-link-button::after{transform:rotate(180deg)}
/* — MultiMenü (megamenü modul) — a fejléc alatt teljes szélességű lenyíló.
   A nav-item hoverre/kattintásra nyílik, mint az egyszerű lenyíló menü. */
/* A megamenüs menüpont statikus, így a lenyíló a sticky fejléchez igazodik
   (teljes szélesség) — különben a keskeny menüponthoz tapadna. */
.mixora .nav-item--mega{position:static}
.mixora .mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:46}
.mixora .nav-item:hover .mega,.mixora .nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mixora .mega-inner{width:100%;max-width:var(--shop-content-width,1560px);margin:0 auto;display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;padding:32px clamp(18px,3vw,56px)}
.mixora .mega-inner--nopromo{grid-template-columns:minmax(0,1fr)}
/* A promó-kártyák oldala beállítás szerint (bal az alap, jobbra fordítva
   a rács-oszlopok cseréjével — a HTML sorrendje nem változik). */
.mixora .mega-inner--right{grid-template-columns:minmax(0,1fr) 300px}
.mixora .mega-inner--right .mega-promos{grid-column:2;grid-row:1}
.mixora .mega-inner--right .mega-cols{grid-column:1;grid-row:1}

/* Bal oldali promó-kártyák */
.mixora .mega-promos{display:flex;flex-direction:column;gap:16px}
.mixora .promo-card{position:relative;overflow:hidden;border-radius:18px;color:var(--promo-text,#fff);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;min-height:210px;transition:transform .18s ease;background:var(--promo-bg,linear-gradient(160deg,var(--orange) 0%,var(--orange-dark) 60%,#7f1d1d 100%))}
.mixora .promo-card:hover{transform:scale(1.02);background:var(--promo-bg-hover,var(--promo-bg,linear-gradient(160deg,var(--orange) 0%,var(--orange-dark) 60%,#7f1d1d 100%)));color:var(--promo-text-hover,var(--promo-text,#fff))}
.mixora .promo-card .promo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.mixora .promo-card .art{position:absolute;top:14px;right:16px;font-size:60px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.mixora .promo-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.mixora .promo-tag{background:rgba(255,255,255,.92);color:var(--black);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 11px;margin-bottom:10px}
.mixora .promo-title{font-size:21px;font-weight:800;line-height:1.15}
.mixora .promo-sub{font-size:13px;opacity:.92;margin-top:5px}
.mixora .promo-cta{margin-top:14px;background:var(--black);color:var(--promo-cta-text,#fff);font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px}
.mixora .promo-mini{min-height:92px;flex-direction:row;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--promo-bg,linear-gradient(135deg,#0ea5e9 0%,#1d4ed8 100%))}
.mixora .promo-mini:hover{background:var(--promo-bg-hover,var(--promo-bg,linear-gradient(135deg,#0ea5e9 0%,#1d4ed8 100%)))}
.mixora .promo-mini .promo-title{font-size:16px}
.mixora .promo-mini .art{position:static;font-size:40px}

/* Jobb oldali oszlopok */
.mixora .mega-cols{display:grid;grid-template-columns:repeat(var(--mega-cols,4),minmax(0,1fr));gap:8px 44px;align-content:start}
/* A fejléc-vonal MINDEN hasábnál egy magasságban fusson — a cím nélküli
   (folytatás) hasáboknál is, ahol a h4 üres. */
/* FIX magasság: így a fejléc alatti vonal MINDEN hasábnál pontosan egy
   szinten fut — a cím nélküli (folytatás) hasáboknál is. A hosszú cím
   egy sorban marad, szükség esetén „…"-tal levágva. */
.mixora .mega-cols .col h4{display:flex;align-items:flex-end;gap:8px;height:29px;padding-bottom:4px;margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--black);line-height:1.5;overflow:hidden}
/* RÖGZÍTETT magasság, nem min-height: a szöveges fejléc (pl. „FINOMSÁGOK")
   különben megnyújtaná a saját oszlopát, és annak a vonala lejjebb csúszna
   a többinél. A szöveg alulra igazodik, tehát a helyén marad. */
/* A négy oszlop-vonal a lábléc fölötti csík (.sep-candy) színeit kapja,
   oszloponként egyet — négynél több oszlopnál a minta ismétlődik. */
.mixora .mega-cols .col:nth-child(4n+1) h4{border-bottom-color:#f472b6}
.mixora .mega-cols .col:nth-child(4n+2) h4{border-bottom-color:#fbbf24}
.mixora .mega-cols .col:nth-child(4n+3) h4{border-bottom-color:#34d399}
.mixora .mega-cols .col:nth-child(4n+4) h4{border-bottom-color:#38bdf8}
/* A hosszú cím egy sorban marad, „…"-tal levágva — a levágás a szövegen
   van, nem a fejlécen, hogy az ékezetek ne csorbuljanak. */
.mixora .mega-cols .col h4 > *,.mixora .mega-cols .col h4{white-space:nowrap;text-overflow:ellipsis}
.mixora .mega-cols .col h4 a{overflow:hidden;text-overflow:ellipsis}
.mixora .mega-cols .col h4 a{color:inherit}
/* A fejléc linkje NE örökölje az oszlop-linkek 8px-es belső terét: attól
   38px magas lett, és a rögzített magasságú fejlécben levágódott a teteje
   (a „FINOMSÁGOK" felirat eltűnt). Itt kompakt, egysoros felirat kell. */
.mixora .mega-cols .col h4 a{display:inline;padding:0;margin:0;border-radius:0;line-height:inherit;background:none}
.mixora .mega-cols .col ul{list-style:none;margin:0;padding:0}
.mixora .mega-cols .col a{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);font-size:14.5px;font-weight:500;padding:8px 10px;margin:0 -10px;border-radius:8px;transition:background .12s,color .12s}
/* A kiemelés a TÉMA fő színéből képződik (--mm-hover felülírja); a halvány
   háttér ugyanabból a színből kevert, hogy minden palettához illeszkedjen. */
.mixora .mega-cols .col li a:hover{background:#f4f4f6;color:var(--mm-hover,var(--orange-dark));font-weight:700}
@supports (background:color-mix(in srgb,red 10%,white)){
  .mixora .mega-cols .col li a:hover{background:color-mix(in srgb,var(--mm-hover,var(--orange)) 12%,#fff)}
}
.mixora .mega-cols .col h4 a:hover{color:var(--mm-hover,var(--orange))}
.mixora .mega-footer .all-link:hover{color:var(--mm-hover,var(--orange))}
.mixora .mega-cols .col a .arrow{opacity:0;font-size:12px;transition:opacity .12s}
.mixora .mega-cols .col a:hover .arrow{opacity:1}
.mixora .mega .badge{position:static;min-width:0;height:auto;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px}
.mixora .mega .badge.uj{background:#dcfce7;color:#15803d}
.mixora .mega .badge.top{background:#fee2e2;color:#b91c1c}

/* Alsó sáv */
.mixora .mega-footer{grid-column:1/-1;border-top:1px solid var(--line);margin-top:8px;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mixora .mega-footer .all-link{font-weight:800;font-size:15px;color:var(--black)}
.mixora .mega-footer .hint{font-size:13px;color:var(--muted)}

@media(max-width:1100px){
  .mixora .mega-inner,.mixora .mega-inner--right{grid-template-columns:1fr;gap:24px;padding:24px 18px}
  .mixora .mega-inner--right .mega-promos,.mixora .mega-inner--right .mega-cols{grid-column:1}
  .mixora .mega-promos{flex-direction:row}
  .mixora .mega-cols{grid-template-columns:repeat(2,1fr);gap:8px 24px}
}
@media(max-width:680px){
  .mixora .mega-promos{flex-direction:column}
  .mixora .mega-cols{grid-template-columns:1fr}
}

.mixora .mega-menu{position:absolute;left:0;top:100%;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:0 0 18px 18px;box-shadow:0 24px 50px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s ease;z-index:45;padding:18px 22px}
.mixora .nav-item:hover .mega-menu,.mixora .nav-item.open .mega-menu{opacity:1;visibility:visible;transform:translateY(0)}
.mixora .mega-menu a{display:block;padding:8px 0;color:#444;font-size:14px;font-weight:700}
.mixora .mega-menu a:hover{color:var(--orange);transform:translateX(3px)}

/* A menü TELJES képernyős, saját fejléccel (logó + bezárás) — ezért nem a
   fejléc alatt kezdődik, és nincs saját belső tere: azt a fejléc és a
   törzs adja. Oszlop-elrendezés, hogy az alsó sáv a helyén maradjon. */
.mixora .mobile-menu-panel{display:none;position:fixed;inset:0;background:#fff;z-index:70;padding:0;overflow:hidden}
.mixora .mobile-menu-panel.open{display:flex;flex-direction:column}
.mixora .mobile-menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.mixora .mobile-menu-group{border-bottom:1px solid var(--line)}
.mixora .mobile-menu-group a{display:block;padding:14px 0;font-weight:800}

/* kategóriaoldal (v1.110-hez előkészítve) */
/* — Kategória-fejléc (cat-hero) — a terv szerint: kép vagy színátmenet,
   dekor-emoji, morzsamenü, cím, leírás-lead, jelvények és gyorsszűrők. --*/










/* A kategória bevezető szövege TELJES szélességben fut. A korábbi 560 px-es
   korlát egy rövid, egymondatos ajánlóhoz készült; a valódi kategória-leírások
   viszont több bekezdésnyi, keresőoptimalizált szövegek — azok ilyen szűk
   hasábban tördelve olvashatatlanná és aránytalanná váltak a fejlécben.
   A hero belső margója (padding) így is megtartja a levegőt a szélektől. */

.mixora .hero-meta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.mixora .meta-pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px);font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 14px}
.mixora .quick-filters{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.mixora .quick-filters .qf{background:#fff;color:var(--black);font-size:13px;font-weight:800;border-radius:999px;padding:9px 16px;transition:transform .12s ease}
.mixora .quick-filters .qf:hover{transform:translateY(-2px)}

/* Alkategória-csempék: ikon + név + darabszám. */
@media(max-width:680px){
  
  
}

.mixora .category-hero{margin-top:18px;border-radius:28px;min-height:280px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;background:radial-gradient(circle at 82% 24%,rgba(255,216,77,.95),transparent 25%),linear-gradient(135deg,#111 0%,#242424 65%,#ef5b16 140%);color:#fff;overflow:hidden;position:relative}
.mixora .category-hero h1{margin:8px 0 14px;font-size:clamp(42px,6vw,82px);line-height:.92;letter-spacing:-3px;text-transform:uppercase}
.mixora .category-hero p{max-width:660px;color:#ddd;font-size:16px;line-height:1.7}
.mixora .category-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-block:1px solid var(--line);margin-bottom:22px}
.mixora .category-count strong{font-size:22px}
.mixora .toolbar-actions{display:flex;gap:10px;align-items:center}
.mixora .tool-select,.mixora .filter-open,.mixora .view-btn{border:1px solid var(--line);background:#fff;border-radius:12px;min-height:44px;padding:0 14px;font:inherit;font-weight:800}
.mixora .category-layout{display:block}
/* Kép-nagyító felugró ablak (lightbox) a termékoldalon. */
#mixora-lightbox{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(8,8,10,.86);backdrop-filter:blur(4px);cursor:zoom-out}
#mixora-lightbox.open{display:grid}
#mixora-lightbox img{max-width:min(1100px,100%);max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:18px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#mixora-lightbox .lb-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#111;font-size:18px;font-weight:900;cursor:pointer;display:grid;place-items:center}

/* — Szűrő-sáv (vízszintes, a termékek fölött) —
   Pill-gombok natív <details> legördülővel: JS nélkül is működik. */
.mixora .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.mixora .fb-toggle{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 14px;font-size:14px;font-weight:600;background:#fff;cursor:pointer;user-select:none}
.mixora .fb-toggle input{position:absolute;opacity:0;width:0;height:0}
.mixora .fb-switch{position:relative;width:38px;height:22px;border-radius:999px;background:#e3e3e6;transition:.18s ease;flex:none}
.mixora .fb-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s ease}
.mixora .fb-toggle input:checked + .fb-switch{background:var(--orange)}
.mixora .fb-toggle input:checked + .fb-switch::after{transform:translateX(16px)}
.mixora .fb-toggle input:focus-visible + .fb-switch{outline:2px solid var(--orange);outline-offset:2px}

.mixora .fb-drop{position:relative}
.mixora .fb-drop > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:14px;font-weight:600;background:#fff;cursor:pointer;white-space:nowrap}
.mixora .fb-drop > summary::-webkit-details-marker{display:none}
.mixora .fb-drop > summary::after{content:"";width:7px;height:7px;border-right:2px solid #9a9a9a;border-bottom:2px solid #9a9a9a;transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.mixora .fb-drop[open] > summary{border-color:var(--orange);color:var(--orange)}
.mixora .fb-drop[open] > summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--orange)}
/* Aktív szűrő jelzése a gombon (kis pötty). */
.mixora .fb-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block}

.mixora .fb-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.14);padding:14px}
.mixora .fb-panel--list{max-height:320px;overflow-y:auto}
.mixora .fb-row{display:flex;align-items:center;gap:8px}
.mixora .fb-sep{color:var(--muted)}
.mixora .fb-input{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-size:14px}
.mixora .fb-option{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:14px;color:#4e4e52;cursor:pointer}
.mixora .fb-option input{accent-color:var(--orange);flex:none}
.mixora .fb-option span:first-of-type{flex:1;min-width:0}
.mixora .fb-count{color:#aaa;font-size:12px}
.mixora .fb-apply{width:100%;margin-top:10px;border:0;border-radius:999px;background:var(--black);color:#fff;font:inherit;font-weight:800;font-size:13.5px;padding:10px 16px;cursor:pointer}
.mixora .fb-apply:hover{background:var(--orange)}
.mixora .fb-clear{margin-left:auto;font-size:13.5px;font-weight:800;color:var(--orange)}
.mixora .fb-clear:hover{text-decoration:underline}

@media(max-width:680px){
  .mixora .filter-bar{gap:8px}
  .mixora .fb-toggle,.mixora .fb-drop > summary{padding:9px 14px;font-size:13.5px}
  .mixora .fb-panel{position:fixed;left:14px;right:14px;top:auto;min-width:0}
}

.mixora .filters{position:sticky;top:142px;border:1px solid var(--line);border-radius:22px;padding:20px;background:#fff}
.mixora .filter-group{padding:18px 0;border-bottom:1px solid var(--line)}
.mixora .filter-group:last-child{border-bottom:0}
.mixora .filter-title{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;align-items:center;padding:0;font-weight:950;cursor:pointer}
.mixora .filter-option{display:flex;align-items:center;gap:10px;padding:7px 0;color:#4e4e52;font-size:14px}
.mixora .filter-option input{accent-color:var(--orange)}
.mixora .category-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mixora .breadcrumbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:24px 0;color:#777;font-size:13px}
.mixora .breadcrumbs a{color:#777;text-decoration:none}
.mixora .breadcrumbs a:hover{color:var(--orange)}
.mixora .breadcrumbs strong{color:var(--black);font-weight:700}

@media(max-width:980px){
  /* Felső térköz: mobilon a fejléc-sor a lap tetejéhez simult, és a kosáron
     ülő darabszám-jelző (ami a gomb fölé lóg) kilógott a képernyőről. */
  .mixora .header-row{grid-template-columns:1fr auto;padding-top:12px}
  .mixora .search,.mixora .search-wrap{grid-column:1/-1;grid-row:2;margin-bottom:14px}
  .mixora .nav-row{display:none}
  .mixora .mobile-toggle{display:grid}
  .mixora .hero-card{grid-template-columns:1fr}
  .mixora .hero-art{min-height:360px}
  .mixora .products,.mixora .products--cols{grid-template-columns:repeat(3,1fr)}
  .mixora .club-card{grid-template-columns:1fr}
  .mixora .footer-grid{grid-template-columns:repeat(2,1fr)}
  .mixora .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .mixora .category-hero{grid-template-columns:1fr}
  .mixora .category-layout{grid-template-columns:1fr}
  .mixora .category-products{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .mixora .helpbar{display:none}
  .mixora .container{padding-left:14px;padding-right:14px}
  .mixora .hero-card{border-radius:0;min-height:auto}
  .mixora .hero-copy{padding:34px 24px}
  .mixora .section{padding:55px 0}
  .mixora .products,.mixora .products--cols{grid-template-columns:repeat(2,1fr);gap:12px}
  /* A kosárgomb már külön sorban, teljes szélességben áll, ezért a FELIRAT
     kifér — ikon-only gomb helyett olvasható „Kosárba". */
  .mixora .products .cart-row .cart-btn-label{display:inline}
  .mixora .products .cart-row .cart-btn{padding:11px 12px;font-size:12.5px}
  /* Keskeny mobil kártyán az ár és az egységár EGYMÁS ALÁ kerül: egy sorban
     egymásra csúsztak (a hosszú „9 975 Ft / kilogramm" ráfutott az árra). */
  .mixora .price-row{flex-direction:column;align-items:flex-start;gap:2px}
  .mixora .price-extra{align-items:flex-start;text-align:left;font-size:10.5px;white-space:normal}
  /* Kisebb kártya-tipográfia mobilon: két oszlopban a hosszú terméknév és a
     hosszú egységár is elfér, és több fér a képernyőre. */
  .mixora .product-body{padding:10px 11px 12px}
  .mixora .product-name{font-size:12.5px;min-height:32px;line-height:1.3}
  .mixora .price{font-size:15px}
  .mixora .old-price{font-size:11px}
  .mixora .stock{font-size:10.5px}
  .mixora .editorial{grid-template-columns:1fr}
  .mixora .reviews{grid-template-columns:minmax(0,1fr)}
  .mixora .newsletter{grid-template-columns:1fr;padding:28px 20px}
  .mixora .newsletter-form{grid-template-columns:1fr}
  .mixora .benefit-grid{grid-template-columns:1fr}

  /* LÁBLÉC KESKENY KIJELZŐN.

     Alapból KÉT oszlop marad (a linklisták keskenyek, elférnek egymás mellett),
     és az „Összecsukható" módban a listák zárva indulnak: négy nyitott lista
     telefonon több képernyőnyi görgetés, amit a vevő inkább feladna. A címsor
     ilyenkor koppintható, a nyíl jelzi az állapotot. */
  .mixora .footer-grid{grid-template-columns:1fr 1fr;gap:22px 18px}
  .mixora .footer-grid .footer-brand{grid-column:1/-1}
  .mixora .footer-grid h4{margin-bottom:10px}

  .mixora .footer-mob-stack{grid-template-columns:1fr}

  .mixora .footer-mob-accordion .footer-nyithato{grid-column:1/-1;border-bottom:1px solid var(--fline)}
  .mixora .footer-mob-accordion .footer-nyithato h4{display:flex;align-items:center;justify-content:space-between;
    margin:0;padding:14px 0;cursor:pointer;user-select:none}
  .mixora .footer-mob-accordion .footer-nyithato h4::before{display:none}
  .mixora .footer-mob-accordion .footer-nyit{display:inline-flex}
  /* Zárva: a lista nem foglal helyet. Nyitáskor a lista alá kis levegő kerül. */
  .mixora .footer-mob-accordion .footer-nyithato ul{display:none}
  .mixora .footer-mob-accordion .footer-nyithato.nyitva ul{display:block;padding-bottom:10px}
  .mixora .footer-mob-accordion .footer-nyithato.nyitva .footer-nyit svg{transform:rotate(180deg)}
  .mixora .category-products{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ============ termékoldal ============ */
.mixora .back-home{display:inline-flex;align-items:center;gap:8px;font-weight:900;color:var(--orange)}
.mixora .product-detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:clamp(38px,5vw,72px);align-items:start;padding-bottom:60px}
.mixora .gallery{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;position:sticky;top:120px}
.mixora .thumbs{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--orange) transparent;padding-right:2px}
.mixora .thumbs::-webkit-scrollbar{width:6px}
.mixora .thumbs::-webkit-scrollbar-thumb{background:var(--orange);border-radius:6px}
.mixora .thumb{flex:0 0 auto;aspect-ratio:1;border:1px solid var(--line);border-radius:16px;background:#f4f4f4;display:grid;place-items:center;font-size:28px;cursor:pointer;transition:.2s;overflow:hidden;padding:3px}
.mixora .thumb.active,.mixora .thumb:hover{border-color:var(--orange);box-shadow:0 0 0 2px rgba(239,91,22,.12)}
.mixora .main-image{aspect-ratio:1;border-radius:28px;background:#f4f4f4;overflow:hidden;position:relative}
/* Asztali nézet: egyszerre EGY kép látszik, a bélyegképek váltják. */
.mixora .mi-track{width:100%;height:100%}
.mixora .mi-slide{display:none;width:100%;height:100%;object-fit:cover;object-position:center;cursor:zoom-in}
.mixora .mi-slide.active{display:block}
.mixora .mi-dots{display:none}
.mixora .detail-info{padding-top:4px}
.mixora .detail-brand{font-size:13px;font-weight:900;color:var(--orange);text-transform:uppercase;letter-spacing:1.3px}
.mixora .detail-info h1{margin:10px 0 16px;font-size:clamp(30px,3.4vw,50px);line-height:1.02;letter-spacing:-1.6px;text-transform:none;font-weight:700}
.mixora .rating-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line);color:#555;font-size:14px}
.mixora .rating-row .stars{color:#ffb000}
.mixora .rating-row a{text-decoration:underline;text-underline-offset:3px}
.mixora .detail-copy{color:#5f5f63;line-height:1.7;font-size:16px;margin:22px 0}
.mixora .detail-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 26px}
.mixora .detail-highlight{border:1px solid var(--line);border-radius:15px;padding:15px;background:#fff;font-size:13px;color:var(--muted)}
.mixora .detail-highlight strong{display:block;font-size:15px;margin-top:5px;color:var(--text)}
.mixora .price-box{border-block:1px solid var(--line);padding:22px 0;margin-bottom:20px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.mixora .detail-price{font-size:40px;color:var(--shop-price,var(--orange));font-weight:1000;letter-spacing:-1.5px}
.mixora .detail-price.sale{color:var(--shop-sale,var(--orange))}
.mixora .price-box .old-price{font-size:15px}
.mixora .discount-pill{padding:8px 12px;border-radius:999px;background:#ffe1d2;color:var(--orange-dark);font-weight:950;white-space:nowrap}
.mixora .availability{display:flex;align-items:center;gap:10px;font-weight:900;margin-bottom:18px}
.mixora .purchase-row{display:grid;grid-template-columns:120px 1fr 54px;gap:12px;align-items:stretch}
.mixora .qty{border:1px solid var(--line);border-radius:999px;display:grid;grid-template-columns:34px 1fr 34px;align-items:center;overflow:hidden}
.mixora .qty button{border:0;background:#fff;font-size:20px;cursor:pointer;height:100%}
.mixora .qty input{width:100%;border:0;text-align:center;outline:0;font-weight:900}
/* A „Kosárba” gomb külön színt kaphat a Megjelenés beállításai közt; ha nincs
   megadva, az elsődleges (narancs) színt örökli — l. ThemeSettings. */
.mixora .buy-btn{font-size:16px;padding:16px 24px;background:var(--shop-cart-button, var(--orange)); color:var(--shop-cart-button-text, #fff)}
.mixora .buy-btn:hover{filter:brightness(.94)}
.mixora .wish-detail{border:1px solid var(--line);background:#fff;border-radius:50%;font-size:22px;cursor:pointer;display:grid;place-items:center}
/* Bizalmi sáv a termékoldalon: külön pirulák, fehér ikon-csempével. */
.mixora .trust{display:grid;gap:8px;margin-top:18px}
.mixora .titem{display:flex;align-items:center;gap:12px;background:#f4f5f7;border-radius:13px;padding:11px 15px;font-size:13px;font-weight:600;color:var(--ink,#0b0d10)}
.mixora .titem .ti{width:34px;height:34px;border-radius:10px;background:#fff;display:grid;place-items:center;color:#111;flex:0 0 auto}
.mixora .titem .ti svg{width:15px;height:15px}
.mixora .titem small{display:block;font-size:11.5px;color:#9ca3af;font-weight:500;margin-top:1px}
.mixora .delivery-card{margin-top:18px;border-radius:18px;background:var(--cream);padding:20px;display:grid;gap:12px}
.mixora .delivery-line{display:flex;gap:13px;align-items:flex-start}
.mixora .delivery-line span:first-child{font-size:22px}
.mixora .delivery-line small{color:var(--muted)}
.mixora .payment-icons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mixora .payment-icons span{padding:8px 11px;border:1px solid var(--line);border-radius:9px;font-size:12px;font-weight:850}
/* A fül-sor FELETT nincs vonal: a fülek alatti elválasztó önmagában elég,
   két egymás alatti vonal csak zajt visz a lapra. */
.mixora .product-tabs{margin-top:10px}
/* A fül-sor csak VÍZSZINTESEN görgethető (sok fülnél, mobilon), és a görgetősáv
   rejtve marad. Függőlegesen tilos: az aktív fül alatti sáv 1 képponttal kilógott,
   és ettől az egész menü görgethetővé vált. */
.mixora .tab-nav{display:flex;gap:34px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;overscroll-behavior-x:contain;position:sticky;top:0;background:#fff;z-index:4}
.mixora .tab-nav::-webkit-scrollbar{display:none}
.mixora .tab-btn{border:0;background:transparent;padding:22px 0;font-weight:900;white-space:nowrap;cursor:pointer;color:#9ca3af;position:relative;transition:color .12s}
.mixora .tab-btn:hover{color:var(--ink,#0b0d10)}
/* Az aktív fül alatt a bolt négyszínű sávja (ugyanaz, mint a kosár összesítőn). */
.mixora .tab-btn.active{color:#0b0d10}
.mixora .tab-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%)}
.mixora .tab-panel{display:none;padding:40px 0 60px}
.mixora .tab-panel.active{display:block}
.mixora .description-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px}
.mixora .description-grid h2{font-size:34px;margin-top:6px}
.mixora .rich-copy{color:#555;line-height:1.8}
/* A termékleírás bekezdés-tagolása: a Tailwind preflight minden margót
   nullázna, ezért a rich-copy tipográfiáját külön megadjuk (különben a
   bekezdések egybefolynak, ahogy a szerkesztőben tagolt szöveg is). */
.mixora .rich-copy p{margin:0 0 14px}
.mixora .rich-copy p:last-child{margin-bottom:0}
.mixora .rich-copy h2{font-size:22px;font-weight:900;margin:26px 0 10px;color:var(--black)}
.mixora .rich-copy h3{font-size:18px;font-weight:850;margin:22px 0 8px;color:var(--black)}
.mixora .rich-copy h4{font-size:16px;font-weight:800;margin:18px 0 8px;color:var(--black)}
.mixora .rich-copy ul,.mixora .rich-copy ol{margin:0 0 14px 22px}
.mixora .rich-copy ul{list-style:disc}
.mixora .rich-copy ol{list-style:decimal}
.mixora .rich-copy li{margin:0 0 6px}
.mixora .rich-copy strong,.mixora .rich-copy b{font-weight:800;color:var(--black)}
.mixora .rich-copy a{color:var(--orange);text-decoration:underline}
.mixora .rich-copy img{border-radius:14px;margin:14px 0}
.mixora .rich-copy table{width:100%;border-collapse:collapse;margin:0 0 16px}
.mixora .rich-copy th,.mixora .rich-copy td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.mixora .rich-copy blockquote{margin:0 0 16px;padding:10px 16px;border-left:3px solid var(--orange);background:#faf7f5}
.mixora .feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:start}
.mixora .feature-item{padding:18px;border-radius:17px;background:#f7f7f7}
.mixora .feature-item strong{display:block;margin-bottom:6px}
.mixora .spec-table td{padding:15px 16px;border-bottom:1px solid var(--line)}
.mixora .spec-table td:first-child{font-weight:850;width:38%;color:var(--muted)}
.mixora .review-summary{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center}
.mixora .big-score{text-align:center;font-size:70px;font-weight:1000;line-height:1}
/* Kapcsolódó termékek: fehér alap, rácsban — a kártyák saját kerete adja a tagolást. */
.mixora .recommend-strip{background:#fff}
.mixora .reco-title{font-size:26px;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 20px;color:#0b0d10}
.mixora .reco-title em{font-style:italic;background:#0b0d10;color:#fff;padding:2px 12px}
.mixora .reco-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1100px){.mixora .reco-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.mixora .reco-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
/* A „Nemrég megtekintett" mobilon vízszintesen görgethető (a kapcsolódó
   termékek maradnak rácsban). A kártyák a képernyő ~62%-át foglalják, hogy a
   következő is beleférjen — ettől látszik, hogy húzni lehet. */
@media(max-width:680px){
  .mixora .reco-scroll{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;gap:10px;padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .mixora .reco-scroll::-webkit-scrollbar{display:none}
  .mixora .reco-scroll > *{flex:0 0 62%;max-width:62%;scroll-snap-align:start}
}
.mixora .recommend-strip .products{grid-template-columns:repeat(5,1fr)}

@media(max-width:980px){
  .mixora .product-detail{grid-template-columns:1fr}
  .mixora .gallery{position:static}
  .mixora .description-grid{grid-template-columns:1fr}
  .mixora .review-summary{grid-template-columns:1fr}
  .mixora .recommend-strip .products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .mixora .gallery{grid-template-columns:1fr}
  /* Mobilon a bélyegkép-sáv a fő kép ALÁ, VÍZSZINTESEN kerül. A .thumbs
     flex-konténer, ezért a korábbi grid-template-columns nem hatott rajta:
     a bélyegképek egymás alatt, teljes szélességben maradtak — így az első
     bélyeg a fő kép MÁSODIK példányának látszott. */
  /* Mobilon nincs bélyegkép-sáv: a fő kép maga lapozható oldalra húzással.
     Így egy mozdulattal vált képet, nem kell apró képekre célozni. */
  .mixora .thumbs{display:none}
  .mixora .main-image{aspect-ratio:1;min-height:0}
  .mixora .mi-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .mixora .mi-track::-webkit-scrollbar{display:none}
  .mixora .mi-slide{display:block;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
  .mixora .mi-dots{display:flex;gap:6px;position:absolute;left:0;right:0;bottom:12px;justify-content:center;pointer-events:none}
  .mixora .mi-dots span{width:6px;height:6px;border-radius:50%;background:rgba(11,13,16,.22);transition:.2s}
  .mixora .mi-dots span.on{background:#0b0d10;width:18px;border-radius:99px}
  .mixora .detail-highlights{grid-template-columns:1fr}
  .mixora .purchase-row{grid-template-columns:100px 1fr}
  .mixora .wish-detail{grid-column:1/-1;height:48px;border-radius:999px}
  .mixora .feature-list{grid-template-columns:1fr}
  .mixora .recommend-strip .products{grid-template-columns:1fr}
}

/* A készlet-értesítés felugró ablaka a témától FÜGGETLEN, azonosító-alapú
   stílust kapott (l. themes/mixora/shop/partials/stock-notify-popup.blade.php).
   A korábbi `.sn-modal` szabályok innen ki lettek vezetve: ott a `.sn-modal`
   maga a teljes képernyős réteg volt, az új ablakban viszont a fehér KÁRTYA —
   a névütközéstől a kártya teljes magasságúra nyúlt és a bal szélre csúszott. */

/* Flat, monokróm vonalas ikonok (currentColor, a szülő szövegszínét veszik fel) */
.mixora svg.ic{display:block;flex:0 0 auto}
.mixora .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.mixora .delivery-line svg.ic{margin-top:2px}
/* Kontraszt színes háttereken */
.mixora .seal svg.ic{color:#fff}
.mixora .club-person svg.ic{color:#7a5b00}
.mixora .cart-btn svg.ic{color:var(--shop-cart-button-text, #fff)}
.mixora .cart-btn--ghost svg.ic{color:#9a9a9a}


/* ══ ÉLŐ KERESŐ LEGÖRDÜLŐ ══════════════════════════════════════════════════
   Asztali nézetben kétoszlopos: balra a keresések és a kategória-találat,
   jobbra a termékek. Mobilon UGYANEZ a markup teljes képernyős rétegként,
   egy oszlopban, más sorrendben (keresések → termékek → kategória) — a
   rendezést a grid-területek végzik, nem külön HTML. */
.mixora .search-wrap{position:relative}

/* Fókuszban a mező kék keretet kap: látszik, hogy a legördülő ehhez tartozik. */
.mixora .search-wrap:focus-within .search{border-color:#29b3f0;box-shadow:0 0 0 5px rgba(41,179,240,.12),0 14px 34px -14px rgba(41,179,240,.35)}
.mixora .search-clear{border:0;background:#e2e8f0;color:#64748b;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:900;cursor:pointer;flex:0 0 auto;margin-right:4px}

.mixora .search-panel{
  position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px -18px rgba(15,23,42,.35),0 0 0 1px #eef0f3;
  display:grid;grid-template-columns:.9fr 1.1fr;
  grid-template-areas:"searches products" "cats products" "pages products";
  align-content:start;
}
.mixora .search-panel[hidden]{display:none}
.mixora .sp-searches{grid-area:searches;padding:22px 24px 0;border-right:1px solid #f1f3f5}
.mixora .sp-catblock{grid-area:cats;padding:18px 24px 0;border-right:1px solid #f1f3f5}
.mixora .sp-pageblock{grid-area:pages;padding:18px 24px 22px;border-right:1px solid #f1f3f5}
.mixora .sp-products{grid-area:products;padding:22px 24px 0;display:flex;flex-direction:column;max-height:min(72vh,620px)}

.mixora .sp-sect{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#9ca3af;
  margin:0 0 13px;display:flex;align-items:center;gap:8px}
.mixora .sp-sect svg{width:14px;height:14px;color:#29b3f0;flex:0 0 auto}

/* Keresés-javaslatok (chipek) */
.mixora .sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.mixora .sp-chip{display:inline-flex;align-items:center;gap:7px;background:#f1f9fe;color:#1181b8;
  border:1px solid #d3edfb;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:750;transition:.15s}
.mixora .sp-chip svg{width:13px;height:13px;flex:0 0 auto}
.mixora .sp-chip:hover{background:#29b3f0;border-color:#29b3f0;color:#fff;transform:translateY(-1px)}
.mixora .sp-chip mark{background:#fde047;color:inherit;border-radius:3px;padding:0 2px}

/* Kategória-találat */
.mixora .sp-cats{display:grid;gap:8px;margin-bottom:4px}
.mixora .sp-cat{display:flex;align-items:center;gap:12px;border-radius:13px;padding:10px 12px;
  border:1px solid transparent;transition:.15s}
.mixora .sp-cat:hover{background:#f8fafc;border-color:#eef0f3;padding-left:16px}
.mixora .sp-cic{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;overflow:hidden;
  background:#fce7f3;color:#ec4899}
.mixora .sp-cic svg{width:18px;height:18px}
.mixora .sp-cic img{width:100%;height:100%;object-fit:cover}
.mixora .sp-cat--2 .sp-cic{background:#e9f7fe;color:#29b3f0}
.mixora .sp-cat--3 .sp-cic{background:#fef9c3;color:#ca8a04}
.mixora .sp-cat--4 .sp-cic{background:#ecfdf5;color:#059669}
.mixora .sp-cat b{font-size:14px;font-weight:800;flex:1;min-width:0}
.mixora .sp-cat > span{font-size:11.5px;color:#9ca3af;font-weight:700;white-space:nowrap}
.mixora .sp-arr{color:#d1d5db;transition:.15s;display:grid;place-items:center}
.mixora .sp-arr svg{width:18px;height:18px}
.mixora .sp-cat:hover .sp-arr{color:#29b3f0;transform:translateX(3px)}

/* Kapcsolódó oldalak */
.mixora .sp-pages{display:grid;gap:4px}
.mixora .sp-page{font-size:13.5px;font-weight:700;color:var(--text);padding:7px 10px;border-radius:10px}
.mixora .sp-page:hover{background:#f8fafc}

/* Termék-találatok */
.mixora .sp-prods{display:grid;gap:4px;overflow-y:auto;min-height:0}
.mixora .sp-row{display:flex;align-items:center;gap:14px;border-radius:13px;padding:9px 12px;transition:.13s}
.mixora .sp-row:hover,.mixora .sp-row.is-active{background:#f1f9fe}
.mixora .sp-thumb{flex:0 0 52px;width:52px;height:52px;border-radius:10px;overflow:hidden;background:#f8fafc;border:1px solid #eef0f3}
.mixora .sp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mixora .sp-inf{flex:1;min-width:0;display:flex;flex-direction:column}
.mixora .sp-inf b{font-size:13.5px;font-weight:750;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mixora .sp-inf b mark{background:#fde047;color:inherit;border-radius:3px;padding:0 2px}
.mixora .sp-meta{font-size:11.5px;color:#9ca3af;font-weight:700;margin-top:2px}
.mixora .sp-out{color:#ef4444;font-style:normal}
.mixora .sp-pr{font-size:14.5px;font-weight:900;white-space:nowrap;margin-left:auto;align-self:center;display:flex;align-items:baseline;gap:7px}
.mixora .sp-pr.sale{color:#ec4899}
.mixora .sp-old{font-size:11px;color:#9ca3af;text-decoration:line-through;font-weight:700}

/* A panel alja: összes találat + billentyű-súgó */
.mixora .sp-foot{margin-top:auto;border-top:1px solid #f1f3f5;padding:13px 6px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff}
.mixora .sp-all{font-size:13.5px;font-weight:900;color:#29b3f0;display:inline-flex;align-items:center;gap:8px;transition:gap .15s}
.mixora .sp-all svg{width:17px;height:17px}
.mixora .sp-all:hover{gap:12px}
.mixora .sp-hint{font-size:11.5px;color:#9ca3af;font-weight:600}
.mixora .sp-hint b{border:1.5px solid #e5e7eb;border-radius:5px;padding:1px 6px;font-size:10.5px;color:#6b7280}
.mixora .sp-empty{padding:34px 20px;text-align:center;color:#9ca3af;font-weight:700}

/* ── MOBIL KERESŐ — külön, teljes képernyős felület ────────────────────────
   Szándékosan NEM a fejléc mezőjét alakítjuk át: attól a fejléc rácsa
   újratördelt és az oldal ugrált minden megnyitáskor. Ez egy önálló réteg a
   <body> alatt, a fejléchez hozzá sem nyúlunk. */
.mixora .search-clear{border:0;background:#e2e8f0;color:#64748b;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:900;cursor:pointer;flex:0 0 auto;margin-right:4px}

/* FENTRŐL csúszik le, mint egy fiók. A megnyitás így összefügg azzal, ahol a
   vásárló koppintott (a fejléc keresőmezője), nem csak „megjelenik". */
.msearch{position:fixed;inset:0;z-index:1600;background:#fff;display:flex;flex-direction:column;
  /* Oldalirányban SEMMI nem görgethető: a kereső egy telefon-szélességű
     felület, a vízszintes csúszkálás csak elrontja a gépelést. */
  overflow-x:hidden;
  transform:translateY(-100%);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.msearch.is-open{transform:translateY(0)}
.msearch[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.msearch{transition:none}}

/* A háttér görgetése zárva, de UGRÁS NÉLKÜL: a törzs a mentett pozíciónál
   rögzül, záráskor pontosan oda áll vissza (a `top` értékét a szkript adja). */
body.msearch-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

.msearch-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;border-bottom:1px solid #f1f3f5;background:#fff}
.msearch-box{flex:1;display:flex;align-items:center;gap:10px;min-width:0;
  background:#f8fafc;border:2px solid #29b3f0;border-radius:14px;padding:11px 13px;
  box-shadow:0 0 0 4px rgba(41,179,240,.12)}
.msearch-box svg.ic{color:#9ca3af;width:19px;height:19px;flex:0 0 auto}
.msearch-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15.5px;color:var(--text)}
.msearch-clear{border:0;background:#e2e8f0;color:#64748b;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:900;cursor:pointer;flex:0 0 auto}
/* Bezárás: kör alakú X. Fix méret, hogy ne vegyen el helyet a mezőtől, és
   hüvelykujjal is biztosan eltalálható (44 px). */
.msearch-close{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:#f1f5f9;color:#334155;
  display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s}
.msearch-close:hover,.msearch-close:active{background:#e2e8f0;color:#0b0d10}
.msearch-close svg{width:20px;height:20px}

/* A törzs: EGY oszlop, és más a sorrend, mint asztalon — mobilon a termék a
   fontos, a kategória alá kerül. A `sp-*` elemek stílusa közös a két felületen. */
.msearch-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  display:grid;grid-template-columns:1fr;align-content:start;
  grid-template-areas:"searches" "products" "cats" "pages"}
/* Rács-elem alapból `min-width:auto` — egy hosszú terméknév ettől szélesebbre
   feszítené a rácsot, és oldalra lehetne görgetni. */
.msearch-body > *{min-width:0}
.msearch-body .sp-searches,.msearch-body .sp-catblock,.msearch-body .sp-pageblock{border-right:0;padding:16px 16px 0}
.msearch-body .sp-products{padding:16px 16px 0;max-height:none;display:block}
.msearch-body .sp-prods{overflow:visible}
/* A javaslat-chipek TÖRDELNEK, nem oldalra görögnek: így egy pillantással
   mind látszik, és nincs vízszintes csúszkálás. */
.msearch-body .sp-chips{flex-wrap:wrap;overflow:visible;margin-bottom:12px}
.msearch-body .sp-chip{max-width:100%}
.msearch-body .sp-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msearch-body .sp-row{padding:10px 6px;border-bottom:1px solid #f4f6f8;border-radius:12px;max-width:100%}
.msearch-body .sp-inf{min-width:0}
.msearch-body .sp-cat{max-width:100%}
.msearch-body .sp-cat b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.msearch-body .sp-page{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msearch-body .sp-inf b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.msearch-body .sp-pr{margin-left:0;align-self:flex-start;margin-top:3px}
/* A „Mind a N találat" a képernyő alján ragad. */
.msearch-body .sp-foot{position:sticky;bottom:0;flex-direction:column;align-items:stretch;gap:8px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));margin-top:14px;border-top:1px solid #f1f3f5;background:#fff}
.msearch-body .sp-all{justify-content:center;background:var(--black);color:#fff;border-radius:14px;padding:15px}
.msearch-body .sp-all:hover{gap:8px}
.msearch-body .sp-hint{display:none}

/* Asztali nézetben a mobil kereső soha nem jelenik meg. */
@media(min-width:981px){.msearch{display:none}}

/* mobil ragadós „Kosárba" sáv a termékoldalon (Megjelenésnél kapcsolható) */
.mixora .mobile-buybar,.mixora .mobile-buybar-spacer{display:none}
@media(max-width:640px){
  .mixora .mobile-buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;background:#fff;border-top:1px solid #ececec;box-shadow:0 -6px 24px rgba(0,0,0,.08);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .mixora .mobile-buybar-spacer{display:block;height:76px}
  .mixora .mbb-info{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
  .mixora .mbb-info img{width:46px;height:46px;border-radius:10px;object-fit:cover;background:#f4f4f4;flex-shrink:0}
  .mixora .mbb-txt{min-width:0}
  .mixora .mbb-txt strong{display:block;font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mixora .mbb-txt span{font-size:15px;font-weight:900;color:var(--orange)}
  .mixora .mbb-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--shop-cart-button, var(--orange));color:var(--shop-cart-button-text, #fff);font-weight:850;font-size:15px;padding:13px 22px;cursor:pointer}
}

/* Kapcsolódó termékek — vízszintes görgetés (akár 10-12 db). */
.mixora .related-scroll{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--orange) transparent}
.mixora .related-scroll::-webkit-scrollbar{height:8px}
.mixora .related-scroll::-webkit-scrollbar-thumb{background:var(--orange);border-radius:8px}
/* A kapcsolódó/hasonló termékek sávja ugyanazt kapja, mint a főoldali
   modulok: a kártya kitölti a sor magasságát, így az árak és a kosárgombok
   egy vonalban állnak. A burkoló FLEX, különben a benne ülő kártya csak a
   saját tartalmáig érne. */
.mixora .related-item{flex:0 0 240px;max-width:240px;scroll-snap-align:start;display:flex}
.mixora .related-item > .product{width:100%}
@media(max-width:640px){.mixora .related-item{flex-basis:70vw;max-width:70vw}}

/* Termék-címkék a fő kép alatt. */
.mixora .product-tags{grid-column:1/-1;margin-top:16px;font-size:15px;color:#6b6b6b;line-height:1.7}
.mixora .product-tags .pt-label{font-weight:700;color:var(--black);margin-right:6px}
.mixora .product-tags .pt-tag{color:var(--orange);font-weight:600;text-decoration:none}
.mixora .product-tags .pt-tag:hover{text-decoration:underline}
.mixora .product-tags .pt-sep{margin-right:4px;color:#9a9a9a}

/* Statikus tartalom-oldalak (ÁSZF, adatvédelem stb.) — teljes oldalszélesség. */
.mixora .page-content{padding:8px 0 64px}
.mixora .page-title{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.02em;margin:0 0 26px;color:var(--black)}
.mixora .page-body{font-size:16px;line-height:1.75;color:#333}
.mixora .page-body h2{font-size:23px;font-weight:900;margin:34px 0 12px;color:var(--black)}
.mixora .page-body h3{font-size:19px;font-weight:850;margin:26px 0 10px;color:var(--black)}
.mixora .page-body p{margin:0 0 16px}
.mixora .page-body ul,.mixora .page-body ol{margin:0 0 16px 22px}
.mixora .page-body li{margin:6px 0}
.mixora .page-body a{color:var(--orange);text-decoration:underline}
.mixora .page-body img{max-width:100%;height:auto;border-radius:16px}
.mixora .page-body table{width:100%;border-collapse:collapse;margin:0 0 18px}
.mixora .page-body th,.mixora .page-body td{border:1px solid var(--line);padding:10px 12px;text-align:left}

/* Belépés / regisztráció / jelszó — auth űrlapok. */
.mixora .auth-wrap{max-width:440px;margin:0 auto;padding:8px 0 64px}
.mixora .auth-title{font-size:28px;font-weight:900;letter-spacing:-.02em;margin:0 0 22px;color:var(--black)}
.mixora .auth-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}
.mixora .auth-field{margin-bottom:16px}
.mixora .auth-label{display:block;font-size:14px;font-weight:800;color:var(--black);margin-bottom:8px}
.mixora .auth-input{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 15px;font:inherit;background:#fafafa}
.mixora .auth-input:focus{outline:none;border-color:var(--orange);background:#fff}
.mixora .auth-check{display:flex;align-items:center;gap:10px;font-size:14px;color:#555;margin-bottom:18px}
.mixora .auth-btn{width:100%;justify-content:center}
.mixora .auth-alert{border-radius:14px;padding:13px 15px;font-size:14px;margin-bottom:18px}
.mixora .auth-alert.err{background:#fff0ed;border:1px solid #ffd9cd;color:#c23a12}
.mixora .auth-alert.ok{background:#eefaf0;border:1px solid #cdeede;color:#1c7a3d}
.mixora .auth-links{margin-top:18px;font-size:14px;color:#666;display:grid;gap:8px}
.mixora .auth-links a{color:var(--orange);text-decoration:none;font-weight:700}
.mixora .auth-links a:hover{text-decoration:underline}

/* Fejléc mini-kosár lenyíló — csak akkor nyílik, ha van benne termék. */
.mixora .cart-menu{position:relative;display:inline-flex;align-items:center}
.mixora .mini-cart{position:absolute;top:100%;right:0;margin-top:12px;width:min(360px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.16);padding:16px;display:none;z-index:300}
.mixora .mini-cart::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mixora .cart-menu.has-items:hover .mini-cart,.mixora .cart-menu.has-items.force-open .mini-cart{display:block}
.mixora .mini-cart-lines{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow-y:auto}
.mixora .mini-cart-line{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center}
.mixora .mini-cart-thumb{width:52px;height:52px;border-radius:12px;overflow:hidden;background:#f4f4f4;flex:0 0 auto}
.mixora .mini-cart-thumb img{width:100%;height:100%;object-fit:cover}
.mixora .mini-cart-name{font-weight:800;font-size:14px;color:var(--black);text-decoration:none;line-height:1.3;display:block}
.mixora .mini-cart-name:hover{color:var(--orange)}
.mixora .mini-cart-meta{font-size:13px;color:#888;margin-top:3px}
.mixora .mini-cart-sub{font-weight:850;font-size:14px;white-space:nowrap}
.mixora .mini-cart-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mixora .mini-cart-total{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:12px}
.mixora .mini-cart-total strong{font-weight:900;font-size:17px}
.mixora .mini-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mixora .mini-cart-actions .btn{padding:12px;font-size:14px}
.mixora .mini-cart-view{background:#f2f2f2;color:var(--black)}
.mixora .mini-cart-empty{padding:18px 6px;text-align:center;color:#888;font-size:14px}
@media(max-width:860px){.mixora .mini-cart{display:none !important}}

/* A lábléc fölötti SEO-szöveg kísérőszöveg, nem olvasnivaló: a 13,5 px halkabb
   a termék- és menüszövegeknél, így nem versenyez a kínálattal. A sormagasság
   marad bőséges, hogy a kisebb méret is kényelmesen olvasható legyen. */
.mixora .seo-text-block{margin-top:30px;padding:34px 0 10px;border-top:1px solid var(--line);color:#666;line-height:1.85;font-size:12.5px}
.mixora .seo-block .prose-shop{font-size:12.5px;line-height:1.85}
/* A SEO-szöveg saját címsorai is kövessék a kisebb alapméretet: enélkül a
   h2/h3 a szöveghez képest aránytalanul nagy maradna. */
.mixora .seo-text-block .prose-shop h2,.mixora .seo-block .prose-shop h2{font-size:1.15rem}
.mixora .seo-text-block .prose-shop h3,.mixora .seo-block .prose-shop h3{font-size:1.02rem}

/* ── Rendelés részletei a fiókon belül ────────────────────────────────────
   A panel a lista HELYÉN jelenik meg, nem alatta: a vevő egy dolgot lát
   egyszerre, és a vissza-link viszi vissza a listához. */
.mixora .acc-panel__actions{display:flex; align-items:center; gap:10px; flex-shrink:0}
.mixora .acc-detail__back{display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; color:var(--muted)}
.mixora .acc-detail__back:hover{color:var(--orange-dark)}
.mixora .acc-detail__loading{padding:26px 0; color:var(--muted); font-size:14px}
.mixora .acc-detail-lines{margin-top:20px; border-top:1px solid var(--line)}
.mixora .acc-detail-line{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line)}
.mixora .acc-detail-line__name{display:flex; flex-direction:column; gap:3px; font-weight:650}
.mixora .acc-detail-line__name i{font-style:normal; font-size:13px; font-weight:600; color:var(--muted)}
.mixora .acc-detail-line b{white-space:nowrap}
.mixora .acc-detail-sum{margin:18px 0 0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.mixora .acc-detail-sum > div{display:flex; justify-content:space-between; gap:16px}
.mixora .acc-detail-sum dt{color:var(--muted)}
.mixora .acc-detail-sum dd{margin:0; font-weight:650}
.mixora .acc-detail-sum__total{border-top:1px solid var(--line); padding-top:12px; font-size:17px}
.mixora .acc-detail-sum__total dt{color:var(--text); font-weight:850}
.mixora .acc-detail-sum__total dd{font-weight:850}
.mixora .acc-detail-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.mixora .acc-detail-actions form{margin:0}
.mixora .acc-detail-actions .btn{margin-top:0}
.mixora .acc-detail-block{margin-top:26px}
.mixora .acc-detail-block h3{font-size:14px; font-weight:850; margin:0 0 8px}
.mixora .acc-detail-block address{font-style:normal; font-size:14px; color:var(--muted); line-height:1.7}
.mixora .acc-detail-files{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14px}
.mixora .acc-detail-files a{text-decoration:underline}
.mixora .acc-detail-addresses{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:700px){.mixora .acc-detail-addresses{grid-template-columns:1fr}}
/* A Tailwind .hidden gyengébb a fenti display-szabályoknál — l. az .acc-grid2 esetét. */
.mixora .acc-panel.hidden,
.mixora .acc-detail-addresses.hidden{display:none}

.mixora .min-qty-note{margin:10px 0 0; font-size:13px; color:var(--muted); line-height:1.6}
.mixora .min-qty-note b{color:var(--text)}

/* Rendelés-tétel képpel + a fiókba épített reklamáció/elállás űrlapok. */
.mixora .acc-detail-line{gap:14px}
.mixora .acc-detail-line__img{width:46px; height:46px; border-radius:10px; object-fit:cover; background:#fff; border:1px solid var(--line); flex-shrink:0}
/* Helyőrző ott, ahol nincs termékkép (pl. szállítási sor): csak a neveket
   tartja egy vonalban, ezért nem hívja fel magára a figyelmet. */
.mixora .acc-detail-line__img--ures{display:block; background:transparent; border-style:dashed; opacity:.45}
.mixora .acc-detail-line__name{flex:1; min-width:0}
.mixora .acc-detail-line__link{color:inherit}
.mixora .acc-detail-line__link:hover{color:var(--orange-dark); text-decoration:underline}
.mixora .acc-detail-form{margin-top:14px; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.mixora .acc-detail-form > summary{cursor:pointer; padding:14px 16px; font-weight:800; font-size:14px; background:#fff; list-style:none}
.mixora .acc-detail-form > summary::-webkit-details-marker{display:none}
.mixora .acc-detail-form > summary::after{content:'+'; float:right; color:var(--muted); font-weight:800}
.mixora .acc-detail-form[open] > summary::after{content:'−'}
.mixora .acc-detail-form > summary:hover{background:var(--cream)}
.mixora .acc-detail-form form{padding:4px 16px 18px; border-top:1px solid var(--line)}
.mixora .acc-detail-form__label{display:block; font-size:13px; font-weight:800; margin:14px 0 6px}
.mixora .acc-detail-form__label i{font-style:normal; font-weight:600; color:var(--muted)}
.mixora .acc-detail-form__input{width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:14px; font-family:inherit}
.mixora .acc-detail-form__info{font-size:13px; color:var(--muted); line-height:1.7; margin:14px 0 4px}
.mixora .acc-detail-form__row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.mixora .acc-detail-form__row span{font-size:14px; font-weight:650; min-width:0}
.mixora .acc-detail-form__row i{display:block; font-style:normal; font-size:12px; font-weight:600; color:var(--muted)}
.mixora .acc-detail-form__row input{width:86px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; text-align:right}
.mixora .acc-detail-form__hiba{display:block; margin-top:6px; font-size:13px; color:#b91c1c; font-weight:700}
.mixora .acc-detail-form .btn{margin-top:16px}

/* ── Változat-választó: színpöttyök és gombok ─────────────────────────── */
.option-group { margin-bottom: 14px; }
.option-label { display: block; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.option-chosen { font-weight: 600; color: var(--muted); margin-left: 6px; }
.option-select { margin-top: 2px; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.option-select--hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.option-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.option-choice { cursor: pointer; background: #fff; border: 1.5px solid var(--line); transition: .16s; }
.option-choice--swatch { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.option-choice-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--swatch, #ddd); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.option-choice--button { border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 14px; }
.option-choice:hover { border-color: var(--muted); }
.option-choice.is-selected { border-color: var(--primary, #111); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #111) 18%, transparent); }

/* ===========================================================================
   FIÓK (Klubtagság + profil)

   A téma saját tokenjeire épül (--orange, --line, --radius, --shadow), hogy a
   boltos a Megjelenés menüben átszínezhesse — nem hoz be új palettát.
   =========================================================================== */
.mixora .acc-title{font-size:clamp(26px,3vw,34px);font-weight:850;letter-spacing:-.5px}
.mixora .acc-sub{color:var(--muted);margin-top:6px}

/* Klubkártya */
.mixora .acc-club{
  margin:0 0 28px; border-radius:var(--radius); overflow:hidden; position:relative;
  background:linear-gradient(115deg, var(--black) 0%, #2b2b2b 55%, var(--orange-dark) 100%);
  color:#fff; display:flex; align-items:center; gap:30px; padding:30px clamp(22px,3vw,36px);
}
/* Fénypont a sarokban — a kártya így nem lapos, de nem is vonja el a figyelmet
   a vonalkódról. */
.mixora .acc-club::after{
  content:""; position:absolute; right:-70px; top:-90px; width:280px; height:280px;
  border-radius:50%; background:rgba(255,255,255,.14); filter:blur(46px);
}
.mixora .acc-club__left{flex:1; position:relative; z-index:1; min-width:0}
.mixora .acc-club__tag{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:6px 13px; font-size:11px; font-weight:850;
  letter-spacing:.12em; text-transform:uppercase;
}
.mixora .acc-club__left h1{font-size:clamp(22px,2.6vw,28px); font-weight:850; margin:14px 0 0; letter-spacing:-.4px}
.mixora .acc-club__left p{font-size:14px; opacity:.82; margin-top:8px; max-width:46ch; line-height:1.5}
/* Tagsági szint — a statisztikák FÖLÖTT, mert ez a kártya „rangja”. */
.mixora .acc-club__tier{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:5px 12px; font-size:11px; font-weight:850;
  letter-spacing:.1em; text-transform:uppercase;
}
.mixora .acc-club__perk{margin-left:8px; padding-left:8px; border-left:1px solid rgba(255,255,255,.3); opacity:.9}

/* Haladás a következő szintig. A sáv önmagában nem mond semmit — a szöveg
   mondja meg, HÁNY rendelés hiányzik, mert a vevő azt tudja számon tartani. */
.mixora .acc-club__next{margin-top:16px; max-width:420px}
.mixora .acc-club__nextbar{height:7px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden}
.mixora .acc-club__nextbar span{display:block; height:100%; border-radius:999px; background:#fff; transition:width .4s ease}
.mixora .acc-club__nexttext{font-size:12.5px; opacity:.85; margin-top:8px}

.mixora .acc-club__stats{display:flex; gap:26px; margin-top:18px; flex-wrap:wrap}
/* A statisztikák linkek: legyen látszó visszajelzés, hogy oda lehet kattintani. */
.mixora .acc-club__stats a{display:block; color:#fff; border-radius:12px; padding:4px 10px; margin:-4px -10px; transition:background .15s ease}
.mixora .acc-club__stats a:hover{background:rgba(255,255,255,.12)}
.mixora .acc-club__stats b{display:block; font-size:20px; font-weight:850}
.mixora .acc-club__stats span{font-size:11.5px; opacity:.72}

/* A tagsági kártya 20%-kal nagyobb: a kasszánál ezt olvassák le a telefonról,
   és a korábbi méretnél a vonalkód a képernyő-tükröződéstől nehezen ment át. */
.mixora .acc-club__card{
  position:relative; z-index:1; background:#fff; color:var(--text);
  border-radius:19px; padding:22px 26px 17px; text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.3); min-width:min(384px,100%);
}
.mixora .acc-club__cardlabel{font-size:12.5px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
/* A generált SVG teljes szélességben, fix magassággal — így a hosszabb kód sem
   lóg ki a kártyából. */
.mixora .acc-club__barcode{margin-top:10px}
.mixora .acc-club__barcode svg{width:100%; height:77px; display:block}
.mixora .acc-club__code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:18px; font-weight:750; letter-spacing:.18em; margin-top:10px}
.mixora .acc-club__hint{font-size:12.5px; color:var(--muted); margin-top:6px}

/* Elrendezés */
.mixora .acc-layout{display:grid; grid-template-columns:230px 1fr; gap:24px; align-items:start}
.mixora .acc-nav{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:10px; position:sticky; top:20px}
.mixora .acc-nav a{display:block; padding:11px 14px; border-radius:12px; font-size:14px; font-weight:650; color:var(--text)}
.mixora .acc-nav a:hover{background:var(--cream)}
.mixora .acc-nav a.on{background:var(--cream); color:var(--orange-dark); font-weight:800}
/* Kijelentkezés: a menüpontokkal azonos alak, de elválasztva — nem navigáció,
   hanem kilépés, ezért nem keveredhet a többi pont közé. */
.mixora .acc-nav__out{margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.mixora .acc-nav__out button{display:block; width:100%; text-align:left; padding:11px 14px; border:0; border-radius:12px;
  background:transparent; font:inherit; font-size:14px; font-weight:650; color:var(--muted); cursor:pointer}
.mixora .acc-nav__out button:hover{background:var(--cream); color:var(--text)}

.mixora .acc-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px clamp(20px,2.4vw,28px); margin-bottom:20px}
.mixora .acc-panel h2{font-size:18px; font-weight:850; margin:0}
.mixora .acc-panel__sub{font-size:14px; color:var(--muted); margin:6px 0 18px}
.mixora .acc-panel__head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.mixora .acc-panel__link{font-size:13.5px; font-weight:750; color:var(--orange-dark); white-space:nowrap}

/* Kívánságlista: kis kártyák, hogy a vevő ránézésre lássa, mit tett félre. */
.mixora .acc-wish{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px}
.mixora .acc-wish__item{display:block}
.mixora .acc-wish__thumb{display:grid; place-items:center; aspect-ratio:1; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.mixora .acc-wish__thumb img{width:100%; height:100%; object-fit:cover}
.mixora .acc-wish__name{display:block; font-size:13px; font-weight:650; margin-top:8px; line-height:1.35}
.mixora .acc-wish__item:hover .acc-wish__name{color:var(--orange-dark)}
.mixora .acc-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.mixora .acc-field label{display:block; font-size:11.5px; font-weight:750; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em}
.mixora .acc-field input{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; font-size:14px; outline:0}
.mixora .acc-field input:focus{border-color:var(--orange)}
.mixora .acc-field input[disabled]{background:#f6f6f7; color:#9a9aa0}
/* Profil-űrlap: szakaszcímek, hármas rács, jelölők. */
.mixora .acc-sub2{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:22px 0 10px; padding-top:18px; border-top:1px solid var(--line)}
.mixora .acc-grid3{display:grid; grid-template-columns:120px 1fr 1.4fr; gap:14px}
.mixora .acc-radios{display:flex; gap:18px; font-size:14px; margin-bottom:14px}
.mixora .acc-radios label{display:flex; align-items:center; gap:8px; cursor:pointer}
.mixora .acc-check{display:flex; align-items:center; gap:10px; font-size:14px; margin:18px 0 14px; cursor:pointer}
.mixora .acc-billing{display:grid; gap:14px}
/* A Tailwind .hidden (display:none) gyengébb, mint a fenti .mixora .acc-*
   szabályok, ezért a rejtett szakaszok látszottak. Erősebb szabállyal
   érvényesítjük — a céges mezők és a számlázási cím tényleg tűnjenek el. */
.mixora .acc-grid2.hidden,
.mixora .acc-billing.hidden,
.mixora .acc-company.hidden{display:none}
/* A pénztár telefonmezője (zászló + hívószám) a fiókban is elfér. */
.mixora .acc-field--phone .co-phone{margin-top:6px}
.mixora .acc-note{font-size:12.5px; color:var(--muted); margin-top:14px}
.mixora .acc-error{font-size:13px; color:#b91c1c; margin-top:10px}
.mixora .acc-panel form .btn{margin-top:16px}
.mixora .acc-warn{font-size:13.5px; color:#8a5a00; background:#fff8e6; border-radius:12px; padding:10px 14px; margin-bottom:14px}
/* Üres állapot: nem szürke semmi, hanem elmondja, mi kerül majd ide. */
.mixora .acc-blank{text-align:center; padding:34px 20px; border:1.5px dashed var(--line); border-radius:16px}
.mixora .acc-blank__title{font-weight:850; font-size:15px}
.mixora .acc-blank p{color:var(--muted); font-size:14px; margin:6px 0 0; max-width:46ch; margin-left:auto; margin-right:auto}
.mixora .acc-blank .btn{margin-top:16px}
.mixora .acc-empty{color:var(--muted); padding:14px 0}
.mixora .acc-empty a{text-decoration:underline}
.mixora .acc-flash{background:#eaf7ef; border:1px solid #cbead8; color:#1c6b45; border-radius:14px; padding:14px 18px; margin-bottom:22px; font-weight:650}

.mixora .acc-list{border-top:1px solid var(--line)}
.mixora .acc-list__row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 2px; border-bottom:1px solid var(--line); font-size:14px}
.mixora .acc-list__row i{font-style:normal; color:var(--muted); font-size:12.5px; display:block}
.mixora .acc-list__row b.plus{color:var(--green)}
.mixora .acc-list__row--link:hover{background:var(--cream)}
/* Rendelés-KÁRTYA: sorszám+dátum · termékbélyegek · összeg+állapot · nyíl.
   Külön kártyák, nem egy táblázat sorai: egy rendelés egy tárgy, amit a vevő
   megnyit. A bélyegek a KÖZÉPSŐ, addig üres sávban ülnek — a vevő a képekről
   ismeri fel a rendelését, nem a sorszámból. */
.mixora .acc-orders{display:flex; flex-direction:column; gap:12px}
.mixora .acc-order{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr) auto 26px; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 20px;
  transition:border-color .15s ease, box-shadow .15s ease}
/* A keret a téma vonalszínéből sötétedik, nem új palettából: a kiemelés a
   bolt saját színeihez igazodik akkor is, ha a boltos átszínezte a témát. */
.mixora .acc-order:hover{border-color:color-mix(in srgb, var(--muted) 35%, #fff); box-shadow:0 10px 26px -18px rgba(15,23,42,.35)}
.mixora .acc-order__id b{display:block; font-size:16px; font-weight:850; letter-spacing:-.01em}
.mixora .acc-order__id span{display:block; font-size:12.5px; color:var(--muted); margin-top:3px}

/* Átlapolt bélyegsor: több termék is elfér a helyén, és egy csoportnak
   látszik — ez EGY rendelés tartalma. */
.mixora .acc-order__thumbs{display:flex; align-items:center; min-width:0}
.mixora .acc-order__thumb{width:44px; height:44px; border-radius:12px; object-fit:cover; background:#fff;
  border:2.5px solid #fff; box-shadow:0 0 0 1px var(--line); margin-left:-10px; flex:0 0 auto}
.mixora .acc-order__thumbs > :first-child{margin-left:0}
.mixora .acc-order__thumb--betu,
.mixora .acc-order__more{display:grid; place-items:center; background:var(--cream); color:var(--muted); font-size:12px; font-weight:800}
.mixora .acc-order__more{min-width:44px; padding:0 6px}
.mixora .acc-order__count{margin-left:14px; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.mixora .acc-order__sum{text-align:right; white-space:nowrap}
/* Táblázatos számjegyek: az árak jobb széle egymás alatt marad. */
.mixora .acc-order__sum b{display:block; font-size:16px; font-weight:850; font-variant-numeric:tabular-nums}

/* A nyíl csak a rá vitt egérnél jelenik meg: nyugalmi állapotban nem szemetel,
   hoverre viszont elárulja, hogy a kártya megnyitható. */
.mixora .acc-order__arrow{text-align:right; font-size:18px; font-weight:800; color:var(--muted);
  opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease, color .15s ease}
.mixora .acc-order:hover .acc-order__arrow{opacity:1; transform:none; color:var(--text)}

/* Állapot-pirula. A boltos által állított állapotszínből tintázott háttér:
   a puszta színes szöveg világos árnyalatoknál olvashatatlanná halványult. */
.mixora .acc-status{display:inline-block; margin-top:6px; padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:800; line-height:1.35;
  color:var(--acc-status, var(--muted));
  background:var(--cream);
  background:color-mix(in srgb, var(--acc-status, var(--muted)) 13%, #fff)}
/* A részletező fejlécében a pirula a címsor mellett áll, ott nincs mi alá kerülnie. */
.mixora .acc-panel__actions .acc-status{margin-top:0}

@media (max-width:760px){
  .mixora .acc-order{grid-template-columns:minmax(0,1fr) auto; gap:12px 14px; padding:14px 16px}
  .mixora .acc-order__thumbs{grid-column:1 / -1; order:3}
  .mixora .acc-order__arrow{display:none}
}

.mixora .acc-list__right{text-align:right}
.mixora .acc-pager{margin-top:18px}

@media (max-width:900px){
  .mixora .acc-club{flex-direction:column; align-items:stretch}
  .mixora .acc-layout{grid-template-columns:1fr}
  .mixora .acc-nav{position:static; display:flex; gap:6px; overflow-x:auto}
  .mixora .acc-nav a{white-space:nowrap}
  .mixora .acc-grid2{grid-template-columns:1fr}
}


/* ══ PROMÓ DOBOZOK (promo_tiles modul) ══════════════════════════════════════
   Kattintható bannercsempék a főoldalra. A stíluslap CSAK a szerkezetet írja
   le: minden szín, méret és díszítés a szerkesztőből érkező `--pt-*`
   változókból jön (App\Support\PromoTiles::style). Minden hivatkozás
   `var(--pt-…, alapérték)` alakú, tehát hiányzó változónál sem törik el a
   csempe — a régi, hiányos configgal mentett doboz is megjelenik. */
.mixora .promo-tiles-section{padding:40px 0}
.mixora .promo-tiles{display:grid;grid-template-columns:repeat(var(--pt-cols,2),minmax(0,1fr));gap:var(--pt-gap,22px)}

.mixora .ptile{
  position:relative;border-radius:var(--pt-radius,22px);overflow:hidden;isolation:isolate;
  min-height:var(--pt-min-height,320px);display:flex;align-items:center;
  padding:34px 38px;color:#fff;cursor:pointer;text-decoration:none;
  background:var(--pt-bg,#1f2937);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mixora .ptile:hover{transform:translateY(-5px) scale(1.008);box-shadow:0 34px 70px -24px rgba(0,0,0,.55)}

/* Félton raszter. A maszk miatt a pöttyök a bal felső saroktól halványulnak ki,
   így a szöveg mögött erősebb, a fotók felé viszont eltűnik. */
.mixora .ptile::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pt-dots,none);
  background-size:var(--pt-dots-size,17px) var(--pt-dots-size,17px);
  -webkit-mask-image:radial-gradient(110% 100% at 0% 0%, #000 0%, transparent 55%);
  mask-image:radial-gradient(110% 100% at 0% 0%, #000 0%, transparent 55%);
}

/* Ferde „ecsetvonás" sáv a háttér előtt. */
.mixora .ptile-slash{
  position:absolute;z-index:0;width:150%;left:-20%;pointer-events:none;
  top:var(--pt-slash-top,56%);height:var(--pt-slash-height,86px);
  transform:rotate(var(--pt-slash-tilt,-7deg));
  background:var(--pt-slash-bg,none);opacity:.85;filter:blur(.3px);
}

.mixora .ptile-copy{position:relative;z-index:2;max-width:56%;display:block}
.mixora .ptile-kicker{
  display:inline-block;font-size:11px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 13px;border-radius:6px;margin-bottom:14px;
  transform:rotate(-2deg);
  background:var(--pt-kicker-bg,#ffe93d);color:var(--pt-kicker-color,#0a2a75);
}
.mixora .ptile-title{
  display:block;font-size:clamp(28px,3.6vw,var(--pt-title-size,52px));line-height:.94;
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-style:var(--pt-title-style,italic);
  color:var(--pt-title,#fff);
  text-shadow:var(--pt-title-shadow,0 3px 0 rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.38));
  transform:rotate(var(--pt-title-tilt,-2deg));
}
.mixora .ptile-accent{display:block}
.mixora .ptile-ribbon{
  display:inline-block;margin-top:16px;padding:9px 16px;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  border-radius:8px;transform:rotate(-2deg);box-shadow:0 8px 20px rgba(0,0,0,.3);
  background:var(--pt-ribbon-bg,#ffe93d);color:var(--pt-ribbon-color,#0a2a75);
}
.mixora .ptile-arrow{display:inline-block;margin-left:8px}

/* Termékfotók: döntött, fehér keretes kártyák. */
.mixora .ptile-shots{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:1;display:flex}
.mixora .ptile-shot{
  width:var(--pt-shot-size,158px);aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:#fff;border:4px solid #fff;box-shadow:0 18px 40px rgba(0,0,0,.42);
}
.mixora .ptile-shot img{width:100%;height:100%;object-fit:cover;display:block}
.mixora .ptile-shot--1{transform:rotate(-7deg) translateX(16px) translateY(-9px);z-index:3}
.mixora .ptile-shot--2{transform:rotate(6deg) translateY(14px);z-index:2}
.mixora .ptile-shot--3{transform:rotate(-4deg) translateX(-14px) translateY(-4px);z-index:1}

.mixora .ptile-burst{
  position:absolute;z-index:3;right:16px;top:22px;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  font-size:14px;font-weight:900;line-height:1.05;transform:rotate(8deg);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  background:var(--pt-burst-bg,#f43f5e);color:var(--pt-burst-color,#fff);
}
.mixora .ptile-emoji{
  position:absolute;z-index:1;right:40px;top:50%;transform:translateY(-50%);
  font-size:var(--pt-emoji-size,150px);line-height:1;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.35));
}

/* Fotók/emoji a BAL oldalon: a szöveg átkerül jobbra. */
.mixora .ptile--medialeft{justify-content:flex-end;text-align:right}
.mixora .ptile--medialeft .ptile-shots{right:auto;left:26px}
.mixora .ptile--medialeft .ptile-emoji{right:auto;left:40px}
.mixora .ptile--medialeft .ptile-burst{right:auto;left:16px}

@media(max-width:900px){.mixora .promo-tiles{grid-template-columns:1fr}}
@media(max-width:640px){
  .mixora .ptile{min-height:260px;padding:24px}
  .mixora .ptile-copy{max-width:100%}
  /* Szűk kijelzőn a fotó a szöveg alá csúszna: háttérdíszként marad. */
  .mixora .ptile-shots,.mixora .ptile-emoji{opacity:.35}
}


/* ══ TERMÉK-SOR (vízszintesen görgethető szekció) ═══════════════════════════
   A termék-modulok „egy sor" elrendezése. A rács helyett a termékek egymás
   mellett futnak, és oldalra görgethetők — így a szekció nem tolja le a lap
   alját, a vásárló mégis végigpörgetheti a teljes kínálatot. */
.mixora .product-scroller{position:relative}
.mixora .products--row{
  display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:4px;cursor:grab;
  /* A natív görgetősáv elrejtve: helyette a saját, vastagabb sáv szolgál,
     ami minden böngészőben egyformán néz ki és fogantyúként is működik. */
  scrollbar-width:none;-ms-overflow-style:none;
}

/* HÚZÁS KÖZBEN: se igazítás, se lágy görgetés.

   Mindkettő a saját ütemében mozgatná a sort, miközben a húzás képkockánként
   írja a pozíciót — a kettő egymással versengve akadozónak érződik. Elengedéskor
   visszakapcsolnak, így a görgő és a billentyűzet továbbra is igazítva mozgat. */
.mixora .product-scroller.psc-huzas .products--row{
  scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;
  user-select:none;-webkit-user-select:none;
}
.mixora .product-scroller.psc-huzas .products--row *{pointer-events:none}
.mixora .products--row img{-webkit-user-drag:none;user-drag:none}
.mixora .products--row::-webkit-scrollbar{display:none}
.mixora .products--row > *{
  flex:0 0 clamp(190px,20vw,232px);scroll-snap-align:start;
}

/* Az alsó sáv: görgetés-jelző ÉS fogantyú. */
.mixora .psc-bar{
  position:relative;height:6px;margin-top:16px;border-radius:999px;
  background:rgba(0,0,0,.08);cursor:pointer;overflow:hidden;
  touch-action:none;   /* a fogantyú húzását ne vegye át a lapgörgetés */
}
.mixora .psc-thumb{
  position:absolute;top:0;left:0;height:100%;border-radius:999px;
  background:var(--shop-primary,var(--orange,#ef5b16));
  min-width:36px;transition:background .2s ease;
}
.mixora .psc-bar:hover .psc-thumb{filter:brightness(1.08)}
/* Ha minden termék kifér, nincs mit görgetni — a sáv eltűnik. */
.mixora .product-scroller.psc-teljes .psc-bar{display:none}

@media(max-width:640px){
  .mixora .products--row{gap:12px}
  .mixora .products--row > *{flex:0 0 clamp(158px,62vw,190px)}
}


/* ══ KIEMELT CSEMPE (gift_tile modul) ═══════════════════════════════════════
   Teljes szélességű kampány-doboz: bal oldalt a szöveg, jobb oldalt egy
   emoji-kompozíció. A stíluslap csak a szerkezetet írja le; minden szín, méret
   és díszítés a szerkesztőből érkező `--gt-*` változókból jön. */
.mixora .gift-tile-section{padding:40px 0}
.mixora .gtile{
  position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;
  border-radius:var(--gt-radius,24px);padding:var(--gt-padding,52px);
  color:var(--gt-text,#fff);text-decoration:none;
  background:var(--gt-bg,#0a1b4d);
  box-shadow:0 26px 60px -24px rgba(11,40,120,.55);
}

/* Félton raszter, a bal ALSÓ saroktól halványulva — a szöveg mögött erősebb. */
.mixora .gtile::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--gt-dots,none);background-size:17px 17px;
  -webkit-mask-image:radial-gradient(120% 110% at 0% 100%, #000 0%, transparent 55%);
  mask-image:radial-gradient(120% 110% at 0% 100%, #000 0%, transparent 55%);
}

.mixora .gtile-slash{position:absolute;z-index:0;width:150%;height:100px;left:-20%;transform:rotate(-7deg);pointer-events:none}
.mixora .gtile-slash--1{top:var(--gt-slash1-top,16%);background:var(--gt-slash1,none)}
.mixora .gtile-slash--2{top:var(--gt-slash2-top,66%);background:var(--gt-slash2,none)}

.mixora .gtile-copy{position:relative;z-index:2;display:block;max-width:var(--gt-copy-width,58%)}
.mixora .gtile-kicker{
  display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 14px;border-radius:7px;margin-bottom:18px;transform:rotate(-2deg);
  background:var(--gt-kicker-bg,#fde047);color:var(--gt-kicker-color,#0b1f5c);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.mixora .gtile-heading{
  display:block;font-size:clamp(28px,3.4vw,var(--gt-heading-size,50px));line-height:.97;
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-style:var(--gt-heading-style,italic);transform:rotate(-1.5deg);margin-bottom:6px;
  text-shadow:0 3px 0 rgba(0,0,0,.28), 0 12px 30px rgba(0,0,0,.4);
}
.mixora .gtile-hl{display:block;color:var(--gt-highlight,#fde047)}
.mixora .gtile-tagline{
  display:block;font-size:16.5px;font-weight:750;margin:10px 0 16px;
  color:var(--gt-tagline,#dff3ff);text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.mixora .gtile-body{display:block;font-size:14.5px;line-height:1.65;margin-bottom:12px;max-width:560px;opacity:.96}
.mixora .gtile-body b{font-weight:800;opacity:1}

.mixora .gtile-chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 18px}
.mixora .gtile-chip{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(4px);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:750;
}

.mixora .gtile-warning{
  display:inline-flex;align-items:flex-start;gap:10px;
  background:rgba(0,0,0,.38);border:1.5px dashed var(--gt-warning,#fde047);
  border-radius:12px;padding:11px 15px;font-size:13px;line-height:1.5;
  max-width:540px;margin-bottom:22px;transform:rotate(-.5deg);
}
.mixora .gtile-warning b{color:var(--gt-warning,#fde047)}
.mixora .gtile-warning-em{font-size:19px;line-height:1}

.mixora .gtile-cta{
  display:inline-flex;align-items:center;gap:11px;margin-top:4px;
  background:var(--gt-cta-bg,#fde047);color:var(--gt-cta-color,#0b1f5c);
  font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;
  border-radius:14px;padding:17px 30px;transform:rotate(-1.5deg);
  box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 -4px 0 rgba(0,0,0,.15);
  transition:.18s;
}
.mixora .gtile:hover .gtile-cta{transform:rotate(-1.5deg) translateY(-3px) scale(1.02);filter:brightness(1.06)}
.mixora .gtile-arrow{font-size:20px}

/* Jobb oldal: emoji-kompozíció. A lebegő emojik a fő emoji köré rendeződnek. */
.mixora .gtile-art{position:absolute;right:48px;top:50%;transform:translateY(-50%);z-index:1;width:34%;max-width:430px}
.mixora .gtile-main{
  display:block;text-align:center;font-size:var(--gt-emoji-size,170px);line-height:1;
  transform:rotate(6deg);filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));
}
.mixora .gtile-float{position:absolute;font-size:52px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.mixora .gtile-float--1{top:-34px;left:6%;transform:rotate(-14deg)}
.mixora .gtile-float--2{bottom:-20px;left:0;transform:rotate(10deg);font-size:60px}
.mixora .gtile-float--3{top:-12px;right:4%;transform:rotate(14deg);font-size:46px}
.mixora .gtile-float--4{bottom:-30px;right:8%;transform:rotate(-8deg)}
.mixora .gtile-burst{
  position:absolute;z-index:3;right:-6px;top:-46px;width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;text-align:center;font-size:12.5px;font-weight:900;line-height:1.1;
  transform:rotate(10deg);box-shadow:0 12px 28px rgba(0,0,0,.35);
  background:var(--gt-burst-bg,#fff);color:var(--gt-burst-color,#1d4ed8);
}

/* Kompozíció a BAL oldalon: a szöveg átkerül jobbra. */
.mixora .gtile--medialeft{justify-content:flex-end}
.mixora .gtile--medialeft .gtile-art{right:auto;left:48px}

@media(max-width:900px){
  /* Szűk kijelzőn a kompozíció a szöveg ALÁ kerül, nem takarja a feliratot. */
  .mixora .gtile{flex-direction:column;align-items:flex-start;padding:34px 28px}
  .mixora .gtile-copy{max-width:100%}
  .mixora .gtile-art{position:static;transform:none;width:100%;max-width:none;margin-top:34px}
  .mixora .gtile-main{font-size:calc(var(--gt-emoji-size,170px) * .65)}
  .mixora .gtile-burst{top:-10px;right:6px}
}


/* ══ MÁRKA-SÁV (brand_marquee modul) ════════════════════════════════════════
   Végtelenül futó logó-szalag. A lista kétszer szerepel a sávban, és az
   animáció a felénél ugrik vissza — így nincs látható varrat, és nem kell hozzá
   szkript. Minden méret és szín a szerkesztőből érkező `--bmq-*` változókból. */
.mixora .bmq{position:relative;overflow:hidden;background:var(--bmq-bg,#fff);padding:54px 0 46px}

/* A felső „candy" csík — külön kapcsolható. */
.mixora .bmq--strip::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--bmq-strip-bg,linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%));
}

.mixora .bmq-head{text-align:center;margin-bottom:36px;padding:0 24px}
.mixora .bmq-eyebrow{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bmq-eyebrow,#29b3f0);margin-bottom:8px}
.mixora .bmq-head h2{font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--bmq-title,#0b0d10)}
.mixora .bmq-head p{font-size:14px;color:#6b7280;margin-top:6px}

.mixora .bmq-marquee{position:relative}
/* Elhalványuló szélek: a logók ne „elvágva" tűnjenek el a sáv szélén. */
.mixora .bmq--fade .bmq-marquee::before,
.mixora .bmq--fade .bmq-marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.mixora .bmq--fade .bmq-marquee::before{left:0;background:linear-gradient(90deg,var(--bmq-bg,#fff),transparent)}
.mixora .bmq--fade .bmq-marquee::after{right:0;background:linear-gradient(270deg,var(--bmq-bg,#fff),transparent)}

.mixora .bmq-track{display:flex;width:max-content;animation:bmq-scroll var(--bmq-speed,32s) linear infinite}
.mixora .bmq--pause:hover .bmq-track{animation-play-state:paused}
@keyframes bmq-scroll{to{transform:translateX(-50%)}}

.mixora .bmq-logo{
  flex:0 0 auto;width:var(--bmq-logo-w,210px);height:var(--bmq-logo-h,96px);
  margin:0 var(--bmq-gap,18px);display:grid;place-items:center;
  border-radius:16px;transition:transform .25s ease;
}
.mixora .bmq-logo:hover{transform:translateY(-3px)}
.mixora .bmq-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* Mozgás-érzékenységre állított gépen a szalag megáll: a folyamatos mozgás
   ott zavaró, sőt rosszullétet is okozhat. */
@media(prefers-reduced-motion:reduce){
  .mixora .bmq-track{animation:none}
  .mixora .bmq-marquee{overflow-x:auto}
}

@media(max-width:640px){
  .mixora .bmq{padding:38px 0 32px}
  .mixora .bmq-logo{width:calc(var(--bmq-logo-w,210px) * .72);height:calc(var(--bmq-logo-h,96px) * .75);margin:0 calc(var(--bmq-gap,18px) * .6)}
  .mixora .bmq--fade .bmq-marquee::before,.mixora .bmq--fade .bmq-marquee::after{width:56px}
}


/* ══ BIZALMI SÁV (trust_bar modul) ══════════════════════════════════════════
   Fehér kártyák színes ikonokkal: négy rövid ígéret a vásárlónak. A rács és a
   színek a szerkesztőből érkező `--tb-*` változókból jönnek; az ikon színe
   kártyánként külön áll (inline), mert az minden kártyán más. */
.mixora .trust-bar-section{padding:34px 0}
.mixora .tbar{display:grid;grid-template-columns:repeat(var(--tb-cols,4),minmax(0,1fr));gap:var(--tb-gap,16px)}
.mixora .tbar-card{
  background:var(--tb-card-bg,#fff);border-radius:var(--tb-radius,18px);
  padding:22px 22px 20px;display:flex;align-items:center;gap:16px;
  border:1px solid #eef0f3;box-shadow:0 10px 26px -18px rgba(15,23,42,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mixora .tbar-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(15,23,42,.28)}
.mixora .tbar-ic{
  flex:0 0 auto;width:var(--tb-icon-size,52px);height:var(--tb-icon-size,52px);
  border-radius:14px;display:grid;place-items:center;color:#fff;
}
.mixora .tbar-ic svg.ic{stroke-width:1.9}
.mixora .tbar-card h4{font-size:15px;font-weight:800;color:var(--tb-title,#0b0d10);letter-spacing:-.01em}
.mixora .tbar-card p{font-size:12.5px;color:var(--tb-text,#6b7280);margin-top:2px}

@media(max-width:900px){.mixora .tbar{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mixora .tbar{grid-template-columns:1fr}}


/* ══ ALKATEGÓRIA STORY-KÖRÖK ═══════════════════════════════════════════════
   Instagram-mintájú körök a kategóriaoldal tetején: színes gyűrű, benne a
   kategória ikonja. Egy sorban futnak és oldalra görgethetők — sok
   alkategóriánál sem tolják le a terméklistát. A gyűrű színét a sablon adja
   kategóriánként (`--story-c`). */

/* Kék görgetősáv (Chrome, Safari, Edge). Vastagabb a korábbinál: a sáv
   egyben jelzi is, hogy a körök folytatódnak oldalra. */









/* A belső korong a kategória színének halvány változata, az ikon maga a szín.
   A `color-mix` nélküli böngészőkben a tartalék a sima fehér korong marad. */

@supports (background: color-mix(in srgb, red 16%, white)){
  
}


/* Az „Összes" kör kiemelve: telt, sötét korong — ez a kiindulópont. */



@media(max-width:640px){
  
  
  
}


/* ══ VISZONTELADÓ (B2B) CSEMPE — reseller_card modul ════════════════════════
   Bal oldalt a megszólítás, jobb oldalt egy megdöntött partnerkártya-vizuál.
   A stíluslap csak a szerkezetet írja le; minden szín és méret a szerkesztőből
   érkező `--rc-*` változókból jön. */
.mixora .reseller-section{padding:34px 0}
.mixora .rcard{
  display:flex;align-items:center;gap:46px;text-decoration:none;
  background:var(--rc-bg,#fff);border:1px solid #eef0f3;
  border-radius:var(--rc-radius,24px);padding:var(--rc-padding,44px);
  box-shadow:0 22px 50px -24px rgba(15,23,42,.3);
}
.mixora .rcard-copy{display:block;max-width:55%}
.mixora .rcard-kicker{
  display:inline-block;font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 14px;border-radius:7px;margin-bottom:16px;transform:rotate(-2deg);
  background:var(--rc-kicker-bg,#fde047);color:var(--rc-kicker-color,#0b0d10);
}
.mixora .rcard-heading{
  display:block;font-size:clamp(24px,2.9vw,38px);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.97;color:var(--rc-heading,#0b0d10);
}
.mixora .rcard-hl{display:block;color:var(--rc-highlight,#29b3f0)}
.mixora .rcard-body{display:block;font-size:14px;line-height:1.6;color:var(--rc-body,#6b7280);margin:12px 0 20px}
.mixora .rcard-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--rc-cta-bg,#fde047);color:var(--rc-cta-color,#0b0d10);
  font-size:14.5px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;
  border-radius:13px;padding:15px 26px;transform:rotate(-1.5deg);
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.15);transition:.18s;
}
.mixora .rcard:hover .rcard-cta{transform:rotate(-1.5deg) translateY(-3px);filter:brightness(1.06)}
.mixora .rcard-arrow{font-size:18px}

/* A partnerkártya. Az arányt `aspect-ratio` tartja, mint egy valódi bankkártyán. */
.mixora .pcard{
  margin-left:auto;flex:0 0 var(--rc-card-w,340px);aspect-ratio:1.62;
  border-radius:18px;position:relative;overflow:hidden;
  background:var(--rc-card-bg,linear-gradient(120deg,#0b0d10 0%,#1f2937 55%,#0b0d10 100%));
  box-shadow:0 26px 54px -18px rgba(0,0,0,.55);transform:rotate(var(--rc-tilt,3deg));
  padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;
  transition:transform .2s ease;
}
.mixora .rcard:hover .pcard{transform:rotate(var(--rc-tilt,3deg)) translateY(-4px)}
.mixora .pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--rc-strip,none)}
.mixora .pcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mixora .pcard-brand{font-size:16px;font-weight:900}
.mixora .pcard-brand i{color:var(--rc-card-accent,#29b3f0);font-style:normal}
.mixora .pcard-tier{
  background:var(--rc-tier-bg,#fde047);color:var(--rc-tier-color,#0b0d10);
  font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;white-space:nowrap;
}
.mixora .pcard-name{font-size:22px;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--rc-name,#fde047)}
.mixora .pcard-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;border-top:1px dashed #374151;padding-top:12px}
.mixora .pcard-bot small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9ca3af;font-weight:800;display:block;margin-bottom:3px}
.mixora .pcard-bot b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;letter-spacing:.08em}
.mixora .pcard-bot-right{text-align:right}
.mixora .pcard-pct{font-size:24px;font-weight:900;font-style:italic;color:var(--rc-pct,#38bdf8)}

/* A kártya a BAL oldalon: a szöveg átkerül jobbra. */
.mixora .rcard--medialeft{flex-direction:row-reverse}
.mixora .rcard--medialeft .pcard{margin-left:0;margin-right:auto}

@media(max-width:900px){
  /* Szűk kijelzőn a kártya a szöveg ALÁ kerül, nem szorítja össze a feliratot. */
  .mixora .rcard,.mixora .rcard--medialeft{flex-direction:column;align-items:flex-start;gap:28px;padding:28px 24px}
  .mixora .rcard-copy{max-width:100%}
  .mixora .pcard{margin:0 auto;flex-basis:auto;width:min(var(--rc-card-w,340px),100%);transform:rotate(var(--rc-tilt,3deg))}
}


/* ══ KÖSZÖNŐ OLDAL (rendelés után) ═════════════════════════════════════════
   Sikeres rendelés visszaigazolása: kék fejléc konfettivel, alatta a rendelés
   összegzése, mellette az utólagos regisztráció. A fejléc és a lábléc a téma
   sajátja — ez csak a tartalom. */
.mixora .thx-hero{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;color:#fff;
  background:radial-gradient(120% 150% at 50% -20%, #53d4ff 0%, #29b3f0 40%, #1d4ed8 100%);
  padding:60px 24px 130px;
}
.mixora .thx-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.15) 1.6px, transparent 1.6px);background-size:17px 17px;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 100%, #000, transparent 60%);
  mask-image:radial-gradient(120% 110% at 50% 100%, #000, transparent 60%)}
.mixora .thx-hero > *{position:relative;z-index:1}

/* Konfetti: apró, ferde foltok a fejlécben. */
.mixora .thx-conf{position:absolute;width:12px;height:12px;border-radius:3px;opacity:.9;z-index:0}
.mixora .thx-conf--1{background:#fde047;top:18%;left:12%;transform:rotate(15deg)}
.mixora .thx-conf--2{background:#f472b6;top:34%;left:22%;transform:rotate(-20deg);width:9px;height:9px;border-radius:50%}
.mixora .thx-conf--3{background:#34d399;top:15%;right:18%;transform:rotate(30deg)}
.mixora .thx-conf--4{background:#fff;top:38%;right:10%;transform:rotate(-12deg);width:8px;height:8px;border-radius:50%}
.mixora .thx-conf--5{background:#fde047;top:55%;left:7%;transform:rotate(40deg);width:9px;height:9px}
.mixora .thx-conf--6{background:#f472b6;top:60%;right:24%;transform:rotate(10deg)}

.mixora .thx-check{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;background:#fff;color:#16a34a;
  display:grid;place-items:center;box-shadow:0 20px 44px rgba(0,0,0,.3);animation:thx-pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes thx-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.mixora .thx-check{animation:none}}
.mixora .thx-check svg.ic{stroke-width:2.6}

.mixora .thx-hero h1{font-size:clamp(26px,3.4vw,42px);font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.02em;text-shadow:0 3px 0 rgba(0,0,0,.22)}
.mixora .thx-hero p{font-size:15px;color:#dff3ff;margin-top:10px}
.mixora .thx-hero p b{color:#fde047}
.mixora .thx-ordno{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);
  border-radius:999px;padding:10px 20px;font-size:14px;font-weight:800}
.mixora .thx-ordno b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;letter-spacing:.06em;color:#fde047}

/* A tartalom RÁLÓG a fejlécre — ettől lesz „kártyás" a lap. */
.mixora .thx-content{margin-top:-80px;position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.mixora .thx-flash{position:relative;z-index:2;margin-top:-60px;margin-bottom:16px;
  background:#ecfdf5;border:1px solid #a7f3d0;color:#166534;border-radius:14px;padding:14px 18px;font-weight:700}

.mixora .thx-card{background:#fff;border-radius:20px;box-shadow:0 24px 54px -24px rgba(15,23,42,.35);overflow:hidden}
.mixora .thx-pad{padding:26px 30px}
.mixora .thx-card h3{font-size:17px;font-weight:900;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.mixora .thx-card h3 svg.ic{color:#29b3f0;flex:0 0 auto}

/* Állapot-lépcső */
.mixora .thx-steps{display:flex;margin:18px 0 22px}
.mixora .thx-step{flex:1;text-align:center;position:relative}
.mixora .thx-step::before{content:"";position:absolute;top:15px;left:-50%;right:50%;height:3px;background:#e5e7eb;z-index:0}
.mixora .thx-step:first-child::before{display:none}
.mixora .thx-step.is-done::before{background:#34d399}
.mixora .thx-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;margin:0 auto 8px;
  display:grid;place-items:center;background:#e5e7eb;color:#9ca3af;font-size:13px;font-weight:900}
.mixora .thx-step.is-done .thx-dot{background:#34d399;color:#fff}
.mixora .thx-step.is-now .thx-dot{background:var(--black);color:#fde047;box-shadow:0 0 0 5px rgba(11,13,16,.12)}
.mixora .thx-step > span:last-child{font-size:11.5px;font-weight:800;color:#9ca3af;display:block}
.mixora .thx-step.is-done > span:last-child,.mixora .thx-step.is-now > span:last-child{color:var(--text)}

/* Tételek */
.mixora .thx-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #f1f3f5}
.mixora .thx-item:last-of-type{border-bottom:0}
.mixora .thx-th{flex:0 0 54px;width:54px;height:54px;border-radius:11px;overflow:hidden;background:#f8fafc;border:1px solid #eef0f3}
.mixora .thx-th img{width:100%;height:100%;object-fit:cover;display:block}
.mixora .thx-inf{flex:1;min-width:0}
.mixora .thx-inf b{font-size:13.5px;font-weight:750;line-height:1.3;display:block}
.mixora .thx-q{font-size:11.5px;color:#9ca3af;font-weight:700}
.mixora .thx-pr{margin-left:auto;font-size:14px;font-weight:900;white-space:nowrap}

/* Összegzés */
.mixora .thx-sums{margin-top:14px}
.mixora .thx-sum{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:700;color:#6b7280;padding:5px 0}
.mixora .thx-sum--total{border-top:2px solid var(--black);margin-top:8px;padding-top:12px;font-size:16px;font-weight:900;color:var(--text)}
.mixora .thx-v{font-size:19px}

.mixora .thx-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.mixora .thx-mbox{background:#f8fafc;border:1px solid #eef0f3;border-radius:13px;padding:13px 15px}
.mixora .thx-t{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#9ca3af;margin-bottom:5px}
.mixora .thx-mbox b{font-size:13px;font-weight:800;display:block;line-height:1.4}
.mixora .thx-mbox span{font-size:12px;color:#6b7280}

.mixora .thx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mixora .thx-actions a{border:1px solid var(--line);border-radius:12px;padding:11px 16px;font-size:13px;font-weight:800}
.mixora .thx-actions a:hover{border-color:var(--black)}
.mixora .thx-downloads{margin-top:16px;display:grid;gap:6px}
.mixora .thx-downloads a{font-size:13px;font-weight:700;text-decoration:underline}

/* ── Utólagos regisztráció ─────────────────────────────────────────────── */
.mixora .thx-reg{position:relative}
.mixora .thx-reg::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:1;
  background:linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%)}
.mixora .thx-kick{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  background:#fde047;color:var(--black);padding:6px 12px;border-radius:7px;transform:rotate(-2deg);margin-bottom:12px}
.mixora .thx-reg h3{font-size:20px}
.mixora .thx-sub{font-size:13px;color:#6b7280;margin:7px 0 16px;line-height:1.55}

.mixora .thx-benefits{display:grid;gap:9px;margin-bottom:18px}
.mixora .thx-benefit{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#374151}
.mixora .thx-bi{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.mixora .thx-benefit:nth-child(1) .thx-bi{background:#e9f7fe;color:#29b3f0}
.mixora .thx-benefit:nth-child(2) .thx-bi{background:#ecfdf5;color:#059669}
.mixora .thx-benefit:nth-child(3) .thx-bi{background:#fef9c3;color:#ca8a04}

.mixora .thx-fl{font-size:12px;font-weight:800;color:#374151;display:block;margin-bottom:6px}
.mixora .thx-in{width:100%;border:1.5px solid #e5e7eb;border-radius:12px;padding:13px 16px;
  font-size:14px;font-family:inherit;outline:none;transition:.15s;background:#fff;color:var(--text)}
.mixora .thx-in:focus{border-color:#29b3f0;box-shadow:0 0 0 4px rgba(41,179,240,.14)}
.mixora .thx-in[disabled]{background:#f8fafc;color:#6b7280;font-weight:700}
.mixora .thx-emailrow{position:relative;margin-bottom:13px}
.mixora .thx-ok{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#16a34a}
.mixora .thx-pwrow{position:relative;margin-bottom:8px}
.mixora .thx-eye{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#9ca3af;cursor:pointer;
  border:0;background:none;padding:4px;display:grid;place-items:center}
.mixora .thx-eye:hover{color:#374151}

.mixora .thx-strength{display:flex;gap:5px;margin:9px 0 4px}
.mixora .thx-strength i{flex:1;height:5px;border-radius:99px;background:#e5e7eb}
.mixora .thx-strength i.on1{background:#f87171}
.mixora .thx-strength i.on2{background:#fbbf24}
.mixora .thx-strength i.on3{background:#34d399}
.mixora .thx-pwhint{font-size:11.5px;color:#9ca3af;font-weight:600;margin-bottom:14px}

.mixora .thx-consent{display:flex;align-items:flex-start;gap:9px;font-size:11.5px;color:#6b7280;line-height:1.45;margin-bottom:14px}
.mixora .thx-consent input{flex:0 0 auto;margin-top:2px;accent-color:#29b3f0;width:15px;height:15px}
.mixora .thx-err{color:#b91c1c;font-size:12.5px;font-weight:700;margin-bottom:12px}

.mixora .thx-regbtn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--black);color:#fff;font-weight:900;text-transform:uppercase;font-size:13.5px;letter-spacing:.03em;
  border:0;border-radius:13px;padding:16px;cursor:pointer;font-family:inherit;transition:.18s}
.mixora .thx-regbtn:hover{background:#29b3f0;color:#fff}
.mixora .thx-skip{display:block;text-align:center;font-size:12.5px;font-weight:700;color:#9ca3af;margin-top:12px}
.mixora .thx-skip:hover{color:#374151}

.mixora .thx-custom{margin-top:22px;background:#fff;border:1px solid #eef0f3;border-radius:18px;padding:22px 26px}

/* Alsó sáv */
.mixora .thx-after{margin:26px 0 60px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid #eef0f3;border-radius:18px;padding:20px 26px}
.mixora .thx-after-t{display:flex;align-items:center;gap:14px}
.mixora .thx-ic2{width:44px;height:44px;border-radius:12px;background:#e9f7fe;color:#29b3f0;display:grid;place-items:center;flex:0 0 auto}
.mixora .thx-after b{font-size:14.5px;display:block}
.mixora .thx-after-t > span:last-child > span{font-size:12.5px;color:#6b7280}
.mixora .thx-go{display:inline-flex;align-items:center;gap:9px;background:#29b3f0;color:#fff;
  font-weight:900;font-size:13px;text-transform:uppercase;border-radius:12px;padding:13px 22px;white-space:nowrap;transition:.15s}
.mixora .thx-go:hover{background:#1d9fd8;color:#fff}

@media(max-width:900px){
  .mixora .thx-hero{padding:44px 20px 110px}
  .mixora .thx-content{grid-template-columns:1fr}
  .mixora .thx-pad{padding:22px 20px}
  .mixora .thx-meta{grid-template-columns:1fr}
  .mixora .thx-after,.mixora .thx-after-t{flex-direction:column;text-align:center}
  .mixora .thx-go{width:100%;justify-content:center}
}

/* ─────────────────────────────────────────────────────────────────────────
   GOMBOK LEKEREKÍTÉSE — TÉMA-SZINTŰ SZABÁLY

   A boltos kérése: minden gomb teljesen lekerekített („pirula") legyen. Ezt
   szándékosan EGY helyen mondjuk ki, a fájl végén, hogy egységes maradjon:
   ha külön-külön állítanánk minden gombnál, előbb-utóbb megint négyféle
   lekerekítés lenne a boltban.

   A `999px` mindig a magasság feléig kerekít, tehát a gomb méretétől
   függetlenül szabályos pirula lesz belőle.
   ───────────────────────────────────────────────────────────────────────── */
.mixora .btn,
.mixora .cart-btn,
.mixora .cart-row .cart-btn,
.mixora .load-more-btn,
.mixora .mbb-btn,
.mixora .nl-btn,
.mixora .promo-cta,
.mixora .search-page-btn,
.mixora .sup-cta,
.mixora .sa-cta,
.mixora .sa-gbtn,
.mixora .co-btn,
.mixora .cupbtn,
.mixora button.btn,
.mixora .product-actions button,
.mixora .qty-add { border-radius: 999px; }

/* A kerek ikongombok (kosár, fiók, menü) eleve körök — ne bántsuk őket, és a
   beviteli mezőket se: azoknál a pirula-forma megnehezíti az olvasást. */

/* ─────────────────────────────────────────────────────────────────────────
   MOBIL MENÜ — kétszintes (a küldött minta szerint)

   A panel maga marad a régi `.mobile-menu-panel` (a nyitás/zárás rá épül),
   a BELSEJE cserélődött ki. A második képernyő ugyanebben a panelben él, ezért
   a váltás azonnali, és a vissza gomb nem visz ki a boltból.
   ───────────────────────────────────────────────────────────────────────── */
.mixora .mm-head{display:flex;align-items:center;gap:12px;padding:16px 18px 14px;border-bottom:1px solid #f1f3f5}
.mixora .mm-logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:900;letter-spacing:-.03em;flex:1;min-width:0;color:inherit}
.mixora .mm-x,.mixora .mm-back{width:38px;height:38px;border-radius:12px;background:#f1f5f9;display:grid;place-items:center;font-size:16px;font-weight:800;color:#374151;border:0;cursor:pointer;flex:0 0 auto}
.mixora .mm-x:hover,.mixora .mm-back:hover{background:#e2e8f0}

.mixora .mm-body{flex:1;overflow-y:auto;padding:14px 18px 96px}
.mixora .mm-body[hidden]{display:none}

.mixora .mm-search{width:100%;display:flex;align-items:center;gap:10px;background:#f1f5f9;border:0;border-radius:13px;padding:12px 15px;font:inherit;font-size:14px;color:#9ca3af;margin-bottom:16px;cursor:pointer;text-align:left}
.mixora .mm-search svg{color:#9ca3af;flex:0 0 auto}

/* Főmenü sorok — a kategória saját színével. */
.mixora .mm-row{width:100%;display:flex;align-items:center;gap:13px;padding:13px 6px;border-bottom:1px solid #f6f7f8;background:none;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.mixora .mm-ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb, var(--c) 15%, #fff);color:var(--c)}
.mixora .mm-row b{font-size:15px;font-weight:800;flex:1;min-width:0}
.mixora .mm-cnt{font-size:11.5px;color:#9ca3af;font-weight:700;white-space:nowrap}
.mixora .mm-chev{color:#c9cdd3;flex:0 0 auto}

/* 2. képernyő */
.mixora .mm-subhead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.mixora .mm-subhead h2{font-size:22px;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;color:var(--c)}
.mixora .mm-subhead span{font-size:12px;color:#9ca3af;font-weight:700}

.mixora .mm-promo{display:flex;align-items:center;gap:12px;border-radius:16px;color:#fff;padding:16px 18px;margin-bottom:16px;background:radial-gradient(120% 150% at 85% 10%, #53d4ff 0%, #29b3f0 45%, #1d4ed8 100%)}
.mixora .mm-promo-t{flex:1;min-width:0}
.mixora .mm-promo b{font-size:15.5px;font-weight:900;font-style:italic;text-transform:uppercase;display:block}
.mixora .mm-promo span{font-size:11.5px;opacity:.92;font-weight:700}
.mixora .mm-promo-go{background:#fde047;color:#0b0d10;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border-radius:9px;padding:9px 13px;white-space:nowrap;flex:0 0 auto}

.mixora .mm-group{margin-bottom:14px;border-top:2.5px solid var(--c);padding-top:4px}
.mixora .mm-sub{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid #f6f7f8;font-size:14px;font-weight:700;color:#1f2937}
.mixora .mm-sub:last-child{border-bottom:none}
.mixora .mm-sub i{width:7px;height:7px;border-radius:50%;background:var(--c);font-style:normal;flex:0 0 auto}
.mixora .mm-sub .mm-chev{margin-left:auto;color:#d7dbe0}


/* Alsó, mindig látszó sáv */
.mixora .mm-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid #f1f3f5;padding:12px 18px calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px;z-index:5}
.mixora .mm-foot a{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:900;border-radius:999px;padding:14px}
.mixora .mm-login{flex:1;background:#0b0d10;color:#fff}
.mixora .mm-fav{flex:0 0 54px;background:#f1f5f9;color:#374151}
/* Az alsó sáv fő gombja képernyőnként cserélődik (belépés ↔ összes), ezért
   a rejtésnek le kell győznie a fenti inline-flexet. */
.mixora .mm-foot a[hidden]{display:none}
/* Hosszú kategórianév se törje szét a sávot. */
.mixora .mm-all span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Kategória-bento modul ───────────────────────────────────────────────
   Nagy, kattintható csempék változó méretben. A háttér a feltöltött kép vagy
   a boltos által állított két szín; a sötétítés és a pontraszter mindkettőn
   olvashatóvá teszi a feliratot. */
.mixora .bento-szekcio{padding:52px 0}
.mixora .bento-fejlec{display:flex;align-items:flex-end;gap:18px;margin-bottom:22px}
.mixora .bento-kick{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  background:#fde047;padding:6px 13px;transform:rotate(-2deg);box-shadow:2px 2px 0 #0b0d10}
.mixora .bento-fejlec h2{font-size:clamp(24px,3vw,34px);font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;margin-top:12px}
.mixora .bento-fejlec h2 em{font-style:italic;color:var(--blue,#29b3f0)}
.mixora .bento-all{margin-left:auto;font-size:13px;font-weight:800;border-bottom:2.5px solid #fde047;padding-bottom:2px;white-space:nowrap}
.mixora .bento-all:hover{border-color:#0b0d10}

.mixora .bento{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;grid-auto-flow:dense}
.mixora .bento-csempe{position:relative;border-radius:20px;overflow:hidden;display:block;color:#fff}
.mixora .bento-hero{grid-column:span 2;grid-row:span 2}
.mixora .bento-wide{grid-column:span 2}
.mixora .bento-hatter{position:absolute;inset:0;transition:transform .35s cubic-bezier(.32,.72,0,1)}
.mixora .bento-hatter img{width:100%;height:100%;object-fit:cover;display:block}
.mixora .bento-csempe:hover .bento-hatter{transform:scale(1.06)}
.mixora .bento-pont{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.25) 1.2px,transparent 1.2px);
  background-size:13px 13px;opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 85% 12%,#000 0 22%,transparent 44%);
  mask-image:radial-gradient(circle at 85% 12%,#000 0 22%,transparent 44%)}
.mixora .bento-arny{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,0) 40%,rgba(11,13,16,.62) 100%)}
.mixora .bento-db{position:absolute;top:14px;left:14px;font-size:11px;font-weight:800;color:#fff;background:rgba(11,13,16,.45);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:5px 12px;font-variant-numeric:tabular-nums}
.mixora .bento-hot{position:absolute;top:20px;right:-8px;z-index:2;background:#fde047;color:#0b0d10;font-size:11px;font-weight:900;
  text-transform:uppercase;padding:6px 14px;transform:rotate(3deg);box-shadow:2px 2px 0 #0b0d10}
.mixora .bento-nev{position:absolute;left:18px;right:18px;bottom:16px}
.mixora .bento-nev b{display:block;font-size:20px;font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.01em;text-shadow:2px 2px 0 rgba(11,13,16,.7)}
.mixora .bento-nev small{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.82);margin-top:3px}
.mixora .bento-hero .bento-nev b{font-size:clamp(24px,2.6vw,34px)}
.mixora .bento-hero .bento-nev small{font-size:13.5px}
.mixora .bento-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;z-index:2;
  background:linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%)}
.mixora .bento-go{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:12px;background:#fde047;color:#0b0d10;
  display:grid;place-items:center;font-size:17px;font-weight:900;opacity:0;transform:translateY(6px);transition:.22s}
.mixora .bento-csempe:hover .bento-go{opacity:1;transform:translateY(0) rotate(-45deg)}

@media(max-width:980px){
  .mixora .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .mixora .bento-hero{grid-column:span 2;grid-row:span 2}
  .mixora .bento-wide{grid-column:span 2}
}
@media(max-width:560px){
  .mixora .bento{grid-template-columns:1fr;grid-auto-rows:150px}
  .mixora .bento-hero{grid-row:span 2}
  .mixora .bento-fejlec{flex-wrap:wrap}
  .mixora .bento-all{margin-left:0}
}

/* ===== KATEGÓRIA-FEJLÉC =====
   Nem színes doboz, hanem tipográfiai fejléc. A korábbi teljes szélességű
   színsáv elnyomta a terméklistát: a látogató először egy nagy színfelületet
   látott, nem az árut. */
.mixora .cat-hero{position:relative;padding:38px 0 26px;overflow:hidden}

/* Óriási, halvány kategórianév a háttérben. `pointer-events:none`, mert
   díszítés — nem foghatja el a kattintást a fölötte lévő elemektől. */
.mixora .cat-ghost{position:absolute;right:-40px;top:-30px;font-size:190px;font-weight:900;font-style:italic;letter-spacing:-.055em;
  color:#f7f8fa;-webkit-text-stroke:2px #eef1f5;user-select:none;white-space:nowrap;pointer-events:none;transition:transform .1s linear}

.mixora .cat-crumb{position:relative;font-size:12.5px;color:#9ca3af;font-weight:600;margin-bottom:18px}
.mixora .cat-crumb a{color:inherit}
.mixora .cat-crumb a:hover{color:#111}
.mixora .cat-crumb b{color:#111}

.mixora .cat-kick{position:relative;display:inline-block;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  background:#fde047;padding:6px 13px;transform:rotate(-2deg);box-shadow:2px 2px 0 #0b0d10;margin-bottom:16px;color:#0b0d10}

/* A cím alatti négyszínű csík a bolt arculati eleme (ugyanaz, mint a fejléc
   alatti sáv).

   MIÉRT KÜLÖN ELEM ÉS NEM HÁTTÉR: a csík korábban a `background` rövidítés
   `bottom left / 96px 5px no-repeat` részével készült. Így viszont a méret a
   HÁTTÉRRE vonatkozott, és két esetben az egész címdoboz kiszíneződött:
   Safariban a `var()`-ral írt rövidítés mérete elveszett, egyszínű (nem
   színátmenetes) kiemelő szín pedig eleve kitölti a teljes felületet, mert a
   színt a background-size nem méretezi. Külön 96×5 px-es elemként a csík
   MINDIG csík marad — bármit is állít be a boltos. */
.mixora .cat-title{position:relative;font-size:40px;font-weight:900;letter-spacing:-.025em;margin:0 0 12px;width:max-content;max-width:100%;padding-bottom:12px;color:#111}
.mixora .cat-title::after{content:"";position:absolute;left:0;bottom:0;width:96px;height:5px;border-radius:2px;
  background:var(--cat-accent,linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%))}

.mixora .cat-lead{position:relative;font-size:14.5px;color:#4b5563;line-height:1.65;margin:0 0 16px}

.mixora .cat-stats{position:relative;display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:#374151;margin-bottom:22px;font-variant-numeric:tabular-nums}
.mixora .cat-stats span{display:inline-flex;align-items:center;gap:7px}
.mixora .cat-stats i{font-style:normal;width:6px;height:6px;border-radius:50%;background:#29b3f0}
.mixora .cat-stats .star{color:#b45309}
.mixora .cat-stats .star i{background:#fbbf24}

/* Alkategória-pirulák kezdőbetűs koronggal és darabszámmal. */
.mixora .cat-subs{position:relative;display:flex;gap:8px;flex-wrap:wrap}
.mixora .cat-subs a{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;border:1.5px solid #e5e7eb;
  border-radius:99px;padding:7px 15px 7px 8px;color:#374151;transition:.14s;background:#fff}
.mixora .cat-subs a:hover{border-color:#0b0d10;color:#0b0d10;transform:translateY(-1px);box-shadow:2px 2px 0 #fde047}
.mixora .cat-subs a.on{background:#0b0d10;border-color:#0b0d10;color:#fff}
.mixora .cat-dot{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:9px;font-weight:900;font-style:italic;color:#fff;text-shadow:1px 1px 0 rgba(11,13,16,.5);text-transform:uppercase}
.mixora .cat-subs a i{font-style:normal;font-weight:700;color:#9ca3af;font-size:11px;font-variant-numeric:tabular-nums}
.mixora .cat-subs a.on i{color:#94a3b8}

/* Szűk képernyőn a háttérnév és a cím is kisebb — különben a szöveg a
   telefon szélességén kifut, és vízszintes görgetést okoz. */
@media(max-width:760px){
  .mixora .cat-ghost{font-size:110px;top:-10px;right:-20px}
  .mixora .cat-title{font-size:29px}
  .mixora .cat-hero{padding:26px 0 18px}
}

/* ==========================================================================
   Kapcsolat oldal — mixora
   --------------------------------------------------------------------------
   A szerkezet a közös nézetből jön (resources/views/shop/contact.blade.php),
   ezt a fájl CSAK átstílusozza. Így a mező-logika (téma-pirulák, rendelésszám
   megjelenítése, hibaüzenetek) egy helyen marad, a téma mégis a saját arcát
   viseli: sárga ferde címke, dőlt nagybetűs cím, kemény árnyékok, a fejléc
   alatti négyszínű sáv visszaköszönő motívuma.

   A `.mixora` előtag miatt ezek a szabályok erősebbek a közös nézet beágyazott
   stílusánál — nem kell a markupot duplikálni a témába.
   ========================================================================== */
/* A lap MÉRETE is a designhoz tartozik: a bolt tartalom-szélessége 1600px,
   ezen az űrlap és a jobb hasáb szétterülne, a sorok olvashatatlanul hosszúak
   lennének. A kapcsolat oldal ezért saját, szűkebb keretet kap — ugyanazt,
   ami a kapott tervben is van. */
.mixora .kap{max-width:1180px;margin-left:auto;margin-right:auto;padding:46px 0 80px}

.mixora .kap-kick{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  background:#fde047;color:#0b0d10;border:none;border-radius:0;padding:6px 13px;transform:rotate(-2deg);box-shadow:2px 2px 0 #0b0d10}
.mixora .kap-h1{font-size:40px;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;margin:16px 0 8px;color:#0b0d10}
.mixora .kap-h1 em{font-style:italic;color:#29b3f0}
.mixora .kap-lead{font-size:15px;color:#6b7280;max-width:540px;margin-bottom:34px;line-height:1.6}
.mixora .kap-grid{grid-template-columns:1.25fr 1fr;gap:26px}

/* Űrlap */
.mixora .kap-card{border:1px solid #e9eaee;border-radius:20px;padding:28px;background:#fff}
.mixora .kap-fg>label{font-size:12.5px;font-weight:700;color:#0b0d10;margin-bottom:7px}
.mixora .kap-fg>label small{color:#9ca3af;font-weight:500}
.mixora .kap-input{border:1.5px solid #e5e7eb;border-radius:12px;padding:12px 15px;font-size:14px;background:#fff;color:#111}
.mixora .kap-input:focus{border-color:#0b0d10;box-shadow:3px 3px 0 #fde047}
.mixora textarea.kap-input{min-height:130px}

/* Téma-pirulák */
.mixora .kap-temak{gap:7px}
.mixora .kap-tema span{font-size:12.5px;font-weight:700;border:1.5px solid #e5e7eb;border-radius:99px;padding:9px 16px;color:#6b7280}
.mixora .kap-tema span:hover{border-color:#0b0d10;color:#0b0d10}
.mixora .kap-tema input:checked+span{background:#0b0d10;border-color:#0b0d10;color:#fff}
.mixora .kap-tema input:focus-visible+span{box-shadow:3px 3px 0 #fde047}

.mixora .kap-gdpr{font-size:12.5px;color:#6b7280;line-height:1.55}
.mixora .kap-gdpr a{font-weight:700;color:#111;text-decoration:none;border-bottom:2px solid #fde047}
.mixora .kap-gdpr input{accent-color:#0b0d10}

.mixora .kap-send{background:#0b0d10;color:#fff;font-size:14.5px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  border-radius:14px;padding:16px;transition:.15s}
.mixora .kap-send:hover{filter:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #29b3f0}
.mixora .kap-reply{font-size:12.5px;color:#9ca3af;font-weight:600}
.mixora .kap-reply b{color:#15803d}

/* Elküldve-állapot: a korong tetején a bolt négyszínű sávja. */
.mixora .kap-done .disc{width:64px;height:64px;color:#fff;
  background:linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%) top center / 100% 6px no-repeat,#0b0d10}
.mixora .kap-done h2{font-size:23px;font-weight:900;font-style:italic;text-transform:uppercase;color:#0b0d10}
.mixora .kap-done p{font-size:14px;color:#6b7280}

/* Ügyfélszolgálat-kártya */
.mixora .kap-dark{border-radius:20px;padding:26px;margin-bottom:14px;
  background:linear-gradient(90deg,#f472b6 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#38bdf8 75% 100%) top center / 100% 7px no-repeat,#0b0d10}
.mixora .kap-dark h2{font-size:19px;font-weight:900;font-style:italic;text-transform:uppercase;color:#fde047}
.mixora .kap-stat{font-size:12px;font-weight:700;color:#86efac}
.mixora .kap-line{gap:13px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.mixora .kap-line .ci{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);color:#fde047}
.mixora .kap-line b{font-size:14px}
.mixora .kap-line small{font-size:11.5px;color:#94a3b8}

/* Gyors-linkek */
.mixora .kap-quick{gap:9px}
.mixora .kap-qcard{border:1px solid #e9eaee;border-radius:14px;padding:14px 17px;transition:.14s}
.mixora .kap-qcard:hover{border-color:#0b0d10;box-shadow:3px 3px 0 #fde047;transform:translate(-1px,-1px)}
.mixora .kap-qcard .qi{width:36px;height:36px;border-radius:10px;background:#f4f5f7;color:#111}
.mixora .kap-qcard b{font-size:13.5px}
.mixora .kap-qcard small{display:block;font-size:11.5px;color:#9ca3af;font-weight:500}
.mixora .kap-qcard .arr{color:#c3c8cf;font-weight:800;transition:.14s}
.mixora .kap-qcard:hover .arr{color:#0b0d10;transform:translateX(2px)}

@media(max-width:900px){
  .mixora .kap-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .mixora .kap-h1{font-size:29px}
  .mixora .kap-card{padding:20px}
}

/* Márkaoldal (gyártó) — a szöveges termék-oldalakkal (pl. /osszes) azonos
   szerkezet: ugyanaz a konténer, rács és lapozó. Külön csak a fejléce, ahol a
   márka logója a cím mellett áll. */
.mixora .brand-hero{display:flex;align-items:center;gap:20px;margin:8px 0 26px}
.mixora .brand-logo{width:82px;height:82px;flex:0 0 auto;object-fit:contain;background:#fff;
  border:1px solid #e9eaee;border-radius:18px;padding:8px}
.mixora .brand-lead{font-size:14.5px;color:#6b7280;line-height:1.6;margin-top:8px;max-width:640px}
.mixora .brand-db{font-size:12.5px;font-weight:700;color:#9ca3af;margin-top:8px;font-variant-numeric:tabular-nums}
.mixora .brand-seo{margin-top:52px;padding-top:28px;border-top:1px solid #e9eaee;
  font-size:14px;color:#6b7280;line-height:1.7}

@media(max-width:620px){
  .mixora .brand-hero{gap:14px;margin-bottom:20px}
  .mixora .brand-logo{width:58px;height:58px;border-radius:14px}
}