/*=============================================================
  SE CHIP · TIENDA — SISTEMA DE DISEÑO "FICHA TÉCNICA"
  Paleta: grafito + papel + ámbar circuito
  Tipos:  Space Grotesk (display) / Inter (cuerpo) / IBM Plex Mono (datos)
  Firma:  tarjetas en retícula con esquinas de corchete + specs en mono
=============================================================*/

/* ---------- Reasigna variables del sitio SOLO dentro de la tienda ---------- */
body.tienda-shell {
  /* Identidad base (usadas por navbar/styles.css) */
  --first-color: #FF8A00;
  /* --title-color se usa tanto para texto de contenido sobre fondos claros
     (nombres de producto, precios) como para texto del navbar sobre fondo
     oscuro. Se deja oscuro aqui -correcto para el contenido- y el navbar
     se fuerza a claro mas abajo con reglas especificas. */
  --title-color: #14161A;
  --text-color: #4A4E57;
  --body-color: #14161A;
  --container-color: #FFFFFF;
  --border-color: #23262B;

  /* Paleta nombrada */
  --sc-grafito: #14161A;
  --sc-grafito-2: #1D2025;
  --sc-papel: #F6F4EF;
  --sc-ambar: #FF8A00;
  --sc-ambar-suave: #FFB25C;
  --sc-verde: #2BD576;
  --sc-acero: #8A8F98;
  --sc-linea: #23262B;
  --sc-linea-clara: #E4E1D8;
  --sc-rojo: #E5484D;

  /* Tipografía */
  --sc-font-display: "Space Grotesk", "Inter", sans-serif;
  --sc-font-body: "Inter", sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Overrides de variables ya usadas por tienda-styles.css */
  --tienda-primary: var(--sc-ambar);
  --tienda-secondary: var(--sc-verde);
  --tienda-accent: var(--sc-ambar);
  --tienda-success: var(--sc-verde);
  --tienda-danger: var(--sc-rojo);
  --tienda-warning: var(--sc-ambar);
  --tienda-info: var(--sc-grafito);

  --tienda-bg-light: var(--sc-papel);
  --tienda-bg-white: #FFFFFF;
  --tienda-bg-gray: #EFEDE6;

  --tienda-text-dark: var(--sc-grafito);
  --tienda-text-medium: var(--sc-acero);
  --tienda-text-light: var(--sc-acero);

  --tienda-border-color: var(--sc-linea-clara);
  --tienda-border-radius: 2px;
  --tienda-border-radius-sm: 0px;
  --tienda-border-radius-lg: 2px;

  background-color: var(--sc-papel);
  color: var(--sc-grafito);
}

/* ---------- Base tipográfica ---------- */
body.tienda-shell {
  font-family: var(--sc-font-body);
}

body.tienda-shell h1,
body.tienda-shell h2,
body.tienda-shell h3,
body.tienda-shell .sc-display {
  font-family: var(--sc-font-display);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--sc-grafito);
}

body.tienda-shell .sc-mono,
body.tienda-shell .price-current,
body.tienda-shell .price-original,
body.tienda-shell .price-discount,
body.tienda-shell .precio-actual,
body.tienda-shell .precio-anterior,
body.tienda-shell .precio-descuento,
body.tienda-shell .carrito-producto-precio,
body.tienda-shell .carrito-producto-precio-original,
body.tienda-shell .carrito-producto-subtotal,
body.tienda-shell .carrito-producto-subtotal-line strong,
body.tienda-shell .summary-producto-precio,
body.tienda-shell .subtotal-precio,
body.tienda-shell .spec-value,
body.tienda-shell .spec-label,
body.tienda-shell .factura-items,
body.tienda-shell .factura-totales,
body.tienda-shell .orden-numero,
body.tienda-shell #orden-numero {
  font-family: var(--sc-font-mono);
  font-feature-settings: "tnum" 1;
}

/* ---------- Header de la tienda (sobre variables globales) ---------- */
body.tienda-shell .header {
  box-shadow: none;
  border-bottom: 1px solid var(--sc-linea);
}

body.tienda-shell .nav__logo,
body.tienda-shell .nav__link,
body.tienda-shell .nav__search,
body.tienda-shell .nav__user,
body.tienda-shell .nav__shopping,
body.tienda-shell .nav__favorites,
body.tienda-shell .nav__toggle i,
body.tienda-shell .nav__close i,
body.tienda-shell .search__icon,
body.tienda-shell .search__close {
  color: var(--sc-papel);
}

/* navbar/styles.css fuerza estos dos con !important y mayor especificidad
   (.header .nav__actions .nav__search/.nav__user); se iguala aqui para que
   no queden oscuros sobre el header oscuro */
body.tienda-shell .header .nav__actions .nav__search,
body.tienda-shell .header .nav__actions .nav__user {
  color: var(--sc-papel) !important;
}

body.tienda-shell .header .nav__actions .nav__search:hover,
body.tienda-shell .header .nav__actions .nav__user:hover {
  color: var(--sc-ambar) !important;
}

body.tienda-shell .nav__link.active-link,
body.tienda-shell .nav__link.active {
  color: var(--sc-ambar);
}

@media screen and (max-width: 1023px) {
  body.tienda-shell .nav__menu {
    background-color: var(--sc-grafito);
  }
}

/* ---------- Selección / foco ---------- */
body.tienda-shell ::selection {
  background: var(--sc-ambar);
  color: var(--sc-grafito);
}

body.tienda-shell a:focus-visible,
body.tienda-shell button:focus-visible,
body.tienda-shell input:focus-visible,
body.tienda-shell [tabindex]:focus-visible {
  outline: 2px solid var(--sc-ambar);
  outline-offset: 2px;
}

/* ---------- Botones cuadrados de acento (firma de marca) ---------- */
body.tienda-shell .btn-primary,
body.tienda-shell .btn-accion.btn-primary,
body.tienda-shell .add-to-cart-btn,
body.tienda-shell .btn-add-cart,
body.tienda-shell .btn-buy-now,
body.tienda-shell .btn-checkout,
body.tienda-shell .hero-cta,
body.tienda-shell .btn-ir-tienda,
body.tienda-shell .btn-ver-carrito,
body.tienda-shell .descuento-aplicar {
  background: var(--sc-ambar) !important;
  color: var(--sc-grafito) !important;
  border: 1px solid var(--sc-ambar) !important;
  border-radius: 0 !important;
  font-family: var(--sc-font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

body.tienda-shell .btn-primary:hover,
body.tienda-shell .btn-accion.btn-primary:hover,
body.tienda-shell .add-to-cart-btn:hover,
body.tienda-shell .btn-add-cart:hover,
body.tienda-shell .btn-buy-now:hover,
body.tienda-shell .btn-checkout:not(.disabled):hover,
body.tienda-shell .hero-cta:hover,
body.tienda-shell .btn-ir-tienda:hover,
body.tienda-shell .btn-ver-carrito:hover {
  background: var(--sc-grafito) !important;
  color: var(--sc-papel) !important;
  border-color: var(--sc-grafito) !important;
  transform: none !important;
}

body.tienda-shell .btn-checkout.disabled {
  background: var(--sc-acero) !important;
  border-color: var(--sc-acero) !important;
  color: var(--sc-papel) !important;
  opacity: 1 !important;
}

body.tienda-shell .btn-secondary,
body.tienda-shell .btn-seguir,
body.tienda-shell .btn-tertiary {
  border-radius: 0 !important;
  font-family: var(--sc-font-mono);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* ---------- Badges cuadrados ---------- */
body.tienda-shell .product-badge,
body.tienda-shell .producto-badge,
body.tienda-shell .carrito-producto-badge,
body.tienda-shell .badge-descuento,
body.tienda-shell .badge-sin-stock {
  border-radius: 0 !important;
  font-family: var(--sc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.7rem;
}

/* ---------- Firma: marco retícula con corchetes de esquina ----------
   Se aplica sin tocar el JS: son pseudo-elementos sobre contenedores
   de imagen ya existentes en los templates dinámicos. */
body.tienda-shell .product-image-container,
body.tienda-shell .main-image,
body.tienda-shell .carrusel-imagen,
body.tienda-shell .zoom-modal-image,
body.tienda-shell .hero-right-card,
body.tienda-shell .summary-producto-img {
  position: relative;
}

body.tienda-shell .product-image-container::before,
body.tienda-shell .product-image-container::after,
body.tienda-shell .main-image::before,
body.tienda-shell .main-image::after,
body.tienda-shell .carrusel-imagen::before,
body.tienda-shell .carrusel-imagen::after,
body.tienda-shell .hero-right-card::before,
body.tienda-shell .hero-right-card::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 3;
  pointer-events: none;
}

body.tienda-shell .product-image-container::before,
body.tienda-shell .main-image::before,
body.tienda-shell .carrusel-imagen::before,
body.tienda-shell .hero-right-card::before {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--sc-ambar);
  border-left: 2px solid var(--sc-ambar);
}

body.tienda-shell .product-image-container::after,
body.tienda-shell .main-image::after,
body.tienda-shell .carrusel-imagen::after,
body.tienda-shell .hero-right-card::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid var(--sc-ambar);
  border-right: 2px solid var(--sc-ambar);
}

/* ---------- Hairlines en vez de sombras ---------- */
body.tienda-shell .best-seller-card,
body.tienda-shell .producto-card-new,
body.tienda-shell .bookmark-card {
  box-shadow: none !important;
  border: 1px solid var(--sc-linea-clara) !important;
  border-radius: 0 !important;
}

body.tienda-shell .best-seller-card:hover,
body.tienda-shell .producto-card-new:hover {
  box-shadow: none !important;
  border-color: var(--sc-ambar) !important;
  transform: none !important;
}

/* ---------- Blindaje de marca ----------
   storefront-theme.css y storefront-pages.css son hojas de "pulido" heredadas
   del diseño anterior (azul/redondeado) y se cargan DESPUES de los CSS
   propios de cada pagina, asi que sin !important le ganan la partida a los
   colores/bordes nuevos. Como design-tokens.css es el ultimo archivo que se
   carga en todas las paginas, aqui se fija la version definitiva. */
body.tienda-shell .btn-cart,
body.tienda-shell .btn-finalizar-compra,
body.tienda-shell .btn-proceder-checkout,
body.tienda-shell .btn-submit,
body.tienda-shell .slide-btn {
  background: var(--sc-ambar) !important;
  border-color: var(--sc-ambar) !important;
  color: var(--sc-grafito) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.tienda-shell .btn-cart:hover,
body.tienda-shell .btn-finalizar-compra:hover,
body.tienda-shell .btn-proceder-checkout:hover,
body.tienda-shell .btn-submit:hover,
body.tienda-shell .slide-btn:hover {
  background: var(--sc-grafito) !important;
  border-color: var(--sc-grafito) !important;
  color: var(--sc-ambar) !important;
  transform: none !important;
}

body.tienda-shell .btn-cart i {
  color: var(--sc-papel) !important;
}

/* Botones de carrusel (resultados y producto) y de zoom: fondo oscuro,
   icono claro, acento ambar al pasar el mouse */
body.tienda-shell .carrusel-btn,
body.tienda-shell .zoom-btn {
  background: rgba(20, 22, 26, 0.85) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

body.tienda-shell .carrusel-btn i,
body.tienda-shell .zoom-btn i {
  color: var(--sc-papel) !important;
}

body.tienda-shell .carrusel-btn:hover,
body.tienda-shell .zoom-btn:hover {
  background: var(--sc-ambar) !important;
}

body.tienda-shell .carrusel-btn:hover i,
body.tienda-shell .zoom-btn:hover i {
  color: var(--sc-grafito) !important;
}

/* Contenedores que las hojas de pulido redondean/sombrean de nuevo */
body.tienda-shell .checkout-main,
body.tienda-shell .order-summary,
body.tienda-shell .carrito-page-contenido,
body.tienda-shell .carrito-resumen,
body.tienda-shell .carrito-header-page,
body.tienda-shell .confirmacion-container,
body.tienda-shell .form-card,
body.tienda-shell .benefits-panel,
body.tienda-shell .success-card,
body.tienda-shell .producto-layout,
body.tienda-shell .producto-info,
body.tienda-shell .thumbnail-item,
body.tienda-shell .main-image-container,
body.tienda-shell .producto-security,
body.tienda-shell .checkout-progress,
body.tienda-shell .delivery-option,
body.tienda-shell .payment-option,
body.tienda-shell .direccion-container,
body.tienda-shell .terminos-section,
body.tienda-shell .info-box,
body.tienda-shell .summary-producto,
body.tienda-shell .resultados-header__back,
body.tienda-shell .filtro-btn,
body.tienda-shell .option-value,
body.tienda-shell .guide-btn,
body.tienda-shell .secondary-action-btn,
body.tienda-shell .hero-slider {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.tienda-shell .seller-page .hero-copy,
body.tienda-shell .seller-page .hero-badge-card {
  background: var(--sc-grafito) !important;
  color: var(--sc-papel) !important;
  border-color: #23262B !important;
  border-radius: 0 !important;
}

body.tienda-shell .tienda-footer-mockup {
  background: var(--sc-grafito) !important;
  border-top: none !important;
}

/* ---------- Utilidad: etiqueta tipo eyebrow mono ---------- */
body.tienda-shell .sc-eyebrow {
  font-family: var(--sc-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-acero);
}