/* ── Variables ─────────────────────────────────────── */
:root {
  --vino:        #5c1a28;
  --vino-dark:   #3d1019;
  --vino-light:  #7a2438;
  --accent:      #8c3a4a;
  --sidebar-w:   220px;
  --topbar-h:    52px;
  --text:        #1a1a1a;
  --muted:       #6c757d;
  --border:      #dee2e6;
  --bg:          #f4f6f8;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: .9rem;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ── Topbar ────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--vino-dark);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: .9rem;
  z-index: 1040;
  border-bottom: 2px solid var(--vino-light);
}

#sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.65);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 .2rem;
  line-height: 1;
  transition: color .15s;
}
#sidebar-toggle:hover { color: #fff; }

.brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.brand span { color: #b87e8a; }

.topbar-sub {
  color: rgba(255,255,255,.4);
  font-size: .75rem;
  letter-spacing: .02em;
  margin-left: .25rem;
}

/* ── Sidebar ───────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--vino);
  overflow-y: auto;
  transform: translateX(0);
  transition: transform .22s ease;
  z-index: 1030;
  display: flex;
  flex-direction: column;
}

body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }

.sidebar-section {
  padding: .4rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-heading {
  color: rgba(255,255,255,.4);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .6rem 1rem .15rem;
}

.sidebar-link {
  display: block;
  padding: .38rem 1rem;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: .84rem;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.sidebar-link:hover,
.sidebar-link.active {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-left-color: #b87e8a;
}

/* ── Overlay mobile ────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1029;
}
@media (max-width: 991px) {
  .main-content, footer { margin-left: 0 !important; }
  body:not(.sidebar-collapsed) .sidebar-overlay { display: block; }
  body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
  body:not(.sidebar-collapsed) .sidebar { transform: translateX(0); }
}

/* ── Main content ──────────────────────────────────── */
.main-content {
  margin-top: var(--topbar-h);
  margin-left: var(--sidebar-w);
  padding: 1.5rem 1.75rem;
  min-height: calc(100vh - var(--topbar-h));
  transition: margin-left .22s ease;
}
body.sidebar-collapsed .main-content { margin-left: 0; }

/* ── Page elements ─────────────────────────────────── */
.page-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--vino-dark);
  margin-bottom: 1.1rem;
  letter-spacing: -.01em;
}

.section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}

/* ── Cards ─────────────────────────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: .4rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.card-header-vino {
  background: var(--vino);
  color: #fff;
  border-radius: .4rem .4rem 0 0;
  padding: .6rem 1rem;
  font-weight: 600;
  font-size: .85rem;
}

/* ── Tables ────────────────────────────────────────── */
.table {
  font-size: .85rem;
  margin-bottom: 0;
}
.table thead th {
  background: var(--vino-dark);
  color: #fff;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .03em;
  border: none;
  padding: .55rem .75rem;
  white-space: nowrap;
}
.table tbody td { vertical-align: middle; padding: .45rem .75rem; }
.table-hover tbody tr:hover { background: #f7f0f1; }

/* ── Buttons ───────────────────────────────────────── */
.btn-vino {
  background: var(--vino);
  border-color: var(--vino);
  color: #fff;
  font-size: .83rem;
}
.btn-vino:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-vino:focus { box-shadow: 0 0 0 .2rem rgba(92,26,40,.3); }

/* ── Badges ────────────────────────────────────────── */
.badge { font-size: .72rem; font-weight: 500; }
.badge.bg-vino { background: var(--vino) !important; color: #fff; }

/* ── Alerts ────────────────────────────────────────── */
.alert { font-size: .85rem; border-radius: .35rem; }

/* ── Filter bar ────────────────────────────────────── */
.filter-bar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

/* ── Module cards (dashboard) ──────────────────────── */
.module-card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--vino);
  border-radius: .4rem;
  padding: .9rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-left-color .15s, box-shadow .15s;
}
.module-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 2px 8px rgba(92,26,40,.12);
  color: var(--vino-dark);
}
.module-card .label { font-weight: 600; font-size: .9rem; }
.module-card .sub   { color: var(--muted); font-size: .78rem; margin-top: .1rem; }

/* ── Dynamic tables ────────────────────────────────── */
.dynamic-table th { font-size: .76rem; }
.dynamic-table td { padding: .28rem .4rem; }
.dynamic-table select,
.dynamic-table input { font-size: .82rem; }

/* ── Footer ────────────────────────────────────────── */
footer {
  text-align: center;
  font-size: .75rem;
  color: #aaa;
  padding: .9rem 1rem;
  border-top: 1px solid var(--border);
  margin-left: var(--sidebar-w);
  background: #fff;
  transition: margin-left .22s;
}
body.sidebar-collapsed footer { margin-left: 0; }

/* ════════════════════════════════════════════════════
   TIENDA ONLINE (HU-ECOM-10)
   Identidad propia, separada del backoffice: cava oscura,
   acentos dorados, tipografía editorial (Playfair Display +
   Inter). Las variables --td-* solo existen dentro de
   body.tienda, así que no tocan la paleta del sistema de
   gestión (esas páginas nunca llevan esa clase en el body).
   ════════════════════════════════════════════════════ */
body.tienda {
  --td-bg:          #ffffff;
  --td-bg-elevated: #f7f4ee;
  --td-bg-card:     #ffffff;
  --td-gold:        #8a6a26;
  --td-gold-soft:   #a9812f;
  --td-ivory:       #241a15;
  --td-ivory-muted: #6b5d52;
  --td-wine:        #58111a;
  --td-line:        rgba(36, 26, 21, .14);
  --td-radius:      3px;

  margin: 0;
  padding-top: var(--topbar-h);
  background: var(--td-bg);
  color: var(--td-ivory);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

body.tienda h1, body.tienda h2, body.tienda h3,
body.tienda h4, body.tienda h5, body.tienda h6 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}

body.tienda a { color: var(--td-gold); }
body.tienda a:hover { color: var(--td-gold-soft); }

/* El cuerpo de la tienda (catálogo, producto, checkout) es blanco, pero el
   header y el footer conservan la identidad oscura original (igual que el
   fondo negro del logo de Instagram): redefinen las mismas variables --td-*
   solo dentro de su propio árbol, así que cada regla que ya usa var(--td-*)
   (texto, links, inputs, dropdown) se adapta sola sin duplicar CSS. */
.tienda-topbar, .tienda-footer {
  --td-bg-elevated: #1a1917;
  --td-bg-card:     #1e1c19;
  --td-ivory:       #f5f2eb;
  --td-ivory-muted: #b6ada0;
  --td-gold:        #c5a059;
  --td-gold-soft:   #d4af37;
  --td-line:        rgba(245, 242, 235, .12);
}

/* ── Encabezado ────────────────────────────────────── */
.tienda-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--td-bg-elevated);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.25rem;
  z-index: 1040;
  border-bottom: 1px solid var(--td-line);
}
.tienda-topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Pacifico', 'Playfair Display', Georgia, serif;
  color: var(--td-ivory);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  font-size: 1.35rem;
  line-height: 1;
}
.tienda-topbar .brand span { color: var(--td-gold); }
.brand-corona { flex: 0 0 auto; color: var(--td-gold); }
.tienda-buscador { flex: 1 1 auto; min-width: 0; max-width: 380px; }
.tienda-topbar-acciones { display: flex; align-items: center; gap: .6rem; margin-left: auto; white-space: nowrap; }
.tienda-carrito-badge { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.tienda-carrito-badge .badge {
  position: absolute; top: -7px; right: -10px;
  background: var(--td-wine) !important;
  border: 1px solid var(--td-bg-elevated);
}

body.tienda .tienda-topbar .form-control {
  background: rgba(245, 242, 235, .06);
  border: 1px solid var(--td-line);
  color: var(--td-ivory);
  border-radius: var(--td-radius);
}
body.tienda .tienda-topbar .form-control::placeholder { color: var(--td-ivory-muted); }
body.tienda .tienda-topbar .form-control:focus {
  background: rgba(245, 242, 235, .1);
  border-color: var(--td-gold);
  color: var(--td-ivory);
  box-shadow: 0 0 0 .15rem rgba(197, 160, 89, .22);
}

body.tienda .btn-outline-light {
  color: var(--td-ivory);
  border-color: var(--td-line);
  border-radius: var(--td-radius);
}
body.tienda .btn-outline-light:hover {
  background: rgba(245, 242, 235, .08);
  border-color: var(--td-gold);
  color: var(--td-ivory);
}
body.tienda .dropdown-menu {
  background: var(--td-bg-elevated);
  border: 1px solid var(--td-line);
}
body.tienda .dropdown-item { color: var(--td-ivory); }
body.tienda .dropdown-item:hover, body.tienda .dropdown-item:focus { background: rgba(245, 242, 235, .08); color: var(--td-ivory); }
body.tienda .dropdown-divider { border-color: var(--td-line); }

.tienda-breadcrumb { font-size: .78rem; color: var(--td-ivory-muted); margin: 1.5rem 0 1.25rem; }
.tienda-breadcrumb a { color: var(--td-gold); text-decoration: none; }
.tienda-breadcrumb a:hover { text-decoration: underline; }

.tienda-main { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 3rem; }

/* ── Hero ──────────────────────────────────────────── */
.tienda-hero {
  background:
    radial-gradient(ellipse at top right, rgba(197, 160, 89, .3), transparent 60%),
    linear-gradient(135deg, #ecdfc0, #f7f0dd);
  color: var(--td-ivory);
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  padding: 3.75rem 2rem;
  margin-bottom: 2.5rem;
  text-align: center;
}
.tienda-hero h1 {
  font-size: 2.5rem;
  letter-spacing: .01em;
  margin-bottom: .6rem;
}
.tienda-hero p { color: var(--td-ivory-muted); margin-bottom: 1.75rem; font-size: 1.05rem; }

.tienda-section-title {
  font-size: 1.3rem;
  letter-spacing: .03em;
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--td-line);
}

/* ── Botones ───────────────────────────────────────── */
body.tienda .btn-vino {
  background: var(--td-gold);
  border-color: var(--td-gold);
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--td-radius);
  transition: background .15s, box-shadow .15s, transform .15s;
}
body.tienda .btn-vino:hover {
  background: var(--td-gold-soft);
  border-color: var(--td-gold-soft);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, .2);
}
body.tienda .btn-vino:focus { box-shadow: 0 0 0 .2rem rgba(197, 160, 89, .3); }
body.tienda .btn-vino:disabled { background: var(--td-ivory-muted); border-color: var(--td-ivory-muted); }

body.tienda .btn-outline-secondary {
  color: var(--td-ivory-muted);
  border-color: var(--td-line);
  border-radius: var(--td-radius);
}
body.tienda .btn-outline-secondary:hover {
  color: var(--td-gold);
  border-color: var(--td-gold);
  background: transparent;
}
body.tienda .btn-outline-danger { border-radius: var(--td-radius); }

/* ── Categorías (chips) ────────────────────────────── */
.tienda-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}

.categoria-card {
  display: block;
  text-decoration: none;
  color: var(--td-ivory);
  background: var(--td-bg-card);
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  padding: 1.1rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: .02em;
  transition: border-color .15s, color .15s;
}
.categoria-card:hover { border-color: var(--td-gold); color: var(--td-gold); }

/* ── Tarjeta de producto ───────────────────────────── */
.producto-card {
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  background: var(--td-bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.producto-card:hover {
  transform: translateY(-4px);
  border-color: var(--td-gold);
  box-shadow: 0 14px 28px rgba(36, 26, 21, .12), 0 0 0 1px rgba(197, 160, 89, .25);
}
.producto-card .producto-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--td-bg-elevated);
}
.producto-card .cuerpo { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.producto-card .nombre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: .98rem;
  color: var(--td-ivory);
  line-height: 1.25;
}
.producto-card .varietal { color: var(--td-ivory-muted); font-size: .78rem; margin: 0; }
.producto-card .pie {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
}
.producto-card .precio {
  font-weight: 700;
  color: var(--td-gold);
  font-size: 1.05rem;
  font-family: 'Playfair Display', Georgia, serif;
}
.producto-card-agregar { width: 100%; padding: .4rem .7rem; font-size: .82rem; }
.producto-card-mensaje { padding: 0 1.1rem .6rem; color: var(--td-gold); }

/* ── Tarjetas genéricas (login, checkout, mi cuenta…) ─ */
body.tienda .card {
  background: var(--td-bg-card);
  border: 1px solid var(--td-line);
  color: var(--td-ivory);
  border-radius: var(--td-radius);
}
body.tienda .card .h6, body.tienda .card h2 { font-size: 1.05rem; margin-bottom: 1rem; }

body.tienda .form-control, body.tienda .form-select {
  background: rgba(36, 26, 21, .05);
  border: 1px solid var(--td-line);
  color: var(--td-ivory);
  border-radius: var(--td-radius);
}
body.tienda .form-control:focus, body.tienda .form-select:focus {
  background: rgba(36, 26, 21, .08);
  border-color: var(--td-gold);
  color: var(--td-ivory);
  box-shadow: 0 0 0 .15rem rgba(197, 160, 89, .2);
}
body.tienda .form-control::placeholder { color: var(--td-ivory-muted); }
body.tienda .form-control:disabled { background: rgba(36, 26, 21, .03); color: var(--td-ivory-muted); }
/* El popup nativo del <select> no hereda el fondo semitransparente del
   input: hay que darle uno sólido a las <option>, si no el navegador lo
   pinta blanco (texto claro sobre blanco = ilegible). */
body.tienda .form-select option {
  background: var(--td-bg-card);
  color: var(--td-ivory);
}
body.tienda .form-label { color: var(--td-ivory-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
body.tienda .form-check-input { background-color: rgba(36, 26, 21, .08); border-color: var(--td-line); }
body.tienda .form-check-input:checked { background-color: var(--td-gold); border-color: var(--td-gold); }

body.tienda .table { color: var(--td-ivory); }
body.tienda .table > :not(caption) > * > * { background: transparent; color: var(--td-ivory); border-color: var(--td-line); box-shadow: none; }
body.tienda .table th {
  color: var(--td-ivory-muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
}
body.tienda .table-hover > tbody > tr:hover > * { background: rgba(36, 26, 21, .04); }

body.tienda .badge.bg-secondary { background: rgba(36, 26, 21, .12) !important; color: var(--td-ivory-muted); font-weight: 500; }
body.tienda .badge.bg-success { background: rgba(197, 160, 89, .18) !important; color: var(--td-gold) !important; border: 1px solid rgba(197, 160, 89, .4); font-weight: 500; }
body.tienda .badge.bg-vino { background: var(--td-wine) !important; color: var(--td-ivory); }
body.tienda .badge.bg-danger { background: var(--td-wine) !important; }

body.tienda .alert { border-radius: var(--td-radius); border: 1px solid var(--td-line); background: var(--td-bg-card); color: var(--td-ivory); }
body.tienda .alert-danger { border-color: rgba(88, 17, 26, .6); }
body.tienda .alert-warning { border-color: rgba(197, 160, 89, .4); }
body.tienda hr { border-color: var(--td-line); opacity: 1; }

body.tienda .accordion-item {
  background: var(--td-bg-card);
  border: 1px solid var(--td-line);
}
body.tienda .accordion-button {
  background: var(--td-bg-card);
  color: var(--td-ivory);
  font-weight: 600;
}
body.tienda .accordion-button:not(.collapsed) {
  background: rgba(197, 160, 89, .1);
  color: var(--td-gold);
  box-shadow: none;
}
body.tienda .accordion-button:focus { box-shadow: 0 0 0 .15rem rgba(197, 160, 89, .2); }
body.tienda .accordion-button::after { filter: none; }
body.tienda .accordion-body { color: var(--td-ivory-muted); }

/* ── Páginas legales / ayuda ───────────────────────── */
.tienda-legales-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
}
.tienda-legales-nav a {
  color: var(--td-ivory-muted);
  text-decoration: none;
  font-size: .85rem;
  padding: .5rem .75rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--td-radius) var(--td-radius) 0;
}
.tienda-legales-nav a:hover {
  color: var(--td-gold);
  background: rgba(197, 160, 89, .08);
  border-left-color: var(--td-gold);
}
.tienda-policy h2 { font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.tienda-policy p, .tienda-policy li { color: var(--td-ivory-muted); line-height: 1.7; }
.tienda-policy ul { padding-left: 1.25rem; }

.tienda-mapa {
  display: block;
  width: 100%;
  height: 220px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  margin-top: .75rem;
  filter: none;
}

/* ── Tarjetas de datos de sucursal (icono + label + valor) ─ */
.sucursal-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
}
.sucursal-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 140px;
  max-width: 200px;
}
.sucursal-info-icono {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--td-gold);
  color: var(--td-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .6rem;
}
.sucursal-info-label {
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .25rem;
}
.sucursal-info-valor { color: var(--td-ivory-muted); font-size: .88rem; }

/* ── Mapa de sucursales (Leaflet) ──────────────────── */
.tienda-mapa-sucursales {
  width: 100%;
  height: 260px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
}
.tienda-mapa-vacio {
  border: 1px dashed var(--td-line);
  border-radius: var(--td-radius);
  padding: 2rem;
  text-align: center;
  color: var(--td-ivory-muted);
}

/* ── Cartelera (banners rotativos de la home) ──────── */
/* Las fotos que se suben acá son posts de Instagram (cuadrados o verticales),
   no banners pre-recortados en panorámico. Para no recortar el texto/logo
   (object-fit: cover) ni dejar franjas vacías a los costados (object-fit:
   contain solo), cada slide usa DOS copias de la misma imagen apiladas: una
   de fondo, recortada y difuminada para llenar todo el ancho, y la nítida
   encima, completa, centrada — la imagen real nunca se corta. */
.tienda-cartelera-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 420px;
  border-radius: var(--td-radius);
  overflow: hidden;
  background: var(--td-bg-elevated);
}
.tienda-cartelera-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.tienda-cartelera-slide.activa { opacity: 1; }
.tienda-cartelera-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(30px) brightness(.55);
  transform: scale(1.15);
}
.tienda-cartelera-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tienda-cartelera-puntos {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .75rem;
}
.tienda-cartelera-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--td-line);
  padding: 0;
  cursor: pointer;
}
.tienda-cartelera-punto.activo { background: var(--td-gold); }
@media (max-width: 576px) {
  .tienda-cartelera-viewport { aspect-ratio: 4/3; max-height: 380px; }
}

/* ── Carrusel de productos ─────────────────────────── */
.tienda-carrusel { position: relative; }
.tienda-carrusel-scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.tienda-carrusel-scroller::-webkit-scrollbar { display: none; }
.tienda-carrusel-item {
  flex: 0 0 auto;
  width: 46%;
  max-width: 190px;
  scroll-snap-align: start;
}
@media (min-width: 576px) { .tienda-carrusel-item { width: 220px; } }
.tienda-carrusel-flecha {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--td-line);
  background: var(--td-bg-elevated);
  color: var(--td-ivory);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tienda-carrusel-flecha:hover { border-color: var(--td-gold); color: var(--td-gold); }
.tienda-carrusel-flecha.izq { left: -12px; }
.tienda-carrusel-flecha.der { right: -12px; }
@media (max-width: 480px) { .tienda-carrusel-flecha { display: none; } }

/* ── Ficha de producto (galería + buy box) ─────────── */
.tienda-galeria-principal {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  background: var(--td-bg-card);
}
.tienda-galeria-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--td-radius);
  background: transparent;
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s, border-color .15s;
}
.tienda-galeria-thumb:hover { opacity: .9; }
.tienda-galeria-thumb.activa { opacity: 1; border-color: var(--td-gold); }

.tienda-buybox {
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  background: var(--td-bg-card);
  padding: 1.5rem;
}
.tienda-buybox .precio {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.9rem;
  color: var(--td-gold);
  margin: .25rem 0 1rem;
}
.tienda-cantidad-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

/* ── Pie de página ─────────────────────────────────── */
.tienda-footer {
  /* Reset de la regla `footer { margin-left: var(--sidebar-w); ... }` del
     backoffice (línea ~252): esa es un selector de elemento sin ámbito,
     así que sin este reset el pie de la tienda queda corrido 220px como
     si tuviera al lado la sidebar del sistema de gestión (que acá no existe). */
  margin-left: 0;
  padding: 0;
  text-align: left;
  transition: none;

  background: var(--td-bg-elevated);
  color: var(--td-ivory-muted);
  border-top: 1px solid var(--td-gold);
  margin-top: 3.5rem;
  font-size: .85rem;
}
.tienda-footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
}
.tienda-footer-brand {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Pacifico', 'Playfair Display', Georgia, serif;
  color: var(--td-ivory);
  font-size: 1.4rem;
  margin-bottom: .6rem;
}
.tienda-footer-brand span { color: var(--td-gold); }
.tienda-footer h4 {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--td-gold);
  margin-bottom: .75rem;
}
.tienda-footer p { margin: 0 0 .3rem; line-height: 1.6; }
.tienda-footer-links { display: flex; flex-direction: column; gap: .5rem; }
.tienda-footer a { color: var(--td-ivory-muted); text-decoration: none; }
.tienda-footer a:hover { color: var(--td-gold); }
.tienda-footer-social {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .75rem;
  font-size: .85rem;
}
.tienda-footer .legal {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--td-line);
  color: var(--td-ivory-muted);
  font-size: .72rem;
}

/* ── Modal de mayoría de edad (al entrar al sitio) ─── */
.age-gate-scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 11, .82);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.age-gate-card {
  background: var(--td-bg-card, #fff);
  border-radius: var(--td-radius, 3px);
  padding: 2.25rem 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.age-gate-corona { color: var(--td-gold, #8a6a26); margin-bottom: .5rem; }
.age-gate-titulo {
  font-family: 'Pacifico', 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  margin-bottom: .75rem;
  color: var(--td-ivory, #241a15);
}
.age-gate-texto { font-size: .85rem; color: var(--td-ivory-muted, #6b5d52); margin-bottom: .5rem; }
.age-gate-pregunta { font-weight: 600; color: var(--td-ivory, #241a15); margin-bottom: 1.25rem; }
.age-gate-botones { display: flex; flex-direction: column; gap: .6rem; }

#tienda-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--td-gold); z-index: 2000; transition: width .2s ease;
}

.estado-pedido-badge { font-size: .72rem; padding: .3rem .6rem; }

@media (max-width: 992px) {
  .tienda-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .tienda-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 480px) {
  .tienda-topbar { gap: .5rem; padding: 0 .6rem; }
  .tienda-buscador { max-width: none; }
  .tienda-hero { padding: 2.25rem 1.25rem; }
  .tienda-hero h1 { font-size: 1.7rem; }
}