/*
 * pdp-peptik.css - Tema visual para el layout de tpl_pdp.py (build/tpl_pdp.py).
 *
 * FUENTES (extraccion literal, ver build/NOTES-pdp.md para el detalle regla
 * por regla de que vino de donde y que se adapto):
 *   - peptik-clone/site/assets/5a38895651_style.css   ("style.css", tema
 *     Peptik custom: paleta :root, .peptik-dosage-panel, product-tags,
 *     mobile_breadcrumb, y el bloque ".productmain" que es el CSS REAL de
 *     produccion para el layout del PDP -- ver seccion 2).
 *   - peptik-clone/site/assets/d700863ca4_base.css   (Dawn base: sizing de
 *     .product-media-container / .dialog-thumbnails-list-container).
 *   - <style> inline de peptik-clone/site/products/ss-31-10mg/index.html
 *     (recorte de imagen vial en movil, ratio de --media-preview-ratio,
 *     ocultar .product-description, fix de padding r2 del dosage panel).
 *
 * REGLA CRITICA respetada: cada regla que en el espejo vive dentro de un
 * @media queda envuelta en el MISMO @media aqui (nunca suelta).
 *
 * ADAPTACION DE RAIZ: el espejo real usa la clase `.productmain` como
 * wrapper de pagina completa; nuestro render_pdp() no genera esa clase (el
 * <section> raiz que genera tpl_pdp.py lleva la clase `.pdp-peptik`, ver
 * linea "product-information section section--page-width pdp-peptik").
 * Por eso el bloque 2 (layout real 2 columnas + tipografia + breakpoints)
 * esta remapeado `.productmain` -> `.pdp-peptik`: los VALORES (px, colores,
 * breakpoints) son 100% verbatim del espejo, solo cambia el selector
 * ancestro para que aplique a nuestro marcado. Documentado con detalle en
 * NOTES-pdp.md.
 *
 * ASSET REQUERIDO (falta copiar, ver NOTES-pdp.md):
 *   /assets/bb02c925a7_br-icon.svg  (flecha del breadcrumb movil)
 * Los iconos del dosage panel (_DOSAGE_ICONS de tpl_pdp.py) YA estan en
 * public/assets-reta/ -- no requieren copia.
 */

/* ================================================================
   1. Tokens de marca Peptik (verbatim del :root real del espejo,
      solo el subconjunto que usan las reglas de abajo).
   ================================================================ */
:root {
  --lightblue: #CBE1FC;
  --blue: #0535A8;
  --darkblue: #10003E;
  --text: #686677;
  --darktext: #04001D;
  --blue100: #CBE1FC;
  --blue200: #99C2F9;
  --gray800: #36334A;
  --gray500: #81808E;
  --gray600: #686677;
  --white: #ffffff;
}

/* ================================================================
   2. Layout real del PDP (remapeado .productmain -> .pdp-peptik).
      Grilla 2 columnas flex 50/50 desktop, colapso a 1 columna en
      mobile, tipografia del h1, precio/CTA, breadcrumb. Verbatim en
      valores; unico cambio es el selector ancestro (ver cabecera).
   ================================================================ */
.pdp-peptik .variant-option--buttons,
.pdp-peptik .variant-option--buttons.variant-option--equal-width-buttons {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  grid-template-columns: none !important;
  width: auto;
  max-width: none;
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.pdp-peptik .variant-option--buttons legend {
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: #10003e;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.pdp-peptik .variant-option__button-label {
  flex: 0 0 200px;
  box-sizing: border-box;
  width: 200px;
  min-width: 0 !important;
  height: 52px;
  min-height: 52px !important;
  padding: 0 16px;
  border: 1px solid #cbe1fc !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #10003e;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -.3px;
  cursor: pointer;
  transition: background .15s, border-color .15s, font-weight .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.pdp-peptik .variant-option__button-label:hover {
  border-color: #99c2f9 !important;
}
/* Espejo real usa :has(input:checked) porque su marcado es <label><input
   type=radio>. Nuestro render_pdp() usa <button aria-pressed="..."> (hook
   que exige el JS de src/js/app.js), asi que adaptamos el DISPARADOR del
   selector a [aria-pressed="true"] -- los colores son verbatim. */
.pdp-peptik .variant-option__button-label[aria-pressed="true"] {
  background: #cbe1fc !important;
  border-color: #99c2f9 !important;
  color: #10003e;
  font-weight: 500;
}
.pdp-peptik .product-information {
  width: 100%;
  display: block;
}
.pdp-peptik .product-information__grid {
  display: flex;
  justify-content: space-between;
}
.pdp-peptik .product-information__media {
  width: calc(50% - 16px);
  max-width: 608px;
  min-width: auto !important;
  padding: 0 !important;
}
.pdp-peptik .product-details {
  width: calc(50% - 16px);
  max-width: 608px;
  padding: 0 !important;
  flex-direction: column;
}
.pdp-peptik .product-details h1 {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -3px;
  font-weight: 500;
  color: var(--darkblue);
}
.pdp-peptik .product-title[data-peptik-product-title] {
  min-height: 88px;
}
.pdp-peptik .product-title[data-peptik-product-title] {
  min-height: var(--peptik-title-mh, 132px);
  margin-bottom: var(--peptik-title-mb, -8px);
}
.pdp-peptik .variant-picker {
  margin-top: -8px;
}
/* El espejo real OCULTA .product-description en el PDP (ver
   #peptik-critical-cache-bust-20260512-product-polish en el inline de
   ss-31-10mg). Replicamos ese comportamiento tal cual para fidelidad de
   layout -- documentado como hallazgo importante en NOTES-pdp.md. Si el
   negocio quiere mostrar el copy del catalogo, comentar esta regla. */
.pdp-peptik .product-description {
  display: none !important;
}
.pdp-peptik .product-description p {
  margin: 0 0 12px;
  color: var(--gray800);
  font-size: 16px;
  line-height: 24px;
}
.pdp-peptik .product-description p:last-child {
  margin-bottom: 0;
}
.pdp-peptik .add-to-cart-button {
  border-radius: 50px;
  background: var(--darkblue);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}
.pdp-peptik .add-to-cart-button:hover {
  background: var(--blue);
  color: #fff;
}
@media (max-width: 979px) {
  .pdp-peptik .product-information__grid {
    flex-wrap: wrap;
  }
  .pdp-peptik .product-information__media {
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .pdp-peptik .product-information__media img.product-media__image2 {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .pdp-peptik .product-details {
    width: 100%;
    padding: 24px 0 0;
  }
  .pdp-peptik .product-details h1 {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -.5px;
  }
  .pdp-peptik .product-title[data-peptik-product-title] {
    min-height: auto;
    margin-bottom: 4px;
  }
  .pdp-peptik .add-to-cart-button {
    font-size: 15px;
    line-height: 20px;
  }
  .pdp-peptik .quantity-selector {
    flex-shrink: initial;
  }
  .pdp-peptik .variant-option__button-label {
    min-height: 42px !important;
    border-radius: 4px !important;
  }
  .pdp-peptik .variant-option--equal-width-buttons {
    --variant-min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .pdp-peptik .variant-option__button-label[aria-pressed="true"] {
    background: #cbe1fc !important;
    border-color: #99c2f9 !important;
    color: #10003e !important;
  }
}
@media (max-width: 768px) {
  .pdp-peptik .variant-option--buttons,
  .pdp-peptik .variant-option--buttons.variant-option--equal-width-buttons {
    gap: 15px;
    max-width: 100%;
  }
  .pdp-peptik .variant-option--buttons legend {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 24px;
  }
  .pdp-peptik .variant-option__button-label {
    flex: 1 1 0;
    width: auto;
    height: 42px;
    min-height: 42px !important;
    font-size: 16px;
    line-height: 22px;
    padding: 0 12px;
  }
  .pdp-peptik .mobile_breadcrumb {
    position: static !important;
    padding: 0 16px 16px !important;
    margin: 0 !important;
  }
  .pdp-peptik .product-information__grid > .product-information__media {
    margin-top: 8px !important;
  }
}
@media (max-width: 749px) {
  .pdp-peptik .variant-option__button-label {
    min-height: 42px !important;
    border-radius: 4px !important;
  }
  .pdp-peptik .product-information {
    padding-top: 4px;
  }
}

/* ================================================================
   3. Galeria -- sizing del contenedor de imagen principal. Verbatim
      de base.css (chain --constrained-height / --media-preview-ratio)
      + el <style data-shopify> inline de ss-31-10mg. Selector base
      ":not(.dialog-zoomed-gallery)>.product-media-container" es
      universal en el espejo (no requiere remap: nuestro marcado nunca
      tiene la clase .dialog-zoomed-gallery).
   ================================================================ */
:not(.dialog-zoomed-gallery) > .product-media-container {
  --slide-width: 100%;
  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: var(--slide-width, 100%);
  position: relative;
  overflow: hidden;
}
:not(.dialog-zoomed-gallery) > .product-media-container:where(.constrain-height) {
  --viewport-offset: 400px;
  --constrained-min-height: 300px;
  --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
  margin-right: auto;
  margin-left: auto;
}
.product-media-container {
  --media-preview-ratio: square;
}
.product-media-container.constrain-height:has(.product-media-constraint-wrapper) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-media-constraint-wrapper {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}
.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}
/* .media-fit-cover no existe en el espejo (nombre de clase inventado por
   el agente anterior). Escribimos un override minimo, coherente con lo
   que su nombre implica, con mayor especificidad que la regla generica
   de arriba (que pone object-fit:contain). */
.product-media-container.media-fit-cover img {
  object-fit: cover;
}
.product-media-container--image .product-media {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.product-media {
  display: flex;
  flex: 1;
}
@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }
}
@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}
/* Galeria de la plantilla propia con los renders 4:5 (1600x2000): placa
   cuadrada en desktop y 4:5 en movil, fondo = fondo del render (#f0ece6),
   la foto entra entera (cover sobre un recorte que ya trae aire). Reemplaza
   la regla anterior que forzaba 1584/900 + cover y cortaba el vial. */
.pdp-peptik__gallery .product-media-container {
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  background: #f0ece6;
  border-radius: 18px;
  overflow: hidden;
}
.pdp-peptik__gallery .product-media-constraint-wrapper,
.pdp-peptik__gallery .product-media { aspect-ratio: 1 / 1 !important; height: auto !important; }
.pdp-peptik__gallery .product-media__image2 {
  object-fit: cover !important;
  object-position: center 45% !important;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 768px) {
  .pdp-peptik__gallery .product-media-container,
  .pdp-peptik__gallery .product-media-constraint-wrapper,
  .pdp-peptik__gallery .product-media { aspect-ratio: 4 / 5 !important; }
  .pdp-peptik__gallery .product-media-container { border-radius: 14px; }
}

/* ================================================================
   4. Miniaturas (thumbs). IMPORTANTE: el agente anterior le puso a
      este wrapper la clase real `.dialog-thumbnails-list-container`,
      pero en el espejo esa clase es la barra FIJA del lightbox de
      zoom (position:fixed; bottom:0) -- no la tira de miniaturas
      inline del PDP normal. Aplicarla verbatim rompe el layout
      (overlay pegado abajo de toda la pantalla). Por eso NO se porta
      esa regla; en su lugar escribimos CSS original para el segundo
      namespace que ya trae el div (`.pdp-peptik__thumbs`) y neutralizamos
      cualquier position:fixed heredado por las dudas.
   ================================================================ */
.pdp-peptik__thumbs.dialog-thumbnails-list-container {
  position: static;
  width: auto;
  bottom: auto;
  z-index: auto;
}
.pdp-peptik__thumbs {
  margin-top: 12px;
}
.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gallery__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--blue100);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.gallery__thumb[aria-current="true"] {
  border-color: var(--blue);
  border-width: 2px;
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 749px) {
  .gallery__thumb {
    width: 52px;
    height: 52px;
  }
}

/* ================================================================
   5. Dosage panel (peptik-dosage-panel / peptik-dosage-cell).
      100% verbatim del espejo -- las clases y hasta los atributos
      [data-slot]/[data-mode]/[data-fmt] son identicos a los que emite
      tpl_pdp.py (_dosage_panel()), no hizo falta adaptar nada. El
      archivo trae DOS capas historicas (una vieja con selector
      generico "article" + otra nueva ".peptik-dosage-panel article.
      peptik-dosage-cell" de mayor especificidad): se incluyen ambas
      tal cual, la cascada real ya resuelve cual gana (igual que en
      produccion).
   ================================================================ */
.peptik-dosage-panel__grid > article {
  min-height: 78px;
}
.peptik-dosage-panel {
  width: 100%;
  margin: 0 0 24px;
  padding: 24px;
  background: #f3f6fc;
  color: var(--darkblue);
}
.peptik-dosage-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.peptik-dosage-panel article {
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid #99c2f9;
  border-radius: 4px;
  background: #fff;
}
.peptik-dosage-panel span {
  display: block;
  color: #36334a;
  font-size: 11px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: .2px;
  font-weight: 400;
}
.peptik-dosage-panel small {
  display: block;
  color: #686677;
  font-size: 11px;
  line-height: 14px;
}
.peptik-dosage-panel strong {
  display: block;
  margin: 3px 0 1px;
  color: #04001d;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
.peptik-dosage-panel__note {
  margin: 10px 0 0;
  color: #686677;
  font-size: 12px;
  line-height: 16px;
}
.peptik-dosage-panel.peptik-dosage-panel {
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  background: transparent;
  color: var(--darkblue, #10003E);
}
.peptik-dosage-panel .peptik-dosage-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #cbe1fc;
  border: 1px solid #CBE1FC;
  border-radius: 8px;
  overflow: hidden;
  gap: 1px;
}
.peptik-dosage-panel article.peptik-dosage-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #f3f6fc;
  border: 0;
  border-radius: 0;
  min-height: 96px;
  box-sizing: border-box;
}
.peptik-dosage-cell__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 54px;
  object-fit: contain;
  display: block;
}
.peptik-dosage-cell__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.peptik-dosage-panel .peptik-dosage-cell .peptik-dosage-cell__label {
  display: block;
  margin: 0;
  color: var(--darkblue, #10003E);
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -.2px;
  text-transform: none !important;
}
.peptik-dosage-panel .peptik-dosage-cell .peptik-dosage-cell__value,
.peptik-dosage-panel .peptik-dosage-cell .peptik-dosage-cell__sub {
  display: block;
  margin: 0;
  color: #686677;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none !important;
  white-space: pre-line;
}
.peptik-dosage-panel .peptik-dosage-panel__note {
  margin: 14px 0 0;
  color: #36334a;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r2c1"] .peptik-dosage-cell__value {
  font-weight: 600;
  color: var(--darkblue, #10003E);
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r1c1"] .peptik-dosage-cell__value {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--darkblue, #10003E);
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r3c1"] .peptik-dosage-cell__value {
  white-space: normal;
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r1c1"] {
  grid-row: 1;
  grid-column: 1;
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r1c2"] {
  grid-row: 1;
  grid-column: 2;
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r2c1"] {
  grid-row: 2;
  grid-column: 1;
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r2c2"] {
  grid-row: 2;
  grid-column: 2;
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r3c1"] {
  grid-row: 3;
  grid-column: 1;
}
.peptik-dosage-panel .peptik-dosage-cell[data-slot="r3c2"] {
  grid-row: 3;
  grid-column: 2;
}
/* Formato spray solo llena 5 de las 6 celdas (ver pdp_specs.json): si un
   modo distinto al del panel se cuela en el marcado, se oculta. */
.peptik-dosage-panel[data-fmt="pen"] .peptik-dosage-cell[data-mode="vial"],
.peptik-dosage-panel[data-fmt="pen"] .peptik-dosage-cell[data-mode="spray"],
.peptik-dosage-panel[data-fmt="vial"] .peptik-dosage-cell[data-mode="pen"],
.peptik-dosage-panel[data-fmt="vial"] .peptik-dosage-cell[data-mode="spray"],
.peptik-dosage-panel[data-fmt="spray"] .peptik-dosage-cell[data-mode="pen"],
.peptik-dosage-panel[data-fmt="spray"] .peptik-dosage-cell[data-mode="vial"] {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 768px) {
  .peptik-dosage-panel {
    padding: 16px 14px;
    margin: 0 0 16px;
  }
  .peptik-dosage-panel__grid {
    gap: 6px;
  }
  .peptik-dosage-panel article {
    padding: 8px 10px;
  }
  .peptik-dosage-panel span {
    font-size: 9px;
    line-height: 12px;
  }
  .peptik-dosage-panel strong {
    font-size: 13px;
    line-height: 16px;
    margin: 2px 0 0;
  }
  .peptik-dosage-panel small {
    font-size: 10px;
    line-height: 12px;
  }
  .peptik-dosage-panel__note {
    font-size: 10px;
    line-height: 14px;
    margin-top: 8px;
  }
  .peptik-dosage-panel.peptik-dosage-panel {
    margin: 0 0 16px;
  }
  .peptik-dosage-panel .peptik-dosage-panel__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }
  .peptik-dosage-panel article.peptik-dosage-cell {
    padding: 14px 12px;
    gap: 10px;
    min-height: 72px;
  }
  .peptik-dosage-cell__icon {
    width: 28px;
    height: 36px;
  }
  .peptik-dosage-panel .peptik-dosage-cell .peptik-dosage-cell__label {
    font-size: 13px;
    line-height: 16px;
  }
  .peptik-dosage-panel .peptik-dosage-cell .peptik-dosage-cell__value,
  .peptik-dosage-panel .peptik-dosage-cell .peptik-dosage-cell__sub {
    font-size: 10.5px;
    line-height: 14px;
  }
  .peptik-dosage-panel .peptik-dosage-cell[data-slot="r1c1"] .peptik-dosage-cell__value {
    font-size: 12.5px;
    line-height: 16px;
  }
  .peptik-dosage-panel .peptik-dosage-panel__note {
    font-size: 11px;
    line-height: 15px;
  }
  /* Big Cheese 2026-07-19: reduce el padding vertical de la fila del
     medio (Reconstitution + Vials required). */
  .peptik-dosage-panel .peptik-dosage-cell[data-slot="r2c1"],
  .peptik-dosage-panel .peptik-dosage-cell[data-slot="r2c2"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }
}
@media (min-width: 769px) {
  /* Big Cheese 2026-07-20: mismo fix tambien en desktop. */
  .peptik-dosage-panel .peptik-dosage-cell[data-slot="r2c1"],
  .peptik-dosage-panel .peptik-dosage-cell[data-slot="r2c2"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }
}

/* ================================================================
   6. Tags, titulo, precio. Verbatim salvo pdp-peptik__price (original,
      ver nota abajo).
   ================================================================ */
.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;
}
.product-title .peptik-title-compound {
  display: block;
  font-size: 19px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -.2px;
  color: #686677;
  margin-top: 8px;
}
@media (max-width: 749px) {
  .product-title .peptik-title-compound {
    font-size: 16px;
    line-height: 22px;
    margin-top: 6px;
  }
}
.price {
  white-space: nowrap;
}
/* El espejo real muestra el precio DENTRO del boton (clase .btn-price,
   con soporte de precio tachado) o en la barra sticky mobile -- no hay
   un elemento de precio standalone equivalente a nuestro
   <p id="pdpPrice" class="pdp-peptik__price price">. Regla original,
   con la paleta real (var(--darkblue)) y una escala consistente con el
   resto de la ficha (entre el h1 de 40px y el label de 18px del dosage
   panel). */
.pdp-peptik__price {
  margin: 4px 0 16px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  color: var(--darkblue);
}

/* ================================================================
   7. Contenedor de pagina (verbatim).
   ================================================================ */
.container {
  max-width: 1248px;
  margin: 0 auto;
}
@media (max-width: 1270px) {
  .container {
    padding: 0 16px;
  }
}

/* ================================================================
   8. Breadcrumb movil (verbatim; oculto en desktop, overlay absoluto
      en <749px salvo por el override de la seccion 2 que lo vuelve
      estatico dentro de .pdp-peptik).
   ================================================================ */
.mobile_breadcrumb {
  display: none;
}
@media (max-width: 749px) {
  .mobile_breadcrumb {
    z-index: 1 !important;
    display: flex;
    position: absolute;
    top: 12px;
    z-index: 11;
    left: 0;
    width: 100%;
  }
  .mobile_breadcrumb ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  .mobile_breadcrumb ul li {
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 15px;
    line-height: 20px;
    color: var(--gray800);
  }
  .mobile_breadcrumb ul li a {
    color: var(--blue);
    font-weight: 500;
  }
  /* Requiere /assets/bb02c925a7_br-icon.svg -- copiar desde
     peptik-clone/site/assets/ a public/assets-reta/, ver NOTES-pdp.md. */
  .mobile_breadcrumb ul li a:after {
    content: "";
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    background: url(/assets/bb02c925a7_br-icon.svg) no-repeat;
    background-size: 100%;
    display: inline-block;
    margin: 0 8px;
  }
}

/* ================================================================
   9. Resets minimos originales (sin equivalente resoluble en el
      espejo: sus reglas Dawn dependen de custom properties de tema
      --font-paragraph--family / --icon-size-xs / etc. que no estan
      definidas en ningun archivo estatico del espejo -- se inyectan
      por Liquid en <head> y no forman parte de esta extraccion, asi
      que no se inventan valores para ellas).
   ================================================================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.button-unstyled {
  display: block;
  padding: 0;
  background-color: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
}
.svg-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* El SVG del carrito del espejo viene SIN atributos width/height: lo dimensiona
   el tema con --icon-size-sm. Esa variable NO esta definida en nuestro build,
   y src/styles/cart-peptik.css (que se carga DESPUES de este archivo) trae
   `.svg-wrapper{width:var(--icon-size-sm)}` + `.svg-wrapper>svg{...}` -> la
   declaracion queda invalida y el icono colapsa a 0x0. Se le da el valor real
   que esa variable tiene en el <head> de la ficha espejada (1.25rem), con
   especificidad (0,2,0)/(0,2,1) para ganarle a cart-peptik.css sin
   !important y SOLO para este icono (no se toca el token global). */
.sticky-add-to-cart .add-to-cart-icon,
.sticky-add-to-cart .add-to-cart-icon > svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

/* ================================================================
   10. Buy box: variantes, cantidad, CTA. Verbatim donde el espejo da
       valores literales resolubles; el resto (10.b) es un layout
       minimo original ya que las reglas Dawn equivalentes dependen de
       custom properties de tema no definidas en el espejo estatico
       (--gap-sm, --height-buy-buttons, --style-border-radius-*).
   ================================================================ */
.variant-picker {
  width: 100%;
}
.product-form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.buy-buttons-block {
  --buy-button-preferred-width: 185px;
  width: 100%;
}
.add-to-cart-text__label {
  margin-right: 10px;
}
/* 10.b -- layout original del stepper de cantidad (sin equivalente
   resoluble en el espejo; border-color reutiliza var(--blue100), el
   mismo token que usa el espejo para bordes de variant-option). */
.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  border: 1px solid var(--blue100);
  border-radius: 50px;
  overflow: hidden;
  flex: 0 0 auto;
}
.quantity-selector .quantity-minus,
.quantity-selector .quantity-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--darkblue);
  font-size: 18px;
}
#qty {
  width: 40px;
  text-align: center;
  border: 0;
  background: transparent;
  color: var(--darkblue);
  font-size: 16px;
  -moz-appearance: textfield;
}
#qty::-webkit-inner-spin-button,
#qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-selector-wrapper {
  display: flex;
  align-items: center;
}
.pdp-peptik__cta-row {
  display: flex;
  flex: 1 1 auto;
}
.add-to-cart-button {
  width: 100%;
  height: 52px;
  border: 0;
  cursor: pointer;
}
.add-to-cart-button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.add-to-cart-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ================================================================
   11. Bloques nuevos de la ficha completa (clon 1:1 de la ficha
       espejada, dist/product/epithalon/index.html).

       FUENTE de todas las reglas de las secciones 11 a 18:
         dist/assets/5d3eaa2605_style.css   (el style.css que cargan
         las fichas espejadas -- mismas reglas que
         peptik-clone/site/assets/5a38895651_style.css)
         extraidas con brace-matching, conservando su @media original.
       Lo unico adaptado va marcado "ADAPTADO" con el motivo.
   ================================================================ */

/* 11.a Estrellas de resenas.
   ADAPTADO (marcado propio): el espejo solo trae el hueco vacio del
   widget de Loox (div.loox-rating.peptik-pdp-rating, que ademas
   build/pdp_copy.py borra de las fichas espejadas), asi que no hay CSS
   que extraer. Se reusa la escala tipografica del resto de la columna y
   el "★" que ya usa build/build.py en las tarjetas de resena. */
.peptik-pdp-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 14px;
  line-height: 22px;
  color: var(--gray600);
}
.peptik-pdp-rating__stars {
  letter-spacing: 1px;
  font-size: 15px;
  line-height: 1;
}
.peptik-pdp-rating__on {
  color: #e0a82e;
}
.peptik-pdp-rating__off {
  color: var(--blue100);
}

/* 11.b Low stock (verbatim). */
.peptik-lowstock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #b8860b;
}
.peptik-lowstock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0a82e;
  box-shadow: 0 0 #e0a82e99;
  animation: peptik-ls-pulse 1.7s ease-out infinite;
}
@keyframes peptik-ls-pulse {
  0% { box-shadow: 0 0 #e0a82e8c; }
  70% { box-shadow: 0 0 0 7px #e0a82e00; }
  to { box-shadow: 0 0 #e0a82e00; }
}

/* ================================================================
   12. Linea de beneficios (h6.product-includes) -- verbatim, incluido
       su @media(max-width:979px). Selector ancestro remapeado
       .productmain -> .pdp-peptik (misma adaptacion de la seccion 2).
   ================================================================ */
.pdp-peptik .product-includes {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  color: var(--darkblue);
}
@media (max-width: 979px) {
  .pdp-peptik .product-includes {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ================================================================
   13. "Co-developed with 600+ researchers" (p.trustedby + avatares)
       -- verbatim.
   ================================================================ */
.pdp-peptik .trustedby {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--gray600);
}
@media (max-width: 749px) {
  .pdp-peptik .trustedby {
    font-size: 15px;
    line-height: 22px;
  }
}
.peptik-researcher-avatars {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 10px;
}
.peptik-researcher-avatars__face {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #10003e0f;
  object-fit: cover;
  display: inline-block;
  flex: 0 0 auto;
  background: #fff;
}
.peptik-researcher-avatars__face + .peptik-researcher-avatars__face {
  margin-left: -9px;
}

/* ================================================================
   14. Bullets de confianza (ul.hero-features) -- verbatim, con sus
       cuatro @media originales (1270 / 979 / 768 / 749).
   ================================================================ */
.hero-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.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;
}
.pdp-peptik .hero-features {
  margin: 8px 0 0;
}
@media (max-width: 1270px) {
  .hero-features li {
    font-size: 15px;
    line-height: 22px;
  }
}
@media (max-width: 979px) {
  .pdp-peptik .hero-features li:nth-child(n+8) {
    display: none;
  }
}
@media (max-width: 749px) {
  .hero-features li {
    color: var(--gray800);
    width: auto;
  }
  .hero-features li img {
    max-width: 21px;
  }
  .pdp-peptik .hero-features li {
    color: var(--gray600);
  }
}
/* La pildora de envio: oculta en desktop, visible <=768px (verbatim,
   con los !important del espejo -- ahi tienen que ganarle a la regla
   generica de .hero-features li de arriba). */
.peptik-shipping-pill {
  display: none !important;
}
@media (max-width: 768px) {
  .peptik-shipping-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 6px 0 !important;
    padding: 10px 16px !important;
    background: #eef1f8 !important;
    border: 1px solid rgba(16, 0, 62, .06) !important;
    border-radius: 9999px !important;
    color: #10003e !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    width: auto !important;
    align-self: flex-start;
  }
  .peptik-shipping-pill__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00b074;
    box-shadow: 0 0 0 4px #00b0742e;
    flex: 0 0 9px;
    animation: peptik-pulse 1.8s ease-out infinite;
  }
  .peptik-shipping-pill__text {
    display: inline-block;
  }
  .peptik-feat-hide-mobile {
    display: none !important;
  }
}
@keyframes peptik-pulse {
  0% { box-shadow: 0 0 #00b07473; }
  70% { box-shadow: 0 0 0 8px #00b07400; }
  to { box-shadow: 0 0 #00b07400; }
}

/* ================================================================
   15. Lineas de cierre bajo el CTA (.addto-bottom) -- verbatim.
       ADAPTADO: en el espejo .desktoponly/.mobileonly son utilidades
       GLOBALES; aca quedan acotadas a .addto-bottom para no pisar
       nada del resto del sitio (que no define esas clases).
   ================================================================ */
.addto-bottom {
  width: 100%;
}
.addto-bottom p {
  font-size: 14px;
  line-height: 22px;
  color: var(--gray600);
  margin: 8px 0 0;
}
.addto-bottom.mobileonly {
  display: none !important;
}
@media (max-width: 749px) {
  .addto-bottom.desktoponly {
    display: none !important;
  }
  .addto-bottom.mobileonly {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .addto-bottom p {
    color: var(--gray600);
    font-size: 14px;
    line-height: 20px;
    display: flex;
    gap: 8px;
    margin: 4px 0 0;
  }
  .addto-bottom p img {
    display: block;
    width: 20px;
  }
}

/* ================================================================
   16. Precio dentro del boton (.btn-price) -- verbatim.
   ================================================================ */
.btn-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-price__sep {
  opacity: .55;
  padding: 0 4px;
}
.btn-price s.btn-price__compare {
  opacity: .65;
  margin-right: 6px;
  text-decoration: line-through;
}
.btn-price .btn-price__current {
  font-weight: 600;
}

/* ================================================================
   17. Chips de pack (fieldset.peptik-pdp-cycle) -- verbatim.
       ADAPTADO: el espejo solo tiene chips <a> (navegan a otro
       producto) y el activo es un <span>; los nuestros de tipo
       "single"/"pack" son <button> porque cambian la cantidad en la
       misma pagina, asi que el :hover de "a.peptik-pdp-cycle__b" se
       replica para "button.peptik-pdp-cycle__b" (mismos valores).
   ================================================================ */
.peptik-pdp-cycle {
  border: 0;
  padding: 0;
  margin: 18px 0 26px;
}
.peptik-pdp-cycle legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--darkblue);
  margin-bottom: 8px;
  padding: 0;
}
.peptik-pdp-cycle__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.peptik-pdp-cycle__b {
  flex: 1 1 0;
  min-width: 120px;
  min-height: 42px;
  border-radius: 4px;
  border: 1px solid #E7ECF8;
  background: #fff;
  color: var(--darkblue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-decoration: none;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
a.peptik-pdp-cycle__b:hover,
button.peptik-pdp-cycle__b:hover {
  border-color: var(--darkblue);
}
.peptik-pdp-cycle__b.is-active {
  background: var(--darkblue);
  border-color: var(--darkblue);
  color: #fff;
  cursor: default;
}
@media (max-width: 749px) {
  .peptik-pdp-cycle__b {
    font-size: 14px;
    min-width: 110px;
  }
}

/* ================================================================
   18. Pestanas Certificate / Info / How to use / Storage / Shipping
       (section.peptik-product-inner) -- verbatim, con sus @media
       originales (979 y 768). Se omitieron las reglas del espejo que
       nuestro marcado no usa (paneles --faq, planchas peptik-howto,
       heros pen/vial, dual) para no dejar CSS muerto.
       NOTA: --figma-ink no esta definida en ningun archivo estatico
       del espejo (la inyecta el tema por Liquid); se le da el valor
       del titulo de producto del propio espejo (#10003e = --darkblue)
       como fallback dentro de var(), sin tocar el token global.
   ================================================================ */
.peptik-product-inner {
  background: #fff;
  padding: 0 0 96px;
}
.peptik-product-inner h2 {
  margin: 0 0 16px;
  color: var(--figma-ink, var(--darkblue));
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -1.5px;
}
.peptik-product-inner p,
.peptik-product-inner li {
  color: var(--gray800);
  font-size: 16px;
  line-height: 24px;
}
.peptik-product-inner__tabs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  column-gap: 48px;
  row-gap: 8px;
  margin-bottom: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--blue100);
}
.peptik-product-inner__tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 14px 8px;
  color: var(--gray500);
  font-family: Lato, sans-serif;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -1px;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.peptik-product-inner__tab:hover {
  color: var(--figma-ink, var(--darkblue));
}
.peptik-product-inner__tab.is-active {
  color: var(--figma-ink, var(--darkblue));
  font-weight: 500;
  border-bottom-color: var(--figma-ink, var(--darkblue));
}
.peptik-product-inner__panels {
  position: relative;
}
.peptik-product-inner__panel {
  display: none !important;
  padding: 48px 64px;
  background: #f3f6fc;
  border: 0;
  border-radius: 12px;
}
.peptik-product-inner__panel.is-active {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 64px;
}
.peptik-product-inner__panel:has(.peptik-product-inner__panel-body--full) {
  grid-template-columns: 1fr !important;
}
.peptik-product-inner__panel-body {
  min-width: 0;
}
.peptik-product-inner__panel-media {
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #dbe6f7, #a9c7ee);
  align-self: stretch;
  background-size: cover;
  background-position: center;
}
.peptik-product-inner__panel h2 {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -1.5px;
  color: var(--figma-ink, var(--darkblue));
  margin: 0 0 24px;
  font-weight: 400;
}
.peptik-product-inner__panel h3 {
  font-size: 20px;
  line-height: 28px;
  color: var(--figma-ink, var(--darkblue));
  margin: 24px 0 12px;
  font-weight: 500;
}
.peptik-product-inner__panel p {
  color: var(--gray800);
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 12px;
}
.peptik-product-inner__panel ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.peptik-product-inner__panel ul li {
  color: var(--gray800);
  font-size: 16px;
  line-height: 26px;
  margin: 4px 0;
}
.peptik-coa__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 22px;
  background: #10003e;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  transition: background .2s ease;
}
.peptik-coa__open:hover {
  background: #1d0c5a;
}
@media (max-width: 979px) {
  .peptik-product-inner {
    padding: 0 0 64px;
  }
  .peptik-product-inner__tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
}
@media (max-width: 768px) {
  .peptik-product-inner {
    padding: 0 0 48px;
  }
  .peptik-product-inner__tabs {
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 0 16px 8px;
    margin-bottom: 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--blue100);
  }
  .peptik-product-inner__tabs::-webkit-scrollbar {
    display: none;
  }
  .peptik-product-inner__tab {
    flex: 0 0 auto;
    padding: 8px 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -.5px;
  }
  .peptik-product-inner__panels {
    padding: 0 16px;
  }
  .peptik-product-inner__panel {
    padding: 24px 16px;
    border-radius: 8px;
  }
  .peptik-product-inner__panel.is-active {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .peptik-product-inner__panel h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1px;
    margin: 0 0 16px;
  }
  .peptik-product-inner__panel h3 {
    font-size: 17px;
    line-height: 24px;
    margin: 16px 0 8px;
  }
  .peptik-product-inner__panel p,
  .peptik-product-inner__panel ul li {
    font-size: 14px;
    line-height: 22px;
  }
  .peptik-product-inner__panel-media {
    min-height: 0;
    height: 212px;
    order: 99;
  }
}

/* ================================================================
   19. Barra sticky "Add to cart".
       Reglas de dist/assets/b829d4421c_styles.css (el styles.css de
       Dawn que cargan las fichas espejadas) + los overrides de marca
       de 5d3eaa2605_style.css. ADAPTADO: ese CSS se apoya en custom
       properties que el tema inyecta por Liquid en el <head> de cada
       PDP espejada; aca cada una queda RESUELTA a su valor real, leido
       del <head> de dist/product/epithalon/index.html:
         --layer-sticky: 8                       -> z-index: 7
         --padding-sm: 0.7rem                    -> padding
         --gap-md: 0.9rem                        -> gap
         --style-border-radius-buttons-primary: 12px
         --height-buy-buttons: calc(1rem*2 + 1.25rem) = 3.25rem = 52px
         --shadow-popover: 0 4px 20px rgb(0 0 0 / .15)
         --ease-out-quad: cubic-bezier(.32,.72,0,1)
         --font-size--md: 1rem / --font-size--sm: .875rem
         --color-foreground-rgb: 54 51 74 / --opacity-70: .7
   ================================================================ */
.sticky-add-to-cart__bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  opacity: 0;
  transform: translate(-50%) translateY(calc(100% + 40px));
  z-index: 7;
  width: 600px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  border-radius: calc(12px + min(0.7rem, 12px));
  box-shadow: 0 4px 20px rgb(0 0 0 / .15);
  padding: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  pointer-events: none;
}
.sticky-add-to-cart__bar[data-stuck="true"] {
  transform: translate(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .sticky-add-to-cart__bar {
    transition-property: transform, opacity;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
  }
}
.sticky-add-to-cart[data-variant-available="false"] .sticky-add-to-cart__bar {
  display: none;
}
.sticky-add-to-cart__image {
  flex-shrink: 0;
  aspect-ratio: 1;
  height: 52px;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f5;
}
.sticky-add-to-cart__image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sticky-add-to-cart__info {
  flex: 1;
  min-width: 0;
}
.sticky-add-to-cart__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-add-to-cart__variant {
  color: rgb(54 51 74 / .7);
  font-size: .875rem;
  margin-top: .125rem;
}
.sticky-add-to-cart__price {
  font-weight: 600;
  white-space: nowrap;
}
/* Especificidad (0,2,0) A PROPOSITO: src/styles/cart-peptik.css se carga
   DESPUES que este archivo y trae `.add-to-cart-button{height:var(--height-
   buy-buttons)}` con esa variable sin definir en nuestro build -> la
   declaracion queda invalida y el alto cae a auto (boton de 0px). El boton
   principal no lo sufre porque .product-form-buttons lo estira; el de la
   barra sticky si. Un selector mas especifico lo resuelve sin !important. */
.sticky-add-to-cart .sticky-add-to-cart__button {
  height: 52px;
  width: auto;
  position: relative;
  flex: 0 0 auto;
  padding: 0 1rem;
}
/* Override de marca del espejo (5d3eaa2605_style.css), verbatim. */
.sticky-add-to-cart .add-to-cart-button {
  border-radius: 50px !important;
}
.sticky-add-to-cart .add-to-cart-button:hover {
  background: var(--blue) !important;
}
@media (max-width: 749px) {
  .sticky-add-to-cart__bar {
    bottom: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
  .sticky-add-to-cart__bar .add-to-cart-text__content {
    display: none;
  }
  .sticky-add-to-cart__title {
    font-size: 1.125rem;
  }
  .sticky-add-to-cart__price {
    font-size: .875rem;
  }
  .sticky-add-to-cart .sticky-add-to-cart__button {
    width: 52px;
    padding: 0;
  }
}
@media (max-width: 389px) {
  .sticky-add-to-cart__title {
    display: none;
  }
  .sticky-add-to-cart__info[data-singleton="true"] .sticky-add-to-cart__title,
  .sticky-add-to-cart__info[data-single-option="true"] .sticky-add-to-cart__title {
    display: block;
  }
}


/* ================================================================
   20. "You may also like" (.peptik-recs) en las fichas de plantilla
      propia. Reglas portadas LITERAL del style.css de peptik
      (dist/assets/5d3eaa2605_style.css) el 2026-09-12: en las fichas
      espejadas las trae esa hoja; las propias no la cargan. Extraidas por
      selector (bloques @media incluidos), sin cambios de valores.
   ================================================================ */
.peptik-recs{background:#fff;padding:64px 0 96px}
.peptik-recs .container{max-width:1248px;margin:0 auto;padding:0 16px}
.peptik-recs__header{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:40px}
.peptik-recs__intro h2{margin:0 0 6px;color:var(--figma-ink);font-size:44px;font-weight:400;line-height:52px;letter-spacing:-2px}
.peptik-recs__intro p{margin:0;color:var(--gray500);font-size:15px;line-height:22px}
.peptik-recs__cta{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;background:var(--blue100);color:var(--figma-ink);border-radius:999px;text-decoration:none;font-size:14px;font-weight:500}
.peptik-recs__cta:hover{background:var(--blue200)}
.peptik-recs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.peptik-recs__card{border:1px solid var(--blue100);border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.peptik-recs__card-image{display:block;width:100%;aspect-ratio:395/333;background:#fff;overflow:hidden}
.peptik-recs__card-image img{width:100%;height:100%;object-fit:contain;padding:20px;transition:transform .35s ease;will-change:transform}
.peptik-recs__card-body{padding:20px 24px 24px;border-top:1px solid var(--blue100)}
.peptik-recs__card-tags{display:flex;gap:6px;margin-bottom:10px}
.peptik-recs__card-tags span{display:inline-block;padding:3px 10px;border:1px solid var(--blue100);border-radius:4px;font-size:11px;line-height:16px;color:var(--gray800);text-transform:uppercase;letter-spacing:.5px}
.peptik-recs__card-title{margin:0 0 4px;font-size:20px;line-height:26px;letter-spacing:-.6px;font-weight:500}
.peptik-recs__card-title a{color:var(--figma-ink);text-decoration:none}
.peptik-recs__card-purity{margin:0;color:var(--gray500);font-size:13px;line-height:20px;font-weight:700}
.peptik-recs__card-ship{margin:4px 0 14px;color:var(--gray500);font-size:12px;line-height:18px}
.peptik-recs__card-price{margin:0;color:var(--figma-ink);font-size:20px;line-height:28px;letter-spacing:-.5px;font-weight:500}
.product-grid__item[data-format=spray] .card-image img,.peptik-recs__card[data-format=spray] .peptik-recs__card-image img{aspect-ratio:1584/1332;object-fit:contain;background:#fff}
.peptik-recs__card-actions{display:flex;gap:8px;margin-top:14px}
.peptik-recs__card-form{margin:0;flex:1}
.peptik-recs__card-view,.peptik-recs__card-cart{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:10px 14px;border-radius:999px;font-family:Lato,sans-serif;font-size:14px;line-height:18px;font-weight:500;text-decoration:none;cursor:pointer;box-sizing:border-box;border:1px solid var(--darkblue)}
.peptik-recs__card-view{background:#fff;color:var(--darkblue)}
.peptik-recs__card-view:hover{background:var(--blue100)}
.peptik-recs__card-cart{background:var(--darkblue);color:#fff}
.peptik-recs__card-cart:hover{background:var(--blue)}
.peptik-recs__card-cart[disabled]{opacity:.5;cursor:not-allowed}
.peptik-recs__card-actions>.peptik-recs__card-view{flex:1}
@media(hover:hover){.peptik-recs__card:hover{border-color:var(--blue200, var(--blue100));box-shadow:0 8px 24px -10px #0745c42e;transform:translateY(-2px)}.peptik-recs__card:hover .peptik-recs__card-image img{transform:scale(1.06)}}
@media(max-width:768px){.peptik-recs{padding:40px 0 64px}.peptik-recs__header{flex-direction:column;align-items:flex-start;margin-bottom:24px}.peptik-recs__intro h2{font-size:32px;line-height:40px;letter-spacing:-1px}.peptik-recs__intro p{font-size:14px;line-height:20px}.peptik-recs__cta{padding:10px 22px;font-size:14px}.peptik-recs__grid{grid-template-columns:1fr;gap:16px}}
@media(max-width:768px){.peptik-recs__card-actions{flex-direction:column;gap:6px}.peptik-recs__card-view,.peptik-recs__card-cart{min-height:40px;font-size:13px}}

/* ================================================================
   21. Tarjeta de consulta por WhatsApp (.peptik-wa-consult) --
       VERBATIM de dist/assets/5d3eaa2605_style.css (el style.css que
       cargan las fichas espejadas; las propias no lo cargan). Mismos
       valores, mismo @media(max-width:600px). Sin adaptaciones.
   ================================================================ */
.peptik-product-inner__consult {
  margin: 0 0 22px;
  text-align: center;
}
.peptik-wa-consult {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 600px;
  margin: 10px auto 0;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid #e7eef0;
  border-left: 4px solid #25D366;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 20px #10003e0d;
  transition: box-shadow .2s, transform .2s;
}
.peptik-wa-consult:hover {
  box-shadow: 0 12px 30px #10003e1a;
  transform: translateY(-1px);
}
.peptik-wa-consult__ic {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peptik-wa-consult__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.peptik-wa-consult__title {
  color: #10003e;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.peptik-wa-consult__sub {
  color: #6b6a78;
  font-size: 13px;
  line-height: 1.4;
}
.peptik-wa-consult__cta {
  flex: 0 0 auto;
  background: #10003e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .peptik-wa-consult {
    flex-wrap: wrap;
  }
  .peptik-wa-consult__body {
    flex-basis: calc(100% - 58px);
  }
  .peptik-wa-consult__cta {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
}

/* ================================================================
   22. Foto del producto dentro del panel "Info"
       (.peptik-product-inner__panel-photo).
       En la ficha espejada el render vive FUERA de los paneles, en
       `.peptik-product-inner__vial-hero` (width:180px; height:90px;
       object-fit:cover; margin:0 auto -- recorte visible en todas las
       pestanas). Aca la foto va DENTRO de #product-overview, encima
       del texto: se conservan los valores que se pueden conservar
       (display:block; margin:0 auto; max-width:100%) y se cambian los
       dos que la posicion nueva obliga a cambiar -- ancho maximo
       320px en vez de 180px fijo y ratio 4/5 completo en vez del
       recorte 2:1, para que se vea el vial entero. El fondo #f0ece6
       de la placa viene en el propio render (public/img/<handle>-1.webp),
       no se pinta aca; el radio es el mismo 12px de
       `.peptik-product-inner__panel-media`.
   ================================================================ */
.peptik-product-inner__panel-photo {
  width: 100%;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.peptik-product-inner__panel-photo img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
  border-radius: 12px;
}
@media (max-width: 768px) {
  .peptik-product-inner__panel-photo {
    margin: 0 0 16px;
  }
  .peptik-product-inner__panel-photo img {
    max-width: 240px;
  }
}

/* ================================================================
   23. Seccion "About the Product"
       (section.text-image-features.product_overview).
       Estructura y reglas base VERBATIM del style.css de peptik
       (dist/assets/5d3eaa2605_style.css: .text-image-features, .flex,
       .tif-content, .tif-image, .tif-image img) + los overrides
       moviles del <style> inline de la PDP de peptik
       (agencia/peptik-clone/site/products/epithalon-10mg/index.html:
       .product_overview .tif-content{order:1}, .tif-image{order:2;
       margin-top:28px}, .text-image-features.product_overview
       {margin:0 16px; padding:48px 16px 24px; width:auto},
       .product_overview .container{padding:0}).
       ADAPTACIONES (3, todas por pedido del SOP de esta tarea):
         a) .tif-image img: radio 18px en vez de los 12px de peptik.
         b) .tif-image img: placa 4/5 (peptik usa foto de stock
            apaisada; nosotros el render vertical del producto).
         c) tipografia del h2/h3/p: peptik arma esa columna con los
            bloques del tema (h2 de seccion + .tif-item), que nuestro
            marcado no tiene; se reusan los MISMOS valores que ya usa
            esta hoja -- h2 = .peptik-recs__intro h2 (44/52/-2px y su
            variante movil 32/40/-1px), h3 = .tif-item h4 (26/34/-1px),
            p = .tif-item p (16/22).
         Los !important del <style> inline de peptik NO se copian: alli
         pelean contra el tema Shopify, aca no hay nada que pisar.
   ================================================================ */
.text-image-features {
  width: 100%;
  background: #0745c40d;
  padding: 88px 0;
}
.text-image-features .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* ADAPTACION (d): peptik no la necesita porque su foto de stock es
     apaisada y las dos columnas miden casi lo mismo; con el render 4:5
     la columna de texto queda muy corta y sin esto flota arriba. */
  align-items: center;
}
.text-image-features .tif-content {
  width: 42%;
}
.text-image-features .tif-image {
  width: 50%;
}
.text-image-features .tif-image img {
  width: 100%;
  display: block;
  /* ADAPTACION (b): placa 4:5 (render vertical) en vez de la foto
     apaisada de peptik, y tope de ancho para que la columna de 50% no
     dispare la altura de la seccion a ~780px. Queda pegada a la derecha
     (margin-left:auto), como la foto de peptik. */
  max-width: 460px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
}
.product_overview .tif-content h2 {
  margin: 0 0 6px;
  color: var(--figma-ink, var(--darkblue));
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -2px;
}
.product_overview .tif-content h3 {
  margin: 16px 0 0;
  color: var(--darkblue);
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -1px;
  font-weight: 400;
}
.product_overview .tif-content p {
  margin: 16px 0 0;
  color: var(--gray800);
  font-size: 16px;
  line-height: 22px;
}
@media (max-width: 979px) {
  .text-image-features.product_overview {
    margin: 0 16px;
    padding: 48px 16px 24px;
    width: auto;
  }
  .product_overview .container {
    padding: 0;
  }
  .product_overview .tif-content {
    order: 1;
    width: 100%;
  }
  .product_overview .tif-image {
    order: 2;
    margin-top: 28px;
    width: 100%;
  }
  .product_overview .tif-content h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1px;
  }
  .product_overview .tif-content h3 {
    font-size: 22px;
    line-height: 30px;
  }
  .product_overview .tif-image img {
    max-width: 420px;
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  .product_overview .tif-image img {
    max-width: 300px;
  }
}