/* ══════════════════════════════════════════════════════════════════════════
   MineBuddy — "Clear Water"  ·  COMPLETE self-contained Tebex theme  (v3)
   ──────────────────────────────────────────────────────────────────────────
   BUILT FOR THE "VERTICAL NAVIGATION" TEMPLATE
   (body.is-navigation-vertical.home-categories-enabled — vertical nav in the
   sidebar + category tiles on the home page).

   ⚠️  A Tebex theme is glued to ONE template's HTML. This file matches the
       template live on store.minebuddy.net as of 2026-06-08. If you change
       the template in Appearance → Change Template, this theme will mismatch
       and must be rebuilt. Don't switch templates after applying.

   Apply: Appearance → Change Theme → Create Custom Theme → paste ALL → Preview
   → Activate. A custom theme REPLACES the whole stylesheet, so this is fully
   self-contained (own reset + layout + components + styling). Light-only.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ══ Tokens ════════════════════════════════════════════════════════════════ */
:root{
  --foam:#F2FAFF;--mist:#E1F2FD;--depth:#081428;
  --surface:#FFFFFF;--surface-2:#F7FCFF;--glass:rgba(255,255,255,.72);
  --line:#C6E6FB;--line-strong:#93D4F9;
  --ink:#0B1B3A;--ink-dim:#2F4A73;--ink-muted:#5B7799;
  --sky:#4FC3FF;--aqua:#3FB5F8;--aqua-deep:#1273CE;--blue:#2E7BFF;--blue-deep:#1C5BD8;
  --danger:#C0463A;
  --card-radius:1.75rem;--widget-radius:1.5rem;--pill:9999px;
  --shadow-card:0 1px 0 rgba(11,27,58,.03),0 10px 28px -12px rgba(28,91,216,.22);
  --shadow-card-hover:0 1px 0 rgba(11,27,58,.04),0 0 0 1px var(--line),0 22px 44px -16px rgba(28,91,216,.32);
  --shadow-chip:0 4px 14px -6px rgba(28,91,216,.25);
  --content-max:1320px;--gutter:20px;--sidebar-w:300px;
  --sky-sea:
    radial-gradient(ellipse 70% 55% at 20% -5%,rgba(255,255,255,.65),transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 0%,rgba(255,255,255,.40),transparent 60%),
    linear-gradient(180deg,#D6F0FF 0%,#AEE4FF 35%,#7AD4F4 70%,#56C5EA 100%);
  --tebex-legal-footer-background-color:var(--depth);
  --tebex-legal-footer-text-color:#9FB6CF;
  --tebex-legal-footer-border-color:rgba(255,255,255,.08);
  --tebex-legal-footer-logo-color:#9FB6CF;
}

/* ══ Reset ═════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
img,svg,video{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;text-align:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;line-height:1.2}
[hidden]{display:none!important}
/* Light-only + nav-drawer controls (nav shown inline). NOTE: do NOT hide
   .popup-close — that's the basket/product popup close button. */
.color-scheme,.toggle-navigation,.close-navigation{display:none!important}
/* Responsive visibility helpers (template uses these, e.g. nav .log-out.mobile-only) */
@media (min-width:961px){.mobile-only{display:none!important}}
@media (max-width:960px){.desktop-only{display:none!important}}

/* ══ Base / backdrop ═══════════════════════════════════════════════════════ */
body{
  min-height:100vh;font-family:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  line-height:1.55;color:var(--ink);background-color:var(--foam);
  background-image:
    radial-gradient(rgba(11,27,58,.022) 1px,transparent 1px),
    linear-gradient(rgba(28,123,216,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,123,216,.05) 1px,transparent 1px);
  background-size:3px 3px,24px 24px,24px 24px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--sky);color:var(--depth)}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--foam)}
h1,h2,h3,h4,h5,h6,.site-title,.product-title,.widget-title,.category{
  font-family:'Gabarito',ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
strong,b{font-weight:700}

/* Rising-bubble field, behind the transparent .site */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-repeat:repeat;background-size:100% 460px;
  background-image:
    radial-gradient(circle at 8% 100%,rgba(79,195,255,.30) 0 5px,transparent 6px),
    radial-gradient(circle at 23% 100%,rgba(79,195,255,.22) 0 7px,transparent 8px),
    radial-gradient(circle at 39% 100%,rgba(79,195,255,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 57% 100%,rgba(79,195,255,.26) 0 6px,transparent 7px),
    radial-gradient(circle at 72% 100%,rgba(79,195,255,.20) 0 4px,transparent 5px),
    radial-gradient(circle at 88% 100%,rgba(79,195,255,.28) 0 7px,transparent 8px);
  animation:bubbles 22s linear infinite;
}

/* ══ Shell layout ══════════════════════════════════════════════════════════ */
.site{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;background:transparent}

/* ── Header (hero band) — .site-header > .site-header-inner ── */
.site-header{position:relative;overflow:hidden;width:100%;background:var(--sky-sea)}
.site-header-inner{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;max-width:var(--content-max);margin:0 auto;
  min-height:clamp(170px,20vw,250px);padding:1.5rem 130px;
}
.site-header .site-title img{
  max-height:108px;width:auto;margin:0 auto;
  filter:drop-shadow(0 2px 4px rgba(11,27,58,.18)) drop-shadow(0 8px 18px rgba(11,27,58,.22));
}
/* Logged-out Login pill AND logged-in user menu both pin to the top-right,
   so the centered logo is never pushed out of the flow. */
.site-header .log-in,
.site-header .user-actions{
  position:absolute;top:18px;right:var(--gutter);z-index:2;
  display:flex;align-items:center;gap:8px;
}
.site-header .log-in{
  padding:.5em 1.1em;border-radius:var(--pill);font-weight:700;font-size:14px;
  color:var(--ink);background:var(--glass);border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--shadow-chip);transition:transform .2s ease,box-shadow .2s ease;
}
.site-header .log-in:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
/* Logged-in: username pill (white) + Basket button (gradient). They already
   inherit .btn-secondary/.btn-primary — just size them for the band. */
.site-header .user-actions .user-name,
.site-header .user-actions .open-basket{height:40px;padding:0 16px;font-size:14px}
/* Username button swaps "Stormbits" → "Log out" on hover */
.user-name .text-hover{display:none}
.user-name:hover .text{display:none}
.user-name:hover .text-hover{display:inline}
.site-header .actions{position:absolute;top:18px;left:var(--gutter);z-index:2}
/* hero shimmer + foam wave divider */
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  background-size:250% 100%;animation:shimmer 7s ease-in-out infinite;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 23 Q 50 3 100 23 T 200 23 V 46 H 0 Z' fill='%23F2FAFF'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:200px 46px;animation:wave 8s linear infinite;z-index:1;
}
@media (max-width:640px){
  .site-header-inner{flex-direction:column;gap:12px;padding:1.25rem 20px;min-height:140px}
  .site-header .site-title img{max-height:72px}
  .site-header .log-in,.site-header .user-actions{position:static;justify-content:center}
}

/* ── Home category tiles — .site-home-categories (sibling, home only) ── */
/* Small crisp category cards. Tebex caps category images at 250px wide, so tiles
   are kept compact (~250px) — the image renders ~1:1, sharp — with a bordered card. */
.site-home-categories{
  position:relative;z-index:1;display:grid;gap:24px;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(220px,260px));
  width:100%;max-width:var(--content-max);margin:2.25rem auto .5rem;padding:0 var(--gutter);
}
.site-home-categories .category{
  display:flex;flex-direction:column;gap:12px;text-align:center;
  padding:14px;font-family:'Gabarito',sans-serif;font-weight:700;font-size:18px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,color .3s ease;
}
.site-home-categories .category:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--line-strong);color:var(--blue)}
.site-home-categories .category .image{
  width:100%;aspect-ratio:16/9;border-radius:1rem;object-fit:cover;border:1px solid var(--line);transition:transform .3s ease;
}
.site-home-categories .category:hover .image{transform:scale(1.015)}
/* placeholder when no image is set → water emblem on the gradient */
.site-home-categories .category .image-default{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 2 5 10 5 15a7 7 0 0 0 14 0C19 10 12 2 12 2Z' fill='white' fill-opacity='.6'/%3E%3C/svg%3E") center/56px no-repeat,
    var(--sky-sea);
}

/* ── Content + sidebar ── */
.site-content{width:100%;max-width:var(--content-max);margin:0 auto;padding:2.25rem var(--gutter) 3rem;flex:1 0 auto}
.site-content-widgets{display:flex;gap:36px;align-items:flex-start}
main{flex:1 1 auto;min-width:0}
.store-sidebar{flex:0 0 var(--sidebar-w);display:grid;gap:24px}
@media (max-width:960px){
  .site-content-widgets{flex-direction:column}
  .store-sidebar{flex:none;width:100%;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}

/* ══ Vertical navigation (.site-navigation.navigation-vertical — a sidebar widget) ══ */
.site-navigation.widget{padding:14px}
.navigation-list{display:flex;flex-direction:column;gap:4px}
.navigation-list a{
  display:block;padding:.65em 1em;border-radius:var(--pill);
  font-family:'Gabarito',sans-serif;font-weight:600;color:var(--ink);
  transition:color .15s ease,background .15s ease;
}
.navigation-list a:hover{color:var(--blue);background:rgba(46,123,255,.10)}
.navigation-list .active>a,.navigation-list a.link-active{
  color:#fff;background:linear-gradient(135deg,var(--sky),var(--blue));
  box-shadow:0 8px 18px -8px rgba(46,123,255,.55);
}

/* ══ Prose / text content ══════════════════════════════════════════════════ */
.text-content{color:var(--ink-dim);line-height:1.7}
.text-content :is(h1,h2,h3,h4){color:var(--ink);margin:1.2em 0 .5em}
.text-content p{margin:0 0 .9em}
.text-content a{color:var(--blue)!important;font-weight:600}
.text-content a:hover{text-decoration:underline}
.text-content strong{color:var(--ink)}
.text-content ul{list-style:disc;padding-left:1.3em;margin:0 0 .9em}
.text-content ul li::marker{color:var(--aqua-deep)}
.store-home .store-text,main.store-text:not(.store-form){max-width:760px;margin:0 auto 1rem;text-align:center}
.category-description,.category-header{margin-bottom:1.5rem}
.category-description h1,.category-header h1,.category-header h2{font-size:clamp(26px,4vw,38px)}

/* ══ Buttons ═══════════════════════════════════════════════════════════════ */
.btn-primary,.btn-secondary,.btn-tertiary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--pill);
  font-family:'Gabarito',sans-serif;font-weight:700;font-size:15px;line-height:1;white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn-small{height:38px;padding:0 16px;font-size:13px}
.btn-xsmall{height:34px;padding:0 14px;font-size:12px}
.btn-primary:active,.btn-secondary:active,.btn-tertiary:active{transform:translateY(1px)}
/* Only dim genuinely-disabled FORM controls. NOT [disabled] anchors — the
   Add-to-Basket links carry a permanent disabled attr but are clicked via JS,
   so pointer-events:none on them would break add-to-basket. */
:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--sky),var(--blue));
  box-shadow:0 10px 24px -8px rgba(46,123,255,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 14px 30px -8px rgba(79,195,255,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-secondary{color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-chip)}
.btn-secondary:hover:not(:disabled){border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.btn-tertiary{color:var(--ink-dim);background:transparent}
.btn-tertiary:hover:not(:disabled){color:var(--ink);background:rgba(46,123,255,.10)}
.btn-glyph::before,.btn-glyph-text::before,.btn-icon::before{content:none}
.back-to-top{margin-top:1.5rem}

/* ══ Forms ═════════════════════════════════════════════════════════════════ */
input[type=text],input[type=email],input[type=number],input[type=search],textarea,select,.gift-card-input{
  width:100%;height:46px;padding:0 14px;border-radius:.85rem;
  background:var(--mist);border:1px solid var(--line);color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{height:auto;padding:12px 14px;min-height:120px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,123,255,.18)}
input::placeholder,textarea::placeholder{color:var(--ink-muted)}
.store-form{max-width:560px;margin:0 auto;text-align:center}
.store-form h2{font-size:26px;margin-bottom:1rem}
.store-form .field{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto;text-align:left}
.store-form .field button{align-self:flex-start}

/* Quantity stepper */
.quantity-field{display:inline-flex;align-items:stretch;height:46px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--mist)}
.quantity-field .quantity{width:46px;height:100%;border:none;background:transparent;text-align:center;font-variant-numeric:tabular-nums;padding:0}
.quantity-field .quantity:focus{box-shadow:none}
.quantity-field .adjust,.quantity-field .open-basket{height:100%;padding:0 14px;background:transparent;color:var(--ink-dim);font-weight:700}
.quantity-field .adjust:hover,.quantity-field .open-basket:hover{color:var(--blue)}

/* ══ Products — list rows + grid cards + detail ════════════════════════════ */
.store-products-list{display:flex;flex-direction:column;gap:18px}
.store-products-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px 28px}
.store-product{
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);padding:18px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.store-product:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--line-strong)}
.store-product .image{border-radius:1rem;width:100%;height:auto;object-fit:cover}
.store-product .image-link{display:block}
.store-product .product-title{font-size:20px;font-weight:700}
.store-product .product-title a{color:inherit;transition:color .15s ease}
.store-product .product-title a:hover{color:var(--blue)}
.store-product .descr{font-size:14px;color:var(--ink-dim);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.store-product .price{font-weight:600;color:var(--ink)}
.store-product .price strong{font-family:'Gabarito',sans-serif;font-size:22px}
.store-product .price .discount{margin-right:1ch;color:var(--ink-muted);font-weight:400;text-decoration:line-through}
.store-product .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto}
.store-product .actions .wide{flex:1 1 auto}
.store-product .add{width:100%}
@media (min-width:601px){
  .store-products-list .store-product{flex-direction:row;align-items:center;gap:20px}
  .store-products-list .store-product .image-link{flex:0 0 88px}
  .store-products-list .store-product .image{width:88px;height:88px;border-radius:.85rem}
  .store-products-list .store-product .product-title{flex:1 1 auto;margin:0}
  .store-products-list .store-product .descr{flex:1 1 100%;-webkit-line-clamp:2;line-clamp:2}
  .store-products-list .store-product .actions{flex:0 0 auto;margin:0}
  .store-products-list .store-product .add{width:auto;min-width:160px}
}
/* Package detail (full) */
.store-product-full{align-items:center;text-align:center;gap:18px;max-width:760px;margin:0 auto}
.store-product-full .product-title{font-size:clamp(26px,4vw,36px)}
.store-product-full .image{max-width:360px;margin:0 auto;border-radius:var(--card-radius)}
.store-product-full .actions{width:100%;justify-content:center}
.store-product-full .price strong{font-size:28px}
.store-product-full .descr{text-align:left;width:100%}

/* ══ Sidebar widgets ═══════════════════════════════════════════════════════ */
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--widget-radius);box-shadow:var(--shadow-card);padding:20px}
.widget-title{position:relative;margin-bottom:1rem;padding-bottom:.55rem;font-size:18px;font-weight:700}
.widget-title::after{content:"";display:block;width:2.75rem;height:3px;margin-top:.55rem;border-radius:999px;background:linear-gradient(90deg,var(--aqua),var(--blue))}
.widget-content{color:var(--ink-dim)}
.widget .empty{color:var(--ink-muted);text-align:center;padding:.5rem 0}
.widget-server-status .widget-content{text-align:center}
.badge{display:inline-flex;align-items:center;gap:.45em;padding:.2em .7em;border-radius:var(--pill);font-weight:700;font-size:13px}
.badge-success{background:rgba(79,195,255,.16);color:var(--aqua-deep)}
.badge-success::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--sky);animation:pulse 2.4s cubic-bezier(.4,0,.6,1) infinite}
.widget-server-status h6[data-copy]{display:inline-block;cursor:pointer;margin:.25rem 0;padding:.35em .7em;border-radius:.6rem;
  background:var(--mist);color:var(--ink);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;transition:background .15s ease}
.widget-server-status h6[data-copy]:hover{background:#D2EBFB}
.widget-recent .purchase{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;line-height:1.4}
.widget-recent .avatar,.widget-top-donator .avatar{border-radius:10px;flex:none}
.widget-recent .avatar{max-width:40px}
.widget-top-donator{text-align:center}
.widget-top-donator .avatar{max-width:96px;margin:0 auto 12px}
.widget-recent .username,.widget-top-donator .username{font-weight:700;color:var(--ink)}
.widget-recent time{opacity:.6;font-size:.9em}
.widget-gift-card{text-align:center}
.widget-gift-card .gift-card-input{margin-bottom:12px}
.widget-gift-card .check{width:100%}
.progress{height:12px;margin-bottom:12px;border-radius:6px;overflow:hidden;background:rgba(46,123,255,.12)}
.progress-bar{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--aqua),var(--blue))}
.widget-community-goal .widget-content,.widget-goal .widget-content{text-align:center}

/* ══ Footer ════════════════════════════════════════════════════════════════ */
.site-footer{background:var(--depth);color:#C9DCEF;margin-top:auto}
.site-footer-inner{position:relative;width:100%;max-width:var(--content-max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:22px var(--gutter)}
.site-footer-inner .copyright{color:#9FB6CF;font-size:12px}
.site-footer-inner .site-footer-nav a{color:#C9DCEF;text-decoration:underline;text-underline-offset:2px}
.site-footer-inner .site-footer-nav a:hover{color:#fff}
.we-accept{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.we-accept img{background:#fff;border-radius:6px;padding:3px 5px;max-height:30px;width:auto;box-sizing:content-box}
@media (max-width:960px){.site-footer-inner{flex-direction:column;text-align:center}}

/* ══ Popups (basket / product options / gift) — built by main.js as
   .popup > .popup-scroll-cont > .popup-content, with a .popup-close button ══ */
.popup{position:fixed;inset:0;z-index:1000;background:rgba(8,20,40,.45);backdrop-filter:blur(6px)}
.popup-scroll-cont{position:absolute;inset:0;display:flex;overflow:auto;padding:24px}
.popup-content,.store-product-popup-content{
  position:relative;margin:auto;width:100%;max-width:560px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);
  box-shadow:var(--shadow-card-hover);padding:24px;
}
/* Close button (top-right of the popup card) — was being hidden before */
.popup-close{
  position:absolute;top:12px;right:12px;z-index:5;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:0;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-chip);
  color:var(--ink-dim);transition:color .15s ease,border-color .15s ease,transform .15s ease;
}
.popup-close::before{content:"\2715";font-size:15px;font-weight:700;line-height:1}
.popup-close:hover{color:var(--ink);border-color:var(--line-strong);transform:rotate(90deg)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--pill);box-shadow:var(--shadow-card-hover)}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:2rem;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600}
.pagination .active,.pagination a:hover{background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff;border-color:transparent}

/* ══ Basket (the /checkout/basket page form, and the slide-in popup) ════════ */
.basket{
  width:100%;max-width:640px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);overflow:hidden;
}
/* Basket shown inside a popup: the content element is .popup-content.basket —
   drop the popup padding (the basket has its own) and widen it a touch. */
.basket-popup-content{padding:0;max-width:640px}
.basket-popup-content .basket-header{padding-right:60px}
.basket-header{padding:18px 24px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.basket-title{font-size:20px;font-weight:700}
.basket-second-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;border-bottom:1px solid var(--line);color:var(--ink-dim);font-weight:600;
}
.basket-second-header .total strong{font-family:'Gabarito',sans-serif;font-size:18px;color:var(--ink)}
.basket-content{padding:4px 24px}
.basket-items{display:flex;flex-direction:column}
.basket-item{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.basket-item:last-child{border-bottom:0}
.basket-item .info{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:6px}
.basket-item .info .title{font-size:16px;font-weight:700;margin:0}
.basket-item .info .title a{color:var(--ink)}
.basket-item .info .title a:hover{color:var(--blue)}
.basket-item .options{margin:0;padding:0;color:var(--ink-muted);font-size:13px}
.basket-item .info .price strong{font-family:'Gabarito',sans-serif;font-size:16px;color:var(--ink)}
.basket-item .quantity-field,.basket-item .remove{flex:none}
.basket-checkout{
  display:flex;flex-direction:column;gap:14px;
  padding:20px 24px;border-top:1px solid var(--line);background:var(--surface-2);
}
.basket-checkout h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:18px;font-weight:700}
.basket-checkout .total strong{font-family:'Gabarito',sans-serif;font-size:22px;color:var(--ink)}
.basket-checkout .checkout{width:100%;height:50px;font-size:16px}
.basket .empty{padding:2rem 0;text-align:center;color:var(--ink-muted)}

/* ══ Keyframes ═════════════════════════════════════════════════════════════ */
@keyframes shimmer{0%{background-position:120% 0;opacity:.5}50%{background-position:-20% 0;opacity:.8}100%{background-position:120% 0;opacity:.5}}
@keyframes wave{from{background-position-x:0}to{background-position-x:200px}}
@keyframes bubbles{from{background-position-y:0}to{background-position-y:-460px}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,195,255,.55)}70%{box-shadow:0 0 0 8px rgba(79,195,255,0)}100%{box-shadow:0 0 0 0 rgba(79,195,255,0)}}

/* ══ Reduced motion ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}