:root {
  color-scheme:light;
  --bg:#f5f8fc;
  --panel:#fff;
  --soft:#f0f5fc;
  --text:#17243b;
  --muted:#7b8aa0;
  --line:#e4ebf3;
  --blue:#2563eb;
  --blue-dark:#174fcb;
  --green:#10a66a;
  --red:#e5484d;
  --amber:#e7a117;
  --shadow:0 8px 32px #263d6710;
  --font:"Signika","Segoe UI",Arial,sans-serif
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.brand-mark.image-logo {
  padding:0;
  letter-spacing:normal;
  background:transparent;
  box-shadow:none
}
.brand-mark.image-logo img {
  width:100%;
  height:100%;
  object-fit:contain
}
.small-copy {
  font-size:11px
}
.amount-in {
  color:var(--green)
}
.amount-out {
  color:var(--red)
}
.detail-heading {
  font-size:14px;
  margin:17px 0 7px
}
.hero-link {
  display:block;
  width:100%;
  height:100%
}
.hero-link img {
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:2.45
}
.floating-cart {
  display:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 var(--font);
  min-height:100vh;
  display:flex;
  flex-direction:column
}
button,input,select,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
a {
  color:inherit;
  text-decoration:none
}
img {
  max-width:100%;
  display:block
}
svg {
  width:20px;
  height:20px;
  flex:none
}
button svg,a svg {
  pointer-events:none
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #79a7ff;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  padding:10px 15px;
  background:var(--blue);
  color:#fff;
  z-index:100
}
.skip-link:focus {
  top:10px
}
.site-header {
  position:sticky;
  top:14px;
  margin:14px auto 0;
  width:calc(100% - 40px);
  max-width:1340px;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 20px;
  border:1px solid #fff;
  border-radius:24px;
  background:color-mix(in srgb,var(--panel) 95%,transparent);
  box-shadow:0 6px 25px #24344c0d;
  z-index:50;
  backdrop-filter:blur(18px)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none
}
.brand-mark {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
  border-radius:12px;
  font-size:23px;
  font-weight:950;
  letter-spacing:-4px;
  padding-right:4px;
  box-shadow:0 5px 10px #2563eb24
}
.brand-mark span {
  display:inline;
  color:#bcd6ff
}
.brand-name {
  font-size:19px;
  font-weight:900;
  letter-spacing:-.6px;
  line-height:1.1
}
.brand-name small {
  display:block;
  font-size:7px;
  letter-spacing:1.45px;
  margin-top:5px;
  color:var(--muted);
  font-weight:750
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:4px
}
.desktop-nav a {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 10px;
  border-radius:12px;
  color:#63738b;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  white-space:nowrap
}
.desktop-nav a svg {
  width:16px;
  height:16px;
  color:var(--blue)
}
.desktop-nav a:nth-child(2) svg {
  color:#ed8a23
}
.desktop-nav a:nth-child(3) svg {
  color:#855ce5
}
.desktop-nav a:nth-child(4) svg {
  color:#e5a621
}
.desktop-nav a:nth-child(5) svg {
  color:#0ba375
}
.desktop-nav a.active,.desktop-nav a:hover {
  color:var(--blue);
  background:#eaf2ff
}
.header-actions {
  display:flex;
  align-items:center;
  gap:7px
}
.icon-button {
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:37px;
  border-radius:11px;
  background:var(--soft);
  color:#6d7c93;
  flex:none
}
.icon-button svg {
  width:18px;
  height:18px
}
.icon-button:hover {
  background:#e1edfe;
  color:var(--blue)
}
.auth-button {
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:12px;
  min-height:38px;
  padding:8px 11px;
  background:var(--panel);
  font-weight:750;
  font-size:11px;
  white-space:nowrap
}
.auth-button svg {
  width:16px;
  height:16px;
  color:var(--blue)
}
.cart-toggle {
  position:relative
}
.cart-toggle b {
  position:absolute;
  top:-4px;
  right:-4px;
  background:var(--blue);
  color:white;
  border:2px solid var(--panel);
  border-radius:9px;
  min-width:18px;
  padding:0 3px;
  font-size:9px
}
.menu-toggle {
  display:none
}
.mobile-menu {
  position:fixed;
  top:92px;
  right:18px;
  width:min(340px,calc(100vw - 36px));
  padding:10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 18px 50px #17243b30;
  z-index:60
}
.mobile-menu a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 15px;
  border-radius:10px;
  font-weight:700
}
.mobile-menu a:hover {
  background:var(--soft);
  color:var(--blue)
}
main {
  width:calc(100% - 40px);
  max-width:1280px;
  margin:28px auto 54px;
  flex:1;
  min-height:400px
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(270px,1fr);
  gap:20px;
  margin-bottom:24px
}
.hero-media {
  display:flex;
  flex-direction:column;
  gap:12px
}
.hero-banner {
  position:relative;
  overflow:hidden;
  border:4px solid var(--panel);
  border-radius:28px;
  box-shadow:var(--shadow);
  background:#e5edfa;
  min-height:270px;
  display:grid;
  align-items:center
}
.hero-banner>img {
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:2.45
}
.hero-placeholder {
  padding:35px;
  color:var(--text);
  background:#eaf3ff;
  min-height:275px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.hero-placeholder h1 {
  font-size:42px;
  max-width:500px;
  line-height:1.1;
  letter-spacing:-1.5px;
  margin:12px 0
}
.hero-placeholder p {
  font-size:15px;
  color:#5b7296;
  max-width:420px
}
.hero-caption {
  position:absolute;
  bottom:12px;
  left:12px;
  font-size:9px;
  font-weight:700;
  background:#17243baa;
  color:#fff;
  border-radius:7px;
  padding:3px 7px;
  backdrop-filter:blur(6px)
}
.hero-pagination {
  display:flex;
  gap:5px;
  position:absolute;
  bottom:13px;
  right:16px
}
.hero-pagination button {
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:10px;
  background:#fff8
}
.hero-pagination button.active {
  width:22px;
  background:var(--blue)
}
.shop-notice {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  border:1px solid #dbe8ff;
  background:var(--panel);
  border-radius:15px;
  color:#526783;
  font-size:12px
}
.shop-notice>svg {
  color:var(--blue);
  width:17px;
  height:17px
}
.hero-points {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.hero-point {
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--panel)
}
.hero-point svg {
  color:var(--blue);
  width:20px;
  height:20px
}
.hero-point strong {
  display:block;
  font-size:11px
}
.hero-point small {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin-top:1px
}
.leaderboard {
  padding:20px;
  border-radius:28px;
  background:var(--panel);
  border:2px solid #fffaed;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.leaderboard h2 {
  font-size:20px;
  font-weight:950;
  color:var(--amber);
  margin:0;
  text-transform:uppercase;
  display:flex;
  gap:8px;
  align-items:center
}
.leaderboard h2 svg {
  width:22px;
  height:22px
}
.leaderboard .eyebrow {
  font-size:8px;
  margin:2px 0 15px;
  letter-spacing:1.4px;
  color:#94a3b8
}
.ranking-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:13px;
  margin-bottom:6px;
  background:var(--soft)
}
.ranking-row:first-child {
  background:#fff9e7;
  border-color:#fae5a8
}
.rank {
  border-radius:50%;
  width:29px;
  height:29px;
  background:#e8eef6;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  color:#66758e
}
.ranking-row:first-child .rank {
  background:#f4b52f;
  color:#fff
}
.ranking-row div {
  flex:1
}
.ranking-row strong {
  display:block;
  font-size:11px
}
.ranking-row small {
  font-size:10px;
  color:var(--muted)
}
.ranking-row>span:last-child {
  font-weight:800;
  color:var(--blue);
  font-size:12px
}
.ranking-empty {
  margin:10px 0;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:150px;
  padding:20px;
  background:linear-gradient(180deg,#fffbef 0%,transparent 100%);
  border-radius:17px
}
.ranking-empty .medal {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  background:#fff1c8;
  color:#dca02d;
  border-radius:18px;
  margin-bottom:9px
}
.ranking-empty .medal svg {
  width:28px;
  height:28px
}
.ranking-empty strong {
  font-size:13px
}
.ranking-empty p {
  color:var(--muted);
  font-size:11px;
  max-width:220px;
  margin:5px 0 0
}
.leaderboard .button {
  min-height:36px;
  font-size:11px
}
.quick-links {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
  margin:22px 0 38px
}
.quick-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  min-width:0;
  padding:18px 8px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:0 3px 10px #15263f03;
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  text-transform:uppercase;
  transition:transform .18s,border-color .18s
}
.quick-link:hover {
  transform:translateY(-3px);
  border-color:#c6dafb
}
.quick-link .quick-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--blue);
  background:#eaf2ff
}
.quick-link img {
  width:42px;
  height:42px;
  object-fit:contain
}
.quick-link svg {
  width:24px;
  height:24px
}
.quick-link:nth-child(2) .quick-icon {
  background:#f0eaff;
  color:#8c5ae0
}
.quick-link:nth-child(3) .quick-icon {
  background:#fff2e6;
  color:#ed8b30
}
.quick-link:nth-child(4) .quick-icon {
  background:#e7faf2;
  color:#0ba675
}
.quick-link:nth-child(5) .quick-icon {
  background:#e8f5fe;
  color:#2d9be4
}
.quick-link:nth-child(6) .quick-icon {
  background:#fff2e6;
  color:#e6951d
}
.quick-link:nth-child(7) .quick-icon {
  background:#f7eafe;
  color:#b465e6
}
.section {
  margin:32px 0
}
.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:11px;
  border-bottom:3px solid var(--line);
  margin-bottom:19px
}
.section-header h2 {
  font-size:24px;
  line-height:1.15;
  margin:0;
  font-weight:950;
  letter-spacing:-.8px;
  text-transform:uppercase;
  color:var(--blue);
  display:flex;
  gap:9px;
  align-items:center
}
.section-header h2 svg {
  width:23px;
  height:23px
}
.section-header a {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--blue);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  white-space:nowrap;
  letter-spacing:.8px
}
.section-header a svg {
  width:17px;
  height:17px
}
.category-grid,.product-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.category-card {
  display:block;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
  transition:border-color .18s,transform .18s
}
.category-card:hover {
  border-color:#a6c4fd;
  transform:translateY(-3px)
}
.category-image {
  position:relative;
  aspect-ratio:16/9;
  background:#e8eff9;
  overflow:hidden;
  display:grid;
  place-items:center
}
.category-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s
}
.category-card:hover img {
  transform:scale(1.04)
}
.category-image .fallback-art {
  width:48px;
  height:48px;
  color:#7b9bc9
}
.availability {
  position:absolute;
  left:10px;
  top:10px;
  background:#111b35b8;
  border:1px solid #fff2;
  color:#fff;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:8px;
  padding:3px 7px;
  font-weight:800;
  backdrop-filter:blur(6px)
}
.availability:before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#32d09b
}
.availability.demo:before {
  background:#f7be50
}
.category-content {
  padding:15px 16px 12px
}
.category-content h3 {
  margin:0 0 12px;
  font-size:14px;
  line-height:1.3;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.3px
}
.category-stats {
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid var(--line);
  padding-top:10px
}
.category-stats span:last-child {
  text-align:right
}
.category-stats small {
  font-size:8px;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--muted);
  display:block;
  text-transform:uppercase
}
.category-stats strong {
  font-size:16px;
  font-weight:900
}
.category-stats .green {
  color:var(--green)
}
.category-stats strong b {
  font-size:9px;
  color:var(--blue)
}
.featured-info {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:34px;
  padding:26px;
  border-radius:24px;
  border:1px solid var(--line);
  background:var(--panel)
}
.featured-info article {
  display:flex;
  gap:12px
}
.featured-info svg {
  color:var(--blue);
  width:30px;
  height:30px
}
.featured-info h3 {
  margin:0 0 4px;
  font-size:13px
}
.featured-info p {
  margin:0;
  color:var(--muted);
  font-size:11px
}
.empty-state {
  text-align:center;
  border:1px dashed #cad8ea;
  background:var(--panel);
  border-radius:20px;
  padding:38px 20px;
  color:var(--muted)
}
.empty-state>svg {
  width:36px;
  height:36px;
  margin:0 auto 12px;
  color:#a5b7cf
}
.empty-state h3 {
  margin:0 0 6px;
  color:var(--text);
  font-size:17px
}
.empty-state p {
  margin:0 0 16px;
  font-size:13px
}
.empty-state .button {
  display:inline-flex
}
.page-loading {
  padding:100px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  color:var(--muted)
}
.spinner {
  display:inline-block;
  width:20px;
  height:20px;
  border:2px solid #dce7f7;
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .7s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.eyebrow {
  font-size:10px;
  font-weight:850;
  letter-spacing:1.3px;
  color:var(--blue)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 16px;
  font-weight:800;
  font-size:12px;
  background:var(--panel);
  color:var(--text);
  transition:background .15s
}
.button svg {
  width:16px;
  height:16px
}
.button.primary {
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 4px 12px #2563eb20
}
.button.primary:hover {
  background:var(--blue-dark)
}
.button.secondary {
  background:var(--soft);
  border-color:var(--line)
}
.button.danger {
  background:#fff0f0;
  border-color:#fbd0d0;
  color:#d54040
}
.button.small {
  min-height:32px;
  padding:6px 10px;
  font-size:11px
}
.full {
  width:100%
}
.muted {
  color:var(--muted)
}
.form-error {
  color:var(--red);
  font-size:12px;
  margin:9px 0;
  min-height:0
}
.form-error:empty {
  display:none
}
.message {
  border:1px solid #d8e7ff;
  background:#edf5ff;
  color:#43628a;
  padding:13px 15px;
  border-radius:12px;
  font-size:12px;
  margin:14px 0
}
.message.warning {
  background:#fffbeb;
  color:#947327;
  border-color:#f8e9b5
}
.message.success {
  background:#eafaf2;
  border-color:#c3ebd5;
  color:#258754
}
.panel {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:24px
}
.page-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:22px
}
.page-title h1 {
  font-size:28px;
  font-weight:950;
  letter-spacing:-.8px;
  margin:0 0 4px
}
.page-title p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:15px
}
.breadcrumb a {
  color:var(--blue)
}
.filter-bar {
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px 175px;
  gap:10px;
  margin-bottom:20px
}
.search-field {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 14px
}
.search-field>svg {
  width:17px;
  height:17px;
  color:var(--muted)
}
.search-field input {
  border:0;
  background:transparent;
  min-width:0;
  padding:12px 0;
  color:var(--text);
  width:100%;
  outline-offset:0
}
.filter-bar select {
  margin:0
}
.filter-chips {
  display:flex;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:thin;
  margin-bottom:19px
}
.filter-chips button {
  border:1px solid var(--line);
  background:var(--panel);
  padding:8px 12px;
  border-radius:11px;
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
  color:var(--muted)
}
.filter-chips button.active {
  border-color:#bfd4fe;
  background:#eaf2ff;
  color:var(--blue)
}
.results-label {
  font-size:11px;
  color:var(--muted);
  margin:0 0 12px
}
.product-card {
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel);
  overflow:hidden;
  box-shadow:var(--shadow);
  min-width:0
}
.product-image {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1.6;
  background:#eaf0f9;
  overflow:hidden
}
.product-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .2s
}
.product-card:hover .product-image img {
  transform:scale(1.03)
}
.product-image .fallback-art {
  width:50px;
  height:50px;
  color:#7c9ac3
}
.product-card-body {
  padding:15px
}
.product-card h3 {
  font-size:14px;
  margin:0 0 8px;
  line-height:1.3;
  min-height:36px
}
.product-description {
  color:var(--muted);
  font-size:11px;
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.product-price {
  font-size:21px;
  font-weight:950;
  color:var(--blue);
  letter-spacing:-.6px
}
.product-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  font-size:10px;
  margin:5px 0 13px;
  color:var(--muted)
}
.product-card .button {
  width:100%;
  font-size:11px;
  min-height:37px
}
.badge {
  display:inline-block;
  padding:3px 7px;
  border-radius:6px;
  background:#edf4ff;
  color:var(--blue);
  font-size:9px;
  font-weight:800
}
.badge.warning {
  background:#fff5dc;
  color:#a67a20
}
.badge.success {
  background:#e8f8ef;
  color:#249260
}
.badge.danger {
  background:#fff0f0;
  color:#cf5555
}
.badge.neutral {
  background:var(--soft);
  color:var(--muted)
}
dialog {
  border:1px solid var(--line);
  border-radius:24px;
  padding:25px;
  background:var(--panel);
  color:var(--text);
  width:min(520px,calc(100vw - 24px));
  max-height:calc(100dvh - 30px);
  overflow-y:auto;
  box-shadow:0 30px 100px #17243b33
}
dialog::backdrop {
  background:#12213c83;
  backdrop-filter:blur(3px)
}
.dialog-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:19px
}
.dialog-title h2 {
  font-size:23px;
  font-weight:900;
  letter-spacing:-.5px;
  margin:2px 0 0
}
.dialog-title>.icon-button {
  width:32px;
  height:32px
}
.dialog-title>.icon-button svg {
  width:16px;
  height:16px
}
label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  margin-bottom:14px
}
input,select,textarea {
  display:block;
  min-width:0;
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  font-size:13px
}
textarea {
  resize:vertical;
  min-height:82px
}
input::placeholder,textarea::placeholder {
  color:#96a3b5
}
.auth-tabs {
  display:flex;
  padding:4px;
  border-radius:12px;
  background:var(--soft);
  margin-bottom:20px
}
.auth-tabs button {
  flex:1;
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:9px;
  padding:9px;
  font-size:12px;
  font-weight:750
}
.auth-tabs button.active {
  background:var(--panel);
  color:var(--blue);
  box-shadow:0 2px 8px #17243b0d
}
.auth-help {
  text-align:center;
  color:var(--muted);
  font-size:11px;
  margin:14px 0 0
}
.product-dialog {
  width:min(760px,calc(100vw - 24px))
}
.product-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.product-detail-image {
  border-radius:18px;
  aspect-ratio:1.2;
  background:var(--soft);
  overflow:hidden;
  display:grid;
  place-items:center
}
.product-detail-image img {
  width:100%;
  height:100%;
  object-fit:cover
}
.product-detail h3 {
  margin:0 0 10px;
  font-size:23px;
  letter-spacing:-.5px
}
.product-detail p {
  font-size:12px;
  color:var(--muted);
  white-space:pre-wrap;
  line-height:1.7
}
.quantity-controls {
  display:flex;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  max-width:145px;
  margin:10px 0 15px
}
.quantity-controls button {
  width:38px;
  border:0;
  background:var(--soft);
  color:var(--text);
  font-size:20px
}
.quantity-controls input {
  border:0;
  text-align:center;
  width:60px;
  border-radius:0;
  padding:7px;
  appearance:textfield
}
.quantity-controls input::-webkit-inner-spin-button {
  appearance:none
}
.product-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.product-actions .button {
  flex:1
}
.cart-line {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}
.cart-line img {
  width:58px;
  height:49px;
  object-fit:cover;
  border-radius:9px;
  background:var(--soft)
}
.cart-line-main {
  flex:1;
  min-width:0
}
.cart-line-main strong {
  font-size:12px;
  display:block;
  line-height:1.3;
  margin-bottom:4px
}
.cart-line-main small {
  font-size:10px;
  color:var(--muted)
}
.cart-line input {
  width:58px;
  padding:7px;
  text-align:center;
  font-size:12px
}
.cart-line .icon-button {
  width:28px;
  height:28px
}
.cart-line .icon-button svg {
  width:14px;
  height:14px
}
.cart-total {
  display:flex;
  justify-content:space-between;
  font-size:15px;
  align-items:center;
  margin:18px 0
}
.cart-total strong {
  color:var(--blue);
  font-size:24px;
  font-weight:900
}
.cart-dialog {
  width:min(590px,calc(100vw - 24px))
}
.wallet-layout {
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr);
  gap:20px
}
.balance-card {
  padding:23px;
  border-radius:20px;
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 24px #2563eb20;
  margin-bottom:18px
}
.balance-card>span {
  font-size:11px;
  letter-spacing:1px;
  font-weight:700;
  opacity:.8;
  text-transform:uppercase;
  display:flex;
  gap:8px;
  align-items:center
}
.balance-card strong {
  display:block;
  font-size:36px;
  letter-spacing:-1px;
  line-height:1.3;
  margin:9px 0
}
.balance-card small {
  font-size:11px;
  opacity:.8
}
.panel h2 {
  margin:0 0 17px;
  font-size:18px;
  letter-spacing:-.4px
}
.amount-presets {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:-4px 0 15px
}
.amount-presets button {
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:9px;
  padding:7px 4px;
  color:var(--muted);
  font-size:10px;
  font-weight:700
}
.amount-presets button:hover {
  border-color:#adc9fa;
  color:var(--blue)
}
.bank-details {
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:13px;
  padding:15px;
  margin-top:14px
}
.bank-details dl {
  margin:0;
  display:grid;
  grid-template-columns:110px 1fr;
  gap:8px;
  font-size:12px
}
.bank-details dt {
  color:var(--muted)
}
.bank-details dd {
  margin:0;
  font-weight:800;
  overflow-wrap:anywhere
}
.copy-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:13px;
  margin-top:13px;
  border-top:1px dashed #bdcde1
}
.copy-row strong {
  font-family:monospace;
  font-size:16px;
  color:var(--blue)
}
.table-scroll {
  overflow-x:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px
}
th {
  font-size:9px;
  letter-spacing:.5px;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:750;
  padding:12px;
  background:var(--soft);
  white-space:nowrap
}
td {
  border-bottom:1px solid var(--line);
  padding:13px 12px;
  vertical-align:top
}
td strong {
  font-weight:750;
  display:block;
  font-size:12px
}
td small {
  color:var(--muted);
  font-size:10px;
  display:block;
  margin-top:2px
}
.table-empty {
  text-align:center;
  color:var(--muted);
  padding:30px
}
.panel .table-scroll {
  margin:0 -12px
}
.status-tag {
  font-size:9px;
  font-weight:800;
  display:inline-block;
  padding:4px 7px;
  border-radius:7px;
  background:var(--soft);
  white-space:nowrap
}
.status-tag.completed,.status-tag.approved {
  background:#eaf8ef;
  color:#25975b
}
.status-tag.processing,.status-tag.pending {
  background:#fff5dd;
  color:#a57722
}
.status-tag.cancelled,.status-tag.rejected,.status-tag.refunded {
  background:#fceff0;
  color:#ca555e
}
.history-tabs {
  display:flex;
  gap:5px;
  margin-bottom:18px
}
.history-tabs button {
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  background:var(--panel);
  font-weight:750;
  color:var(--muted);
  font-size:11px
}
.history-tabs button.active {
  background:#eaf2ff;
  color:var(--blue);
  border-color:#c8dcff
}
.account-layout {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:20px
}
.account-summary {
  text-align:center;
  align-self:start
}
.account-avatar {
  width:65px;
  height:65px;
  border-radius:22px;
  background:#eaf2ff;
  color:var(--blue);
  font-size:28px;
  font-weight:900;
  display:grid;
  place-items:center;
  margin:0 auto 12px
}
.account-summary h2 {
  font-size:18px;
  margin:0
}
.account-summary>p {
  font-size:11px;
  color:var(--muted);
  margin:4px 0 18px
}
.account-menu {
  display:flex;
  flex-direction:column;
  text-align:left;
  gap:6px;
  border-top:1px solid var(--line);
  padding-top:15px
}
.account-menu a,.account-menu button {
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  background:transparent;
  padding:10px;
  border-radius:9px;
  font-size:12px;
  font-weight:650;
  color:var(--muted)
}
.account-menu svg {
  width:17px;
  height:17px
}
.account-menu a:hover {
  background:var(--soft);
  color:var(--blue)
}
.account-content {
  display:grid;
  gap:20px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.order-dialog {
  width:min(720px,calc(100vw - 24px))
}
.order-header-info {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 20px
}
.order-header-info p {
  margin:0;
  font-size:12px;
  color:var(--muted)
}
.delivery {
  padding:15px;
  border:1px solid #cfdfef;
  border-radius:12px;
  background:var(--soft);
  margin:10px 0
}
.delivery h3 {
  font-size:13px;
  margin:0 0 10px
}
.delivery pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  font:12px/1.6 monospace;
  user-select:all
}
.detail-note {
  white-space:pre-wrap;
  font-size:12px;
  line-height:1.7;
  color:var(--muted)
}
.page-copy {
  max-width:850px;
  margin:0 auto;
  white-space:pre-wrap;
  font-size:14px;
  line-height:1.9
}
.page-copy h1 {
  font-size:28px;
  white-space:normal
}
.contact-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
.contact-tile {
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  text-align:center
}
.contact-tile>svg {
  width:30px;
  height:30px;
  color:var(--blue);
  margin:0 auto 10px
}
.contact-tile h2 {
  font-size:16px;
  margin:0 0 5px
}
.contact-tile p {
  font-size:12px;
  color:var(--muted)
}
.site-footer {
  margin-top:auto;
  background:var(--panel);
  border-top:1px solid var(--line)
}
.footer-inner {
  max-width:1280px;
  width:calc(100% - 40px);
  margin:auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:38px;
  padding:37px 0 30px
}
.footer-about .brand {
  margin-bottom:12px
}
.footer-about .brand-mark {
  width:34px;
  height:34px;
  font-size:20px
}
.footer-shop-name {
  font-size:19px;
  font-weight:900;
  letter-spacing:-.7px
}
.footer-about p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  max-width:270px;
  margin:0
}
.footer-inner h3 {
  font-size:11px;
  font-weight:850;
  letter-spacing:.4px;
  margin:7px 0 15px
}
.footer-inner>div>a:not(.brand) {
  display:block;
  margin:9px 0;
  font-size:11px;
  color:var(--muted)
}
.footer-inner>div>a:hover {
  color:var(--blue)
}
.footer-assurance p {
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:11px;
  color:var(--muted)
}
.footer-assurance p svg {
  width:14px;
  height:14px;
  margin-top:2px;
  color:var(--blue)
}
.footer-inner>div>a.support-link {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--blue);
  font-weight:750
}
.footer-social {
  display:flex;
  gap:7px;
  margin-top:13px
}
.footer-social a {
  display:inline-flex;
  padding:6px 10px;
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:8px;
  font-size:10px;
  color:var(--muted);
  font-weight:750
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:16px;
  max-width:1280px;
  width:calc(100% - 40px);
  margin:auto;
  border-top:1px solid var(--line);
  padding:16px 0 20px;
  font-size:10px;
  color:var(--muted)
}
.footer-bottom a {
  color:var(--blue);
  font-weight:850
}
.bottom-nav {
  display:none
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100vw - 32px);
  background:#17243b;
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  box-shadow:0 5px 20px #17243b20;
  font-size:12px;
  z-index:150;
  text-align:center
}
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0e1524;
  --panel:#172235;
  --soft:#1c2b42;
  --text:#e7effc;
  --muted:#8e9db3;
  --line:#26374f;
  --blue:#5c94ff;
  --blue-dark:#3474e6;
  --shadow:0 8px 32px #00000018
}
html[data-theme="dark"] .site-header {
  border-color:var(--line)
}
html[data-theme="dark"] .desktop-nav a.active,html[data-theme="dark"] .desktop-nav a:hover,html[data-theme="dark"] .filter-chips button.active,html[data-theme="dark"] .history-tabs button.active {
  background:#223a60;
  color:#9ec0ff
}
html[data-theme="dark"] .leaderboard {
  border-color:#3a3428
}
html[data-theme="dark"] .ranking-empty {
  background:linear-gradient(180deg,#372d1f,transparent)
}
html[data-theme="dark"] .ranking-empty .medal {
  background:#443721
}
html[data-theme="dark"] .ranking-row:first-child {
  background:#342e20;
  border-color:#695324
}
html[data-theme="dark"] .message {
  background:#1c3254;
  border-color:#274672;
  color:#acc6ec
}
html[data-theme="dark"] .message.warning {
  background:#362f1d;
  border-color:#5f512a;
  color:#decb90
}
html[data-theme="dark"] .hero-placeholder {
  background:#1c2e49;
  color:var(--text)
}
html[data-theme="dark"] .hero-placeholder p {
  color:var(--muted)
}
html[data-theme="dark"] .product-image,html[data-theme="dark"] .category-image {
  background:#1e304a
}
html[data-theme="dark"] .balance-card {
  background:#2258c5
}
@media(min-width:1500px) {
  .site-header {
    max-width:1450px
  }
  .desktop-nav {
    gap:8px
  }
  .desktop-nav a {
    font-size:12px;
    padding:10px 12px
  }
}
@media(max-width:1200px) {
  .desktop-nav {
    display:none
  }
  .menu-toggle {
    display:inline-flex
  }
  .hero-grid {
    grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr)
  }
  .hero-banner {
    min-height:240px
  }
  .brand-name {
    font-size:21px
  }
  .quick-links {
    gap:9px
  }
  .quick-link {
    font-size:9px
  }
  .footer-inner {
    gap:24px
  }
  .category-content {
    padding:13px
  }
  .category-content h3 {
    font-size:12px
  }
}
@media(max-width:900px) {
  .hero-grid {
    grid-template-columns:1fr
  }
  .hero-banner {
    min-height:0
  }
  .hero-banner>img {
    aspect-ratio:2.8
  }
  .leaderboard {
    padding:16px 19px;
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:10px 18px;
    align-items:center;
    border-radius:22px
  }
  .leaderboard h2 {
    font-size:17px
  }
  .leaderboard .eyebrow {
    margin:3px 0 0
  }
  .ranking-empty {
    grid-column:2;
    grid-row:1/4;
    min-height:120px;
    margin:0;
    padding:15px;
    display:flex;
    flex-direction:row;
    gap:13px;
    text-align:left
  }
  .ranking-empty .medal {
    flex:none;
    width:42px;
    height:42px;
    margin:0
  }
  .ranking-empty .medal svg {
    width:24px;
    height:24px
  }
  .ranking-empty strong {
    font-size:12px
  }
  .ranking-empty p {
    font-size:10px
  }
  .leaderboard>.button {
    justify-self:start
  }
  .ranking-list {
    grid-column:2;
    grid-row:1/4
  }
  .quick-links {
    grid-template-columns:repeat(4,1fr);
    margin-bottom:30px
  }
  .category-grid,.product-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px
  }
  .featured-info {
    padding:20px;
    gap:15px
  }
  .featured-info article {
    flex-direction:column
  }
  .footer-inner {
    grid-template-columns:1.3fr 1fr 1fr
  }
  .footer-assurance {
    display:none
  }
  .wallet-layout {
    grid-template-columns:minmax(260px,1fr) minmax(0,1.3fr)
  }
  .account-layout {
    grid-template-columns:210px 1fr
  }
  .contact-grid {
    gap:10px
  }
  .contact-tile {
    padding:20px 12px
  }
}
@media(max-width:640px) {
  body {
    padding-bottom:70px
  }
  .site-header {
    width:calc(100% - 24px);
    top:8px;
    margin-top:8px;
    min-height:64px;
    padding:10px 12px;
    border-radius:19px;
    gap:7px
  }
  .brand {
    gap:7px
  }
  .brand-mark {
    width:33px;
    height:33px;
    border-radius:10px;
    font-size:20px
  }
  .brand-name {
    font-size:16px;
    letter-spacing:-.5px
  }
  .brand-name small {
    font-size:6px;
    letter-spacing:.8px;
    margin-top:4px
  }
  .header-actions {
    gap:5px
  }
  .header-actions>.icon-button {
    width:31px;
    height:31px;
    border-radius:9px
  }
  .auth-button {
    padding:6px 8px;
    min-height:32px;
    border-radius:9px;
    font-size:10px
  }
  .auth-button svg {
    width:15px;
    height:15px
  }
  #account-label {
    max-width:65px;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .cart-toggle {
    display:none
  }
  .mobile-menu {
    top:82px;
    right:12px;
    width:calc(100% - 24px)
  }
  main {
    width:calc(100% - 24px);
    margin-top:18px;
    margin-bottom:32px;
    min-height:350px
  }
  .hero-grid {
    gap:13px;
    margin-bottom:18px
  }
  .hero-media {
    gap:9px
  }
  .hero-banner {
    border:3px solid var(--panel);
    border-radius:20px
  }
  .hero-banner>img {
    aspect-ratio:2.2
  }
  .hero-placeholder {
    min-height:190px;
    padding:22px
  }
  .hero-placeholder h1 {
    font-size:31px;
    max-width:280px;
    margin:8px 0
  }
  .hero-placeholder p {
    font-size:12px;
    max-width:280px
  }
  .hero-caption {
    font-size:8px;
    left:8px;
    bottom:8px;
    padding:2px 6px
  }
  .hero-points {
    gap:5px
  }
  .hero-point {
    padding:9px 6px;
    border-radius:11px;
    gap:5px
  }
  .hero-point svg {
    width:16px;
    height:16px
  }
  .hero-point strong {
    font-size:9px
  }
  .hero-point small {
    font-size:8px;
    line-height:1.2;
    margin-top:2px
  }
  .shop-notice {
    padding:9px 11px;
    border-radius:11px;
    font-size:11px;
    gap:8px
  }
  .leaderboard {
    padding:13px 14px;
    border-radius:19px;
    gap:4px 8px;
    grid-template-columns:1fr 1fr
  }
  .leaderboard h2 {
    font-size:14px;
    gap:5px
  }
  .leaderboard h2 svg {
    width:18px;
    height:18px
  }
  .leaderboard .eyebrow {
    font-size:7px;
    letter-spacing:.6px;
    line-height:1.5
  }
  .leaderboard>.button {
    min-height:28px;
    font-size:9px;
    padding:5px 9px;
    gap:5px;
    margin-top:6px;
    border-radius:8px
  }
  .leaderboard>.button svg {
    width:12px;
    height:12px
  }
  .ranking-empty {
    min-height:103px;
    flex-direction:column;
    text-align:center;
    padding:10px;
    gap:5px
  }
  .ranking-empty .medal {
    width:29px;
    height:29px;
    border-radius:9px
  }
  .ranking-empty .medal svg {
    width:18px;
    height:18px
  }
  .ranking-empty strong {
    font-size:10px;
    line-height:1.25
  }
  .ranking-empty p {
    font-size:8px;
    line-height:1.4;
    margin-top:3px
  }
  .ranking-row {
    gap:6px;
    padding:6px;
    font-size:9px
  }
  .ranking-row strong {
    font-size:9px
  }
  .ranking-row .rank {
    width:21px;
    height:21px;
    font-size:9px
  }
  .ranking-row>span:last-child {
    font-size:9px
  }
  .ranking-row small {
    display:none
  }
  .quick-links {
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin:16px 0 27px
  }
  .quick-link {
    border-radius:14px;
    padding:12px 4px;
    gap:7px;
    font-size:8px;
    min-height:86px
  }
  .quick-link .quick-icon,.quick-link img {
    width:31px;
    height:31px;
    border-radius:9px
  }
  .quick-link svg {
    width:20px;
    height:20px
  }
  .section {
    margin:26px 0
  }
  .section-header {
    margin-bottom:13px;
    padding-bottom:9px;
    gap:8px;
    border-width:2px
  }
  .section-header h2 {
    font-size:19px;
    letter-spacing:-.7px;
    gap:6px
  }
  .section-header h2 svg {
    width:18px;
    height:18px
  }
  .section-header a {
    font-size:8px;
    letter-spacing:0;
    gap:4px
  }
  .section-header a svg {
    width:14px;
    height:14px
  }
  .category-grid,.product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .category-card {
    border-radius:17px
  }
  .category-content {
    padding:12px
  }
  .category-content h3 {
    font-size:11px;
    margin-bottom:9px;
    min-height:28px
  }
  .category-stats {
    padding-top:8px
  }
  .category-stats strong {
    font-size:14px
  }
  .category-stats small {
    font-size:7px
  }
  .category-stats strong b {
    font-size:8px
  }
  .availability {
    top:7px;
    left:7px;
    font-size:7px;
    gap:4px;
    padding:3px 5px
  }
  .featured-info {
    grid-template-columns:1fr;
    padding:19px;
    gap:17px;
    border-radius:18px;
    margin-top:25px
  }
  .featured-info article {
    flex-direction:row;
    gap:12px
  }
  .featured-info h3 {
    font-size:12px
  }
  .featured-info p {
    font-size:10px
  }
  .featured-info svg {
    width:24px;
    height:24px
  }
  .page-title {
    align-items:flex-start;
    margin-bottom:17px;
    gap:10px
  }
  .page-title h1 {
    font-size:23px;
    line-height:1.2
  }
  .page-title p {
    font-size:11px;
    margin-top:5px
  }
  .page-title .button {
    font-size:10px;
    min-height:32px;
    padding:6px 10px
  }
  .breadcrumb {
    font-size:10px;
    margin-bottom:12px
  }
  .filter-bar {
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-bottom:12px
  }
  .filter-bar .search-field {
    grid-column:1/-1
  }
  .search-field input {
    padding:10px 0;
    font-size:12px
  }
  .filter-bar select {
    padding:9px;
    font-size:11px
  }
  .filter-chips {
    margin-bottom:13px;
    gap:6px
  }
  .filter-chips button {
    font-size:10px;
    padding:7px 10px
  }
  .results-label {
    font-size:10px
  }
  .product-card {
    border-radius:16px
  }
  .product-card-body {
    padding:11px
  }
  .product-card h3 {
    font-size:12px;
    min-height:31px;
    margin-bottom:6px
  }
  .product-description {
    font-size:10px;
    margin-bottom:8px;
    line-height:1.5
  }
  .product-price {
    font-size:18px
  }
  .product-meta {
    font-size:8px;
    margin-bottom:10px
  }
  .product-card .button {
    font-size:10px;
    min-height:33px;
    padding:7px
  }
  .product-card .button svg {
    width:13px;
    height:13px
  }
  .badge {
    font-size:8px;
    padding:2px 5px
  }
  .product-detail {
    grid-template-columns:1fr;
    gap:16px
  }
  .product-detail-image {
    aspect-ratio:1.8
  }
  .product-detail h3 {
    font-size:20px
  }
  .product-detail p {
    font-size:12px
  }
  .product-actions .button {
    min-height:40px;
    font-size:11px
  }
  .quantity-controls {
    margin-bottom:13px
  }
  .wallet-layout,.account-layout {
    grid-template-columns:1fr;
    gap:16px
  }
  .panel {
    padding:19px;
    border-radius:18px
  }
  .panel h2 {
    font-size:17px;
    margin-bottom:14px
  }
  .balance-card {
    padding:20px;
    border-radius:18px;
    margin-bottom:14px
  }
  .balance-card strong {
    font-size:32px
  }
  .balance-card>span {
    font-size:10px
  }
  .wallet-layout>.panel {
    min-width:0
  }
  .table-scroll {
    margin:0 -9px
  }
  table {
    font-size:10px
  }
  th {
    font-size:8px;
    padding:10px
  }
  td {
    padding:11px 10px
  }
  td strong {
    font-size:11px
  }
  td small {
    font-size:9px
  }
  .history-tabs {
    gap:5px;
    margin-bottom:14px
  }
  .history-tabs button {
    font-size:10px;
    padding:7px 10px
  }
  .account-summary {
    text-align:left;
    display:grid;
    grid-template-columns:46px 1fr;
    gap:4px 12px;
    align-items:center
  }
  .account-avatar {
    width:46px;
    height:46px;
    border-radius:15px;
    font-size:23px;
    grid-column:1;
    grid-row:1/3;
    margin:0
  }
  .account-summary h2 {
    grid-column:2;
    font-size:17px
  }
  .account-summary>p {
    grid-column:2;
    margin:0;
    font-size:10px
  }
  .account-menu {
    grid-column:1/-1;
    flex-direction:row;
    flex-wrap:wrap;
    margin-top:12px;
    padding-top:10px;
    gap:4px
  }
  .account-menu a,.account-menu button {
    font-size:10px;
    padding:7px 9px;
    background:var(--soft);
    gap:6px
  }
  .account-menu svg {
    width:13px;
    height:13px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:11px
  }
  .contact-tile {
    padding:20px
  }
  .contact-tile>svg {
    width:24px;
    height:24px
  }
  .empty-state {
    padding:30px 16px;
    border-radius:16px
  }
  .empty-state h3 {
    font-size:16px
  }
  .empty-state p {
    font-size:12px
  }
  .page-loading {
    padding:75px 15px;
    font-size:12px
  }
  .page-copy h1 {
    font-size:23px
  }
  .page-copy {
    font-size:13px
  }
  .site-footer {
    padding-bottom:0
  }
  .footer-inner {
    width:calc(100% - 32px);
    grid-template-columns:1fr 1fr;
    gap:22px 18px;
    padding:28px 0 25px
  }
  .footer-about {
    grid-column:1/-1
  }
  .footer-about .brand {
    margin-bottom:9px
  }
  .footer-about p {
    max-width:100%;
    font-size:11px
  }
  .footer-inner h3 {
    font-size:10px;
    margin-bottom:11px
  }
  .footer-inner>div>a:not(.brand) {
    font-size:10px;
    margin:7px 0
  }
  .footer-bottom {
    width:calc(100% - 32px);
    flex-direction:column;
    gap:5px;
    padding:15px 0 20px;
    font-size:9px
  }
  .bottom-nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:7px 6px max(7px,env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--panel) 96%,transparent);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 15px #17243b05;
    backdrop-filter:blur(15px);
    z-index:55
  }
  .bottom-nav a {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:5px 2px;
    font-size:9px;
    font-weight:750;
    color:#8b99af;
    min-height:43px
  }
  .bottom-nav svg {
    width:20px;
    height:20px
  }
  .bottom-nav a.active {
    color:var(--blue)
  }
  .bottom-nav a.active>svg {
    filter:drop-shadow(0 2px 4px #2563eb28)
  }
  dialog {
    padding:21px 19px;
    border-radius:20px;
    width:calc(100vw - 24px)
  }
  .dialog-title h2 {
    font-size:21px
  }
  .dialog-title {
    margin-bottom:17px
  }
  .eyebrow {
    font-size:9px
  }
  .auth-tabs button {
    font-size:11px
  }
  label {
    font-size:11px
  }
  input,textarea,select {
    font-size:12px
  }
  .cart-line {
    gap:8px
  }
  .cart-line img {
    width:45px;
    height:40px
  }
  .cart-line-main strong {
    font-size:11px
  }
  .cart-line-main small {
    font-size:9px
  }
  .cart-line input {
    width:45px;
    padding:6px
  }
  .cart-total strong {
    font-size:22px
  }
  .cart-total {
    font-size:13px
  }
  .order-header-info {
    align-items:flex-start;
    gap:8px
  }
  .order-header-info p {
    font-size:10px
  }
  .delivery {
    padding:12px
  }
  .delivery h3 {
    font-size:12px
  }
  .delivery pre {
    font-size:11px;
    padding:10px
  }
  .toast {
    bottom:82px;
    font-size:11px;
    padding:11px 15px
  }
  .button {
    min-height:40px;
    font-size:11px;
    padding:9px 14px
  }
  .button.small {
    min-height:30px;
    font-size:10px
  }
  .message {
    font-size:11px;
    padding:11px 12px;
    border-radius:10px
  }
}
@media(max-width:360px) {
  .brand-name {
    font-size:14px
  }
  .brand-name small {
    font-size:5px
  }
  .header-actions {
    gap:3px
  }
  .auth-button {
    font-size:9px;
    padding:6px
  }
  .header-actions>.icon-button {
    width:28px;
    height:28px
  }
  .site-header {
    padding:9px
  }
  .quick-link {
    font-size:7px
  }
  .section-header h2 {
    font-size:17px
  }
  .hero-point small {
    display:none
  }
  .product-card-body {
    padding:9px
  }
  .product-card h3 {
    font-size:11px
  }
  .product-price {
    font-size:17px
  }
}
@media(max-width:640px) {
  .floating-cart {
    position:fixed;
    right:12px;
    bottom:78px;
    display:flex;
    align-items:center;
    gap:7px;
    max-width:calc(100vw - 24px);
    min-height:40px;
    border:1px solid #ffffff33;
    border-radius:12px;
    background:var(--blue);
    color:#fff;
    padding:9px 12px;
    box-shadow:0 5px 22px #174fcb35;
    z-index:54;
    font-size:10px
  }
  .floating-cart>svg {
    width:15px;
    height:15px
  }
  .floating-cart>span:not([data-icon]) {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .floating-cart strong {
    white-space:nowrap;
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}