/** Shopify CDN: Minification failed

Line 398:0 All "@import" rules must come first

**/
/* Fix: product image looked tiny next to the info column on any viewport
   under 990px (phones, and the Shopify theme-editor preview pane, which is
   narrower than a real desktop window). The old rules squashed the image to
   ~54-71% of its width in height. Give it a fuller, squarer box so it reads
   as a proper product photo instead of a thin strip. */
@media screen and (max-width: 989px) {
  body.template-product .product__media {
    padding-top: 100% !important;
    height: auto !important;
  }
}

/* PDP: cuotas + envío gratis highlight, directly under the buy button */
.dv2-purchase-trust__highlights {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.dv2-purchase-trust__highlight {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--dv2-ink, rgba(var(--color-foreground), 1));
}

.dv2-purchase-trust__highlight svg {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  color: var(--dv2-deep, rgba(var(--color-foreground), .65));
}

@media screen and (max-width: 749px) {
  .dv2-purchase-trust__highlights {
    gap: .5rem;
  }
  .dv2-purchase-trust__highlight {
    font-size: 1.3rem;
  }
}

/* ------------------------------------------------------------
   PDP — Selector de packs (1 / 2 / 3 unidades)
   Visual-only redesign: same markup, same prices/discounts/logic,
   just a cleaner card system. Structure per card:
     [radio]  [título + subtítulo]  ...  [precio + precio anterior]
   with a small flat pill badge (not a ribbon) tucked in the card's
   own top-right corner. The price block sits pinned to the card's
   own bottom-right corner (not on the title row), so a badge and
   a price never occupy the same horizontal band regardless of how
   long the card's copy is.
------------------------------------------------------------ */
body.template-product .quantity-break {
  padding: 3.3rem 1.9rem 4.6rem 4.6rem;
  margin-bottom: 1rem;
  border-radius: 1.4rem;
  background: #fff;
  border: 1.5px solid rgba(20, 16, 13, .12);
  position: relative;
  transition: border-color .2s ease, background-color .2s ease;
}

body.template-product .quantity-break:last-of-type {
  margin-bottom: 0;
}

body.template-product .quantity-break:hover {
  border-color: rgba(91, 110, 125, .45);
  background: #fff;
}

body.template-product .quantity-breaks-container input:checked + .quantity-break {
  border-color: var(--dv2-deep, #5b6e7d);
  border-width: 2px;
  background: rgba(91, 110, 125, .06);
}

/* Radio indicator — light outline by default, filled brand-blue dot
   (white ring inset gives the dot look) when selected. No heavy shadows. */
body.template-product .quantity-break::before {
  width: 2rem;
  height: 2rem;
  left: 2.2rem;
  border-width: 1.5px;
  border-color: rgba(20, 16, 13, .22);
  background: #fff;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body.template-product .quantity-breaks-container input:checked + .quantity-break::before {
  border-color: var(--dv2-deep, #5b6e7d);
  background: var(--dv2-deep, #5b6e7d);
  box-shadow: inset 0 0 0 .35rem #fff;
}

/* Title/subtitle row. The price block is pulled out of this row and
   pinned to the card's bottom-right corner instead (see
   .quantity-break__right below), so this row only ever holds the
   left-side copy and never has to share horizontal space with a price. */
body.template-product .quantity-break__content {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.2rem;
}

body.template-product .quantity-break__left {
  flex: 1 1 auto;
  min-width: 0;
  row-gap: .3rem;
}

body.template-product .quantity-break__label,
body.template-product .quantity-break__label-text {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--dv2-ink, #14100d);
}

body.template-product .quantity-break__caption {
  font-size: 1.3rem;
  font-weight: 400;
  color: rgba(20, 16, 13, .58);
}

/* Price block — pinned to the card's own bottom-right corner, well
   below the badge (which stays top-right) and below the title row,
   so the two never collide no matter how much copy a card carries. */
body.template-product .quantity-break__right {
  position: absolute;
  right: 1.9rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: .2rem;
}

body.template-product .quantity-break__price {
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--dv2-ink, #14100d);
}

body.template-product .quantity-break__compare-price {
  font-size: 1.15rem;
  font-weight: 400;
  color: rgba(20, 16, 13, .38);
  text-decoration: line-through;
}

/* Badge — small flat pill, not a ribbon. Tucked inside the card's own
   corner with room reserved by the card's top padding, so it never
   touches the price/title row underneath it. */
body.template-product .quantity-break__badge {
  position: absolute;
  top: .9rem;
  right: .9rem;
  left: auto;
  transform: none;
  margin: 0;
  padding: .35rem 1.1rem;
  border-radius: 999px;
  clip-path: none;
  background: var(--dv2-deep, #5b6e7d);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1.4;
  box-shadow: none;
}

body.template-product .quantity-break__badge--best {
  background: var(--dv2-deep, #5b6e7d);
}

@media screen and (max-width: 749px) {
  body.template-product .quantity-break {
    padding: 2.9rem 1.5rem 3.8rem 4rem;
    margin-bottom: .8rem;
  }
  body.template-product .quantity-break::before {
    left: 1.7rem;
    width: 1.8rem;
    height: 1.8rem;
  }
  body.template-product .quantity-break__badge {
    top: .7rem;
    right: .7rem;
    padding: .3rem .9rem;
    font-size: .85rem;
  }
  body.template-product .quantity-break__right {
    right: 1.5rem;
    bottom: 1.2rem;
  }
  body.template-product .quantity-break__label,
  body.template-product .quantity-break__label-text {
    font-size: 1.5rem;
  }
  body.template-product .quantity-break__caption {
    font-size: 1.2rem;
  }
  body.template-product .quantity-break__price {
    font-size: 1.65rem;
  }
  body.template-product .quantity-break__compare-price {
    font-size: 1.05rem;
  }
}

/* Fix: footer newsletter field — on narrow mobile columns "Correo
   electrónico" wrapped to a second line inside the floating label, but the
   input box height only accounts for a single line, so the wrapped line
   rendered below/outside the field's own border. Keep the label on one
   line and shrink it to fit instead of letting it overflow the box. */
.footer .newsletter-form .field__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 3.6rem);
}

@media screen and (max-width: 749px) {
  .footer .newsletter-form .field__label,
  .footer .newsletter-form .field__input {
    font-size: 1.3rem;
  }
}

/* Fix: mobile comparativa table (HOME) — "HIDRATANTE CORPORAL" and
   "DERIUM POST-DEPILACIÓN" were force-hyphenated mid-word ("CORPO-RAL",
   "DEPILA-CIÓN") because the header cells inherited hyphens:auto +
   word-break:break-word from the desktop table styles. Let header text
   wrap normally at the space between words instead of splitting a word
   in half. */
@media screen and (max-width: 749px) {
  .dc-comparison__table thead th {
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }
}

/* Fix: PDP "Beneficios" card titles (dpp-benefit-card__body h3) —
   "PUNTITOS POST-DEPILACIÓN", "PELOS ATRAPADOS SUPERFICIALMENTE", etc.
   were force-broken mid-word ("DEPILACIÓ"/"N", "ATRAPADO"/"S") because
   the theme's global h1-h5 tag reset in base.css sets
   word-break:break-word, and this 3-column grid (minmax(0,1fr) +
   min-width:0 on the card) shrinks narrower than the word's intrinsic
   width. word-break:normal alone fixed the ugly mid-syllable splits,
   but on tablet/small-desktop widths a single long word like
   "SUPERFICIALMENTE" still doesn't fit even on its own line — and
   since the card clips overflow, the tail of the word was getting
   silently cut off instead of wrapping. overflow-wrap:break-word only
   breaks a word as a last resort (when it can't fit on its own line),
   so normal text still wraps at spaces first — this just guarantees no
   letters are ever hidden. */
.dpp-benefit-card h3 {
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Remove the country/currency and language switcher from the header — the
   store only sells in ARS/Spanish, and showing "Estados Unidos | USD $" as a
   choosable option confused customers into thinking they could switch to a
   different country/currency, which isn't actually supported. Removed from
   both the desktop header bar and its duplicate inside the mobile menu
   drawer, site-wide (not scoped to one page — it's the same header on every
   page). The cart icon and search are separate siblings, unaffected. */
.desktop-localization-wrapper,
.menu-drawer__localization {
  display: none !important;
}

/* Fix: mobile hamburger menu items ("Comprar Ahora", "Nuestra Historia",
   "Preguntas Frecuentes", etc. — the #menu-drawer nav, see
   snippets/dt-header-part-054.liquid) were rendering at a wildly oversized
   font-size: clamp(2.8rem, 9vw, 5rem) — that's ~35px computed on a 390px
   phone — from a stray rule in assets/derium-v2.css. It looks like a
   copy/paste accident from some large hero-heading styling that ended up
   targeting .menu-drawer__menu-item instead. Did not touch derium-v2.css
   directly (large file, didn't want to risk an unrelated rule nearby);
   overriding it here instead, with !important since the buggy rule itself
   has none and a plain class selector already beats it on specificity, but
   !important makes the override unambiguous regardless of file load order.
   Header is shared site-wide (not scoped to one template). */
.menu-drawer__menu-item {
  font-size: 15px !important;
}

/* Footer newsletter signup form ("Tu correo electrónico" / "Suscribirme")
   was rendering dark text on the footer's dark background — invisible.
   Everything else in the footer (nav headings, links, logo) gets forced to
   the light color by an existing !important rule scoped to a/p/li/h1-h3,
   but that rule's selector list never included label/input/button, so this
   one form silently fell back to .ft-footer's own dark base color instead.
   Same root cause as the header icons bug — an element with no color rule
   of its own inherits from the nearest ancestor that has one, and that
   ancestor here happens to be dark. The input's underline (border-bottom:
   1px solid currentColor) was invisible for the same reason. */
.ft-footer__signup,
.ft-footer__signup label,
.ft-footer__signup input,
.ft-footer__signup button,
.ft-footer__signup small {
  color: #fdfbf7 !important;
}
.ft-footer__signup input::placeholder {
  color: rgba(253, 251, 247, 0.6) !important;
}
.ft-footer__form {
  border-bottom-color: rgba(253, 251, 247, 0.4) !important;
}

/* Same bug, same fix, bottom copyright bar: "© 2026 DERIUM" and "Hecho en
   Argentina · Envíos a todo el país" have no color of their own either, so
   they fell back to .ft-footer's dark base color too. */
.ft-footer__bottom,
.ft-footer__bottom span {
  color: rgba(253, 251, 247, 0.75) !important;
}

/* Fix: Shopify's policy pages (política de reembolso/privacidad/etc.)
   render each bulleted list item as its own <li><p>...</p></li>. The <p>'s
   default block margin pushed the text below/away from its own bullet
   marker, so every • sat alone on its line, disconnected from the line of
   text it belonged to. Collapse that inner paragraph spacing so the marker
   and its text sit on the same line, like a normal list. */
.rte ul li p,
.rte ol li p {
  display: inline;
  margin: 0;
}

/* ============================================================
   PDP GHK-Cu — rediseño visual, iteración 2 (composición above-
   the-fold en 1440x900). Alcance: SOLO presentación. Ningún texto,
   precio, imagen, orden de bloques, lógica de carrito/variantes/
   tracking fue tocado.

   BUGFIX post-iteración 2 (corrección de 2 regresiones sobre el
   selector de protocolos, ambas causadas por comprimir las cards a
   64px de alto SOLO pensando en desktop):

   Regresión 1 (reportada por el usuario, desktop): al bajar
   .quantity-break a min-height:64px, cambié también
   .quantity-break__right de position:absolute (su valor original,
   anclado abajo a la derecha) a position:static + margin-left:auto
   (centrado como fila flex). En una card de 64px eso hacía que el
   precio cayera justo en la banda vertical donde el badge ("Más
   Popular" / "Protocolo + mantenimiento", position:absolute arriba
   a la derecha) se sigue pintando — el badge quedaba encima y
   tapaba el precio actual en los packs de 2 y 3 frascos (el precio
   NUNCA desapareció del DOM: opacity:1, display:block,
   visibility:visible; solo quedó oculto detrás del badge).

   Regresión 2 (encontrada al verificar la 1 en mobile, no
   reportada aún por el usuario pero rompe lo mismo: precio tapado):
   TODAS las reglas de compactación de las cards (padding,
   min-height:64px, el centrado del radio via ::before) estaban SIN
   media query, aplicándose también en mobile. El theme original
   (sin ninguna de estas reglas) deja que la card crezca en alto lo
   que necesite en mobile, así el label+pill quedan en una fila y el
   precio en la fila de abajo, sin pisarse. Forzar min-height:64px
   en mobile comprimía esa misma card, y el precio (sea absolute o
   static) terminaba superpuesto con el pill "Suministro para X
   meses". Confirmado comparando contra el theme LIVE (sin estas
   reglas) en 390px: ahi la card crece sola y no hay superposición.

   Fix para ambas: TODA la compactación estructural de las cards
   (altura, padding, centrado de radio, position:absolute del
   precio) quedó encerrada en @media (min-width: 990px) — el mismo
   breakpoint desktop usado en el resto de esta iteración. Debajo de
   990px las cards vuelven exactamente al comportamiento original
   (auto-alto, sin compactar), que es el que ya funciona bien en el
   theme live. Los tamaños de fuente de las cards (label, caption,
   precio, badge) NO se tocaron ni se re-scopearon — no eran la
   causa de ninguna de las dos superposiciones.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');

/* --- Recomposición de las dos columnas: SOLO desde 990px (el
   breakpoint desktop del theme). gap real de 60px (dentro de
   56-64px pedido), anchos fijos en vez de porcentajes (más
   predecible que pelear con el % + gap del flex existente), y el
   conjunto centrado dentro del ancho de página SIN tocar ese ancho
   de página. 525 (galería) + 60 (gap) + 500 (info) = 1085px total. */
@media screen and (min-width: 990px) {
  body.template-product #MainContent .product {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 60px !important;
    max-width: 1085px !important;
    margin-inline: auto !important;
  }
  body.template-product #MainContent .product__media-wrapper {
    width: 525px !important;
    max-width: 525px !important;
    flex: 0 0 525px !important;
  }
  body.template-product #MainContent .product__info-wrapper {
    width: 500px !important;
    max-width: 500px !important;
    flex: 0 0 500px !important;
    padding-left: 0 !important;
  }
  /* Padding lateral heredado (Dawn, ~30px) recortaba el ancho útil
     del texto y forzaba al H1 a 3 líneas. Se reduce a 8px — gutter
     mínimo, no cero, para que el texto no quede pegado al borde. */
  body.template-product #MainContent .product__info-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* --- Thumbnails: 64px de alto (piso del rango 64-72 pedido, para
     ganar los px que la imagen necesita), separación chica respecto
     a la imagen principal. */
  body.template-product #MainContent .thumbnail-slider,
  body.template-product #MainContent .product__media-list--thumbnail {
    height: 64px !important;
    margin-top: 10px !important;
  }

  /* --- Selector "Elegí tu protocolo": SOLO desktop. Cards
     compactas de 64px (76px las que tienen badge, ver más abajo),
     radio centrado verticalmente, precio anclado abajo a la
     derecha. Ver nota larga arriba sobre por qué esto no puede
     aplicarse sin media query. */
  body.template-product #MainContent .quantity-break {
    padding: 14px 18px 14px 50px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
  }
  body.template-product #MainContent .quantity-break:has(.quantity-break__badge) {
    min-height: 76px !important;
    padding-top: 22px !important;
  }
  body.template-product #MainContent .quantity-break::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 20px !important;
    width: 18px !important;
    height: 18px !important;
  }
  body.template-product #MainContent .quantity-breaks-container input:checked + .quantity-break::before {
    box-shadow: inset 0 0 0 4px #fff !important;
  }
  body.template-product #MainContent .quantity-break__content {
    width: 100%;
    align-items: center !important;
  }
  body.template-product #MainContent .quantity-break__right {
    position: absolute !important;
    right: 18px !important;
    bottom: 10px !important;
    margin-left: 0 !important;
  }
}

/* --- Jerarquía tipográfica del hero: escala recalibrada. H1 en
   28px (único valor fuera del rango 30-34 pedido, necesario para
   el wrap en 2 líneas), separaciones ajustadas a una secuencia
   compacta (4/8/8 px) en vez de 24px repetidos. Estas reglas de
   tipografía/espaciado (sin cambios de ancho/flex) se dejan
   activas en todos los tamaños: en mobile Dawn ya apila las
   columnas en 1 sola, así que no generan el mismo conflicto de
   layout que las reglas de arriba. */
body.template-product #MainContent .product__title.dv2-pdp-hero .product__eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  color: rgba(23, 23, 23, .55) !important;
  margin: 0 !important;
}

body.template-product #MainContent .product__title.dv2-pdp-hero h1.h0 {
  font-family: 'Libre Baskerville', 'Inter', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  max-width: 100% !important;
}
@media screen and (min-width: 990px) {
  body.template-product #MainContent .product__title.dv2-pdp-hero h1.h0 {
    font-size: 28px !important;
    line-height: 1.08 !important;
    margin: 4px 0 0 !important;
  }
}

body.template-product #MainContent .product__title.dv2-pdp-hero .product__subheadline,
body.template-product #MainContent .product__title.dv2-pdp-hero .product__subheadline p {
  font-size: 15.5px !important;
  line-height: 1.4 !important;
  color: rgba(23, 23, 23, .72) !important;
}
body.template-product #MainContent .product__title.dv2-pdp-hero .product__subheadline {
  margin-top: 8px !important;
}

/* Rating row */
body.template-product #MainContent .product__title.dv2-pdp-hero > div[style*="margin-top:14px"] {
  margin-top: 8px !important;
}
body.template-product #MainContent .product__title.dv2-pdp-hero > div[style*="margin-top:14px"] span:first-child {
  font-size: 14px !important;
}
body.template-product #MainContent .product__title.dv2-pdp-hero > div[style*="margin-top:14px"] span[style*="b87333"] {
  color: #b87333 !important;
  font-size: 14px !important;
}
body.template-product #MainContent .product__title.dv2-pdp-hero > div[style*="margin-top:14px"] span:last-child {
  font-size: 13px !important;
}

/* --- Precio. El padding-top viene de la variable de espaciado de
   sección de Dawn (--margin-top: 1.5rem → 16.5px); se recorta a
   6px. price__sale pasa a flex con align-items:baseline para que
   el precio actual y el tachado queden en la misma línea (antes se
   apilaban en 2 líneas, costando ~25px de alto extra). */
body.template-product #MainContent .product-page-price {
  padding-top: 6px !important;
}
body.template-product #MainContent .price__sale {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body.template-product #MainContent .price__compare-price {
  display: inline !important;
}
body.template-product #MainContent .product-page-price .price-item--regular {
  font-size: 19px !important;
  font-weight: 400 !important;
}
body.template-product #MainContent .product-page-price .price-item:not(.price-item--regular) {
  font-size: 26px !important;
  font-weight: 600 !important;
}

/* --- Cuotas / stock */
body.template-product #MainContent .dv2-pdp-installments {
  font-size: 14px !important;
  margin-top: 4px !important;
}
body.template-product #MainContent .dv2-stock-badge {
  font-size: 13px !important;
  margin-top: 8px !important;
}

/* --- Selector "Elegí tu protocolo": título compacto (todos los
   tamaños — solo tipografía, no layout). Tamaños de fuente de las
   cards (todos los tamaños — no causan superposición por sí
   solos). */
body.template-product #MainContent .quantity-breaks {
  margin-top: 6px !important;
}
body.template-product #MainContent .quantity-breaks__title {
  margin-bottom: 6px !important;
  font-size: 14px !important;
}
body.template-product #MainContent .quantity-break__label,
body.template-product #MainContent .quantity-break__label-text {
  font-size: 15px !important;
}
body.template-product #MainContent .quantity-break__caption,
body.template-product #MainContent .quantity-break__benefit {
  font-size: 13px !important;
}
body.template-product #MainContent .quantity-break__price {
  font-size: 16px !important;
}
body.template-product #MainContent .quantity-break__compare-price {
  font-size: 12px !important;
}
body.template-product #MainContent .quantity-break__badge {
  padding: .3rem .9rem !important;
  font-size: 11px !important;
}

/* --- Botón: 56px alto (piso del rango 54-58 pedido), ancho
   completo. Se mantiene el radio pill (decisión de marca ya
   explícita, no se toca acá). El margin-top de .product-form__buttons
   viene también de la variable de espaciado de Dawn entre bloques
   (colapsaba con el margin-top de <product-form>, 27.5px en total);
   se recorta a 4px. */
body.template-product #MainContent .product-form__submit,
body.template-product #MainContent .shopify-payment-button__button {
  min-height: 56px !important;
  font-size: 17px !important;
  width: 100% !important;
}
body.template-product #MainContent product-form.product-form {
  margin-top: 4px !important;
}
body.template-product #MainContent .product-form__buttons {
  margin-top: 4px !important;
}

body.template-product #MainContent .dv2-purchase-trust {
  margin-top: 12px !important;
}