/**
 * tienda.css — VERSIÓN CONSOLIDADA COMPLETA
 * -------------------------------------------------------------------------
 * Reemplaza tu archivo tienda.css por completo (no es un parche). Incluye
 * todo lo acumulado hasta hoy: banner compacto, lupa sobria, visor de
 * galería con navegación, miniaturas dentro de la tarjeta — MÁS el
 * rediseño de hoy: tarjetas más compactas (sin huecos vacíos cuando un
 * producto no tiene descripción), imagen principal con fondo limpio
 * (sin degradado), miniaturas más discretas.
 * -------------------------------------------------------------------------
 */

.store-page{min-height:calc(100vh - 68px);background:#f5f7f5}

.store-banner{position:relative;min-height:220px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#102d22,#263b2c);color:#fff}
.store-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,28,21,.88) 20%,rgba(8,28,21,.45) 65%,rgba(8,28,21,.2) 100%)}
.store-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86;cursor:zoom-in}
.store-banner>div{position:relative;z-index:2;width:min(1380px,calc(100% - 48px));margin:0 auto;padding:30px 0}
.store-banner h1{max-width:700px;margin:0 0 8px;font-size:clamp(28px,3.2vw,44px);line-height:1.04}
.store-banner p{max-width:620px;margin:0;font-size:16px;color:#dfe9e2}

/* Botón de lupa: sobrio, trazo delgado */
.zoom-btn{
  position:absolute;z-index:3;width:32px;height:32px;border:1px solid #e2e8e4;
  border-radius:50%;background:#fff;color:#3b4a42;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:.15s ease;padding:0;
}
.zoom-btn:hover{background:#f3f7f4;border-color:#c7d9cf}
.zoom-btn svg{display:block}
.store-banner .zoom-btn.banner-zoom{right:16px;bottom:16px}

.store-page>.section{max-width:1380px;padding:48px 24px 90px}
.store-page>.section>h1{margin:8px 0 10px;font-size:clamp(38px,4vw,62px);line-height:1.02}
.store-page>.section>p:not(.eyebrow){max-width:740px;color:#607068;font-size:18px}
.store-tools{position:sticky;top:82px;z-index:30;display:grid;grid-template-columns:minmax(280px,1fr) 260px auto;gap:12px;margin:32px 0 26px;padding:14px;border:1px solid #dce6df;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 14px 38px rgba(24,55,42,.09);backdrop-filter:blur(10px)}
.store-tools input,.store-tools select,.cart input,.cart textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #ccd9d0;border-radius:12px;background:#fff;color:#14251e;font:inherit}
.store-tools input:focus,.store-tools select:focus,.cart input:focus,.cart textarea:focus{outline:3px solid rgba(167,202,43,.22);border-color:var(--lime)}
#openCart{min-width:150px;border:0;cursor:pointer}

.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.product{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid #dce6df;border-radius:22px;background:#fff;
  box-shadow:0 12px 32px rgba(24,55,42,.08);
  transition:transform .18s ease,box-shadow .18s ease;
}
.product:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(24,55,42,.14)}

/* ---------- Imagen principal ----------
   FIX ("se ve fea, mejora el diseño, me gusta el formato de la primera
   imagen"): antes tenía un fondo degradado visible + mucho padding
   interno, lo que se notaba raro en productos con fondo blanco. Ahora el
   fondo es limpio (blanco liso, como en la imagen que te gustó), con un
   poco menos de altura y una línea sutil de separación hacia abajo. */
.product-image{
  position:relative;height:260px;display:grid;place-items:center;
  overflow:hidden;background:#fff;border-bottom:1px solid #eef2ef;
}
.product-image img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .25s ease}
.product:hover .product-image img{transform:scale(1.02)}
.product-image .zoom-btn{right:10px;bottom:10px;width:30px;height:30px}

/* ---------- Miniaturas dentro de la tarjeta ----------
   FIX ("compacta un poco lo de abajo de la imagen"): antes eran más
   grandes y con más aire alrededor. Ahora son más discretas (34px),
   pegadas justo debajo de la imagen, para que el producto se sienta
   igual de limpio que uno sin miniaturas (el formato que te gustó). */
.product-thumbs{
  display:flex;gap:5px;padding:8px 14px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;border-bottom:1px solid #eef2ef;
}
.product-thumb{
  flex:0 0 34px;width:34px;height:34px;padding:0;border:2px solid #e2e8e4;
  border-radius:7px;overflow:hidden;background:#fff;cursor:pointer;
  transition:.15s ease;
}
.product-thumb img{width:100%;height:100%;object-fit:contain}
.product-thumb:hover{border-color:#c7d9cf}
.product-thumb.active{border-color:var(--orange,#e8792c)}

/* ---------- Cuerpo de la tarjeta ----------
   FIX: antes h2 y la descripción tenían una altura mínima fija (58px y
   44px) para "emparejar" visualmente las tarjetas — pero eso dejaba un
   hueco vacío y feo en productos sin descripción (como "7 INSIGNIAS").
   Ahora cada tarjeta se ajusta a su propio contenido real, sin huecos
   artificiales. */
.product-body{display:flex;flex:1;flex-direction:column;padding:18px 20px 20px}
.product-category{margin:0 0 6px;color:#84a700;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.product-body h2{margin:0 0 6px;font-size:21px;line-height:1.18}
.product-desc{margin:0 0 10px;color:#68766f;line-height:1.45;font-size:14.5px}
.price{margin:2px 0 14px;color:var(--green);font-size:24px;font-weight:900}
.price del{color:#98a49c;font-weight:700;font-size:16px;margin-right:6px}

.size-block{border:0;padding:0;margin:0 0 14px}
.size-block legend{margin-bottom:9px;font-size:13px;font-weight:900}
.size-buttons{display:flex;flex-wrap:wrap;gap:8px}
.size-button{min-width:44px;padding:9px 12px;border:1px solid #ccd9d0;border-radius:10px;background:#fff;color:#263b2c;font-weight:900;cursor:pointer}
.size-button:hover,.size-button.selected{border-color:var(--orange,#e8792c);background:var(--orange,#e8792c);color:#fff}
.quantity-label{display:grid;grid-template-columns:1fr 84px;align-items:center;gap:12px;margin:auto 0 12px;font-size:13px;font-weight:900}
.quantity-label input{min-height:42px;padding:8px;border:1px solid #ccd9d0;border-radius:10px;text-align:center}
.add-button{width:100%;min-height:46px;border:0;cursor:pointer;font-size:15px}

.store-status{position:fixed;z-index:400;left:50%;bottom:30px;max-width:min(560px,calc(100% - 32px));padding:14px 20px;border-radius:14px;background:#263b2c;color:#fff;font-weight:800;box-shadow:0 16px 40px #0004;opacity:0;transform:translate(-50%,22px);pointer-events:none;transition:.2s}
.store-status.show{opacity:1;transform:translate(-50%,0)}
.store-status.error{background:#a12c2c}

.cart{position:fixed;z-index:210;top:0;right:-520px;width:min(500px,100%);height:100%;overflow:auto;padding:30px;background:#fff;box-shadow:-24px 0 60px #0003;transition:right .25s ease}
.cart.open{right:0}
.cart h2{margin:8px 0 24px;font-size:36px}
.cart-close{float:right;width:42px;height:42px;border:0;border-radius:50%;background:#eef3ef;font-size:28px;cursor:pointer}
.cart label{display:block;margin:14px 0;font-weight:800}
.cart textarea{min-height:96px;resize:vertical}
.cart>p{padding:14px;border-radius:12px;background:#f2f7f3}
.cart #sendOrder{width:100%;min-height:50px;border:0;cursor:pointer}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid #e2eae4}
.cart-item span,.cart-item small{display:block;margin-top:4px;color:#65736b}
.cart-controls{display:flex;align-items:center;gap:7px}
.cart-controls button{min-width:32px;height:32px;border:0;border-radius:8px;cursor:pointer}
.cart-controls .remove{width:auto;padding:0 10px;background:#fff0f0;color:#a12c2c}
.cart-shade{display:none;position:fixed;z-index:200;inset:0;background:rgba(0,0,0,.58)}
.cart-shade.open{display:block}
.fallback{display:grid;width:100%;height:100%;place-items:center;background:#263b2c;color:#fff;font-weight:900}

/* ---------- Visor de galería con navegación (lupa) ---------- */
.gallery-lightbox{
  display:none;position:fixed;inset:0;z-index:970;background:#fff;
  align-items:center;justify-content:center;
}
.gallery-lightbox.open{display:flex}
.gallery-lightbox .gl-img{max-width:92%;max-height:84vh;object-fit:contain}
.gallery-lightbox .gl-top{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;padding:18px 24px;
}
.gallery-lightbox .gl-counter{color:#5c6b63;font-size:14px;font-weight:700;letter-spacing:.02em}
.gallery-lightbox .gl-close{
  width:38px;height:38px;border:0;border-radius:50%;background:transparent;
  color:#263b2c;cursor:pointer;display:grid;place-items:center;transition:.15s ease;
}
.gallery-lightbox .gl-close:hover{background:#f0f4f1}
.gallery-lightbox .gl-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border:0;border-radius:50%;background:transparent;color:#263b2c;cursor:pointer;
  display:grid;place-items:center;transition:.15s ease;
}
.gallery-lightbox .gl-arrow:hover{background:#f0f4f1}
.gallery-lightbox .gl-prev{left:18px}
.gallery-lightbox .gl-next{right:18px}

/* Badge "Mi pedido N" */
#openCart{display:inline-flex;align-items:center;gap:8px}
#cartCount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;
  background:#ffffff;color:var(--orange,#e8792c);
  border-radius:999px;font-size:13px;font-weight:900;
  line-height:1;
}

@media(max-width:1180px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:880px){
  .store-banner{min-height:200px}
  .store-tools{position:static;grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-image{height:230px}
}

@media(max-width:560px){
  .store-banner{min-height:170px}
  .store-banner img{object-fit:contain;background:#0b1712;opacity:1}
  .store-banner:after{background:linear-gradient(180deg,transparent 45%,rgba(8,28,21,.92) 100%)}
  .store-banner>div{width:calc(100% - 32px);padding:16px 0}
  .store-banner h1{font-size:24px}
  .store-banner p{font-size:13.5px}
  .store-banner .zoom-btn.banner-zoom{right:12px;bottom:12px;width:32px;height:32px;font-size:13px}
  .store-page>.section{padding:36px 16px 72px}
  .product-grid{grid-template-columns:1fr}
  .product-image{height:280px}
  .cart{padding:20px}
  .gallery-lightbox .gl-img{max-width:94%;max-height:72vh}
  .gallery-lightbox .gl-arrow{width:34px;height:34px}
  .gallery-lightbox .gl-top{padding:14px 16px}
}
/**
 * AGREGAR AL FINAL de tu tienda.css (no reemplaza nada, solo ajusta el
 * tamaño de la imagen principal en vista móvil).
 *
 * FIX ("la imagen principal se ve muy chica en móvil"): la causa era el
 * padding interno (14px) combinado con object-fit:contain, que encoge la
 * foto dejando espacio en blanco alrededor en vez de llenar el
 * contenedor. En móvil, aumentamos la altura del contenedor y reducimos
 * el padding para que la imagen se vea notablemente más grande.
 */
@media(max-width:560px){
  .product-image{height:340px}
  .product-image img{padding:6px}
}