/* Estilos responsive para MAUS3D */
:root {
  --brand: #000097; /* azul marca MAUS3D */
  --brand-2: #2563eb; /* azul complementario */
  --brand-3: #64748b; /* slate */
  --dark: #0f172a;
  --light: #f1f1f1;
  --accent: #000097; /* acento principal */
  --ink: #0b1220;
  --surface: #ffffff;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  --light: #0b1220;
  --ink: #f1f5f9;
  --surface: #0f172a;
  --border: #1f2937;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background: var(--light); color: var(--ink); }

header {
  position: sticky; top: 0; background: var(--surface); border-bottom: none; z-index: 20; transition: box-shadow 0.25s ease, transform 0.25s ease;
}
header.sticky-fixed { box-shadow: 0 8px 20px rgba(2,6,23,0.08); transform: translateZ(0); }
header.header-gradient { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: white; }
header.header-gradient .brand h1 { color: white; }
header.header-gradient nav a { color: #fff; }
header.header-gradient nav a:hover { color: #c7d2fe; }
header.header-gradient .brand img { filter: brightness(0) invert(1); box-shadow: none; border: none; }
header .wrap { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 16px; }
header .brand { display: flex; align-items: center; gap: 12px; }
/* Unificar la fuente del título con la del menú (system UI stack) */
header .brand h1 { font-size: 24px; margin: 0; letter-spacing: -0.02em; color: var(--ink); font-weight: 600; }

/* Demo5: barra superior opcional */
.header-top { background: #f1f5f9; color: #334155; font-size: 12px; }
.header-top .wrap { max-width: 1100px; margin: 0 auto; padding: 6px 16px; display: flex; justify-content: space-between; align-items: center; }
.header-top .welcome { opacity: 0.9; }
/* Acciones de la franja superior: teléfono y email */
.header-top .actions { display: flex; align-items: center; gap: 12px; }
.header-top .actions a { color: #334155; text-decoration: none; }
.header-top .actions a:hover { color: var(--brand); }
.header-top .divider { opacity: 0.4; }

/* Demo5: buscador en cabecera */
.header-search { margin-left: 16px; flex: 1; max-width: 420px; }
.header .wrap { gap: 12px; }
.header-search .input-wrapper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.header-search .form-control { flex: 1; padding: 10px 14px; border: 0; background: transparent; color: var(--ink); font-size: 14px; }
.header-search .form-control::placeholder { color: #94a3b8; }
.btn.btn-search { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; color: #64748b; }
.btn.btn-search:hover { color: var(--brand); }

@media (max-width: 768px) {
  .header-search { display: none; }
}

/* Mostrar logo a la izquierda del título (ya controlado por markup y flex) */
header .brand img { width: 50px; height: 50px; box-shadow: none; border: none; transform: translateY(1px); }
nav a { margin-left: 22px; text-decoration: none; color: #cbd5e1; font-weight: 600; letter-spacing: -0.02em; }
header:not(.header-gradient) nav a { color: #334155; }
nav a:hover { color: var(--brand); }
/* Demo5: estilo de enlaces de menú */
nav a { text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }

/* Menú móvil */
.menu-toggle { display: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-weight: 600; }
.header-gradient .menu-toggle { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.35); }

@media (max-width: 768px) {
  header .wrap { position: relative; }
  header .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
  header nav { display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(2,6,23,0.12); padding: 8px 0; z-index: 1000; }
  header.header-gradient nav { background: #ffffff; color: var(--ink); }
  header.menu-open nav { display: block; }
  header nav a { display: block; margin: 0; padding: 12px 14px; color: #334155; }
  header.header-gradient nav a { color: #0f172a; }
  header nav a + a { border-top: 1px solid var(--border); }
  header nav .cart-indicator { display: block; padding: 12px 14px; color: #334155; }
  header.header-gradient nav .cart-indicator { color: #0f172a; }
}

/* Formulario de contacto (demo5-like) */
.contact-form { margin-top: 12px; }
.contact-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form .field { margin-bottom: 12px; }
.contact-form label { display: inline-block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--ink); }
.contact-form input,
.contact-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 14px; }
.contact-form textarea { resize: vertical; }
@media (max-width: 768px) {
  .contact-form .grid { grid-template-columns: 1fr; }
}

.alert-success { color: #16a34a; font-weight: 600; }
.alert-error { color: #b91c1c; }

/* (modo oscuro eliminado) */

.hero { position: relative; padding: 64px 16px; background: linear-gradient(180deg, #00009710, #2563eb10); }
.hero-banner { position: relative; overflow: hidden; border-radius: 16px; min-height: 220px; width: 100%; background: none; box-shadow: 0 20px 40px rgba(2,6,23,0.12); }
.hero-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,151,0.35), rgba(37,99,235,0.35)); mix-blend-mode: multiply; pointer-events: none; }
.hero-banner .content { position: absolute; inset: 0; z-index: 1; padding: 0 24px; color: white; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; pointer-events: none; }
.hero-banner h2 { margin: 0 0 8px; font-size: 56px; line-height: 1.1; font-weight: 800; color: #fff; }
.hero-banner p { margin: 0; opacity: 0.98; font-size: 22px; color: #fff; }
.hero-banner .hero-text { width: 100%; max-width: 700px; margin: 0 auto; padding: 0 16px; text-align: center; }
@media (max-width: 600px) {
  .hero-banner { min-height: 170px; }
}
.hero .wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 24px; }
.hero h2 { margin: 0; font-size: 32px; color: var(--dark); }
.hero p { margin: 8px 0 0; color: #334155; }
.hero .cta { margin-top: 16px; display: flex; gap: 12px; }
.btn { display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none; }
/* Fija medidas exactas para casos específicos (p.ej. botón Cancelar en Contacto) */
.btn-fixed-67x37 { width: 67.8px; height: 37px; line-height: 37px; padding: 0; text-align: center; white-space: nowrap; font-size: 16px; }
/* Tamaño solicitado para Cancelar: 70.8x97 y fuente 13px */
/* Variante: ancho 70.8px, alto 37px, fuente 13px */
.btn-fixed-70x37 { width: 70.8px; height: 37px; line-height: 37px; padding: 0; text-align: center; white-space: nowrap; font-size: 13px; }
/* Tamaño pequeño para botones */
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: white; }
.btn.success { background: var(--accent); border-color: var(--accent); color: white; }
.btn.ghost { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.35); }
/* Estilo de botón de marca, equivalente a btn-dark en nuestro tema */
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Hero slider */
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms ease; }
.hero-slider .slide.active { opacity: 1; }
.hero-slider img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.04) contrast(1.08) saturate(1.06); }
.hero-slider .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.35); width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.hero-slider .nav:hover { background: rgba(255,255,255,0.3); }
.hero-slider .nav.prev { left: 12px; }
.hero-slider .nav.next { right: 12px; }
.hero-slider .dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-slider .dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.65); }
.hero-slider .dot.active { background: #fff; }
/* Asegurar que el contenedor del hero posicione correctamente el slider */
/* (reglas consolidadas arriba; el contenido mantiene position:absolute; inset:0 para centrado vertical) */

/* Tamaños responsivos para textos del hero */
@media (max-width: 600px) {
  .hero-banner h2 { font-size: 36px; }
  .hero-banner p { font-size: 18px; }
}

/* Temas del hero: ajustan el color de los botones dentro del hero */
.hero-banner.theme-blue { --brand: #2563eb; }
.hero-banner.theme-indigo { --brand: #4f46e5; }
.hero-banner.theme-cyan { --brand: #06b6d4; }

/* Forzar texto blanco cuando el tema es cyan */
.hero-banner.theme-cyan .content,
.hero-banner.theme-cyan h2,
.hero-banner.theme-cyan p { color: #fff; }

/* Forzar todos los textos del hero a blanco (cubre todos los temas) */
.hero-banner .content,
.hero-banner .content * { color: #fff !important; }

/* Modal genérico */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.visible { display: flex; }
.modal { background: var(--surface); color: var(--ink); width: 92%; max-width: 520px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden; border: 1px solid var(--border); }
.modal-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.modal-icon { font-size: 20px; }
.modal-close { margin-left: auto; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #64748b; }
.modal-close:hover { color: var(--brand); }
.modal-body { padding: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.modal-body .modal-image img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.modal-actions { padding: 12px 14px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); }

/* Toast centrado */
.toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--surface); color: var(--ink); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.25); border-radius: 12px; padding: 12px 16px; display: none; align-items: center; gap: 8px; z-index: 1000; min-width: 280px; max-width: 90vw; flex-direction: column; }
.toast.visible { display: flex; }
.toast-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.toast-body { display: grid; row-gap: 6px; place-items: center; text-align: center; }
.toast-icon-line { display: flex; align-items: center; justify-content: center; }
.toast-name { font-weight: 700; }
.toast-sub { color: #64748b; font-size: 12px; }
.toast-close { position: absolute; right: 8px; top: 6px; border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: #64748b; }
.toast-close:hover { color: var(--brand); }

/* Ficha de producto */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.product-media #mainProductImage { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }
.product-media .thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.product-media .thumbs .thumb { width: 68px; height: 68px; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.product-info .title { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.product-info .tag { display: inline-block; background: #e6e8ff; color: #000097; padding: 4px 8px; border-radius: 999px; font-size: 12px; margin-bottom: 8px; }
.product-info p { color: #334155; }
.product-info .buy-row { margin-top: 10px; display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: end; }
.product-info .qty label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
@media (max-width: 768px) { .product-detail { grid-template-columns: 1fr; } .product-info .buy-row { grid-template-columns: 1fr; } }

.section { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.section h3 { margin: 0 0 16px; font-size: 22px; color: var(--dark); }

/* Comentarios de clientes con fondo estilo hero (fondo a ancho completo, contenido limitado) */
.section.comments-hero { 
  position: relative; 
  margin-bottom: 12px; /* mantener 12px inferior */
}
.section.comments-hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* fondo ocupa todo el ancho de la ventana */
  background: linear-gradient(180deg, #00009710, #2563eb10);
  z-index: -1; /* queda detrás del contenido de la sección */
}

/* Testimonios estilo hero */
.testimonials .testimonials-banner { position: relative; overflow: hidden; border-radius: 16px; --banner-h: 150px; min-height: var(--banner-h); height: var(--banner-h); background: none; box-shadow: 0 14px 28px rgba(2,6,23,0.10); }
.testimonials .testimonials-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--theme-a, #0000976c), var(--theme-b, #2563eb6c)); mix-blend-mode: multiply; }
@media (max-width: 600px) { .testimonials .testimonials-banner { --banner-h: 100px; min-height: var(--banner-h); height: var(--banner-h); } }
.testimonials .testimonials-slider { position: absolute; inset: 0; z-index: 1; }
.testimonials .testimonials-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms ease; display: grid; place-items: center; text-align: center; padding: 0 24px; }
.testimonials .testimonials-slider .slide.active { opacity: 1; }
.testimonials .quote { font-size: calc(var(--banner-h) * 0.18); line-height: 1.35; font-weight: 600; color: #fff; transform: translateY(calc(var(--banner-h) * -0.06)); }
@media (max-width: 600px) {
  .testimonials .quote { transform: translateY(calc(var(--banner-h) * -0.08)); }
}
.testimonials .author { margin-top: calc(var(--banner-h) * 0.02); font-size: calc(var(--banner-h) * 0.12); color: var(--accent, #e2e8f0); display: inline-flex; align-items: center; transform: translateY(calc(var(--banner-h) * -0.18)); }
@media (max-width: 600px) {
  .testimonials .author { transform: translateY(calc(var(--banner-h) * -0.26)); }
}
/* Alinear las estrellas a la misma altura que el autor */
.testimonials .author .stars { display: inline-flex; gap: calc(var(--banner-h) * 0.015); }
.testimonials .author .stars .star { font-size: calc(var(--banner-h) * 0.115); }
.testimonials .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.22); color: white; border: 1px solid rgba(255,255,255,0.35); width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.testimonials .nav:hover { background: rgba(255,255,255,0.32); }
.testimonials .nav.prev { left: 12px; }
.testimonials .nav.next { right: 12px; }
.testimonials .dots { display: none; }
.testimonials .dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.65); }
.testimonials .dot.active { background: var(--accent, #fff); }

/* Valoraciones (estrellas) */
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.star{ color:#cbd5e1; font-size:0.9em; line-height:1; }
.star.filled{ color:#f59e0b; }

/* Temas del testimonials (hereda como el hero) */
.testimonials .testimonials-banner.theme-blue { --theme-a: #0000976c; --theme-b: #2563eb6c; --accent: #93c5fd; }
.testimonials .testimonials-banner.theme-indigo { --theme-a: #3730a36c; --theme-b: #4f46e56c; --accent: #c7d2fe; }
.testimonials .testimonials-banner.theme-cyan { --theme-a: #0e74906c; --theme-b: #06b6d46c; --accent: #a5f3fc; }
/* Temas adicionales */
.testimonials .testimonials-banner.theme-purple { --theme-a: #7e22ce6c; --theme-b: #a855f76c; --accent: #d8b4fe; }
.testimonials .testimonials-banner.theme-rose { --theme-a: #be185d6c; --theme-b: #f43f5e6c; --accent: #fecdd3; }
.testimonials .testimonials-banner.theme-emerald { --theme-a: #065f466c; --theme-b: #10b9816c; --accent: #a7f3d0; }
.testimonials .testimonials-banner.theme-orange { --theme-a: #c2410c6c; --theme-b: #f973166c; --accent: #fed7aa; }
.testimonials .testimonials-banner.theme-slate { --theme-a: #0f172a6c; --theme-b: #3341556c; --accent: #cbd5e1; }
.testimonials .testimonials-banner.theme-teal { --theme-a: #0f766e6c; --theme-b: #14b8a66c; --accent: #99f6e4; }
.testimonials .testimonials-banner.theme-amber { --theme-a: #b453096c; --theme-b: #f59e0b6c; --accent: #fde68a; }
/* Más temas */
.testimonials .testimonials-banner.theme-fuchsia { --theme-a: #a21caf6c; --theme-b: #e879f96c; --accent: #f5d0fe; }
.testimonials .testimonials-banner.theme-violet { --theme-a: #6d28d96c; --theme-b: #8b5cf66c; --accent: #ddd6fe; }
.testimonials .testimonials-banner.theme-sky { --theme-a: #0284c76c; --theme-b: #0ea5e96c; --accent: #bae6fd; }
.testimonials .testimonials-banner.theme-lime { --theme-a: #65a30d6c; --theme-b: #84cc166c; --accent: #d9f99d; }
.testimonials .testimonials-banner.theme-red { --theme-a: #b91c1c6c; --theme-b: #ef44446c; --accent: #fecaca; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 920px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(2,6,23,0.06); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.card:hover { box-shadow: 0 12px 30px rgba(2,6,23,0.12); transform: translateY(-2px); }
.card img { width: 100%; height: 220px; object-fit: cover; }
.card .content { padding: 12px; }
.card .title { font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.card .price { color: var(--brand); font-weight: 800; margin-top: 6px; }
.card .actions { display: flex; gap: 8px; margin-top: 10px; }
.card .btn { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

.tag { display: inline-block; background: #f1f5f9; color: #0f172a; border-radius: 999px; padding: 4px 10px; font-size: 12px; margin: 6px 0; }
[data-theme="dark"] .tag { background: #111827; color: #e5e7eb; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: #334155; background: var(--surface); }
[data-theme="dark"] .chip { color: #e5e7eb; }
.chip.active { background: var(--brand-2); color: white; border-color: var(--brand-2); }

/* Ajustar ancho del bloque de filtros/chips al del hero (1100px) */
.section#catalogo .filters { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Filtros */
.filters .toolbar input[type="range"] { accent-color: var(--brand); }
.filters .toolbar input, .filters .toolbar select { background: var(--surface); color: var(--ink); }

/* Iconografía destacada */
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 920px) { .icon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .icon-grid { grid-template-columns: 1fr; } }
.icon-card { border-radius: 12px; padding: 16px; color: #0f172a; display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 18px rgba(2,6,23,0.06); background: var(--surface); border: 1px solid var(--border); }
.icon-card .icon { width: 42px; height: 42px; border-radius: 999px; background: #e6e8ff; display: grid; place-items: center; border: 1px solid #c7d2fe; }
.icon-card h4 { margin: 0 0 4px; font-weight: 700; letter-spacing: -0.01em; }
.icon-card p { margin: 0; opacity: 0.9; color: #334155; }
.icon-card.purple .icon { background: #e6e8ff; border-color: #c7d2fe; }
.icon-card.cyan .icon { background: #dbeafe; border-color: #93c5fd; }
.icon-card.coral .icon { background: #e2e8f0; border-color: #cbd5e1; }

.comments { display: grid; gap: 12px; }
.comment { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }

footer { border-top: 1px solid var(--border); background: var(--surface); padding: 18px 16px; }
footer .wrap { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; color: #334155; }

.cart-indicator { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.badge { display: inline-block; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: white; text-align: center; line-height: 22px; font-size: 13px; }
/* Toolbar layout */
.toolbar { margin-top: 15px; }

/* Separación del listado respecto a los filtros */
.grid { margin-top: 12px; }
/* Separación controlada desde la toolbar en la sección Catálogo */
.section#catalogo .toolbar { margin-bottom: 35px; }
.section#catalogo .grid { margin-top: 0; }
/* Más separación entre subsecciones dentro de Catálogo */
.section#catalogo .icon-grid { margin-bottom: 35px; }
.section#catalogo .filters .chips { margin-bottom: 20px; }

/* ---- Demo5 shop layout ---- */
.shop-page { --brand: #3C63A4; --accent: #3C63A4; }
.breadcrumb-nav { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.breadcrumb-nav .container { max-width: 1100px; margin: 0 auto; padding: 12px 16px; }
.breadcrumb { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; color: #64748b; font-size: 13px; }
.breadcrumb li a { color: #64748b; text-decoration: none; }
.breadcrumb li a:hover { color: var(--brand); }
.breadcrumb li + li::before { content: '/'; color: #cbd5e1; margin-right: 10px; }

.page-content .container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }

.shop-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; height: fit-content; }
.widget + .widget { margin-top: 18px; }
.widget-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #0f172a; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { margin: 6px 0; }
.widget ul a { color: #334155; text-decoration: none; font-weight: 500; }
.widget ul a.active, .widget ul a:hover { color: var(--brand); }
.widget-field { margin-top: 10px; }
.widget-field label { display:block; font-size: 13px; color: #334155; margin-bottom: 6px; font-weight: 600; }
.widget-field input, .widget-field select { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.filter-range { padding-top: 4px; }
.filter-range input[type=range] { width: 100%; }
.filter-range input[type=range] { accent-color: var(--brand); }
.filter-range input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: transparent; }
.filter-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 999px; background: var(--brand); border: 2px solid white; margin-top: -5px; }
.filter-range input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.filter-range input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: var(--brand); border: 2px solid white; }
.range-output { margin-top: 4px; color: #64748b; font-size: 12px; }
.filter-range .range-output, #filterPriceLabel { color: var(--brand); }

.content-area { min-width: 0; }
.shop-banner {
  border-radius: 0;
  background: transparent;
  border: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 140px;
  /* ancho contenido y centrado */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 18px;
}
@media (max-width: 600px) {
  .shop-banner { max-width: 92vw; }
}
.shop-banner .banner-content { text-align: center; padding: 20px; }
.shop-banner h2 { margin: 0 0 6px; font-size: 28px; color: #0f172a; }
.shop-banner p { margin: 0; color: #64748b; }

.toolbox { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); position: sticky; top: 74px; z-index: 9; }
.toolbox .toolbox-left, .toolbox .toolbox-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbox .toolbox-item { display: inline-flex; align-items: center; gap: 8px; color: #334155; font-size: 13px; }
.toolbox select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.layout-toggle { display: inline-flex; align-items: center; gap: 6px; }
.layout-toggle button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: #334155; }
/* Badges para columna “Modo” en admin */
.mode-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #374151;
  white-space: nowrap;
}
.mode-badge--color { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.mode-badge--theme { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.mode-badge--auto  { background: #e5e7eb; color: #111827; border-color: #d1d5db; }
.layout-toggle button.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.products.grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .products.grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .products.grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .products.grid { grid-template-columns: 1fr; } }
.product { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.product-media { background: #F7F8FA; display: block; }
.product-media img { width: 100%; height: 220px; object-fit: cover; display: block; }
.product-details { padding: 12px; }

/* List view for products */
.products.list { margin-top: 16px; display: block; }
.products.list .product { display: flex; gap: 16px; align-items: stretch; }
.products.list .product-media { flex: 0 0 220px; }
.products.list .product-media img { width: 220px; height: 220px; border-right: 1px solid var(--border); border-radius: 0; }
.products.list .product-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.products.list .product-action { margin-top: 8px; display: flex; gap: 8px; }
.product-cat { color: #94a3b8; font-size: 12px; margin-bottom: 4px; }
.product-name { margin: 0; font-size: 16px; color: #0f172a; }
.product-name a { text-decoration: none; color: inherit; }
.product-price { margin-top: 6px; font-weight: 700; color: #111827; }
.product-action { margin-top: 10px; display: flex; gap: 8px; }
.btn-product { display: inline-block; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: #334155; text-decoration: none; font-weight: 600; font-size: 13px; }
.btn-product.btn-cart { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-product:hover { border-color: var(--brand); color: var(--brand); }

.pagination { margin-top: 16px; display: flex; gap: 6px; align-items: center; }
.pagination a { display: inline-block; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: #334155; text-decoration: none; }
.pagination a.page.active, .pagination a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- Cart layout (demo5-like) ---- */
.main.cart { --brand: var(--brand); padding-top: 30px; padding-bottom: 30px; }
/* Forzar separación visible bajo la cabecera en la página de carrito */
.main.cart .page-content { padding-top: 30px !important; }
/* Separación entre pasos (step-by) y el contenedor principal del carrito */
.main.cart .step-by { margin-bottom: 60px; }
/* Suavizar espaciado del botón bajo el sidebar del carrito */
.main.cart .cart-checkout-aside { margin-top: 30px; }
.page-content { background: transparent; }
.pt-7 { padding-top: 28px; }
.pb-10 { padding-bottom: 36px; }
.pr-4 { padding-right: 16px; }
.pl-4 { padding-left: 16px; }
.mt-7 { margin-top: 30px; }
.mb-2 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mr-4 { margin-right: 16px; }

.main.cart .container { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.main.cart .row { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .main.cart .row { grid-template-columns: 1fr; } }

/* Steps header */
.step-by { display: flex; gap: 10px; align-items: center; justify-content: center; }
.title.title-simple.title-step { margin: 0; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.title.title-simple.title-step a { color: inherit; text-decoration: none; }
.title.title-simple.title-step.active { color: var(--brand); }

/* Icono entre pasos y contenido (pedido confirmado) */
.step-icon { display: flex; justify-content: center; align-items: center; margin-top: 8px; }
.step-icon .icon-check { width: 44px; height: 44px; fill: #0f172a; }

/* Table */
table.shop-table.cart-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
table.shop-table.cart-table thead tr { background: #F7F8FA; }
table.shop-table.cart-table th, table.shop-table.cart-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; color: #334155; }
table.shop-table.cart-table th span { font-weight: 700; color: #0f172a; }
table.shop-table.cart-table tbody tr:last-child td { border-bottom: none; }
.product-thumbnail figure { margin: 0; }
.product-thumbnail img { border-radius: 10px; object-fit: cover; }
.product-name-section a { color: #0f172a; font-weight: 600; text-decoration: none; }
.product-name-section a:hover { color: var(--brand); }
.product-price .amount, .product-subtotal .amount { font-weight: 700; color: #0f172a; }

/* Quantity controls */
.input-group { display: inline-flex; align-items: center; gap: 6px; }
.input-group .form-control.quantity { width: 72px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.quantity-minus, .quantity-plus { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: #334155; cursor: pointer; }
.quantity-minus:hover, .quantity-plus:hover { border-color: var(--brand); color: var(--brand); }
.product-remove { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; text-decoration: none; color: #334155; border: 1px solid var(--border); }
.product-remove:hover { color: #b91c1c; border-color: #b91c1c; }

/* Sidebar */
.sticky-sidebar-wrapper { position: relative; }
.sticky-sidebar { position: sticky; top: 80px; }
.summary-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: #0f172a; }
table.shipping, table.total { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
table.shipping td, table.total td { padding: 12px; border-bottom: 1px solid var(--border); }
table.shipping tbody tr:last-child td, table.total tbody tr:last-child td { border-bottom: none; }
.summary-subtitle { margin: 0; font-size: 14px; font-weight: 700; color: #334155; }
.summary-subtotal-price, .summary-total-price { font-weight: 800; color: #0f172a; }
.custom-radio { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.custom-control-input { accent-color: var(--brand); }
.custom-control-label { color: #334155; font-size: 13px; }
.shipping-address { display: grid; gap: 10px; margin: 12px 0; }
.select-box select.form-control, .shipping-address .form-control, .cart-coupon-box .form-control { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }

/* Buttons variations to match demo5 names */
.btn-dark { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline { background: var(--surface); }
.btn-dark.btn-outline { color: var(--brand); border-color: var(--brand); }
.btn-rounded { border-radius: 999px; }
.btn-icon-left::before { content: ''; }
.btn-checkout { display: block; width: 50%; text-align: center; margin-top: 12px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
  .btn-checkout { width: 100%; margin-left: 0; margin-right: 0; }
}
/* Disabled buttons */
.btn.disabled, a.btn.disabled { pointer-events: none; opacity: 0.6; }

/* Typography helpers */
.text-uppercase { text-transform: uppercase; }
.text-grey { color: #64748b; }
.ls-m { letter-spacing: 0.06em; }