/* ============================================================
   IDENTIGAN — Custom CSS para Zoho Commerce
   Basado en Manual de Marca v1 e identigan.com (Next.js)

   INSTRUCCIONES:
   1. En Zoho Commerce → Storefront → Customize → Custom CSS Editor
   2. Pegar TODO este archivo
   3. Guardar y publicar
   ============================================================ */

/* ── Google Fonts (las mismas del sitio principal) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ── Variables de marca ── */
:root {
  /* Verde Teal — Primario */
  --id-brand-50: #eefaf7;
  --id-brand-100: #d5f2ec;
  --id-brand-200: #aee5da;
  --id-brand-300: #79d1c3;
  --id-brand-400: #4cbdac;
  --id-brand-500: #2A7C6F;
  --id-brand-600: #236a5f;
  --id-brand-700: #1d584f;
  --id-brand-800: #174640;
  --id-brand-900: #10210E;
  --id-brand-950: #0b1a0d;

  /* Menta Suave — Tinte claro del primario */
  --id-mint: #c9ede7;
  --id-mint-light: #e8f8f5;

  /* Terracotta — Acento (max 5% de composicion) */
  --id-accent: #8B4229;
  --id-accent-hover: #7a3a24;

  /* Neutro */
  --id-neutral: #f4f4f4;
  --id-white: #ffffff;

  /* Tipografia */
  --id-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --id-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Sombras */
  --id-shadow-sm: 0 1px 2px rgba(16, 33, 14, 0.05);
  --id-shadow-md: 0 4px 6px -1px rgba(16, 33, 14, 0.07), 0 2px 4px -2px rgba(16, 33, 14, 0.05);
  --id-shadow-lg: 0 10px 15px -3px rgba(16, 33, 14, 0.08), 0 4px 6px -4px rgba(16, 33, 14, 0.04);

  /* Bordes */
  --id-radius-sm: 6px;
  --id-radius-md: 10px;
  --id-radius-lg: 16px;
  --id-radius-xl: 24px;

  /* Transiciones */
  --id-transition: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Reset tipografico global ── */
body,
.zp-page-wrapper {
  font-family: var(--id-font-body) !important;
  color: var(--id-brand-900) !important;
  background-color: var(--id-white) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.zp-section-title,
.zp-heading,
[class*="heading"],
[class*="title"] {
  font-family: var(--id-font-heading) !important;
  color: var(--id-brand-900) !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

p, span, li, a, label, input, textarea, select, button {
  font-family: var(--id-font-body) !important;
}

/* ── Header / Navegacion ── */
.theme-header,
.zp-header,
header,
[class*="header"] {
  background-color: var(--id-white) !important;
  border-bottom: 1px solid rgba(42, 124, 111, 0.08) !important;
  box-shadow: var(--id-shadow-sm) !important;
}

.theme-header a,
.zp-header a,
.zp-nav a,
nav a {
  color: var(--id-brand-900) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  transition: color var(--id-transition) !important;
  text-decoration: none !important;
}

.theme-header a:hover,
.zp-header a:hover,
.zp-nav a:hover,
nav a:hover {
  color: var(--id-brand-500) !important;
}

/* Logo */
.zp-logo img,
.theme-logo img {
  max-height: 44px !important;
}

/* ── Botones primarios (Verde Teal) ── */
.zp-btn-primary,
.zp-btn,
button[type="submit"],
.zp-add-to-cart,
.zp-buy-now,
a.zp-btn,
[class*="btn-primary"],
.zp-cart-checkout-btn,
input[type="submit"] {
  background-color: var(--id-brand-500) !important;
  color: var(--id-white) !important;
  border: none !important;
  border-radius: var(--id-radius-md) !important;
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: 12px 28px !important;
  letter-spacing: 0.01em;
  transition: all var(--id-transition) !important;
  box-shadow: var(--id-shadow-sm) !important;
  cursor: pointer;
  text-transform: none !important;
}

.zp-btn-primary:hover,
.zp-btn:hover,
button[type="submit"]:hover,
.zp-add-to-cart:hover,
.zp-buy-now:hover,
a.zp-btn:hover,
[class*="btn-primary"]:hover,
.zp-cart-checkout-btn:hover,
input[type="submit"]:hover {
  background-color: var(--id-brand-600) !important;
  box-shadow: var(--id-shadow-md) !important;
  transform: translateY(-1px);
}

.zp-btn-primary:active,
.zp-btn:active,
.zp-add-to-cart:active,
.zp-buy-now:active {
  transform: translateY(0);
  background-color: var(--id-brand-700) !important;
}

/* ── Botones secundarios / outline ── */
.zp-btn-secondary,
[class*="btn-secondary"],
[class*="btn-outline"] {
  background-color: transparent !important;
  color: var(--id-brand-500) !important;
  border: 2px solid var(--id-brand-500) !important;
  border-radius: var(--id-radius-md) !important;
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
  padding: 10px 26px !important;
  transition: all var(--id-transition) !important;
  text-transform: none !important;
}

.zp-btn-secondary:hover,
[class*="btn-secondary"]:hover,
[class*="btn-outline"]:hover {
  background-color: var(--id-brand-500) !important;
  color: var(--id-white) !important;
}

/* ── Botones de acento Terracotta (para ofertas, CTAs especiales) ── */
.zp-btn-accent,
[class*="btn-accent"] {
  background-color: var(--id-accent) !important;
  color: var(--id-white) !important;
  border: none !important;
  border-radius: var(--id-radius-md) !important;
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
}

.zp-btn-accent:hover,
[class*="btn-accent"]:hover {
  background-color: var(--id-accent-hover) !important;
}

/* ── Tarjetas de producto ── */
.zp-product-card,
.zp-product-item,
[class*="product-card"],
[class*="product-item"] {
  background: var(--id-white) !important;
  border: 1px solid rgba(42, 124, 111, 0.08) !important;
  border-radius: var(--id-radius-lg) !important;
  overflow: hidden !important;
  transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  box-shadow: var(--id-shadow-sm) !important;
}

.zp-product-card:hover,
.zp-product-item:hover,
[class*="product-card"]:hover,
[class*="product-item"]:hover {
  box-shadow: var(--id-shadow-lg) !important;
  transform: translateY(-4px);
  border-color: rgba(42, 124, 111, 0.15) !important;
}

/* Imagen del producto */
.zp-product-card img,
.zp-product-item img,
[class*="product-card"] img,
[class*="product-image"] img {
  border-radius: 0 !important;
  object-fit: contain !important;
  background: var(--id-neutral) !important;
  padding: 16px !important;
}

/* Nombre del producto */
.zp-product-name,
.zp-product-title,
[class*="product-name"],
[class*="product-title"] {
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
  color: var(--id-brand-900) !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

.zp-product-name a,
.zp-product-title a {
  color: var(--id-brand-900) !important;
  text-decoration: none !important;
}

.zp-product-name a:hover,
.zp-product-title a:hover {
  color: var(--id-brand-500) !important;
}

/* Precio */
.zp-product-price,
[class*="product-price"],
[class*="price"] {
  font-family: var(--id-font-heading) !important;
  font-weight: 700 !important;
  color: var(--id-brand-500) !important;
  font-size: 1.125rem !important;
}

/* Precio tachado (anterior) */
.zp-product-compare-price,
[class*="compare-price"],
[class*="original-price"],
del {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
}

/* ── Pagina de detalle de producto ── */
.zp-product-detail-title,
.zp-product-page-title {
  font-family: var(--id-font-heading) !important;
  font-weight: 800 !important;
  color: var(--id-brand-900) !important;
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
}

.zp-product-description,
[class*="product-description"] {
  font-family: var(--id-font-body) !important;
  color: var(--id-brand-900) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  opacity: 0.85;
}

/* Tabs de producto (Descripcion, Especificaciones) */
.zp-product-tabs .zp-tab-active,
[class*="tab-active"] {
  border-bottom-color: var(--id-brand-500) !important;
  color: var(--id-brand-500) !important;
  font-weight: 600 !important;
}

.zp-product-tabs a,
.zp-product-tabs button {
  font-family: var(--id-font-heading) !important;
  color: var(--id-brand-900) !important;
  transition: color var(--id-transition) !important;
}

/* Galeria de imagenes */
.zp-product-gallery img,
[class*="product-gallery"] img {
  border-radius: var(--id-radius-md) !important;
  background: var(--id-neutral) !important;
}

/* Selector de cantidad */
.zp-qty-selector,
[class*="qty"],
[class*="quantity"] {
  border-radius: var(--id-radius-sm) !important;
  border: 1px solid rgba(42, 124, 111, 0.2) !important;
}

/* ── Categorias / Colecciones ── */
.zp-collection-title,
[class*="collection-title"],
[class*="category-title"] {
  font-family: var(--id-font-heading) !important;
  font-weight: 700 !important;
  color: var(--id-brand-900) !important;
}

.zp-collection-card,
[class*="collection-card"],
[class*="category-card"] {
  border-radius: var(--id-radius-lg) !important;
  overflow: hidden !important;
  transition: all 300ms ease !important;
}

.zp-collection-card:hover,
[class*="collection-card"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--id-shadow-md) !important;
}

/* ── Carrito de compras ── */
.zp-cart-drawer,
.zp-cart-sidebar,
[class*="cart-drawer"],
[class*="cart-sidebar"] {
  background: var(--id-white) !important;
  font-family: var(--id-font-body) !important;
}

.zp-cart-item-name {
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
  color: var(--id-brand-900) !important;
}

.zp-cart-total,
[class*="cart-total"] {
  font-family: var(--id-font-heading) !important;
  font-weight: 700 !important;
  color: var(--id-brand-900) !important;
  font-size: 1.25rem !important;
}

/* Icono del carrito en header */
.zp-cart-icon,
[class*="cart-icon"],
[class*="cart-count"] {
  color: var(--id-brand-900) !important;
}

.zp-cart-count,
[class*="cart-badge"],
[class*="cart-count"] span {
  background-color: var(--id-brand-500) !important;
  color: var(--id-white) !important;
  border-radius: 50% !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

/* ── Checkout ── */
.zp-checkout-wrapper,
[class*="checkout"] {
  font-family: var(--id-font-body) !important;
}

.zp-checkout-btn,
[class*="checkout-btn"],
[class*="place-order"] {
  background-color: var(--id-brand-500) !important;
  color: var(--id-white) !important;
  border-radius: var(--id-radius-md) !important;
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 14px 32px !important;
  transition: all var(--id-transition) !important;
}

.zp-checkout-btn:hover,
[class*="checkout-btn"]:hover,
[class*="place-order"]:hover {
  background-color: var(--id-brand-600) !important;
}

/* ── Formularios ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-family: var(--id-font-body) !important;
  border: 1px solid rgba(42, 124, 111, 0.2) !important;
  border-radius: var(--id-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 0.9375rem !important;
  color: var(--id-brand-900) !important;
  background: var(--id-white) !important;
  transition: border-color var(--id-transition), box-shadow var(--id-transition) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--id-brand-500) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 124, 111, 0.12) !important;
}

label {
  font-weight: 500 !important;
  color: var(--id-brand-900) !important;
  font-size: 0.875rem !important;
}

/* ── Barra de busqueda ── */
.zp-search-input,
[class*="search-input"],
[class*="search-box"] input {
  border-radius: var(--id-radius-xl) !important;
  border: 1px solid rgba(42, 124, 111, 0.15) !important;
  padding: 10px 20px !important;
  font-family: var(--id-font-body) !important;
}

.zp-search-input:focus,
[class*="search-input"]:focus {
  border-color: var(--id-brand-500) !important;
  box-shadow: 0 0 0 3px rgba(42, 124, 111, 0.1) !important;
}

/* ── Footer ── */
.theme-footer,
.zp-footer,
footer,
[class*="footer"] {
  background-color: var(--id-brand-900) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: var(--id-font-body) !important;
}

.theme-footer h3,
.theme-footer h4,
.zp-footer h3,
.zp-footer h4,
footer h3,
footer h4 {
  font-family: var(--id-font-heading) !important;
  color: var(--id-white) !important;
  font-weight: 600 !important;
}

.theme-footer a,
.zp-footer a,
footer a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color var(--id-transition) !important;
  text-decoration: none !important;
}

.theme-footer a:hover,
.zp-footer a:hover,
footer a:hover {
  color: var(--id-mint) !important;
}

/* ── Badges y etiquetas ── */
.zp-sale-badge,
[class*="sale-badge"],
[class*="discount-badge"] {
  background-color: var(--id-accent) !important;
  color: var(--id-white) !important;
  border-radius: var(--id-radius-sm) !important;
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
}

.zp-new-badge,
[class*="new-badge"] {
  background-color: var(--id-brand-500) !important;
  color: var(--id-white) !important;
  border-radius: var(--id-radius-sm) !important;
  font-family: var(--id-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}

/* ── Breadcrumbs ── */
.zp-breadcrumb,
[class*="breadcrumb"] {
  font-family: var(--id-font-body) !important;
  font-size: 0.8125rem !important;
  color: rgba(16, 33, 14, 0.5) !important;
}

.zp-breadcrumb a,
[class*="breadcrumb"] a {
  color: var(--id-brand-500) !important;
  text-decoration: none !important;
}

.zp-breadcrumb a:hover {
  text-decoration: underline !important;
}

/* ── Paginacion ── */
.zp-pagination a,
[class*="pagination"] a {
  border-radius: var(--id-radius-sm) !important;
  color: var(--id-brand-900) !important;
  font-family: var(--id-font-body) !important;
  transition: all var(--id-transition) !important;
}

.zp-pagination .active,
.zp-pagination a:hover,
[class*="pagination"] .active {
  background-color: var(--id-brand-500) !important;
  color: var(--id-white) !important;
}

/* ── Mensajes de alerta y notificaciones ── */
.zp-alert-success,
[class*="alert-success"],
[class*="success-message"] {
  background-color: var(--id-mint-light) !important;
  color: var(--id-brand-700) !important;
  border: 1px solid var(--id-brand-200) !important;
  border-radius: var(--id-radius-md) !important;
}

.zp-alert-error,
[class*="alert-error"],
[class*="error-message"] {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--id-radius-md) !important;
}

/* ── Banner superior (anuncio) ── */
.zp-announcement-bar,
[class*="announcement"],
[class*="top-bar"] {
  background-color: var(--id-brand-500) !important;
  color: var(--id-white) !important;
  font-family: var(--id-font-heading) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 8px 16px !important;
}

.zp-announcement-bar a {
  color: var(--id-white) !important;
  text-decoration: underline !important;
}

/* ── Secciones de la tienda ── */
.zp-section,
[class*="section"] {
  padding: 48px 0 !important;
}

.zp-section-title {
  font-family: var(--id-font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  color: var(--id-brand-900) !important;
  margin-bottom: 32px !important;
}

/* Fondo claro alternado (tipo identigan.com) */
.zp-section-alt,
[class*="section-alt"],
[class*="bg-light"] {
  background-color: var(--id-neutral) !important;
}

/* ── Links generales ── */
a {
  color: var(--id-brand-500) !important;
  transition: color var(--id-transition) !important;
}

a:hover {
  color: var(--id-brand-600) !important;
}

/* ── Scrollbar personalizada ── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--id-neutral);
}

::-webkit-scrollbar-thumb {
  background: var(--id-brand-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--id-brand-500);
}

/* ── Responsive ajustes ── */
@media (max-width: 768px) {
  .zp-product-detail-title,
  .zp-product-page-title {
    font-size: 1.375rem !important;
  }

  .zp-section-title {
    font-size: 1.375rem !important;
  }

  .zp-btn-primary,
  .zp-add-to-cart,
  .zp-buy-now {
    padding: 12px 24px !important;
    font-size: 0.875rem !important;
    width: 100% !important;
  }

  .zp-product-card,
  .zp-product-item {
    border-radius: var(--id-radius-md) !important;
  }
}

/* ── Seleccion de texto ── */
::selection {
  background-color: var(--id-mint) !important;
  color: var(--id-brand-900) !important;
}