/* ==========================================================================
   IKHAYA — Diseño nuevo · Pasos 1 y 2: base, encabezado y menú
   Archivo: wp-content/themes/<tu-tema-hijo>/ikhaya-design.css
   Se carga desde functions.php (ver functions-snippet.php)
   ========================================================================== */

/* ---------- 1. Paleta y medidas (cambia aquí y se actualiza todo) ---------- */
:root {
  /* Base blanco y negro */
  --ikh-negro:        #111111;
  --ikh-negro-2:      #333333;
  --ikh-blanco:       #FFFFFF;
  --ikh-texto-suave:  #5C5C5C;
  --ikh-linea:        #E5E5E5;
  --ikh-borde-input:  #D0D0D0;
  --ikh-franja:       #F5F2ED;   /* fondo cálido de secciones */
  --ikh-foto:         #ECE8E2;   /* fondo mientras carga una imagen */

  /* Acentos */
  --ikh-nogal:        #8B5E3C;   /* acento principal */
  --ikh-nogal-hover:  #6B4529;
  --ikh-arena:        #D9B99B;   /* acento sobre fondo negro */
  --ikh-whatsapp:     #1F7A4D;
  --ikh-whatsapp-hover:#18633E;
  --ikh-oferta:       #B3261E;

  /* Tipografía */
  --ikh-serif: "Lora", Georgia, serif;
  --ikh-sans:  "Poppins", system-ui, sans-serif;

  /* Forma */
  --ikh-radio:        14px;
  --ikh-radio-sm:     10px;
  --ikh-pastilla:     999px;
  --ikh-margen:       80px;      /* margen lateral en escritorio */
}
@media (max-width: 1024px) { :root { --ikh-margen: 32px; } }
@media (max-width: 640px)  { :root { --ikh-margen: 16px; } }

/* ---------- 2. Base ---------- */
body {
  font-family: var(--ikh-sans);
  color: var(--ikh-negro);
  background: var(--ikh-blanco);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.woocommerce div.product .product_title,
.woocommerce-loop-product__title {
  font-family: var(--ikh-serif);
  font-weight: 500;
  color: var(--ikh-negro);
  line-height: 1.15;
}
/* :where() = prioridad cero, para no pisar los colores de secciones propias */
:where(a) { color: var(--ikh-nogal); }
:where(a:hover, a:focus) { color: var(--ikh-nogal-hover); }
::selection { background: var(--ikh-arena); color: var(--ikh-negro); }

/* ---------- 3. Botones ---------- */
.ikh-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--ikh-pastilla);
  border: 1.5px solid var(--ikh-negro);
  background: var(--ikh-negro);
  color: var(--ikh-blanco);
  font-family: var(--ikh-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ikh-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--ikh-negro-2);
  border-color: var(--ikh-negro-2);
  color: var(--ikh-blanco);
}

/* Variantes */
.ikh-btn--linea        { background: transparent; color: var(--ikh-negro); }
.ikh-btn--linea:hover  { background: var(--ikh-negro); color: var(--ikh-blanco); }
.ikh-btn--blanco       { background: var(--ikh-blanco); color: var(--ikh-negro); border-color: var(--ikh-blanco); }
.ikh-btn--blanco:hover { background: #E6E6E6; border-color: #E6E6E6; color: var(--ikh-negro); }
.ikh-btn--claro        { background: transparent; color: var(--ikh-blanco); border-color: var(--ikh-blanco); }
.ikh-btn--claro:hover  { background: var(--ikh-blanco); color: var(--ikh-negro); }
.ikh-btn--wa           { background: var(--ikh-whatsapp); border-color: var(--ikh-whatsapp); color: #fff; }
.ikh-btn--wa:hover     { background: var(--ikh-whatsapp-hover); border-color: var(--ikh-whatsapp-hover); color: #fff; }

/* ---------- 4. Precios y etiquetas de WooCommerce ---------- */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ikh-negro);
  font-family: var(--ikh-sans);
  font-weight: 600;
}
.woocommerce .price del { color: var(--ikh-texto-suave); font-weight: 400; }
.woocommerce .price ins { text-decoration: none; color: var(--ikh-oferta); }
.woocommerce span.onsale {
  background: var(--ikh-oferta);
  color: #fff;
  border-radius: var(--ikh-pastilla);
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}
.woocommerce .star-rating span::before { color: var(--ikh-nogal); }

/* Mensajes de WooCommerce */
.woocommerce-message, .woocommerce-info { border-top-color: var(--ikh-nogal); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--ikh-nogal); }

/* ---------- 5. Formularios ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  font-family: var(--ikh-sans);
  font-size: 15px;
  color: var(--ikh-negro);
  background: var(--ikh-blanco);
  border: 1px solid var(--ikh-borde-input);
  border-radius: var(--ikh-radio-sm);
  padding: 12px 14px;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ikh-negro);
  outline-offset: 1px;
  border-color: var(--ikh-negro);
}

/* ---------- 6. Piezas reutilizables (se usan en los siguientes pasos) ---------- */
.ikh-contenedor { padding-left: var(--ikh-margen); padding-right: var(--ikh-margen); box-sizing: border-box; }

.ikh-eyebrow {
  display: inline-block;
  font-family: var(--ikh-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ikh-nogal);
}
.ikh-fondo-negro .ikh-eyebrow { color: var(--ikh-arena); }

.ikh-titulo {
  font-family: var(--ikh-serif);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  color: var(--ikh-negro);
  margin: 0;
}
.ikh-fondo-negro { background: var(--ikh-negro); color: var(--ikh-blanco); }
.ikh-fondo-negro .ikh-titulo { color: var(--ikh-blanco); }
.ikh-franja { background: var(--ikh-franja); }

.ikh-card {
  background: var(--ikh-blanco);
  border: 1px solid var(--ikh-linea);
  border-radius: var(--ikh-radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ikh-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--ikh-foto); display: block; }

.ikh-tag {
  display: inline-block;
  background: var(--ikh-blanco);
  color: var(--ikh-negro);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--ikh-pastilla);
}

.ikh-chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--ikh-pastilla);
  border: 1px solid var(--ikh-borde-input);
  background: var(--ikh-blanco);
  color: var(--ikh-negro);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ikh-chip:hover, .ikh-chip.is-activo { background: var(--ikh-negro); border-color: var(--ikh-negro); color: var(--ikh-blanco); }

.ikh-oferta { color: var(--ikh-oferta) !important; }

/* Botón flotante de WhatsApp */
.ikh-wa-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ikh-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.ikh-wa-flotante:hover { background: var(--ikh-whatsapp-hover); color: #fff; }
@media (max-width: 640px) { .ikh-wa-flotante { bottom: 88px; right: 16px; } } /* arriba de la barra inferior del celular */

/* ==========================================================================
   7. Encabezado y menú (paso 2) — marcado en ikh-header.php
   ========================================================================== */
.ikh-only-mobile { display: none !important; }
@media (max-width: 960px) {
  .ikh-only-desktop { display: none !important; }
  .ikh-only-mobile  { display: flex !important; }
}

/* Barra de avisos */
.ikh-top {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 40px; padding: 8px 16px; box-sizing: border-box;
  background: var(--ikh-negro); color: var(--ikh-blanco);
  font-family: var(--ikh-sans); font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center;
}
.ikh-top__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ikh-arena); flex-shrink: 0; }
@media (max-width: 640px) {
  .ikh-top { font-size: 12px; min-height: 34px; }
  .ikh-top__extra { display: none; }
}

/* Encabezado */
.ikh-header {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 990;
  background: var(--ikh-blanco); border-bottom: 1px solid var(--ikh-linea);
  font-family: var(--ikh-sans); color: var(--ikh-negro);
}
.ikh-header__bar { display: flex; align-items: center; gap: 40px; height: 88px; }
.ikh-logo { flex-shrink: 0; display: flex; align-items: center; }
.ikh-logo img { height: 52px; width: auto; display: block; }

/* Buscador (se usa en escritorio, celular y menú lateral) */
.ikh-search {
  flex: 1; display: flex; align-items: center; gap: 10px;
  height: 48px; max-width: 640px; margin: 0 auto; padding: 0 5px 0 20px; box-sizing: border-box;
  background: var(--ikh-blanco); border: 1px solid var(--ikh-borde-input); border-radius: var(--ikh-pastilla);
}
.ikh-search:focus-within { border-color: var(--ikh-negro); }
.ikh-search input[type="search"] {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  font-family: var(--ikh-sans); font-size: 14px; color: var(--ikh-negro); -webkit-appearance: none;
}
.ikh-search input[type="search"]:focus { outline: none; }
.ikh-search input[type="search"]::placeholder { color: var(--ikh-texto-suave); }
.ikh-search button {
  flex-shrink: 0; width: 38px; height: 38px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; box-shadow: none; background: var(--ikh-negro); color: var(--ikh-blanco); cursor: pointer;
}
.ikh-search button:hover { background: var(--ikh-negro-2); }

/* Acciones: WhatsApp, cuenta, carrito */
.ikh-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; margin-left: auto; }
.ikh-wa-link { display: flex; align-items: center; gap: 10px; color: var(--ikh-negro); text-decoration: none; }
.ikh-wa-link:hover { color: var(--ikh-negro); }
.ikh-wa-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--ikh-whatsapp); color: #fff; display: flex; align-items: center; justify-content: center; }
.ikh-wa-link:hover .ikh-wa-dot { background: var(--ikh-whatsapp-hover); }
.ikh-wa-text { display: flex; flex-direction: column; line-height: 1.25; }
.ikh-wa-text small { font-size: 11px; color: var(--ikh-texto-suave); }
.ikh-wa-text strong { font-size: 14px; font-weight: 600; }
.ikh-action {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 44px; min-height: 44px; color: var(--ikh-negro); text-decoration: none; font-size: 11px; font-weight: 500;
}
.ikh-action:hover { color: var(--ikh-nogal); }
.ikh-badge {
  position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9px; background: var(--ikh-nogal); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* Botón de ícono (menú, cerrar) */
.ikh-icon-btn {
  width: 44px; height: 44px; margin: 0; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; box-shadow: none; background: none; color: var(--ikh-negro); cursor: pointer;
}
.ikh-icon-btn:hover { background: var(--ikh-franja); }

/* Menú de escritorio */
.ikh-nav { position: relative; border-top: 1px solid var(--ikh-linea); }
.ikh-nav__list { list-style: none; margin: 0; display: flex; align-items: stretch; gap: 36px; height: 52px; }
.ikh-nav__item { display: flex; margin: 0; }
.ikh-nav__link {
  display: flex; align-items: center; gap: 4px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--ikh-negro); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.ikh-nav__link:hover,
.ikh-nav__item:focus-within > .ikh-nav__link,
.ikh-nav__item.is-open > .ikh-nav__link,
.ikh-nav__item.has-mega:hover > .ikh-nav__link { color: var(--ikh-nogal); border-bottom-color: var(--ikh-nogal); }
.ikh-nav__link--oferta, .ikh-nav__link--oferta:hover { color: var(--ikh-oferta); border-bottom-color: var(--ikh-oferta); }
.ikh-nav__note { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ikh-texto-suave); white-space: nowrap; }

/* Menú desplegable grande */
.ikh-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 991;
  background: var(--ikh-blanco); border-top: 1px solid var(--ikh-linea); box-shadow: 0 24px 48px rgba(0, 0, 0, .14);
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.ikh-nav__item:hover > .ikh-mega,
.ikh-nav__item:focus-within > .ikh-mega,
.ikh-nav__item.is-open > .ikh-mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ikh-mega__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 340px; gap: 48px; padding-top: 36px; padding-bottom: 40px; }
.ikh-mega__col { display: flex; flex-direction: column; gap: 12px; }
.ikh-mega__col a { color: var(--ikh-negro); text-decoration: none; font-size: 15px; }
.ikh-mega__col a:hover { color: var(--ikh-nogal); }
.ikh-mega__col a.ikh-mega__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ikh-nogal); }
.ikh-mega__feat {
  grid-column: 4; display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  border: 1px solid var(--ikh-linea); border-radius: var(--ikh-radio); color: var(--ikh-negro);
}
.ikh-mega__feat:hover { border-color: var(--ikh-negro); color: var(--ikh-negro); }
.ikh-mega__feat-img { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--ikh-franja); }
.ikh-mega__feat-img img { max-height: 120px; max-width: 80%; width: auto; height: auto; object-fit: contain; }
.ikh-mega__feat-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.ikh-mega__feat-title { display: block; font-family: var(--ikh-serif); font-size: 20px; color: var(--ikh-negro); }
.ikh-mega__feat-price { display: block; font-size: 13px; color: var(--ikh-texto-suave); }
.ikh-mega__feat-price b { color: var(--ikh-negro); font-weight: 600; }
.ikh-circle { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--ikh-negro); color: #fff; display: flex; align-items: center; justify-content: center; }

/* Celular: encabezado, buscador y accesos a segmentos */
@media (max-width: 960px) {
  .ikh-header { position: relative; top: auto; border-bottom: 0; }
  .ikh-header__bar { height: 60px; gap: 8px; padding-left: 8px; padding-right: 8px; }
  .ikh-logo { margin: 0 auto; }
  .ikh-logo img { height: 38px; }
  .ikh-actions { margin-left: 0; gap: 0; }
  .ikh-action .ikh-badge { top: 4px; right: 2px; }
  .ikh-search--mobile { margin: 0 16px 12px; height: 46px; max-width: none; flex: none; }
  .ikh-seg-chips { gap: 8px; padding: 0 16px 12px; }
  .ikh-seg-chips a {
    flex: 1; height: 42px; border-radius: 12px; background: var(--ikh-negro); color: var(--ikh-blanco);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; text-decoration: none;
  }
  .ikh-seg-chips a:hover { background: var(--ikh-negro-2); color: var(--ikh-blanco); }
}

/* Barra de accesos del celular: arriba, fija al hacer scroll */
.ikh-tabbar {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 995;
  align-items: stretch; height: 60px; padding: 0 4px; box-sizing: border-box;
  background: var(--ikh-blanco); border-top: 1px solid var(--ikh-linea); border-bottom: 1px solid var(--ikh-linea);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  font-family: var(--ikh-sans);
}
@media (max-width: 600px) { .ikh-tabbar { top: 0; } } /* en celular la barra de admin de WP no es fija */
.ikh-tab {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; cursor: pointer;
  font-family: var(--ikh-sans); font-size: 10px; font-weight: 500; line-height: 1.2; color: var(--ikh-texto-suave); text-decoration: none;
}
.ikh-tab:hover { color: var(--ikh-negro); }
.ikh-tab.is-activo { color: var(--ikh-negro); font-weight: 600; }
.ikh-tab .ikh-badge { top: 4px; right: calc(50% - 22px); }
.ikh-tab--wa, .ikh-tab--wa:hover { color: var(--ikh-whatsapp); font-weight: 600; }
.ikh-tab__bubble {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ikh-whatsapp); color: #fff; display: flex; align-items: center; justify-content: center;
}
.ikh-tab__bubble svg { width: 18px; height: 18px; }

/* Menú lateral del celular */
.ikh-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s ease; }
.ikh-overlay.is-open { opacity: 1; }
.ikh-overlay[hidden] { display: none; }
.ikh-drawer {
  position: fixed; top: var(--wp-admin--admin-bar--height, 0px); bottom: 0; left: 0; z-index: 999;
  width: min(88vw, 380px); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ikh-blanco); font-family: var(--ikh-sans); color: var(--ikh-negro);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.ikh-drawer.is-open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.ikh-drawer__head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 64px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--ikh-linea); }
.ikh-drawer__head img { height: 36px; width: auto; display: block; }
.ikh-drawer .ikh-search { flex: 0 0 46px; height: 46px; max-width: none; margin: 16px 20px 4px; }
.ikh-drawer__nav { padding: 0 20px; }
.ikh-acc { border-bottom: 1px solid var(--ikh-linea); }
.ikh-acc summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; height: 60px; cursor: pointer;
  font-family: var(--ikh-serif); font-size: 22px; color: var(--ikh-negro);
}
.ikh-acc summary::-webkit-details-marker { display: none; }
.ikh-acc summary svg { color: var(--ikh-texto-suave); transition: transform .2s ease; }
.ikh-acc[open] summary svg { transform: rotate(180deg); }
.ikh-acc__body { display: flex; flex-direction: column; padding: 0 0 16px 4px; }
.ikh-acc__group { margin: 10px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ikh-nogal); }
.ikh-acc__body a { display: flex; align-items: center; gap: 6px; min-height: 40px; font-size: 15px; color: var(--ikh-negro); text-decoration: none; }
.ikh-acc__body a:hover { color: var(--ikh-nogal); }
.ikh-acc__body a.ikh-acc__all { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ikh-nogal); }
.ikh-drawer__links { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 12px 20px; }
.ikh-drawer__links a { display: flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--ikh-negro); text-decoration: none; }
.ikh-drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 24px; border-top: 1px solid var(--ikh-linea); }
.ikh-drawer__foot small { text-align: center; font-size: 12px; color: var(--ikh-texto-suave); }
html.ikh-lock { overflow: hidden; }
@media (min-width: 961px) { .ikh-drawer, .ikh-overlay { display: none; } }