/* ============================================================
   The Good Shisha — Catálogo, tarjeta de producto y filtros
   Módulo: inc/woo-shop.php
   Mobile-first; el layout de escritorio entra en 980px.
   Solo tokens de 00-tokens.css: aquí no se hardcodean colores.
   ============================================================ */

/* ------------------------------------------------------------
   1. Migas y cabecera de categoría
   ------------------------------------------------------------ */
.tgs-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:14px var(--tgs-pad) 0;margin:0;
  color:var(--tgs-text-meta);font-size:11.5px;font-weight:700;
}
.tgs-crumbs a{color:inherit;text-decoration:none}
.tgs-crumbs a:hover{color:var(--tgs-text)}
.tgs-crumbs .tgs-crumbs__sep{opacity:.6}

.tgs-shop{padding:4px var(--tgs-pad) 24px}

.tgs-cat__titles{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tgs-cat__title{
  margin:0;font-size:26px;font-weight:900;font-style:italic;
  color:var(--tgs-text);line-height:1.15;text-transform:uppercase;
  min-width:0;overflow-wrap:anywhere;   /* nombres de categoría muy largos */
}
.tgs-cat__count{color:var(--tgs-text-meta);font-size:13px;font-weight:700}

/* Herramientas: en móvil scrollan en horizontal sin barra visible. */
.tgs-cat__tools{
  display:flex;gap:8px;align-items:center;
  overflow-x:auto;padding:12px 0 4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tgs-cat__tools::-webkit-scrollbar{display:none}

.tgs-sort{display:flex;gap:8px;flex:none}

/* Cabecera nativa de WooCommerce (descripción de la categoría). */
.woocommerce-products-header{margin:0;padding:12px var(--tgs-pad) 0}
.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description,
.woocommerce-products-header p{
  margin:0;color:var(--tgs-text-body);font-size:13.5px;font-weight:500;line-height:1.6;
}

.tgs-mkbtn,
.tgs-sortchip{
  flex:none;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center;gap:7px;
  border-radius:var(--tgs-r-pill);padding:11px 16px;
  font-family:var(--tgs-font);font-size:12.5px;font-weight:800;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
}
.tgs-mkbtn{background:var(--tgs-ink);color:var(--tgs-card);border:none}
.tgs-mkbtn__count{font-weight:900}
.tgs-sortchip{
  background:var(--tgs-card);color:var(--tgs-text);
  border:1.5px solid var(--tgs-bd-input);
}
.tgs-sortchip:hover{border-color:var(--tgs-text-meta)}
.tgs-sortchip.is-on{background:var(--tgs-ink);color:var(--tgs-card);border-color:var(--tgs-ink)}

/* ------------------------------------------------------------
   2. Layout del listado
   ------------------------------------------------------------ */
.tgs-shop__layout{margin-top:6px}
.tgs-shop__side{display:none}          /* en móvil el panel vive en el bottom-sheet */
.tgs-shop__main{min-width:0}

.tgs-shop__main .woocommerce-info,
.tgs-shop__main .woocommerce-message{
  background:var(--tgs-card);border:1px solid var(--tgs-card-bd);border-radius:var(--tgs-r-card);
  padding:18px;color:var(--tgs-text-body);font-size:13.5px;font-weight:600;
}
.tgs-shop__empty{margin:14px 0 0}

/* ------------------------------------------------------------
   3. Rejilla de productos
   WooCommerce/GeneratePress usan float + width en %, hay que anularlos.
   ------------------------------------------------------------ */
.woocommerce ul.products,
ul.products{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none}

.woocommerce ul.products li.product,
ul.products li.product{
  width:auto !important;margin:0 !important;padding:0;
  float:none !important;clear:none !important;
  display:flex;flex-direction:column;text-align:left;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{display:none}

/* ------------------------------------------------------------
   4. Tarjeta de producto
   ------------------------------------------------------------ */
.tgs-pcard{
  position:relative;flex:1;
  display:flex;flex-direction:column;gap:8px;
  background:var(--tgs-card);border:1px solid var(--tgs-card-bd);
  border-radius:var(--tgs-r-card);padding:12px;
}

.tgs-pcard__media{position:relative;height:120px;display:grid;place-items:center}
.tgs-pcard__medialink{display:grid;place-items:center;width:100%;height:100%}
.tgs-pcard__media img{
  max-height:112px;max-width:90%;width:auto;height:auto;
  object-fit:contain;margin:0;
}

/* La posición y los colores vienen de .tgs-badge (20-components.css).
   El badge va a z-index 2, por encima del enlace estirado del título (z-index 1):
   sin pointer-events:none se tragaría el clic en esa esquina de la tarjeta. */
.tgs-pcard__badge{pointer-events:none}
.tgs-pcard__badge--soon{background-color:var(--tgs-text-meta)}

/* Corazón DECORATIVO (sin backend): solo recuerda la elección en el navegador. */
.tgs-pcard__fav{
  position:absolute;top:10px;right:10px;z-index:3;
  width:32px;height:32px;border-radius:var(--tgs-r-pill);
  display:grid;place-items:center;
  background:rgba(255,255,255,.9);border:1px solid var(--tgs-card-bd);
  font-size:14px;line-height:1;cursor:pointer;padding:0;
}
.tgs-pcard__fav:active{transform:scale(.9)}
/* Área táctil de 44px sin engordar el círculo. */
.tgs-pcard__fav::after{content:"";position:absolute;inset:-6px;border-radius:inherit}

.tgs-pcard__body{display:flex;flex-direction:column;gap:6px;flex:1}

.tgs-pcard__brand{
  color:var(--tgs-text-meta);font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.tgs-pcard__title{
  margin:0;padding:0;font-size:11.5px;font-weight:800;line-height:1.25;
  color:var(--tgs-text);text-transform:uppercase;min-height:29px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tgs-pcard__link{color:inherit;text-decoration:none}
/* El enlace del título cubre la tarjeta entera: así no anidamos <a> dentro de <a>
   y el botón de añadir sigue siendo el enlace AJAX nativo de WooCommerce. */
.tgs-pcard__link::after{content:"";position:absolute;inset:0;z-index:1}

.tgs-pcard__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;flex-wrap:wrap;margin-top:auto;
}
.tgs-pcard__price{
  font-size:14px;font-weight:900;color:var(--tgs-text);line-height:1.2;
}
.tgs-pcard__price .woocommerce-Price-amount{font-weight:900}
.tgs-pcard__price del{
  display:block;color:var(--tgs-text-disabled);font-size:11px;
  font-weight:700;text-decoration:line-through;
}
.tgs-pcard__price ins{
  display:block;color:var(--tgs-red);text-decoration:none;font-weight:900;
}
.tgs-pcard__price .woocommerce-Price-currencySymbol{font-weight:900}

/* ------------------------------------------------------------
   5. Botón de añadir (enlace AJAX nativo de WooCommerce)
   El aspecto lo dan .tgs-btn --dark --circle; aquí solo lo que es propio
   de la tarjeta y hay que ganarle al CSS de WooCommerce/GeneratePress.
   ------------------------------------------------------------ */
.tgs-pcard .tgs-pcard__add,
.woocommerce ul.products li.product .tgs-pcard__add{
  position:relative;z-index:3;flex:none;gap:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;min-height:32px;height:32px;padding:0;
  border:none;border-radius:var(--tgs-r-pill);
  /* repetimos color y peso porque el CSS de WooCommerce/GeneratePress
     apunta a `.woocommerce ul.products li.product .button` y gana en peso */
  background-color:var(--tgs-ink);color:#fff;
  font-family:var(--tgs-font);font-size:16px;font-weight:900;line-height:1;
  letter-spacing:0;text-decoration:none;
}
.tgs-pcard .tgs-pcard__add:hover,
.woocommerce ul.products li.product .tgs-pcard__add:hover{
  background-color:var(--tgs-black-2);color:#fff;
}
/* Área táctil de 44px sin agrandar el círculo. */
.tgs-pcard__add::after{content:"";position:absolute;inset:-6px;border-radius:inherit}
.tgs-pcard__add:active{transform:scale(.9)}
/* En móvil solo se ve el "+", pero la etiqueta sigue leyéndose con lector. */
.tgs-pcard__add .tgs-add__label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.tgs-pcard__add.loading{opacity:.6;pointer-events:none}
.tgs-pcard__add.added .tgs-add__glyph{visibility:hidden}
.tgs-pcard__add.added::before{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:16px;
}

/* Enlace "Ver carrito" que WooCommerce inyecta tras el AJAX. */
.tgs-pcard .added_to_cart{
  position:relative;z-index:3;flex-basis:100%;
  color:var(--tgs-text-meta);font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;
}
.tgs-pcard .added_to_cart:hover{color:var(--tgs-text)}

/* ------------------------------------------------------------
   6. Panel de filtros (compartido por sidebar y bottom-sheet)
   ------------------------------------------------------------ */
.tgs-filters{display:flex;flex-direction:column;gap:14px}

.tgs-filters__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tgs-filters__title{font-size:15px;font-weight:900;font-style:italic;color:var(--tgs-text)}
.tgs-filters__clear{
  color:var(--tgs-text-meta);font-size:11.5px;font-weight:800;
  letter-spacing:.04em;text-decoration:none;padding:6px 0;
}
.tgs-filters__clear:hover{color:var(--tgs-text)}

.tgs-fsearch{
  display:flex;align-items:center;gap:10px;
  background:var(--tgs-bg);border:1.5px solid var(--tgs-bd-input);
  border-radius:var(--tgs-r-pill);padding:10px 16px;
}
.tgs-fsearch .tgs-icon{flex:none}
.tgs-fsearch__input{
  width:100%;border:none;outline:none;background:transparent;
  font-family:var(--tgs-font);font-size:13px;font-weight:600;color:var(--tgs-text);
  min-height:24px;padding:0;-webkit-appearance:none;appearance:none;
}
.tgs-fsearch__input::placeholder{color:var(--tgs-text-meta)}
.tgs-fsearch:focus-within{border-color:var(--tgs-ink)}

.tgs-flist{display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}

.tgs-frow{
  display:flex;align-items:center;gap:12px;
  min-height:44px;padding:11px 4px;
  border-bottom:1px solid var(--tgs-sep-2);
  cursor:pointer;position:relative;
}
.tgs-frow[hidden]{display:none}
.tgs-frow:hover{background:var(--tgs-sep-2)}
.tgs-frow__name{
  font-size:13px;font-weight:700;color:var(--tgs-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tgs-frow__count{margin-left:auto;color:var(--tgs-text-meta);font-size:11px;font-weight:700}

/* Checkbox real oculto pero accesible (navegable con teclado). */
.tgs-frow__cb{
  position:absolute;width:1px;height:1px;
  margin:0;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.tgs-fbox{
  flex:none;width:20px;height:20px;border-radius:6px;
  border:2px solid var(--tgs-bd-input);
  display:grid;place-items:center;
  color:var(--tgs-card);font-size:12px;font-weight:900;line-height:1;
}
.tgs-fbox::before{content:"✓";opacity:0}
.tgs-frow__cb:checked + .tgs-fbox{background:var(--tgs-ink);border-color:var(--tgs-ink)}
.tgs-frow__cb:checked + .tgs-fbox::before{opacity:1}
.tgs-frow__cb:focus-visible + .tgs-fbox{outline:2px solid var(--tgs-ink);outline-offset:2px}

.tgs-favail{
  display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--tgs-sep);padding-top:14px;
}
.tgs-favail .tgs-frow{border-bottom:none}

/* El aspecto lo da .tgs-btn --dark --block; aquí solo el alto del diseño. */
.tgs-filters__apply{min-height:50px;letter-spacing:.05em}

/* ------------------------------------------------------------
   7. Bottom-sheet de filtros (móvil)
   Se estilan aquí sus estados abierto/cerrado para no depender de la
   convención de apertura del módulo base.
   ------------------------------------------------------------ */
.tgs-filters-overlay{
  display:block;                 /* explícito: el .tgs-overlay base puede venir oculto */
  position:fixed;inset:0;z-index:90;
  /* el fondo oscuro lo pone .tgs-overlay (20-components.css): no lo repetimos */
  opacity:0;transition:opacity .28s ease;
}
.tgs-filters-overlay.is-open{opacity:1}
.tgs-filters-overlay[hidden]{display:none}

.tgs-filters-sheet{
  display:block;                 /* idem: no dependemos del estado del .tgs-sheet base */
  /* .tgs-sheet deja visibility:hidden y aquí acortamos su transition, así que sin
     esto el panel desaparecía de golpe en vez de deslizarse al cerrar. Lo que lo
     oculta de verdad es el atributo [hidden] que pone/quita el JS. */
  visibility:visible;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--tgs-card);border-radius:20px 20px 0 0;
  padding:16px var(--tgs-pad) calc(24px + env(safe-area-inset-bottom));
  max-height:86vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .28s ease;
}
.tgs-filters-sheet.is-open{transform:translateY(0);visibility:visible}
.tgs-filters-sheet[hidden]{display:none}
.tgs-filters-sheet .tgs-flist{max-height:44vh}
.tgs-filters-sheet .tgs-frow{padding:12px 6px}

@media (prefers-reduced-motion:reduce){
  .tgs-filters-sheet,
  .tgs-filters-overlay{transition:none}
}

/* ------------------------------------------------------------
   8. Paginación
   ------------------------------------------------------------ */
.woocommerce nav.woocommerce-pagination{margin:24px 0 0;text-align:left}
.woocommerce nav.woocommerce-pagination ul{
  display:flex;flex-wrap:wrap;gap:8px;
  border:none;margin:0;padding:0;list-style:none;
}
.woocommerce nav.woocommerce-pagination ul li{border:none;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:44px;min-height:44px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tgs-card);border:1.5px solid var(--tgs-bd-input);
  border-radius:var(--tgs-r-pill);
  color:var(--tgs-text);font-size:13px;font-weight:800;text-decoration:none;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{border-color:var(--tgs-text-meta);background:var(--tgs-card)}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--tgs-ink);border-color:var(--tgs-ink);color:var(--tgs-card);
}

/* ------------------------------------------------------------
   9. Tarjetas de subcategoría (cuando WooCommerce las muestra)
   ------------------------------------------------------------ */
.woocommerce ul.products li.product-category > a{
  display:flex;flex-direction:column;gap:8px;height:100%;
  background:var(--tgs-card);border:1px solid var(--tgs-card-bd);
  border-radius:var(--tgs-r-card);padding:12px;text-decoration:none;
}
.woocommerce ul.products li.product-category img{
  max-height:112px;width:auto;margin:0 auto;object-fit:contain;
}
.woocommerce ul.products li.product-category h2{
  margin:0;font-size:12px;font-weight:900;text-transform:uppercase;
  color:var(--tgs-text);text-align:center;
}
.woocommerce ul.products li.product-category .count{
  color:var(--tgs-text-meta);font-size:11px;font-weight:700;text-align:center;
}

/* ============================================================
   ESCRITORIO (>= 980px)
   ============================================================ */
@media (min-width:980px){
  .tgs-crumbs{padding:18px var(--tgs-pad-desk) 0;font-size:12px}
  .woocommerce-products-header{padding:14px var(--tgs-pad-desk) 0}

  .tgs-shop{padding:6px var(--tgs-pad-desk) 36px}
  .tgs-cat__top{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
  .tgs-cat__title{font-size:34px}
  .tgs-cat__count{font-size:14px}
  .tgs-cat__tools{overflow:visible;padding:0}
  .tgs-mkbtn{display:none}            /* en escritorio manda el sidebar */

  .tgs-shop__layout{
    display:grid;grid-template-columns:280px 1fr;gap:24px;
    align-items:start;margin-top:20px;
  }
  .tgs-shop__side{
    display:block;position:sticky;top:16px;
    background:var(--tgs-card);border:1px solid var(--tgs-card-bd);
    border-radius:var(--tgs-r-card-desk);padding:20px;
  }
  .tgs-shop__side .tgs-flist{max-height:360px}
  /* Con el sidebar visible el filtro se aplica al enviar; el botón queda como
     confirmación explícita, no hace falta destacarlo tanto. */
  .tgs-shop__side .tgs-filters__apply{min-height:44px;font-size:12px}

  /* 4 columnas por defecto (home, relacionados) y 3 junto al sidebar. */
  .woocommerce ul.products,
  ul.products{grid-template-columns:repeat(4,1fr);gap:18px}
  .tgs-shop__main ul.products{grid-template-columns:repeat(3,1fr)}

  .tgs-pcard{
    border-radius:var(--tgs-r-card-desk);padding:18px;gap:10px;
    transition:transform .2s ease,box-shadow .2s ease;
  }
  li.product:hover .tgs-pcard{transform:translateY(-4px);box-shadow:var(--tgs-shadow-card-hover)}

  .tgs-pcard__media{height:190px}
  .tgs-pcard__media img{max-height:180px}
  .tgs-pcard__badge{top:14px;left:14px;font-size:10.5px;padding:5px 10px}
  .tgs-pcard__badge.tgs-badge--offer{font-size:11px}
  .tgs-pcard__fav{top:14px;right:14px}
  .tgs-pcard__brand{font-size:10.5px}
  .tgs-pcard__title{font-size:13.5px;line-height:1.3;min-height:35px}
  .tgs-pcard__price{font-size:17px}
  /* En escritorio cabe el precio tachado junto al de oferta. */
  .tgs-pcard__price del,
  .tgs-pcard__price ins{display:inline}
  .tgs-pcard__price del{font-size:12.5px;margin-right:6px}

  /* En escritorio el botón crece y muestra la etiqueta. */
  .tgs-pcard .tgs-pcard__add,
  .woocommerce ul.products li.product .tgs-pcard__add{
    width:auto;height:38px;min-height:38px;padding:0 16px;gap:7px;
    font-size:12px;letter-spacing:.02em;
  }
  /* Con 38px de alto y etiqueta el botón ya cumple el área táctil: quitamos el
     halo de 6px para que no se coma clics destinados al enlace de la tarjeta. */
  .tgs-pcard__add::after{content:none}
  .tgs-pcard__add .tgs-add__glyph{font-size:15px}
  .tgs-pcard__add .tgs-add__label{
    position:static;width:auto;height:auto;overflow:visible;
    clip:auto;clip-path:none;white-space:nowrap;
  }

  .woocommerce nav.woocommerce-pagination{margin:32px 0 0}

  /* El bottom-sheet no existe en escritorio. */
  .tgs-filters-sheet,
  .tgs-filters-overlay{display:none !important}
}