/* YAGUAR Store — store.css — Complete redesign 2026 */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --gold:        #C9A227;
  --gold-l:      #D4AF37;
  --gold-d:      #8B6914;
  --gold-xs:     rgba(201,162,39,.07);
  --gold-sm:     rgba(201,162,39,.15);
  --serif:       'Cinzel',serif;
  --serif-body:  'Cormorant Garamond',Georgia,serif;
  --sans:        'Inter',system-ui,sans-serif;
  --ease:        cubic-bezier(.4,0,.2,1);
  --fast:        .15s;
  --mid:         .25s;
  --ts:          .35s cubic-bezier(.4,0,.2,1);

  /* Brand aliases — used by checkout, FAB, PD-CTAs */
  --c-brand:    #C9A227;
  --c-brand-l:  #D4AF37;
  --c-brand-d:  #8B6914;
  --c-brand-f:  rgba(201,162,39,.10);
  --c-green:    #10B981;
  --c-red:      #EF4444;

  /* Border-radius scale — Yaguar is angular */
  --r:          2px;
  --r-sm:       2px;
  --r-lg:       6px;
  --r-full:     9999px;
}

[data-theme="dark"] {
  --bg:          #090909;
  --bg-2:        #111111;
  --bg-3:        #191919;
  --bg-4:        #222222;
  --border:      #2C2C2C;
  --border-2:    #3A3A3A;
  --text:        #F0EBE2;
  --text-2:      #B8AFA3;
  --text-3:      #887E74;
  --shadow:      0 4px 24px rgba(0,0,0,.6);
  --shadow-sm:   0 2px 12px rgba(0,0,0,.4);
  --promo-bg:    #0A0A0A;
  --header-bg:   rgba(9,9,9,.96);
  --card-bg:     #111111;
  --card-hover:  #161616;
  /* Stronger gold tints for dark-bg contrast */
  --gold-xs:     rgba(201,162,39,.18);
  --gold-sm:     rgba(201,162,39,.28);

  /* --c-* aliases for dark mode */
  --c-bg:      #111111;
  --c-bg2:     #191919;
  --c-bg3:     #222222;
  --c-text:    #F0EBE2;
  --c-text2:   #B8AFA3;
  --c-muted:   #887E74;
  --c-border:  #2C2C2C;
}

[data-theme="light"] {
  --bg:          #F8F5EF;
  --bg-2:        #FFFFFF;
  --bg-3:        #F2EDE3;
  --bg-4:        #E8E0D0;
  --border:      #DDD6C4;
  --border-2:    #C8BDA8;
  --text:        #0D0A06;
  --text-2:      #4A3E30;
  --text-3:      #9A8878;
  --shadow:      0 4px 24px rgba(0,0,0,.10);
  --shadow-sm:   0 2px 12px rgba(0,0,0,.07);
  --promo-bg:    #0D0A06;
  --header-bg:   rgba(248,245,239,.97);
  --card-bg:     #FFFFFF;
  --card-hover:  #FEFCF9;

  /* --c-* aliases for light mode */
  --c-bg:      #FFFFFF;
  --c-bg2:     #F8F5EF;
  --c-bg3:     #F2EDE3;
  --c-text:    #0D0A06;
  --c-text2:   #4A3E30;
  --c-muted:   #9A8878;
  --c-border:  #DDD6C4;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block }
a { text-decoration:none; color:inherit }
button { cursor:pointer; border:none; background:none; font-family:inherit }
input,select { font-family:inherit }
svg { flex-shrink:0 }
ul,ol { list-style:none }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:var(--bg-3) }
::-webkit-scrollbar-thumb { background:var(--gold-d); border-radius:9999px }

/* ── Promo bar ───────────────────────────────────────────── */
.promo-bar {
  background: var(--promo-bg);
  border-bottom: 1px solid var(--gold-d);
  overflow: hidden;
  height: 34px;
  display: flex;
  align-items: center;
}
.promo-scroll {
  display: flex;
  white-space: nowrap;
  animation: scrollx 44s linear infinite;
  will-change: transform;
}
.promo-bar:hover .promo-scroll { animation-play-state: paused }
.promo-scroll span {
  padding: 0 1rem;
  font-size: 12.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #D4AF37;
  font-weight: 600;
  font-family: var(--serif);
  flex-shrink: 0;
}
@keyframes scrollx { 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } }

/* ── Header ──────────────────────────────────────────────── */
.store-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--mid) var(--ease);
}
.store-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35) }
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.btn-hamburger {
  display: none;
  color: var(--text-2);
  padding: .35rem;
  border-radius: 6px;
  transition: color var(--fast);
  align-items: center;
  justify-content: center;
}
.btn-hamburger:hover { color: var(--gold) }

/* Logo */
.logo-mark {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(201,162,39,.25));
}
.logo-wordmark { display:flex; flex-direction:column; line-height:1 }
.logo-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--gold);
  line-height: 1;
}
.logo-tagline {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 3px;
  font-family: var(--sans);
}

/* Search */
.search-wrap { flex:1; max-width:520px; margin:0 auto }
.search-inner { position:relative; display:flex; align-items:center }
.search-input {
  width: 100%;
  padding: .55rem 2.8rem .55rem 1rem;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: .875rem;
  transition: border-color var(--fast), box-shadow var(--fast);
  outline: none;
}
.search-input::placeholder { color: var(--text-3) }
.search-input:focus {
  border-color: var(--gold-d);
  box-shadow: 0 0 0 3px var(--gold-xs);
}
.search-btn {
  position: absolute;
  right: .7rem;
  color: var(--text-3);
  padding: .2rem;
  transition: color var(--fast);
}
.search-btn:hover { color: var(--gold) }
.search-wrap-mobile {
  display: none;
  padding: .5rem 1rem;
  border-top: 1px solid var(--border);
}
.header-icons { display:flex; align-items:center; gap:.25rem; flex-shrink:0 }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  color: var(--text-2);
  transition: color var(--fast), background var(--fast);
  position: relative;
}
.icon-btn:hover { color:var(--gold); background:var(--gold-xs) }
.cart-badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--gold);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.cart-badge.pulse { animation: badgePulse .4s ease }
@keyframes badgePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }

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

/* ── Mobile nav drawer ───────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.96);
  z-index: 900;
  flex-direction: column;
  padding: 0;
  transform: translateX(-100%);
  transition: transform var(--ts);
}
.mobile-nav.open {
  display: flex;
  transform: translateX(0);
}
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(201,162,39,.2);
}
.mobile-nav-logo {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--gold);
}
.mobile-nav-close {
  width: 36px; height: 36px;
  display: flex; align-items:center; justify-content:center;
  color: var(--text-3);
  border-radius: 4px;
  transition: color var(--fast);
}
.mobile-nav-close:hover { color: var(--gold) }
.mobile-nav-links {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}
.mobile-nav-group {
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.mobile-nav-group-title {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: .5rem 1.5rem;
  font-family: var(--serif);
  opacity: .75;
}
.mobile-nav-link {
  display: block;
  padding: .75rem 1.5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .05em;
  transition: color var(--fast), background var(--fast);
}
.mobile-nav-link:hover {
  color: var(--gold);
  background: rgba(201,162,39,.05);
}
.mobile-nav-link--col {
  font-family: var(--serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* ── Category nav ────────────────────────────────────────── */
.cat-nav {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 57px;
  z-index: 150;
  overflow: hidden;
}
.cat-nav-inner {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;
}
.cat-nav-inner::-webkit-scrollbar { display:none }
.cat-pill {
  padding: .75rem 1.25rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-family: var(--serif);
}
.cat-pill:hover { color: var(--text) }
.cat-pill.active { color:var(--gold); border-bottom-color:var(--gold) }

/* ── Hero banner (3-slide carousel) ─────────────────────── */
.hero-banner {
  position: relative;
  overflow: hidden;
  height: clamp(480px, 68vh, 700px);
}
.hero-slides {
  display: flex;
  height: 100%;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hero-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5,4,2,.82) 0%, rgba(5,4,2,.54) 38%, rgba(5,4,2,.2) 62%, transparent 84%);
}
.hero-slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.hero-slide-text { max-width: 580px }
.hero-slide-text--light .hero-slide-h1 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-slide-h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 18px;
  letter-spacing: .05em;
  color: #fff;
}
.hero-slide-h1 em {
  font-style: italic;
  color: var(--gold);
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: 1.05em;
}
.hero-slide-p {
  font-size: .95rem;
  color: rgba(255,255,255,.82);
  line-height: 1.72;
  margin-bottom: 2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
  font-family: var(--serif-body);
  font-size: 1.05rem;
}
.hero-eyebrow {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,162,39,.5);
  padding: .35rem 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--serif);
}
.hero-eyebrow--light {
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}
.hero-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2.2rem;
  background: var(--gold);
  color: #000;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--serif);
  transition: background .15s, transform .15s;
  border: 2px solid var(--gold);
  cursor: pointer;
}
.btn-hero-primary:hover { background: var(--gold-l); transform: translateY(-2px) }
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  background: transparent;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--serif);
  border: 2px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
  transition: border-color .15s, color .15s;
  cursor: pointer;
}
.btn-hero-secondary:hover { border-color: var(--gold); color: var(--gold) }

/* Hero deco rings */
.hero-slide-deco { position:relative; flex-shrink:0 }
.hero-deco-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.2);
  pointer-events: none;
}
.hero-deco-ring--1 { width:300px; height:300px; right:-80px; top:50%; transform:translateY(-50%) }
.hero-deco-ring--2 { width:460px; height:460px; right:-160px; top:50%; transform:translateY(-50%); border-color:rgba(201,162,39,.1) }

/* Hero arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .15s;
  border: 1px solid rgba(201,162,39,.3);
  cursor: pointer;
}
.hero-arrow:hover { background: rgba(201,162,39,.35); border-color: var(--gold) }
.hero-arrow--prev { left: 1.5rem }
.hero-arrow--next { right: 1.5rem }

/* Hero dots */
.hero-dots {
  position: absolute;
  bottom: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .6rem;
  z-index: 10;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  border: 1.5px solid rgba(255,255,255,.5);
  transition: background .2s, transform .2s;
  cursor: pointer;
}
.hero-dot.active { background:#fff; border-color:#fff; transform:scale(1.3) }

/* Hero trust strip */
.hero-trust-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: .65rem 1rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  flex-wrap: wrap;
  z-index: 5;
}
.hero-trust-strip span {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-family: var(--serif);
}
.trust-sep { color:var(--gold); opacity:.6 }

/* ── Section separator ───────────────────────────────────── */
.section-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.section-sep::before,
.section-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-d));
}
.section-sep::after { background: linear-gradient(to left, transparent, var(--gold-d)) }
.section-sep-icon { font-size:.75rem; color:var(--gold); letter-spacing:.25em }

/* ── Flash Deals section ─────────────────────────────────── */
.flash-deals {
  background: linear-gradient(135deg,#0C0905,#1A1308 45%,#100A03);
  padding: 28px 0;
  overflow: hidden;
}
.flash-header {
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 1.5rem;
  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:pulseFlash 2.4s ease-in-out infinite }
@keyframes pulseFlash { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.92)} }
.flash-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.flash-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.flash-nav { display:flex; gap:6px }
.flash-nav-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,162,39,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.flash-nav-btn:hover { background:rgba(201,162,39,.25); border-color:var(--gold); color:var(--gold) }

.flash-ver-todo {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  transition: color var(--fast);
  font-family: var(--serif);
}
.flash-ver-todo:hover { color: var(--gold) }

.countdown {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,162,39,.3);
  padding: 6px 12px;
  border-radius: 4px;
}
.cd-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 24px;
}
.cd-seg span { font-size:17px; font-weight:800; color:#D4A820; line-height:1; font-variant-numeric:tabular-nums }
.cd-seg small { font-size:8px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.5px }
.cd-sep { font-size:15px; font-weight:700; color:var(--gold); margin-bottom:8px }

.flash-scroll {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 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:190px }

/* ── Collections section ─────────────────────────────────── */
.colecciones-section { padding: 0 0 2rem; background: var(--bg) }
.colecciones-header {
  text-align: center;
  padding: 0 1.5rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.colecciones-header h2 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
}
.colecciones-header-line {
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 1rem auto 0;
}
.colecciones-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.coleccion-card {
  position: relative;
  aspect-ratio: .72/1;
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.coleccion-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);
  transition: background .3s;
}
.coleccion-card:hover .coleccion-overlay { background: rgba(0,0,0,.22) }
.coleccion-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem 1.5rem;
  z-index: 2;
}
.coleccion-eyebrow {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: .4rem;
  font-family: var(--serif);
}
.coleccion-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
  letter-spacing: .08em;
  line-height: 1.1;
}
.coleccion-desc {
  font-size: .8rem;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  margin-bottom: 1rem;
  font-family: var(--serif-body);
}
.coleccion-cta {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--serif);
  transition: letter-spacing .2s;
  font-weight: 600;
}
.coleccion-card:hover .coleccion-cta { letter-spacing: .3em }

/* Collection card backgrounds */
.coleccion--ejecutivo { background:linear-gradient(145deg,#1a0f06 0%,#2d1a0a 35%,#4a2e14 65%,#6b4520 100%) }
.coleccion--nomada    { background:linear-gradient(145deg,#0a1208 0%,#162010 35%,#2a3d1a 65%,#3d5a24 100%) }
.coleccion--urbano    { background:linear-gradient(145deg,#080808 0%,#141414 35%,#222222 65%,#3a3a3a 100%) }
.coleccion--esencial  { background:linear-gradient(145deg,#1a1206 0%,#2e2008 35%,#5a3d10 65%,#8B6914 100%) }

/* ── Cat visual section ──────────────────────────────────── */
.cat-visual-section { padding: 1rem 0 3.5rem; background: var(--bg-2) }
.section-heading { text-align:center; padding:3rem 1.5rem 2rem; max-width:1200px; margin:0 auto }
.section-heading h2 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.5vw,1.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.section-heading-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: .75rem 0 0;
}
.section-heading-line::before,
.section-heading-line::after {
  content:'';
  flex:1;
  max-width:80px;
  height:1px;
  background:linear-gradient(to right,transparent,var(--gold-d));
}
.section-heading-line::after { background:linear-gradient(to left,transparent,var(--gold-d)) }
.section-heading-line span { font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold) }

.cat-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap: 1px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  border: 1px solid var(--border);
}
.cat-visual-card {
  background: var(--bg-2);
  padding: 2.25rem 1.25rem 1.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border: 1px solid transparent;
  transition: background var(--fast), border-color var(--mid);
  position: relative;
  overflow: hidden;
}
.cat-visual-card::after {
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.cat-visual-card:hover { background:var(--bg-3); border-color:var(--border) }
.cat-visual-card:hover::after { transform:scaleX(1) }
.cat-icon-wrap {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.cat-icon-wrap svg { width:42px; height:42px }
.cat-visual-label {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  text-align: center;
  font-family: var(--serif);
}

/* ── Store section layout ────────────────────────────────── */
.store-section { padding:3rem 0 5rem; background:var(--bg) }
.store-layout {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  justify-content: center;
  box-sizing: border-box;
}

/* Filters sidebar */
.filters-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 120px;
  align-self: flex-start;
  display: none;
}
@media(min-width:1024px){ .filters-sidebar { display:block } }
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.filter-title {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  font-family: var(--serif);
}
.filter-clear { font-size:.72rem; letter-spacing:.06em; color:var(--gold); transition:opacity var(--fast) }
.filter-clear:hover { opacity:.7 }
.filter-group { margin-bottom:1.75rem }
.filter-group-title {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .75rem;
  font-weight: 700;
  font-family: var(--serif);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .825rem;
  color: var(--text-2);
  padding: .35rem 0;
  cursor: pointer;
  transition: color var(--fast);
}
.filter-option:hover { color: var(--text) }
.filter-option input[type="checkbox"] { accent-color:var(--gold); width:14px; height:14px }
.price-range-wrap { padding:.25rem 0 }
.price-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--text-2);
  margin-bottom: .65rem;
}
.price-slider {
  width: 100%;
  appearance: none;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.price-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold-d);
}
.price-slider::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--gold); cursor:pointer; border:none;
}

/* Products area */
.products-area { flex:1; min-width:0 }
.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.products-count { font-size:.8rem; color:var(--text-2); letter-spacing:.04em }
.products-count strong { color:var(--text); font-weight:600 }
.sort-wrap { display:flex; align-items:center; gap:.65rem }
.sort-label {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  font-family: var(--serif);
}
.sort-select {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .8rem;
  padding: .4rem .75rem;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.sort-select:focus { border-color:var(--gold-d) }

/* ── Product grid ────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
  gap: 16px;
}
.product-card {
  background: var(--card-bg);
  cursor: pointer;
  transition: background var(--fast), box-shadow var(--fast);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.product-card:hover { background: var(--card-hover); box-shadow: var(--shadow-sm) }
.product-card.skeleton {
  min-height: 340px;
  background: var(--bg-3);
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { 0%,100%{opacity:.5} 50%{opacity:1} }

.product-card__img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-3);
}
.product-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card__img { transform:scale(1.04) }
.product-card__img-placeholder {
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
}
.product-card__img-placeholder svg { opacity:.35; color:var(--gold) }
.product-card__img-placeholder span { font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3) }

.product-card__wishlist {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: color var(--fast), background var(--fast);
  z-index: 2;
}
.product-card__wishlist:hover,
.product-card__wishlist.active { color:var(--gold); background:rgba(0,0,0,.65) }
.product-card__wishlist.active svg { fill:var(--gold) }

.badge {
  position: absolute;
  top: .7rem; left: .7rem;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .25rem .55rem;
  z-index: 3;
}
.badge-sale { background:var(--gold); color:#000 }
.badge-dest { background:transparent; color:var(--gold); border:1px solid var(--gold-d) }

/* Quick view overlay */
.product-card__quickview {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 0 10px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.product-card:hover .product-card__quickview { transform: translateY(0) }
.product-card__quickview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: .55rem;
  background: rgba(201,162,39,.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(201,162,39,.4);
  color: #fff;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--serif);
  transition: background .15s;
  cursor: pointer;
}
.product-card__quickview-btn:hover { background:rgba(201,162,39,.35) }

.product-card__body {
  padding: 1.1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}
.product-card__brand {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  font-family: var(--serif);
}
.product-card__name {
  font-size: .875rem;
  color: var(--text);
  line-height: 1.4;
  font-weight: 400;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__stars { display:flex; align-items:center; gap:.15rem; margin:.1rem 0 }
.star { color:var(--gold); font-size:.75rem }
.star.empty { color:rgba(201,162,39,.4) }
.count { font-size:.7rem; color:var(--text-2); margin-left:.25rem }
.price-wrap { display:flex; align-items:center; gap:.5rem; margin-top:.2rem }
.price-current { font-size:1rem; font-weight:700; color:var(--text) }
.price-original { font-size:.8rem; color:var(--text-2); text-decoration:line-through; opacity:.7 }
.price-discount {
  font-size: .7rem;
  background: var(--gold-xs);
  color: var(--gold);
  border: 1px solid var(--gold-d);
  padding: .1rem .35rem;
  letter-spacing: .06em;
}

.product-card__btns { display:flex; gap:.4rem; margin-top:.65rem }
.product-card__detail {
  flex: 0 0 auto;
  padding: .65rem .75rem;
  background: var(--gold-xs);
  color: var(--gold);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--gold-d);
  transition: background var(--fast), color var(--fast);
  white-space: nowrap;
  font-family: var(--serif);
}
.product-card__detail:hover { background:var(--gold); color:#000 }
.product-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex: 1;
  padding: .65rem .5rem;
  background: transparent;
  color: var(--text);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--border-2);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
  cursor: pointer;
  font-family: var(--serif);
}
.product-card__add:hover { background:var(--gold); color:#000; border-color:var(--gold) }

/* Load more */
.load-more-wrap { text-align:center; padding:2.5rem 0 0 }
.btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2.5rem;
  background: transparent;
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--gold-d);
  transition: background var(--fast), color var(--fast);
  font-family: var(--serif);
  cursor: pointer;
}
.btn-load-more:hover { background:var(--gold); color:#000 }

/* Empty state */
.empty-state { grid-column:1/-1; text-align:center; padding:5rem 2rem }
.empty-state h3 { font-family:var(--serif); font-size:1.4rem; color:var(--text-2); margin-bottom:.75rem }
.empty-state p { color:var(--text-3); font-size:.9rem }

/* ── Product detail overlay / drawer ─────────────────────── */
.pd-overlay {
  position: fixed; inset:0;
  background: rgba(0,0,0,.75);
  z-index: 700;
  opacity: 0; pointer-events:none;
  transition: opacity var(--mid);
}
.pd-overlay.open { opacity:1; pointer-events:all }
.pd-drawer {
  position: fixed;
  top:0; right:0; bottom:0;
  width: min(640px,100vw);
  background: var(--bg-2);
  z-index: 800;
  transform: translateX(100%);
  transition: transform var(--mid) var(--ease);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}
.pd-drawer.open { transform:none }
.pd-close-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-2);
}
.pd-close-bar span {
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--serif);
}
.pd-close {
  width:36px; height:36px;
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3);
  transition:color var(--fast),background var(--fast);
}
.pd-close:hover { color:var(--text); background:var(--bg-4) }

#pd-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Gallery */
.pd-gallery {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-3);
  overflow: hidden;
  flex-shrink: 0;
}
.pd-gallery__main-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.pd-zoom-wrap {
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  cursor:zoom-in;
}
.pd-gallery__main {
  width:100%;height:100%;
  object-fit:contain;
  padding:1rem;
  background:var(--bg-3);
  transition:transform .22s ease;
}
.pd-gallery__expand {
  position:absolute;
  top:.75rem;left:.75rem;
  width:32px;height:32px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);
  transition:color var(--fast),background var(--fast);
  cursor:pointer;
  z-index:2;
  border:1px solid rgba(201,162,39,.25);
}
.pd-gallery__expand:hover { color:var(--gold); background:rgba(0,0,0,.7) }
.pd-gallery__thumbs {
  display:flex;gap:.5rem;
  padding:.75rem 1.25rem;
  background:var(--bg-3);
  border-bottom:1px solid var(--border);
  overflow-x:auto;
}
.pd-gallery__thumbs::-webkit-scrollbar { display:none }
.pd-gallery__thumb {
  width:60px;height:60px;
  object-fit:cover;
  border:2px solid transparent;
  border-radius:2px;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color var(--fast);
}
.pd-gallery__thumb.active,
.pd-gallery__thumb:hover { border-color:var(--gold) }

/* PD body */
.pd-body {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pd-cat {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  font-family: var(--serif);
}
.pd-sku {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
  font-family: var(--serif);
}
.pd-name {
  font-family: var(--serif-body);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.pd-stars { display:flex; align-items:center; gap:.25rem }
.pd-star { color:var(--gold); font-size:.9rem }
.pd-star.empty { color:rgba(201,162,39,.4) }
.pd-count { font-size:.75rem; color:var(--text-2); margin-left:.25rem }
.pd-price-wrap { display:flex; align-items:baseline; gap:.75rem }
.pd-price { font-size:1.75rem; font-weight:600; color:var(--gold) }
.pd-price-orig { font-size:1rem; color:var(--text-3); text-decoration:line-through }
.pd-disc {
  font-size: .75rem;
  background: var(--gold-xs);
  color: var(--gold);
  border: 1px solid var(--gold-d);
  padding: .15rem .5rem;
}
.pd-desc {
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.6;
}
.pd-variants-label {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .35rem;
  font-family: var(--serif);
}
.pd-variants { display:flex; flex-wrap:wrap; gap:.4rem }
.pd-variant {
  padding: .3rem .85rem;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.pd-variant.active,
.pd-variant:hover { border-color:var(--gold); color:var(--text); background:var(--gold-xs) }
.pd-tags { display:flex; flex-wrap:wrap; gap:.35rem }
.pd-tag {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  padding: .2rem .55rem;
}

/* Accordion */
.pd-accordion { margin-top:18px; border-top:1px solid var(--border) }
.pd-acc-item { border-bottom:1px solid var(--border) }
.pd-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .08em;
  text-align: left;
  transition: color .15s;
  text-transform: uppercase;
}
.pd-acc-header:hover { color:var(--gold) }
.pd-acc-chev {
  flex-shrink: 0;
  transition: transform .28s ease;
  color: var(--text-3);
}
.pd-acc-item.open .pd-acc-chev { transform:rotate(180deg) }
.pd-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .3s ease;
}
.pd-acc-item.open .pd-acc-body { max-height:460px; padding-bottom:14px }
.pd-acc-desc { font-size:.875rem; color:var(--text-2); line-height:1.7; margin:0 }
.pd-acc-list {
  font-size:.82rem;
  color:var(--text-2);
  line-height:1.75;
  margin:0;
  padding-left:18px;
  list-style:disc;
}
.pd-acc-list li { margin-bottom:2px }

/* PD trust row */
.pd-trust-row {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.pd-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.pd-trust-item svg { color:var(--gold); opacity:.7 }
.pd-trust-item span {
  font-size: .62rem;
  color: var(--text-2);
  text-align: center;
  letter-spacing: .05em;
  font-weight: 700;
  font-family: var(--serif);
  text-transform: uppercase;
  line-height: 1.2;
}

/* PD actions */
.pd-actions {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 1rem 1.25rem;
  flex-shrink: 0;
}
.pd-actions-btns { display:flex; gap:10px }
.pd-btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem;
  background: var(--gold);
  color: #000;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background var(--fast);
  font-family: var(--serif);
  cursor: pointer;
  flex: 1;
  border: none;
}
.pd-btn-add:hover { background:var(--gold-l) }
.pd-btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem;
  background: transparent;
  color: var(--text-2);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  transition: border-color var(--fast), color var(--fast);
  font-family: var(--serif);
  cursor: pointer;
  flex: 1;
}
.pd-btn-wa:hover { border-color:var(--gold-d); color:var(--gold) }
.pd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-3);
  font-size: .875rem;
  letter-spacing: .1em;
  font-family: var(--serif);
}

/* ── Cart drawer ─────────────────────────────────────────── */
.cart-overlay {
  position: fixed; inset:0;
  background: rgba(0,0,0,.7);
  z-index: 500;
  opacity: 0; pointer-events:none;
  transition: opacity var(--mid);
}
.cart-overlay.open { opacity:1; pointer-events:all }
.cart-drawer {
  position: fixed;
  top:0; right:0; bottom:0;
  width: min(400px,100vw);
  background: var(--bg-2);
  z-index: 600;
  transform: translateX(100%);
  transition: transform var(--mid) var(--ease);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}
.cart-drawer.open { transform:none }
.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-header h3 { font-family:var(--serif); font-size:1rem; color:var(--text); letter-spacing:.08em }
.cart-close {
  width:36px; height:36px;
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3);
  transition:color var(--fast),background var(--fast);
  cursor:pointer;
}
.cart-close:hover { color:var(--text); background:var(--bg-4) }
.cart-items { flex:1; overflow-y:auto; padding:1rem 1.5rem }
.cart-empty {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;min-height:300px;color:var(--text-3);
}
.cart-empty p { font-size:.9rem; letter-spacing:.04em }
.btn-ver-productos {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-d);
  padding: .55rem 1.5rem;
  transition: background var(--fast), color var(--fast);
  font-family: var(--serif);
  cursor: pointer;
}
.btn-ver-productos:hover { background:var(--gold); color:#000 }
.cart-item { display:flex; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--border); align-items:flex-start }
.cart-item__img {
  width:64px; height:64px;
  object-fit:cover;border-radius:2px;
  background:var(--bg-3);flex-shrink:0;
}
.cart-item__info { flex:1; min-width:0 }
.cart-item__name {
  font-size:.825rem; color:var(--text); line-height:1.35;
  margin-bottom:.3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cart-item__price { font-size:.875rem; font-weight:600; color:var(--gold) }
.cart-item__qty { display:flex; align-items:center; gap:.75rem; margin-top:.5rem }
.qty-btn {
  width:26px;height:26px;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);font-size:1rem;border-radius:2px;
  transition:border-color var(--fast),color var(--fast);
  cursor:pointer;
}
.qty-btn:hover { border-color:var(--gold); color:var(--gold) }
.qty-num { font-size:.8rem; min-width:20px; text-align:center; color:var(--text) }
.cart-item__remove { color:var(--text-3); padding:.25rem; transition:color var(--fast); cursor:pointer }
.cart-item__remove:hover { color:var(--gold) }
.cart-footer {
  flex-shrink:0;
  padding:1.25rem 1.5rem;
  border-top:1px solid var(--border);
}
.cart-subtotal { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem }
.cart-subtotal span:first-child {
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); font-family:var(--serif);
}
.cart-total-price { font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--gold) }
.cart-shipping-note { font-size:.75rem; color:var(--text-2); margin-bottom:1rem; letter-spacing:.04em }
.btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .85rem;
  background: var(--gold);
  color: #000;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background var(--fast);
  font-family: var(--serif);
  cursor: pointer;
  border: none;
}
.btn-checkout:hover { background:var(--gold-l) }
.btn-checkout-pago {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .75rem;
  background: transparent;
  color: var(--text-2);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  margin-top: .65rem;
  transition: border-color var(--fast), color var(--fast);
  cursor: pointer;
  font-family: var(--serif);
  border-radius: 0;
}
.btn-checkout-pago:hover { border-color:var(--gold-d); color:var(--gold) }

/* ── Footer ──────────────────────────────────────────────── */
.store-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}
.footer-logo-row { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem }
.footer-jaguar-img { width:44px; height:44px; object-fit:contain; opacity:.8 }
.footer-logo-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--gold);
}
.footer-logo-sub {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 2px;
}
.footer-tagline {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-2);
  margin-bottom: 1.25rem;
  letter-spacing: .04em;
}
.footer-desc {
  font-size: .825rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 280px;
}
.footer-social { display:flex; gap:.65rem }
.social-btn {
  width:34px; height:34px;
  border:1px solid var(--border);
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-3);
  transition:color var(--fast),border-color var(--fast);
}
.social-btn:hover { color:var(--gold); border-color:var(--gold-d) }
.footer-links h4 {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.25rem;
  font-weight: 700;
  font-family: var(--serif);
}
.footer-links a {
  display: block;
  font-size: .825rem;
  color: var(--text-2);
  padding: .3rem 0;
  transition: color var(--fast);
  letter-spacing: .02em;
}
.footer-links a:hover { color:var(--gold) }
.footer-bottom {
  border-top: 1px solid var(--border);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.payment-methods { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.pm-label {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  font-family: var(--serif);
}
.pm-badge {
  font-size: .68rem;
  letter-spacing: .06em;
  font-weight: 600;
  padding: .25rem .55rem;
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 2px;
}
.pm-nequi   { border-color:#5b2d8e; color:#a060d4 }
.pm-daviplata { border-color:#c8172a; color:#e85060 }
.pm-amex    { border-color:#2e77bc; color:#5a9fd4 }
.footer-copy { font-size:.75rem; color:var(--text-2); letter-spacing:.04em }
.footer-copy a { color:var(--gold) }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: .75rem 1.25rem;
  font-size: .825rem;
  border-radius: 3px;
  box-shadow: var(--shadow);
  z-index: 1000;
  opacity: 0;
  transition: transform var(--mid) var(--ease), opacity var(--mid);
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:all }

/* ── Back to top ─────────────────────────────────────────── */
.btn-backtop {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 40px; height: 40px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events:none;
  transition: opacity var(--mid), color var(--fast), border-color var(--fast);
  z-index: 100;
  cursor: pointer;
}
.btn-backtop.visible { opacity:1; pointer-events:all }
.btn-backtop:hover { color:var(--gold); border-color:var(--gold-d) }

/* ── Lightbox ────────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay.open { display:flex }
.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
}

/* ── Sidebar mobile overlay ──────────────────────────────── */
.sidebar-overlay { display:none }
@media(max-width:1023px) {
  .sidebar-overlay {
    display:block;
    position:fixed;inset:0;background:rgba(0,0,0,.6);
    z-index:299;opacity:0;pointer-events:none;
    transition:opacity var(--mid);
  }
  .sidebar-overlay.open { opacity:1; pointer-events:all }
  .filters-sidebar {
    display:block;
    position:fixed;top:0;left:-280px;bottom:0;
    width:280px;z-index:300;
    background:var(--bg-2);
    overflow-y:auto;padding:1.5rem;
    border-right:1px solid var(--border);
    transition:transform var(--mid) var(--ease);
  }
  .filters-sidebar.open { transform:translateX(280px) }
  .filter-header {
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;background:var(--bg-2);z-index:1;
    padding-top:.25rem;padding-bottom:1rem;margin-bottom:1rem;
  }
}

/* ── Mobile filter btn ───────────────────────────────────── */
.btn-filter-mobile { display:none }
@media(max-width:1023px) {
  .btn-filter-mobile {
    display:flex;align-items:center;gap:.5rem;
    padding:.45rem .9rem;background:transparent;
    color:var(--text-2);font-size:.7rem;
    letter-spacing:.12em;text-transform:uppercase;
    border:1px solid var(--border);
    transition:color var(--fast),border-color var(--fast);
    font-family:var(--serif);
    cursor:pointer;
  }
  .btn-filter-mobile:hover { color:var(--gold); border-color:var(--gold-d) }
  .products-toolbar { flex-wrap:wrap; gap:.65rem }
}

/* ── Collection page hero ────────────────────────────────── */
.col-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.col-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg,#1a0f06,#4a2e14);
  background-size: cover;
  background-position: center;
}
.col-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.col-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 24px 44px;
}
.col-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 16px;
}
.col-breadcrumb a { color:inherit; text-decoration:none; transition:color .15s }
.col-breadcrumb a:hover { color:var(--gold) }
.col-eyebrow {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  display: block;
  margin-bottom: 10px;
}
.col-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
  letter-spacing: .06em;
}
.col-desc {
  font-family: var(--serif-body);
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255,255,255,.8);
  margin: 0 0 20px;
  max-width: 520px;
  line-height: 1.65;
}
.col-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.col-badge {
  font-family: var(--serif);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 16px;
  background: rgba(201,162,39,.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201,162,39,.4);
  color: var(--gold);
}
.col-count { font-size:.78rem; color:rgba(255,255,255,.6); font-family:var(--serif); letter-spacing:.06em }

/* Collection products section */
.col-products-section { padding:3rem 0 5rem }
.col-products-inner { max-width:1200px; margin:0 auto; padding:0 1.5rem }
.col-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.col-count-label { font-size:.8rem; color:var(--text-2); letter-spacing:.04em }
.col-count-label strong { color:var(--text) }

/* Pronto state */
.pronto-state { text-align:center; padding:80px 24px; max-width:460px; margin:0 auto }
.pronto-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
  animation: colFloat 3s ease-in-out infinite;
}
@keyframes colFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.pronto-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .75rem;
  letter-spacing: .1em;
}
.pronto-desc { font-size:.9rem; color:var(--text-3); line-height:1.65 }

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr }
  .colecciones-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:768px) {
  .header-inner { padding:.6rem 1rem }
  .search-wrap { display:none }
  .search-wrap-mobile { display:block }
  .btn-hamburger { display:flex }
  .cat-nav { top:50px }
  .cat-visual-grid { grid-template-columns:repeat(3,1fr); gap:0 }
  .cat-visual-card { padding:1.5rem .75rem 1.25rem }
  .store-layout { padding:0 .75rem }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:12px }
  .featured-header,.flash-header { padding:0 1rem 1rem }
  .section-heading { padding:2rem 1rem 1.5rem }
  .footer-top { grid-template-columns:1fr; gap:1.75rem; padding:2.5rem 1.25rem 1.5rem }
  .footer-bottom { padding:1.25rem; flex-direction:column; align-items:flex-start; gap:.65rem }
  .hero-trust-strip { gap:.65rem }
  .hero-trust-strip span { font-size:.6rem }
  .hero-banner { height:clamp(400px,72vh,560px) }
  .hero-arrow { width:38px; height:38px }
  .hero-slide-content { padding:0 1.25rem }
}
@media(max-width:640px) {
  .hero-banner { height:clamp(380px,75vh,540px) }
  .colecciones-grid { grid-template-columns:1fr 1fr }
  .coleccion-card { aspect-ratio:1 }
  .col-hero { min-height:260px }
}
@media(max-width:480px) {
  .cat-visual-grid { grid-template-columns:repeat(2,1fr) }
  .cat-visual-card { padding:1.25rem .5rem 1rem }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:8px }
  .store-layout { padding:0 .5rem }
  /* Tarjetas de producto — reducir padding interno para que los botones quepan */
  .product-card__body { padding:.7rem .55rem .65rem }
  .product-card__name { font-size:.78rem }
  .price-current { font-size:.88rem }
  .product-card__btns { gap:.2rem; margin-top:.4rem }
  .product-card__detail { padding:.42rem .45rem; font-size:.56rem; letter-spacing:.05em }
  .product-card__add   { padding:.42rem .25rem; font-size:.58rem; letter-spacing:.06em }
  .hero-eyebrow { font-size:.58rem }
  .btn-hero-primary,.btn-hero-secondary { padding:.7rem 1.4rem; font-size:.72rem }
  .toast { min-width:0; max-width:calc(100vw - 2rem); bottom:.75rem; right:0; left:50%; transform:translateX(-50%) translateY(100px) }
  .toast.show { transform:translateX(-50%) translateY(0) }
  .btn-backtop { bottom:1rem; right:1rem }
}
@media(max-width:360px) {
  /* En teléfonos muy pequeños, una sola columna evita overflow */
  .products-grid { grid-template-columns:1fr; gap:10px }
  .product-card { flex-direction:row; height:110px }
  .product-card__img-wrap { width:110px; flex-shrink:0; aspect-ratio:unset; height:110px }
  .product-card__body { padding:.6rem .7rem; gap:.2rem }
  .product-card__stars { display:none }
  .product-card__btns { flex-direction:column; gap:.2rem; margin-top:.3rem }
  .product-card__detail,.product-card__add { padding:.35rem .5rem; font-size:.58rem; text-align:center }
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT MODAL
   ═══════════════════════════════════════════════════════════════ */
.chk-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.chk-overlay.open { opacity:1;visibility:visible; }
.chk-modal {
  background:var(--c-bg);border-radius:var(--r-lg);width:100%;max-width:780px;
  max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.22);
  transform:translateY(20px);transition:transform .25s;
  display:flex;flex-direction:column;
}
.chk-overlay.open .chk-modal { transform:translateY(0); }

.chk-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 16px;border-bottom:1px solid var(--c-border);flex-shrink:0;
}
.chk-head h2 { font-size:17px;font-weight:700;color:var(--c-text);margin:0; }
.chk-head-sub { font-size:12px;color:var(--c-muted);margin-top:2px; }
.chk-close {
  width:34px;height:34px;border:none;background:var(--c-bg2);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-muted);
  transition:background .15s;flex-shrink:0;
}
.chk-close:hover { background:var(--c-bg3); }

.chk-body { padding:24px;display:flex;flex-direction:column;gap:24px;flex:1; }

.chk-section-title {
  font-size:13px;font-weight:700;color:var(--c-brand);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.chk-section-title svg { opacity:.7; }

.chk-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.chk-grid.chk-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.chk-field { display:flex;flex-direction:column;gap:5px; }
.chk-field.chk-full { grid-column:1/-1; }
.chk-label {
  font-size:12px;font-weight:600;color:var(--c-text2);
}
.chk-label .req { color:var(--c-red);margin-left:2px; }
.chk-input {
  border:1.5px solid var(--c-border);border-radius:var(--r);
  padding:10px 13px;font-size:14px;color:var(--c-text);background:var(--c-bg);
  transition:border-color .15s,box-shadow .15s;outline:none;
  font-family:inherit;
}
.chk-input:focus { border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-f); }
.chk-input.error { border-color:var(--c-red); }
.chk-input::placeholder { color:var(--c-muted);opacity:.7; }
.chk-field-err { font-size:11px;color:var(--c-red);margin-top:2px;display:none; }
.chk-field.has-error .chk-field-err { display:block; }
.chk-field.has-error .chk-input { border-color:var(--c-red); }

.chk-divider { border:none;border-top:1px solid var(--c-border); }

@keyframes payVibrate {
  0%,14%,100% { transform:translateX(0) scale(1); }
  2%,6%,10%   { transform:translateX(-5px) scale(1.03); }
  4%,8%,12%   { transform:translateX(5px)  scale(1.03); }
}
.chk-pay-opts { display:none; }
.chk-pay-opt  { display:none; }
.pay-big-btns { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px; }
.pay-big-btn {
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  cursor:pointer;border:3px solid transparent;user-select:none;
  animation:payVibrate 7s ease infinite;
  transition:transform .12s,box-shadow .15s;
}
.pay-big-btn:active { transform:scale(.96); }
.pay-big-btn.active {
  animation:none;border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(255,255,255,.2),0 6px 20px rgba(0,0,0,.25);transform:scale(1.02);
}
.pay-big-btn--cod { background:linear-gradient(135deg,#15803d,#22c55e);color:#fff;animation-delay:1.5s; }
.pay-big-btn--now { background:linear-gradient(135deg,#b45309,#f59e0b);color:#fff;animation-delay:2.3s; }
.pbb-icon  { font-size:1.8rem;flex-shrink:0;line-height:1; }
.pbb-title { display:block;font-size:.95rem;font-weight:700;line-height:1.2; }
.pbb-sub   { display:block;font-size:.72rem;opacity:.88;margin-top:3px;line-height:1.3; }
.pay-sub-wrap { display:flex;gap:8px;margin:4px 0 10px;flex-wrap:wrap; }
.pay-sub-btn {
  flex:1;min-width:90px;padding:9px 12px;border-radius:9px;
  border:2px solid var(--c-border,rgba(0,0,0,.12));cursor:pointer;
  text-align:center;font-size:.8rem;font-weight:600;
  background:var(--c-bg);color:var(--c-text);transition:all .15s;user-select:none;
}
.pay-sub-btn.active { border-color:var(--c-brand);background:var(--c-brand-f);color:var(--c-brand); }
@media (max-width:500px) { .pay-big-btns { grid-template-columns:1fr; } }

.chk-summary {
  background:var(--c-bg2);border-radius:var(--r);padding:16px 18px;
  display:flex;flex-direction:column;gap:8px;
}
.chk-summary-row { display:flex;justify-content:space-between;font-size:13px;color:var(--c-text2); }
.chk-summary-row.total { font-weight:700;font-size:15px;color:var(--c-text);padding-top:8px;border-top:1px solid var(--c-border);margin-top:4px; }

.chk-foot {
  padding:16px 24px;border-top:1px solid var(--c-border);flex-shrink:0;
  display:flex;gap:12px;align-items:center;
}
.chk-btn-submit {
  flex:1;background:var(--c-brand);color:#fff;border:none;border-radius:var(--r);
  padding:14px 24px;font-size:15px;font-weight:700;cursor:pointer;
  transition:background .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.chk-btn-submit:hover { background:var(--c-brand-l); }
.chk-btn-submit:active { transform:scale(.98); }
.chk-btn-submit:disabled { opacity:.6;cursor:not-allowed; }
.chk-btn-cancel {
  background:none;border:1.5px solid var(--c-border);border-radius:var(--r);
  padding:14px 18px;font-size:14px;color:var(--c-muted);cursor:pointer;
  transition:border-color .15s;white-space:nowrap;font-family:inherit;
}
.chk-btn-cancel:hover { border-color:var(--c-brand);color:var(--c-brand); }

/* Spinner */
.chk-spinner {
  width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Success state */
.chk-success {
  padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;
}
.chk-success__icon {
  width:72px;height:72px;background:var(--c-brand-f);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--c-brand);
}
.chk-success__title { font-size:22px;font-weight:800;color:var(--c-text); }
.chk-success__num {
  font-size:28px;font-weight:900;color:var(--c-brand);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.chk-success__msg { font-size:14px;color:var(--c-muted);max-width:380px;line-height:1.6; }
.chk-success__wa {
  display:flex;align-items:center;gap:8px;background:#25D366;color:#fff;
  border:none;border-radius:var(--r);padding:12px 22px;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;transition:opacity .15s;margin-top:8px;
}
.chk-success__wa:hover { opacity:.88; }
.chk-success__close {
  background:none;border:1.5px solid var(--c-border);border-radius:var(--r);
  padding:10px 20px;font-size:14px;color:var(--c-muted);cursor:pointer;font-family:inherit;
}

/* Error banner */
.chk-error-banner {
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);border-radius:var(--r);
  padding:12px 16px;font-size:13px;color:var(--c-red);display:none;
}
.chk-error-banner.show { display:block; }

@media (max-width: 600px) {
  .chk-modal { border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:95vh; }
  .chk-overlay { align-items:flex-end;padding:0; }
  .chk-grid { grid-template-columns:1fr; }
  .chk-grid.chk-grid-3 { grid-template-columns:1fr 1fr; }
  .chk-foot { flex-direction:column; }
  .chk-btn-cancel { width:100%;text-align:center; }
}

/* Checkout — sticky header so X is always visible */
.chk-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Checkout — product image in summary */
.chk-summary-item {
  align-items: center;
  gap: 10px;
}
.chk-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-bg3);
}
.chk-item-thumb-ph {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--c-bg3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.chk-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chk-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chk-item-qty {
  font-size: 12px;
  color: var(--c-muted);
}
.chk-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-brand);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Select styling */
.chk-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 32px;
}

/* International notice */
.chk-intl-notice {
  background: rgba(201,162,39,.08);
  border: 1px solid rgba(201,162,39,.35);
  border-radius: var(--r);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--c-text2);
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — CTA BUTTONS (COD + Pay-Now)
   ═══════════════════════════════════════════════════════════════ */

.pd-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

/* Pair: side-by-side CTAs */
.pd-cta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Shared wiggle + glow */
@keyframes btn-wiggle {
  0%,55%,100% { transform: rotate(0deg) scale(1); }
  58%  { transform: rotate(-2.5deg) scale(1.04); }
  61%  { transform: rotate(2.5deg)  scale(1.04); }
  64%  { transform: rotate(-2.5deg) scale(1.04); }
  67%  { transform: rotate(2.5deg)  scale(1.04); }
  70%  { transform: rotate(0deg)    scale(1.04); }
  73%  { transform: scale(1); }
}
@keyframes btn-glow-cod {
  0%,100% { box-shadow: 0 4px 18px rgba(255,214,0,.45); }
  50%     { box-shadow: 0 6px 28px rgba(255,214,0,.8); }
}
@keyframes btn-glow-pay {
  0%,100% { box-shadow: 0 4px 18px rgba(16,185,129,.4); }
  50%     { box-shadow: 0 6px 28px rgba(16,185,129,.75); }
}

/* Contraentrega — yellow */
.pd-btn-cod {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 76px;
  padding: 12px 10px;
  background: #FFD700;
  color: #1a1a1a;
  border: none;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .01em;
  animation: btn-wiggle 3.2s ease-in-out infinite, btn-glow-cod 1.8s ease-in-out infinite;
  transition: transform .12s, background .15s;
  position: relative;
  overflow: hidden;
}
.pd-btn-cod::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 55%);
  pointer-events: none;
}
.pd-btn-cod:hover { background: #FFC200; animation-play-state: paused; transform: scale(1.02); }
.pd-btn-cod:active { transform: scale(.97); }
.pd-btn-cod__title { font-size:14px; font-weight:900; line-height:1.2; }
.pd-btn-cod__sub   { font-size:10px; font-weight:500; opacity:.75; }

/* Paga ahora — green */
.pd-btn-pay-now {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 76px;
  padding: 12px 10px;
  background: linear-gradient(135deg, #059669, #10B981);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  animation: btn-wiggle 3.2s ease-in-out 0.8s infinite, btn-glow-pay 1.8s ease-in-out infinite;
  transition: transform .12s, filter .15s;
  position: relative;
  overflow: hidden;
}
.pd-btn-pay-now::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 50%);
  pointer-events: none;
}
.pd-btn-pay-now:hover  { filter: brightness(1.08); animation-play-state: paused; transform: scale(1.02); }
.pd-btn-pay-now:active { transform: scale(.97); }
.pd-btn-pay-now__title { font-size:14px; font-weight:900; line-height:1.2; }
.pd-btn-pay-now__sub   { font-size:10px; font-weight:600; opacity:.9; }
.pd-btn-pay-now__tag {
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 900;
  padding: 2px 10px;
  backdrop-filter: blur(4px);
}

/* Secondary row: add-to-cart + WA */
.pd-cta-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pd-btn-add-sm {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--c-bg2);
  color: var(--c-text);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.pd-btn-add-sm:hover { background: var(--c-bg3); border-color: var(--c-brand); }
.pd-btn-wa-sm {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
}
.pd-btn-wa-sm:hover { opacity: .85; }

/* Discount badge in checkout summary */
.chk-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #059669, #10B981);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.chk-summary-row.discount { color: var(--c-green); font-weight: 600; }
.chk-summary-row.total-discount { font-weight: 800; font-size: 16px; color: var(--c-brand); }


/* ── Floating cart bubble ─────────────────────────────────── */
.fab-cart {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
  z-index: 600;
  transition: transform .15s, box-shadow .15s;
}
.fab-cart:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.fab-cart:active { transform: scale(.93); }
.fab-cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2.5px solid var(--c-bg);
  line-height: 1;
}
@keyframes fab-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) rotate(-8deg); }
  65%  { transform: scale(.9) rotate(4deg); }
  85%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.fab-cart.pop { animation: fab-pop .42s ease forwards; }

/* ── Checkout: shipping savings tip ── */
.chk-savings-tip {
  display:flex;align-items:center;gap:6px;
  background:#FEF9C3;border:1px solid #FDE047;border-radius:8px;
  padding:10px 14px;font-size:12.5px;color:#713F12;margin-top:10px;
}

/* ── Checkout: sticky footer totals ── */
.chk-foot { flex-direction:column;gap:0;padding:0; }
.chk-foot-totals {
  padding:10px 24px 6px;
  display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--c-border);background:var(--c-bg);
}
.chk-ft-row { display:flex;justify-content:space-between;font-size:13px;color:var(--c-muted); }
.chk-ft-total-row {
  font-size:15px;font-weight:800;color:var(--c-text);
  border-top:1px solid var(--c-border);padding-top:6px;margin-top:2px;
}
.chk-ft-total-row strong { color:var(--c-brand); }
.chk-foot-btns {
  display:flex;gap:12px;align-items:center;padding:10px 24px 16px;
}

/* ── Autofill banner ─────────────────────────────────────────── */
.autofill-banner {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .75rem; margin-bottom: .75rem;
  background: rgba(45,159,110,.1); border: 1px solid rgba(45,159,110,.3);
  border-radius: 8px; font-size: .8rem; color: #2d9f6e;
}
.autofill-banner svg { flex-shrink:0; stroke: #2d9f6e }
.autofill-banner span { flex:1 }
.autofill-change-btn {
  background: none; border: 1px solid rgba(45,159,110,.5);
  color: #2d9f6e; font-size: .72rem; padding: .22rem .55rem;
  border-radius: 5px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.autofill-change-btn:hover { background: rgba(45,159,110,.12) }