/* ==========================================================================
   PEPTIK — collection-peptik.css
   Tema portado para build/tpl_collection.py (clon 1:1 del layout de
   peptik.co/collections/all-categories), alimentado por el catalogo propio.

   FUENTE de cada regla:
   - La hoja de estilos activa en esa pagina del espejo (confirmado por sus
     <link rel="stylesheet">, en orden):
       1) /assets/d700863ca4_base.css        (framework Shopify Horizon — NO
                                               se porta: generico de la
                                               plataforma, no es "tema peptik")
       2) /assets/7a75b65f89_swiper-bundle.min.css (carrusel, no usado aca)
       3) /assets/5a38895651_style.css       (tema custom de peptik — ESTA es
                                               la fuente de (casi) todo lo de
                                               abajo. OJO: existe tambien
                                               08946e7cfd_style.css, una copia
                                               vieja NO enlazada en esta
                                               pagina — se descarto adrede)
       4) /assets/4f94e397b3_styles.css      (ajustes de Shopify Horizon —
                                               tampoco se porta)
   - Dos bloques <style> embebidos DIRECTO en el HTML de esa pagina (no en un
     .css externo), marcados abajo como "INLINE DEL ESPEJO".
   - Bloques marcados "AGREGADO": CSS propio, sin equivalente en el espejo.
     Hacen falta porque el motor de grilla/tarjeta real de peptik.co vive en
     el framework Horizon (archivos 1 y 4 de arriba, ~700KB combinados de
     CSS generico de plataforma) que esta tarea pide NO traer.

   Regla de portado: los @media se preservan TAL CUAL (misma condicion, mismo
   contenido). Los selectores solo se reescriben cuando la plantilla usa una
   etiqueta/clase distinta a la del espejo — marcado "ADAPTADO" en cada caso,
   con el selector original al lado.
   ========================================================================== */

/* --- Variables del tema del espejo --------------------------------------
   peptik-custom/src/styles/tokens.css NO se toca (prohibido). Estos son los
   nombres de variable que usan las reglas portadas de 5a38895651_style.css,
   con el valor literal tal como esta en su :root. Tres ya coinciden 1:1 con
   tokens propios del proyecto (--darkblue == --ink, --figma-soft-alt ==
   --surface-1, --blue100 == --sky) pero se listan igual, sin alias, para que
   este archivo sea autocontenido y no dependa del orden de <link> con
   tokens.css. */
:root {
  --darkblue: #10003e;
  --text: #686677;
  --gray500: #81808e;
  --gray600: #686677;
  --gray800: #36334a;
  --white: #ffffff;
  --blue100: #cbe1fc;
  --blue200: #99c2f9;
  --blue: #0535a8;
  --figma-ink: #10003e;
  --figma-soft-alt: #f3f6fc;
  --figma-muted: #686677;
  --figma-accent: #649aed;
}

/* ============================================================ HERO ===== */
/* .aboutus-section / .bodytext — 5a38895651_style.css */

.aboutus-section {
  width: 100%;
  background: #fff;
  padding: 100px 0 90px;
  text-align: center;
}
.aboutus-section.clctnmain { padding-bottom: 0; }
.aboutus-section .bodytext { max-width: 645px; margin: 0 auto; }
.aboutus-section.clctnmain .bodytext { max-width: 100%; margin: 0 auto; }

.bodytext h1 {
  font-size: 96px;
  line-height: 98px;
  letter-spacing: -7px;
  color: var(--darkblue);
  margin: 0;
  font-weight: 400 !important;
  font-family: Lato, sans-serif !important;
}

.aboutus-section .bodytext p {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -1px;
  color: var(--gray600);
  margin: 24px 0 0;
}
.aboutus-section.clctnmain .bodytext > p:last-child { margin-bottom: 0; }

/* Linea de prueba social con punto animado: oculta en desktop, el espejo la
   muestra solo en mobile (reemplazando los parrafos largos). */
.aboutus-section .bodytext p.peptik-clctn-social-proof { display: none; }

@media (max-width: 1270px) {
  .bodytext h2 { font-size: 34px; line-height: 42px; letter-spacing: -0.5px; margin-bottom: 16px; }
  .bodytext p { font-size: 16px; line-height: 24px; margin: 16px 0 0; }
}

@media (max-width: 768px) {
  .aboutus-section.clctnmain { padding-top: 8px; padding-bottom: 0; }
  .aboutus-section.clctnmain .bodytext > p:not(.peptik-clctn-social-proof) { display: none; }
  .aboutus-section .bodytext p.peptik-clctn-social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--gray800);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: normal;
    max-width: 100%;
    text-align: left;
  }
  .peptik-clctn-social-proof__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    position: relative;
    background: transparent;
    box-shadow: none;
    animation: none;
  }
  .peptik-clctn-social-proof__dot:before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00b074;
    box-shadow: 0 0 0 3px #00b0742e;
    animation: peptik-pulse 1.8s ease-out infinite;
  }
  .collection-tabs { padding-top: 8px !important; }
  .collection-tabs-wrapper { padding-top: 0 !important; }
  .collectionmain .product-grid-container { padding-block-start: 16px !important; }
}

@media (max-width: 749px) {
  .aboutus-section { padding: 20px 0 40px; text-align: left; }
  .bodytext h1 { text-align: left; font-size: 44px; line-height: 52px; letter-spacing: -2px; font-weight: 500; }
  .aboutus-section .bodytext { max-width: 100%; }
  .aboutus-section .bodytext p { text-align: left; font-size: 18px; line-height: 26px; margin: 20px 0 0; max-width: 100%; }
}

/* INLINE DEL ESPEJO (<style> embebido junto a la seccion hero en el HTML,
   no en 5a38895651_style.css) — animacion del punto verde de "90k+
   packages delivered". */
@keyframes peptik-pulse {
  0% { box-shadow: 0 0 #00b07473; }
  70% { box-shadow: 0 0 0 8px #00b07400; }
  to { box-shadow: 0 0 #00b07400; }
}

/* ============================================== TARJETAS DE FORMATO ===== */
/* .peptik-type-toggle — 5a38895651_style.css. Se generan solo si `formats`
   trae "Pen"/"Vial"/"Spray" (ver tpl_collection.py); en el catalogo uu.life
   HOY no aplica, pero el CSS queda listo. */

.peptik-type-toggle {
  padding: 24px 0;
  position: relative;
  z-index: 5;
  background: #fff;
}

.peptik-type-toggle__cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.peptik-type-toggle__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  background: var(--figma-soft-alt);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--figma-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.peptik-type-toggle__card:hover {
  border-color: var(--figma-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px #10003e14;
}

.peptik-type-toggle__image { width: 80px; flex: none; }
.peptik-type-toggle__image img { width: 100%; height: auto; display: block; }

.peptik-type-toggle__copy { flex: 1; }

.peptik-type-toggle__title {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  color: var(--figma-ink);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.peptik-type-toggle__subtitle {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--figma-muted);
  line-height: 22px;
}

.peptik-type-toggle__new {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--figma-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 768px) {
  .peptik-type-toggle { padding: 12px 0 0; }
  .peptik-type-toggle__cards { grid-template-columns: 1fr; gap: 12px; grid-auto-rows: 1fr; }
  .peptik-type-toggle__card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 8px 16px 4px;
    min-height: 0;
    align-items: center;
  }
  .peptik-type-toggle__image { width: 100%; max-width: 72px; justify-self: center; align-self: center; }
  .peptik-type-toggle__card[data-format="pen"] .peptik-type-toggle__image { max-width: 72px; }
  .peptik-type-toggle__card[data-format="vial"] .peptik-type-toggle__image { max-width: 48px; }
  .peptik-type-toggle__copy { padding-top: 0; align-self: center; display: flex; flex-direction: column; justify-content: center; height: 100%; }
  .peptik-type-toggle__title { font-size: 24px; margin: 0; }
  .peptik-type-toggle__subtitle { margin: 6px 0 0; min-height: 0; }
}

/* ============================================= CHIPS DE CATEGORIA ======= */
/* ADAPTADO: el espejo usa <button class="tab" data-filter="..."> dentro de
   ".collection-tabs"; esta plantilla reutiliza los ganchos funcionales YA
   estilados del proyecto (id="filters", ".chip", data-f) para no tocar
   src/js/app.js. Estas reglas son las de ".collection-tabs .tab" del espejo
   re-apuntadas a ".collection-tabs .chip" — mismos valores, mismo @media. */

.collection-tabs {
  width: 100%;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  padding: 0 0 20px;
}

.collection-tabs .chip {
  cursor: pointer;
  border: 1px solid var(--blue100);
  color: var(--darkblue);
  background: #fff;
  font-size: 16px;
  line-height: 22px;
  padding: 12px 16px;
  border-radius: 4px;
  text-transform: capitalize;
}

.collection-tabs .chip[aria-pressed="true"] {
  background: var(--blue100);
  border-color: var(--blue200);
  font-weight: 500;
}

/* Integrador 2026-09-12 (pedido de Nico): los chips de filtro toman el
   color de su categoria (mismos tonos que los stickers de la tarjeta). */
.chip--lean    { --cat: #5f7d0d; }
.chip--build   { --cat: #c95e1c; }
.chip--glow    { --cat: #b3707b; }
.chip--desire  { --cat: #5a3a54; }
.chip--focus   { --cat: #3658a8; }
.chip--recover { --cat: #6a8c86; }
.collection-tabs .chip[class*="chip--"] { border-color: var(--cat); color: var(--cat); background: #fff; }
.collection-tabs .chip[class*="chip--"]:hover { background: color-mix(in srgb, var(--cat) 10%, #fff); }
.collection-tabs .chip[class*="chip--"][aria-pressed="true"] { background: var(--cat); border-color: var(--cat); color: #fff; }

@media (min-width: 990px) {
  .collection-tabs { flex-wrap: wrap !important; gap: 8px; row-gap: 8px; padding-right: 0 !important; }
  .collection-tabs .chip { padding: 10px 14px; white-space: nowrap; flex: 0 0 auto; }
}

/* ================================================== GRILLA DE PRODUCTOS = */

/* AGREGADO: el espejo apoya la grilla en el motor de Shopify Horizon
   (display:grid + columnas via CSS custom properties del framework, no
   portado). Esta base minima reproduce el mismo resultado visual con las
   columnas/gaps reales del tema (abajo, ADAPTADO de ".collectionmain
   .product-grid" y sus @media). */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}

/* .collectionmain .product-grid / li — 5a38895651_style.css.
   ADAPTADO: "li" -> ".product-grid__item" (esta plantilla envuelve cada
   tarjeta en un <div data-fmt> plano, no un <li>, para que el filtro de
   app.js siga funcionando con `[data-fmt]` sin depender de la etiqueta). */
.collectionmain .product-grid { grid-template-columns: repeat(3, 1fr); }

.collectionmain .product-grid .product-grid__item {
  border: 1px solid var(--blue100);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.product-grid > .product-grid__item { order: 0; }
.product-grid > .product-grid__item:has(.product-card--sold-out) { order: 1; }

@media (max-width: 1270px) {
  .collectionmain .product-grid { gap: 16px; }
}

@media (max-width: 979px) {
  .collectionmain .product-grid { grid-template-columns: repeat(2, 1fr); padding-top: 8px !important; }
}

@media (max-width: 749px) {
  /* 2 por fila en movil (aprobado 2026-09-12): tarjeta compacta, foto 4:5. */
  .collectionmain .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* --- Tarjeta ------------------------------------------------------------ */
/* .custom-product-card / .card-image / .productinfo / .product-tags /
   .btmbtns — 5a38895651_style.css */

.custom-product-card .card-image { position: relative; }

/* Placa de foto APAISADA 4:3, como la tarjeta de peptik (antes 4:5): la foto
   es `public/img/<handle>-1-wide.webp` (1600x1200, build/make_wide_photos.py),
   el vial entero y mas chico — ocupa ~70% del alto — centrado sobre el mismo
   fondo blanco roto del render (#f0ece6), asi que la placa y la foto son una
   sola superficie y el 5:3 calza exacto (no recorta nada). Mismo 5/3 en movil.
   Los pocos productos sin foto -wide caen a la 4:5 de siempre y esa si la
   recorta el object-fit: cover. */
/* La placa no toca el borde de la tarjeta: deja aire a los costados y arriba,
   como el texto de abajo (pedido del cliente 2026-09-12). El margen es
   porcentual (sobre el ancho de la tarjeta) para que sea el mismo aire
   relativo en la grilla de 3 columnas y en la de 2 del movil. */
.card-image { width: auto; margin: 3.5% 3.5% 12px; position: relative; overflow: hidden; aspect-ratio: 5 / 3; background: #f0ece6; border-radius: 14px; }
.card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.custom-product-card:hover .card-image img { transform: scale(1.03); }

.product-tags { width: 100%; display: flex; margin: 0 0 12px; padding: 0; flex-wrap: wrap; gap: 12px; }
.product-tags span {
  border: 1px solid var(--blue100);
  font-size: 12px;
  line-height: 16px;
  color: var(--gray800);
  border-radius: 4px;
  display: inline-block;
  padding: 4px 12px;
}
.custom-product-card .product-tags { gap: 6px; }
.custom-product-card .product-tags span {
  white-space: nowrap;
  font-size: var(--peptik-tag-fs, 11px);
  padding: 3px 8px;
  flex: 0 0 auto;
}

@media (max-width: 749px) {
  .custom-product-card .product-tags { flex-wrap: nowrap; overflow: hidden; }
}

.productinfo { padding: 0 24px 130px; width: 100%; }
.productinfo h4 {
  margin: 0;
  font-size: 26px;
  line-height: 34px;
  color: var(--darkblue);
  letter-spacing: -2px;
  transition: all 0.3s ease-in-out;
}

.productinfo .price {
  position: absolute;
  bottom: 74px;
  left: 24px;
  display: block;
  width: 100%;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -2px;
  color: var(--darkblue);
  white-space: nowrap;
}
.productinfo .price .price__current { display: inline; }
.price__current { display: block; }
.price__compare {
  display: block;
  color: #9b99a5;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 4px;
  text-decoration: line-through !important;
  text-decoration-color: #9b99a5;
  text-decoration-thickness: 2px;
}

/* Dentro de .collectionmain el precio pasa a flujo normal (no absolute) —
   asi la tarjeta puede tener alto variable segun el titulo. */
.collectionmain .productinfo {
  padding-bottom: 42px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.collectionmain .productinfo .price {
  position: static;
  padding: 22px 0 0;
  margin-top: auto;
}

@media (min-width: 750px) {
  .collectionmain .product-grid__item .custom-product-card { position: relative; height: 100%; display: flex; flex-direction: column; }
}

@media (max-width: 749px) {
  .productinfo { padding: 0 16px 130px; width: 100%; }
  .productinfo .price { bottom: 74px; left: 0; padding: 0 16px; font-size: 28px; line-height: 38px; letter-spacing: -0.5px; }
  .productinfo h4 { font-size: 26px; line-height: 34px; letter-spacing: -0.5px; font-weight: 500; }
}

.btmbtns { width: 100%; position: absolute; left: 0; bottom: 0; padding: 0 24px 20px; display: flex; gap: 10px; }
.btmbtns .btn1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  font-size: 16px;
  color: var(--darkblue);
  height: 42px;
  text-align: center;
  text-decoration: none;
}
.btmbtns .btn1:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btmbtns span { width: 100%; }

.collectionmain .btmbtns { position: static !important; padding: 14px 0 0 !important; display: flex !important; gap: 8px; }
.collectionmain .btmbtns .btn1 { font-size: 14px; height: 42px; }

@media (max-width: 749px) {
  .btmbtns { padding: 0 16px 20px; }
}

@media (max-width: 768px) {
  .collectionmain .btmbtns { flex-direction: column; gap: 6px; }
  .collectionmain .btmbtns .btn1 { height: 40px; font-size: 13px; }
}

/* --- Badges (nuevo / sold out) ------------------------------------------- */

.product-card__sold-out-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  background: #10003e;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

.custom-product-card.product-card--sold-out .card-image img { opacity: 0.55; filter: grayscale(0.35); }
.custom-product-card.product-card--sold-out .price { opacity: 0.6; }

/* --- Overlay clicable de toda la tarjeta --------------------------------- */
/* AGREGADO: en el espejo el <product-card> es un custom element de Shopify
   con `on:click="/handleViewTransition"` (JS de plataforma, no portable) que
   hace clicable toda la tarjeta; el <a class="product-card__link"> del
   espejo solo lleva texto para lectores de pantalla y de por si no cubre la
   tarjeta (eso lo resolvia el JS del tema). Aca se lo hace clicable con CSS
   puro: overlay absoluto + el boton "View product" un nivel por encima para
   que siga siendo pulsable. */
.custom-product-card { position: relative; }
.product-card__link { position: absolute; inset: 0; z-index: 1; }
.custom-product-card .btmbtns .btn1 { position: relative; z-index: 2; }

/* ==========================================================================
   BLOQUES AGREGADOS EN ESTA PASADA (completar 1:1 vs el espejo).
   Todo lo de aca abajo es nuevo respecto de la v1: lineas del hero (Quality
   Control + entrega), tarjeta de consulta WhatsApp, acordeon "Shop by Goal",
   buscador "Find your peptides" y badge de objetivo en la tarjeta. Detalle
   de que se agrego y por que en build/NOTES-collection.md.
   ========================================================================== */

/* ===================================================== LINEAS DEL HERO === */
/* .hero-features / .hero-feature / .features-mobile — 5a38895651_style.css
   (clase generica usada en varias plantillas del espejo; aca solo se porta
   lo que esta pagina realmente ejercita: hero-features.features-mobile).
   @media preservados tal cual (1270px, 749px). */
.hero-features { display: flex; flex-direction: column; gap: 4px; margin: 0 0 32px; padding: 0; }
.hero-features li { margin: 0; color: var(--gray500); font-size: 14px; line-height: 22px; display: flex; align-items: center; gap: 8px; }
.hero-features li img { display: block; max-width: 16px; }

@media (max-width: 1270px) {
  .hero-features li { font-size: 15px; line-height: 22px; }
}

@media (max-width: 749px) {
  .features-mobile { display: flex; flex-wrap: wrap; flex-direction: initial; gap: 8px; margin: 0 0 16px; }
  .features-mobile li:nth-child(1), .features-mobile li:nth-child(3) { min-width: 210px; }
  .features-mobile li span br { display: none; }
  .features-mobile li span { white-space: nowrap; }
  .hero-features li { color: var(--gray800); width: auto; }
  .hero-features li img { max-width: 21px; }
  .clctnmain .features-mobile { margin: 16px 0 0; }
  .clctnmain .hero-features li { gap: 12px; width: 100%; }
}

/* INLINE DEL ESPEJO (<style> embebido junto a la seccion hero en el HTML, no
   en 5a38895651_style.css) — "unified 20px icon grid" (Big Cheese
   2026-07-18) + animacion del icono de reparto. Valores
   literales sin @media envolvente en el espejo (asi se deja aca: el
   ".peptik-clctn-social-proof__dot" solo es visible dentro del
   @media(max-width:768px) de arriba de todos modos, asi que no hace falta
   volver a envolver esta regla para que el efecto quede scopeado). */
@media (max-width: 430px) {
  .clctnmain .features-mobile .hero-feature span { font-size: 13.5px; letter-spacing: -0.01em; }
}
.clctnmain .features-mobile { gap: 8px; }
.clctnmain .features-mobile li { gap: 12px; }
.clctnmain .features-mobile .hero-feature img.feature-icon { width: 20px !important; height: 20px !important; max-width: 20px !important; flex: 0 0 20px; }
.peptik-clctn-delivery .peptik-dispatch-ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 20px; height: 20px; flex: 0 0 20px; margin: 0; }
.peptik-clctn-delivery .peptik-dispatch-ic svg { width: 20px; height: 15px; overflow: visible; animation: peptik-van-bob 1.8s ease-in-out infinite; }
.aboutus-section .bodytext p.peptik-clctn-social-proof { gap: 12px; margin-top: 8px; }
.peptik-clctn-social-proof__dot { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; }
.peptik-clctn-delivery .peptik-dispatch-ic__body, .peptik-clctn-delivery .peptik-dispatch-ic__wheel { fill: #e11d2a; }
.peptik-clctn-delivery .peptik-dispatch-ic__hub { fill: #ffffff; }
.peptik-clctn-delivery .peptik-dispatch-ic__lines line { stroke: #e11d2a; stroke-width: 1.6; stroke-linecap: round; animation: peptik-van-streak 1.2s ease-in-out infinite; }
.peptik-clctn-delivery .peptik-dispatch-ic__lines line:nth-child(2) { animation-delay: 0.15s; }
.peptik-clctn-delivery .peptik-dispatch-ic__lines line:nth-child(3) { animation-delay: 0.3s; }
@keyframes peptik-van-bob { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
@keyframes peptik-van-streak { 0% { opacity: 0.2; transform: translateX(2px); } 50% { opacity: 1; transform: translateX(-1px); } 100% { opacity: 0.2; transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
  .peptik-clctn-delivery .peptik-dispatch-ic svg, .peptik-clctn-delivery .peptik-dispatch-ic__lines line { animation: none; }
  .peptik-clctn-delivery .peptik-dispatch-ic__lines line { opacity: 1; }
}

/* ============================================== TARJETA DE CONSULTA WA === */
/* .peptik-collection-consult — 5a38895651_style.css (unica regla propia:
   es solo un wrapper de ancho). El widget en si (.peptik-wa-consult y sus
   hijos) NO se duplica aca: ya esta estilado globalmente en
   src/styles/hero.css (la MISMA tarjeta que usa el hero del home) y esta
   pagina carga esa hoja via build.py -> page(), asi que alcanza con
   reusar las clases en tpl_collection.py. */
.peptik-collection-consult { margin: 14px 0 6px; }

/* ============================================ ACORDEON "SHOP BY GOAL" ==== */
/* .peptik-mobile-filter-sort / .peptik-mobile-fs__* — 5a38895651_style.css,
   dentro de un @media(max-width:979px) en el espejo (preservado tal cual).
   ADAPTADO: el selector original es ".collection-tabs,.sorting-filter" —
   ".sorting-filter" se omite porque esta plantilla no renderiza ningun
   dropdown de orden nativo de Shopify (ya removido de proposito, ver nota
   de "Sorting removed" en la seccion de GRILLA DE PRODUCTOS mas arriba). */
@media (max-width: 979px) {
  .collection-tabs { display: none !important; }
  .peptik-mobile-filter-sort { display: block; margin: 14px 0 12px; position: relative; z-index: 5; }
  .peptik-mobile-fs__toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid var(--blue200); border-radius: 8px;
    padding: 12px 16px; color: var(--darkblue); font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .peptik-mobile-fs__chevron { display: inline-flex; transition: transform 0.2s ease; }
  .peptik-mobile-fs--open .peptik-mobile-fs__chevron { transform: rotate(180deg); }
  .peptik-mobile-fs__panel {
    display: grid; grid-template-columns: 1fr; gap: 0; background: #fff;
    border: 1px solid var(--blue200); border-top: none; border-radius: 0 0 8px 8px;
    margin-top: -1px; max-height: 60vh; overflow: hidden;
  }
  .peptik-mobile-fs__panel[hidden] { display: none !important; }
  .peptik-mobile-fs__col { display: flex; flex-direction: column; padding: 12px; overflow-y: auto; }
  .peptik-mobile-fs__col--cat { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 0; align-content: start; }
  .peptik-mobile-fs__col--cat .peptik-mobile-fs__col-title { grid-column: 1 / -1; }
  .peptik-mobile-fs__col + .peptik-mobile-fs__col { border-left: 1px solid var(--blue100); }
  .peptik-mobile-fs__col-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--gray800); margin: 0 0 8px; padding: 0 4px;
  }
  .peptik-mobile-fs__opt {
    -webkit-appearance: none; appearance: none; background: transparent; border: none;
    text-align: left; font-size: 13px; line-height: 18px; color: var(--darkblue);
    padding: 8px; border-radius: 6px; cursor: pointer; display: block; width: 100%;
  }
  .peptik-mobile-fs__opt:hover { background: var(--blue100); }
  .peptik-mobile-fs__opt.is-active { background: var(--blue100); color: var(--darkblue); font-weight: 600; }
}
/* AGREGADO (no esta en el espejo con este selector explicito, pero SI es el
   comportamiento real del espejo: ver razonamiento en NOTES-collection.md).
   [hidden] tiene la MISMA especificidad que una clase (0,0,1,0); combinado
   con la clase (.peptik-mobile-filter-sort[hidden]) suma 2 selectores de
   clase, mas especifico que la regla ".peptik-mobile-filter-sort{display:
   block}" de arriba — asi que esta linea gana SIEMPRE que el atributo
   hidden este presente, sin importar el orden en el archivo. Mismo patron
   ya usado en este proyecto para otros componentes con JS que alternan
   [hidden] (.peptik-calculator-dropdown[hidden], .button[hidden]); se sigue esa convencion aca tambien. */
.peptik-mobile-filter-sort[hidden] { display: none; }

/* ==================================================== BUSCADOR ("Find
   your peptides") ========================================================= */
/* .peptik-cat-search* — 5a38895651_style.css. Se omiten a proposito las
   reglas .peptik-cat-search__results/__hit/__thumb/__meta/__title/__price/
   __empty del espejo: esa parte es el dropdown de autocomplete que esta
   plantilla NO porta (filtra #grid in-place en su lugar, ver
   _search_bar_section()/_INTERACTIVE_SCRIPT en tpl_collection.py). */
.peptik-cat-search {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: none;
  margin: 6px 0 0; padding: 8px 8px 8px 18px; background: #fff;
  border: 1px solid rgba(16, 0, 62, 0.12); border-radius: 9999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.peptik-cat-search:focus-within { border-color: #10003e; box-shadow: 0 0 0 3px #10003e14; }
.peptik-cat-search__icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* font-size >= 16px A PROPOSITO (el espejo usa 15px/14px): iOS Safari hace
   auto-zoom al enfocar cualquier input con fuente menor a 16px y la pagina
   queda ampliada y desplazable en horizontal ("se mueve la pantalla en el
   celular"). No hay overflow de layout en ninguna pagina (verificado en
   Chrome y WebKit a 375/390px); este input era el unico disparador. */
.peptik-cat-search__input { flex: 1; border: 0; background: transparent; outline: none; padding: 10px 4px; font-size: 16px; line-height: 20px; color: #10003e; min-width: 0; }
.peptik-cat-search__input::placeholder { color: #9b99a5; }
.peptik-cat-search__btn {
  flex: 0 0 auto; border: 0; background: #10003e; color: #fff; padding: 10px 22px;
  border-radius: 9999px; font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  cursor: pointer; transition: background 0.15s ease;
}
.peptik-cat-search__btn:hover { background: #1d0c5a; }
.collection-tabs-wrapper .peptik-cat-search { margin-bottom: 24px; }
.peptik-cat-search-wrap { position: relative; margin-bottom: 24px; }
.peptik-cat-search-wrap .peptik-cat-search { margin-bottom: 0; }

@media (max-width: 768px) {
  .peptik-cat-search { margin: 4px 0 0; padding: 6px 6px 6px 14px; gap: 6px; }
  .peptik-cat-search__input { font-size: 16px; padding: 8px 2px; } /* 16px: ver nota arriba (auto-zoom iOS) */
  .peptik-cat-search__btn { padding: 8px 16px; font-size: 13px; }
  .collection-tabs-wrapper .peptik-cat-search { margin-bottom: 16px; }
  .peptik-cat-search-wrap { margin-bottom: 16px; }
}

/* =========================================== BADGE DE OBJETIVO (esquina
   de la imagen, tipo "FAT LOSS") =========================================== */
/* .peptik-benefit-stickers / .peptik-benefit-sticker — 5a38895651_style.css.
   ADAPTADO: se omite la regla .pk-benefit-ico del espejo (el icono real
   varia por objetivo — llama para "Fat Loss", etc. — y esta plantilla
   sustituye el "goal" de peptik por el format/categoria del catalogo
   uu.life; sin un dato propio de icono por objetivo, se deja solo texto
   para no inventar una asociacion visual falsa). Ancla en position:relative
   de .card-image (ya definido mas arriba en este archivo). */
.peptik-benefit-stickers { position: absolute; top: 12px; right: 12px; left: auto; z-index: 4; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.peptik-benefit-sticker { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1; color: #fff; background: #b08d57; border-radius: 9999px; }
.peptik-benefit-sticker__t { line-height: 1; }
/* Color por categoria de etiqueta (clase puesta por tpl_collection.FORMAT_CAT):
   mismos tonos que la banda del vial en los renders. */
.peptik-benefit-sticker--lean    { background: #5f7d0d; }
.peptik-benefit-sticker--build   { background: #c95e1c; }
.peptik-benefit-sticker--glow    { background: #b3707b; }
.peptik-benefit-sticker--desire  { background: #5a3a54; }
.peptik-benefit-sticker--focus   { background: #3658a8; }
.peptik-benefit-sticker--recover { background: #6a8c86; }

@media (max-width: 749px) {
  /* Tarjeta compacta a 2 columnas: mismo alto en cada fila, sticker chico
     arriba a la izquierda (no pisa la tapa del vial, que va centrada). */
  .collectionmain .product-grid__item .custom-product-card { position: relative; height: 100%; display: flex; flex-direction: column; padding: 8px; border-radius: 14px; }
  /* En movil la tarjeta ya trae 8px de padding y el texto 4px mas: la placa
     usa 4px para quedar alineada con el texto y no mas angosta que el. */
  .card-image { margin: 4px 4px 8px; }
  .card-image { border-radius: 10px; }
  .collectionmain .productinfo { padding: 0 4px 8px; }
  .collectionmain .productinfo h4 { font-size: 15px; line-height: 20px; letter-spacing: 0; font-weight: 600; }
  .collectionmain .productinfo .price { font-size: 16px; line-height: 22px; padding-top: 6px; }
  /* (Los .product-tags ya NO se ocultan en movil: la pasada F1 los muestra en
     una sola linea con overflow oculto — ver el bloque de 2 columnas al final
     de este archivo.) */
  .collectionmain .btmbtns .btn1 { height: 36px; font-size: 12px; }
  /* Con la placa 4:3 (117px de alto a 390px de ancho) el sticker quedaba sobre
     la tapa del vial: se sube y se achica para que termine por encima de ella
     (la foto -wide deja ~19.5% de aire arriba, unos 23px a este tamaNo). */
  .peptik-benefit-stickers { top: 6px; left: 8px; right: auto; align-items: flex-start; max-width: calc(100% - 16px); }
  .peptik-benefit-sticker { padding: 3px 7px; max-width: 100%; }
  .peptik-benefit-sticker__t { font-size: 8.5px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}

/* ==========================================================================
   TARJETA COMPLETA (pasada F1) — bloques portados del CSS VIVO de peptik.co
   --------------------------------------------------------------------------
   FUENTE: https://peptik.co/cdn/shop/t/6/assets/style.css
           (?v=92190248985142922321786818383&cb=20260512-product-polish,
           169.077 bytes, descargado 2026-09-12) — la hoja de tema activa hoy
           en /collections/all-categories. Los valores de abajo estan copiados
           literal de ahi, no aproximados. Lo unico propio son (a) las
           estrellas (peptik las pinta Loox, widget de terceros con JS remoto)
           y (b) los ajustes de 2 columnas en <=749px, que el espejo no tiene
           porque ahi la grilla mobile es de 1 columna.
   ========================================================================== */

/* --- Linea de beneficios y linea de pureza ------------------------------- */
/* En el espejo NO tienen reglas propias: heredan de .productinfo h6 y
   .productinfo p (ambas literales de style.css, copiadas aca). */
.productinfo h6 { margin: 0; font-size: 16px; line-height: 22px; color: var(--darkblue); }
.productinfo p { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--gray800); }
/* .shipfrom existe en el markup del espejo pero va oculto (regla literal). */
.custom-product-card .shipfrom { display: none; }

/* --- Stock bajo (.peptik-lowstock) — literal de style.css ---------------- */
.peptik-lowstock { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #b8860b; }
.peptik-lowstock__dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a82e; }
.custom-product-card .peptik-lowstock { margin: 4px 0 0; font-size: 11px; }

/* --- Pill de entrega (.peptik-card-delivery) — literal de style.css ------ */
.peptik-card-delivery { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #10003e; background: #eef4ff; border-radius: 999px; padding: 7px 14px; margin: 8px 0 2px; line-height: 1; white-space: nowrap; }
.peptik-card-delivery__ic { display: inline-flex; }
.peptik-card-delivery .pkdlv-body,
.peptik-card-delivery .pkdlv-wheel { fill: #e11d2a; }
.peptik-card-delivery .pkdlv-hub { fill: #fff; }
.peptik-card-delivery .pkdlv-lines line { stroke: #e11d2a; stroke-width: 1.6; stroke-linecap: round; }

/* --- Chips de dosis y de pack — literales de style.css ------------------- */
.peptik-card-dose { display: inline-flex; gap: 6px; margin-left: 12px; vertical-align: middle; }
.peptik-card-dose__b {
  border: 1px solid var(--color-border, #e7ecf8);
  background: #fff;
  color: #10003e;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  letter-spacing: normal;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.peptik-card-dose__b:hover:not(.is-active):not(.is-out) { border-color: #10003e; }
.peptik-card-dose__b.is-active { background: #10003e; border-color: #10003e; color: #fff; }
.peptik-card-dose__b.is-out { color: #9aa0af; text-decoration: line-through; cursor: not-allowed; opacity: 0.55; }
.productinfo .price:has(.peptik-card-cycle) { white-space: normal; }
.peptik-card-cycle { display: flex; flex-wrap: wrap; margin-left: 0; margin-top: 10px; }
.peptik-card-cycle .peptik-card-dose__b { text-decoration: none; display: inline-flex; align-items: center; font-size: 17px; padding: 9px 18px; }

/* AGREGADO: con 5 dosis (Retatrutide 10/20/30/40/60 mg) la fila de dosis
   tambien necesita envolver; el espejo nunca pasa de 2 chips y por eso no lo
   contempla. El precio y las filas quedan en columna para que no se corten. */
.productinfo .price:has(.peptik-card-dose) { white-space: normal; }
/* Integrador 2026-09-12: la fila de dosis va en su propia linea debajo del
   precio (inline se pegaba al "€49"). */
.peptik-card-dose[data-peptik-card-dose]:not(.peptik-card-cycle) { display: flex; width: 100%; flex-wrap: wrap; margin-left: 0; margin-top: 10px; }

/* --- Boton "Add to Cart" (.btn2) — literal de style.css ------------------ */
/* ADAPTADO: en el espejo .btn2 es un <button> dentro de un <form> POST a
   /cart/add (endpoint Shopify inexistente aca). Esta plantilla lo emite como
   <a> al PDP para que funcione sin JS, asi que se agregan text-decoration y
   box-sizing que un <button> traia de fabrica. */
.btmbtns .btn2 {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--darkblue);
  border-radius: 40px;
  font-size: 16px;
  color: var(--white);
  height: 42px;
  text-align: center;
  text-decoration: none;
}
.btmbtns .btn2:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.collectionmain .btmbtns .btn2 { font-size: 14px; height: 42px; }
.btn2--sold-out,
.custom-product-card.product-card--sold-out .btn2 { cursor: not-allowed; background: #9b99a5; border-color: #9b99a5; color: #fff; pointer-events: none; }

/* --- Estrellas (.loox-rating) -------------------------------------------
   AGREGADO: peptik renderiza este bloque con Loox (script de terceros). Lo
   unico portable es el color del icono, que el espejo declara inline en la
   propia pagina: `.loox-rating .loox-icon { color:#FDCC0D }` /
   `:root { --lxs-rating-icon-color:#FDCC0D }`. Las estrellas de aca son dos
   capas de texto superpuestas (gris de fondo via ::before, dorada recortada
   por width) para poder pintar medias estrellas sin redondear. */
.uu-rating { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; line-height: 1; }
.uu-rating__stars { position: relative; display: inline-block; font-size: 15px; letter-spacing: 1px; color: #e3e1ea; white-space: nowrap; }
.uu-rating__stars::before { content: "\2605\2605\2605\2605\2605"; }
.uu-rating__on { position: absolute; left: 0; top: 0; overflow: hidden; width: var(--uu-rating, 0%); color: #fdcc0d; }
.uu-rating__count { font-size: 13px; color: var(--gray600); }

/* --- Overlay clicable: los controles nuevos tienen que quedar encima ----
   .product-card__link cubre la tarjeta entera (inset:0, z-index:1). Sin esto
   los chips y el "Add to Cart" no reciben el click. Mismo patron que ya se
   usaba para .btn1. */
.custom-product-card .peptik-card-dose,
.custom-product-card .btmbtns .btn2 { position: relative; z-index: 2; }

/* --- 2 columnas en movil (<=749px) --------------------------------------
   AGREGADO: el espejo pasa a 1 columna en <=749px, asi que no hay CSS que
   copiar. Criterio: tags en UNA linea con overflow oculto (la regla
   flex-wrap:nowrap + overflow:hidden SI es literal del espejo), beneficios a
   2 lineas con line-clamp, chips compactos y botones apilados (esto ultimo ya
   lo hacia el @media 768px literal del espejo). */
@media (max-width: 749px) {
  .custom-product-card .product-tags { display: flex; flex-wrap: nowrap; overflow: hidden; margin-bottom: 6px; gap: 4px; }
  .custom-product-card .product-tags span { font-size: 9.5px; padding: 2px 6px; border-radius: 3px; }
  /* El corte de la fila de tags a una linea se degrada con un fade en vez de
     partir un pill al medio (el espejo usa JS para esto: encoge la tipografia
     y colapsa el sobrante en un "+N"; aca se resuelve con CSS puro). */
  .custom-product-card .product-tags {
    -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
    mask-image: linear-gradient(to right, #000 84%, transparent 100%);
  }

  .uu-rating { margin: 4px 0 2px; gap: 4px; }
  .uu-rating__stars { font-size: 12px; letter-spacing: 0.5px; }
  .uu-rating__count { font-size: 11px; }

  .collectionmain .productinfo h6.product-includes {
    font-size: 11px;
    line-height: 15px;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .collectionmain .productinfo p.product-quality {
    font-size: 10px;
    line-height: 14px;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /* La pill de entrega puede pasar a 2 lineas en una tarjeta de ~150px de
     ancho util: preferible a cortarla con puntos suspensivos (las
     traducciones son mas largas que el ingles). El radio baja de 999px a
     10px porque un pill de dos lineas con radio completo queda deforme. */
  .peptik-card-delivery {
    font-size: 10px;
    padding: 5px 9px;
    gap: 5px;
    margin: 6px 0 0;
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
    border-radius: 10px;
    align-items: flex-start;
  }
  .peptik-card-delivery__ic { margin-top: 1px; }

  .peptik-card-dose { gap: 4px; margin-top: 6px; }
  .peptik-card-dose__b { font-size: 11px; padding: 5px 9px; }
  .peptik-card-cycle { margin-top: 6px; }
  .peptik-card-cycle .peptik-card-dose__b { font-size: 11px; padding: 5px 9px; }

  .price__compare { font-size: 13px; line-height: 18px; margin-bottom: 2px; }
  .peptik-lowstock { font-size: 10px; gap: 5px; }
  .peptik-lowstock__dot { width: 6px; height: 6px; }

  .collectionmain .btmbtns { flex-direction: column; gap: 6px; padding-top: 10px !important; }
  .collectionmain .btmbtns .btn2 { height: 36px; font-size: 12px; }
}

/* Telefonos angostos (<=390px): la tipografia baja un escalon mas para que
   una tarjeta de ~170px de ancho no fuerce scroll horizontal. */
@media (max-width: 390px) {
  .collectionmain .productinfo h4 { font-size: 14px; line-height: 18px; }
  .peptik-card-dose__b,
  .peptik-card-cycle .peptik-card-dose__b { font-size: 10px; padding: 4px 7px; }
  .peptik-card-delivery { font-size: 9.5px; padding: 4px 8px; }
  .custom-product-card .product-tags span { font-size: 9px; padding: 2px 5px; }
}