/*
 * cart-peptik.css - peptik.co's "Add to cart" button and quantity selector,
 * for the build.py pages and the template PDPs (build/tpl_pdp.py). The cart
 * drawer rules and the button's "added" animation left with the drawer:
 * adding now opens the cart page (build/cart_page.py), which is styled by the
 * mirrored theme sheets.
 *
 * Sources, in the order peptik.co loads them in the PDP <head>:
 *   1. d700863ca4_base.css   2. 5a38895651_style.css   3. 4f94e397b3_styles.css
 * Every rule keeps its original @media wrapper. Theme variables the site does
 * not define (--gap-*, --animation-*, --color-input-*) fall back to the
 * browser defaults, as they did before.
 */

/* ===== fuente: base.css (d700863ca4_base.css) ===== */
.hidden { display:none!important }
.visually-hidden:not(:focus,:active) { position:absolute!important;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);word-wrap:normal!important }
.svg-wrapper { color:currentcolor;display:inline-flex;justify-content:center;align-items:center;width:var(--icon-size-sm);height:var(--icon-size-sm);pointer-events:none }
.svg-wrapper>svg { width:var(--icon-size-sm);height:var(--icon-size-sm) }
.button { --text-align: center;display:grid;align-content:center;text-decoration:none;text-align:var(--text-align);color:var(--button-color);-webkit-appearance:none;appearance:none;background-color:var(--button-background-color);border:none;font-family:var(--font-paragraph--family);font-style:var(--font-paragraph--style);font-weight:var(--font-paragraph--weight);font-size:var(--font-paragraph--size);line-height:var(--font-paragraph--line-height);margin-block:0;transition:color var(--animation-speed) var(--animation-easing),box-shadow var(--animation-speed) var(--animation-easing),background-color var(--animation-speed) var(--animation-easing);cursor:pointer;width:fit-content;box-shadow:inset 0 0 0 var(--button-border-width) var(--button-border-color);padding-block:var(--button-padding-block);padding-inline:var(--button-padding-inline) }
.button { font-family:var(--button-font-family-primary);text-transform:var(--button-text-case-primary);border-radius:var(--style-border-radius-buttons-primary) }
.button[hidden] { display:none }
.button[aria-disabled=true], .button:disabled { opacity:.5;cursor:not-allowed }
.button { --button-color: var(--color-primary-button-text);--button-background-color: var(--color-primary-button-background);--button-border-color: var(--color-primary-button-border);--button-border-width: var(--style-border-width-primary) }
.button:hover { --button-color: var(--color-primary-button-hover-text);--button-background-color: var(--color-primary-button-hover-background);--button-border-color: var(--color-primary-button-hover-border) }
.button-unstyled { display:block;padding:0;background-color:inherit;color:inherit;border:0;border-radius:0;overflow:hidden;box-shadow:none;font-family:var(--font-paragraph--family);font-style:var(--font-paragraph--style);font-size:var(--font-paragraph--size) }
.button-unstyled:hover { background-color:inherit }
summary .svg-wrapper { margin-inline-start:auto;height:var(--icon-size-xs);width:var(--icon-size-xs);transition:transform var(--animation-speed) var(--animation-easing) }
.border-style { border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);border-radius:var(--border-radius) }
.quantity-selector { --quantity-selector-width: 124px;display:flex;justify-content:space-between;align-items:center;color:var(--color-input-text);background-color:var(--color-input-background);border:var(--style-border-width-inputs) solid var(--color-input-border);border-radius:var(--style-border-radius-inputs);flex:1 1 var(--quantity-selector-width);align-self:stretch;transition:background-color var(--animation-speed) var(--animation-easing) }
.quantity-selector:hover { background-color:var(--color-input-hover-background) }
.quantity-selector :is(.quantity-minus,.quantity-plus) { padding:0;background:transparent;box-shadow:none;display:flex;justify-content:center;align-items:center;cursor:pointer;width:var(--minimum-touch-target);height:var(--minimum-touch-target);flex-shrink:0;color:var(--color-input-text) }
.quantity-selector .quantity-minus { border-start-start-radius:var(--style-border-radius-inputs);border-end-start-radius:var(--style-border-radius-inputs) }
.quantity-selector .quantity-plus { border-start-end-radius:var(--style-border-radius-inputs);border-end-end-radius:var(--style-border-radius-inputs) }
.quantity-selector .svg-wrapper { transition:transform var(--animation-speed) var(--animation-easing) }
.quantity-selector svg { width:var(--icon-size-xs);height:var(--icon-size-xs) }
:is(.quantity-minus,.quantity-plus):active .svg-wrapper { transform:scale(.9) }
.quantity-selector input[type=number] { margin:0;text-align:center;border:none;-webkit-appearance:none;appearance:none;max-width:calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);border-radius:var(--style-border-radius-buttons);color:var(--color-input-text);background-color:transparent }
.quantity-selector input[type=number]::-webkit-inner-spin-button, .quantity-selector input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none;appearance:none }
.quantity-selector input[type=number] { -webkit-appearance:textfield;appearance:textfield }
.add-to-cart-button { -webkit-user-select:none;user-select:none;transition-property:color,box-shadow,background-color,scale,translate;transition-duration:var(--animation-speed);transition-timing-function:var(--ease-out-cubic) }
.add-to-cart-button:active { scale:.99;translate:0 1px }
.add-to-cart-text { display:flex;gap:var(--gap-2xs);align-items:center;justify-content:center }

/* ===== fuente: style.css (5a38895651_style.css) ===== */
.visually-hidden { position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap }
@media(max-width:749px) {
  .quantity-selector .quantity-minus, .quantity-selector .quantity-plus { width:36px;height:36px }
  .quantity-selector input[type=number] { width:28px;height:36px }
}
.add-to-cart-text__label { margin-right:10px }
.btn-price { display:inline-flex;align-items:center;gap:6px }
.btn-price__sep { opacity:.55;padding:0 4px }

/* ===== fuente: styles.css (4f94e397b3_styles.css, 292KB, hoja principal) ===== */
.quantity-selector { flex-grow:0;flex-shrink:0;height:var(--height-buy-buttons) }
.add-to-cart-button { height:var(--height-buy-buttons);text-transform:var(--button-text-case-primary) }
.quantity-selector-wrapper { display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--gap-sm) / 2) }
@media screen and (min-width:750px) {
  .quantity-selector-wrapper { gap:var(--gap-sm) }
}

/* Integrador 2026-09-12: el input de cantidad heredaba 14px
   (--font-size--sm); en iOS Safari cualquier input < 16px dispara auto-zoom
   y la pagina queda ampliada/desplazable ("se mueve la pantalla"). */
@media (max-width: 768px) {
  .quantity-selector input[type=number] { font-size: 16px; }
}