/* ============================================================
   The Good Shisha — Cabecera, barra de envío, menú móvil y footer
   Mobile-first; el layout de escritorio entra en 980px.
   Solo estilos propios (.tgs-*): los componentes compartidos
   (.tgs-btn, .tgs-chrome…) los define el módulo base.
   ============================================================ */

/* --tgs-red-on-dark (OFERTAS sobre negro) vive en 00-tokens.css. */

/* ---------- utilidad: texto solo para lectores de pantalla ---------- */
.tgs-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- neutralizar restos del tema padre ----------
   La cabecera/footer de GeneratePress se desenganchan por PHP; esto solo
   evita que su contenedor de footer meta fondo o espaciado propios. */
.site-footer{background:var(--tgs-ink);margin:0;padding:0;border:0}
.site-footer .site-info,
.site-footer .footer-widgets{display:none}

/* ============================================================
   BARRA SUPERIOR DE ENVÍO
   ============================================================ */
.tgs-topbar{
  background:var(--tgs-topbar);
  color:var(--tgs-on-dark-2);
  font-family:var(--tgs-font);
  --tgs-focus:#fff;            /* superficie oscura: anillo de foco en blanco */
  font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.3;
  text-align:center;padding:8px 12px;
}
.tgs-topbar__inner{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:1360px;margin:0 auto;
}
.tgs-topbar__msg{display:inline-block}
.tgs-topbar__desk{display:none}
.tgs-topbar__bar{
  width:110px;height:4px;flex:none;border-radius:var(--tgs-r-pill);
  background:rgba(255,255,255,.16);overflow:hidden;
}
.tgs-topbar__fill{
  display:block;height:100%;width:0;border-radius:var(--tgs-r-pill);
  background:var(--tgs-green);transition:width .4s ease;
}
/* Promo de carbón: nunca hay envío gratis -> ámbar al 100 %. */
.tgs-topbar--coal{color:var(--tgs-amber-bg)}
.tgs-topbar--coal .tgs-topbar__fill{background:var(--tgs-amber-text)}

/* ============================================================
   CABECERA
   ============================================================ */
.tgs-header{
  background:var(--tgs-ink);
  border-top:1px solid var(--tgs-bd-dark);
  font-family:var(--tgs-font);
  position:relative;z-index:20;
  --tgs-focus:#fff;            /* superficie oscura: anillo de foco en blanco */
}
.tgs-header__inner{
  max-width:1360px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
  padding:12px var(--tgs-pad);
}

/* botones-icono (hamburguesa, cesta móvil): target táctil de 44px */
.tgs-header__icon{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;position:relative;
  background:none;border:0;padding:0;margin:0;border-radius:var(--tgs-r-pill);
  color:var(--tgs-on-dark);cursor:pointer;text-decoration:none;
}
.tgs-header__icon:hover,
.tgs-header__icon:focus-visible{color:#fff;background:none}

/* logo centrado en móvil (los dos iconos laterales miden lo mismo) */
.tgs-header__logo{display:block;margin:0 auto;line-height:0}
.tgs-header__logo-img{height:46px;width:auto;max-width:170px;object-fit:contain}
.tgs-header__logo-text{
  font-size:20px;font-weight:900;font-style:italic;letter-spacing:-.01em;line-height:1;
}

/* buscador integrado y accesos: solo escritorio */
.tgs-header__search{display:none}
.tgs-header__actions{display:none}

/* contador de la cesta (lo reemplaza el fragmento de WooCommerce) */
.tgs-cart-count{
  position:absolute;top:5px;right:3px;
  display:none;place-items:center;
  min-width:18px;height:18px;padding:0 4px;
  background:var(--tgs-green);color:#fff;
  font-size:10px;font-weight:800;line-height:1;letter-spacing:0;
  border-radius:var(--tgs-r-pill);
}
/* .is-on / .is-pulse las gobierna tgs.js; el pulso lo define el módulo base. */
.tgs-cart-count.is-on,
.tgs-cart-count.on{display:grid}

/* ============================================================
   BUSCADOR (píldora móvil bajo la cabecera / oscuro en escritorio)
   ============================================================ */
.tgs-searchbar{
  background:var(--tgs-bg);
  padding:14px var(--tgs-pad) 0;
}
.tgs-searchbar .tgs-search{max-width:1360px;margin:0 auto}

.tgs-search{
  display:flex;align-items:center;gap:6px;
  border-radius:var(--tgs-r-pill);
  padding:2px 16px 2px 6px;min-height:48px;
}
.tgs-search--light{background:var(--tgs-card);border:1.5px solid var(--tgs-bd-input)}
.tgs-search--dark{background:var(--tgs-black-3);border:1.5px solid var(--tgs-bd-dark-2)}

.tgs-search__submit{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;padding:0;margin:0;border-radius:var(--tgs-r-pill);
  cursor:pointer;
}
.tgs-search--light .tgs-search__submit{color:#9a9a9a}
.tgs-search--dark .tgs-search__submit{color:var(--tgs-on-dark-meta)}
.tgs-search__submit:hover{background:none}
.tgs-search--light .tgs-search__submit:hover{color:var(--tgs-text)}
.tgs-search--dark .tgs-search__submit:hover{color:var(--tgs-on-dark)}

.tgs-search__input{
  flex:1;min-width:0;
  background:none;border:0;outline:none;box-shadow:none;
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.2;
  padding:0;height:44px;
}
.tgs-search--light .tgs-search__input{color:var(--tgs-text)}
.tgs-search--dark .tgs-search__input{color:var(--tgs-on-dark)}
.tgs-search__input::placeholder{color:#9a9a9a;opacity:1}
.tgs-search--dark .tgs-search__input::placeholder{color:var(--tgs-on-dark-meta)}
.tgs-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ============================================================
   NAVEGACIÓN DE CATEGORÍAS (escritorio)
   ============================================================ */
.tgs-catnav{display:none}

/* ============================================================
   MENÚ MÓVIL (panel lateral)
   El fondo oscuro, el bloqueo de scroll y el foco los pone el runtime
   compartido (.tgs-overlay--sheet, z-index 940): aquí solo el panel.
   ============================================================ */
.tgs-drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:950;
  width:min(86vw,340px);
  background:var(--tgs-ink);
  border-right:1px solid var(--tgs-bd-dark);
  font-family:var(--tgs-font);
  --tgs-focus:#fff;            /* superficie oscura: anillo de foco en blanco */
  display:flex;flex-direction:column;gap:16px;
  /* el 2º valor de env() es obligatorio: sin él, un navegador que no conozca
     safe-area-inset-* invalida el calc() y el panel se queda sin padding. */
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--tgs-pad) calc(24px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-100%);
  visibility:hidden;
  transition:transform .28s ease,visibility 0s linear .28s;
}
.tgs-drawer.is-open,
.tgs-drawer.on{
  transform:translateX(0);
  visibility:visible;
  transition:transform .28s ease,visibility 0s;
}

.tgs-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tgs-drawer__logo{display:block;line-height:0}
.tgs-drawer__logo-img{height:40px;width:auto;max-width:150px;object-fit:contain}
.tgs-drawer__logo-text{font-size:17px;font-weight:900;font-style:italic;line-height:1}
.tgs-drawer__close{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;padding:0;margin:0;border-radius:var(--tgs-r-pill);
  color:var(--tgs-on-dark-3);cursor:pointer;
}
.tgs-drawer__close:hover{color:#fff;background:none}

.tgs-drawer__nav ul{list-style:none;margin:0;padding:0}
.tgs-drawer__nav li{margin:0}
.tgs-drawer__nav a{
  display:flex;align-items:center;
  min-height:50px;padding:6px 2px;
  border-bottom:1px solid var(--tgs-bd-dark);
  color:var(--tgs-on-dark);text-decoration:none;
  font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.tgs-drawer__nav a:hover{color:#fff}
.tgs-drawer__nav .tgs-is-offers>a{color:var(--tgs-red-on-dark);font-weight:900}

.tgs-drawer__foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:8px}
/* el skin lo pone .tgs-btn--ghost (módulo base); aquí solo la disposición */
.tgs-drawer__action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.tgs-drawer__phone{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;
  color:var(--tgs-on-dark);text-decoration:none;
  font-size:16px;font-weight:900;
}
.tgs-drawer__phone span{
  color:var(--tgs-on-dark-meta);font-size:11px;font-weight:700;letter-spacing:.04em;
}

/* ============================================================
   ICONOS DE CONFIANZA (justo antes del footer)
   ============================================================ */
.tgs-trust{
  background:var(--tgs-bg);
  font-family:var(--tgs-font);
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  max-width:1360px;margin:0 auto;
  padding:22px 26px 0;
  color:var(--tgs-text-body);
  font-size:10.5px;font-weight:700;text-align:center;
}
.tgs-trust__item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.tgs-trust__icon{font-size:16px;line-height:1}

/* ============================================================
   FOOTER
   ============================================================ */
.tgs-footer{
  background:var(--tgs-ink);
  font-family:var(--tgs-font);
  margin-top:22px;
  --tgs-focus:#fff;            /* superficie oscura: anillo de foco en blanco */
}
.tgs-footer__inner{
  max-width:1360px;margin:0 auto;
  padding:24px var(--tgs-pad) 26px;
  display:flex;flex-direction:column;gap:18px;
}
.tgs-footer a{text-decoration:none}

.tgs-footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.tgs-footer__brand{grid-column:1/-1;display:flex;flex-direction:column;gap:14px}
.tgs-footer__col--links{grid-column:1/-1}

.tgs-footer__logo{display:block;line-height:0;align-self:flex-start}
.tgs-footer__logo-img{height:52px;width:auto;max-width:190px;object-fit:contain}
.tgs-footer__logo-text{
  color:var(--tgs-on-dark);font-size:20px;font-weight:900;font-style:italic;line-height:1;
}
.tgs-footer__tagline{
  margin:0;max-width:280px;
  color:var(--tgs-on-dark-meta);font-size:12.5px;font-weight:600;line-height:1.6;
}

.tgs-footer__socials{display:flex;gap:10px;flex-wrap:wrap}
.tgs-footer__social{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  border:1.5px solid var(--tgs-bd-dark-2);border-radius:var(--tgs-r-pill);
  color:var(--tgs-on-dark);
}
.tgs-footer__social:hover{border-color:var(--tgs-bd-dark-3);color:#fff}

.tgs-footer__col{display:flex;flex-direction:column;gap:8px}
.tgs-footer__head{
  margin:0;
  color:var(--tgs-on-dark-meta);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;line-height:1.4;
}
.tgs-footer__text{
  margin:0;color:var(--tgs-on-dark-2);font-size:12px;font-weight:600;line-height:1.5;
}
.tgs-footer__meta{
  margin:0;color:var(--tgs-on-dark-meta);font-size:11.5px;font-weight:500;line-height:1.5;
}
.tgs-footer__phone{color:inherit}
.tgs-footer__phone:hover{color:#fff}

.tgs-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tgs-footer__links li{margin:0}
.tgs-footer__links a{
  display:inline-block;padding:3px 0;
  color:var(--tgs-on-dark-2);font-size:12.5px;font-weight:600;line-height:1.4;
}
.tgs-footer__links a:hover{color:#fff}

.tgs-footer__legal{
  display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--tgs-bd-dark);padding-top:14px;
  color:var(--tgs-on-dark-legal);font-size:10.5px;font-weight:600;line-height:1.5;
}
.tgs-footer__legal a{color:inherit;text-decoration:underline}
.tgs-footer__legal a:hover{color:var(--tgs-on-dark-2)}

/* ============================================================
   ESCRITORIO (>= 980px)
   ============================================================ */
@media (min-width:980px){

  .tgs-topbar{font-size:12px;letter-spacing:.14em;padding:9px 12px}
  .tgs-topbar__desk{display:inline}
  .tgs-topbar__bar{width:150px}

  .tgs-header__inner{gap:28px;padding:14px var(--tgs-pad-desk)}
  .tgs-header__burger,
  .tgs-header__cart-mobile{display:none}
  .tgs-header__logo{margin:0;flex:none}
  .tgs-header__logo-img{height:56px;max-width:220px}
  .tgs-header__logo-text{font-size:24px}

  .tgs-header__search{display:block;flex:1;max-width:560px}
  .tgs-header__search .tgs-search{padding:2px 20px 2px 8px}

  .tgs-header__actions{display:flex;align-items:center;gap:22px;margin-left:auto}
  .tgs-header__link{
    display:flex;align-items:center;gap:8px;
    color:var(--tgs-on-dark);font-size:13px;font-weight:800;letter-spacing:.03em;
    text-decoration:none;min-height:44px;
  }
  .tgs-header__link:hover{color:#fff}
  .tgs-header__cart-icon{position:relative;display:grid;place-items:center;line-height:0}
  .tgs-header__cart-icon .tgs-cart-count{top:-8px;right:-10px}

  .tgs-searchbar{display:none}

  /* barra de categorías */
  .tgs-catnav{
    display:block;
    background:var(--tgs-black-2);
    border-top:1px solid var(--tgs-bd-dark);
    font-family:var(--tgs-font);
    --tgs-focus:#fff;          /* superficie oscura: anillo de foco en blanco */
  }
  .tgs-catnav__inner{max-width:1360px;margin:0 auto;padding:0 var(--tgs-pad-desk)}
  .tgs-catnav__list{
    list-style:none;margin:0;padding:0;
    display:flex;justify-content:center;flex-wrap:wrap;gap:2px;
  }
  .tgs-catnav__list li{margin:0}
  .tgs-catnav__list a{
    display:block;padding:14px 16px;
    border-bottom:2.5px solid transparent;
    color:var(--tgs-on-dark-2);text-decoration:none;
    font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    transition:color .15s ease,border-color .15s ease;
  }
  .tgs-catnav__list a:hover,
  .tgs-catnav__list .current-menu-item>a,
  .tgs-catnav__list .current-menu-ancestor>a{color:#fff;border-bottom-color:#fff}
  .tgs-catnav__list .tgs-is-offers>a{color:var(--tgs-red-on-dark);font-weight:900}
  .tgs-catnav__list .tgs-is-offers>a:hover{color:#fff;border-bottom-color:var(--tgs-red-on-dark)}

  /* el panel lateral es solo móvil */
  .tgs-drawer{display:none}

  .tgs-trust{justify-content:center;gap:80px;padding:30px var(--tgs-pad-desk) 0;font-size:12px}
  .tgs-trust__item{flex:none}
  .tgs-trust__icon{font-size:20px}

  .tgs-footer{margin-top:28px}
  .tgs-footer__inner{padding:36px var(--tgs-pad-desk) 30px;gap:24px}
  .tgs-footer__cols{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
  .tgs-footer__brand,
  .tgs-footer__col--links{grid-column:auto}
  .tgs-footer__logo-img{height:60px}
  .tgs-footer__head{font-size:11px}
  .tgs-footer__text{font-size:12.5px}
  .tgs-footer__legal{
    flex-direction:row;align-items:center;justify-content:space-between;gap:18px;
    font-size:11px;padding-top:16px;
  }
}

/* ---------- accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .tgs-drawer,
  .tgs-drawer.is-open,
  .tgs-topbar__fill,
  .tgs-catnav__list a{transition:none}
}