/* greenery-child · Componentes compartidos (chrome del storefront + utilidades)
 * Header y footer IGUALES para todas las páginas (clon del storefront del DS).
 * Marca: verde de base, morado solo de acento; precios en tinta.
 */

/* ---------- Layout / utilidades ---------- */
/* Gutter lateral responsivo: nunca menos de 20px, crece con el viewport hasta 48px. */
.gy-wrap { max-width: var(--gy-content); margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
.gy-wrap--wide { max-width: var(--gy-wide); }
.gy-eyebrow-p { font-family: var(--gy-font-ui); font-size: var(--gy-fs-eyebrow); font-weight: var(--gy-w-semibold); letter-spacing: var(--gy-ls-eyebrow); text-transform: uppercase; color: var(--gy-morado-oscuro); }

/* ---------- Migas de pan (breadcrumbs) — UNA sola regla para toda la web ----------
   Todas las plantillas usan .gy-crumbs; se incluyen las clases heredadas de
   categoría (.gy-cat__crumbs) y producto (.woocommerce-breadcrumb). Pequeñas y
   discretas (11px, más pequeñas que el menú) para que no llamen la atención. */
.gy-crumbs,
.gy-cat__crumbs,
.gy-product-page .woocommerce-breadcrumb { font-family: var(--gy-font-ui); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gy-tinta-50); }
.gy-crumbs a,
.gy-cat__crumbs a,
.gy-product-page .woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.gy-crumbs a:hover,
.gy-cat__crumbs a:hover,
.gy-product-page .woocommerce-breadcrumb a:hover { color: var(--gy-morado-oscuro); }
.gy-h2 { font-family: var(--gy-font-display); font-weight: var(--gy-w-medium); font-size: var(--gy-fs-h2); line-height: var(--gy-lh-heading); letter-spacing: var(--gy-ls-heading); margin: 0; }

/* ---------- Botones (pills) ---------- */
.gy-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--gy-radius-pill); background: var(--gy-morado); color: var(--gy-text-onfill); font-family: var(--gy-font-ui); font-weight: 500; cursor: pointer; border: 0; text-decoration: none; white-space: nowrap; transition: background var(--gy-dur-fast) var(--gy-ease), color var(--gy-dur-fast) var(--gy-ease); }
.gy-btn-primary:hover { background: var(--gy-lavanda); color: var(--gy-morado-oscuro); }
.gy-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--gy-radius-pill); border: 1.5px solid var(--gy-tinta); color: var(--gy-tinta); font-family: var(--gy-font-ui); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; transition: background var(--gy-dur-fast) var(--gy-ease), color var(--gy-dur-fast) var(--gy-ease); }
.gy-btn-ghost:hover { background: var(--gy-tinta); color: #fff; }

/* ---------- Wordmark (Greenery + 420) ---------- */
.gy-wordmark { font-family: var(--gy-font-display); font-weight: var(--gy-w-medium); letter-spacing: -.02em; color: var(--gy-tinta); text-decoration: none; line-height: 1; white-space: nowrap; }
.gy-wordmark__accent { font-weight: var(--gy-w-bold); font-size: .62em; color: var(--gy-verde); }

/* ============================================================
   HEADER (storefront)
   ============================================================ */
.gy-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: .5px solid var(--gy-linea); }
.gy-header__inner { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gy-header__brand { font-size: 23px; }

.gy-nav { flex: 1; display: flex; justify-content: center; height: 100%; }
.gy-nav__list, .gy-nav ul { list-style: none; margin: 0; padding: 0; }
.gy-nav > ul, .gy-nav__list { display: flex; align-items: center; gap: 22px; height: 100%; }
.gy-nav li { position: relative; display: flex; align-items: center; height: 100%; }
.gy-nav a { display: inline-flex; align-items: center; gap: 5px; height: 100%; font-family: var(--gy-font-ui); font-size: 14px; font-weight: 500; color: var(--gy-tinta); opacity: .85; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--gy-dur-fast) var(--gy-ease), opacity var(--gy-dur-fast) var(--gy-ease), border-color var(--gy-dur-fast) var(--gy-ease); }
.gy-nav > ul > li > a { padding-top: 2px; }
.gy-nav li:hover > a, .gy-nav a.is-active { color: var(--gy-morado-oscuro); opacity: 1; border-bottom-color: var(--gy-morado); }
/* Caret en items con submenú */
.gy-nav .menu-item-has-children > a::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform var(--gy-dur-fast) var(--gy-ease); }
.gy-nav .menu-item-has-children:hover > a::after { transform: rotate(225deg) translateY(-2px); }
/* Submenú desplegable */
.gy-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border: .5px solid var(--gy-linea-suave); border-radius: 0 0 var(--gy-radius-md) var(--gy-radius-md); box-shadow: var(--gy-shadow-lg); padding: 8px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--gy-dur-fast) var(--gy-ease), transform var(--gy-dur-fast) var(--gy-ease), visibility var(--gy-dur-fast); z-index: 45; }
.gy-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.gy-nav .sub-menu li { display: block; height: auto; }
.gy-nav .sub-menu a { display: block; height: auto; padding: 10px 18px; font-family: var(--gy-font-body); font-size: 14.5px; opacity: 1; border-bottom: 0; }
.gy-nav .sub-menu a:hover { color: var(--gy-morado); background: var(--gy-crema); }

.gy-header__actions { display: flex; align-items: center; gap: 16px; color: var(--gy-tinta); }
.gy-header__actions a { color: inherit; display: inline-flex; }
.gy-header__actions a:hover { color: var(--gy-morado-oscuro); }
.gy-burger { display: none; background: 0; border: 0; padding: 0; line-height: 0; color: var(--gy-tinta); cursor: pointer; }

/* ============================================================
   FOOTER (storefront)
   ============================================================ */
.gy-footer { background: var(--gy-tinta); color: #e9e7df; }
.gy-footer__inner { padding-top: 56px; padding-bottom: 32px; }
.gy-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; border-bottom: .5px solid rgba(255,255,255,.16); padding-bottom: 32px; }
.gy-footer .gy-wordmark { color: #fff; font-size: 24px; }
.gy-footer .gy-wordmark__accent { color: var(--gy-salvia); }
.gy-footer__tagline { font-family: var(--gy-font-body); font-size: 13.5px; color: #b8b5ac; max-width: 24rem; margin: 14px 0 18px; line-height: 1.6; }
.gy-footer__news { display: flex; gap: 8px; max-width: 22rem; }
.gy-footer__news input { flex: 1; min-width: 0; border: 0; border-radius: var(--gy-radius-pill); padding: 11px 16px; font-family: var(--gy-font-body); font-size: 14px; color: var(--gy-tinta); }
.gy-footer__news .gy-btn-primary { padding: 11px 20px; }
.gy-footer__col h4 { font-family: var(--gy-font-ui); font-size: 13px; font-weight: var(--gy-w-semibold); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.gy-footer__col a { display: block; font-family: var(--gy-font-body); font-size: 14px; color: #c7c4bb; margin-bottom: 9px; text-decoration: none; transition: color var(--gy-dur-fast) var(--gy-ease); }
.gy-footer__col a:hover { color: #fff; }
.gy-footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; }
.gy-footer__social { display: flex; gap: 16px; }
.gy-footer__social a { font-family: var(--gy-font-body); font-size: 13px; color: #c7c4bb; text-decoration: none; }
.gy-footer__social a:hover { color: #fff; }
.gy-footer__copy { font-family: var(--gy-font-body); font-size: 13px; color: #8f8c83; }
.gy-footer__legal { font-family: var(--gy-font-body); font-size: 11.5px; color: #8f8c83; max-width: 62rem; margin-top: 16px; line-height: 1.6; }

/* ---------- Klaviyo (placeholder en local) ---------- */
.gy-klaviyo--placeholder { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--gy-linea); background: var(--gy-crema); border-radius: var(--gy-radius-md); padding: 14px 16px; }
.gy-klaviyo__tag { font-family: var(--gy-font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gy-morado-oscuro); border: 1px solid var(--gy-linea); border-radius: var(--gy-radius-pill); padding: 3px 9px; white-space: nowrap; }
.gy-klaviyo__msg { font-family: var(--gy-font-body); font-size: 13.5px; color: var(--gy-text-subtle); }
.gy-klaviyo__msg code { font-family: ui-monospace, Menlo, monospace; color: var(--gy-morado-oscuro); }

/* ---------- Banda newsletter ---------- */
.gy-newsletter { background: var(--gy-verde-claro); }
.gy-newsletter__inner { padding-top: var(--gy-space-6); padding-bottom: var(--gy-space-6); display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--gy-space-5); align-items: center; }
.gy-newsletter h2 { font-family: var(--gy-font-display); font-weight: var(--gy-w-medium); font-size: var(--gy-fs-h2); line-height: var(--gy-lh-heading); margin: 0 0 10px; }
.gy-newsletter p { font-family: var(--gy-font-body); font-size: 16px; line-height: var(--gy-lh-snug); color: var(--gy-text-muted); margin: 0; }

/* ---------- Ficha de tienda: grids responsive (override de estilos inline) ---------- */
@media (max-width: 860px) {
  .gy-grid-2 { grid-template-columns: 1fr !important; }
  .gy-gal-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .gy-nav { display: none; }
  .gy-burger { display: inline-flex; }
  .gy-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .gy-newsletter__inner { grid-template-columns: 1fr; gap: var(--gy-space-4); }
}
@media (max-width: 640px) {
  :root { --gy-gutter: 20px; }
  .gy-header__inner { height: 54px; }
  .gy-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .gy-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gy-footer__news { max-width: 100%; }
}

/* ==================== Form Klaviyo de la banda Club (RWQsJy), domesticado ====================
   (Ale 2026-09-03: «el formulario no es bonito».) Igual que el del footer: Klaviyo lo
   inyecta con estilos INLINE (caja morada, botón amarillo) → se pisa todo con !important.
   Aquí versión CLARA: tarjeta blanca con borde, campo píldora y botón morado del DS.
   Scoped a .gy-newsletter para no tocar el del footer ni el del Club. */
.gy-newsletter .klaviyo-form-RWQsJy form{background:#fff!important;border:1px solid var(--gy-linea)!important;border-radius:18px!important;padding:22px 22px 16px!important;max-width:none!important;gap:10px!important;box-shadow:var(--gy-shadow-xs,0 1px 2px rgba(51,50,46,.06))!important;}
.gy-newsletter .klaviyo-form-RWQsJy form>div,
.gy-newsletter .klaviyo-form-RWQsJy [role=presentation]{background:transparent!important;padding:0!important;border:0!important;}
.gy-newsletter .klaviyo-form-RWQsJy form div[class*=go]{padding-top:4px!important;padding-bottom:4px!important;}
.gy-newsletter .klaviyo-form-RWQsJy label{display:none!important;}
.gy-newsletter .klaviyo-form-RWQsJy input[type=email],
.gy-newsletter .klaviyo-form-RWQsJy input[type=text]{background:#fff!important;border:1px solid var(--gy-linea)!important;border-radius:999px!important;color:var(--gy-tinta)!important;height:48px!important;padding:0 18px!important;font-family:var(--gy-font-ui)!important;font-size:14.5px!important;box-shadow:none!important;}
.gy-newsletter .klaviyo-form-RWQsJy input:focus{border-color:var(--gy-morado)!important;outline:none!important;box-shadow:0 0 0 1px var(--gy-morado)!important;}
.gy-newsletter .klaviyo-form-RWQsJy input::placeholder{color:var(--gy-tinta-50,#8B8A85)!important;}
.gy-newsletter .klaviyo-form-RWQsJy button.klaviyo-form-button{background:var(--gy-morado)!important;border:0!important;border-radius:999px!important;height:48px!important;width:100%!important;padding:0 20px!important;font-family:var(--gy-font-ui)!important;font-weight:600!important;font-size:14.5px!important;color:#fff!important;white-space:nowrap!important;box-shadow:none!important;transition:background .2s ease;}
.gy-newsletter .klaviyo-form-RWQsJy button.klaviyo-form-button:hover{background:var(--gy-morado-oscuro,#6a5cd6)!important;} /* fondo fijado: trampa #1 */
.gy-newsletter .klaviyo-form-RWQsJy form p,
.gy-newsletter .klaviyo-form-RWQsJy form span{color:var(--gy-tinta-50,#8B8A85)!important;font-size:11px!important;line-height:1.45!important;font-family:var(--gy-font-body)!important;}
.gy-newsletter .klaviyo-form-RWQsJy form a{color:var(--gy-morado)!important;}