:root{
  --bg:#0f1013;
  --panel:#111217;
  --panel2:#151722;
  --text:#f4f4f5;
  --muted:#b8b8be;
  --line:#2a2a33;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;

  /* Background watermarks (set per-page by js/theme.js) */
  --wm1: none;
  --wm2: none;
  --wm-opacity: .09;
}

[hidden] { 
  display: none !important; 
}

*{box-sizing:border-box}
/* Use min-height instead of a hard height to reduce fixed-background repaint seams on some browsers */
html,body{min-height:100%}
/* Keep a stable gutter for the vertical scrollbar so right-aligned header items don't feel "glued" */
html{ scrollbar-gutter: stable; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  /* Friendlier but still dark: softer highlights, no hard edges */
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(180,190,255,.16), rgba(0,0,0,0) 62%),
    radial-gradient(820px 520px at 82% 12%, rgba(255,255,255,.08), rgba(0,0,0,0) 60%),
    radial-gradient(980px 620px at 60% 110%, rgba(255,255,255,.06), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, #0e0f13, var(--bg));
  color:var(--text);
  position: relative;
}

/* Character watermarks (Antantaru / Chumana) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--wm1), var(--wm2);
  background-repeat: no-repeat;
  /* Antantaru left-bottom, Chumana bottom-right (bündig unten) */
  background-position: left -180px bottom -140px, right -40px bottom 0px;
  background-size: min(860px, 62vw), min(520px, 42vw);
  opacity: var(--wm-opacity);
  /* Avoid visible horizontal seams/repeat artifacts on some GPUs/browsers:
     - no mix-blend-mode
     - no filter/blur on a full-screen fixed layer
     We keep it subtle purely via opacity.
  */
  /* Keep this layer filter-free to prevent scroll-time tiling seams on some browsers */
}

/* Subtle premium background texture (soft light blobs + fine grid). */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Soft "stage" texture + fine grid (masked so it never looks like hard bands) */
  background:
    radial-gradient(900px 520px at 75% 10%, rgba(255,255,255,.08), rgba(0,0,0,0) 60%),
    radial-gradient(780px 480px at 15% 55%, rgba(255,255,255,.05), rgba(0,0,0,0) 62%),
    radial-gradient(900px 520px at 70% 85%, rgba(255,255,255,.04), rgba(0,0,0,0) 65%),
    /* fine grid */
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 46px);
  opacity: .08;
  /* Same reason as above: avoid mix-blend-mode + filter on a fixed full-screen layer,
     which can cause visible "repeating" bands while scrolling on some setups. */
}

/* Ensure the decorative frame stays behind the UI */
.site-header,
main,
footer{
  position: relative;
  z-index: 1;
}

/* Link reset (keine blaue/unterstrichene Schrift im Shop) */
a{ color: inherit; text-decoration: none; }
a:visited{ color: inherit; }
a:hover{ text-decoration: none; }
a:focus-visible{ outline: 2px solid rgba(159,233,255,.45); outline-offset: 3px; border-radius: 8px; }

/* Default image safety: prevents gigantic images on pages that don't explicitly size them */
img{ max-width:100%; height:auto; }

code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}

/*
  Layout width

  The site previously capped the main container at ~1120px which can look
  noticeably "4:3" on modern 16:9 desktop screens. Widen the default
  container while keeping it responsive on smaller viewports.
*/
.container{
  width:min(1400px, 94vw);
  margin:0 auto;
}

.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  border:0;
}

.skip-link{
  position:absolute;
  left:-999px; top:12px;
  background:#fff; color:#000;
  padding:10px 12px; border-radius:10px;
  z-index:9999;
}
.skip-link:focus{left:12px}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(18,18,22,.62);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
  /* Let dropdowns (Account) render freely; spacing is handled by container padding */
  overflow: visible;
}



.nav{display:flex; align-items:center; gap:12px}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.06); border-color:#3a3a48}
.icon-btn:active{transform: translateY(1px)}
.pill{
  min-width:26px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  background:#fff;
  color:#000;
  font-weight:700;
}

.hero{
  padding:34px 0 18px;
  text-align:center;
  position: relative;
  overflow: hidden;
}
/* Premium spotlight layer */
.hero::before{
  content:"";
  position:absolute;
  inset:-140px -40px auto -40px;
  height: 320px;
  pointer-events:none;
  background:
    radial-gradient(700px 220px at 50% 30%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%),
    radial-gradient(900px 300px at 50% 110%, rgba(255,255,255,.06), rgba(0,0,0,0) 65%);
  filter: blur(.2px);
  opacity: .95;
}
.hero h1{
  margin:0 0 8px;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing:-.02em;
}
.hero p{
  margin:0 auto;
  color: rgba(255,255,255,.72);
  max-width:70ch;
  line-height: 1.5;
}

.controls{
  padding:16px 0 10px;
}
.controls-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}


/* -----------------------------
   Kategorie-Chips (Index)
------------------------------*/
.category-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  margin:0;
  align-items:center;
}


.chip{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  color: var(--text);
  height:44px;
  padding:0 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:750;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.chip:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.chip:active{ transform: translateY(1px); }
.chip:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px;
}

/* Dezentere Variante */
.chip-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}


/* Optionaler Active-State (falls per JS/Klasse gesetzt) */
.chip.is-active,
.chip[aria-pressed="true"]{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
}


[data-theme="light"] .chip{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color:#0b0b0c;
  box-shadow: none;
}

[data-theme="light"] .chip:hover{
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.18);
}
[data-theme="light"] .chip-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce){
  .chip{ transition:none; }
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:220px;
  flex:1;
}
.label{font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}

/* Variant status dot (product page) */
.variant-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  margin-left:8px;
  vertical-align:middle;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16);
}
.variant-dot--unknown{ background: rgba(255,255,255,.28); }
.variant-dot--in{ background: #2ecc71; }
.variant-dot--backorder{ background: #f39c12; }
.variant-dot--out{ background: #e74c3c; }

[data-theme="light"] .variant-dot{
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
/* Inputs & Dropdowns (glassy, readable, Dark/Light) */
input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
input::placeholder{color:#8f8f98}
input:focus{border-color:#535364; box-shadow: 0 0 0 4px rgba(255,255,255,.06)}
input:focus-visible{
  outline: 2px solid rgba(144,194,204,.55);
  outline-offset: 3px;
}

/* Native <select> */
select{
  width:100%;
  padding:12px 42px 12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  /* Chevron */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b8b8be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 14px center;
  background-size:18px 18px;
}
select:hover{ background: rgba(255,255,255,.06); border-color:#3a3a48; }
select:focus{ border-color:#535364; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
select:focus-visible{
  outline: 2px solid rgba(144,194,204,.55);
  outline-offset: 3px;
}

/* Dropdown list (browser support varies, improves readability where supported) */
select option{
  background: #0f0f12;
  color: var(--text);
}
select optgroup{
  background: #0f0f12;
  color: var(--muted);
}

/* Light theme overrides */
[data-theme="light"] input,
[data-theme="light"] select{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color:#0b0b0c;
}
[data-theme="light"] input::placeholder{ color: rgba(11,11,12,.55); }
[data-theme="light"] input:focus,
[data-theme="light"] select:focus{
  border-color: rgba(29,92,105,.55);
  box-shadow: 0 0 0 4px rgba(144,194,204,.18);
}
[data-theme="light"] select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231d5c69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="light"] select option{
  background:#ffffff;
  color:#0b0b0c;
}



.btn{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  font-weight:650;
}
.btn:hover{background: rgba(255,255,255,.08); border-color:#3a3a48}
.btn:active{transform: translateY(1px)}
.btn.primary{
  background:#fff;
  color:#000;
  border-color:#fff;
}
.btn.primary:hover{background:#ededed; border-color:#ededed}
.btn.ghost{
  background:transparent;
}

.product-section{padding:18px 0 48px}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:6px 0 14px;
}
h2{margin:0; font-size:18px; letter-spacing:.06em; text-transform:uppercase}
.muted{color:var(--muted); font-size:13px}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap, 14px);
}

/* ===== Wishlist: recently viewed carousel ===== */
.recent-carousel{
  display:flex;
  align-items:center;
  gap:10px;
}
.carousel-viewport{
  flex:1;
  overflow:hidden;
  border-radius: 18px;
}
.carousel-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding: 6px 4px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar{ height: 8px; }
.carousel-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }
.carousel-track::-webkit-scrollbar-track{ background: transparent; }

.recent-carousel .card{
  flex: 0 0 auto;
  width: 230px;
  scroll-snap-align: start;
  grid-column: auto; /* override grid span */
}
.recent-carousel .thumb{
  aspect-ratio: 1 / 1;
}
.recent-carousel .card-body{ padding: 12px; }
.recent-carousel .card-name{ font-size: 13px; }
.recent-carousel .price{ font-size: 13px; }

.carousel-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
  user-select: none;
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.carousel-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.carousel-btn:active{ transform: translateY(1px); }
.carousel-btn[disabled]{
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 620px){
  .carousel-btn{ display:none; }
  .recent-carousel .card{ width: 78vw; max-width: 320px; }
}
.card{
  /* cards per row controlled via --card-span */
  grid-column: span var(--card-span, 3);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 10px 36px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
@media (max-width: 980px){
  .card{grid-column: span 6}
}
@media (max-width: 620px){
  /* Mobile gallery: 2 columns by default for better scanability */
  .card{grid-column: span 6}
}

/* Very small phones: fall back to 1 column for comfortable tap targets */
@media (max-width: 360px){
  .card{grid-column: span 12}
}

.thumb{
  /* Square preview area */
  aspect-ratio: 1 / 1;
  height:auto;
  background:
    radial-gradient(500px 200px at 30% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border-bottom:1px solid var(--line);
  position:relative;
}
.badges{
  position:absolute;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  max-width:calc(100% - 24px);
  z-index: 2;
}

/* Left & right badge stacks */
.badges-left{
  top:12px;
  left:12px;
  right:auto;

  /* NEW sits at the very top-left. Everything else stacks UNDER it (no gaps). */
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  justify-content:flex-start;

  /* Leave room for the top-right stack (hot/sale) */
  max-width:calc(100% - 72px);
}

/* Stack under NEW */
.badges-under{
  display:flex;
  flex-direction:column;
  gap:8px;
}



/* Badge row/col layout (prevents overlap, allows "nachrücken") */
.badge-row{ display:flex; gap:8px; align-items:flex-start; }
.badge-col{ display:flex; flex-direction:column; gap:8px; }
.badge-col.has-row{ margin-top: 0px; }

.badges-right{
  top:12px;
  right:12px;
  left:auto;
  flex-direction:column;
  align-items:flex-end;
  flex-wrap:nowrap;
  max-width: 70%;
}

/* Specific stacks (new) */
.badges-top-right{
  top:12px;
  right:12px;
  left:auto;
  flex-direction:column;
  align-items:flex-end;
  flex-wrap:nowrap;
  max-width: 70%;
}

.badges-bottom-right{
  bottom:12px;
  right:12px;
  top:auto;
  left:auto;
  flex-direction:row;
  align-items:flex-end;
  flex-wrap:wrap;
  max-width:70%;
}

.badges-bottom-left{
  bottom:12px;
  left:12px;
  top:auto;
  right:auto;
  flex-direction:column;
  align-items:flex-start;
  flex-wrap:nowrap;
  max-width: 70%;
}

.badge{
  /* Gradient outline using your accent colors */
  --badge-bg: #fff;
  --badge-fg: #000;
  --badge-border-grad: linear-gradient(135deg, #90c2cc, #1d5c69);

  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:750;
  line-height:1;

  border:1px solid transparent;
  background:
    linear-gradient(var(--badge-bg), var(--badge-bg)) padding-box,
    var(--badge-border-grad) border-box;
  color: var(--badge-fg);
}

.badges .badge{
  position:static;
}

/* ---------------------------------
   Badge fold-out (hover over image)
   - default: circles with ICON ONLY
   - on hover over the image: badge expands and the LABEL slides out next to the icon
----------------------------------*/
.badges .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* keep the icon perfectly centered when collapsed */
  gap:0;

  overflow:hidden;
  white-space:nowrap;

  height:28px;
  min-width:28px;
  max-width:28px;
  padding:0;

  border-radius:999px;

  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: max-width .18s ease, padding .18s ease, transform .18s ease, filter .18s ease;
}

/* Hide the original text for icon badges and draw the icon via ::before */
.badges .badge:not(.badge--new){
  font-size:0; /* ensures the circle really is icon-only */
}

/* Icon */
.badges .badge:not(.badge--new)::before{
  /* Center the emoji/icon perfectly inside the 28px circle */
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  line-height:1;
}

/* When expanded, the fixed 28px icon box creates a big visual gap between
   icon and label. Shrink the icon box on hover so the text sits tighter. */
.thumb:hover .badges .badge:not(.badge--new)::before{
  width:18px;
  height:18px;
}

/* Label (fold-out) */
.badges .badge:not(.badge--new)::after{
  font-size:12px;
  font-weight:750;
  line-height:1;
  /* no manual offset; flex gap handles spacing on expand */
  margin-left:0;
  opacity:0;
  transform: translateX(-2px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Emoji per badge type (must be at least as specific as the base ::before rule) */
.badges .badge--hot::before{ content:"🔥"; }
.badges .badge--sale::before{ content:"%"; }
.badges .badge--limited::before{ content:"⏳"; }
.badges .badge--restock::before{ content:"♻️"; }
.badges .badge--exclusive::before{ content:"💎"; }
.badges .badge--onlineexclusive::before{ content:"🌐"; }
.badges .badge--custom::before{ content:"🏷️"; }

/* Keep "New" readable (no icon, no foldout) */
.badges .badge--new{
  max-width:none;
  height:28px;
  padding:0 10px;
  justify-content:flex-start;
  /* modern + readable */
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(255,255,255,.95);
  background:
    linear-gradient(135deg, rgba(124,92,255,.38), rgba(0,212,255,.22));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Expand + show labels when hovering the image */
.thumb:hover .badges .badge:not(.badge--new){
  max-width:240px;
  padding:6px 10px;
  justify-content:flex-start;
  gap:6px; /* tighter icon ↔ label spacing */
  filter: brightness(1.02);
}
.thumb:hover .badges .badge--hot::after{ content:"Hot"; }
.thumb:hover .badges .badge--sale::after{ content:"Sale"; }
.thumb:hover .badges .badge--limited::after{ content:"Limited"; }
.thumb:hover .badges .badge--restock::after{ content:"Restock"; }
.thumb:hover .badges .badge--exclusive::after{ content:"Exclusive"; }
.thumb:hover .badges .badge--onlineexclusive::after{ content:"Online Exclusive"; }
.thumb:hover .badges .badge--custom::after{ content:""; }

.thumb:hover .badges .badge:not(.badge--new)::after{
  opacity:1;
  transform: translateX(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .badges .badge,
  .badges .badge::after{ transition: none; }
}


/* Badge variants */
.badge--new{
  --badge-bg: transparent;
  --badge-fg: rgba(144, 194, 204, .98);
  box-shadow: none;
}

[data-theme="light"] .badge--new{
  --badge-bg: transparent;
  --badge-fg: rgba(29, 92, 105, .98);
}

/* Hot (formerly Bestseller) */
.badge--hot{
  --badge-bg: rgba(255, 59, 59, .92);
  --badge-fg: rgba(255,255,255,.98);
  font-size: 14px;
  font-weight: 900;
}

.badge--limited{
  --badge-bg: rgba(168, 85, 247, .92);
  --badge-fg: rgba(255,255,255,.98);
}

.badge--sale{
  --badge-bg: rgba(220, 38, 38, .92);
  --badge-fg: rgba(255,255,255,.98);
  font-size: 14px;
  font-weight: 950;
}

.badge--restock{
  --badge-bg: rgba(59, 130, 246, .90);
  --badge-fg: rgba(255,255,255,.98);
}

.badge--exclusive{
  --badge-bg: rgba(255, 215, 120, .92);
  --badge-fg: rgba(40, 26, 0, .95);
}


.badge--onlineexclusive{
  --badge-bg: rgba(255, 215, 120, .92);
  --badge-fg: rgba(40, 26, 0, .95);
}

/* Backwards compatibility (if something still outputs badge--bestseller) */
.badge--bestseller{
  /* Backwards compatibility (if something still outputs badge--bestseller) */
  --badge-bg: rgba(255, 59, 59, .92);
  --badge-fg: rgba(255,255,255,.98);
}

.badge--custom{
  --badge-bg: rgba(255,255,255,.10);
  --badge-fg: var(--text);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .badge--restock{
  --badge-bg: rgba(59, 130, 246, .92);
  --badge-fg: rgba(255,255,255,.98);
}

html[data-theme="light"] .badge--custom{
  --badge-bg: rgba(0,0,0,.04);
  --badge-fg: #0b0b0c;
  border-color: transparent;
}

.card-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.card-title{
  font-weight:800;
  letter-spacing:.01em;
  display:flex;
  gap:10px;
  align-items:baseline;
  justify-content:space-between;
}
.card-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.price{
  font-weight:900;
  flex:0 0 auto;
  min-width:7ch;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Prevent currency amounts from jumping/wrapping across the UI */
.cart-price,
#price,
#subtotal,
#shipping,
#total,
.totals .row > strong,
.totals .row > span:last-child{
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.totals .row > strong,
.totals .row > span:last-child{
  flex:0 0 auto;
  min-width:9ch;
  text-align:right;
}

.cart-price{font-weight:900; text-align:right}
.desc{color:var(--muted); font-size:13px; line-height:1.45}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--muted);
}
.card-actions{
  display:flex;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--line);
}
.card-actions .btn{flex:1}

.empty-state{
  margin-top:18px;
  padding:18px;
  border:1px dashed #3a3a48;
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
}
.empty-state h3{margin:0 0 6px}
.empty-state p{margin:0; color:var(--muted)}

.backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
  z-index:80;
}

.drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(440px, 92vw);
  height:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-left:1px solid var(--line);
  box-shadow: var(--shadow);
  z-index:90;
  display:flex;
  flex-direction:column;
}
.drawer-header{
  padding:16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.drawer-title{font-weight:900; letter-spacing:.08em; text-transform:uppercase}
.drawer-body{padding:14px 16px; overflow:auto; flex:1}
.drawer-footer{
  padding:14px 16px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cart-items{display:flex; flex-direction:column; gap:10px}

.cart-item{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(0,0,0,.20);
  padding:12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
}
.cart-item-left{display:flex; gap:10px; align-items:center; min-width:0;}
.cart-item-thumb{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  flex:0 0 auto;
}
.cart-item-text{min-width:0;}
.cart-item-title{font-weight:800}
.cart-item-meta{color:var(--muted); font-size:12px; margin-top:2px}
.cart-item-right{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.qty{
  display:flex;
  align-items:center;
  gap:8px;
}
.qty button{
  width:32px; height:32px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.qty span{min-width:22px; text-align:center; font-weight:800}
.small-link{
  background:transparent;
  border:0;
  color:var(--muted);
  cursor:pointer;
  text-decoration:underline;
  font-size:12px;
}
.small-link:hover{color:var(--text)}

.cart-empty{
  border:1px dashed #3a3a48;
  border-radius:16px;
  padding:14px;
  color:var(--muted);
}

.totals{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,.18);
}
.totals .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
}
.totals .total{
  border-top:1px solid var(--line);
  margin-top:6px;
  padding-top:10px;
  font-size:16px;
}

.modal{
  width:min(720px, 94vw);
  border:1px solid var(--line);
  border-radius: 20px;
  background: #0f0f12;
  color:var(--text);
  box-shadow: var(--shadow);
}
.modal::backdrop{background: rgba(0,0,0,.65)}
.modal-card{display:flex; flex-direction:column}
.modal-head{
  padding:16px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.modal-body{padding:16px; display:flex; flex-direction:column; gap:12px}
.modal-foot{
  padding:16px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:620px){
  .two-col{grid-template-columns:1fr}
}
.summary{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,.02);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.summary strong{color:var(--text)}

.site-footer{
  border-top:1px solid var(--line);
  padding:32px 0 18px;
  background:
    radial-gradient(1200px 380px at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    rgba(0,0,0,.22);
}

/* New footer layout */
.footer-top{
  display:grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap:24px;
  align-items:start;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
}
.footer-logo img{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.footer-tagline{max-width: 48ch;}

.footer-newsletter{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.footer-newsletter input{
  min-width: 220px;
}

.footer-socials{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.footer-social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.footer-social:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
}
.footer-social .ico{font-size:16px; line-height:1;}

.footer-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
.footer-col h3{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer-col a{
  display:block;
  padding:6px 0;
  color:var(--text);
  text-decoration:none;
  opacity:.9;
}
.footer-col a:hover{opacity:1; text-decoration:underline;}

.footer-bottom{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}
.footer-bottom-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.footer-bottom-links a{
  color:var(--muted);
  text-decoration:none;
}
.footer-bottom-links a:hover{color:var(--text); text-decoration:underline;}

/* Backwards compat */
.footer-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}

@media (max-width: 920px){
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (hover: none) and (pointer: coarse) and (max-width: 1024px){
  .footer-cols{grid-template-columns:1fr}
  .footer-newsletter input{min-width: 0; width: 100%;}
  .footer-newsletter{width:100%}
}


.load-more-wrap{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

/* =========================
   HEADER (drawer-ready, premium)
   - Left: menu toggle + compact logo
   - Center: search + sort (only where present)
   - Right: account + cart
   ========================= */

/* Header full width inside the header only */
.site-header .container{
  /* Full width header, but with consistent "gutters" so controls never touch the viewport edge */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* Intentionally not symmetric: right side needs extra breathing room (scrollbar + cart badge). */
  --header-pad-left: clamp(14px, 2.2vw, 28px);
  --header-pad-right: clamp(22px, 3.0vw, 44px);
  /*
    Add measured scrollbar width via --sbw (set in JS) so right-aligned controls
    never visually hug the scrollbar/viewport edge.
  */
  padding-left: calc(var(--header-pad-left) + env(safe-area-inset-left)) !important;
  padding-right: calc(var(--header-pad-right) + env(safe-area-inset-right) + var(--sbw, 0px)) !important;
}

.site-header .header-row{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 86px !important;
  /* Gutters live on the row element (this node has both .container and .header-row) */
  padding-left: calc(var(--header-pad-left) + env(safe-area-inset-left)) !important;
  padding-right: calc(var(--header-pad-right) + env(safe-area-inset-right) + var(--sbw, 0px)) !important;
}

.site-header .header-left{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  justify-self: start !important;
}

.site-header .header-center{
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  justify-self: center !important;
}

.site-header .header-right{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: nowrap !important;
  justify-self: end !important;
}

/* Account button text can get long (username) – keep it neat */
.site-header #accountBtn{
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logo link (no absolute positioning anymore) */
.site-header .brand-link{
    max-width: 60vw !important;
  position: static !important;
  transform: none !important;
  height: 62px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* Logo ~ half size */
.site-header .brand-logo{
  height: 58px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
  transform: translateY(var(--logo-nudge-y, 0px)) !important;
}

/* Right controls sizing */
.site-header .nav .btn,
.site-header .nav .icon-btn{
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* If the account label becomes a long username, keep it tidy */
.site-header #accountBtn{
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header tools (search) */
.site-header .header-tools{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
}

.site-header .header-tools .field{
  margin: 0 !important;
}

.site-header .header-tools .field .label{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header .header-tools input[type="search"],
.site-header .header-tools select{
  height: 48px !important;
}

.site-header .header-tools .header-search{
  width: min(380px, 42vw) !important;
  min-width: 160px !important;
}

/* Hover: rounded frame + subtle pulse */
.site-header .brand-link:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: #3a3a48 !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.40) !important;
  animation: bwLogoPulseFinal 1.15s ease-in-out infinite !important;
}
.site-header .brand-link:active{
  animation: none !important;
  transform: scale(0.99) !important;
}

@keyframes bwLogoPulseFinal{
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1.00); }
}

@media (prefers-reduced-motion: reduce){
  .site-header .brand-link:hover{
    animation: none !important;
    transform: scale(1.02) !important;
  }
}


/* Mobile safety */
@media (max-width: 520px){
  /* Desktop stays unchanged: only mobile overrides below */

  .site-header .container{
    --header-pad-left: 14px;
    --header-pad-right: 18px;
    padding-left: calc(var(--header-pad-left) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--header-pad-right) + env(safe-area-inset-right) + var(--sbw, 0px)) !important;
  }

  /* Mobile header = clean 2-row layout
     Row 1: menu | centered logo | actions
     Row 2: search (full width) */
  .site-header .header-row{
    min-height: 72px !important;
    /* Prevent right-side items from forcing overlap with the centered logo */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 10px 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Let hamburger + search behave as grid children */
  .site-header .header-left{ display: contents !important; }

  .site-header .sidebar-toggle{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .site-header .header-center{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
  }

  .site-header .brand-link{
    height: 44px !important;
    padding: 4px 6px !important;
    border-radius: 14px !important;
    max-width: 74vw !important;
  }
  .site-header .brand-logo{
    height: 30px !important;
    max-width: 62vw !important;
  }

  .site-header .header-right{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .site-header .nav .btn,
  .site-header .nav .icon-btn{
    height: 44px !important;
  }

  /* Mobile uses a floating cart button instead of the header cart icon */
  .site-header #openCartBtn{
    display: none !important;
  }

  /* Buddies dock on mobile: keep visible as bottom popup */
  .buddy-dock{
    display: flex !important;
    right: 90px !important; /* move left so it doesn't clash with cart-fab */
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    align-items: flex-end !important;
  }
  .buddy-dock-panel{
    right: 90px !important;
    bottom: calc(16px + env(safe-area-inset-bottom) + 78px) !important;
  }

/* Account button: icon-only, round */
  .site-header #accountBtn{
    max-width: none !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    line-height: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .site-header #accountBtn .header-account-meta{ display:none !important; }
  .site-header #accountBtn .account-btn-inner{ gap:0 !important; }
  .site-header #accountBtn .avatar-circle{
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
  }
  .site-header #accountBtn .avatar-img{ width:100% !important; height:100% !important; }

  /* Search row */
  .site-header .header-tools{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
  }
  .site-header .header-tools .header-search{
    width: 100% !important;
    min-width: 0 !important;
  }
  .site-header .header-tools input[type="search"]{
    width: 100% !important;
  }

  /* Account dropdown: readable + stays in viewport */
  .account-menu{
    width: min(360px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    right: 0 !important;
    left: auto !important;
    max-height: min(70vh, 520px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    background: rgba(10,10,12,.96) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.78) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  }
  .account-menu .muted{ color: rgba(255,255,255,.75) !important; }
  .account-menu .account-name{ font-size: 16px !important; }
}

/* Floating cart button (mobile only) */
.cart-fab{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.95);
}
.cart-fab:active{ transform: translateY(1px); }
.cart-fab .cart-fab-icon{ font-size: 20px; line-height: 1; }
.cart-fab .cart-fab-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,.35);
}

@media (max-width: 520px){
  .cart-fab{ display: inline-flex; }
}

 /* Very small phones: keep header compact */
@media (max-width: 380px){
  .site-header .brand-logo{ max-width: 38vw !important; }
  .site-header #accountBtn{ width: 48px !important; height: 48px !important; }
  .site-header #accountBtn .avatar-circle{ width: 36px !important; height: 36px !important; }
}

/* =========================
   Kategorie-Leiste: rechts Sortierung
   ========================= */
.category-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: 0 12px 40px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.category-row .category-bar{

  flex: 1 1 auto;
}

.category-tools{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.category-tools .field{ margin: 0; }

.category-tools .field .label{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.category-tools select{
  height: 44px;
  min-width: 220px;
}


.category-tools .btn{
  height: 44px;
  display:inline-flex;
  align-items:center;
}


/* =========================
   Product grid view toggle
   ========================= */
.view-toggle{
  height: 44px;
  display:flex;
  align-items:stretch;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.view-toggle .view-btn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  letter-spacing: .02em;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .12s ease, transform .12s ease;
}
.view-toggle .view-btn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.view-toggle .view-btn + .view-btn{
  border-left: 1px solid rgba(255,255,255,.12);
}

/* =========================
   Product list view
   ========================= */
#productGrid.products-list{
  display:flex;
  flex-direction:column;
  gap: var(--grid-gap, 14px);
}

#productGrid.products-list .card{
  grid-column: auto;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  min-height: unset;
}

#productGrid.products-list .thumb{
  width: 180px;
  flex: 0 0 180px;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}

#productGrid.products-list .thumb-img{
  width:100%;
  height:100%;
  object-fit:contain;
}

#productGrid.products-list .card-body{
  padding: 16px;
}

#productGrid.products-list .card-title{
  gap: 14px;
}

@media (max-width: 720px){
  #productGrid.products-list .card{ flex-direction:column; }
  #productGrid.products-list .thumb{
    width:auto;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
.view-toggle .view-btn:hover{ background: rgba(255,255,255,.06); }
.view-toggle .view-btn:active{ transform: translateY(1px); }
.view-toggle .view-btn[aria-pressed="true"]{
  background: rgba(255,255,255,.12);
}

@media (max-width: 620px){
  /* On small screens the select already takes space; keep toggle but slightly smaller */
  .category-tools select{ min-width: 170px; }
  .view-toggle .view-btn{ width: 40px; }
}

/* =========================
   LOGIN POPUP (overlay)
   ========================= */
.overlay{
  position:fixed;
  inset:0;
  /* Softer overlay: less "heavy" while still separating the modal */
  background: rgba(0,0,0,.38);
  backdrop-filter: none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding: 18px;
}
.popup{
  width:min(720px, 96vw);
  border:1px solid var(--line);
  border-radius: 20px;
  background:#0f0f12;
  color:var(--text);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.popup-head{
  padding:16px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.popup-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.popup-foot{
  padding:16px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}


/* ===== Card image thumb ===== */
.thumb{ position: relative; overflow:hidden; }
.thumb-img{
  position:absolute;
  /* keep images fully inside the frame */
  inset:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  object-fit:contain;
  display:block;
  max-width:100%;
  max-height:100%;
}

/* Hover highlight (works everywhere: mouse hover + keyboard focus + existing JS .card-hover) */
.card{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover,
.card:focus-within,
.card.card-hover{
  border-color:#3a3a48;
  box-shadow: 0 16px 46px rgba(0,0,0,.45);
  transform: translateY(-2px);
}
.card:active{
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
  .card:hover,
  .card:focus-within,
  .card.card-hover,
  .card:active{ transform:none; }
}
/* ===== Wishlist heart button ===== */
.wish-btn{
  flex: 0 0 auto;
  width: 52px;
  min-width: 52px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.wish-btn:hover{
  background: rgba(255,255,255,.07);
  border-color:#3a3a48;
}
.heart-icon{
  width: 20px;
  height: 20px;
  display:block;
}
.heart-icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* On wishlist */
.wish-btn.is-wished{
  color: #90c2cc;
  border-color: rgba(144,194,204,.55);
}
.wish-btn.is-wished .heart-icon path{
  fill: currentColor;
  stroke: currentColor;
}

/* Click effect */
.wish-btn.wish-pop{ animation: wishPop .48s ease-out; }
@keyframes wishPop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.14); }
  100%{ transform: scale(1); }
}

/* Not logged in: tiny shake */
.wish-btn.wish-deny{ animation: wishDeny .38s ease; }
@keyframes wishDeny{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
}


/* ======= ACCOUNT POPUP ======= */
#accountPanel { margin-top: 6px; }
#loginForm[hidden] { display: none !important; }

.account-grid{
  display:grid;
  gap:14px;
}
@media (min-width: 760px){
  .account-grid{ grid-template-columns: 1fr 1fr; }
}

.account-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 14px;
}

.account-card-title{
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: .02em;
}

.account-divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}

.kv{
  margin:0;
  display:grid;
  gap:8px;
}
.kv > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.kv dt{
  color: var(--muted);
  font-size: .9rem;
}
.kv dd{
  margin:0;
  font-weight: 700;
}

.account-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.wish-mini-list{
  display:grid;
  gap:10px;
  margin-top: 10px;
}
.wish-mini{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}
.wish-mini img{
  width: 52px;
  height: 52px;
  object-fit: contain;
  background:#fff;
  border-radius: 12px;
  padding: 6px;
}
.wish-mini .meta{
  flex:1;
  min-width:0;
}
.wish-mini .title{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wish-mini .sub{
  color: var(--muted);
  font-size: .9rem;
}
.wish-mini .mini-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.wish-mini .mini-actions .btn{
  padding: 8px 10px;
  border-radius: 12px;
}


/* =========================
   PRODUCT DETAIL (product.html)
   ========================= */
/* Slightly wider helper container for hero/feature sections on desktop. */
.container-wide{ width: min(1560px, 96vw); margin: 0 auto; }

.breadcrumbs{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumbs a{ color: var(--muted); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--text); }
.breadcrumbs .sep{ opacity:.6; }

.pd-grid{
  display:grid;
  /* Balanced split: gallery left + larger, cleaner info column right */
  grid-template-columns: minmax(0, 740px) minmax(420px, 560px);
  gap: 34px;
  align-items:start;
  margin-top: 14px;
  /* Pull the right column a bit left by keeping the whole block slightly narrower */
  width: min(1320px, 96vw);
  margin-right: auto;
}

.pd-gallery{
  position:relative;
  display:grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(820px 520px at 22% 18%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(780px 560px at 78% 82%, rgba(255,255,255,.04), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.24));
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  overflow:hidden;
}

/* Decorative corners (rahmen.png). We only have the bottom-left corner in the asset,
   so we mirror/flip it for the other corners. */
.pd-frame-corner{
  position:absolute;
  width: 160px;
  height: 160px;
  background: url('/assets/ui/rahmen.png') no-repeat;
  background-size: contain;
  opacity: .55;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
  pointer-events:none;
  z-index: 0;
}
.pd-frame-corner.tl{ top: 10px; left: 10px; transform: scaleY(-1); }
.pd-frame-corner.tr{ top: 10px; right: 10px; transform: scale(-1,-1); }
.pd-frame-corner.bl{ bottom: 10px; left: 10px; transform: none; }
.pd-frame-corner.br{ bottom: 10px; right: 10px; transform: scaleX(-1); }

.pd-gallery::before,
.pd-gallery::after{
  content:"";
  display:none;
}



.pd-thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  position: relative;
  max-height: 560px;
  overflow:auto;
  padding-right: 6px;
  z-index: 1;
  scrollbar-width: none; /* Firefox */
}
.pd-thumbs::-webkit-scrollbar{ width:0; height:0; }
.pd-thumb{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pd-thumb:hover{ background: rgba(255,255,255,.06); border-color:#3a3a48; }
.pd-thumb:active{ transform: translateY(1px); }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb.active{ border-color: rgba(144,194,204,.65); box-shadow: 0 0 0 2px rgba(144,194,204,.18); }

.pd-zoom-wrap{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items:start;
}
.pd-zoom{
  /*
    IMPORTANT:
    The zoom pane was previously enabled on hover.
    That changed the layout (the main image shrank and everything jumped),
    which feels broken.
    We disable the hover-zoom pane by default.
  */
  display:none !important;
  border:1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  min-height: 520px;
}
/* Keep class for potential future use, but do not reflow the layout */
.pd-zoom-wrap.zoom-on{ grid-template-columns: minmax(0, 1fr); }
.pd-zoom-wrap.zoom-on .pd-zoom{ display:none !important; }

.pd-image{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(0,0,0,.18);
  overflow:hidden;
  position:relative;
  aspect-ratio: 4 / 5;
  --zx: 50%;
  --zy: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

.pd-main{ max-width: 620px; z-index: 1; }

.pd-image img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  transform: scale(1);
  transform-origin: var(--zx) var(--zy);
  transition: transform .14s ease;
  will-change: transform;
}

.pd-image.is-zoom img{
  transform: scale(1.8);
}
.pd-image.is-zoom{ cursor: zoom-in; }


/* Arrows over main image */
.pd-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  line-height: 1;
  backdrop-filter: blur(6px);
}
.pd-arrow:hover{ background: rgba(0,0,0,.52); border-color: rgba(255,255,255,.22); }
.pd-prev{ left: 12px; }
.pd-next{ right: 12px; }

/* Zoom lens */
.pd-lens{
  position:absolute;
  top:0;
  left:0;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  pointer-events:none;
  display:none;
  width: 150px;
  height: 150px;
  z-index: 2;
  background-repeat: no-repeat;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.pd-loupe-btn{
  position:absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  backdrop-filter: blur(6px);
  z-index: 3;
}
.pd-loupe-btn:hover{ background: rgba(0,0,0,.52); border-color: rgba(255,255,255,.22); }
.pd-loupe-btn[aria-pressed="true"]{ box-shadow: 0 0 0 2px rgba(144,194,204,.20); border-color: rgba(144,194,204,.65); }

.pd-img-fav-btn{
  position:absolute;
  left: 12px;
  top: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  backdrop-filter: blur(6px);
  z-index: 3;
}
.pd-img-fav-btn:hover{ background: rgba(0,0,0,.52); border-color: rgba(255,255,255,.22); }
.pd-img-fav-btn[aria-pressed="true"]{ box-shadow: 0 0 0 2px rgba(255,160,90,.18); border-color: rgba(255,180,120,.55); }

.pd-image[role="button"]{ cursor: zoom-in; }
.pd-image[role="button"]:focus-visible{ outline: 2px solid rgba(144,194,204,.55); outline-offset: 4px; }

/* ===== Lightbox (open/large image view) ===== */
body.pd-lightbox-open{ overflow:hidden; }

.pd-lightbox{
  position:fixed;
  inset:0;
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.pd-lightbox[hidden]{ display:none; }

.pd-lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
}

.pd-lightbox__dialog{
  position:relative;
  width: min(1020px, 96vw);
  max-height: 92vh;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(820px 520px at 22% 18%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(780px 560px at 78% 82%, rgba(255,255,255,.04), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.32));
  box-shadow: 0 26px 90px rgba(0,0,0,.62);
  overflow:hidden;
}

.pd-lightbox__close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  backdrop-filter: blur(6px);
  z-index: 5;
}
.pd-lightbox__close:hover{ background: rgba(0,0,0,.52); border-color: rgba(255,255,255,.22); }

.pd-lightbox__frame{
  position:relative;
  padding: 18px;
}

.pd-lightbox .pd-frame-corner{
  width: 210px;
  height: 210px;
  opacity: .72;
  z-index: 4;
}

.pd-lightbox__image{
  width: 100%;
  height: min(78vh, 760px);
  aspect-ratio: auto;
  background: rgba(0,0,0,.22);
  z-index: 2;
}

/* Info column */
.pd-info{
  min-width: 0;
  justify-self: end;
  padding: 18px 18px 16px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(680px 380px at 18% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(520px 360px at 86% 90%, rgba(144,194,204,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.34));
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  position:relative;
}

.pd-info h1{
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: .2px;
}

.pd-info .desc{ white-space: pre-wrap; color: rgba(255,255,255,.88); }

.pd-info-top{ display:flex; flex-direction:column; gap: 14px; }

.pd-info .totals{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding: 12px 12px;
}

.pd-info .totals .row{ display:flex; justify-content:space-between; gap: 12px; padding: 6px 2px; }
.pd-info .totals .row strong{ font-size: 18px; }

.pd-info .ship-note{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
}

.pd-fields{ padding-top: 2px; }

.pd-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.pd-actions .btn{ padding: 12px 14px; border-radius: 16px; }
.pd-actions .btn.primary{ padding: 13px 14px; font-weight: 700; }

/* Recommendations (basic horizontal track) */
.rec-carousel{ position:relative; margin-top: 12px; }
.rec-track{
  display:flex;
  gap: 14px;
  overflow:auto;
  padding: 6px 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rec-track > .card{ min-width: 260px; scroll-snap-align: start; }
.rec-nav{
  position:absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.rec-nav:hover{ background: rgba(0,0,0,.52); border-color: rgba(255,255,255,.22); }
#recPrev{ left:-10px; }
#recNext{ right:-10px; }
.rec-nav:disabled{ opacity:.35; cursor:not-allowed; }

/* Responsive */
@media (max-width: 980px){
  .pd-grid{ grid-template-columns: 1fr; justify-content: stretch; width: min(96vw, 920px); }
  .pd-gallery{ grid-template-columns: 56px minmax(0, 1fr); }
  .pd-info{ grid-column: auto; }
  .pd-thumbs{ max-height: 520px; }
}

@media (max-width: 700px){
  .pd-gallery{ grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .pd-thumbs{ position: static; flex-direction: row; overflow:auto; padding-right:0; padding-bottom: 4px; max-height: none; }
  .pd-thumb{ width: 48px; height: 48px; }
  .pd-image{ aspect-ratio: 1 / 1; }
  .pd-main{ max-width: none; }
}



/* Zoom pane disabled (Hover-Zoom is in-place) */
.pd-zoom{ display:none !important; }


/* ==============================
   XAMPP Auth / Account UI
   ============================== */

/* Header Account Dropdown */
.account-wrap{ position:relative; display:inline-block; }
.account-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 240px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
}
[data-theme="light"] .account-menu{
  background: rgba(255,255,255,.78);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
}
.account-menu-head{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
[data-theme="light"] .account-menu-head{
  border-bottom-color: rgba(0,0,0,.10);
}

.account-name{ font-weight: 800; margin-top: 2px; }
.menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border-radius: 12px;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.menu-item:hover{ background: rgba(255,255,255,.06); }
.menu-item.danger{ color: #ff6b6b; }

/* Auth pages */
.auth{ padding: 28px 0; }
.auth-card{
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 22px;
}
.stack{ display:grid; gap: 14px; }
.small{ font-size: .9rem; }
.summary.ok{ color: #7CFF7C; }
.summary.error{ color: #FF8A8A; }
.sep{ border:0; border-top: 1px solid rgba(255,255,255,.12); margin: 18px 0; }

/* =========================
   Generic layout utilities
   (used across pages)
   ========================= */
.row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 12px;
}
.row > *{ min-width: 0; }
.gap{ gap: 14px; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: .92em;
}

/* =========================
   Tables
   ========================= */
.table-wrap{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: auto;
  background: rgba(255,255,255,.02);
}
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th,
.table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  vertical-align: top;
}
.table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(12,12,14,.92);
  backdrop-filter: blur(8px);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.table tbody tr:nth-child(even) td{ background: rgba(255,255,255,.02); }
.table tbody tr:hover td{ background: rgba(255,255,255,.04); }
.table tbody tr:last-child td{ border-bottom: 0; }

[data-theme="light"] .table-wrap{ background: rgba(255,255,255,.72); }
[data-theme="light"] .table th,
[data-theme="light"] .table td{ border-bottom-color: rgba(0,0,0,.10); }
[data-theme="light"] .table thead th{ background: rgba(255,255,255,.92); }
[data-theme="light"] .table tbody tr:nth-child(even) td{ background: rgba(0,0,0,.02); }
[data-theme="light"] .table tbody tr:hover td{ background: rgba(0,0,0,.04); }

/* =========================
   Admin pages
   ========================= */
.admin-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-toolbar{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}
.admin-actions{
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.admin-stats{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stat-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}
.stat-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.stat-value{
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 6px;
}
.stats-panels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat-panel{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

[data-theme="light"] .stat-card,
[data-theme="light"] .stat-panel{
  background: rgba(255,255,255,.70);
  border-color: rgba(0,0,0,.10);
}

@media (max-width: 900px){
  .stats-grid{ grid-template-columns: 1fr; }
  .stats-panels{ grid-template-columns: 1fr; }
}


@media (max-width: 720px){
  .admin-toolbar{ grid-template-columns: 1fr; }
  .admin-actions{ justify-content: stretch; }
  .admin-actions .btn{ flex: 1; }
}

/* Account page */
.account-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px){
  .account-grid-2{ grid-template-columns: 1fr; }
}
.card-panel{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
}

/* Orders */
.orders{ margin-top: 22px; }
.orders-list{ display:grid; gap: 14px; }
.order-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
}
.order-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.order-title{ font-weight: 900; }
.order-status{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
  white-space: nowrap;
}
.order-items{ margin-top: 12px; display:grid; gap: 10px; }
.order-item{ display:flex; justify-content:space-between; gap: 12px; }
.order-item-title{ font-weight: 700; }
.order-total{ margin-top: 10px; display:flex; justify-content:space-between; align-items:center; }


/* ===== Cards (media / sub row) ===== */
.card-media{
  height:190px;
  background:
    radial-gradient(500px 200px at 30% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-sub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}


/* =========================
   SHOP SETTINGS (account + preferences)
   ========================= */
:root{
  --grid-gap: 14px;
  --card-span: 3; /* 12/4 = 3 -> 4 per row */
}

/* Image fit preference */
body.img-cover .thumb-img{
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
body.img-cover .thumb{
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

/* Account settings layout */
.settings-shell{
  display:grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 860px){
  .settings-shell{ grid-template-columns: 1fr; }
}

.side-nav{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 10px;
  position: sticky;
  top: 110px;
  height: fit-content;
}
.side-nav button{
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 750;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.side-nav button:hover{ background: rgba(255,255,255,.06); }
.side-nav button[aria-current="page"]{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
.side-nav .hint{ color: var(--muted); font-size:12px; padding: 8px 12px; }

.panel{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 18px;
}
.panel h2{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: .02em;
  text-transform:none;
}
.panel .muted{ margin-top: 2px; }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.form-grid .field{ min-width: 0; }
@media (max-width: 620px){
  .form-grid{ grid-template-columns: 1fr; }
}

.inline-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.addr-list{ display:grid; gap: 12px; margin-top: 14px; }
.addr-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 14px;
  display:flex;
  justify-content:space-between;
  gap: 14px;
}
.addr-meta{ min-width:0; }
.addr-title{ font-weight: 900; }
.addr-lines{ color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.45; }
.addr-badges{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 8px; }
.addr-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-weight: 750;
}
.addr-actions{ display:flex; gap: 8px; align-items:flex-start; flex-wrap:wrap; }

/* ===== Checkout page ===== */
.checkout{ padding-bottom: 28px; }
.checkout-head{ margin: 6px 0 16px; }
.checkout-head h1{ margin: 0; }
.checkout-empty{ padding: 20px 0 8px; }
.checkout-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 920px){
  .checkout-grid{ grid-template-columns: 1fr; }
}

.checkout-items{ display: grid; gap: 12px; margin-top: 12px; }
.checkout-item{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
}
.checkout-item-title{ font-weight: 900; }
.checkout-item-meta{ font-size: 13px; margin-top: 2px; }
.checkout-item-right{ display:flex; align-items:center; gap: 12px; }
.checkout-item-price{ font-weight: 900; white-space:nowrap; }

.checkout-coupon{ display:flex; gap: 10px; align-items:flex-end; flex-wrap:wrap; margin-top: 14px; }

/* Versand-Auswahl (Checkout) */
.shipping-choose{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding: 12px;
}
.shipping-choose-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.shipping-options{ display:grid; gap: 8px; }

.ship-option{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.ship-option:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); transform: translateY(-1px); }
.ship-option input{ width:auto; margin: 0 2px 0 2px; }
.ship-main{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.ship-name{ font-weight: 900; line-height: 1.1; }
.ship-sub{ font-size: 12px; }
.ship-price{ margin-left:auto; font-weight: 900; white-space:nowrap; }

.ship-option.is-disabled{
  opacity: .55;
  cursor:not-allowed;
}
.ship-option.is-disabled:hover{ transform:none; background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.10); }

.ship-info{
  margin-left: 8px;
  width: 18px; height: 18px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  position: relative;
  flex: 0 0 auto;
}
.ship-info::after{
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  max-width: 240px;
  white-space: normal;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,15,18,.98);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 5;
}
.ship-info:hover::after,
.ship-info:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}


.switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 16px;
}
.switch strong{ font-weight: 850; }
.switch small{ color: var(--muted); display:block; margin-top: 2px; }
.switch input{ width:auto; }

.note{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.note.note-error{
  border-style: solid;
  border-color: rgba(255,99,99,.30);
  background: rgba(255,99,99,.06);
  color: #FFB3B3;
}

.note.note-success{
  border-style: solid;
  border-color: rgba(74, 222, 128, .28);
  background: rgba(74, 222, 128, .08);
  color: rgba(209, 250, 229, .95);
}


/* -----------------------------
   Profile
------------------------------*/
.profile-page{ padding: 20px 0 50px; }

.profile-hero{ padding: 18px; }
.profile-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.profile-hero-main{ display:flex; gap:14px; align-items:center; min-width: 260px; }
.profile-hero-text{ flex:1; min-width: 220px; }
.profile-title{ margin:0; letter-spacing: -.01em; }
.profile-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.profile-pill{
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.profile-pill.is-on{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}

.profile-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.profile-hero-notes{ margin-top: 12px; display:grid; gap: 10px; }

.profile-wishlist{ margin-top: 16px; }
.profile-wishlist-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; margin-bottom: 6px; }
.profile-section-title{ margin:0; }

.profile-wishlist-tools{ margin-top: 12px; display:grid; gap: 10px; }
.profile-tools-row{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; justify-content: space-between; }
.profile-tools-row--chips{ align-items:center; }
.profile-search{ flex: 1 1 240px; min-width: 220px; }
.profile-sort{ flex: 0 0 auto; }
.profile-tools-meta{ margin-left: auto; }

/* small pill-like buttons (used for filters) */
.chip-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
  font-weight: 750;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.chip-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); }
.chip-btn:active{ transform: translateY(0px); }
.chip-btn[aria-pressed="true"], .chip-btn.is-active{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
  font-weight: 900;
}
.chip-btn--ghost{ background: transparent; border-style: dashed; color: var(--muted); }
.chip-btn--ghost:hover{ color: rgba(255,255,255,.92); border-style: solid; }

.thumb-link{ position:absolute; inset:0; display:block; }
.product-variant{ font-size: 13px; margin-top: 2px; }


/* -----------------------------
   Home (Landing) – Kategorien
------------------------------*/
.home{ padding: 22px 0 60px; }

.home-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
  margin: 8px 0 18px;
}
@media (max-width: 900px){
  .home-hero{ grid-template-columns: 1fr; }
}

.home-hero-copy{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: calc(var(--radius) + 6px);
  padding: 22px;
  box-shadow: var(--shadow);
}
.home-title{ margin:0 0 8px; font-size: clamp(28px, 3.2vw, 44px); letter-spacing:-.02em; }
.home-sub{ margin: 0 0 16px; color: var(--muted); line-height: 1.5; max-width: 52ch; }
.home-cta{ display:flex; gap:10px; flex-wrap: wrap; }

.home-hero-art{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(800px 420px at 30% 20%, rgba(144,194,204,.18), transparent 55%),
              radial-gradient(700px 420px at 80% 80%, rgba(29,92,105,.18), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height: 210px;
}


/* Mascot watermark (Antantaru) – subtle, keeps B/W via grayscale */
.home-hero-art::before{
  content:"";
  position:absolute;
  inset:-18px;
  pointer-events:none;
  background-image: url("../assets/stock/Antantaru.webp");
  background-repeat: no-repeat;
  background-position: 88% 46%;
  background-size: min(560px, 70%);
  opacity: .10;
  filter: grayscale(1) contrast(1.05) blur(.2px);
  mix-blend-mode: screen;
  z-index: 0;
}
.home-art-card{
  position:absolute; inset: 0;
  z-index: 1;
}
.home-art-glow{
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(144,194,204,.18), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(29,92,105,.16), transparent 55%);
  filter: blur(14px);
  opacity:.9;
}
.home-art-lines{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 26px 26px;
  opacity:.12;
  mask-image: radial-gradient(circle at 40% 30%, #000 0%, transparent 62%);
}

/* Messevorschau card inside home hero art */
.fair-card{
  position:absolute;
  inset: 14px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

[data-theme="light"] .fair-card{
  background: rgba(255,255,255,.38);
}

.fair-head{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.fair-title{ margin:0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.fair-note{ margin:0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.fair-list{
  list-style:none;
  margin: 2px 0 0;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.fair-item{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 10px 12px;
}

.fair-item-row{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; }
/* Datum soll exakt wie der Messe-Name wirken (Größe + Fett), aber weiterhin dezent gefärbt */
.fair-date{ font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.fair-main{ font-size: 14px; font-weight: 700; }
.fair-link{ color: inherit; text-decoration: none; }
.fair-link:hover{ text-decoration: underline; }
/* Home v2 (Hero + 5-Kategorien + Hot Stuff) */

.home-hero-left{ /* same vibe as previous home-hero-copy */
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: calc(var(--radius) + 6px);
  padding: 22px;
  box-shadow: var(--shadow);
}

.home-hero-left h1{ margin:0 0 8px; font-size: clamp(28px, 3.2vw, 44px); letter-spacing:-.02em; }
.home-hero-actions{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 14px; }

.home-hero-right{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(800px 420px at 30% 20%, rgba(144,194,204,.18), transparent 55%),
              radial-gradient(700px 420px at 80% 80%, rgba(29,92,105,.18), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height: 210px;
}

.home-hero-right::before{
  content:"";
  position:absolute;
  inset:-18px;
  pointer-events:none;
  background-image: url("../assets/stock/Antantaru.webp");
  background-repeat: no-repeat;
  background-position: 88% 46%;
  background-size: min(560px, 70%);
  opacity: .10;
  filter: grayscale(1) contrast(1.05) blur(.2px);
  mix-blend-mode: screen;
  z-index: 0;
}

/* fair card now sits *inside* the right hero column */
.fair-card{
  position:relative;
  inset:auto;
  margin: 14px;
  z-index: 1;
}

/* Fair header left group */
.fair-head-left{ display:flex; align-items:center; gap:10px; }

.pill-link{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
}
.pill-link:hover{ background: rgba(255,255,255,.06); }

.home-cats{
  display:grid;
  gap: 14px;
  margin: 0 0 18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 760px){
  .home-cats{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .home-cats{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

.cat-card-photo{
  position:relative;
  overflow:hidden;
  min-height: 104px;
}

.cat-card-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--cat-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  filter: grayscale(1) contrast(1.1) brightness(.75);
  opacity: .95;
}

.cat-card-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
}

.cat-card-photo .cat-card-content{
  position:relative;
  z-index:1;
  min-height: 104px;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cat-card-photo h3{ margin:0; font-size: 14px; }
.cat-card-photo p{ margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.home-feature{ margin: 0 0 30px; }

.cat-card-hot{
  display:flex;
  align-items: center;
  gap: 14px;
}

.hot-thumb-wrap{
  width: 86px;
  height: 86px;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  flex: 0 0 auto;
}

.hot-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

@media (max-width: 560px){
  .cat-card-hot{ flex-direction: column; align-items: flex-start; }
  .hot-thumb-wrap{ width: 100%; height: 140px; }
}


.home-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (min-width: 1200px){
  /* Use the extra horizontal space on typical 16:9 desktop screens */
  .home-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px){
  .home-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Big CTA unter den Kategorien auf der Startseite */


/* -----------------------------
   Home (Landing) – Sales Sections
------------------------------*/
.home-features{ margin-top: 22px; }
.home-features-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.home-features h2{ margin:0; font-size: 18px; letter-spacing: -.01em; }
.home-features p{ margin: 4px 0 0; max-width: 70ch; color: var(--muted); line-height: 1.55; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 960px){ .feature-grid{ grid-template-columns: 1fr; } }

.feature-card{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.feature-card:hover{
  transform: translateY(-1px);
  border-color: rgba(159,233,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.feature-kicker{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(159,233,255,.80);
}
.feature-title{ margin: 8px 0 6px; font-size: 15px; letter-spacing: -.01em; }
.feature-text{ margin:0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Small manga-panel corner notch */
.feature-card::after{
  content:"";
  position:absolute;
  right:-10px; top:-10px;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  transform: rotate(12deg);
  background: rgba(0,0,0,.10);
  opacity: .55;
}

.home-steps{
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
  overflow:hidden;
}
.home-steps::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 420px at 12% 20%, rgba(159,233,255,.10), transparent 60%),
    radial-gradient(800px 420px at 86% 70%, rgba(255,255,255,.05), transparent 62%);
  opacity: .9;
}
.steps-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 960px){ .steps-grid{ grid-template-columns: 1fr; } }
.step{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(0,0,0,.14);
  padding: 12px 12px 10px;
  position: relative;
  z-index: 1;
}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color:#000;
  font-weight: 900;
  font-size: 12px;
}
.step h3{ margin: 10px 0 6px; font-size: 14px; }
.step p{ margin:0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.home-highlight{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 960px){ .home-highlight{ grid-template-columns: 1fr; } }

.highlight-card{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
  overflow:hidden;
}
.highlight-card::before{
  content:"";
  position:absolute;
  inset:-10px;
  pointer-events:none;
  background-image: url("../assets/stock/Chumana.webp");
  background-repeat:no-repeat;
  background-position: 90% 55%;
  background-size: min(520px, 78%);
  opacity: .10;
  filter: grayscale(1) contrast(1.05) blur(.2px);
  mix-blend-mode: screen;
}
.highlight-card.plain::before{ display:none; }
.highlight-card > *{ position: relative; z-index: 1; }
.highlight-card h3{ margin:0 0 8px; font-size: 16px; }
.highlight-card p{ margin:0; color: var(--muted); line-height: 1.55; }
.highlight-actions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }
.home-bottom-cta{
  margin: 22px 0 42px;
  display:flex;
  justify-content: center;
}

.btn-xl{
  width: min(760px, 100%);
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 18px 22px;
  font-size: 18px;
  border-radius: calc(var(--radius) + 12px);
}

@media (max-width: 520px){
  .btn-xl{ font-size: 17px; padding: 16px 18px; }
}

@media (max-width: 560px){
  .home-grid{ grid-template-columns: 1fr; }
}

.cat-card{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.18);
}
.cat-card:active{ transform: translateY(0px); }

.cat-media{
  width: 78px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: transparent; /* no fixed background */
  border: 1px solid rgba(255,255,255,.08);
}
.cat-img{
  width: 100%;
  height: 100%;
  padding: 10px;
  color: rgba(255,255,255,.85);
}
.cat-meta{ min-width: 0; }
.cat-title{ font-weight: 700; letter-spacing: -.01em; }
.cat-sub{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.cat-card-wide{
  grid-column: span 3;
}
@media (max-width: 900px){
  .cat-card-wide{ grid-column: span 2; }
}
@media (max-width: 560px){
  .cat-card-wide{ grid-column: span 1; }
}

/* PD ACTIONS: dock CTA block in the empty bottom area of the right panel (desktop) */
@media (min-width: 980px){
  .pd-grid{ align-items: stretch; }
  .pd-info{
    display:flex;
    flex-direction: column;
    min-height: 0;
  }
  .pd-info-top{ flex: 1 1 auto; }
  .pd-actions{
    margin-top: auto;
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0,0,0,.28);
  }
  html[data-theme="light"] .pd-actions{
    background: rgba(255,255,255,.60);
    border-color: rgba(0,0,0,.10);
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
  }
}

/* Mobile/tablet: keep actions in normal flow (no forced bottom gap) */
@media (max-width: 979px){
  .pd-actions{
    margin-top: 14px;
  }
}


html[data-theme="light"] .badge--new{
  color: rgba(10,10,12,.92);
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,212,255,.16));
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  text-shadow:none;
}


/* CARD OVERLAY WISHLIST BUTTON
   - small round heart button pinned bottom-right of product thumb
*/
.card .thumb .card-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}
.card .thumb .card-overlay .wish-btn--overlay{
  pointer-events:auto;
  position:absolute;
  right:10px;
  bottom:10px;
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.card .thumb .card-overlay .wish-btn--overlay:hover{
  transform: translateY(-1px);
  border-color: rgba(124,92,255,.30);
  background: rgba(0,0,0,.28);
}
.card .thumb .card-overlay .wish-btn--overlay svg{
  width:18px;
  height:18px;
}
.card .thumb .card-overlay .wish-btn--overlay.is-wished{
  border-color: rgba(124,92,255,.38);
  background: rgba(124,92,255,.18);
}

html[data-theme="light"] .card .thumb .card-overlay .wish-btn--overlay{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}
html[data-theme="light"] .card .thumb .card-overlay .wish-btn--overlay:hover{
  border-color: rgba(124,92,255,.28);
}

/* END CARD OVERLAY WISHLIST BUTTON */


/* CARD META: desc + customize */
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;}
.card-meta .desc{flex:1;min-width:0;}
.customize-tag{flex:0 0 auto;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;}
.customize-tag:hover,
.customize-tag:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(124,92,255,.36);
  background: rgba(124,92,255,.14);
  box-shadow: 0 12px 26px rgba(124,92,255,.10);
  color: rgba(255,255,255,.92);
}
html[data-theme="light"] .customize-tag{border-color: rgba(0,0,0,.12);background: rgba(0,0,0,.04);color: rgba(0,0,0,.74);}

/* Product page option buttons (used for Buttons sizes, and can be reused elsewhere) */
.opt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.opt-btn:hover{ background: rgba(255,255,255,.07); border-color:#3a3a48; }
.opt-btn:active{ transform: translateY(1px); }
.opt-btn[aria-checked="true"]{
  border-color: rgba(124,92,255,.42);
  background: rgba(124,92,255,.16);
  box-shadow: 0 14px 36px rgba(124,92,255,.10);
}

/* Circle sizing for button products (32mm / 58mm) */
.opt-btn.opt-btn--circle{
  /* Unified, clean selector button (same outer size for all options) */
  justify-content: flex-start;
  padding: 10px 14px;
  border-radius: 16px;
  min-width: 170px;
  line-height: 1.1;
}
.opt-btn.opt-btn--circle .opt-btn__dot{
  width: var(--dot, 18px);
  height: var(--dot, 18px);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
  flex: 0 0 auto;
}
.opt-btn.opt-btn--circle[aria-checked="true"] .opt-btn__dot{
  border-color: rgba(124,92,255,.72);
  background: rgba(124,92,255,.22);
  box-shadow: 0 0 0 6px rgba(124,92,255,.10), inset 0 0 0 2px rgba(0,0,0,.18);
}
.opt-btn.opt-btn--circle .opt-btn__stack{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.opt-btn.opt-btn--circle .opt-btn__label{
  font-size: 13px;
  font-weight: 800;
  opacity: .96;
}
.opt-btn.opt-btn--circle .opt-btn__sub{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.ship-note{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

/* Toasts (bottom-right notifications) */
.toast-root{
  position: fixed;
  /* Keep notifications clear of other fixed UI (e.g. Ani-Buddies dock). */
  right: calc(18px + var(--toast-safe-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom) + var(--toast-safe-bottom, 0px));
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
  max-width: min(360px, 92vw);
}
.toast{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,12,14,.78);
  color: var(--text);
  border-radius: 16px;
  padding: 10px 10px 10px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .20s ease, opacity .20s ease;
}
.toast.is-in{ transform: translateY(0); opacity: 1; }
.toast__msg{ font-size: 13px; line-height: 1.25; padding: 2px 0; }
.toast__actions{ display:flex; align-items:center; gap: 8px; flex: 0 0 auto; }
.toast__btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
}
.toast__btn:hover{ background: rgba(255,255,255,.10); border-color:#3a3a48; }
.toast__close{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  cursor:pointer;
}
.toast__close:hover{ color: rgba(255,255,255,.95); }
.toast--success{ border-color: rgba(124,92,255,.30); }
.toast--error{ border-color: rgba(255,99,99,.30); }
.toast--info{ border-color: rgba(144,194,204,.30); }


/* ===== Reviews ===== */
.reviews-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:14px; }
@media (max-width: 900px){ .reviews-grid{ grid-template-columns: 1fr; } }

.reviews-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.reviews-summary{ display:flex; flex-direction:column; gap:10px; }
.reviews-avg{ display:flex; flex-direction:column; gap:6px; }
.reviews-avg-num{ font-size: 34px; font-weight: 800; line-height: 1; }
.reviews-stars{ font-size: 18px; letter-spacing: 1px; }

.reviews-form{ display:grid; gap:12px; margin-top:12px; }
.reviews-form-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.reviews-form-actions .btn{ min-width: 140px; }

.reviews-list{ display:grid; gap:12px; margin-top:10px; }
.review-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 12px;
}
.review-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
.review-left{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

/* Small avatar icon in review/comments (image version) */
.review-avatar-img{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  flex: 0 0 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.review-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:13px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 34px;
}
.review-user{ font-weight:800; }
.review-stars{ letter-spacing: 1px; opacity:.95; }
.review-date{ font-size: 12px; white-space:nowrap; }
.review-text{ margin-top:8px; white-space:pre-wrap; color: rgba(255,255,255,.88); }

/* Star ratings — Yu-Gi-Oh "Star Chip" look using your provided PNG.
   We avoid font stars entirely (no weird anti-aliasing). */
.stars{
  --star-size: 18px;
  --star-gap: 2px;
  display:inline-flex;
  gap: var(--star-gap);
  line-height: 1;
  vertical-align: middle;
}

.star{
  width: var(--star-size);
  height: var(--star-size);
  display:inline-block;
  background: url("/assets/ui/star-chip.png") center/contain no-repeat;
  /* make the row look optically centered */
  transform: translateY(1px);
}

/* Full = original chip */
.star--full{ opacity: 1; }

/* Empty = clean "outline-ish" look by desaturating + darkening.
   Still clearly a star chip, but unmistakably "not filled". */
.star--empty{
  opacity: .28;
  filter: grayscale(1) brightness(.85) contrast(1.05);
}



.reviews-list-head"{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }


/* ===== Avatars ===== */
.avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.avatar-circle{
  width:32px;
  height:32px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.avatar-circle-lg{ width:72px; height:72px; }
.header-user{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.header-user .header-username{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-btn-inner{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.account-btn-inner .avatar-circle{ width:26px; height:26px; box-shadow:none; }
.header-account-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
}
.header-balance{
  font-size:11px;
  opacity:.75;
  margin-top:2px;
  white-space:nowrap;
}
.account-menu-head{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Account profile avatar block */
.avatar-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:14px 0 10px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
}
.avatar-preview-wrap{ display:flex; align-items:center; gap:14px; }
.avatar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.small{ font-size: 12px; }

/* ===== Crop modal ===== */
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.modal[hidden]{ display:none !important; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
}
.modal-card{
  position:relative;
  width:min(520px, calc(100vw - 32px));
  margin: 10vh auto 0;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,20,24,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  padding: 14px;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 4px 4px 10px;
}
.modal-title{ font-weight:700; }
.crop-shell{
  padding: 6px 4px 2px;
}
.crop-canvas{
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  display:block;
  margin: 0 auto;
  touch-action: none;
}
.crop-hint{ text-align:center; margin: 10px 0 10px; }
.crop-controls{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  margin-bottom: 8px;
}
.crop-controls input[type="range"]{ width: 240px; }
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top: 8px;
}

.avatar-initials{display:flex;align-items:center;justify-content:center;color:var(--text);font-weight:700;font-size:12px;letter-spacing:.04em;}

/* ======= Left sidebar ======= */
.layout {
  display: block;
}

.layout-content {
  min-width: 0;
}

/* Toggle button (in header if possible; fixed fallback) */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  margin-right: 10px;
}

/* Slightly larger icon just for the toggle button */
.sidebar-toggle .side-ic {
  width: 22px;
  height: 22px;
}

.sidebar-toggle:hover {
  background: rgba(255,255,255,0.04);
}

.sidebar-toggle.is-floating {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 1201;
}

/* Overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: 1200;
}

/* Off-canvas shell */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(360px, 92vw);
  padding: 18px 16px 16px;
  z-index: 1202;
  transform: translateX(-105%);
  transition: transform .22s ease;
  background: rgba(12, 12, 13, 0.92);
  border-right: 1px solid rgba(255,255,255,0.08);
}

body.sidebar-open .sidebar {
  transform: translateX(0);
}

body.sidebar-open {
  overflow: hidden;
}

/* Content inside sidebar */
.side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.side-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.side-close:hover {
  background: rgba(255,255,255,0.06);
}

.side-profile {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}

.side-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.14);
  background: #0c0c0d;
}

.side-name {
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.1;
}

.side-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.side-section {
  margin-top: 16px;
}

.side-title {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 8px;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  text-decoration: none;
}

.side-link:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

.side-link.is-active {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}

.side-ic {
  width: 18px;
  height: 18px;
  opacity: .92;
  flex: 0 0 auto;
}

.side-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.side-btn:hover {
  background: rgba(255,255,255,0.07);
}

.side-btn--ghost {
  background: transparent;
}

.side-btn--danger {
  border-color: rgba(255, 90, 90, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}



/* --- Header micro-spacing polish (burger + cart badge) --- */
.site-header .sidebar-toggle{
  /* keep full-width header, but avoid "stuck to edge" look */
  margin-left: 10px;
}

.site-header #openCartBtn{
  position: relative;
}

/* Count badge sits INSIDE the cart button instead of hugging the outer edge */
.site-header #openCartBtn #cartCount{
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
  border-radius: 999px;
}



/* === Friends & Chat === */

.chat-dock{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chat-dock:hover{ transform: translateY(-1px); }
.chat-dock-icon{ font-size: 22px; line-height: 1; }
.chat-dock-badge{
  position:absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 7px;
  background: #fff;
  color:#000;
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.2);
}

.chat-page{ padding: 22px 0 40px; }
.chat-shell{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .chat-shell{ grid-template-columns: 1fr; }
}

.chat-sidebar, .chat-main{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 14px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

/* Slightly more "premium" glass treatment on the chat page only */
.page-friends .chat-sidebar, .page-friends .chat-main{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chat-sidebar-head{ padding: 16px 16px 10px; }
.chat-title h1{ margin:0; font-size: 20px; letter-spacing: -0.01em; }
.chat-title p{ margin: 4px 0 0; }

.friend-add{
  display:flex;
  gap: 10px;
  padding: 0 16px 14px;
}
.friend-add .input{ flex:1; }

.friend-requests{ padding: 0 16px 8px; }
.rq-block{ margin: 10px 0; }
.rq-title{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 8px; }
.rq-row{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  border-radius: 14px;
  margin-bottom: 8px;
}
.rq-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.friend-list{
  padding: 0 10px 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow:auto;
}

/* Friend row with remove button */
.friend-row{
  display:flex;
  gap: 8px;
  align-items: stretch;
}
.friend-row .friend-item{ flex: 1; }
.friend-row .friend-remove{
  flex: 0 0 auto;
  width: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.friend-row .friend-chat{
  flex: 0 0 auto;
  width: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.friend-row .friend-chat:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.friend-row .friend-remove:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.friend-row.active .friend-item{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.friend-item{
  width: 100%;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.friend-item:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

/* Discover */
.discover-box{ padding: 0 16px 14px; }
.discover-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 10px;
}
.discover-title{ font-weight: 800; }
.discover-list{ display:flex; flex-direction: column; gap: 8px; }
.discover-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
}
.discover-meta{ flex:1; min-width:0; }
.discover-name{ font-weight: 700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.discover-sub{ font-size: 12px; margin-top: 2px; }

/* Groups (chat sidebar) */
.group-box{ padding: 0 16px 14px; }
.group-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 10px;
}
.group-title{ font-weight: 800; }
.group-invites,
.group-list{ display:flex; flex-direction: column; gap: 8px; }
.group-invites{ margin-bottom: 10px; }

.group-card{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  cursor: pointer;
}
.group-card:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.group-card.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); }

.group-meta{ flex:1; min-width:0; }
.group-name{ font-weight: 700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-sub{ font-size: 12px; margin-top: 2px; }

.member-avatars{
  display:flex;
  align-items:center;
  gap: 6px;
  flex: 0 0 auto;
}
.member-avatars img{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  object-fit: cover;
  display:block;
  background: rgba(255,255,255,.06);
}

/* Empty hints inside sidebar lists (invites/groups/discover) */
.chat-sidebar .empty{ padding: 6px 2px; }

.avatar{
  width: 32px; height: 32px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  flex: 0 0 auto;
}
.avatar img{ width:100%; height:100%; object-fit: cover; display:block; }
.avatar-lg{ width: 42px; height: 42px; }

.chat-avatar{
  width: 34px;
  height: 34px;
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.chat-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }
.chat-msg{ display:flex; gap: 10px; align-items: flex-end; width: 100%; }
/* Align avatar with the first bubble of a message block (Discord-like) */
.chat-msg.block-start{ align-items: flex-start; }
.chat-msg.block-start .chat-avatar{ margin-top: 2px; }
.chat-msg.mine{ justify-content: flex-end; }
.chat-stack{ display:flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }

/* Keep both sides in the same visual language: the stack aligns its children,
   but bubbles stay sized to their content (no full-width stretching). */
.chat-msg.mine .chat-stack{ align-items: flex-end; }
.chat-msg.theirs .chat-stack{ align-items: flex-start; }

/* Bubble base (was missing in the last patch -> messages looked like plain text) */
.chat-bubble{
  position: relative;
  max-width: min(74%, 560px);
  padding: 9px 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--ab-bubble-theirs-border);
  background: var(--ab-bubble-theirs-bg);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chat-msg.mine .chat-bubble{
  border-color: var(--ab-bubble-mine-border);
  background: var(--ab-bubble-mine-bg);
}

.chat-text{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

.chat-meta{
  font-size: 11px;
  line-height: 1;
  opacity: .72;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}
.chat-msg.mine .chat-meta{ justify-content: flex-end; }
.chat-msg.theirs .chat-meta{ justify-content: flex-start; }

.chat-react-host{ margin-top: 2px; }
.chat-msg.mine .chat-react-host{ justify-content: flex-end; }
.chat-msg.theirs .chat-react-host{ justify-content: flex-start; }

.chat-reactions{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  flex-wrap: wrap;
  padding: 2px 6px 0;
}
.react-chip{
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10.5px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  cursor:pointer;
  user-select:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.react-chip:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.react-chip.me{ border-color: rgba(220,170,255,.26); background: rgba(186,114,255,.12); }

/* Inline reaction + button (Discord-ish) */
.react-add{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.react-add:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); }

.react-add.inline{
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 11px;
  border-color: rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(2px) scale(.96);
  pointer-events: none;
}

/* Desktop: show reaction button only on hover (Discord-like) */
.chat-bubble:hover .react-add.inline,
.chat-bubble:focus-within .react-add.inline{
  opacity: .90;
  transform: none;
  pointer-events: auto;
}
.react-add.inline:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }

/* Mobile: reactions via long-press → hide the + button */
@media (pointer: coarse){
  .react-add.inline{ display: none; }
}

/* Friend list click rules */
.friend-avatar-link{ display:flex; }
.friend-name-btn{
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-item{ cursor: pointer; }
.friend-item:focus{ outline: 2px solid rgba(186,114,255,.35); outline-offset: 2px; }

.peer-name{ cursor: pointer; }
#peerAvatar{ cursor: pointer; }

/* Popover (Discord-like) */
.ab-popover{
  position: fixed;
  z-index: 2000;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,18,22,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px;
}
.ab-popover::after{
  content:"";
  position:absolute;
  width: 10px; height: 10px;
  background: rgba(18,18,22,.92);
  border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: rotate(45deg);
  bottom: -6px;
  left: 18px;
}
.ab-pop-grid{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  width: max-content;
  max-width: calc(100vw - 24px);
}

.ab-popover.below::after{
  top: -6px;
  bottom: auto;
  transform: rotate(225deg);
}
.ab-pop-emo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.ab-pop-emo:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }

/* Proper modal styling (used for settings/profile) */
.ab-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 1500;
}
.ab-modal{
  width: min(720px, 100%);
  max-height: min(82vh, 860px);
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(16,16,20,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ab-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 26px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ab-modal-title{ font-weight: 800; }
.ab-modal-body{
  padding: 14px;
  overflow:auto;
}

.friend-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chat-main-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
}
.chat-peer{ display:flex; align-items:center; gap: 12px; min-width:0; }
.peer-name{ font-weight: 800; }
.peer-sub{ font-size: 12px; margin-top: 2px; }

.chat-main{
  /* Defaults for per-chat wallpaper + theme (set by JS) */
  --ab-wallpaper: none;
  --ab-wallpaper-size: 26px 26px;

  /* Anime-ish ambient glow */
  --ab-bg-glow-1: rgba(186,114,255,.14);
  --ab-bg-glow-2: rgba(255,105,180,.08);

  /* Bubble palette */
  --ab-bubble-theirs-bg: rgba(255,255,255,.045);
  --ab-bubble-theirs-border: rgba(255,255,255,.09);
  --ab-bubble-mine-bg: linear-gradient(135deg, rgba(186,114,255,.22), rgba(255,105,180,.12));
  --ab-bubble-mine-border: rgba(220,170,255,.22);
}

/* Theme variants (used by chat_page.js) */
.chat-main.theme-rose{
  --ab-bg-glow-1: rgba(186,114,255,.16);
  --ab-bg-glow-2: rgba(255,105,180,.10);
}
.chat-main.theme-midnight{
  --ab-bg-glow-1: rgba(86,180,255,.14);
  --ab-bg-glow-2: rgba(140,90,255,.08);
  --ab-bubble-mine-bg: linear-gradient(135deg, rgba(86,180,255,.22), rgba(140,90,255,.16));
  --ab-bubble-mine-border: rgba(160,190,255,.26);
}
.chat-main.theme-neon{
  --ab-bg-glow-1: rgba(0,255,200,.12);
  --ab-bg-glow-2: rgba(255,0,180,.08);
  --ab-bubble-mine-bg: linear-gradient(135deg, rgba(0,255,200,.18), rgba(255,0,180,.14));
  --ab-bubble-mine-border: rgba(140,255,220,.24);
}
.chat-main.theme-mono{
  --ab-bg-glow-1: rgba(255,255,255,.08);
  --ab-bg-glow-2: rgba(255,255,255,.05);
  --ab-bubble-mine-bg: rgba(255,255,255,.07);
  --ab-bubble-mine-border: rgba(255,255,255,.14);
}

.chat-log{
  padding: 18px 28px;
  height: 520px;
  overflow:auto;
  display:flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  background-image: var(--ab-wallpaper);
  background-size: var(--ab-wallpaper-size);
  background-repeat: repeat;
  background-position: center;
}

/* Ambient overlay above wallpaper but below messages */
.chat-log::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* No harsh "cut" banding: only soft radial ambience */
  background:
    radial-gradient(900px 520px at 18% 12%, var(--ab-bg-glow-1), transparent 60%),
    radial-gradient(900px 520px at 86% 8%, var(--ab-bg-glow-2), transparent 62%),
    radial-gradient(1200px 760px at 50% 78%, rgba(255,255,255,.025), transparent 62%);
  opacity: .92;
}
.chat-log::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Vignette + soft film grain (avoid obvious horizontal edges) */
  background:
    radial-gradient(1200px 720px at 50% 42%, rgba(0,0,0,0) 52%, rgba(0,0,0,.44) 100%),
    repeating-linear-gradient(17deg, rgba(255,255,255,.028) 0, rgba(255,255,255,.028) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 18px),
    repeating-linear-gradient(-23deg, rgba(0,0,0,.085) 0, rgba(0,0,0,.085) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 22px);
  opacity: .50;
  mix-blend-mode: overlay;
}
.chat-log > *{ position: relative; z-index: 1; }

/* Day separator badge */
.chat-day{
  align-self: center;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 8px 0 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

@media (max-width: 760px){
  .chat-log{ padding: 16px 18px; }
}

/* Emoji picker */
.chat-compose{ position: relative; display:flex; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.chat-compose .input{ flex: 1; }
.emoji-panel{
  position:absolute;
  left: 10px;
  bottom: calc(100% + 10px);
  width: 214px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(26,26,30,.92), rgba(14,14,18,.88));
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  display:none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 30;
  transform-origin: 24px 100%;

}
.emoji-panel.open{ display:block; animation: abPop .12s ease-out; }
@keyframes abPop{ from{ transform: translateY(6px) scale(.98); opacity: 0; } to{ transform: translateY(0) scale(1); opacity: 1; } }

.emoji-panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.emoji-panel-title{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 12px;
  opacity: .9;
}
.emoji-close{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  cursor:pointer;
  padding: 0;
  line-height: 1;
  font-size: 18px;
}
.emoji-close:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }

/* Emoji panel: tabs + search (used by friends/chat) */
.emoji-tabs{
  display:flex;
  gap: 6px;
  padding: 6px 2px 0;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.emoji-tabs::-webkit-scrollbar{ display:none; }

.emoji-tab{
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 800;
  cursor:pointer;
  white-space: nowrap;
}
.emoji-tab:hover{ background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.16); }
.emoji-tab.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.96); }

.emoji-search{ margin-bottom: 8px; }
.emoji-search .emoji-search-input{
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
}

.emoji-recents{
  display:flex;
  gap: 6px;
  align-items:center;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  margin-bottom: 8px;
  overflow-x: auto;
}
.emoji-recents::-webkit-scrollbar{ height: 6px; }
.emoji-recents::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }
.emoji-recents-empty{ font-size: 11px; padding: 2px 2px; opacity: .75; white-space: nowrap; }

.emoji-grid{
  display:flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  max-height: 220px;
  overflow:auto;
  padding-right: 4px;

}
.emoji-grid::-webkit-scrollbar{ width: 8px; }
.emoji-grid::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

.emoji-empty{
  width: 100%;
  text-align: center;
  padding: 14px 8px;
  font-size: 12px;
  opacity: .85;
}

.emoji-panel .emoji{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  font-size: 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;

}
/* Text/Kaomoji chips (Discord-ish) */
.emoji-panel .emoji.chip{
  width: auto;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .01em;
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.10);
  white-space: nowrap;
}
.emoji-panel .emoji.recent{
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 10px;
}
/* Recent text emotes should stay compact */
.emoji-panel .emoji.recent.chip{
  width: auto;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
}


.emoji-panel .emoji:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }
@media (max-width: 980px){
  .chat-log{ height: 420px; }
}

.chat-compose{
  display:flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
}
.chat-compose .input{ flex:1; }

.btn.small{ padding: 8px 10px; border-radius: 12px; font-size: 13px; }

/* ============================
   Anime-Buddies Dock (Freunde/Chat)
   ============================ */

/*
  Facebook-style docked chat window:
  - minimized: only a small header/tab is visible
  - expanded: window grows upwards
*/
.buddy-dock{
  position: fixed;
  right: 24px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 24px - 24px);
}

.buddy-dock-window{
  width: 100%;
  height: 520px;
  max-height: calc(100vh - 24px - env(safe-area-inset-bottom));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 18px 60px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: bottom right;
  transition: height .18s ease, transform .18s ease;
}

.buddy-dock.minimized .buddy-dock-window{
  height: 52px;
}

/* ============================
   Mobile: Floating Cart Button
   (Desktop keeps the normal header cart)
   ============================ */

.cart-fab{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9998;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.60);
  box-shadow: 0 18px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.95);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cart-fab:active{ transform: translateY(1px); }

.cart-fab-icon{ font-size: 20px; line-height: 1; }

.cart-fab-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,.10);
}

@media (max-width: 520px){
  .cart-fab{ display: inline-flex; }
}

.buddy-dock-head{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  user-select: none;
  background: rgba(0,0,0,.18);
}

.buddy-dock-title{ display:flex; align-items:center; gap: 10px; min-width: 0; }

.buddy-dock-icon{ display:inline-flex; width: 22px; height: 22px; }
.buddy-dock-icon svg{ width:100%; height:100%; }

.buddy-dock-title-text{ min-width: 0; display:flex; flex-direction: column; }
.buddy-dock-h{ font-weight: 900; letter-spacing: .01em; line-height: 1.05; }
.buddy-dock-sub{ font-size: 12px; opacity: .70; margin-top: 1px; line-height: 1.05; }

.buddy-dock-controls{ display:flex; align-items:center; gap: 6px; flex: 0 0 auto; }
.buddy-dock-ctrl{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
}
.buddy-dock-ctrl:hover{ background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.95); }

.buddy-dock-badge{
  position: absolute;
  right: 12px;
  top: 44px;
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  pointer-events: none;
}

.buddy-dock-body{ display:block; }
.buddy-dock.minimized .buddy-dock-body{ display:none; }

.buddy-dock-section{ padding: 10px 14px; }
.buddy-dock-section-title{ font-size: 12px; opacity: .75; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }

.buddy-dock-list{ display:flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; padding-right: 2px; }

.buddy-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: inherit;
  text-decoration: none;
}

.buddy-row:hover{ border-color: rgba(255,255,255,.14); background: rgba(0,0,0,.35); }

.buddy-row .avatar{ width: 28px; height: 28px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); flex: 0 0 auto; }
.buddy-row .avatar img{ width:100%; height:100%; object-fit: cover; display:block; }

.buddy-meta{ min-width: 0; display:flex; flex-direction: column; gap: 2px; }
.buddy-name{ font-weight: 800; font-size: 13px; }
.buddy-last{ font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

.buddy-unread{
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}

.buddy-dock-actions{
  padding: 12px 14px 14px;
  display:flex;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.buddy-dock-actions .btn{ flex: 1; justify-content: center; }

/* Keep it from colliding with the cart-fab on small screens */
@media (max-width: 520px){
  .buddy-dock{ left: 12px; right: 12px; width: auto; }
  .buddy-dock-window{ height: min(72vh, 560px); }
  .buddy-dock.minimized .buddy-dock-window{ height: 54px; }
}

@media (max-width: 520px){
  .cart-fab{ display: inline-flex; }
}



/* Danger / destructive actions */
.btn.btn-danger{
  border-color: rgba(255, 80, 80, .55);
  background: rgba(255, 80, 80, .10);
}
.btn.btn-danger:hover{
  background: rgba(255, 80, 80, .16);
  border-color: rgba(255, 80, 80, .75);
}
.note.note-danger{
  border: 1px solid rgba(255, 80, 80, .35);
  background: rgba(255, 80, 80, .07);
}


/* ------------------------------------------------------------
   Conventions (Kalender)
   Ziel: Etwas heller/übersichtlicher, aber im BLACK/WHITE-Look.
------------------------------------------------------------ */

body.page-conventions{
  --bg: #15151b;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.14);
  --stroke-2: rgba(255,255,255,.22);
}

body.page-conventions .site-header{ background: rgba(18,18,22,.72); }
body.page-conventions .sidebar{ background: rgba(18,18,22,.88); }
body.page-conventions .card{ background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045)); }

.bw-wrap{ overflow: hidden; }
.bw-sub{ max-width: 75ch; }

.bw-cal{
  padding: 14px 16px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.bw-cal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bw-cal-title{
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: capitalize;
}

.bw-cal-actions{ display:flex; gap: 8px; align-items:center; }

.bw-week{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 8px 0 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.bw-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.bw-day{
  position: relative;
  min-height: 92px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: var(--text);
  padding: 10px 10px;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.bw-day:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.bw-day:focus-visible{ outline: 2px solid rgba(255,255,255,.24); outline-offset: 2px; }

.bw-day--empty{
  border: 1px dashed rgba(255,255,255,.08);
  background: transparent;
  cursor: default;
}

.bw-day-num{ font-weight: 750; font-size: 14px; }


.bw-day-events{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.bw-chip{
  display:inline-flex;
  align-items:center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bw-chip-demo{ pointer-events:none; }

.bw-chip--att{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
  font-weight: 700;
}

.bw-day-more{
  font-size: 11px;
  color: var(--muted);
}

.bw-day.has{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.bw-day.has-att{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }

.bw-day.today{
  box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset;
}

.bw-day.selected{
  box-shadow: 0 0 0 2px rgba(255,255,255,.20) inset;
}

.bw-day-dots{ position:absolute; right: 10px; bottom: 10px; display:flex; gap: 6px; }

.bw-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}

.bw-dot-att{ background: rgba(255,255,255,.92); }

.bw-legend{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.bw-list{
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.bw-list-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bw-list-controls{ flex-wrap: wrap; }

.bw-items{ display:flex; flex-direction: column; gap: 10px; }

.bw-item{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.bw-item.is-att{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }

.bw-item-top{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bw-item-name{ margin: 0; font-size: 16px; letter-spacing: .2px; }

.bw-item-tags{ display:flex; gap: 8px; flex-wrap: wrap; }

.bw-tag{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.bw-tag-att{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}

.bw-item-meta{ display:flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.bw-item-actions{ display:flex; gap: 8px; flex-wrap: wrap; align-items:center; justify-content: flex-end; min-width: 180px; }

.bw-empty{
  padding: 14px 12px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

.bw-admin{
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.bw-admin-head{ margin-bottom: 12px; }

.bw-form .input{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.bw-form .input:focus{ border-color: rgba(255,255,255,.30); box-shadow: 0 0 0 3px rgba(255,255,255,.10); }

.chk{ display:flex; align-items:center; gap: 10px; color: rgba(255,255,255,.92); font-weight: 700; }
.chk input{ width: 18px; height: 18px; accent-color: #fff; }

.admin-stats{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stat-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}
.stat-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.stat-value{
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 6px;
}
.stats-panels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat-panel{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

[data-theme="light"] .stat-card,
[data-theme="light"] .stat-panel{
  background: rgba(255,255,255,.70);
  border-color: rgba(0,0,0,.10);
}

@media (max-width: 900px){
  .stats-grid{ grid-template-columns: 1fr; }
  .stats-panels{ grid-template-columns: 1fr; }
}


@media (max-width: 720px){
  .bw-cal-actions .btn{ padding: 10px 12px; }
  .bw-item{ flex-direction: column; }
  .bw-item-actions{ width: 100%; justify-content: flex-start; }
}


/* PayPal Checkout */
.paypal-buttons{
  margin-top: 6px;
}
.paypal-buttons > div{
  width: 100%;
}


/* =========================
   Mobile polish (adds only)
   - Desktop stays unchanged
   ========================= */

@media (max-width: 720px){
  /* Slightly tighter rhythm on small screens */
  :root{ --grid-gap: 12px; }

  /* Header: logo stays *truly centered* on phones (menu left, actions right) */
  .site-header .header-row{
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    gap: 10px !important;
    min-height: 76px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .site-header .header-left{
    justify-self: start !important;
    min-width: 0 !important;
  }
  .site-header .header-center{
    justify-self: center !important;
    justify-content: center !important;
  }
  .site-header .header-right{
    justify-self: end !important;
    min-width: 0 !important;
  }
  .site-header .brand-link{ margin: 0 auto !important; }
  .site-header .brand-logo{
    height: 52px !important;
    max-width: 56vw !important;
  }

  /* Category/filter bar: stack controls nicely */
  .category-row{
    padding: 10px 10px;
    gap: 10px;
  }
  .category-tools{
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .category-tools select{
    flex: 1 1 220px;
    min-width: 0;
  }

  /* Cards: slightly smaller padding so more content fits */
  .card-body{ padding: 14px; }
  .btn{ padding: 12px 14px; }
}

/*
  Fix: Some Android/iPad browsers may render native <select> controls much taller than intended
  when they live inside flex/wrap toolbars. Clamp the height on touch devices so the sort
  dropdown always matches the 44px control row. Desktop remains unchanged.
*/
@media (hover: none) and (pointer: coarse){
  .category-tools select{
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    font-size: 16px; /* prevents mobile form zoom + keeps consistent metrics */
  }
}

@media (max-width: 480px){
  /* Extra-small phones */
  .site-header .header-row{
    min-height: 72px !important;
    gap: 8px !important;
  }
  .site-header .brand-logo{
    height: 46px !important;
    max-width: 60vw !important;
  }
  .site-header .nav .btn,
  .site-header .nav .icon-btn{
    height: 44px !important;
  }
  .category-row{
    border-radius: 16px;
  }
  /* List view: keep it compact */
  #productGrid.products-list .card-body{ padding: 14px; }
}


/* Lead time / Lieferzeit (colored pill) */
.leadtime{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.15;
  width: fit-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.leadtime::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}
.leadtime--in{ border-color: rgba(46, 204, 113, .38); }
.leadtime--in::before{ background: #2ecc71; }
.leadtime--backorder{ border-color: rgba(243, 156, 18, .42); }
.leadtime--backorder::before{ background: #f39c12; }
.leadtime--out{ border-color: rgba(231, 76, 60, .46); }
.leadtime--out::before{ background: #e74c3c; }
.leadtime--unknown{ opacity: .75; }
.field--error select, .field--error .opt-btn{outline:2px solid currentColor; outline-offset:2px;}

.chat-avatar.ghost{ opacity: 0; }

/* Chat compose sizing */
.chat-compose .input{
  min-height: 44px;
  padding: 0 14px;
}
.chat-compose .icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}
