/* TrendBox Store — store.css */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --c-orange:   #FF4800;
  --c-orange-l: #FF6B2B;
  --c-orange-d: #CC3900;
  --c-orange-f: rgba(255,72,0,.09);
  --c-bg:       #FFFFFF;
  --c-bg2:      #F7F7FA;
  --c-bg3:      #EEEEF4;
  --c-surf:     #FFFFFF;
  --c-text:     #111827;
  --c-text2:    #374151;
  --c-muted:    #6B7280;
  --c-border:   #E5E7EB;
  --c-green:    #10B981;
  --c-red:      #EF4444;
  --c-amber:    #F59E0B;
  --c-indigo:   #6366F1;
  --r:          10px;
  --r-sm:       6px;
  --r-lg:       16px;
  --r-full:     9999px;
  --sh:         0 2px 12px rgba(0,0,0,.08);
  --sh-lg:      0 8px 32px rgba(0,0,0,.12);
  --sh-xl:      0 20px 60px rgba(0,0,0,.18);
  --hh:         64px;
  --ph:         36px;
  --cnh:        48px;
  --sw:         240px;
  --cw:         380px;
  --t:          .2s ease;
  --ts:         .35s cubic-bezier(.4,0,.2,1);
  --grad:       linear-gradient(135deg,#FF4800,#FF9500);
  --grad-hero:  linear-gradient(135deg,#0C0C18 0%,#1a1040 50%,#2d0a00 100%);
}

[data-theme="dark"] {
  --c-bg:     #0C0C18;
  --c-bg2:    #141428;
  --c-bg3:    #1C1C32;
  --c-surf:   #141428;
  --c-text:   #F9FAFB;
  --c-text2:  #D1D5DB;
  --c-muted:  #9CA3AF;
  --c-border: #2A2A40;
  --sh:       0 2px 12px rgba(0,0,0,.4);
  --sh-lg:    0 8px 32px rgba(0,0,0,.5);
  --sh-xl:    0 20px 60px rgba(0,0,0,.7);
  --c-orange-f: rgba(255,72,0,.12);
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent }
body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
  font-size: 15px;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; background:none }
img { max-width:100%; display:block }
ul,ol { list-style:none }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:var(--c-bg2) }
::-webkit-scrollbar-thumb { background:var(--c-orange); border-radius:var(--r-full) }

/* ── Promo bar ────────────────────────────────────────────── */
.promo-bar {
  background: var(--grad);
  color: #fff;
  height: var(--ph);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 200;
}
.promo-scroll {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: promoScroll 32s linear infinite;
  will-change: transform;
  flex-shrink: 0;
  width: max-content;
}
.promo-scroll span {
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  padding-right: 48px;
}
.promo-bar:hover .promo-scroll { animation-play-state:paused }
@keyframes promoScroll { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* ── Header ───────────────────────────────────────────────── */
.store-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surf);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow var(--t), background var(--ts), border-color var(--ts);
}
.store-header.scrolled { box-shadow: var(--sh-lg) }

.header-inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  height: var(--hh);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Hamburger */
.btn-hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--c-text2);
  transition: background var(--t);
  flex-shrink: 0;
}
.btn-hamburger:hover { background:var(--c-bg2) }

/* Logo */
.logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-icon { width:40px; height:40px; flex-shrink:0 }
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.logo-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -.5px;
  transition: color var(--ts);
}
.logo-tagline {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 500;
  transition: color var(--ts);
}

/* Search desktop */
.search-wrap {
  flex: 1;
  max-width: 560px;
}
.search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input {
  width: 100%;
  height: 44px;
  background: var(--c-bg2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 0 52px 0 18px;
  font-size: 14px;
  color: var(--c-text);
  outline: none;
  transition: border-color var(--t), background var(--ts), box-shadow var(--t);
}
.search-input::placeholder { color:var(--c-muted) }
.search-input:focus {
  border-color: var(--c-orange);
  background: var(--c-surf);
  box-shadow: 0 0 0 3px var(--c-orange-f);
}
.search-btn {
  position: absolute;
  right: 6px;
  width: 34px; height: 34px;
  background: var(--grad);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t), box-shadow var(--t);
}
.search-btn:hover { transform:scale(1.06); box-shadow:0 2px 8px rgba(255,72,0,.4) }
.search-btn svg { color:#fff }

/* Mobile search */
.search-wrap-mobile {
  display: none;
  padding: 8px 14px 10px;
  background: var(--c-surf);
  border-bottom: 1px solid var(--c-border);
}
.search-wrap-mobile .search-inner { max-width:none }

/* Header icons */
.header-icons {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text2);
  position: relative;
  transition: background var(--t), color var(--t);
}
.icon-btn:hover { background:var(--c-bg2); color:var(--c-orange) }

/* Theme icon toggle via data-theme */
[data-theme="light"] .icon-moon { display:none !important }
[data-theme="dark"]  .icon-sun  { display:none !important }
[data-theme="dark"]  .icon-moon { display:block !important }

/* Cart badge */
.cart-badge {
  position: absolute;
  top: 5px; right: 5px;
  min-width: 18px; height: 18px;
  background: var(--c-orange);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
  line-height: 1;
}
.cart-badge.pulse { animation:badgePulse .4s ease }
@keyframes badgePulse {
  0%   { transform:scale(1) }
  40%  { transform:scale(1.5) }
  70%  { transform:scale(.9) }
  100% { transform:scale(1) }
}

/* ── Category nav ──────────────────────────────────────────── */
.cat-nav {
  position: sticky;
  top: var(--hh);
  z-index: 90;
  background: var(--c-surf);
  border-bottom: 1px solid var(--c-border);
  height: var(--cnh);
  transition: background var(--ts), border-color var(--ts);
}
.cat-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-nav-inner::-webkit-scrollbar { display:none }
#cat-pills { display:contents }
.cat-pill {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-border);
  background: transparent;
  color: var(--c-text2);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.cat-pill:hover { border-color:var(--c-orange); color:var(--c-orange); background:var(--c-orange-f) }
.cat-pill.active { background:var(--c-orange); border-color:var(--c-orange); color:#fff; font-weight:600 }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 460px;
  background: var(--grad-hero);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .15;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.hero-text { max-width: 560px }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,72,0,.15);
  border: 1px solid rgba(255,72,0,.35);
  color: #FF9500;
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(28px,3.8vw,52px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin-bottom: 16px;
}
.hero-accent {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  margin-bottom: 32px;
  line-height: 1.65;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 28px;
  background: var(--grad);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-full);
  box-shadow: 0 4px 20px rgba(255,72,0,.45);
  transition: transform var(--t), box-shadow var(--t);
  border: none;
  cursor: pointer;
}
.btn-hero-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,72,0,.55) }
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-full);
  transition: background var(--t), transform var(--t);
  cursor: pointer;
}
.btn-hero-secondary:hover { background:rgba(255,255,255,.18); transform:translateY(-2px) }
.hero-trust {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-trust span {
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

/* Hero visual card */
.hero-visual { flex-shrink:0 }
.hero-product-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 190px;
  position: relative;
}
.hero-product-icon { display:flex; align-items:center; justify-content:center }
.hero-product-info { text-align:center }
.hero-prod-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  margin-bottom: 6px;
}
.hero-prod-price {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-orange);
}
.hero-badge-float {
  position: absolute;
  top: -12px; right: -12px;
  background: var(--c-red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--r-full);
  box-shadow: 0 3px 10px rgba(239,68,68,.45);
}

/* ── Section header ────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.section-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.section-header h2::before {
  content: '';
  display: block;
  width: 4px; height: 22px;
  background: var(--grad);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.section-line {
  flex: 1;
  height: 1px;
  background: var(--c-border);
  margin-left: 16px;
}

/* ── Flash Deals ────────────────────────────────────────────── */
.flash-deals {
  background: linear-gradient(135deg,#1a0500,#2d0a00 45%,#1a0020);
  padding: 28px 0;
  overflow: hidden;
}
.flash-header {
  max-width: 1440px;
  margin: 0 auto 18px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.flash-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.flash-icon { font-size:24px; animation:flickerFlash 1.8s ease-in-out infinite }
@keyframes flickerFlash { 0%,100%{opacity:1} 50%{opacity:.45} }
.flash-title { font-size:22px; font-weight:800; color:#fff }

.countdown {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,72,0,.3);
  padding: 6px 12px;
  border-radius: var(--r-sm);
}
.cd-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 26px;
}
.cd-seg span {
  font-size: 18px;
  font-weight: 800;
  color: #FF9500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-seg small {
  font-size: 9px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cd-sep { font-size:16px; font-weight:700; color:var(--c-orange); margin-bottom:8px }

.flash-ver-todo {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,.3);
  transition: color var(--t);
}
.flash-ver-todo:hover { color:#fff }

.flash-scroll {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px 8px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.flash-scroll::-webkit-scrollbar { display:none }
.flash-scroll .product-card { flex-shrink:0; width:180px }

/* ── Cat visual section ────────────────────────────────────── */
.cat-visual-section {
  max-width: 1440px;
  margin: 36px auto;
  padding: 0 20px;
}
.cat-visual-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 12px;
  margin-top: 20px;
}
.cat-visual-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cat-visual-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--c-orange) }
.cat-visual-icon {
  width: 56px; height: 56px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: var(--sh);
}
.cat-visual-card span:last-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text2);
}

/* ── Product card ───────────────────────────────────────────── */
.product-card {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  cursor: pointer;
  position: relative;
}
.product-card:not(.skeleton):hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-orange);
}
.product-card.skeleton {
  aspect-ratio: 3/4;
  background: linear-gradient(90deg,var(--c-bg3) 25%,var(--c-bg2) 50%,var(--c-bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-color: transparent;
  cursor: default;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.product-card__img-wrap {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--c-bg3);
}
.product-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-card__img { transform:scale(1.06) }

.product-card__img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 36px;
  color: rgba(255,255,255,.9);
}
.product-card__img-placeholder span:last-child {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: .65;
}
.product-card__wishlist {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  background: var(--c-surf);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh);
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
  border: 1px solid var(--c-border);
}
.product-card:hover .product-card__wishlist { opacity:1 }
.product-card__wishlist:hover { transform:scale(1.18) }
.product-card__wishlist svg { width:16px; height:16px; color:var(--c-muted) }
.product-card__wishlist:hover svg,
.product-card__wishlist.active svg { color:var(--c-red) }

/* Badges */
.badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
}
.badge-sale  { background:var(--c-red) }
.badge-new   { background:var(--c-indigo) }
.badge-flash { background:var(--c-amber); color:#1c1300 }
.badge-dest  { background:var(--c-orange) }

.product-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}
.product-card__brand {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.product-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.product-card__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.product-card__stars .star { color:var(--c-amber); font-size:13px }
.product-card__stars .star.empty { color:var(--c-border) }
.product-card__stars .count { color:var(--c-muted); font-size:11px; margin-left:3px }

.price-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.price-current { font-size:18px; font-weight:800; color:var(--c-orange); line-height:1 }
.price-original { font-size:13px; color:var(--c-muted); text-decoration:line-through; line-height:1 }
.price-discount {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-green);
  background: rgba(16,185,129,.1);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.product-card__add {
  margin-top: 10px;
  width: 100%; height: 40px;
  background: var(--grad);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform var(--t), box-shadow var(--t);
  border: none;
  cursor: pointer;
}
.product-card__add:hover { transform:scale(1.02); box-shadow:0 4px 14px rgba(255,72,0,.4) }
.product-card__add:active { transform:scale(.98) }
.product-card__add svg { width:15px; height:15px }

/* ── Store section ──────────────────────────────────────────── */
.store-section {
  max-width: 1440px;
  margin: 32px auto;
  padding: 0 20px;
}
.store-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* ── Sidebar filters ────────────────────────────────────────── */
.filters-sidebar {
  width: var(--sw);
  flex-shrink: 0;
}
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.filter-title { font-size:16px; font-weight:700; color:var(--c-text) }
.filter-clear {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-orange);
  cursor: pointer;
  background: none;
  border: none;
  transition: opacity var(--t);
}
.filter-clear:hover { opacity:.7 }

.filter-group {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 10px;
  transition: background var(--ts), border-color var(--ts);
}
.filter-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text2);
  transition: color var(--t);
  user-select: none;
}
.filter-option:hover { color:var(--c-orange) }
.filter-option input[type="checkbox"] { accent-color:var(--c-orange); width:14px; height:14px }

.price-range-wrap { padding:4px 0 }
.price-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 10px;
}
input[type="range"].price-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,var(--c-orange) var(--progress,100%),var(--c-border) var(--progress,100%));
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
}
input[type="range"].price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-orange);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(255,72,0,.35);
}

/* ── Products area ──────────────────────────────────────────── */
.products-area { flex:1; min-width:0 }

.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 10px;
  flex-wrap: wrap;
}
.products-count { font-size:14px; color:var(--c-muted) }
.products-count strong { color:var(--c-text) }

.sort-wrap { display:flex; align-items:center; gap:8px }
.sort-label { font-size:13px; color:var(--c-muted) }
.sort-select {
  height: 36px;
  padding: 0 30px 0 12px;
  background: var(--c-surf);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-text);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--t);
}
.sort-select:focus { border-color:var(--c-orange) }

.products-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}

.load-more-wrap { display:flex; justify-content:center; margin-top:32px }
.btn-load-more {
  height: 44px;
  padding: 0 32px;
  background: transparent;
  border: 2px solid var(--c-orange);
  color: var(--c-orange);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  transition: background var(--t), color var(--t), transform var(--t);
}
.btn-load-more:hover { background:var(--c-orange); color:#fff; transform:translateY(-1px) }

/* Empty state */
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: var(--c-muted);
}
.empty-state .icon { font-size:52px; margin-bottom:14px; opacity:.55 }
.empty-state h3 { font-size:18px; font-weight:700; color:var(--c-text2); margin-bottom:8px }
.empty-state p { font-size:14px; max-width:300px; margin:0 auto }

/* ── Footer ─────────────────────────────────────────────────── */
.store-footer {
  background: #0C0C18;
  color: rgba(255,255,255,.65);
  padding: 52px 20px 28px;
  margin-top: 64px;
}
[data-theme="light"] .store-footer { background:#111827 }

.footer-top {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.footer-logo span { font-size:22px; font-weight:800; color:#fff }
.footer-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.48);
  max-width: 220px;
  margin-bottom: 18px;
}
.footer-social { display:flex; gap:8px }
.social-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.social-btn:hover { background:var(--c-orange-f); border-color:var(--c-orange); transform:translateY(-2px) }

.footer-links { display:flex; flex-direction:column }
.footer-links h4 {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,.48);
  padding: 5px 0;
  transition: color var(--t), padding-left var(--t);
}
.footer-links a:hover { color:var(--c-orange-l); padding-left:5px }

.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.payment-methods { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.pm-label { font-size:12px; color:rgba(255,255,255,.38) }
.pm-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.58);
}
.pm-nequi     { color:#00C1AF }
.pm-daviplata { color:#E83B8E }
.pm-amex      { color:#5594d2 }
.footer-copy { font-size:12px; color:rgba(255,255,255,.3) }
.footer-copy a { color:rgba(255,255,255,.45) }
.footer-copy a:hover { color:var(--c-orange) }

/* ── Cart ───────────────────────────────────────────────────── */
.cart-overlay {
  position: fixed; inset:0;
  background: rgba(0,0,0,.5);
  z-index: 500;
  opacity: 0; pointer-events: none;
  backdrop-filter: blur(3px);
  transition: opacity var(--ts);
}
.cart-overlay.open { opacity:1; pointer-events:all }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: var(--cw);
  height: 100vh;
  background: var(--c-surf);
  z-index: 501;
  box-shadow: var(--sh-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--ts);
}
.cart-drawer.open { transform:translateX(0) }

.cart-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-header h3 { font-size:18px; font-weight:800; color:var(--c-text) }
.cart-close {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: background var(--t), color var(--t);
}
.cart-close:hover { background:var(--c-bg2); color:var(--c-text) }

.cart-items { flex:1; overflow-y:auto; padding:16px 20px }

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 12px;
  color: var(--c-muted);
  text-align: center;
}
.cart-empty p { font-size:14px }
.btn-ver-productos {
  height: 38px; padding:0 20px;
  background: var(--grad);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  cursor: pointer;
}

.cart-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--c-border) }
.cart-item:last-child { border-bottom:none }
.cart-item__img {
  width: 64px; height: 64px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--c-bg3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
}
.cart-item__info { flex:1; min-width:0 }
.cart-item__name {
  font-size: 13px; font-weight:600; color:var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.cart-item__price { font-size:15px; font-weight:800; color:var(--c-orange) }
.cart-item__qty { display:flex; align-items:center; gap:8px; margin-top:8px }
.qty-btn {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border);
  display: flex; align-items:center; justify-content:center;
  font-size: 16px; font-weight:700; color:var(--c-text2);
  transition: border-color var(--t), background var(--t), color var(--t);
  line-height: 1;
}
.qty-btn:hover { border-color:var(--c-orange); background:var(--c-orange-f); color:var(--c-orange) }
.qty-num { font-size:14px; font-weight:700; min-width:20px; text-align:center; color:var(--c-text) }
.cart-item__remove {
  color: var(--c-muted); padding:4px;
  border-radius: var(--r-sm);
  align-self: flex-start; margin-top:2px;
  transition: color var(--t), background var(--t);
}
.cart-item__remove:hover { color:var(--c-red); background:rgba(239,68,68,.1) }
.cart-item__remove svg { width:16px; height:16px }

.cart-footer { padding:14px 20px 20px; border-top:1px solid var(--c-border) }
.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--c-muted);
}
.cart-total-price { font-size:22px; font-weight:800; color:var(--c-text) }
.cart-shipping-note { font-size:12px; color:var(--c-muted); margin-bottom:14px }
.btn-checkout {
  width: 100%; height: 50px;
  background: linear-gradient(135deg,#25D366,#128C7E);
  color: #fff;
  border-radius: var(--r);
  font-size: 15px; font-weight:700;
  display: flex; align-items:center; justify-content:center; gap:8px;
  border: none; cursor:pointer;
  transition: transform var(--t), box-shadow var(--t);
  box-shadow: 0 4px 16px rgba(37,211,102,.35);
  margin-bottom: 8px;
}
.btn-checkout:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,211,102,.45) }
.btn-checkout-pago {
  width: 100%; height: 44px;
  background: var(--grad);
  color: #fff;
  border-radius: var(--r);
  font-size: 14px; font-weight:700;
  display: flex; align-items:center; justify-content:center;
  border: none; cursor:pointer;
  transition: opacity var(--t);
  box-shadow: 0 3px 12px rgba(255,72,0,.3);
}
.btn-checkout-pago:hover { opacity:.88 }

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1000;
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--r);
  padding: 12px 16px;
  min-width: 270px; max-width: 360px;
  box-shadow: var(--sh-lg);
  font-size: 13px; font-weight:600; color:var(--c-text);
  opacity: 0;
  transform: translateX(130%);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
  line-height: 1.4;
}
.toast.show { opacity:1; transform:translateX(0); pointer-events:all }

/* ── Back to top ─────────────────────────────────────────────── */
.btn-backtop {
  position: fixed;
  bottom: 80px; right: 24px;
  width: 44px; height: 44px;
  background: var(--grad);
  color: #fff;
  border-radius: var(--r-full);
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(255,72,0,.4);
  opacity: 0; pointer-events:none;
  transform: translateY(20px);
  transition: opacity var(--t), transform var(--t);
  z-index: 200;
}
.btn-backtop.visible { opacity:1; pointer-events:all; transform:translateY(0) }
.btn-backtop:hover { transform:translateY(-3px) }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .products-grid { grid-template-columns:repeat(3,1fr) }
  .cat-visual-grid { grid-template-columns:repeat(3,1fr) }
  .footer-top { grid-template-columns:1fr 1fr 1fr }
  .footer-brand { grid-column:1/-1 }
  .footer-desc { max-width:400px }
}
@media (max-width: 960px) {
  .products-grid { grid-template-columns:repeat(3,1fr) }
  .filters-sidebar { display:none }
  .hero-visual { display:none }
  .hero { min-height:340px }
  .cat-visual-grid { grid-template-columns:repeat(3,1fr) }
  .footer-top { grid-template-columns:1fr 1fr }
}
@media (max-width: 640px) {
  :root { --hh:56px; --cw:100vw; --ph:28px }
  .promo-scroll span { font-size:11px }
  .header-inner { padding:0 12px; gap:8px }
  .logo-name { font-size:17px }
  .logo-tagline { display:none }
  .search-wrap { display:none }
  .search-wrap-mobile { display:block }
  .btn-hamburger { display:flex }
  .hero { min-height:280px }
  .hero-content { padding:32px 20px }
  .hero-title { font-size:25px }
  .hero-sub { font-size:14px; margin-bottom:20px }
  .hero-trust { display:none }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:10px }
  .product-card__name { font-size:12px }
  .price-current { font-size:15px }
  .product-card__add { height:36px; font-size:12px }
  .store-section { padding:0 10px; margin:20px auto }
  .cat-visual-section { margin:20px auto; padding:0 10px }
  .cat-visual-grid { grid-template-columns:repeat(3,1fr); gap:8px }
  .cat-visual-card { padding:12px 6px }
  .cat-visual-icon { width:44px; height:44px; font-size:22px }
  .section-header h2 { font-size:18px }
  .flash-header { padding:0 14px }
  .flash-scroll { padding:0 14px 8px }
  .flash-title { font-size:17px }
  .cd-seg span { font-size:15px }
  .footer-top { grid-template-columns:1fr; gap:24px }
  .footer-bottom { flex-direction:column; align-items:flex-start }
  .toast { min-width:0; max-width:calc(100vw - 24px); bottom:12px; right:12px; left:12px }
  .btn-backtop { bottom:60px; right:14px }
}
@media (max-width: 400px) {
  .products-grid { gap:8px }
  .product-card__body { padding:8px 10px 10px }
  .cat-visual-grid { grid-template-columns:repeat(2,1fr) }
}