:root {
  --accent: #2b9773;
  --accent-dark: #1f7057;
  --accent-light: #e4f3ee;
  --beige: #f5efe4;
  --beige-dark: #a8967a;
  --ink: #1a1a1a;
  --muted: #6b6b64;
  --border: #e5e1d8;
  --radius: 10px;
  --font-heading: "Newsreader", serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --yol-paper: #FAFAF8;
  --yol-ink: #141F1B;
  --yol-ink-2: #4E5A54;
  --yol-ink-3: #8B9490;
  --yol-accent: #219C77;
  --yol-mark: #13423A;
  --yol-line: rgba(20, 31, 27, .12);
  --yol-header-h: 81px;
}
* { box-sizing: border-box; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html {
  /* Off-canvas drawers (position: fixed + translateX(100%)) paint outside the
     viewport, and without this that still expands the page's horizontal
     scroll area — clip it here instead of constraining every drawer.
     Deliberately only on html, not body: overflow-x on both makes body its
     own scroll container, which silently breaks position:sticky children. */
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  /* Footer siempre pegado abajo, incluso en páginas cortas (success/cancel):
     body ocupa como mínimo toda la altura de la ventana, <main> se estira
     para rellenar el hueco, y el footer queda empujado al borde inferior en
     vez de quedarse flotando donde termina el contenido corto. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }
body > .yol-header, body > .site-footer { flex-shrink: 0; }
/* Por defecto, un flex item nunca se encoge por debajo del ancho de su
   contenido (min-width: auto) — eso es justo lo que rompía el scroll
   horizontal de las tablas del admin (Stock, Products): en vez de activar
   su propio overflow-x interno, todo el div intentaba ensancharse para
   caber el contenido entero, y el overflow-x:hidden del <html> lo recortaba
   sin más. Esto se aplica en toda la web (admin incluido, comparte esta
   misma hoja de estilos) para que cualquier hijo directo de body pueda
   encogerse hasta el ancho real de la pantalla. */
body > * { min-width: 0; }
h1, h2, h3, .font-heading {
  font-family: var(--font-heading);
  font-weight: 300;
}
.font-mono { font-family: var(--font-mono); }
a { color: var(--accent); }
button { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* header / navbar */
.yol-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--yol-line);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  color: var(--yol-ink);
}
.yol-header a { color: var(--yol-ink); text-decoration: none; }
.yol-header a:hover { color: var(--yol-accent); }
.yol-nav {
  max-width: 1440px; margin: 0 auto; padding: 11px clamp(24px, 4vw, 56px);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
  box-sizing: border-box; min-height: 58px;
  transition: padding .35s cubic-bezier(.2, .8, .2, 1), min-height .35s cubic-bezier(.2, .8, .2, 1);
}
.yol-header.is-compact .yol-nav { padding-top: 7px; padding-bottom: 7px; min-height: 46px; }

/* logo: wordmark collapses into the mark */
.yol-logo { position: relative; display: block; height: 26px; width: 146px; flex-shrink: 0; }
.yol-logo__word, .yol-logo__mark { position: absolute; left: 50%; top: 50%; }
.yol-logo__word {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  white-space: nowrap; line-height: 1; transform: translate(-50%, -50%);
  transition: opacity .45s ease, letter-spacing .55s cubic-bezier(.6, 0, .2, 1),
    text-indent .55s cubic-bezier(.6, 0, .2, 1), filter .45s ease;
}
.yol-logo__mark {
  width: 13px; height: 25px; color: var(--yol-mark); opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .4s ease .15s, transform .55s cubic-bezier(.2, .8, .2, 1) .1s;
}
.yol-logo__mark svg { display: block; width: 100%; height: 100%; }
.yol-header.is-compact .yol-logo__word { opacity: 0; letter-spacing: -.6em; text-indent: -.6em; filter: blur(2px); }
.yol-header.is-compact .yol-logo__mark { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.yol-links { display: flex; gap: clamp(16px, 2vw, 32px); font-size: 14.5px; margin-left: 8px; min-width: 0; overflow: hidden; }
.yol-links a { color: var(--yol-ink-2); white-space: nowrap; }
.yol-links a.active { color: var(--yol-ink); font-weight: 600; }
.yol-right { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); flex-shrink: 0; }
.yol-lang { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--yol-ink-3); white-space: nowrap; }
.yol-lang a { color: inherit; }
.yol-lang a[aria-current="true"] { color: var(--yol-ink); font-weight: 700; }
.yol-header .yol-buy {
  padding: 11px 20px; border: 1px solid var(--accent); border-radius: 100px;
  font-size: 14px; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
  background: var(--accent); color: #fff;
}
.yol-header .yol-buy:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.yol-header .yol-buy.active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.yol-burger {
  display: none; appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
}
.yol-burger span { display: block; width: 20px; height: 1.5px; background: var(--yol-ink); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.yol-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.yol-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* mobile sheet — sibling of the header (backdrop-filter would trap position:fixed) */
.yol-menu {
  position: fixed; z-index: 49; left: 0; right: 0; top: var(--yol-header-h); bottom: 0;
  background: var(--yol-paper); padding: 36px clamp(24px, 6vw, 56px) 40px;
  display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif; color: var(--yol-ink);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
}
.yol-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.yol-menu a { color: var(--yol-ink); text-decoration: none; }
.yol-menu__links { display: flex; flex-direction: column; }
.yol-menu__links a {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--yol-line);
  font-family: Newsreader, serif; font-weight: 300; font-size: 34px; line-height: 1.1;
}
.yol-menu__foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 22px; }
.yol-menu__lang { display: flex; gap: 10px; }
.yol-menu__lang a { padding: 10px 16px; border: 1px solid var(--yol-line); border-radius: 100px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--yol-ink-2); }
.yol-menu__lang a[aria-current="true"] { border-color: var(--yol-ink); color: var(--yol-ink); font-weight: 700; }
.yol-menu__mark { width: 22px; height: 42px; color: var(--yol-mark); }
.yol-menu__mark svg { display: block; width: 100%; height: 100%; }
.yol-menu__note { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--yol-ink-3); }
html.yol-menu-open, html.yol-menu-open body { overflow: hidden; }

/* cart icons live inside .yol-right; mobile duplicate shown only under the 959px breakpoint */
.cart-toggle { position: relative; background: none; border: none; cursor: pointer; padding: 4px; color: var(--yol-ink); display: flex; align-items: center; }
.cart-toggle-mobile { display: none; }
.cart-badge {
  position: absolute; top: -4px; right: -6px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.cart-badge[hidden] { display: none; }

@media (max-width: 959px) {
  .yol-links, .yol-lang, .yol-buy { display: none; }
  .yol-burger { display: flex; }
  .cart-toggle { display: none; }
  .cart-toggle-mobile { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .yol-header *, .yol-menu { transition: none !important; }
}

/* placeholder pages */
.page-placeholder { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.page-placeholder h1 { font-size: 28px; }

.legal-page { max-width: 760px; }
.legal-page h1 { margin-bottom: 40px; }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.legal-section p { color: var(--muted); line-height: 1.7; margin: 0 0 10px; }
.legal-photo-credit { font-size: 12px; color: var(--muted); font-style: italic; }

/* footer */
.site-footer {
  position: relative;
  /* Antes había un margin-top: 40px separando esto de lo anterior — un
     margen vive FUERA de la caja de color, así que dejaba un hueco liso en
     blanco justo encima de la ola (que está pensada para fundirse sin
     costuras con lo que venga antes). Ese espacio ahora es padding, dentro
     de la propia caja verde, para que la ola se apoye directamente sobre
     el fondo de página sin nada en medio. */
  padding: 88px 0 24px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.footer-wave {
  position: absolute; top: -1px; left: 0; width: 100%; height: 64px;
  line-height: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.footer-wave svg { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) { .footer-wave { height: 32px; } .site-footer { padding-top: 48px; } }
.site-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.site-footer-contact h2 { margin: 0 0 12px; font-size: 26px; color: #fff; }
.site-footer-contact p { margin: 0 0 20px; line-height: 1.6; max-width: 420px; color: rgba(255,255,255,0.9); }
.site-footer-links { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.site-footer-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.site-footer-nav a { color: #fff; text-decoration: none; font-weight: 600; }
.site-footer-nav a:hover { text-decoration: underline; }
.site-footer-nav a.buy-cta {
  margin-top: 4px; padding: 8px 20px; border-radius: var(--radius);
  background: #fff; color: var(--accent-dark); font-weight: 700;
}
.site-footer-social { display: flex; gap: 14px; margin-top: 24px; }
.site-footer-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.site-footer-social a:hover { background: rgba(255,255,255,0.3); }
.footer-newsletter { margin-top: 36px; max-width: 420px; }
.footer-newsletter h3 { margin: 0 0 6px; font-size: 17px; color: #fff; font-family: var(--font-body); font-weight: 700; }
.site-footer-contact .footer-newsletter p { margin: 0 0 12px; font-size: 14px; }
.footer-newsletter-row { display: flex; gap: 8px; }
.footer-newsletter-row input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; font-size: 16px; font-family: inherit;
  border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius); background: rgba(255,255,255,0.12); color: #fff;
}
.footer-newsletter-row input::placeholder { color: rgba(255,255,255,0.7); }
.footer-newsletter-row input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,0.2); }
.footer-newsletter-row button {
  height: 44px; padding: 0 18px; border: none; border-radius: var(--radius); background: #fff;
  color: var(--accent-dark); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.footer-newsletter-row button:disabled { opacity: 0.6; cursor: default; }
.site-footer-contact .footer-newsletter .footer-newsletter-note { margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,0.75); }
.footer-newsletter-note a { color: inherit; }
.site-footer-contact .footer-newsletter .footer-newsletter-note.is-done { font-size: 14px; font-weight: 600; color: #fff; }
.site-footer-contact .footer-newsletter .footer-newsletter-note.is-error { color: #ffd9d4; }
.footer-newsletter .cf-turnstile { margin-top: 8px; }

/* casilla de newsletter (página de éxito y formulario de contacto) —
   nunca marcada de antemano */
.nl-optin {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
  font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 22px;
}
.nl-optin input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.nl-optin-contact { margin-top: 16px; }
.result-wrap .nl-optin {
  background: var(--beige); padding: 14px 16px; border-radius: var(--radius); color: var(--ink);
}
.nl-optin-status { font-size: 13px; margin: 8px 0 0; min-height: 1em; }
.nl-optin-status.is-done { color: var(--accent-dark); font-weight: 600; }
.nl-optin-status.is-error { color: #b3453a; }

.site-footer-copy { text-align: center; font-size: 12px; color: rgba(255,255,255,0.7); margin: 40px 0 0; }
.site-footer-copy a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.site-footer-copy a:hover { color: #fff; }
@media (max-width: 700px) {
  .site-footer-grid { grid-template-columns: 1fr; }
  .site-footer-links { align-items: flex-start; margin-top: 32px; }
  .site-footer-nav { align-items: flex-start; }
}

/* shop layout */
.wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 40px; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 360px; gap: 40px; align-items: start; }

.main-image {
  aspect-ratio: 1 / 1;
  background: var(--beige);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beige-dark);
  overflow: hidden;
}
.main-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; will-change: transform; }
.main-image.zoomable { cursor: move; }
.thumb-row { display: flex; gap: 8px; margin-top: 8px; }
.thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--beige);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beige-dark);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.selected { border-color: var(--accent); }

.group-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
.option-row { margin-bottom: 20px; }

.style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.style-card { border-radius: var(--radius); border: 1.5px solid var(--border); background: #fff; padding: 14px 8px; text-align: center; cursor: pointer; }
.style-card-icon { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto; }
.style-card span { display: block; font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--ink); }
.style-card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); }
.style-card[aria-pressed="true"] span { color: var(--accent-dark); }

.color-row { display: flex; gap: 18px; }
.color-opt { text-align: center; background: none; border: none; cursor: pointer; padding: 0; }
.swatch { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px transparent; display: block; margin: 0 auto; }
.color-opt[aria-pressed="true"] .swatch { box-shadow: 0 0 0 2px var(--accent); }
.color-name { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }

.size-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.size-head .eu { color: var(--ink); font-weight: 600; }
.size-guide-link { font-size: 12px; }
.size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.size-btn { height: 36px; border-radius: 8px; border: 1px solid #cfcac0; background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; }
.size-btn[aria-pressed="true"] { border: 1.5px solid var(--accent); background: var(--accent-light); color: var(--accent-dark); font-weight: 600; }
.size-btn[disabled] { border-style: dashed; color: #b3ada0; background: #fff; cursor: pointer; }

.notify-box { display: none; margin-top: 10px; padding: 10px 12px; background: var(--beige); border-radius: 8px; font-size: 12px; color: var(--ink); }
.notify-box.visible { display: block; }
.notify-box form { display: flex; gap: 6px; margin-top: 8px; }
.notify-box input[type="email"] { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.notify-box button { border: none; background: var(--accent); color: #fff; border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.notify-thanks { color: var(--accent-dark); font-weight: 600; }

.shop-materials {
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; max-width: 900px;
}
.shop-materials-block[hidden] { display: none; }
.shop-materials-block h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.shop-materials-block p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
@media (max-width: 700px) {
  .shop-materials { grid-template-columns: 1fr; gap: 24px; margin-top: 8px; padding: 24px 16px 0; }
}

.buy-block { margin-top: 24px; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.price { font-size: 22px; font-weight: 700; }
.price-note { font-size: 11px; color: var(--muted); text-align: right; max-width: 170px; }
.add-to-cart { width: 100%; height: 48px; border-radius: var(--radius); border: none; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.add-to-cart:hover { background: var(--accent-dark); }
.add-to-cart[disabled] { background: var(--border); color: var(--muted); cursor: not-allowed; }
.add-to-cart[disabled]:hover { background: var(--border); }
.coming-soon-notice { margin: 10px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* mobile */
@media (max-width: 768px) {
  .buy-cta { align-self: stretch; text-align: center; }

  .product-grid { grid-template-columns: 1fr; gap: 0; }
  .wrap.shop-page { padding: 0 0 90px; }
  .gallery-col { padding: 0 0 16px; }
  .main-image { border-radius: 0; }
  .thumb-row { padding: 0 16px; }
  .options-col { padding: 16px 16px 0; }

  .buy-block {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 15;
  }
  .price-row { flex-direction: column; align-items: flex-start; margin: 0; gap: 2px; }
  .price-note { text-align: left; max-width: none; }
  .add-to-cart { flex: 1; }
}

/* ============ checkout: qty, cart, shipping ============ */
.qty-field { margin-top: 4px; }
.qty-field input[type="number"] {
  width: 80px; height: 38px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-size: 14px; font-family: inherit;
}

.field-select {
  width: 100%; height: 42px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-size: 14px; background: #fff; color: var(--ink); font-family: inherit;
}

.cart-list { margin-top: 4px; }
.cart-item {
  display: flex; align-items: flex-start;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px;
  border-radius: 8px; transition: box-shadow 0.15s ease;
}
.cart-item:last-child { border-bottom: none; }
.cart-item.cart-item-blocked {
  box-shadow: 0 0 0 1.5px #c65c4f;
  padding-left: 8px; padding-right: 8px; margin: 0 -8px;
}
.cart-item-thumb {
  width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
  background: var(--beige); flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.cart-item-price { font-weight: 600; margin-top: 5px; }
.cart-item-remove {
  background: none; border: none; color: #b3453a; font-size: 12px;
  cursor: pointer; padding: 4px 0; text-decoration: underline; white-space: nowrap;
}
.cart-empty { color: var(--muted); font-size: 14px; padding: 4px 0; }
.cart-total-row {
  display: flex; justify-content: space-between; font-weight: 700;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px;
}

.checkout-error { color: #b3453a; font-size: 13px; margin-top: 12px; white-space: pre-wrap; }

.ppwr-notice {
  margin-top: 14px; padding: 14px 16px; border-radius: 10px;
  background: #fdf1ef; border: 1px solid #f0d3cd;
}
.ppwr-notice-title { font-weight: 700; font-size: 13px; color: #9a3f31; margin: 0 0 6px; }
.ppwr-notice-body { font-size: 13px; color: #7a4a42; line-height: 1.5; margin: 0; }
.ppwr-notice-link {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700;
  color: var(--accent-dark); text-decoration: none;
}
.ppwr-notice-link:hover { text-decoration: underline; }
.checkout-note { font-size: 12px; color: var(--muted); margin-top: 24px; line-height: 1.6; }

.btn-accent {
  display: inline-block; background: var(--accent); color: #fff; padding: 12px 28px;
  border-radius: var(--radius); font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer;
}
.btn-accent:hover { background: var(--accent-dark); }

/* ============ cart drawer ============ */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 60;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
  background: #fff; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%); transition: transform 0.25s ease;
  z-index: 61; display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer.wide-drawer { width: 460px; }

.cart-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cart-drawer-head h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin: 0; }
.cart-drawer-close {
  background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 4px 6px;
}
.cart-drawer-close:hover { color: var(--ink); }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cart-drawer-footer { border-top: 1px solid var(--border); padding: 16px 20px 20px; flex-shrink: 0; }

.cart-subtotal-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; }
.cart-subtotal-row .value { color: var(--muted); font-weight: 400; }
.shipping-preview-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 6px; }
.shipping-preview-row .value { color: var(--ink); font-weight: 600; }
.shipping-note { font-size: 11px; color: var(--muted); margin-top: 6px; }

@media (max-width: 640px) {
  .cart-drawer-body { padding: 14px 16px; }
  .cart-drawer-footer { padding: 14px 16px 18px; }
}

/* contact form (inside cart-drawer.wide-drawer) */
#contactForm .group-label { margin-top: 16px; }
#contactForm input.field-select,
#contactForm textarea.field-select { width: 100%; box-sizing: border-box; }

/* size guide (inside cart-drawer.wide-drawer) */
.size-guide-figure { position: relative; max-width: 300px; margin: 0 auto; }
.size-guide-illustration { display: block; width: 100%; }
.size-guide-figure-label {
  position: absolute;
  left: 32%; width: 36%;
  top: 60%; height: 11%;
  display: flex; align-items: center; justify-content: center;
  background: #e9f5f3;
  color: #134239;
  font-weight: 700;
  font-size: clamp(12px, 4.5vw, 16px);
  border-radius: 6px;
  transition: opacity 0.15s ease;
}
.size-finder { display: flex; gap: 14px; justify-content: center; margin: 16px 0 4px; flex-wrap: wrap; }
.size-finder-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.size-finder-field .field-select { min-width: 130px; }
.size-guide-table tr.match { background: var(--accent-light); }
.size-guide-table tr.match td { font-weight: 700; color: var(--accent-dark); }
.size-guide-instructions { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; margin: 12px 0 20px; }
.size-guide-table-wrap { overflow-x: auto; }
.size-guide-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.size-guide-table th, .size-guide-table td { border: 1px solid var(--border); padding: 8px 6px; text-align: center; }
.size-guide-table th { background: var(--accent-light); color: var(--accent-dark); font-weight: 600; }

/* ============ result pages (success / cancel) ============ */
.result-wrap { max-width: 480px; margin: 60px auto; padding: 0 24px; text-align: center; }
.result-icon {
  width: 64px; height: 64px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 20px;
}
.result-icon.ok { background: var(--accent-light); color: var(--accent-dark); }
.result-icon.cancel { background: var(--beige); color: var(--beige-dark); }
.result-wrap h1 { font-size: 22px; margin-bottom: 10px; }
.result-wrap p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.invoice-preview-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin: 24px 0; padding: 14px 18px; border: 1px solid var(--border);
  border-radius: 14px; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.invoice-preview-card:hover { border-color: var(--yol-accent); box-shadow: 0 4px 16px rgba(20, 31, 27, .08); }
.invoice-preview-mark {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: var(--beige); display: flex; align-items: center; justify-content: center;
  color: var(--yol-mark);
}
.invoice-preview-mark svg { width: 14px; height: 27px; display: block; }
.invoice-preview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.invoice-preview-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.invoice-preview-number { font-size: 15px; font-weight: 600; color: var(--ink); }
.invoice-preview-total { font-size: 15px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.invoice-preview-download {
  flex-shrink: 0; font-size: 12px; font-weight: 600; color: #fff;
  background: var(--yol-accent); padding: 7px 14px; border-radius: 20px; white-space: nowrap;
}
.result-invoice-note { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
@media (max-width: 480px) {
  .invoice-preview-card { flex-wrap: wrap; }
  .invoice-preview-total { order: 3; }
  .invoice-preview-download { order: 4; width: 100%; text-align: center; }
}
.result-actions { margin-top: 24px; }

/* ============ admin ============ */
.admin-wrap { max-width: 960px; }
/* body es un contenedor flex en columna (arreglo del footer) y .wrap se
   centra con margin:auto — en flex, los márgenes auto anulan el "stretch",
   así que el div se encogía/estiraba al ancho de su contenido más ancho que
   no se puede partir (la fila de pestañas: ~480px). Eso hacía la página
   entera más ancha que el móvil y Safari la alejaba y recortaba la
   derecha. Con un ancho explícito vuelve a ser el de la pantalla. */
body > .admin-wrap { width: 100%; }
/* El admin es una herramienta de trabajo, no la web de marca — todos sus
   títulos usan la fuente de cuerpo (sans-serif), nunca la serif editorial
   del sitio público, aunque hereden <h1>/<h2>/<h3>. */
.admin-wrap h1, .admin-wrap h2, .admin-wrap h3,
.admin-login-wrap h1, .admin-login-wrap h2, .admin-login-wrap h3 {
  font-family: var(--font-body);
  font-weight: 600;
}
.admin-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.admin-header .brand { margin-right: auto; }
.admin-header .brand { font-weight: 700; letter-spacing: 1px; font-size: 14px; }
.admin-header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-header a.logout { font-size: 13px; color: var(--muted); text-decoration: none; }
.admin-header a.logout:hover { color: var(--ink); }
.admin-sheet-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; padding: 4px 10px 4px 4px; border-radius: 20px;
  border: 1px solid var(--border);
}
.admin-sheet-link:hover { border-color: var(--accent); color: var(--accent-dark); }
.admin-sheet-icon { width: 18px; height: 18px; object-fit: contain; }
.admin-lang-switch { display: flex; gap: 2px; font-size: 12px; }
.admin-lang-switch a {
  padding: 4px 9px; border-radius: 20px; text-decoration: none; color: var(--muted); font-weight: 600;
}
.admin-lang-switch a.active { background: var(--accent); color: #fff; }

.admin-main-tabs {
  display: flex; gap: 4px; margin: 20px 0 28px; border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.admin-main-tabs a {
  font-size: 14px; font-weight: 600; padding: 10px 16px; text-decoration: none;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.admin-main-tabs a.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.admin-main-tabs a:hover { color: var(--ink); }
.admin-model-name { font-size: 14px; font-weight: 600; margin-top: 24px; display: flex; align-items: center; gap: 10px; }
.admin-model-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--beige); flex-shrink: 0; }

.shipping-origin-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 22px; margin-top: 22px; }
.shipping-origin-heading { font-size: 15px; font-weight: 700; margin: 0; }
.shipping-origin-section .admin-model-name:first-of-type { margin-top: 18px; }
.zone-summary { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

.zone-new-details, .zone-delete-details { margin-top: 14px; font-size: 13px; color: var(--muted); }
.zone-new-details summary, .zone-delete-details summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.zone-new-details .zone-new-form { margin-top: 10px; }

/* en pantallas estrechas 10 tallas no caben nunca — mejor dejar la tabla
   deslizarse hacia los lados que recortarla (el html tiene overflow-x:
   hidden globalmente, así que sin esto el contenido que no cabe
   desaparece sin más, no es "responsive", es un corte). */
/* Stock: en vez de una tabla ancha (color × talla) con scroll horizontal —
   que en varios intentos no se comportaba bien en móvil — cada color es su
   propia fila con las tallas en una rejilla que se reparte sola (flex-wrap)
   según el ancho disponible. Nunca hace falta desplazarse hacia los lados,
   a cualquier tamaño de pantalla, y los campos son más grandes para tocar
   bien con el dedo. */
.stock-color-row { margin: 18px 0; }
.stock-color-label { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.stock-size-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px 8px; max-width: 640px; }
.stock-size-input { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; }
.stock-size-input span { font-size: 11px; color: var(--muted); font-weight: 600; }
.stock-size-input input {
  width: 100%; height: 44px; padding: 4px; text-align: center; font-size: 16px;
  border: 1px solid var(--border); border-radius: 8px; font-family: inherit;
}
.stock-size-input input.agotado { background: #fbeceb; border-color: #e3a8a2; }

.input-price { width: 96px; }
.input-short { width: 70px; }

/* Products: precio base + un campo por color. Antes era una tabla con
   min-width (scroll lateral en móvil, la última columna quedaba cortada);
   ahora es una rejilla que se reparte sola según el ancho. */
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.price-cell {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600;
  background: var(--beige); padding: 10px; border-radius: 10px;
}
.price-cell-base { background: var(--accent-light); color: var(--accent-dark); }
.price-cell input {
  width: 100%; height: 40px; padding: 4px 10px; font-size: 15px; border: 1px solid var(--border);
  border-radius: 8px; font-family: inherit; background: #fff;
}

.admin-btn {
  padding: 11px 20px; background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-size: 14px; border-radius: var(--radius); font-weight: 600;
}
.admin-btn:hover { background: var(--accent-dark); }

.admin-notice {
  background: var(--accent-light); color: var(--accent-dark); padding: 10px 14px;
  margin-top: 14px; border-radius: 8px; font-size: 13px;
}

.admin-tabs { display: flex; gap: 6px; }
.admin-tabs a { font-size: 12px; padding: 5px 12px; border-radius: 20px; text-decoration: none; color: var(--muted); background: var(--beige); }
.admin-tabs a.active { background: var(--accent); color: #fff; }

.orders-search {
  width: 100%; max-width: 420px; padding: 9px 14px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 20px; margin-top: 4px; box-sizing: border-box;
}
.orders-search:focus { outline: none; border-color: var(--accent); }
.orders-section-heading { font-size: 15px; margin: 20px 0 0; }
.orders-section-heading-spaced { margin-top: 32px; }
.orders-pending-section {
  background: var(--beige);
  border-radius: var(--radius);
  padding: 4px 16px 16px;
  margin-top: 10px;
}
.orders-pending-section .order-card { background: #fff; }

.order-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-top: 14px; }
.order-card .order-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.order-card ul { margin: 10px 0; padding-left: 18px; font-size: 13px; }
.order-total { font-size: 13px; }
.order-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.order-status.pending { background: #fdf3dd; color: #8a6d1c; }
.order-status.shipped { background: var(--accent-light); color: var(--accent-dark); }
.order-status.refunded { background: #f6e4e1; color: #8c3a2e; margin-left: 6px; }
.order-refund-check { margin-top: 8px; }
.order-refund-check button { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; }

.ship-form { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 8px; margin-top: 10px; }
.ship-form input { padding: 7px 9px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.ship-form button { padding: 7px 16px; background: var(--ink); color: #fff; border: none; cursor: pointer; font-size: 12px; border-radius: 6px; }

.ship-info { font-size: 12px; color: var(--accent-dark); margin-top: 10px; }
.order-invoice { font-size: 13px; }
.order-empty { color: var(--muted); font-size: 13px; }

.order-edit-details { margin-top: 10px; font-size: 12px; color: var(--muted); }
.order-edit-details summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.order-edit-form {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: flex-end;
}
.order-edit-form label {
  display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); font-weight: 600; flex: 1 1 160px;
}
.order-edit-form input[type="text"], .order-edit-form input[type="email"] {
  padding: 7px 9px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;
}
.order-edit-resend { flex-direction: row !important; align-items: center; gap: 6px !important; flex: 0 0 auto !important; }
.order-edit-resend input[type="checkbox"] { width: 14px; height: 14px; }
.order-edit-form button { padding: 7px 16px; background: var(--ink); color: #fff; border: none; cursor: pointer; font-size: 12px; border-radius: 6px; }

@media (max-width: 640px) {
  .admin-wrap { padding: 20px 16px 40px; }
  /* Cabecera: marca + cerrar sesión arriba, Hoja de ventas + idioma debajo */
  .admin-header-right { order: 3; width: 100%; justify-content: space-between; gap: 10px; }
  /* Pestañas: en vez de una fila con scroll lateral (que escondía "Venta
     en persona" fuera de la pantalla), botones que saltan de línea. */
  .admin-main-tabs { flex-wrap: wrap; gap: 6px; overflow: visible; border-bottom: none; margin: 16px 0 22px; }
  .admin-main-tabs a {
    flex: 1 1 auto; text-align: center; padding: 10px 12px; margin: 0; border: none;
    border-radius: 10px; background: var(--beige); color: var(--ink);
  }
  .admin-main-tabs a.active { background: var(--accent); color: #fff; }
  /* iPhone Safari hace zoom automático al tocar cualquier campo con texto
     de menos de 16px — en el admin eso pasaba en casi todos. */
  .admin-wrap input:not([type="checkbox"]):not([type="radio"]),
  .admin-wrap select, .admin-wrap textarea, .admin-login-wrap input { font-size: 16px; }
  .ship-form { grid-template-columns: 1fr; }
  .ship-form input, .ship-form button, .order-edit-form button { min-height: 42px; }
  .order-card { padding: 14px; }
  .order-card .order-head { flex-wrap: wrap; gap: 6px; }
  .order-edit-form label { flex-basis: 100%; }
  .order-edit-form input[type="text"], .order-edit-form input[type="email"] { min-height: 42px; }
  /* Envíos: menos sangrado anidado (sección → zona) para ganar ancho */
  .shipping-origin-section { padding: 14px 12px 16px; }
  .zone-editor { padding: 12px; }
  .zone-editor-row label { flex: 1 1 130px; }
  .zone-editor-row input, .zone-editor-row select { width: 100%; min-height: 40px; }
  /* los desplegables llevan texto largo ("nunca (siempre cobra)") — más ancho que el campo de al lado */
  .zone-editor-row label:has(select) { flex: 2 1 170px; }
  .product-settings-row label:has(select) { flex-basis: 100%; }
  .orders-pending-section { padding: 2px 10px 12px; }
  .tag-add { max-width: none; width: 100%; min-height: 40px; }
  .tag-chip { padding: 6px 8px 6px 12px; font-size: 13px; }
  .tag-remove { font-size: 18px; padding: 0 4px; }
  .zone-expand-btn { padding: 8px 10px; }
  .admin-btn { width: 100%; padding: 14px 20px; }
}

/* admin login */
.admin-login-wrap { max-width: 340px; margin: 120px auto; padding: 0 24px; text-align: center; }
.admin-login-wrap h2 { font-size: 18px; margin-bottom: 20px; }
.admin-login-wrap input {
  width: 100%; padding: 11px 12px; font-size: 14px; margin-top: 10px;
  border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; font-family: inherit;
}
.admin-login-wrap button {
  width: 100%; padding: 11px 12px; font-size: 14px; margin-top: 14px; background: var(--accent);
  color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit;
}
.admin-login-wrap button:hover { background: var(--accent-dark); }
.admin-login-error { color: #b3453a; margin-top: 10px; font-size: 13px; }

.admin-login-remember {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted);
  text-align: left; cursor: pointer;
}
.admin-login-wrap .admin-login-remember input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }

/* dispositivos recordados (al final de cada pestaña del admin) */
.admin-devices { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; }
.admin-devices summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.admin-devices .order-status { margin-left: 6px; }
.admin-devices-forget-all {
  margin-top: 14px; background: none; border: none; color: #b3453a; font-size: 12px;
  cursor: pointer; padding: 6px 0; text-decoration: underline;
}

/* shipping zone editor */
.zone-editor { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 12px; background: #fff; }
.zone-editor.zone-disabled { background: #f7f7f5; opacity: 0.65; }
.zone-editor-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 10px; }
.zone-editor-row label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600;
}
/* compact on/off switch — the state speaks for itself, no "Enabled" text needed */
.zone-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.zone-toggle-input { position: absolute; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: pointer; }
.zone-toggle-slider {
  display: inline-block; width: 34px; height: 20px; border-radius: 20px;
  background: #cfcac0; transition: background 0.15s; position: relative;
}
.zone-toggle-slider::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.zone-toggle-input:checked + .zone-toggle-slider { background: var(--accent); }
.zone-toggle-input:checked + .zone-toggle-slider::before { transform: translateX(14px); }
.zone-toggle-input:focus-visible + .zone-toggle-slider { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.zone-editor-row input, .zone-editor-row select {
  font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;
}
.zone-countries-label { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0 0 6px; }

/* disabled zones collapse down to just the Enabled checkbox + name by
   default — expand icon reveals the full editor without losing anything */
.zone-collapsed-row { display: flex; align-items: center; gap: 14px; }
.zone-collapsed-label { display: none; font-size: 13px; color: var(--muted); flex: 1; }
.zone-expand-btn {
  display: none; background: none; border: none; cursor: pointer; font-size: 15px;
  color: var(--muted); margin-left: auto; line-height: 1; padding: 2px 6px;
  transition: transform 0.15s;
}
.zone-editor.zone-disabled .zone-collapsed-label,
.zone-editor.zone-disabled .zone-expand-btn { display: inline-flex; }
.zone-editor.zone-disabled .zone-editor-body { margin-top: 12px; }
.zone-editor.zone-disabled.zone-collapsed .zone-editor-body { display: none; }
.zone-editor.zone-disabled.zone-collapsed .zone-expand-btn { transform: rotate(-90deg); }
.zone-editor.zone-disabled:not(.zone-collapsed) { opacity: 0.85; }

/* country tag editor */
.tag-editor { display: flex; flex-direction: column; gap: 8px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--beige);
  border-radius: 20px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--ink); line-height: 1.4;
}
.tag-flag { font-size: 13px; }
.tag-remove {
  background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px;
  line-height: 1; padding: 0 3px; margin-left: 2px;
}
.tag-remove:hover { color: #b3453a; }
.tag-add {
  font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; max-width: 280px; background: #fff; color: var(--ink);
}
.zone-delete-form {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.zone-delete-form button {
  background: none; border: 1px solid #e3a8a2; color: #b3453a; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.zone-delete-form button:hover { background: #fbeceb; }

/* ============ content pages: home / areas / benefits / feedback ============ */

.page-hero {
  position: relative;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  padding: 60px 24px;
}
/* Art-directed background photo: a real <picture><source media>, not a CSS
   background-image swapped per @media — the latter makes Chrome's preload
   scanner speculatively fetch EVERY breakpoint's image regardless of which
   one actually applies (confirmed: both desktop + tablet downloaded on a
   pure desktop viewport). A real <picture> only ever fetches the one
   matching source. */
.page-hero-bg-wrap, .page-banner-bg-wrap { display: contents; }
.page-hero-bg, .page-banner-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45));
}
.page-hero-overlay { position: relative; z-index: 1; width: 100%; max-width: 720px; text-align: center; color: #fff; }
.page-hero-home { align-items: flex-end; padding-bottom: 52px; }
.page-hero-home::before { background: linear-gradient(180deg, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 100%); }
.page-hero-overlay h1 { font-size: clamp(32px, 5vw, 48px); margin: 0 0 16px; color: #fff; }
.page-hero-overlay p { font-size: 16px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .page-hero { min-height: 400px; } }
@media (max-width: 600px) { .page-hero { min-height: 340px; padding: 40px 20px; } }

@media (max-width: 600px) {
  .page-hero-home {
    flex-direction: column; align-items: stretch; justify-content: flex-end;
    min-height: 520px; padding: 0;
  }
  .page-hero-home::before {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.88) 96%);
  }
  .page-hero-home .page-hero-overlay {
    position: relative; z-index: 1; max-width: none; text-align: left;
    color: #fff; padding: 24px 24px 32px;
  }
  .page-hero-home .page-hero-overlay h1,
  .page-hero-home .page-hero-overlay p { color: #fff; }
}

.areas-list { display: flex; flex-direction: column; gap: 40px; padding-top: 48px; padding-bottom: 56px; }
.areas-item { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; }
.areas-item-img { width: 100%; border-radius: var(--radius); object-fit: cover; }
.areas-item-text { min-width: 0; }
.areas-item-text h2 { font-family: var(--font-heading); margin: 0 0 10px; font-size: 22px; font-weight: 600; }
.areas-item-text p { margin: 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 700px) {
  .areas-item { grid-template-columns: 1fr; text-align: center; }
  .areas-item-img { max-width: 260px; margin: 0 auto; }
}

.benefits-list { display: flex; flex-direction: column; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
.benefits-item { display: flex; align-items: center; gap: 40px; }
.benefits-item-reverse { flex-direction: row-reverse; }
.benefits-item-icon { flex: 0 0 33%; max-width: 280px; aspect-ratio: 1 / 1; height: auto; }
.benefits-item-text { flex: 1 1 0%; min-width: 0; }
.benefits-item-text h2 { font-family: var(--font-heading); margin: 0 0 10px; font-size: 24px; font-weight: 600; }
.benefits-item-text p { margin: 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 700px) {
  .benefits-item, .benefits-item-reverse { flex-direction: column; align-items: stretch; text-align: center; gap: 16px; }
  .benefits-item-icon { width: 100%; max-width: none; flex-basis: auto; }
}

.testimonial-grid {
  columns: 3 280px; column-gap: 20px; padding-top: 48px;
}
.testimonial-card {
  break-inside: avoid; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.testimonial-media { width: 100%; display: block; max-height: 260px; object-fit: cover; background: var(--beige); }
.testimonial-body { padding: 16px; }
.testimonial-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.testimonial-flag { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; }
.testimonial-title { font-size: 16px; margin: 0 0 8px; font-weight: 600; font-family: var(--font-body); }
.testimonial-title a { color: var(--accent-dark); }
.testimonial-content {
  font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0;
  max-height: 6.4em; overflow: hidden; position: relative;
}
.testimonial-content.expanded { max-height: none; }
.testimonial-show-more {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--accent-dark); background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em;
}
@media (max-width: 700px) { .testimonial-grid { columns: 1 100%; } }

.feedback-outro { text-align: center; padding: 56px 0; border-top: 1px solid var(--border); margin-top: 24px; }
.feedback-outro h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 600; margin: 0 0 12px; }
.feedback-outro p { max-width: 560px; margin: 0 auto 24px; color: var(--muted); line-height: 1.6; }
.feedback-outro-btn { display: inline-block; width: auto; padding: 14px 28px; text-decoration: none; }

.learn-more-btn {
  display: inline-block; margin-top: 8px; padding: 12px 26px; border-radius: var(--radius);
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px;
  border: none; cursor: pointer;
}
.learn-more-btn:hover { background: var(--accent-dark); }
.learn-more-btn-light { background: #fff; color: var(--ink); }
.learn-more-btn-light:hover { background: var(--accent-light); }

.home-why { display: flex; align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
.home-why-media { flex: 0 0 42%; }
.home-why-sole-wrap {
  position: relative; width: 100%; max-width: 260px; margin: 0 auto;
  aspect-ratio: 326 / 847;
}
.home-why-sole-outline, .home-why-sole-highlight {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.home-why-sole-outline { opacity: 0.3; }
.home-why-sole-highlight { opacity: 0; transition: opacity 0.7s ease; }
.home-why-sole-highlight.active { opacity: 1; }
.home-why-text { flex: 1 1 0%; min-width: 0; }
.home-why-text h2 { margin: 0 0 12px; font-size: 30px; }
.home-why-text p { margin: 0 0 8px; color: var(--muted); line-height: 1.6; }
@media (max-width: 700px) {
  .home-why { flex-direction: column; align-items: stretch; text-align: center; gap: 24px; }
  .home-why-media { flex: 0 0 auto; }
  .home-why-sole-wrap { max-width: 190px; }
}

.page-banner {
  position: relative; min-height: 420px; display: flex; align-items: center;
  background: #000; padding: 48px 24px;
}
.section-divider { position: absolute; left: 0; width: 100%; height: 70px; z-index: 2; line-height: 0; pointer-events: none; }
.section-divider-top { top: -1px; }
.section-divider-bottom { bottom: -1px; }
.section-divider svg { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) { .section-divider { height: 40px; } }
.page-banner::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5)); }
.page-banner-overlay { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: 0 auto; text-align: center; color: #fff; }
.page-banner-overlay h2 { color: #fff; font-size: clamp(26px, 4vw, 36px); margin: 0 0 14px; }
.page-banner-overlay p { line-height: 1.6; margin: 0; }
.page-banner-overlay-left { margin: 0 auto 0 0; text-align: left; }
.page-banner-overlay-right { margin: 0 0 0 auto; text-align: right; }
.page-banner-mobile-img { display: none; }

.page-banner-benefits {
  align-items: flex-start; min-height: 480px;
  padding-top: 96px; padding-bottom: 80px; padding-left: 0; padding-right: 0;
}
.page-banner-inner { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.page-banner-benefits .page-banner-overlay {
  max-width: none; width: 66%; margin-left: auto; margin-right: 0;
}
@media (max-width: 600px) {
  .page-banner-benefits {
    flex-direction: column; align-items: stretch; min-height: 0; padding: 0;
    background-color: var(--ink);
  }
  .page-banner-benefits .page-banner-bg-wrap { display: none; }
  .page-banner-benefits::before { display: none; }
  .page-banner-mobile-img { display: block; width: 100%; }
  .page-banner-benefits .page-banner-inner { padding: 0; max-width: none; }
  .page-banner-benefits .page-banner-overlay { max-width: none; width: 100%; text-align: left; margin: 0; padding: 24px 24px 32px; }
}

.home-action { display: flex; align-items: center; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.home-action-text { flex: 1 1 0%; min-width: 0; }
.home-action-text h2 { margin: 0 0 12px; font-size: 28px; }
.home-action-text p { margin: 0; color: var(--muted); line-height: 1.6; }
.home-action-media { flex: 0 0 34%; max-width: 320px; min-width: 0; }
.home-action-media img { width: 100%; border-radius: var(--radius); object-fit: cover; display: block; transition: opacity 0.4s ease; }
@media (max-width: 700px) {
  .home-action { flex-direction: column; align-items: stretch; }
  .home-action-media { flex: 0 0 auto; max-width: 240px; margin: 0 auto; }
}

.home-reco { padding-top: 56px; padding-bottom: 56px; }
.home-reco-title { text-align: center; font-size: 28px; margin: 0 0 36px; }
.home-reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
.home-reco-item { text-align: center; min-width: 0; }
.home-reco-icon { width: 92px; height: 92px; margin: 0 auto 14px; }
.home-reco-item h3 { margin: 0 0 6px; font-size: 15px; font-family: var(--font-body); font-weight: 700; }
.home-reco-item p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) {
  .home-reco-grid { grid-template-columns: 1fr 1fr; }
  .home-reco-icon { width: 76px; height: 76px; }
}

.home-about { padding-top: 24px; }
.home-about-media { position: relative; line-height: 0; }
.home-about-media img { width: 100%; height: auto; display: block; }
.home-about-media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff);
}
.home-about-content { padding-top: 8px; padding-bottom: 56px; }
.home-about-title {
  color: var(--ink); text-align: center; font-size: clamp(26px, 4vw, 38px); margin: 0 0 32px;
}
.home-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.home-about-grid p { min-width: 0; background: var(--beige); padding: 20px; border-radius: var(--radius); color: var(--ink); line-height: 1.6; font-size: 14px; margin: 0; }
@media (max-width: 700px) {
  .home-about-grid { grid-template-columns: 1fr; }
}

.home-journey { padding-top: 56px; padding-bottom: 24px; }
.home-journey-title { text-align: center; font-size: 26px; margin: 0 0 28px; }
.home-journey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.home-journey-grid p { min-width: 0; margin: 0; color: var(--muted); line-height: 1.6; }
.home-journey-media { position: relative; width: 100%; max-width: 760px; aspect-ratio: 1143 / 1093; margin: 0 auto; }
.home-journey-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 700px) {
  .home-journey-grid { grid-template-columns: 1fr; }
  .home-journey-media { max-width: 420px; }
}

/* ============ welcome / post-purchase care guide ============ */
.welcome-page { padding-top: 48px; }
.welcome-hero { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.welcome-hero h1 { font-size: 30px; margin-bottom: 12px; }
.welcome-hero p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.welcome-section { max-width: 760px; margin: 0 auto 48px; }
.welcome-section h2 { font-size: 22px; margin-bottom: 12px; color: var(--accent-dark); }
.welcome-section p { line-height: 1.7; color: var(--ink); }
.welcome-uses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.welcome-use-card { background: var(--beige); border-radius: var(--radius); padding: 20px; }
.welcome-use-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.welcome-use-card h3 { font-size: 16px; margin: 0 0 8px; }
.welcome-use-card p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.welcome-cta { display: flex; gap: 16px; justify-content: center; padding-bottom: 56px; align-items: center; }
.welcome-cta a:last-child { color: var(--ink); text-decoration: underline; font-size: 14px; }
@media (max-width: 760px) {
  .welcome-uses-grid { grid-template-columns: 1fr; }
}

.home-faq { padding-top: 24px; padding-bottom: 56px; }
.home-faq-title { text-align: center; font-size: 28px; margin: 0 0 32px; color: var(--accent-dark); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; padding: 18px 4px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-toggle-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-toggle-icon::before, .faq-toggle-icon::after {
  content: ''; position: absolute; background: var(--accent-dark); transition: transform 0.2s ease;
}
.faq-toggle-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-toggle-icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-question[aria-expanded="true"] .faq-toggle-icon::after { transform: scaleY(0); }
.faq-answer { padding: 0 4px 18px; }
.faq-answer p { margin: 0; color: var(--muted); line-height: 1.6; }

/* ============ venta manual (admin) ============ */
.vm-linea {
  border: 1.5px solid var(--border); border-radius: 14px; padding: 20px;
  margin-top: 16px; background: #fcfbf9;
}
.vm-linea-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.vm-linea-num { font-size: 15px; font-weight: 700; color: var(--ink); }
.vm-linea-remove {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.vm-linea-remove:hover { background: #fdeceb; color: #b3453a; border-color: #f3c6c2; }

.vm-picker-group { margin-bottom: 18px; }
.vm-picker-label {
  font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 10px;
}
.vm-producto-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.vm-producto-picker .style-card { padding: 16px 10px; }
.vm-producto-picker .style-card-icon { width: 48px; height: 48px; }

.vm-color-picker { display: flex; flex-wrap: wrap; gap: 18px; }
.vm-color-opt {
  background: none; border: none; cursor: pointer; padding: 4px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.vm-color-opt .swatch { width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 0 0 2px transparent; }
.vm-color-opt .color-name { font-size: 13px; margin-top: 8px; font-weight: 600; color: var(--muted); }
.vm-color-opt[aria-pressed="true"] .swatch { box-shadow: 0 0 0 2px var(--accent); }
.vm-color-opt[aria-pressed="true"] .color-name { color: var(--accent-dark); }

.vm-size-picker .size-btn[disabled] { cursor: not-allowed; }

.vm-size-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; max-width: 480px; }
.vm-size-picker .size-btn { height: 46px; font-size: 15px; }

.vm-qty-price-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.vm-stock-hint { font-size: 12px; color: var(--muted); align-self: center; }
.vm-qty-stepper { display: flex; align-items: center; gap: 0; }
.vm-qty-stepper button {
  width: 42px; height: 42px; border: 1.5px solid var(--border); background: #fff;
  font-size: 20px; cursor: pointer; color: var(--ink);
}
.vm-qty-stepper button:first-child { border-radius: 10px 0 0 10px; }
.vm-qty-stepper button:last-child { border-radius: 0 10px 10px 0; }
.vm-qty-stepper button:hover { background: var(--accent-light); border-color: var(--accent); }
.vm-qty-input {
  width: 52px; height: 42px; text-align: center; border: 1.5px solid var(--border);
  border-left: none; border-right: none; font-size: 16px; font-weight: 700; font-family: inherit;
}
.vm-price-label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink);
}
.vm-price-label input {
  height: 42px; width: 110px; font-size: 16px; padding: 0 12px; border: 1.5px solid var(--border);
  border-radius: 10px; font-family: inherit;
}
.vm-line-subtotal { margin-left: auto; font-size: 15px; color: var(--muted); align-self: center; }
.vm-line-subtotal strong { color: var(--ink); }

.vm-add-linea {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 16px; padding: 14px; border: 1.5px dashed var(--border); border-radius: 12px;
  background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted);
}
.vm-add-linea:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-light); }

.vm-customer-block {
  border-top: 1.5px solid var(--border); margin-top: 24px; padding-top: 20px;
}
.vm-customer-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.vm-customer-grid label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); flex: 1 1 200px;
}
.vm-customer-grid input, .vm-customer-grid select {
  height: 42px; font-size: 15px; padding: 0 12px; border: 1.5px solid var(--border);
  border-radius: 10px; font-family: inherit; box-sizing: border-box;
}

.vm-total-bar {
  display: flex; align-items: center; justify-content: space-between; margin-top: 20px;
  padding: 16px 20px; background: var(--accent-light); border-radius: 12px;
}
.vm-total-bar span { font-size: 15px; font-weight: 700; color: var(--accent-dark); }
.vm-total-bar strong { font-size: 22px; }

.vm-submit {
  width: 100%; margin-top: 16px; padding: 16px; font-size: 16px; border-radius: 12px;
}

@media (max-width: 640px) {
  .vm-producto-picker { grid-template-columns: repeat(2, 1fr); }
  .vm-size-picker { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-width: none; }
  .vm-line-subtotal { margin-left: 0; width: 100%; }
}