/*
Theme Name: IML Child
Template: storefront
Description: Child theme de Storefront para IML — Importadora y Distribuidora Morales Labra
Version: 1.0
Text Domain: iml-child
*/

/* ===== Variables de marca (mismas que en la versión Astro) ===== */
:root {
  --azul: #24344D;
  --azul-oscuro: #16212F;
  --azul-claro: #5A7FA6;
  --papel: #F4F5F7;
  --papel-card: #FFFFFF;
  --tinta: #1B2430;
  --serif: 'Fraunces', serif;
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
}

a { color: inherit; }

/* Storefront mete el contenido en una caja con ancho máximo (.col-full).
   Este wrapper "rompe" ese límite, separado del contenido visual para evitar conflictos. */
/* En vez de calcular anchos de ventana (frágil, causaba el corte de texto),
   directamente le decimos al contenedor de Storefront que no limite el ancho
   en la portada. Sin vw, sin overflow, sin sorpresas. */
.iml-front #content .col-full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.iml-fullbleed {
  width: 100%;
}

/* ===== Hero de la portada ===== */
.iml-cover {
  position: relative;
  min-height: 70vh;
  padding: 4vh 6vw;
  background: var(--papel);
  color: var(--tinta);
  overflow: hidden;
}

.iml-cover-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 8px 8px, rgba(27,36,48,0.09) 1.5px, transparent 1.6px) 0 0 / 28px 28px;
}

.iml-cover-inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  min-height: 64vh;
}

.iml-mark {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--azul);
  margin: 0 0 1.5rem;
}

/* Logo de la portada — the_custom_logo() genera su propio HTML,
   apuntamos a sus clases nativas en vez de una nuestra. */
.iml-cover-text .custom-logo-link {
  display: block;
  margin: 0 0 1.5rem;
}

.iml-cover-text .custom-logo {
  height: auto;
  width: auto;
  max-height: 56px;
  max-width: 180px;
  display: block;
}

.iml-cover h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

.iml-cover h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--azul);
}

.iml-tagline {
  font-size: 1.05rem;
  max-width: 40ch;
  color: rgba(27,36,48,0.72);
  margin: 0 0 2.5rem;
}

.iml-cta {
  display: inline-block;
  width: fit-content;
  background: var(--azul);
  color: #FFFFFF !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 4px;
  transition: transform 0.15s ease;
}

.iml-cta:hover { transform: translateY(-2px); color: #FFFFFF !important; }

/* Producto estrella en el hero: solo la foto, sin tarjeta ni precio */
.iml-cover-feature {
  display: flex;
  align-items: center;
  justify-content: center;
}

.iml-feature-photo {
  width: 100%;
  max-width: 540px;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  display: block;
}

/* ===== Carrusel de descuentos ===== */
.iml-carousel-section {
  padding: 2.5rem 6vw;
  background: color-mix(in srgb, var(--azul) 4%, var(--papel));
}

.iml-carousel {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.iml-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.iml-carousel-slide {
  flex: 0 0 100%;
  background: var(--azul);
  color: #FFFFFF;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
}

.iml-carousel-slide strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
}

.iml-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.iml-carousel-dots button {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--azul) 30%, transparent);
  cursor: pointer;
  padding: 0;
}

.iml-carousel-dots button.active { background: var(--azul); }

/* ===== Enlaces a otras categorías ===== */
.iml-otras-categorias {
  padding: 2.5rem 6vw;
  max-width: 1240px;
  margin: 0 auto;
}

.iml-otras-categorias h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: rgba(27,36,48,0.6);
  margin: 0 0 1rem;
}

.iml-otras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.iml-otras-grid a {
  display: block;
  text-align: center;
  background: var(--papel-card);
  border: 1px solid color-mix(in srgb, var(--azul) 12%, transparent);
  border-radius: 6px;
  padding: 1rem;
  text-decoration: none;
  color: var(--tinta);
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.15s ease;
}

.iml-otras-grid a:hover { border-color: var(--azul); }

/* ===== Sección de cotización / cierre ===== */
.iml-closing {
  background: var(--azul-oscuro);
  color: #FFFFFF;
  text-align: center;
  padding: 4rem 6vw;
}

.iml-closing h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  margin: 0.5rem 0 1rem;
  color: #FFFFFF;
}

.iml-closing p {
  color: rgba(255,255,255,0.78);
  max-width: 42ch;
  margin: 0 auto 2rem;
}

/* Contacto directo (mail + teléfono) — texto plano y copiable, con link funcional */
.iml-contacto-directo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.iml-contacto-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

.iml-contacto-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.95rem;
}

.iml-contacto-links a {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.iml-contacto-links a:hover {
  border-color: rgba(255,255,255,0.6);
}

.iml-contacto-sep {
  color: rgba(255,255,255,0.35);
}

/* ===== Panel de estuches con selector de color ===== */
.iml-estuche-panel {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  background: var(--papel-card);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27,36,48,0.06);
}

.iml-estuche-visual {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--azul) 6%, var(--papel));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.iml-estuche-visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.iml-estuche-info {
  padding: 2.5rem 2.5rem 2.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.iml-estuche-info h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 0 0 0.75rem;
}

.iml-estuche-desc {
  color: rgba(27,36,48,0.7);
  margin: 0 0 1.25rem;
  max-width: 40ch;
}

.iml-estuche-price {
  font-family: var(--mono);
  font-size: 1rem;
  background: var(--azul);
  color: #FFFFFF;
  padding: 5px 12px;
  border-radius: 3px;
  margin-bottom: 1.75rem;
}

.iml-swatches {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.iml-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.iml-swatch:hover { transform: scale(1.08); }

.iml-swatch.active {
  border-color: var(--azul);
  box-shadow: 0 0 0 2px var(--papel-card), 0 0 0 4px var(--sw);
}

.iml-swatch-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(27,36,48,0.65);
  margin: 0 0 1.25rem;
}

@media (max-width: 780px) {
  .iml-estuche-panel { grid-template-columns: 1fr; }
  .iml-estuche-info { padding: 0 1.5rem 2rem; }
}

/* ===== Retoques a WooCommerce para que combine con la paleta ===== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--azul);
  color: #FFFFFF;
  border-radius: 4px;
}

.woocommerce ul.products li.product .price {
  display: inline-block;
  width: auto;
  padding: 4px 12px;
  background: var(--azul);
  color: #FFFFFF;
  border-radius: 4px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--azul-oscuro);
  color: #FFFFFF;
}

/* El botón "View cart" que aparece al lado de "Add to cart" tiene otra clase
   (added_to_cart, no "button"), por eso necesita su propia regla. */
.woocommerce a.added_to_cart {
  display: inline-block;
  background: var(--azul-oscuro);
  color: #FFFFFF !important;
  border-radius: 4px;
  padding: 0.6em 1.2em;
  margin-left: 8px;
  text-decoration: none;
  font-size: 0.85rem;
}

.woocommerce a.added_to_cart:hover {
  background: var(--azul);
  color: #FFFFFF !important;
}

.woocommerce ul.products li.product h2,
.woocommerce div.product .product_title {
  font-family: var(--serif);
  font-weight: 400;
}

@media (max-width: 900px) {
  .iml-cover-inner { grid-template-columns: 1fr; text-align: left; }
}

/* ===== Barra superior sutil: Contacto + carrito de cotización ===== */
.iml-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 6vw;
  background: var(--papel);
  font-family: var(--sans);
  font-size: 0.85rem;
}

.iml-topbar a {
  text-decoration: none;
  color: var(--tinta);
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.iml-topbar a:hover { opacity: 1; }

.iml-topbar-cart {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.iml-topbar-count {
  background: var(--azul);
  color: #FFFFFF;
  font-size: 0.7rem;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}



/* Ocultar "Agregar al carrito" nativo de WooCommerce — el toggle de ELEX
   para esto tiene un bug conocido en la versión actual del plugin.
   Esto lo oculta a la fuerza, en la página de producto y en el catálogo. */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  display: none !important;
}

.woocommerce ul.products li.product a.add_to_cart_button {
  display: none !important;
}