/* ============================================================
   SaintCity – Tebex-Shop im Website-Design 2
   Wird in head.twig als letzte Datei geladen und überschreibt nur das
   Aussehen von Exo (shared.css). Kauf-Logik und main.js bleiben gleich.
   Navigation, Kopfbereich, Tabs und Footer sind die Regeln aus site.css
   der Website: bei Änderungen dort hier mitziehen (Prüfung: compare.mjs).
   Der Tebex-Footer darf NICHT ausgeblendet werden, sonst sperrt Tebex
   den Shop. Einfärben nur über --tebex-legal-footer-*.
   ============================================================ */

:root{
  color-scheme:dark;
  --ink:#000;
  --ink-2:#070708;
  --ink-3:#101012;
  --ink-4:#18181b;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --gold:#e5c46e;
  --gold-hi:#f6e2a4;
  --gold-lo:#b8893c;
  --gold-deep:#8a6526;

  --bone:#f4f1ea;
  --ash:#9ca3af;
  --ash-2:#6b7280;
  --muted:rgba(255,255,255,.5);
  --off:#e5484d;

  --grad-gold:linear-gradient(135deg,#f6e2a4 0%,#e5c46e 42%,#b8893c 100%);
  --shine-gold:linear-gradient(110deg,#e9c977 0%,#c99a4a 28%,#e5c46e 41%,#fff6d8 50%,#e5c46e 59%,#b8893c 76%,#e9c977 100%);
  --ease:cubic-bezier(.32,.72,0,1);
  --shadow:0 24px 60px -24px rgba(0,0,0,.9);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1200px;

  /* Exo-Variablen. Primär- und Sekundärfarbe gehen auch an die Tebex-Kasse (main.js). */
  --color-text:var(--bone);
  --color-text-darker:rgba(255,255,255,.85);
  --color-text-secondary:var(--ash);
  --color-text-dark:#1a1206;
  --color-bg:#000;
  --color-brighter-bg:#0b0b0d;
  --color-primary:#e5c46e;
  --color-primary-hover:#f6e2a4;
  --color-primary-text:#1a1206;
  --color-primary-text-hover:#1a1206;
  --color-secondary:#b8893c;
  --color-removed:var(--off);
  --color-sale-banner-bg:rgba(229,196,110,.08);
  --color-sale-banner-text:var(--gold-hi);
  --btn-size:44px;
  --content-inner-width:calc(var(--wrap) - 48px);
  --sidebar-width:280px;

  /* Tebex-Footer: passend einfärben, nie verstecken */
  --tebex-legal-footer-background-color:#000;
  --tebex-legal-footer-border-color:rgba(255,255,255,.07);
  --tebex-legal-footer-text-color:rgba(255,255,255,.6);
  --tebex-legal-footer-logo-color:rgba(255,255,255,.75);
}
@media (width > 960px){
  :root{--content-padding:24px}
}

/* Seitenwechsel ohne Überblenden wie auf der Website (sonst flackert die Navigation) */
@view-transition{navigation:none}

/* ---------- Grundlagen wie site.css ---------- */
html{overflow:hidden auto;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:auto;scrollbar-color:auto}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(229,196,110,.32);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

.site{display:flex;flex-direction:column;align-items:stretch;gap:0;font-size:16px}
.sc-content{position:relative;z-index:1;flex:1 0 auto;display:flex;flex-direction:column;gap:1.5rem;padding-bottom:1rem}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.7rem 1rem;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:.9rem;transition:top .2s ease}
.skip:focus{top:1rem}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;color:#fff;text-wrap:balance}
p{text-wrap:pretty}
.text-content{line-height:1.65}
.text-content h1,.text-content h2,.text-content h3,.text-content h4{color:#fff}
.text-content a:not(.btn-primary,.btn-secondary,.btn-tertiary){color:var(--gold)}
.text-content a:not(.btn-primary,.btn-secondary,.btn-tertiary):hover{color:var(--gold-hi);text-decoration:underline}
.text-content strong,.text-content b{color:var(--bone)}
.text-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.85rem;color:var(--gold-hi);background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem}

/* Lichtstreifen über Text (wie „Shiny Text“) */
.gild{
  background-size:250% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shine 7s var(--ease) infinite;
  background-image:var(--shine-gold);
}
@keyframes shine{0%{background-position:100% 0}55%,100%{background-position:0% 0}}

/* ---------- Buttons (Pillen) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.55rem;border-radius:999px;border:0;
  font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.2;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}
.btn[hidden]{display:none}

.btn-white{background:#fff;color:#000}
.btn-white:hover{background:#f1f1f1}
.btn-ghost{background:transparent;color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

/* Pfeil im eigenen Kreis, wandert beim Hover nach oben rechts */
.btn-arr{padding:.42rem .42rem .42rem 1.5rem;gap:.7rem}
.btn .arr{width:2.15rem;height:2.15rem;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .25s var(--ease)}
.btn .arr svg{width:13px;height:13px}
.btn-white .arr{background:rgba(0,0,0,.06)}
.btn-arr:hover .arr{transform:translate(3px,-2px) scale(1.08)}

.btn-sm{padding:.55rem .95rem;font-size:.82rem;gap:.45rem}
.btn-sm svg{width:14px;height:14px}
.btn-sm.btn-arr{padding:.3rem .3rem .3rem .95rem;gap:.5rem}
.btn-sm .arr{width:1.7rem;height:1.7rem}
.btn-sm .arr svg{width:11px;height:11px}
.btn-sm.nav-basket{padding:.55rem}

/* Exo-Buttons im selben Stil (Gold wie .btn-gold, Rand wie .btn-ghost) */
.btn-primary,.btn-secondary,.btn-tertiary{
  border-radius:999px;padding:0 1.35rem;
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;
  transition:transform .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease);
}
.btn-primary:active,.btn-secondary:active{transform:scale(.97)}
.btn-primary{
  background-image:var(--grad-gold);
  box-shadow:0 10px 30px -12px rgba(229,196,110,.55),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover,.btn-primary:focus{box-shadow:0 14px 40px -12px rgba(229,196,110,.78),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-secondary{
  --btn-color-text:rgba(255,255,255,.85);--btn-color-text-hover:#fff;
  --btn-color-bg:transparent;--btn-color-bg-hover:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
}
.btn-secondary:hover,.btn-secondary:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-tertiary{--btn-color-bg-hover:rgba(255,255,255,.06)}
a.btn-primary[disabled],a.btn-secondary[disabled]{opacity:.5;cursor:not-allowed}
.link-text{color:var(--gold)}
.link-text:hover{color:var(--gold-hi)}

/* ---------- Badge (Pille über Überschriften) ---------- */
.badge .spark{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(229,196,110,.8)}

/* ---------- Navigation (schwebende Pille) ---------- */
header.nav{
  position:fixed;top:max(1rem,env(safe-area-inset-top));left:0;right:0;z-index:50;
  display:flex;justify-content:center;padding:0 16px;pointer-events:none;
}
.nav-shell{
  pointer-events:auto;position:relative;
  width:100%;max-width:68rem;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.03);box-shadow:0 0 0 1px rgba(255,255,255,.1);
  transition:box-shadow .5s var(--ease),background-color .5s var(--ease);
}
header.nav.scrolled .nav-shell{background:rgba(255,255,255,.045);box-shadow:0 0 0 1px rgba(255,255,255,.13),0 18px 50px -20px rgba(0,0,0,.9)}
.nav-inner{
  position:relative;display:flex;align-items:center;gap:1rem;
  padding:.4rem .45rem .4rem .85rem;border-radius:999px;
  background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.02rem;letter-spacing:-.01em;line-height:1;flex:none}
.brand-logo{display:block;height:36px;width:36px;flex:none;background:var(--sc-logo) center/contain no-repeat;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brand-txt{color:#fff}
.brand-txt b{color:var(--gold);font-weight:800}

.nav-links{display:flex;align-items:center;gap:1.7rem;margin:0 auto}
.nav-links a{
  position:relative;font-size:.875rem;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.5);transition:color .5s var(--ease);
}
.nav-links a:hover{color:rgba(255,255,255,.92)}
.nav-links a.active{color:#fff}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;bottom:-.6rem;width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold);transform:translateX(-50%);
}

.nav-cta{display:flex;align-items:center;gap:.45rem;flex:none}

.user-menu{position:relative}
.user-menu[hidden]{display:none}
.user-chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.28rem .6rem .28rem .3rem;border-radius:999px;
  background:rgba(255,255,255,.03);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  color:#fff;cursor:pointer;transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.user-chip:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.user-av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink-4);box-shadow:0 0 0 1px rgba(229,196,110,.35);color:var(--gold);font-size:.72rem;font-weight:700;line-height:1}
.user-name{font-size:.82rem;font-weight:600;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-caret{width:14px;height:14px;color:rgba(255,255,255,.5);transition:transform .25s var(--ease)}
.user-chip[aria-expanded="true"] .user-caret{transform:rotate(180deg)}
.user-dd{
  position:absolute;top:calc(100% + .6rem);right:0;min-width:170px;padding:.35rem;border-radius:16px;
  background:rgba(10,10,12,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--shadow);z-index:20;
}
.user-dd[hidden]{display:none}
.user-logout{
  display:flex;align-items:center;gap:.6rem;width:100%;padding:.65rem .75rem;border-radius:11px;
  background:none;border:0;color:rgba(255,255,255,.85);font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.user-logout svg{width:16px;height:16px}
.user-logout:hover{color:var(--gold);background:rgba(255,255,255,.05)}

.menu-btn{
  display:none;position:relative;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.menu-btn span{position:absolute;left:12px;right:12px;height:1.5px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn span:first-child{top:15px}
.menu-btn span:last-child{top:22px}
body.show-navigation .menu-btn span:first-child{top:18.5px;transform:rotate(45deg)}
body.show-navigation .menu-btn span:last-child{top:18.5px;transform:rotate(-45deg)}

/* ---------- Unterseiten: Kopfbereich ---------- */
.page-hero{position:relative;z-index:1;overflow:hidden;text-align:center;padding:10.5rem 0 3.5rem}
.page-hero .glow{
  position:absolute;left:50%;top:-20rem;width:56rem;height:38rem;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(229,196,110,.17),transparent);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:22rem;pointer-events:none;
  background-image:radial-gradient(rgba(229,196,110,.15) 1px,transparent 0);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(50% 70% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(50% 70% at 50% 0%,#000,transparent 72%);
  opacity:.5;
}
.page-hero .wrap{z-index:2}
.page-hero .badge{
  display:flex;width:fit-content;margin:0 auto;align-items:center;gap:.55rem;padding:.32rem .85rem;border-radius:999px;
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.page-hero h1{
  font-size:clamp(2.8rem,8.2vw,5.8rem);font-weight:800;letter-spacing:-.045em;line-height:.95;
  text-transform:uppercase;margin:1.4rem 0 1.2rem;
}
.page-hero h1.gild{display:block;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding:0 .04em}
.page-hero p,.page-hero-text{color:var(--muted);max-width:38rem;margin:0 auto;font-size:1.1rem;line-height:1.7}
.page-hero-text p{margin:0}
/* Seiten ohne eigene Überschrift (Paket, Warenkorb, eigene Seiten): nur Platz unter der Navigation */
.sc-hero-min{overflow-x:clip;overflow-y:visible;padding:5.5rem 0 0}

.site-sale-banner{
  width:fit-content;max-width:calc(100% - var(--content-padding) * 2);margin:0 auto 1.5rem;padding:.6rem 1.25rem;border-radius:999px;
  font-size:.92rem;font-weight:500;box-shadow:inset 0 0 0 1px rgba(229,196,110,.3);
}

/* ---------- Kategorien wie die Regelwerk-Tabs ---------- */
@media (width > 960px){
  .site-navigation{position:relative;z-index:5}
  .site-navigation.navigation-horizontal{display:flex;justify-content:center;padding:1.5rem var(--content-padding) 0;margin-bottom:3.5rem}
  .navigation-horizontal .menu{
    display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;
    width:fit-content;max-width:100%;padding:.35rem;border-radius:1.75rem;
    background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
    font-size:.875rem;font-weight:500;line-height:1.2;letter-spacing:.005em;
  }
  .navigation-horizontal .menu > li > a{
    max-width:32ch;padding:.78rem 1.25rem;border-radius:999px;color:rgba(255,255,255,.55);
    transition:color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
  }
  .navigation-horizontal .menu > li > a:hover{color:#fff;background:rgba(255,255,255,.04)}
  .navigation-horizontal .menu > li > a.link-active,
  .navigation-horizontal .menu > li > a.link-active:hover{color:#1a1206;background:var(--grad-gold);box-shadow:0 10px 30px -14px rgba(229,196,110,.6)}
  .navigation-horizontal .menu > li.has-children > a{padding-right:.6rem}
  .navigation-horizontal .menu > li.has-children > a.link-active{padding-right:1.25rem}
  .navigation-horizontal .has-children{gap:0}
  .navigation-horizontal .has-children .toggle{--btn-icon-size:16px;margin-right:.35rem;padding:0}
  .navigation-horizontal .has-children > ul{
    top:100%;z-index:20;min-width:12rem;margin-top:.45rem;padding:.35rem;border-radius:16px;
    background:rgba(10,10,12,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--shadow);
    font-size:.86rem;font-weight:500;
  }
  .navigation-horizontal .has-children:focus-within > ul{visibility:visible;opacity:1;translate:0 0}
  /* Infos steht ganz rechts in der Leiste und klappt nach innen auf */
  .navigation-horizontal .sc-nav-infos > ul{left:auto;right:0}
  .navigation-horizontal .menu > li > a[role=button]{cursor:pointer}
  /* Brücke, damit das Untermenü beim Hineinfahren offen bleibt */
  .navigation-horizontal .has-children > ul::before{content:"";position:absolute;left:0;right:0;top:-.55rem;height:.55rem}
  .navigation-horizontal li li a{max-width:none;padding:.65rem .75rem;border-radius:11px;color:rgba(255,255,255,.85)}
  .navigation-horizontal li li a:hover,.navigation-horizontal li li a.link-active{color:var(--gold)!important;background-color:rgba(255,255,255,.05)!important}
}

/* Bis 960 px: Menü als Klappfläche unter der Pille wie auf der Website (Öffnen und Wischen macht main.js) */
@media (width <= 960px){
  .site-navigation{z-index:40;background:none}
  .site-navigation .close-navigation{display:none}
  .site-navigation.drawer .menu::after{display:none}
  .site-navigation .menu{
    inset:calc(max(1rem,env(safe-area-inset-top)) + 65px) 19px auto 19px;
    flex-direction:column;align-items:stretch;gap:.15rem;margin:0;padding:.5rem;border-radius:1.5rem;
    max-height:calc(100dvh - 6.5rem);
    background:rgba(10,10,12,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--shadow);
    color:rgba(255,255,255,.72);font-size:1rem;line-height:1.65;
  }
  body:not(.show-navigation) .site-navigation .menu{translate:0 -6px;opacity:0;scale:1}
  .site-navigation.may-close .menu{opacity:1}
  .site-navigation a{
    position:relative;padding:.85rem 1rem;border-radius:1rem;
    font-size:1rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.72);
  }
  .site-navigation a:hover{color:rgba(255,255,255,.92);background:rgba(255,255,255,.04)}
  .site-navigation a.active,.site-navigation a.link-active{background:rgba(229,196,110,.07);color:#fff;font-weight:500}
  .site-navigation a.active::after,.site-navigation a.link-active::after{
    content:"";position:absolute;right:1.1rem;bottom:50%;width:4px;height:4px;border-radius:50%;
    background:var(--gold);box-shadow:0 0 8px var(--gold);transform:translateY(50%);
  }
  .site-navigation ul ul{padding-left:.75rem}
  .site-navigation ul ul a{padding:.7rem 1rem;font-size:.95rem}
  .sc-nav-head{
    margin-top:.5rem;padding:.9rem 1rem .4rem;border-top:1px solid var(--line);
    font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  }
  .site-navigation .log-out{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line)}
  .site-navigation .log-out a::before{width:18px;height:18px}
  .site-navigation .has-children > a{min-width:0;flex:1 1 0}
  .site-navigation .has-children .toggle{--btn-size:44px;--btn-icon-size:18px}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-inner{justify-content:space-between}
}
@media (max-width:980px){
  .nav-discord{display:none}
}

/* ---------- Startseite: Kategorie-Kacheln ---------- */
/* Wie die Highlight-Karten der Website. Immer gleich breit, eine unvollständige Reihe steht mittig. */
.site-home-categories{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:1.5rem}
.site-home-categories:empty{display:none}
.site-home-categories .category{
  display:block;flex:0 1 calc((100% - 3rem) / 3);min-width:0;width:auto;
  padding:2.1rem 2rem 2.2rem;text-align:left;font-size:1rem;font-weight:400;line-height:1.65;
}
.site-home-categories .category .ic{
  width:2.9rem;height:2.9rem;border-radius:14px;display:grid;place-items:center;color:var(--gold);margin-bottom:1.5rem;
  background:rgba(229,196,110,.06);box-shadow:inset 0 0 0 1px rgba(229,196,110,.2);
}
.site-home-categories .category .ic svg{width:21px;height:21px}
.site-home-categories .category .image{
  width:100%;max-width:none;margin:0 0 1.5rem;aspect-ratio:1;object-fit:cover;border-radius:14px;
}
.site-home-categories .category h3{font-size:1.18rem;font-weight:600;letter-spacing:-.015em;margin:0 0 .6rem}
.site-home-categories .category p{color:var(--ash);font-size:.95rem;line-height:1.65;margin:0}

/* ---------- Karten mit Rand-Glow ---------- */
.store-products-images .store-product,
.store-products-grid .store-product,
.store-products-list .store-product,
.store-product-tiered,
.site-home-categories .category,
.widget{
  position:relative;isolation:isolate;border-radius:20px;background-color:#000;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.1),0 32px 64px rgba(0,0,0,.1);
  transition:border-color .5s var(--ease);
}
.store-products-images .store-product::before,
.store-products-grid .store-product::before,
.store-products-list .store-product::before,
.store-product-tiered::before,
.site-home-categories .category::before,
.widget::before{
  /* goldener Bogen auf dem Rand – zeigt zur Maus (--a), Stärke --p (0…1, Skript in footer.twig) */
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from calc(var(--a,0deg) - 70deg) at 50% 50%,
    transparent 0deg,rgba(229,196,110,.25) 25deg,var(--gold) 55deg,var(--gold-hi) 70deg,var(--gold) 85deg,rgba(229,196,110,.25) 115deg,transparent 140deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:var(--p,0);transition:opacity .45s var(--ease);
}
.store-products-images .store-product::after,
.store-products-grid .store-product::after,
.store-products-list .store-product::after,
.store-product-tiered::after,
.site-home-categories .category::after,
.widget::after{
  /* weiches Licht innen an der Mausposition */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(22rem circle at var(--x,50%) var(--y,50%),rgba(229,196,110,.085),transparent 58%);
  opacity:var(--p,0);transition:opacity .45s var(--ease);
}

/* ---------- Inhalt und Seitenleiste ---------- */
.site-content{min-width:0}
.store-products,main.store-product-full,.sc-content .store-product-full{min-width:0}
@media (width > 960px){
  .site-content-widgets{gap:1.75rem}
  .store-sidebar{position:sticky;top:6rem}
}
/* Ohne Module im Panel keine leere Spalte */
.store-sidebar:not(:has(*)){display:none}
body .site-content-widgets:not(:has(> .store-sidebar > *)),
body.is-sidebar-right .site-content-widgets:not(:has(> .store-sidebar > *)){grid-template-columns:minmax(0,1fr)}

.store-text{
  padding:clamp(1.25rem,3vw,2rem);border-radius:18px;background:#050505;border:1px solid rgba(255,255,255,.08);
  color:var(--ash);font-size:1rem;
}
.store-text:empty{display:none}
.store-text h1{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.035em}
.store-text h2{font-size:1.25rem;font-weight:600;letter-spacing:-.015em;margin-top:1.75rem}
.no-products{padding:3rem 1.25rem;border-radius:18px;background:#050505;border:1px solid rgba(255,255,255,.08);color:var(--ash);font-size:1rem;text-align:center}

/* ---------- Produkte ---------- */
/* Drei Karten pro Reihe, eine unvollständige Reihe steht mittig */
.store-products-images,.store-products-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.store-products-images > .store-product,.store-products-grid > .store-product{flex:0 1 calc((100% - 2.5rem) / 3);min-width:0}
.store-products-list{gap:.75rem}
.store-product .product-title{font-size:1.18rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:#fff}
.store-product .product-title a:hover,.store-product .image-link:hover ~ .product-title a{color:var(--gold)}
.store-product .price{font-size:.85rem;color:var(--ash)}
.store-product .price strong{color:var(--gold);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.store-product .price:not(:has(strong:only-child)) strong{white-space:nowrap}
.store-product .price .discount,.store-product .price .discount strong{color:var(--ash-2);font-size:.95rem;font-weight:500}
.store-product .actions{overflow:visible}
.store-product .quantity-field{--btn-size:42px}

/* Kartenansicht */
.store-products-images .store-product,
.store-products-grid .store-product{padding:1rem 1rem 1.15rem;gap:.85rem}
.store-products-images .store-product .half,
.store-products-grid .store-product .half{flex:1 1 100%}
/* Verschenken sitzt rechts neben dem Preis, damit es keine eigene Zeile braucht */
.store-products-images .store-product .actions:has(.gift) .price,
.store-products-grid .store-product .actions:has(.gift) .price{padding-right:44px}
.store-products-images .store-product .gift,
.store-products-grid .store-product .gift{--btn-size:36px;--btn-icon-size:16px;position:absolute;top:-4px;right:0}
/* Die Paketbilder im Shop sind quadratisch und haben ihren eigenen Rahmen */
.store-products-images .store-product .image-link,
.store-products-grid .store-product .image-link{
  display:flex;align-items:center;justify-content:center;width:100%;margin:0;aspect-ratio:1;overflow:hidden;border-radius:14px;
  background:radial-gradient(70% 90% at 50% 20%,rgba(229,196,110,.07),transparent 75%),var(--ink-2);
}
.store-products-images .store-product .image,
.store-products-grid .store-product .image{
  width:100%;height:100%;margin:0;object-fit:cover;transition:transform .6s var(--ease);
}
.store-products-images .store-product:hover .image,
.store-products-grid .store-product:hover .image{transform:scale(1.03)}
.store-product .image-default{width:40%;height:auto}
.store-product .image-default::before{background-color:rgba(229,196,110,.5)}
/* Preis und Knöpfe bleiben zusammen am unteren Kartenrand */
.store-products-images .store-product:not(.store-product-full) .actions,
.store-products-grid .store-product:not(.store-product-full) .actions{flex:0 0 auto;margin-top:auto;align-content:flex-start}
.store-products-images .store-product:not(.store-product-full) .price,
.store-products-grid .store-product:not(.store-product-full) .price{margin-bottom:0}

/* Listenansicht */
.store-products-list .store-product{padding:.85rem 1rem}
.store-products-list .store-product .image-link{width:72px;border-radius:12px;overflow:hidden}
.store-products-list .store-product .image{width:100%;aspect-ratio:1;object-fit:contain}
.store-products-list .store-product .image-default{width:100%}
.store-product-full .image-default{width:136px;margin:0 auto}

/* Paketseite und Paket-Popup */
.store-product-full{
  overflow:clip;gap:1.25rem;padding:var(--widget-padding);border-radius:24px;background:var(--color-brighter-bg);
  box-shadow:inset 0 0 0 1px var(--line);
}
.store-product-full .product-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;padding-right:2rem}
.store-product-full > .image{width:auto;max-height:min(52vh,440px);object-fit:contain;border-radius:16px}
.store-product-full .descr{color:var(--ash);line-height:1.65;font-size:1rem}
.store-product-full .descr h1,.store-product-full .descr h2,.store-product-full .descr h3{font-size:1.18rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-bottom:.9rem}
/* Ab Tablet-Breite Bild links und Text rechts, die Preis-Leiste läuft unten durch */
@media (width > 720px){
  .store-product-full{grid-template-columns:minmax(0,22rem) minmax(0,1fr);column-gap:1.75rem;row-gap:1rem;align-items:start}
  .store-product-full > .product-title{grid-column:2;grid-row:1}
  .store-product-full > .image,.store-product-full > .media-slider{grid-column:1;grid-row:1 / span 2}
  .store-product-full > .descr{grid-column:2;grid-row:2}
  .store-product-full > .actions{grid-column:1 / -1}
}
.store-product-full .actions{
  background-color:rgba(11,11,13,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.store-product-full .price strong{font-size:1.6rem}
.media-slider .slider{border-radius:16px;background:#000}
.media-slider .slide-image{max-height:min(60vh,520px)}
.media-slider .slider::part(container){--swiper-theme-color:var(--gold)}
.media-slider .thumb{border-radius:10px;background-color:#000;box-shadow:inset 0 0 0 1px var(--line)}
.media-slider .thumb.active{box-shadow:inset 0 0 0 1px var(--gold)}
.media-slider .open-lightbox{border-radius:50%}

/* Paket-Optionen und Formulare */
main.store-product-options{
  max-width:560px;margin:0 auto;padding:var(--widget-padding);border-radius:24px;background:var(--color-brighter-bg);
  box-shadow:inset 0 0 0 1px var(--line);
}
.store-product-options .product-title{font-size:1.25rem;letter-spacing:-.02em;color:#fff}
.store-form{font-size:1rem}
.store-form p{color:var(--ash)}
:root .store-form input:not([type=hidden],[type=checkbox],[type=radio],[type=submit]),
:root .store-form select,
:root .store-form textarea,
:root .widget-gift-card .gift-card-input{
  padding:.8rem .95rem;border-radius:12px;background:#000;color:#fff;font-size:16px;
  box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .3s var(--ease);
}
:root .store-form input:focus,:root .store-form select:focus,:root .store-form textarea:focus,:root .widget-gift-card .gift-card-input:focus{
  box-shadow:inset 0 0 0 1px var(--gold),0 0 0 3px rgba(229,196,110,.14);
}
.store-form input::placeholder,.store-form textarea::placeholder{color:rgba(255,255,255,.4)}
.store-product-options .actions .btn-primary,
.store-product-options .actions .btn-secondary,
.store-product-options .actions .btn-tertiary{width:auto;min-width:200px}

/* Menge */
.quantity-field{border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.quantity-field .open-basket:focus,.quantity-field .open-basket:hover{color:var(--gold)}
.quantity-field .open-basket:focus ~ input[type=number],.quantity-field .open-basket:hover ~ input[type=number]{color:var(--gold)}
.quantity-field .open-basket{font-size:.9rem;font-weight:500}

/* ---------- Popups ---------- */
.popup{width:100%;background-color:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.popup-content{background:var(--color-brighter-bg);border-radius:24px;box-shadow:0 0 0 1px var(--line-2),var(--shadow)}
.popup-close{top:.55rem;right:.55rem;border-radius:50%;z-index:3}
@media (pointer: coarse){
  .popup-content{border-radius:24px 24px 0 0}
}
.login-popup-content{padding:1.75rem var(--widget-padding) var(--widget-padding)}
.login-popup-content h2,.gift-form-popup .popup-content h2,.gift-form-popup .popup-content h3{font-size:1.35rem;color:#fff;letter-spacing:-.025em;padding-right:2rem}
.login-popup-content .btn-primary{width:100%}

/* Warenkorb */
.basket-popup-content{background:#000;border-radius:0;box-shadow:-1px 0 0 var(--line-2)}
.basket .basket-header{
  padding:3.25rem 1.5rem 1.15rem;font-size:1.2rem;color:#fff;letter-spacing:-.02em;
  background:radial-gradient(90% 140% at 50% -40%,rgba(229,196,110,.16),transparent 72%),var(--ink-2);
}
.basket .basket-title{text-transform:none;gap:.65rem}
.basket .basket-title::before{width:22px;height:22px;background-color:var(--gold)}
.basket .basket-second-header{padding:.85rem 1.5rem;background:var(--ink-2);border-block:1px solid var(--line);font-size:.92rem;color:var(--ash);font-weight:500}
.basket .basket-second-header .total{font-size:.9rem;color:#fff}
.basket .basket-second-header .total strong{font-size:1rem;font-weight:600}
.basket .basket-items{gap:.75rem;padding:1rem}
.basket .basket-item{gap:.75rem;padding:1rem;border-radius:18px;background:var(--color-brighter-bg);box-shadow:inset 0 0 0 1px var(--line)}
.basket .basket-item .title{font-size:1rem;letter-spacing:-.015em;line-height:1.3;color:#fff}
.basket .basket-item .title a:hover{color:var(--gold)}
.basket .basket-item .options{color:var(--ash);font-size:.85rem}
.basket .basket-item .trial{border-radius:8px}
.basket .basket-item .price{margin-top:.25rem;color:var(--gold)}
.basket .basket-item .price strong{font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
.basket .basket-item .quantity-field{--btn-size:34px;flex:none}
.basket .basket-item .remove{--btn-size:36px;--btn-icon-size:18px}
.basket .basket-checkout{padding:1.15rem 1.5rem max(1.5rem,env(safe-area-inset-bottom));background:var(--ink-2);border-top:1px solid var(--line)}
.basket .basket-checkout h3{margin-bottom:.9rem;font-size:.82rem;font-weight:500;letter-spacing:.12em;color:var(--ash)}
.basket .basket-checkout .total{color:var(--gold)}
.basket .basket-checkout .total strong{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.basket .basket-empty{color:var(--ash);font-size:1rem}
@media (width <= 480px){
  .basket .basket-item{flex-wrap:wrap}
  .basket .basket-item .info{flex:1 1 100%}
  .basket .basket-item .remove{margin-left:auto}
}

/* Hinweise: am Desktop links unten, sonst verdecken sie „Zur Kasse“ im Warenkorb */
@media (width > 960px){
  .toaster{right:auto;margin:0}
}
.toast{
  height:auto;min-height:50px;padding:.55rem .55rem .55rem 1.1rem;border-radius:14px;
  background:var(--ink-3);color:#fff;font-size:.92rem;line-height:1.35;
  box-shadow:0 0 0 1px var(--line-2),var(--shadow);
}
.toast[hidden]{min-height:0;padding-block:0;overflow:hidden}
.toast.toast-warning{background:#262108;box-shadow:0 0 0 1px rgba(229,196,110,.45),var(--shadow)}
.toast.toast-error{background:#2a0f10;box-shadow:0 0 0 1px rgba(229,72,77,.5),var(--shadow)}
.toast.toast-success{background:#0f2418;box-shadow:0 0 0 1px rgba(95,209,138,.45),var(--shadow)}
.toast-close{border-radius:50%}

/* Seitenleiste */
.widget{padding:1.25rem}
.widget + .widget{margin-top:1rem}
.widget-title{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.widget-featured .store-product{padding:0}
.widget .progress,.widget .progress-bar{border-radius:999px}

/* Stufen-Pakete */
.store-category-tiered{padding:0}
.store-product-tiered .price strong{color:var(--gold);font-size:1.3rem;font-weight:700}

/* ---------- Icons im Stil der Website statt der Exo-Icons ---------- */
:root{
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
  --i-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-gift:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  --i-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E");
  --i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --i-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  --i-package:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
  --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --i-fullscreen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
  --i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 3 14 9-14 9z'/%3E%3C/svg%3E");
  --i-loading:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.22-8.56'/%3E%3C/svg%3E");
}
.btn-icon,.btn-glyph,.btn-glyph-text,.btn-icon-text{--btn-icon:var(--i-plus)}
.quantity-field .adjust{--btn-icon:var(--i-plus);--btn-icon-size:12px}
.quantity-field .adjust.decrease{--btn-icon:var(--i-minus)}
.store-product .gift{--btn-icon:var(--i-gift)}
.store-product .remove,.basket .basket-item .remove{--btn-icon:var(--i-trash)}
@media (width <= 960px){
  .site-navigation .close-navigation{--btn-icon:var(--i-close)}
  .site-navigation .has-children .toggle{--btn-icon:var(--i-chevron)}
  .site-navigation .log-out a::before{mask-image:var(--i-logout);-webkit-mask-image:var(--i-logout)}
}
@media (width > 960px){
  .navigation-horizontal .has-children .toggle{--btn-icon:var(--i-chevron)}
}
.site-home-categories .category .image-default::before,
.store-product .image-default::before{mask-image:var(--i-package);-webkit-mask-image:var(--i-package)}
.store-product .product-title .countdown::before,
.store-product-tiered .countdown::before{mask-image:var(--i-clock);-webkit-mask-image:var(--i-clock)}
.media-slider .open-lightbox::before{mask-image:var(--i-fullscreen);-webkit-mask-image:var(--i-fullscreen)}
.media-slider .thumb-youtube::after,
.popup.popup-media-slider .thumb-youtube::after{mask-image:var(--i-play);-webkit-mask-image:var(--i-play)}
.popup-close::before,.toast-close::before{mask-image:var(--i-close);-webkit-mask-image:var(--i-close)}
.basket .basket-title::before{mask-image:var(--i-user);-webkit-mask-image:var(--i-user)}
.store-product .actions.updating::before,
.store-product-options .actions.updating::before,
.gift-form-popup .popup-content .actions.updating::before,
.popup.popup-loading .popup-content::before,
.basket-popup-content.updating::before{
  background:var(--gold);
  mask:var(--i-loading) center center/contain no-repeat;-webkit-mask:var(--i-loading) center center/contain no-repeat;
  animation:sc-spin .8s linear infinite;
}
@keyframes sc-spin{to{rotate:360deg}}

/* ---------- Footer ---------- */
.site-foot{position:relative;overflow:hidden;background:#000;padding:8rem 0 2.6rem}
.foot-dots{
  position:absolute;left:0;right:0;top:0;height:13rem;pointer-events:none;
  background-image:radial-gradient(rgba(229,196,110,.42) 1.2px,transparent 0);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(90% 160% at 50% -60%,transparent 55%,#000 57% 66%,transparent 68%);
  mask-image:radial-gradient(90% 160% at 50% -60%,transparent 55%,#000 57% 66%,transparent 68%);
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.foot-brand .brand{font-size:1.1rem}
.foot-brand p{color:rgba(255,255,255,.5);font-size:.95rem;line-height:1.65;max-width:21rem;margin:1.2rem 0 0}
.foot-col h4{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:.35rem 0 1.25rem}
.foot-col a{display:block;width:fit-content;color:rgba(255,255,255,.55);font-size:.95rem;padding:.38rem 0;transition:color .3s var(--ease)}
.foot-col a:hover{color:#fff}
.foot-bottom{
  margin-top:4.5rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:rgba(255,255,255,.42);
}
.foot-social{display:flex;gap:.6rem}
.foot-social a{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.foot-social a:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.foot-social svg{width:16px;height:16px}
.foot-note{margin:2.2rem 0 0;text-align:center;font-size:.72rem;color:rgba(255,255,255,.3)}

/* ---------- Responsive wie site.css ---------- */
@media (max-width:860px){
  .site-home-categories .category{flex-basis:100%}
}
@media (width <= 960px){
  .store-products-images > .store-product,.store-products-grid > .store-product{flex-basis:calc((100% - 1.25rem) / 2)}
  .site-navigation li.desktop-only{display:none}
}
@media (max-width:980px){
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:720px){
  .site-home-categories .category{flex-basis:100%;padding:1.8rem 1.6rem}
  .page-hero{padding:8.8rem 0 3.5rem}
  .sc-hero-min{padding:5.5rem 0 0}
  .user-name{display:none}
  .btn-sm .btn-txt{display:none}
  .btn-sm{padding:.55rem}
  .btn-sm.log-in .btn-txt{display:inline}
  .btn-sm.log-in{padding:.55rem .9rem}
}
@media (max-width:560px){
  .store-products-images > .store-product,.store-products-grid > .store-product{flex-basis:100%}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
}
@media (max-width:380px){
  .brand-txt{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .gild{background-position:100% 0}
}