:root{
  color-scheme: dark;

  --bg:#0b0f17;
  --surface:rgba(255,255,255,0.06);
  --surface2:rgba(255,255,255,0.10);
  --border:rgba(255,255,255,0.10);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.68);

  --brand:#ff4d00;
  --brand2:#ff9a3d;

  --shadow:0 18px 50px rgba(0,0,0,0.45);
  --radius:16px;
  --container:1860px;
  --gap:16px;

  --focus:0 0 0 4px rgba(255,77,0,0.25);

  --smalltext:rgba(255,255,255,0.80);
}

/* light theme variables */
html[data-theme="light"]{
  color-scheme: light;

  --bg:#f6f7fb;
  --surface:rgba(10,14,22,0.04);
  --surface2:rgba(10,14,22,0.07);
  --border:rgba(10,14,22,0.10);
  --text:rgba(10,14,22,0.92);
  --muted:rgba(10,14,22,0.62);

  --shadow:0 18px 50px rgba(10,14,22,0.12);
  --focus:0 0 0 4px rgba(255,77,0,0.22);

  --smalltext:rgba(10,14,22,0.72);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1700px 980px at 12% -8%, rgba(255,77,0,0.24), transparent 66%),
    radial-gradient(1300px 820px at 88% -2%, rgba(255,154,61,0.18), transparent 62%),
    radial-gradient(1650px 1050px at 92% 12%, rgba(84,146,255,0.16), transparent 64%),
    radial-gradient(1400px 960px at 50% 118%, rgba(116,241,255,0.08), transparent 64%),
    var(--bg);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:min(var(--container), calc(100% - 16px));
  margin:0 auto;
}

/* components */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:700;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  cursor:pointer;
}
.btn:hover{
  transform:translateY(-1px);
  background:var(--surface2);
  border-color:color-mix(in oklab, var(--border), var(--text) 12%);
}
.btn:focus{ outline:none; box-shadow:var(--focus); }

.btn-primary{
  border:0;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#120b05;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--surface), transparent 20%);
  color:var(--text);
}
.pill strong,
.pill b{
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  font-size:12px;
}
.pill small,
.pill .sub,
.pill .d,
.pill span{
  display:block;
  margin-top:2px;
  font-weight:500;
  font-size:12px;
  color:var(--smalltext);
}

.card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}

/* topbar always near black, independent of theme */
.topbar{
  position:relative;
  background:rgba(6,8,12,0.96);
  border-bottom:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(16px);
  z-index:90;
}
.topbar:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,77,0,0.35), rgba(255,154,61,0.25), transparent);
  pointer-events:none;
}

/* desktop: one line layout */
.topbar .row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:14px;
  padding:5px 0;
}
.topbar .left,
.topbar .trust-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  min-width:0;
  overflow:hidden;
}
.topbar .right,
.topbar .trust-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  white-space:nowrap;
  position:relative;
  z-index:95;
}

/* trust items */
.trust-item{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:12px;
  padding:5px 11px;
  min-height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 6px 16px rgba(0,0,0,0.16);
  flex:0 1 320px;
  min-width:220px;
  max-width:360px;
}
.trust-item:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(420px 160px at 10% 10%, rgba(255,255,255,0.10), transparent 60%);
  opacity:0.85;
  pointer-events:none;
}
.trust-ico{
  width:27px;
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.22);
}
.trust-text{ line-height:1.05; min-width:0; }
.trust-title{
  font-weight:850;
  letter-spacing:0.24px;
  text-transform:uppercase;
  font-size:10px;
  color:rgba(255,255,255,0.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trust-sub{
  margin-top:1px;
  font-weight:500;
  font-size:9.5px;
  color:rgba(255,255,255,0.66);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* trust gradients */
.trust-ship{
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(41,211,154,0.18), transparent 62%),
    linear-gradient(135deg, rgba(41,211,154,0.12), rgba(255,255,255,0.04));
  border-color:rgba(41,211,154,0.38);
}
.trust-ship .trust-ico{ color:#29d39a; border-color:rgba(41,211,154,0.38); background:rgba(41,211,154,0.12); }

.trust-refund{
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,77,0,0.18), transparent 62%),
    linear-gradient(135deg, rgba(255,77,0,0.12), rgba(255,255,255,0.04));
  border-color:rgba(255,77,0,0.42);
}
.trust-refund .trust-ico{ color:#ff4d00; border-color:rgba(255,77,0,0.45); background:rgba(255,77,0,0.12); }

.trust-days{
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,204,102,0.16), transparent 62%),
    linear-gradient(135deg, rgba(255,204,102,0.10), rgba(255,255,255,0.04));
  border-color:rgba(255,204,102,0.34);
}
.trust-days .trust-ico{ color:#ffcc66; border-color:rgba(255,204,102,0.45); background:rgba(255,204,102,0.12); }

/* topbar actions and selects */
.trust-link,
.topbar a.trust-link,
.topbar button.trust-link,
.topbar .theme-toggle-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,0.04), transparent 60%),
    rgba(255,255,255,0.035);
  color:rgba(255,255,255,0.78);
  font-weight:600;
  font-size:10.5px;
  line-height:1;
  box-shadow:0 5px 14px rgba(0,0,0,0.14);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.trust-link.has-badge,
.topbar a.trust-link.has-badge,
.topbar button.trust-link.has-badge{
  position:relative;
  overflow:visible;
}
.trust-link-muted,
.topbar a.trust-link-muted,
.topbar button.trust-link-muted{
  opacity:0.86;
  padding-left:11px;
  padding-right:11px;
}
.trust-link-muted:hover{
  opacity:1;
}
.trust-link:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.18);
  background:
    radial-gradient(240px 120px at 20% 20%, rgba(255,255,255,0.05), transparent 62%),
    rgba(255,255,255,0.05);
  box-shadow:0 7px 18px rgba(0,0,0,0.18);
}
.trust-link:focus{ outline:none; box-shadow:var(--focus), 0 14px 32px rgba(0,0,0,0.35); }

/* buyer seller: unified but spicy */
.topbar .trust-link.login-btn{
  border-color:rgba(255,255,255,0.22);
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(255,154,61,0.16), transparent 62%),
    rgba(255,255,255,0.05);
}
.topbar .trust-link.login-btn:hover{
  border-color:rgba(255,154,61,0.55);
}

/* theme: unique ring */
.topbar .theme-toggle-top{
  position:relative;
  border-color:rgba(255,154,61,0.28);
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(255,77,0,0.08), transparent 62%),
    rgba(255,255,255,0.04);
}
.topbar .theme-toggle-top:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background:conic-gradient(from 180deg,
    rgba(255,77,0,0.95),
    rgba(255,154,61,0.85),
    rgba(116,241,255,0.45),
    rgba(255,77,0,0.95)
  );
  opacity:0.12;
  filter:blur(6px);
  pointer-events:none;
}
.topbar .theme-toggle-top > *{ position:relative; z-index:1; }

/* selects: currency and language identical + readable options */
.trust-lang,
.trust-currency{
  position:relative;
  display:flex;
  align-items:center;
  z-index:110;
}
.topbar .select{
  -webkit-appearance:none;
  appearance:none;
  min-width:104px;
  padding:8px 32px 8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(260px 140px at 20% 20%, rgba(116,241,255,0.10), transparent 62%),
    rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.92);
  font-weight:620;
  font-size:10.5px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 14px 32px rgba(0,0,0,0.35);
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.topbar .select:hover{
  transform:translateY(-1px);
  border-color:rgba(255,77,0,0.45);
  background:
    radial-gradient(240px 120px at 20% 20%, rgba(255,77,0,0.12), transparent 62%),
    rgba(255,255,255,0.06);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}
.topbar .select:focus{
  outline:none;
  box-shadow:var(--focus), 0 14px 32px rgba(0,0,0,0.35);
  border-color:rgba(255,77,0,0.55);
}
.topbar .select option{
  background:#0b0f17;
  color:rgba(255,255,255,0.92);
}
html[data-theme="light"] .topbar .select option{
  background:#0b0f17;
  color:rgba(255,255,255,0.92);
}

/* arrow */
.trust-lang:after,
.trust-currency:after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:9px;
  height:9px;
  transform:translateY(-55%) rotate(45deg);
  border-right:2px solid rgba(255,255,255,0.85);
  border-bottom:2px solid rgba(255,255,255,0.85);
  pointer-events:none;
  opacity:0.9;
}
.topbar .trust-lang:after{
  display:none;
}

/* mobile: allow wrap cleanly */
@media (max-width:980px){
  .topbar .row{ grid-template-columns:1fr; align-items:flex-start; }
  .topbar .left,
  .topbar .trust-left{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    overflow:visible;
  }
  .topbar .right,
  .topbar .trust-right{ flex-wrap:wrap; justify-content:flex-start; white-space:normal; }
  .topbar .trust-left .trust-item{
    flex:none;
    min-width:0;
    max-width:none;
    width:100%;
  }
}

/* header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,15,23,0.86), rgba(11,15,23,0.72));
  box-shadow: 0 18px 60px rgba(0,0,0,0.22);
}
html[data-theme="light"] .header{
  background: linear-gradient(180deg, rgba(18,20,24,0.97), rgba(42,45,51,0.94));
  box-shadow: 0 10px 26px rgba(10,14,22,0.10);
  border-bottom-color: rgba(52,56,64,0.14);
}
html[data-theme="light"] .search{
  background: rgba(236,239,243,0.92);
  border-color: rgba(28,32,40,0.12);
  box-shadow: 0 8px 20px rgba(10,14,22,0.08);
}
html[data-theme="light"] .search:focus-within{
  background: rgba(242,244,247,0.96);
  border-color: rgba(28,32,40,0.18);
  box-shadow:
    0 0 0 3px rgba(255,122,0,0.14),
    0 12px 32px rgba(10,14,22,0.08);
}
html[data-theme="light"] .search input{
  color:#313742;
}
html[data-theme="light"] .search input::placeholder{
  color:rgba(49,55,66,0.70);
}
html[data-theme="light"] .header-actions .select{
  background: rgba(244,246,248,0.96);
  border-color: rgba(28,32,40,0.14);
  box-shadow: 0 8px 20px rgba(10,14,22,0.08);
}
.header .row{
  display:grid;
  grid-template-columns:320px 1fr auto;
  align-items:center;
  gap:var(--gap);
  padding:8px 0 10px;
}

/* brand: larger, no mascot */
.brand{
  display:flex;
  align-items:center;
  gap:0;
  text-decoration:none;
}
.brand > span{
  min-width:0;
  flex:1 1 auto;
}
.brand-textblock{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr);
  grid-template-rows:auto auto;
  column-gap:13px;
  row-gap:3px;
  align-items:center;
}
.brand-name{
  font-weight:880;
  letter-spacing:0.08px;
  font-size:20px;
  color:#172033;
  line-height:1;
}
.brand-flag{
  grid-column:1;
  grid-row:1 / span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  min-height:100%;
  align-self:stretch;
}
.brand-flag svg{
  display:block;
  width:34px;
  height:25.5px;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}
.brand-wordmark{
  grid-column:2;
  grid-row:1;
  display:block;
  background: linear-gradient(135deg, #f7fbff 0%, #bfdcff 36%, #ffb36b 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  white-space:nowrap;
}
.brand-sub{
  grid-column:2;
  grid-row:2;
  font-size:12.5px;
  color:rgba(206,220,242,0.82);
  font-weight:650;
  letter-spacing:0.03em;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-theme="light"] .brand-name{
  color:rgba(255,255,255,0.96);
  text-shadow:none;
}
html[data-theme="light"] .brand-sub{
  color:rgba(206,220,242,0.82);
  text-shadow:none;
}
html[data-theme="light"] .brand-wordmark{
  background: linear-gradient(135deg, #f7fbff 0%, #bfdcff 36%, #ffb36b 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: none;
}
html[data-theme="light"] .navlink{
  background: rgba(255,255,255,0.68);
  border-color: rgba(255,122,24,0.30);
  box-shadow:
    0 0 0 1px rgba(255,122,24,0.06),
    0 5px 12px rgba(10,14,22,0.04);
}
html[data-theme="light"] .navlink:hover{
  background: rgba(255,255,255,0.84);
  border-color: rgba(255,122,24,0.42);
  box-shadow:
    0 0 0 1px rgba(255,122,24,0.12),
    0 7px 16px rgba(10,14,22,0.06);
}

html[data-theme="dark"] .brand-name{
  color:rgba(255,255,255,0.96);
}
html[data-theme="dark"] .brand-wordmark{
  background: linear-gradient(135deg, #f7fbff 0%, #bfdcff 36%, #ffb36b 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
html[data-theme="dark"] .brand-sub{
  color:rgba(206,220,242,0.82);
}

/* search: a touch more focus glow on the whole shell */
.search{
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(180deg, rgba(19,24,34,0.96), rgba(13,17,25,0.94));
  padding:5px 7px 5px 8px;
  box-shadow:0 14px 32px rgba(0,0,0,0.22);
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.search:focus-within{
  border-color:rgba(255,122,0,0.48);
  box-shadow:
    var(--focus),
    0 18px 52px rgba(255,77,0,0.18);
  background:
    linear-gradient(180deg, rgba(23,28,39,0.98), rgba(16,20,29,0.96));
}
.search input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color:rgba(255,255,255,0.96);
  font-size:14px;
  font-weight:600;
  padding:0 8px 0 10px;
  min-width:0;
  flex:1 1 auto;
  height:42px;
}
.search input::placeholder{
  color:rgba(196,206,224,0.62);
  font-weight:500;
}
.search .select{
  border:0;
  outline:none;
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.96);
  box-shadow:none;
  min-width:198px;
  max-width:232px;
  flex:0 0 198px;
  height:42px;
  padding:0 40px 0 15px;
  font-size:13.5px;
  font-weight:680;
  border-radius:999px;
  border-right:1px solid rgba(255,255,255,0.07);
}
.search .select option{
  background:#10151d;
  color:rgba(255,255,255,0.96);
}
.search-cat-wrap{
  position:relative;
  flex:0 0 198px;
}
.search-cat-btn{
  width:100%;
  justify-content:flex-start;
  text-align:left;
  position:relative;
  cursor:pointer;
  padding-right:42px;
}
.search-cat-btn::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid rgba(255,255,255,0.92);
  border-bottom:2px solid rgba(255,255,255,0.92);
  transform:translateY(-60%) rotate(45deg);
  pointer-events:none;
}
.search-cat-label{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-right:0;
}
.search-cat-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:276px;
  max-height:420px;
  overflow:auto;
  z-index:99999;
  padding:5px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(12,16,23,0.995), rgba(8,11,17,0.99)) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.94) !important;
  box-shadow:0 28px 80px rgba(0,0,0,0.42) !important;
  backdrop-filter:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.26) transparent;
}
.search-cat-menu button[role="option"]{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:rgba(255,255,255,0.94);
  text-align:left;
  border-radius:12px;
  padding:8px 9px;
  font-size:12px;
  line-height:1.2;
  font-weight:650;
  cursor:pointer;
  transition:background .12s ease, transform .12s ease;
}
.search-cat-menu button[role="option"]:hover{
  background:rgba(255,255,255,0.06) !important;
}
.search-cat-menu button[role="option"].is-cur{
  background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.07)) !important;
  border:1px solid rgba(255,255,255,0.10);
}
.search-cat-menu::-webkit-scrollbar{
  width:8px;
}
.search-cat-menu::-webkit-scrollbar-track{
  background:transparent;
}
.search-cat-menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.24);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.search-cat-menu::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.34);
  background-clip:padding-box;
}
.search button{
  border:0;
  padding:0 20px;
  min-width:94px;
  height:42px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  box-shadow: 0 14px 30px rgba(255,77,0,0.20);
  white-space:nowrap;
}
.search button:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(255,77,0,0.28);
}
.search button:focus{ outline:none; box-shadow:var(--focus); }
.search-query{
  letter-spacing:0.01em;
}
.search-submit{
  align-self:stretch;
}

@media (max-width:1180px){
  .search-cat-wrap{
    flex-basis:200px;
  }
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

/* unify action heights */
.header-actions .select,
.header-actions .btn{
  height:40px;
  padding-top:0;
  padding-bottom:0;
  display:inline-flex;
  align-items:center;
}

/* cart: more depth + border weight */
.header-actions .select{
  background:
    linear-gradient(180deg, rgba(19,24,34,0.96), rgba(13,17,25,0.94));
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.96);
  box-shadow:0 7px 16px rgba(0,0,0,0.14);
}
.header-actions .btn.cart-btn{
  position:relative;
  background:
    linear-gradient(180deg, rgba(19,24,34,0.96), rgba(13,17,25,0.94));
  color:rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.14);
  border-width:1px;
  box-shadow: 0 7px 16px rgba(0,0,0,0.14);
  padding-left:14px;
  padding-right:16px;
  font-weight:760;
  min-height:40px;
}
.header-actions .btn.cart-btn:hover{
  background:
    linear-gradient(180deg, rgba(26,32,44,0.98), rgba(17,22,31,0.96));
  border-color: rgba(255,122,0,0.44);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

@media (max-width:980px){
  .header .row{ gap:12px; }
  .header-actions{ justify-content:flex-end; }
  .search{
    width:100%;
    min-width:0;
  }
  .search-cat-wrap{
    flex-basis:180px;
  }
}

@media (max-width:600px){
  .search .search-cat-wrap,
  .search-cat-wrap,
  .search .search-cat-btn,
  #catBtn{
    display:none !important;
  }
}

@media (max-width:1400px){
  .header .row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand actions"
      "search search";
    align-items:center;
    gap:10px 12px;
  }
  .brand{
    grid-area:brand;
    min-width:0;
  }
  .search{
    grid-area:search;
    width:100%;
    min-width:0;
  }
  .header-actions{
    grid-area:actions;
    justify-content:flex-end;
    align-self:center;
    flex-wrap:nowrap;
  }
  .header-actions .btn.cart-btn{
    min-height:38px;
    padding-left:12px;
    padding-right:14px;
    font-size:13px;
  }
}

@media (max-width:320px){
  #langBtn{
    min-width:112px;
    height:34px;
    padding:5px 14px 5px 8px !important;
    gap:6px !important;
  }

  .topbar #langBtn img{
    width:18px;
    height:13px;
  }

  .topbar #langBtn > div > div{
    font-size:9.5px;
  }

  .topbar #langBtn svg{
    width:12px;
    height:12px;
  }
}

/* language dropdown: premium */
#langMenu{
  background: linear-gradient(180deg, rgba(17,22,31,0.99), rgba(10,14,20,0.98)) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.94) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(14px);
  z-index:99999 !important;
  width:248px !important;
  padding:5px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.26) transparent;
}
#langMenu a[role="option"]{
  transition: background .12s ease, transform .12s ease;
  padding:8px 9px !important;
}
#langMenu a[role="option"]:hover{
  background: color-mix(in oklab, var(--surface2), transparent 20%) !important;
  transform: translateY(-1px);
}
#langMenu a[role="option"].is-cur{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04)) !important;
  border:1px solid rgba(255,255,255,0.08);
}
#langMenu img{
  width:22px;
  height:16px;
}
#langMenu a[role="option"] > div > div{
  font-size:12px;
  font-weight:650 !important;
  line-height:1.2;
}
#langBtn{
  color:rgba(255,255,255,0.96);
  min-width:auto;
  width:auto;
  height:34px;
  padding:4px 20px 4px 6px !important;
  gap:6px !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:10px;
}
#langBtn:hover{
  border-color:rgba(255,255,255,0.08) !important;
  background:rgba(255,255,255,0.04) !important;
  transform:none;
  box-shadow:none !important;
}
#langBtn:focus{
  outline:none;
  border-color:rgba(255,122,0,0.42) !important;
  background:rgba(255,255,255,0.04) !important;
  box-shadow:var(--focus) !important;
}
.topbar #langBtn img{
  width:20px;
  height:14px;
}
.topbar #langBtn > div > div{
  font-size:10.5px;
  font-weight:620;
}
.topbar #langBtn svg{
  width:13px;
  height:13px;
  margin-left:1px !important;
  opacity:.82 !important;
}
.topbar #langBtn > div{
  flex:0 1 auto !important;
  min-width:0;
}
#langMenu::-webkit-scrollbar{
  width:8px;
}
#langMenu::-webkit-scrollbar-track{
  background:transparent;
}
#langMenu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.24);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
#langMenu::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.34);
  background-clip:padding-box;
}

/* navbar */
.navbar{
  border-top:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(10,14,22,0.05);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.70),
    rgba(246,247,250,0.88)
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
html[data-theme="light"] .navbar{
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(246,247,250,0.92));
}
.navbar-track{
  position:relative;
}
.navbar .row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:13px 76px 15px 76px;
  overflow:auto;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.navbar .row::-webkit-scrollbar{ display:none; }
.navbar-track.has-overflow::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:76px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(246,247,250,0), rgba(246,247,250,0.96) 72%);
}
html[data-theme="dark"] .navbar-track.has-overflow::after{
  background:linear-gradient(90deg, rgba(6,8,12,0), rgba(6,8,12,0.96) 72%);
}
html[data-theme="light"] .navbar-track.has-overflow::after{
  background:linear-gradient(90deg, rgba(246,247,251,0), rgba(246,247,251,0.95) 72%);
}
.navbar-track.has-overflow-left::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:76px;
  pointer-events:none;
  background:linear-gradient(270deg, rgba(246,247,250,0), rgba(246,247,250,0.96) 72%);
  z-index:1;
}
html[data-theme="dark"] .navbar-track.has-overflow-left::before{
  background:linear-gradient(270deg, rgba(6,8,12,0), rgba(6,8,12,0.96) 72%);
}
html[data-theme="light"] .navbar-track.has-overflow-left::before{
  background:linear-gradient(270deg, rgba(246,247,251,0), rgba(246,247,251,0.95) 72%);
}
.navbar-more{
  position:absolute;
  top:50%;
  right:-8px;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in oklab, var(--border), var(--text) 12%);
  border-radius:999px;
  background:color-mix(in oklab, var(--bg), #fff 8%);
  color:var(--text);
  box-shadow:0 12px 28px rgba(0,0,0,0.24);
  cursor:pointer;
  z-index:2;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.navbar-more:hover{
  transform:translateY(calc(-50% - 1px));
  background:color-mix(in oklab, var(--surface2), transparent 4%);
  border-color:color-mix(in oklab, var(--brand), #fff 28%);
  box-shadow:0 16px 34px rgba(0,0,0,0.28);
}
.navbar-more:focus{
  outline:none;
  box-shadow:var(--focus), 0 12px 28px rgba(0,0,0,0.24);
}
.navbar-more svg{
  width:14px;
  height:14px;
}
.navbar-more-prev{
  left:-8px;
  right:auto;
}
.navbar-more.is-visible{
  display:inline-flex;
}
html[data-theme="dark"] .navbar-more{
  border:1px solid rgba(255,122,24,0.34);
  background:
    linear-gradient(180deg, rgba(18,24,34,0.96), rgba(10,14,20,0.94));
  color:rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 1px rgba(64,146,255,0.10),
    0 12px 28px rgba(0,0,0,0.34);
}
html[data-theme="dark"] .navbar-more:hover{
  background:
    linear-gradient(180deg, rgba(24,31,43,0.98), rgba(13,18,26,0.96));
  border-color:rgba(255,122,24,0.48);
  box-shadow:
    0 0 0 1px rgba(64,146,255,0.16),
    0 16px 34px rgba(0,0,0,0.38);
}
html[data-theme="dark"] .navbar-more:focus{
  box-shadow:
    var(--focus),
    0 0 0 1px rgba(64,146,255,0.16),
    0 12px 28px rgba(0,0,0,0.34);
}

.navlink{
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(255,122,24,0.32);
  background: rgba(255,255,255,0.42);
  color: rgba(39,46,59,0.80);
  font-weight:680;
  font-size:11.5px;
  white-space:nowrap;
  box-shadow:
    0 0 0 1px rgba(255,122,24,0.08),
    0 3px 10px rgba(15,20,30,0.04);
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
}
.navlink:hover{
  color:rgba(18,24,34,0.94);
  background:rgba(255,255,255,0.70);
  border-color: rgba(255,122,24,0.42);
  box-shadow:
    0 0 0 1px rgba(255,122,24,0.12),
    0 6px 14px rgba(15,20,30,0.06);
  transform: translateY(-1px);
}
.navbar .navlink::before{ content:none; }

/* nav icons */
.navbar .navico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: transparent !important;
  color: rgba(255,122,24,0.95);
  flex: 0 0 22px;
  box-shadow:none !important;
}
.navbar .navico svg{
  width:16px;
  height:16px;
}

/* cart badge: slightly lower for perfect placement */
.cart-badge{
  position:absolute;
  top:-4px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background: var(--brand);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(255,77,0,0.30);
  border:2px solid rgba(255,255,255,0.85);
}
.account-badge{
  top:-7px;
  right:-9px;
}
html[data-theme="dark"] .cart-badge{
  border-color: rgba(11,15,23,0.85);
}

/* news bits */
.news-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom: 8px;
}
.news-date{
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.65);
}
html[data-theme="dark"] .news-date{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.80);
}

/* make the 3 left trust pills slimmer */
.topbar .trust-left .trust-item{
  flex: 0 1 220px;
  min-width: 178px;
  max-width: 260px;
  padding: 4px 9px;
  min-height: 38px;
  box-sizing: border-box;
}
.topbar .trust-left .trust-ico{
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
}
.topbar .trust-left .trust-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 22px;
}
.topbar .trust-left .trust-title{ font-size: 9.5px; line-height: 1.0; }
.topbar .trust-left .trust-sub{ font-size: 9px; line-height: 1.0; margin-top: 1px; }

/* trust right buttons: slightly cleaner */
.topbar .trust-link,
.topbar button.trust-link{
  box-shadow: 0 5px 14px rgba(0,0,0,0.14);
  border-color: rgba(255,255,255,0.12);
}
.topbar .theme-toggle-top{
  padding-left:9px;
  padding-right:9px;
}
.topbar .trust-link:hover{
  border-color: rgba(255,255,255,0.18);
}
/* 1) nav icons: give each category its own accent color */
.navbar .navico{ background: rgba(255,122,24,0.10) !important; }

.navbar .navlink:nth-child(1) .navico{ background: rgba(45,124,255,0.14) !important; color: rgba(45,124,255,0.95) !important; }
.navbar .navlink:nth-child(2) .navico{ background: rgba(255,122,24,0.14) !important; color: rgba(255,122,24,0.95) !important; }
.navbar .navlink:nth-child(3) .navico{ background: rgba(0,200,160,0.14) !important; color: rgba(0,200,160,0.95) !important; }
.navbar .navlink:nth-child(4) .navico{ background: rgba(170,90,255,0.14) !important; color: rgba(170,90,255,0.95) !important; }
.navbar .navlink:nth-child(5) .navico{ background: rgba(255,70,140,0.14) !important; color: rgba(255,70,140,0.95) !important; }
.navbar .navlink:nth-child(6) .navico{ background: rgba(255,200,0,0.16) !important; color: rgba(255,200,0,0.92) !important; }
.navbar .navlink:nth-child(7) .navico{ background: rgba(116,241,255,0.14) !important; color: rgba(116,241,255,0.92) !important; }
.navbar .navlink:nth-child(8) .navico{ background: rgba(120,255,120,0.14) !important; color: rgba(120,255,120,0.92) !important; }

/* 2) light mode: slightly more contrast for cart button */
html[data-theme="light"] .header-actions .btn.cart-btn{
  background: linear-gradient(180deg, rgba(19,24,34,0.96), rgba(13,17,25,0.94)) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.96) !important;
  box-shadow: 0 7px 16px rgba(0,0,0,0.14) !important;
}
html[data-theme="light"] .header-actions .btn.cart-btn:hover{
  background: linear-gradient(180deg, rgba(26,32,44,0.98), rgba(17,22,31,0.96)) !important;
  border-color: rgba(255,122,0,0.44) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}
html[data-theme="light"] .search{
  background: linear-gradient(180deg, rgba(19,24,34,0.96), rgba(13,17,25,0.94)) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.22) !important;
}
html[data-theme="light"] .search:focus-within{
  background: linear-gradient(180deg, rgba(23,28,39,0.98), rgba(16,20,29,0.96)) !important;
  border-color: rgba(255,122,0,0.48) !important;
  box-shadow: var(--focus), 0 18px 52px rgba(255,77,0,0.18) !important;
}
html[data-theme="light"] .search input{
  color: rgba(255,255,255,0.96) !important;
}
html[data-theme="light"] .search input::placeholder{
  color: rgba(196,206,224,0.62) !important;
}
html[data-theme="light"] .search .select{
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.96) !important;
}
html[data-theme="light"] .search .select option{
  background: #10151d !important;
  color: rgba(255,255,255,0.96) !important;
}
html[data-theme="light"] .header-actions .select{
  background: linear-gradient(180deg, rgba(19,24,34,0.96), rgba(13,17,25,0.94)) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.96) !important;
  box-shadow: 0 7px 16px rgba(0,0,0,0.14) !important;
}
html[data-theme="light"] #langMenu{
  background: linear-gradient(180deg, rgba(17,22,31,0.99), rgba(10,14,20,0.98)) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.94) !important;
}
html[data-theme="light"] .navlink{
  background: rgba(255,255,255,0.76);
  border-color: rgba(255,122,24,0.30);
  box-shadow:
    0 0 0 1px rgba(255,122,24,0.06),
    0 6px 14px rgba(10,14,22,0.05);
}
html[data-theme="light"] .navlink:hover{
  background: rgba(255,255,255,0.90);
  border-color: rgba(255,122,24,0.44);
  box-shadow:
    0 0 0 1px rgba(255,122,24,0.14),
    0 8px 18px rgba(10,14,22,0.08);
}
/* 10 Kategorien sichtbar, engeres Spacing */
.navbar .row{
  gap:8px;
}

/* etwas kompaktere Pills für 10 Items */
.navlink{
  padding:7px 10px;
  font-size:12.5px;
}

/* Icons minimal kleiner damit mehr Platz entsteht */
.navbar .navico{
  width:20px;
  height:20px;
  flex:0 0 20px;
}
.navbar .navico svg{
  width:14px;
  height:14px;
}

/* remove the wide strip behind category pills */
.navbar{
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .navbar{
  background: transparent !important;
}