@font-face{font-family:'feather';font-display:block;
  src:url('https://bunny-cdn.ventasxmayor.com/static/assets/fonts/feather/feather-webfont.woff') format('woff'),
      url('/assets/fonts/feather/feather-webfont.woff') format('woff'),
      url('/assets/fonts/feather/feather-webfont.ttf') format('truetype')}
.fe{font-family:'feather'!important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}
.fe-sort:before{content:"\2195"}.fe-activity:before{content:"\e900"}.fe-airplay:before{content:"\e901"}.fe-alert-circle:before{content:"\e902"}.fe-alert-octagon:before{content:"\e903"}.fe-alert-triangle:before{content:"\e904"}.fe-align-center:before{content:"\e905"}.fe-align-justify:before{content:"\e906"}.fe-align-left:before{content:"\e907"}.fe-align-right:before{content:"\e908"}.fe-anchor:before{content:"\e909"}.fe-aperture:before{content:"\e90a"}.fe-arrow-down:before{content:"\e90b"}.fe-arrow-down-circle:before{content:"\e90c"}.fe-arrow-down-left:before{content:"\e90d"}.fe-arrow-down-right:before{content:"\e90e"}.fe-arrow-left:before{content:"\e90f"}.fe-arrow-left-circle:before{content:"\e910"}.fe-arrow-right:before{content:"\e911"}.fe-arrow-right-circle:before{content:"\e912"}.fe-arrow-up:before{content:"\e913"}.fe-arrow-up-circle:before{content:"\e914"}.fe-arrow-up-left:before{content:"\e915"}.fe-arrow-up-right:before{content:"\e916"}.fe-at-sign:before{content:"\e917"}.fe-award:before{content:"\e918"}.fe-bar-chart:before{content:"\e919"}.fe-bar-chart-2:before{content:"\e91a"}.fe-battery:before{content:"\e91b"}.fe-battery-charging:before{content:"\e91c"}.fe-bell:before{content:"\e91d"}.fe-bell-off:before{content:"\e91e"}.fe-bluetooth:before{content:"\e91f"}.fe-bold:before{content:"\e920"}.fe-book:before{content:"\e921"}.fe-book-open:before{content:"\e922"}.fe-bookmark:before{content:"\e923"}.fe-box:before{content:"\e924"}.fe-briefcase:before{content:"\e925"}.fe-calendar:before{content:"\e926"}.fe-camera:before{content:"\e927"}.fe-camera-off:before{content:"\e928"}.fe-cast:before{content:"\e929"}.fe-check:before{content:"\e92a"}.fe-check-circle:before{content:"\e92b"}.fe-check-square:before{content:"\e92c"}.fe-chevron-down:before{content:"\e92d"}.fe-chevron-left:before{content:"\e92e"}.fe-chevron-right:before{content:"\e92f"}.fe-chevron-up:before{content:"\e930"}.fe-chevrons-down:before{content:"\e931"}.fe-chevrons-left:before{content:"\e932"}.fe-chevrons-right:before{content:"\e933"}.fe-chevrons-up:before{content:"\e934"}.fe-chrome:before{content:"\e935"}.fe-circle:before{content:"\e936"}.fe-clipboard:before{content:"\e937"}.fe-clock:before{content:"\e938"}.fe-cloud:before{content:"\e939"}.fe-cloud-drizzle:before{content:"\e93a"}.fe-cloud-lightning:before{content:"\e93b"}.fe-cloud-off:before{content:"\e93c"}.fe-cloud-rain:before{content:"\e93d"}.fe-cloud-snow:before{content:"\e93e"}.fe-code:before{content:"\e93f"}.fe-codepen:before{content:"\e940"}.fe-command:before{content:"\e941"}.fe-compass:before{content:"\e942"}.fe-copy:before{content:"\e943"}.fe-corner-down-left:before{content:"\e944"}.fe-corner-down-right:before{content:"\e945"}.fe-corner-left-down:before{content:"\e946"}.fe-corner-left-up:before{content:"\e947"}.fe-corner-right-down:before{content:"\e948"}.fe-corner-right-up:before{content:"\e949"}.fe-corner-up-left:before{content:"\e94a"}.fe-corner-up-right:before{content:"\e94b"}.fe-cpu:before{content:"\e94c"}.fe-credit-card:before{content:"\e94d"}.fe-crop:before{content:"\e94e"}.fe-crosshair:before{content:"\e94f"}.fe-database:before{content:"\e950"}.fe-delete:before{content:"\e951"}.fe-disc:before{content:"\e952"}.fe-dollar-sign:before{content:"\e953"}.fe-download:before{content:"\e954"}.fe-download-cloud:before{content:"\e955"}.fe-droplet:before{content:"\e956"}.fe-edit:before{content:"\e957"}.fe-edit-2:before{content:"\e958"}.fe-edit-3:before{content:"\e959"}.fe-external-link:before{content:"\e95a"}.fe-eye:before{content:"\e95b"}.fe-eye-off:before{content:"\e95c"}.fe-facebook:before{content:"\e95d"}.fe-fast-forward:before{content:"\e95e"}.fe-feather:before{content:"\e95f"}.fe-file:before{content:"\e960"}.fe-file-minus:before{content:"\e961"}.fe-file-plus:before{content:"\e962"}.fe-file-text:before{content:"\e963"}.fe-film:before{content:"\e964"}.fe-filter:before{content:"\e965"}.fe-flag:before{content:"\e966"}.fe-folder:before{content:"\e967"}.fe-folder-minus:before{content:"\e968"}.fe-folder-plus:before{content:"\e969"}.fe-git-branch:before{content:"\e96a"}.fe-git-commit:before{content:"\e96b"}.fe-git-merge:before{content:"\e96c"}.fe-git-pull-request:before{content:"\e96d"}.fe-github:before{content:"\e96e"}.fe-gitlab:before{content:"\e96f"}.fe-globe:before{content:"\e970"}.fe-grid:before{content:"\e971"}.fe-hard-drive:before{content:"\e972"}.fe-hash:before{content:"\e973"}.fe-headphones:before{content:"\e974"}.fe-heart:before{content:"\e975"}.fe-help-circle:before{content:"\e976"}.fe-home:before{content:"\e977"}.fe-image:before{content:"\e978"}.fe-inbox:before{content:"\e979"}.fe-info:before{content:"\e97a"}.fe-instagram:before{content:"\e97b"}.fe-italic:before{content:"\e97c"}.fe-layers:before{content:"\e97d"}.fe-layout:before{content:"\e97e"}.fe-life-buoy:before{content:"\e97f"}.fe-link:before{content:"\e980"}.fe-link-2:before{content:"\e981"}.fe-linkedin:before{content:"\e982"}.fe-list:before{content:"\e983"}.fe-loader:before{content:"\e984"}.fe-lock:before{content:"\e985"}.fe-log-in:before{content:"\e986"}.fe-log-out:before{content:"\e987"}.fe-mail:before{content:"\e988"}.fe-map:before{content:"\e989"}.fe-map-pin:before{content:"\e98a"}.fe-maximize:before{content:"\e98b"}.fe-maximize-2:before{content:"\e98c"}.fe-menu:before{content:"\e98d"}.fe-message-circle:before{content:"\e98e"}.fe-message-square:before{content:"\e98f"}.fe-mic:before{content:"\e990"}.fe-mic-off:before{content:"\e991"}.fe-minimize:before{content:"\e992"}.fe-minimize-2:before{content:"\e993"}.fe-minus:before{content:"\e994"}.fe-minus-circle:before{content:"\e995"}.fe-minus-square:before{content:"\e996"}.fe-monitor:before{content:"\e997"}.fe-moon:before{content:"\e998"}.fe-more-horizontal:before{content:"\e999"}.fe-more-vertical:before{content:"\e99a"}.fe-move:before{content:"\e99b"}.fe-music:before{content:"\e99c"}.fe-navigation:before{content:"\e99d"}.fe-navigation-2:before{content:"\e99e"}.fe-octagon:before{content:"\e99f"}.fe-package:before{content:"\e9a0"}.fe-paperclip:before{content:"\e9a1"}.fe-pause:before{content:"\e9a2"}.fe-pause-circle:before{content:"\e9a3"}.fe-percent:before{content:"\e9a4"}.fe-phone:before{content:"\e9a5"}.fe-phone-call:before{content:"\e9a6"}.fe-phone-forwarded:before{content:"\e9a7"}.fe-phone-incoming:before{content:"\e9a8"}.fe-phone-missed:before{content:"\e9a9"}.fe-phone-off:before{content:"\e9aa"}.fe-phone-outgoing:before{content:"\e9ab"}.fe-pie-chart:before{content:"\e9ac"}.fe-play:before{content:"\e9ad"}.fe-play-circle:before{content:"\e9ae"}.fe-plus:before{content:"\e9af"}.fe-plus-circle:before{content:"\e9b0"}.fe-plus-square:before{content:"\e9b1"}.fe-pocket:before{content:"\e9b2"}.fe-power:before{content:"\e9b3"}.fe-printer:before{content:"\e9b4"}.fe-radio:before{content:"\e9b5"}.fe-refresh-ccw:before{content:"\e9b6"}.fe-refresh-cw:before{content:"\e9b7"}.fe-repeat:before{content:"\e9b8"}.fe-rewind:before{content:"\e9b9"}.fe-rotate-ccw:before{content:"\e9ba"}.fe-rotate-cw:before{content:"\e9bb"}.fe-rss:before{content:"\e9bc"}.fe-save:before{content:"\e9bd"}.fe-scissors:before{content:"\e9be"}.fe-search:before{content:"\e9bf"}.fe-send:before{content:"\e9c0"}.fe-server:before{content:"\e9c1"}.fe-settings:before{content:"\e9c2"}.fe-share:before{content:"\e9c3"}.fe-share-2:before{content:"\e9c4"}.fe-shield:before{content:"\e9c5"}.fe-shield-off:before{content:"\e9c6"}.fe-shopping-bag:before{content:"\e9c7"}.fe-shopping-cart:before{content:"\e9c8"}.fe-shuffle:before{content:"\e9c9"}.fe-sidebar:before{content:"\e9ca"}.fe-skip-back:before{content:"\e9cb"}.fe-skip-forward:before{content:"\e9cc"}.fe-slack:before{content:"\e9cd"}.fe-slash:before{content:"\e9ce"}.fe-sliders:before{content:"\e9cf"}.fe-smartphone:before{content:"\e9d0"}.fe-speaker:before{content:"\e9d1"}.fe-square:before{content:"\e9d2"}.fe-star:before{content:"\e9d3"}.fe-stop-circle:before{content:"\e9d4"}.fe-sun:before{content:"\e9d5"}.fe-sunrise:before{content:"\e9d6"}.fe-sunset:before{content:"\e9d7"}.fe-tablet:before{content:"\e9d8"}.fe-tag:before{content:"\e9d9"}.fe-target:before{content:"\e9da"}.fe-terminal:before{content:"\e9db"}.fe-thermometer:before{content:"\e9dc"}.fe-thumbs-down:before{content:"\e9dd"}.fe-thumbs-up:before{content:"\e9de"}.fe-toggle-left:before{content:"\e9df"}.fe-toggle-right:before{content:"\e9e0"}.fe-trash:before{content:"\e9e1"}.fe-trash-2:before{content:"\e9e2"}.fe-trending-down:before{content:"\e9e3"}.fe-trending-up:before{content:"\e9e4"}.fe-triangle:before{content:"\e9e5"}.fe-truck:before{content:"\e9e6"}.fe-tv:before{content:"\e9e7"}.fe-twitter:before{content:"\e9e8"}.fe-type:before{content:"\e9e9"}.fe-umbrella:before{content:"\e9ea"}.fe-underline:before{content:"\e9eb"}.fe-unlock:before{content:"\e9ec"}.fe-upload:before{content:"\e9ed"}.fe-upload-cloud:before{content:"\e9ee"}.fe-user:before{content:"\e9ef"}.fe-user-check:before{content:"\e9f0"}.fe-user-minus:before{content:"\e9f1"}.fe-user-plus:before{content:"\e9f2"}.fe-user-x:before{content:"\e9f3"}.fe-users:before{content:"\e9f4"}.fe-video:before{content:"\e9f5"}.fe-video-off:before{content:"\e9f6"}.fe-voicemail:before{content:"\e9f7"}.fe-volume:before{content:"\e9f8"}.fe-volume-1:before{content:"\e9f9"}.fe-volume-2:before{content:"\e9fa"}.fe-volume-x:before{content:"\e9fb"}.fe-watch:before{content:"\e9fc"}.fe-wifi:before{content:"\e9fd"}.fe-wifi-off:before{content:"\e9fe"}.fe-wind:before{content:"\e9ff"}.fe-x:before{content:"\ea00"}.fe-x-circle:before{content:"\ea01"}.fe-x-square:before{content:"\ea02"}.fe-zap:before{content:"\ea03"}.fe-zap-off:before{content:"\ea04"}.fe-zoom-in:before{content:"\ea05"}.fe-zoom-out:before{content:"\ea06"}
@view-transition{navigation:auto}::view-transition-old(root){animation-duration:.16s}::view-transition-new(root){animation-duration:.16s}@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}.nav-lbl{display:inline-flex;align-items:center;gap:6px;min-width:0}.nav-lbl .fe{font-size:1em;line-height:1;flex:0 0 auto}.nav-badge{flex:0 0 auto;font-size:9px;font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--sale,#e11d48);border-radius:100px;padding:2px 6px}@media print{.store-root header,.store-root footer,.wa-fab,.catnav,.cat-chips,.sc-sld,.store-root [class*=anuncio],.pdp-mbar,.cobar,.store-scroll-top,.sdealsw,.sm-drawer,.sm-scrim,.search-ov,.slogin-modal,.edp,.sacct .back,.od-print{display:none !important}.store-root{background:#fff !important;color:#000 !important}.store-root a{text-decoration:none;color:#000}}
/* card-kit base — canonical vars (--ck-*) + data-switches on the .ck root */
.ck{text-align:var(--ck-align,left)}
.ck[data-border=hairline]{border:1px solid var(--hair)}
.ck[data-border=solid]{border:2px solid var(--ink)}
.ck[data-border=shadow]{box-shadow:0 2px 12px rgba(0,0,0,.08)}
.ck[data-border=hairline],.ck[data-border=solid],.ck[data-border=shadow]{border-radius:var(--ck-radius,0px);overflow:hidden}
/* elevation (data-shadow) — independent of the border selector. A shadow-only
   card still needs the root radius so the shadow follows rounded corners. */
.ck[data-shadow=soft],.ck[data-shadow=float]{border-radius:var(--ck-radius,0px);transition:box-shadow .3s ease,transform .3s ease}
.ck[data-shadow=soft]{box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
.ck[data-shadow=float]{box-shadow:0 4px 10px rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.12)}
.ck[data-shadow=soft]:hover{box-shadow:0 2px 6px rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.10)}
.ck[data-shadow=float]:hover{box-shadow:0 6px 14px rgba(0,0,0,.10),0 20px 46px rgba(0,0,0,.16);transform:translateY(-2px)}
.ck[data-bg=surface]{background:var(--surface);padding:var(--ck-pad,0px)}
/* media */
.ck .ck-media{position:relative;aspect-ratio:var(--ck-aspect,4/5);background:var(--hair);overflow:hidden;border-radius:var(--ck-radius,0px)}
.ck[data-border=hairline] .ck-media,.ck[data-border=solid] .ck-media{border-radius:0}
.ck .ck-media img{width:100%;height:100%;object-fit:var(--ck-fit,cover);object-position:var(--ck-imgpos,center);display:block;
  transition:opacity var(--ck-dur,450ms) ease,transform .9s cubic-bezier(.2,.6,.2,1)}
.ck .ck-media .ck-alt{position:absolute;inset:0;opacity:0;height:100%}
.ck:hover .ck-media .ck-alt{opacity:1}
/* hover fx — data-hover=zoom is a legacy alias of =scale (saved overlay themes) */
.ck{transition:transform .3s ease}
.ck[data-hover=lift]:hover{transform:translateY(-3px)}
.ck[data-hover=scale]:hover .ck-media .ck-img,.ck[data-hover=zoom]:hover .ck-media .ck-img{transform:scale(var(--ck-zoom,1.04))}
.ck[data-hover=dim]:hover .ck-media>.ck-img{opacity:.85}
/* promo badge + positions/styles */
.ck .ck-ob{position:absolute;z-index:2;font-size:.625rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px}
.ck[data-badge=tl] .ck-ob{top:10px;left:10px}
.ck[data-badge=tr] .ck-ob{top:10px;right:10px}
.ck[data-badge=bl] .ck-ob{bottom:10px;left:10px}
.ck[data-badge-style=solid] .ck-ob{background:var(--brand-2);color:var(--on-brand)}
.ck[data-badge-style=soft] .ck-ob{background:color-mix(in srgb,var(--brand-2) 14%,var(--bg));color:var(--brand-2)}
.ck[data-badge-style=outline] .ck-ob{background:var(--bg);color:var(--ink);border:1px solid var(--ink)}
/* text stack (below-image cards; overlay/structural variants override) */
.ck .ck-kick{font-size:var(--ck-kick-s,.625rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ck-kick-c,var(--muted));margin:11px 2px 0;font-weight:600}
.ck .ck-kick+.ck-name{margin-top:3px}
.ck .ck-name{font-family:var(--ck-name-f,var(--f-sans));font-size:var(--ck-name-s,.875rem);font-weight:var(--ck-name-w,400);
  text-transform:var(--ck-name-tt,none);letter-spacing:var(--ck-name-sp,0em);line-height:1.4;margin:12px 2px 3px;
  display:-webkit-box;-webkit-line-clamp:var(--ck-name-cl,2);-webkit-box-orient:vertical;overflow:hidden;
  /* RESERVE the clamp height (line-clamp caps MAX lines but reserves none) so a
     1-line name box is as tall as a 2-line one → prices/meta ALIGN across a grid
     row instead of shifting down under longer names (SOTA product-grid rhythm) */
  min-height:calc(1.4em * var(--ck-name-cl,2))}
.ck .ck-name.it{font-style:italic}
.ck .ck-desc{font-size:var(--ck-desc-s,.75rem);color:var(--muted);margin:0 2px 4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:var(--ck-desc-cl,2);-webkit-box-orient:vertical;overflow:hidden}
.ck .ck-desc.it{font-style:italic}
.ck .ck-price{font-family:var(--ck-price-f,var(--f-sans));font-weight:var(--ck-price-w,500);font-size:var(--ck-price-s,.875rem);
  color:var(--ck-price-c,inherit);margin:0 2px}
.ck .ck-cuotas{font-size:var(--ck-cuotas-s,.6875rem);color:var(--muted);margin:3px 2px 0;letter-spacing:.02em}
/* swatch row (any card) */
.ck .ck-sws{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:9px 2px 0;min-height:var(--ck-sw-size,16px)}
.ck .ck-sw{width:var(--ck-sw-size,16px);height:var(--ck-sw-size,16px);border-radius:50%;border:1px solid var(--hair);
  box-shadow:inset 0 0 0 2px var(--surface);transition:transform .15s ease,box-shadow .15s ease;cursor:pointer}
.ck .ck-sws[data-shape=square] .ck-sw{border-radius:3px}
.ck .ck-sws[data-shape=pill] .ck-sw{border-radius:8px}
.ck .ck-sw:hover{transform:scale(1.18);box-shadow:inset 0 0 0 2px var(--surface),0 0 0 1.5px var(--brand-1)}
/* a text-LABEL swatch (options with no colour, e.g. a curva/size-run name) is a
   pill, not a colour dot. It carries the bare `.sw` class too, so the mobile
   tap law `.store-root .sw{width:40px!important;height:40px!important}` crammed
   the label into a 40px circle with the text overflowing (user report). width/
   height:auto !important (this rule's 3-class specificity beats the tap law's
   2-class one) keep it a content-sized pill; a touch min-height gives it the tap
   target instead of a square. */
.ck .ck-sw.chip{width:auto !important;height:auto !important;display:inline-block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-radius:999px;box-shadow:none;padding:3px 10px;font-size:.625rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
.ck .ck-sw.chip:hover{transform:none;box-shadow:none;border-color:var(--brand-1);color:var(--ink)}
@media(pointer:coarse),(max-width:760px){.ck .ck-sw.chip{min-height:32px}}
.ck .ck-more{font-size:.6875rem;color:var(--muted);font-weight:500}
.ck .ck-cnt{font-size:.6875rem;color:var(--muted);margin:6px 2px 0;letter-spacing:.02em}
/* quick-add (any card) */
.ck .ck-atc{border:0;cursor:pointer;font-size:.71875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:13px 16px;transition:.2s;width:100%;border-radius:var(--ck-radius,0px)}
.ck .ck-atc[data-s=ink]{background:var(--ink);color:var(--bg)}
.ck .ck-atc[data-s=brand]{background:var(--brand-2);color:var(--on-brand)}
.ck .ck-atc[data-s=outline]{background:var(--bg);color:var(--ink);border:1px solid var(--ink)}
.ck .ck-atc:hover{filter:brightness(1.08)}
/* S-126: tactile PRESS feedback. :hover never fires on touch, so without an
   :active state the primary card quick-add feels dead on tap. Darken on press
   (filter, not transform — the overlay variant already owns transform for its
   reveal). Fires on both mouse-down and touch-press; the button's transition
   (or its .22s overlay transition, which omits filter → instant) animates it. */
.ck .ck-atc:active{filter:brightness(.9)}
.ck .ck-atc:disabled{opacity:.55;cursor:default}
.ck .ck-atc[data-pos=overlay]{position:absolute;left:12px;right:12px;bottom:12px;width:auto;z-index:3;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}
.ck:hover .ck-atc[data-pos=overlay],.ck:focus-within .ck-atc[data-pos=overlay]{opacity:1;pointer-events:auto;transform:none}
.ck .ck-atc[data-pos=below]{margin-top:12px}
@media(hover:none){
  .ck .ck-atc[data-pos=overlay]{opacity:1;pointer-events:auto;transform:none;position:static;left:auto;right:auto;bottom:auto;width:100%;margin-top:12px}
}
/* list-row is a HORIZONTAL card (image | info | ATC). The product grids are
   card-variant-agnostic (repeat(N,minmax(0,1fr))), so a horizontal card dropped
   into a 2-4 col cell has no room — image+ATC alone exceed the cell and the info
   column (flex:1;min-width:0) collapses to 0px (name/price vanish). :has() lets
   the grid itself react: a grid holding list-row cards drops to full-width rows
   (1-col mobile, 2-col from 900px). Specificity (.store-root .grid .lrcard = 3
   classes) beats the stages' `.xxx .grid` (2), so no !important. */
.store-root .grid:has(.lrcard){grid-template-columns:1fr}
@media(min-width:900px){.store-root .grid:has(.lrcard){grid-template-columns:1fr 1fr}}

/* pdp-kit — style knobs read off data-* on any PDP root, restyling the shared
   .sz/.sw selector buttons, the .atc button, and the .qty stepper WITHOUT
   touching the deal-marked render markup. name size = --pk-name, read directly
   by each variant's h1 rule (legacy uses --lp-name, set from the same knob). */
/* the DTO's axis tokens are lowercased (matching identity across 'Negro/M' &
   'M/Negro') — size pills uppercase at DISPLAY time, like the .szfill OOS chip */
.store-root .sizes .sz{text-transform:uppercase}
/* selector: chips (pill) / buttons (default squared) / underline (text tabs) */
.store-root [data-sel=chips] .sz{border-radius:999px}
.store-root [data-sel=underline] .sz{border:0;border-bottom:2px solid transparent;padding-left:2px;padding-right:2px;background:none !important;color:var(--muted)}
.store-root [data-sel=underline] .sz.on{border-bottom-color:var(--ink);color:var(--ink) !important}
.store-root [data-sel=underline] .sz:disabled{border-bottom-color:transparent}
/* ATC style — data-atc on the root switches the shared .atc treatment */
.store-root [data-atc=brand] .atc{background:var(--brand-2)}
.store-root [data-atc=brand] .atc:hover{filter:brightness(1.08)}
.store-root [data-atc=outline] .atc{background:var(--bg);color:var(--ink);border:1px solid var(--ink)}
.store-root [data-atc=outline] .atc:hover{background:var(--ink);color:var(--bg);filter:none}
/* S-127: tactile PRESS feedback for the primary buy button, shared across all 7
   PDP variants (each defines its own `.Xpdp .atc`) + the cart ATC. `:hover` never
   fires on touch, so without `:active` the main add-to-cart feels dead on tap.
   One rule (darken on press, `filter` — composes with every variant's bg/border)
   mirrors the card quick-add press (S-126, `.ck-atc:active`). */
.store-root .atc:active{filter:brightness(.9)}
/* qty stepper style */
.store-root [data-qty=pill] .qty{border-radius:999px}
.store-root [data-qty=minimal] .qty{border:0}
.store-root [data-qty=minimal] .qty button{border:1px solid var(--hair)}
/* colour-axis FILL buttons: a resolved colour turns the whole selector button
   into the swatch — engine fill as background, name ON it in contrast-computed
   type (inline :color + text-shadow). Ring on selection, theme-var chrome. */
.store-root .sz.szfill{position:relative;border:1px solid var(--hair,rgba(0,0,0,.15));min-width:64px;font-weight:600}
.store-root .sz.szfill.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
/* SELECTED clarity — shared by every PDP axis (.sz colour/size buttons + .sw
   dots; selected = .on). A swatch FILL can MASQUERADE as selection (a black
   'Negro' tile reads as chosen just for being dark), so selection must not lean
   on the fill/ring alone. Stamp an unmistakable corner CHECK on the selected
   swatch/size — theme disc + ink check + hairline ring, legible over ANY fill.
   ::before (the deal marker owns ::after); placed INSIDE the corner so the info-
   column scroller never clips it; pointer-events:none so it never eats clicks. */
.store-root .sz,.store-root .sw{position:relative}
.store-root .sz.on::before,.store-root .sw.on::before{content:"\2713";position:absolute;top:3px;right:3px;z-index:2;
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--bg);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);
  font-size:10px;font-weight:900;line-height:1;pointer-events:none}
.store-root .lbl .lblsel{opacity:.6;font-weight:400;margin-left:8px;text-transform:none;letter-spacing:0}
/* colour-axis chips: out-of-stock colour keeps its swatch but reads agotado —
   dimmed + struck dot; stays CLICKABLE (selecting it reveals notify-stock) */
.store-root .sz.coos{opacity:.55}
.store-root .sz.coos .swdot,.store-root .sz.coos .swbig{position:relative}
.store-root .sz.coos .swdot:after,.store-root .sz.coos .swbig:after{content:"";position:absolute;
  left:-2px;right:-2px;top:50%;border-top:1.5px solid var(--ink);opacity:.7;transform:rotate(-45deg)}
/* zoom-on-hover for stacked galleries (opt-in) */
.store-root [data-zoom] .gallery .shot img,.store-root [data-zoom] .gallery .main img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.store-root [data-zoom] .gallery .shot:hover img,.store-root [data-zoom] .gallery .main:hover img{transform:scale(1.04)}
/* scroll-hint pill (pk/iscroll) — sticky at the scroller's bottom edge while
   more content hides below; fades out near the end. Zero-height sticky box so
   it takes no layout space; the button lifts up INTO the visible area. */
.store-root .pk-shint{position:sticky;bottom:0;height:0;display:flex;justify-content:center;
  pointer-events:none;z-index:6;opacity:1;transition:opacity .25s,visibility .25s}
.store-root .pk-shint.off{opacity:0;visibility:hidden}
.store-root .pk-shint button{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  transform:translateY(calc(-100% - 10px));height:36px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  background:var(--ink);color:var(--bg);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.store-root .pk-shint button:hover{background:var(--brand-2);color:var(--on-brand,#fff)}
.store-root .pk-shint svg{animation:pk-shb 1.6s ease-in-out infinite}
@keyframes pk-shb{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.store-root .pk-shint svg{animation:none}}

/* filter-kit colour styles (grid / chips / pantone). Structural sidebar and
   dropdown CSS stays in sgf / sort.cljs; these are the NEW colour skins. */
.fk-cgrid{display:grid;grid-template-columns:repeat(var(--fk-cols,5),minmax(0,1fr));gap:10px;padding:2px 0 4px}
.fk-sw{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--muted)}
.fk-sw .fk-fill{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);display:block;
  transition:transform .15s ease,box-shadow .15s ease}
.fk-sw:hover .fk-fill{transform:scale(1.08)}
/* selection ring lives on a ::after PSEUDO: the vxm.color engine fill is an
   INLINE style whose background/box-shadow override any css ring on the
   element itself (background shorthand even resets background-clip), and the
   filter panels clip outlines drawn outside the box (user 2026-07-10) */
.fk-sw.on .fk-fill{position:relative}
.fk-sw.on .fk-fill::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--ink);box-shadow:inset 0 0 0 2.5px var(--bg)}
.fk-sw.on{color:var(--ink)}
.fk-sw .fk-lbl{font-size:.625rem;letter-spacing:.02em;text-align:center;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* shade tokens arrive lowercase from the resolver — read as names everywhere */
.fk-lbl,.fk-chip .fk-lbl,.fk-card .fk-lbl{text-transform:capitalize}
.fk-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px}
.fk-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--hair);
  border-radius:999px;text-decoration:none;color:var(--ink);font-size:.75rem;transition:border-color .15s}
.fk-chip:hover{border-color:var(--ink)}
.fk-chip.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.fk-chip .fk-mini{width:13px;height:13px;border-radius:50%;border:1px solid var(--hair);flex:0 0 auto}
.fk-chip .cnt{opacity:.55;font-size:.6875rem}
/* stage host (fk/layout): sidebar variant on ANY grid stage — 2-col with a
   sticky aside desktop, collapsible <details> on mobile. The .facets
   structural rules are scoped here too (they lived only under .sgf). */
.fk-host .fk-cols{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start;
  max-width:1440px;margin:0 auto;padding:0 24px}
.fk-host .fk-main{min-width:0}
/* Sticky aside with its OWN scroll (a long facet list is taller than the viewport,
   so a plain top-sticky would leave the bottom unreachable). The scrollbar sits
   FLUSH at the panel's own right edge and the content uses the full column width —
   the old padding-right/negative-margin hack floated the bar out into the grid gap,
   which read as an ugly inset. */
.fk-host .fk-aside .facets{position:sticky;top:calc(var(--hdr-h,0px) + 24px);
  max-height:calc(100dvh - var(--hdr-h,0px) - 48px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.fk-host .fk-aside .facets::-webkit-scrollbar{width:6px}
.fk-host .fk-aside .facets::-webkit-scrollbar-thumb{background:var(--hair);border-radius:3px}
/* Layer 2: 'ver más' toggle under a capped facet group */
.fk-more{display:inline-flex;align-items:center;gap:4px;margin:8px 0 2px;padding:2px 0;background:none;border:0;
  cursor:pointer;color:var(--brand-1);font:inherit;font-size:.75rem;letter-spacing:.02em;text-decoration:underline;
  text-underline-offset:3px}
.fk-more:hover{color:var(--ink)}
.fk-host .facets .fhead{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:18px}
.fk-host .facets .fhead b{font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.fk-host .facets .clear{font-size:.6875rem;letter-spacing:.04em;color:var(--brand-1);text-decoration:none}
.fk-host .facets .clear:hover{text-decoration:underline}
.fk-host .fgroup{margin-bottom:26px}
.fk-host .fgroup h4{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}
.fk-host .frow{display:flex;align-items:center;gap:10px;padding:4px 0;color:inherit;text-decoration:none;font-size:.84375rem;cursor:pointer}
.fk-host .frow:hover{color:var(--ink)}
.fk-host .frow .box{width:15px;height:15px;border:1px solid var(--hair);border-radius:3px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.12s}
.fk-host .frow.on .box{background:var(--ink);border-color:var(--ink)}
.fk-host .frow .box svg{width:11px;height:11px;stroke:var(--bg);stroke-width:3;fill:none;display:none}
.fk-host .frow.on .box svg{display:block}
.fk-host .frow .dot{width:15px;height:15px;border-radius:50%;border:1px solid var(--hair);flex:0 0 auto;box-shadow:inset 0 0 0 2px var(--surface)}
.fk-host .frow.on .dot{position:relative}
.fk-host .frow.on .dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--ink);box-shadow:inset 0 0 0 2px var(--bg)}
.fk-host .frow .lbl{flex:1;text-transform:capitalize}
.fk-host .frow .cnt{font-size:.6875rem;color:var(--muted)}
.fk-host .frow.on{color:var(--ink);font-weight:500}
.fk-host .fk-mf{display:none}
@media(max-width:860px){
  .fk-host .fk-cols{grid-template-columns:minmax(0,1fr);gap:18px;padding:0 14px}
  .fk-host .fk-aside{display:none}
  .fk-host .fk-mf{display:block;margin:0 14px 4px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface)}
  .fk-host .fk-mf summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    padding:13px 16px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  .fk-host .fk-mf summary::-webkit-details-marker{display:none}
  .fk-host .fk-mf .facets{padding:4px 16px 18px}
}
.fk-btns{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px}
.fk-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:54px;min-height:36px;
  padding:8px 14px;border:1px solid var(--hair);border-radius:var(--radius);text-decoration:none;
  font-size:.75rem;font-weight:600;transition:box-shadow .15s,transform .15s}
.fk-btn:hover{transform:translateY(-1px)}
.fk-btn.on{border:2.5px solid var(--ink)}
.fk-btn .cnt{font-weight:400;opacity:.85;font-size:.6875rem}
.fk-pantone{display:grid;grid-template-columns:repeat(var(--fk-cols,3),minmax(0,1fr));gap:10px;padding:2px 0 4px}
.fk-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--hair);
  border-radius:calc(var(--radius)*.6);overflow:hidden;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.fk-card:hover{border-color:var(--ink)}
.fk-card.on{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.fk-card .fk-paint{display:block;height:44px}
.fk-card .fk-meta{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:6px 8px}
.fk-card .fk-lbl{font-size:.6875rem;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fk-card .cnt{font-size:.625rem;color:var(--muted)}

.sdeal{border:1px solid color-mix(in srgb,var(--brand-2) 40%,var(--hair));border-radius:var(--radius);
  padding:14px 16px;margin:0 0 22px;background:color-mix(in srgb,var(--brand-2) 7%,transparent)}
.sdeal .row{display:flex;align-items:center;gap:10px;font-size:.8125rem;line-height:1.4}
.sdeal .row + .row{margin-top:9px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--brand-2) 18%,transparent)}
.sdeal .ic{flex:0 0 auto;width:18px;height:18px;display:grid;place-items:center;color:var(--brand-2);font-size:.8125rem}
.sdeal .lbl{flex:1;color:var(--ink)}
.sdeal .lbl b{font-weight:600}
.sdeal .amt{flex:0 0 auto;font-weight:600;color:var(--brand-2);white-space:nowrap}
/* muted hint text sits on the brand-2-tinted .sdeal panel → darken toward ink so
   it clears WCAG AA contrast on the tint (plain --muted dips just under 4.5:1) */
.sdeal .opp .lbl,.sdeal .miss{color:color-mix(in srgb,var(--muted) 68%,var(--ink))}
.sdeal .ship .ic{color:var(--brand-2)}
/* deals strip (catalog-level discovery — from the session rules, no per-product compute) */
/* S-7: the wrapper carries the opaque bg + hairline so the .hfade edge mask
   on the scroller fades CONTENT only (masking the bar itself would notch its
   background and border at the viewport edge) */
.sdealsw{background:var(--surface);border-bottom:1px solid var(--hair)}
.sdeals{display:flex;align-items:center;gap:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sdeals::-webkit-scrollbar{display:none}
.sdeals .lead{flex:0 0 auto;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:0 18px;white-space:nowrap}
.sdeals .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;font-size:.78125rem;
  white-space:nowrap;color:var(--ink);border-left:1px solid var(--hair);background:none;border-top:0;border-bottom:0;
  border-right:0;font:inherit;cursor:pointer;transition:background var(--deal-t-fast) var(--deal-ease)}
.sdeals .chip:hover{background:var(--deal-bg)}
.sdeals .all{flex:0 0 auto;padding:11px 18px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;color:var(--muted);
  text-decoration:none;border-left:1px solid var(--hair);white-space:nowrap}
.sdeals .all:hover{color:var(--deal-ink)}
.sdeals .chip .ic{flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center;color:var(--deal-ink,var(--brand-2))}
.sdeals .chip.soon{color:color-mix(in srgb,var(--muted) 60%,var(--ink))}
.sdeals .chip.soon .ic{color:var(--muted)}
.scopps{margin:6px 0 14px}
/* coupon redeem (cart) */
.scoupon{display:flex;gap:8px;align-items:center;margin:14px 0 0;flex-wrap:wrap}
.scoupon input{flex:1;min-width:120px;height:42px;padding:0 13px;border:1px solid var(--hair);border-radius:var(--radius);
  font:inherit;font-size:.8125rem;background:var(--surface);color:inherit;letter-spacing:.04em;text-transform:uppercase}
.scoupon input:focus{outline:1.5px solid var(--ink);outline-offset:1px}
.scoupon button{flex:0 0 auto;height:42px;padding:0 18px;background:var(--ink);color:var(--bg);border:0;border-radius:var(--radius);
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}
.scoupon button:hover{background:var(--brand-2)}.scoupon button:disabled{opacity:.5;cursor:default}
.scoupon .err{flex:1 0 100%;color:var(--brand-2);font-size:.75rem;margin:2px 0 0}
.scoupon.on{justify-content:space-between;padding:11px 14px;border:1px solid color-mix(in srgb,var(--brand-2) 40%,var(--hair));
  border-radius:var(--radius);background:color-mix(in srgb,var(--brand-2) 7%,transparent)}
.scoupon.on .tag{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:600;color:var(--ink)}
.scoupon.on .rm{height:auto;padding:0;background:none;color:var(--muted);text-decoration:underline;letter-spacing:.02em;
  text-transform:none;font-weight:400}
.scoupon.on .rm:hover{background:none;color:var(--ink)}

/* line */
.dcl{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dcl .was{color:var(--deal-strike);text-decoration:line-through;font-size:.82em}
.dcl .now{font-variant-numeric:tabular-nums}
.dclm{display:inline-flex;align-items:center;gap:5px;font-size:.65625rem;font-weight:600;color:var(--deal-ink);
  letter-spacing:.04em;margin-top:3px;max-width:100%;min-width:0}
.dclm>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
/* inside a cart LINE the mark sits in the item-info column (minmax(0,1fr) —
   real width cap) and the etiqueta is the deal's meaning: it WRAPS, never
   truncates (polish ledger P1-1) */
.ln .dclm{margin-top:8px;align-items:flex-start}
.ln .dclm>span{white-space:normal;overflow:visible;text-overflow:clip}
/* breakdown */
.dbrk{margin:2px 0 4px;border-top:1px solid var(--deal-line);padding-top:9px}
/* no double rule when the ledger sits right under a bordered heading
   (designer [COORD] 2026-07-02: checkout 'TU PEDIDO' + a second line) */
h2+.dbrk,h3+.dbrk{border-top:0;padding-top:2px}
.dbrk details summary{list-style:none;cursor:pointer;display:flex;gap:10px;justify-content:space-between;align-items:center;
  font-size:.8125rem;font-weight:600;color:var(--deal-ink);border-radius:8px;margin:-4px -6px;padding:4px 6px;
  transition:background var(--deal-t-fast) var(--deal-ease)}
.dbrk details summary:hover{background:color-mix(in srgb,var(--deal-ink) 7%,transparent)}
.dbrk details summary::-webkit-details-marker{display:none}
.dbrk details summary .disc{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px}
.dbrk details summary .disc .vd{display:inline-flex;align-items:center;gap:5px;font-size:.6875rem;font-weight:600;line-height:1;
  padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--deal-ink) 12%,transparent);color:var(--deal-ink);white-space:nowrap}
.dbrk details summary:hover .disc .vd{background:color-mix(in srgb,var(--deal-ink) 20%,transparent)}
.dbrk details summary .disc .vd .vless{display:none}
.dbrk details[open] summary .disc .vd .vmore{display:none}
.dbrk details[open] summary .disc .vd .vless{display:inline}
.dbrk details summary .disc .vd .car{font-size:.6875rem;opacity:.85;transition:transform var(--deal-t-fast) var(--deal-ease)}
.dbrk details[open] summary .disc .vd .car{transform:rotate(180deg)}
.dbrk details .rows{margin-top:8px}
.dbrk .hd{font-size:.59375rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--deal-ink);margin:0 0 7px}
.dbrk .row{display:flex;align-items:baseline;gap:8px;font-size:.78125rem;margin:0 0 5px;color:var(--ink)}
.dbrk .row .ic{flex:0 0 auto;color:var(--deal-ink);display:inline-flex}
.dbrk .row .lb{flex:1;min-width:0;overflow-wrap:anywhere}
.dbrk .row .amt{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--deal-ink);font-weight:600}
.dbrk .row.ship .amt{font-weight:600;letter-spacing:.06em;font-size:.65625rem;text-transform:uppercase}
.dbrk .tot{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 2px;
  padding-top:8px;border-top:1px solid color-mix(in srgb,var(--deal-line) 55%,transparent);
  font-size:.8125rem;font-weight:600;color:var(--deal-ink)}
.dbrk .tot .pc{font-size:.6875rem;font-weight:600;opacity:.85}
.dbrk.pulse .tot{animation:dbrk-in var(--deal-t-med) var(--deal-ease)}
@keyframes dbrk-in{0%{background:var(--deal-bg)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.dbrk.pulse .tot{animation:none}}
/* opportunity meters */
.dopps{margin:10px 0 4px}
.dopps .op{margin:0 0 9px}
.dopps .op .ln1{display:flex;align-items:baseline;gap:8px;font-size:.75rem;color:var(--ink)}
.dopps .op .ln1 .ic{color:var(--deal-ink);flex:0 0 auto;display:inline-flex}
.dopps .op .ln1 .lb{flex:1;min-width:0;overflow-wrap:anywhere}
.dopps .op .ln1 .ms{flex:0 0 auto;color:var(--deal-ink);font-weight:600;font-variant-numeric:tabular-nums;font-size:.71875rem}
.dopps .op .bar{height:3px;border-radius:2px;margin-top:5px;overflow:hidden;
  background:color-mix(in srgb,var(--deal-line) 55%,transparent)}
.dopps .op .bar i{display:block;height:100%;background:var(--deal-accent);
  transition:width var(--deal-t-med) var(--deal-ease)}
@media (prefers-reduced-motion:reduce){.dopps .op .bar i{transition:none}}
/* exclusivity honesty — 'aplicamos la mejor' under the receipt (plan C1) */
.dbrk .xcl{font-size:.6875rem;color:var(--muted);margin:7px 0 0;padding-left:12px;position:relative;line-height:1.4}
.dbrk .xcl::before{content:'';position:absolute;left:0;top:.5em;width:5px;height:1px;background:var(--deal-line)}
.dlive{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* announcement-slot free-ship progress (DS6 — order-level ONLY, contextual) */
/* S-8: the label was flex:0 0 auto — it refused to shrink, overflowed the row
   at phone widths AND squeezed the progress bar to 0 (invisible). Intrinsic
   reflow instead: the label shrinks/wraps (min-width:0), the bar keeps a
   140px minimum and WRAPS to its own full-width row when the line is tight. */
.dship{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;max-width:1440px;margin:0 auto;
  padding:8px clamp(18px,4vw,40px);font-size:.75rem;color:var(--deal-ink)}
.dship .lb{flex:0 1 auto;min-width:0;font-weight:600;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.dship .bar{flex:1 1 140px;height:3px;border-radius:2px;overflow:hidden;max-width:340px;
  background:color-mix(in srgb,var(--deal-line) 55%,transparent)}
.dship .bar i{display:block;height:100%;background:var(--deal-accent);
  transition:width var(--deal-t-med) var(--deal-ease)}
.dship-wrap{border-bottom:1px solid var(--hair);background:var(--deal-bg)}
/* payment comparison cards (checkout §9.4 — totals first, math visible) */
.dpay{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
/* each card is a 3-row SUBGRID (name · total · recargo/deal line) spanning the
   parent's rows, so cards sharing a visual row share those row heights: a method
   whose NAME wraps to 2 lines (e.g. 'Pago efectivo al entregar con moto') grows
   row 1 for BOTH cards in the row, keeping every card's TOTAL on one aligned
   baseline (was: flex-column, so a 2-line name pushed only its own price down →
   a 14px jog vs its sibling). The empty 3rd row on a no-recargo card reserves
   the line so totals align across recargo/no-recargo cards too. Degrades to the
   old flex look where subgrid is unsupported. */
.dpay .pc{border:1px solid var(--hair);border-radius:var(--deal-radius);padding:12px 14px;
  display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:3px;background:var(--surface)}
.dpay .pc.best{border-color:var(--deal-line);background:var(--deal-bg)}
/* selectable: cursor + a clear checked state (ring + brand tint), keyboard-focusable */
.dpay .pc{cursor:pointer;transition:border-color .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.dpay .pc:hover{border-color:var(--brand)}
.dpay .pc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dpay .pc.sel{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.dpay .pc .nm{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.dpay .pc .tt{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.dpay .pc .dl{font-size:.6875rem;color:var(--deal-ink);font-weight:600}
.dpay .pc .rg{font-size:.6875rem;color:var(--muted)}
@media(max-width:520px){.dpay{grid-template-columns:1fr 1fr}}

.dpg{max-width:1080px;margin:0 auto;padding:clamp(26px,5vw,54px) clamp(18px,4vw,40px) 70px}
.dpg h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.625rem,4vw,2.375rem);margin:0 0 6px;text-align:center}
.dpg .sub{text-align:center;color:var(--muted);font-size:.84375rem;margin:0 0 34px}
.dpg .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.dpg .bc{border:1px solid var(--deal-line);border-radius:calc(var(--deal-radius) + 4px);padding:18px;
  display:flex;flex-direction:column;gap:10px;background:var(--surface)}
/* upcoming deals: de-emphasize via CHROME (dashed border, tinted bg, dimmed
   icon disc) — NEVER whole-card opacity, which fades the TEXT below AA
   (the DS9 alpha anti-pattern; was an LH color-contrast fail) */
.dpg .bc.soon{border-style:dashed;background:color-mix(in srgb,var(--surface) 88%,var(--hair))}
.dpg .bc.soon .disc{filter:grayscale(.6) opacity(.6)}
.dpg .bc .idr{display:flex;align-items:center;gap:11px}
.dpg .bc .disc{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--deal-bg);border:1px solid var(--deal-line);color:var(--deal-ink)}
.dpg .bc h2{font-family:var(--f-serif);font-weight:400;font-size:1.0625rem;margin:0;line-height:1.25;min-width:0}
.dpg .bc .ln{font-size:.78125rem;color:color-mix(in srgb,var(--muted) 55%,var(--ink));line-height:1.55;margin:0;flex:1}
.dpg .bc .tags{display:flex;gap:7px;flex-wrap:wrap}
.dpg .bc .tags span{font-size:.59375rem;letter-spacing:.09em;text-transform:uppercase;color:var(--deal-ink);
  background:var(--deal-bg);border:1px solid var(--deal-line);border-radius:999px;padding:2px 8px}
.dpg .bc .acts{display:flex;gap:14px;align-items:center;padding-top:10px;border-top:1px solid var(--hair)}
.dpg .bc .acts a,.dpg .bc .acts button{font:inherit;font-size:.71875rem;font-weight:600;letter-spacing:.06em;
  color:var(--deal-ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.dpg .bc .acts button{margin-left:auto;color:color-mix(in srgb,var(--muted) 55%,var(--ink))}
.dpg .bc .acts button:hover{color:var(--ink)}
/* S-139: the deal-card actions (Ver productos · Detalle) are standalone action
   controls, not inline prose — padding:0 leaves them ~14px tall, under the 44px
   touch minimum. On touch grow the hit area (inline-flex keeps them inline in
   the .acts row, centered); the .acts flex align-items:center absorbs the height. */
@media(pointer:coarse),(max-width:760px){
  .dpg .bc .acts a,.dpg .bc .acts button{min-height:44px;display:inline-flex;align-items:center}}
.dpg .empty{text-align:center;color:var(--muted);padding:60px 0}
/* deal-landing header (/store?deal=…) — stage-agnostic, rendered by core */
.dlh{max-width:1440px;margin:0 auto;padding:22px clamp(18px,4vw,40px) 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dlh .disc{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--deal-bg);border:1px solid var(--deal-line);color:var(--deal-ink)}
.dlh h1{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.25rem,3vw,1.75rem);margin:0;line-height:1.15}
.dlh .ln{flex-basis:100%;color:var(--muted);font-size:.8125rem;margin:2px 0 0}
.dlh a{margin-left:auto;font-size:.71875rem;font-weight:600;letter-spacing:.06em;color:var(--muted);text-decoration:none}
.dlh a:hover{color:var(--ink)}

.dprice{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.dprice .was{color:var(--deal-strike);text-decoration:line-through;text-decoration-thickness:1px;font-size:.86em;font-weight:400}
.dprice .now{font-weight:inherit}
.dprice .pct{color:var(--deal-ink);font-size:.72em;font-weight:600;letter-spacing:.04em}
.dfloor{font-size:.71875rem;color:var(--deal-ink);margin:3px 2px 0;letter-spacing:.02em}
.dmark{display:inline-flex;align-items:center;gap:5px;font-family:var(--deal-font);color:var(--deal-ink);
  font-size:.65625rem;font-weight:600;letter-spacing:.06em;line-height:1;max-width:100%;min-width:0;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  min-height:24px} /* WCAG 2.5.8 target-size — mini-rail marks were <24px tall */
/* the label ellipsizes AND must never contribute nowrap min-content to the
   grid column (a long etiqueta was widening the whole track → 18px page
   overflow under tight card variants — the h-scroll hard bug) */
.dmark>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
.dslot{min-width:0}
.dslot .dmark{max-width:100%}
.dmark.soon{opacity:.55}
.dmark-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--deal-accent);flex:0 0 auto}
.dmark-pill{background:var(--deal-bg);border:1px solid var(--deal-line);border-radius:999px;padding:4px 10px}
.dmark-tag{border:1px solid var(--deal-line);border-radius:var(--deal-radius);padding:4px 8px}
.dmark-underline{border-bottom:1px solid var(--deal-accent);padding-bottom:2px}
.dmark-block{background:var(--deal-accent);color:var(--deal-on,var(--on-brand));padding:4px 8px;letter-spacing:.09em;text-transform:uppercase}
.dmark-ribbon{background:var(--deal-bg);border-left:2px solid var(--deal-accent);padding:4px 8px}
.dtag{display:inline-block;background:var(--deal-bg);color:var(--deal-ink);border:1px solid var(--deal-line);
  border-radius:var(--deal-radius);font-size:.68em;font-weight:600;letter-spacing:.05em;padding:2px 6px;vertical-align:middle}
/* variant slot helpers: .dovl = over-image (bottom-left; stock badges own the
   top-left corner — plan §9.1 slot guard), .dslot = under-name row */
.dovl{position:absolute;bottom:10px;left:10px;z-index:2;max-width:calc(100% - 20px)}
.dovl .dmark{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(3px);
  padding:4px 9px;border-radius:var(--deal-radius)}
.dslot{margin:5px 2px 0}

/* ---- price block ---- */
.dpp{margin:2px 0 6px}
.dpp .row1{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dpp .was{color:var(--deal-strike);text-decoration:line-through;text-decoration-thickness:1px;font-size:.72em}
.dpp .now{font-variant-numeric:tabular-nums}
.dpp .pchip{font-size:.6875rem;font-weight:600;letter-spacing:.05em;color:var(--deal-ink);
  background:var(--deal-bg);border:1px solid var(--deal-line);border-radius:999px;padding:3px 9px}
.dpp .sub{font-size:.78125rem;color:var(--muted);margin:5px 0 0;letter-spacing:.02em}
.dpp .sub b{color:var(--deal-ink);font-weight:600}
.dpp .ctag{display:inline-block;font-size:.65625rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--deal-ink);margin:7px 0 0;padding-left:12px;position:relative}
.dpp .ctag::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--deal-accent)}
/* ---- ladder ---- */
.dlad{margin:18px 0 4px;border:1px solid var(--deal-line);border-radius:var(--deal-radius);overflow:hidden;overflow-x:auto}
.dlad .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--deal-line);background:var(--deal-bg)}
.dlad .hd .tt{font-size:.65625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--deal-ink)}
/* the etiqueta is the deal's TEASER — it WRAPS at narrow widths, never
   truncates (the old inline-flex + text-overflow combo can't ellipsize
   flex-item text anyway: it hard-clipped mid-letter — polish P1-3b) */
.dlad .hd .et{font-size:.6875rem;color:var(--muted);min-width:0;text-align:right;line-height:1.35}
.dlad .rw{display:flex;align-items:baseline;gap:12px;width:100%;padding:11px 14px;background:none;
  border:0;border-top:1px solid color-mix(in srgb,var(--deal-line) 55%,transparent);cursor:pointer;
  font:inherit;color:inherit;text-align:left;position:relative;
  transition:background var(--deal-t-fast) var(--deal-ease)}
.dlad .rw:first-of-type{border-top:0}
.dlad .rw:hover{background:color-mix(in srgb,var(--deal-bg) 60%,transparent)}
.dlad .rw .rng{flex:0 0 auto;min-width:74px;font-size:.78125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dlad .rw .pu{flex:1;font-size:.90625rem;font-weight:600;font-variant-numeric:tabular-nums}
.dlad .rw .off{flex:0 0 auto;font-size:.71875rem;color:var(--deal-ink);font-weight:600;letter-spacing:.04em}
.dlad .rw .here{flex:0 0 auto;font-size:.59375rem;letter-spacing:.12em;text-transform:uppercase;color:var(--deal-ink)}
.dlad .rw::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;
  transition:background var(--deal-t-med) var(--deal-ease)}
.dlad .rw.on{background:var(--deal-bg)}
.dlad .rw.on::before{background:var(--deal-accent)}
.dlad .rw.on .rng{color:var(--deal-ink)}
.dlad .ft{padding:9px 14px;border-top:1px solid var(--deal-line);font-size:.71875rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.dlad .rw,.dlad .rw::before{transition:none}}
/* S-207: tier rows are TAPPABLE when set-qty! is wired (bottom-sheet + drawer-
   side PDPs — tap a tier to jump the qty). At padding:11px they're only ~40px,
   under the 44px touch minimum. Grow the INTERACTIVE rows on touch;
   :not(:disabled) leaves informational rows (matrix/other PDPs pass no set-qty!,
   so the button is :disabled) at their compact height. */
@media (pointer:coarse),(max-width:760px){.dlad .rw:not(:disabled){min-height:44px}}
/* ---- nudge ---- */
.dnudge{display:flex;align-items:center;gap:9px;width:100%;margin:12px 0 0;padding:11px 14px;
  background:var(--deal-bg);border:1px solid var(--deal-line);border-radius:var(--deal-radius);
  border-left:2px solid var(--deal-accent);font:inherit;font-size:.8125rem;color:var(--ink);
  cursor:pointer;text-align:left;transition:background var(--deal-t-fast) var(--deal-ease)}
.dnudge:hover{background:color-mix(in srgb,var(--deal-bg) 55%,var(--surface))}
.dnudge b{color:var(--deal-ink);font-weight:600;font-variant-numeric:tabular-nums}
.dnudge .go{margin-left:auto;color:var(--deal-ink);flex:0 0 auto}
/* ---- B9 per-opción picker marks ---- */
.spdp .sw.deal,.lpdp .sw.deal,.sspdp .sw.deal,.edpdp .sw.deal,.dspdp .sw.deal,.bspdp .sw.deal{
  box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--deal-accent)}
.store-root .sz.deal{border-color:var(--deal-accent)}
.store-root .sz.deal::after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--deal-accent);margin-left:6px;vertical-align:middle}
/* ---- relational chips ---- */
.dchips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
/* §9.7 category-landing chip: centered band above the grid, all stages */
.dchips.cathdr{justify-content:center;margin:14px auto 2px;max-width:1440px;padding:0 clamp(18px,4vw,40px)}
.dchips .chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.75rem;font-weight:600;
  letter-spacing:.03em;color:var(--deal-ink);background:none;border:1px solid var(--deal-line);
  border-radius:999px;padding:7px 13px;cursor:pointer;max-width:100%;min-width:0;
  transition:background var(--deal-t-fast) var(--deal-ease)}
.dchips .chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
.dchips .chip:hover,.dchips .chip.open{background:var(--deal-bg)}
.dchips .chip .tag{font-weight:400;font-size:.625rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dchips .more{border-style:dashed;color:var(--muted)}
.dpanel{margin:10px 0 0;padding:12px 15px;border:1px solid var(--deal-line);border-left:2px solid var(--deal-accent);
  border-radius:var(--deal-radius);background:var(--deal-bg);font-size:.78125rem;line-height:1.55;color:var(--ink)}
.dpanel .prg{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-variant-numeric:tabular-nums;color:var(--deal-ink)}
.dpanel .bar{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--deal-line) 60%,transparent);overflow:hidden}
.dpanel .bar i{display:block;height:100%;background:var(--deal-accent);transition:width var(--deal-t-med) var(--deal-ease)}
/* ---- exclusivity ---- */
.dexcl{font-size:.71875rem;color:var(--muted);margin:9px 0 0;padding-left:12px;position:relative}
.dexcl::before{content:'';position:absolute;left:0;top:.45em;width:5px;height:1px;background:var(--deal-line)}

.dsheet-bd{position:fixed;inset:0;background:rgba(10,10,12,.44);z-index:210;opacity:0;pointer-events:none;
  transition:opacity var(--deal-t-med) var(--deal-ease)}
.dsheet-bd.on{opacity:1;pointer-events:auto}
/* S-6: visibility rides the transition — the closed sheet leaves the tab
   order (opacity/transform alone hide pixels, not the a11y tree) */
.dsheet{position:fixed;z-index:211;background:var(--surface);color:var(--ink);
  visibility:hidden;box-shadow:0 18px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;
  transition:transform var(--deal-t-med) var(--deal-ease),opacity var(--deal-t-med) var(--deal-ease),visibility var(--deal-t-med)}
.dsheet.on{visibility:visible}
@media(min-width:761px){
  .dsheet{top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;
    width:min(440px,92vw);max-height:84vh;border-radius:calc(var(--deal-radius) + 6px);border:1px solid var(--deal-line)}
  .dsheet.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}}
@media(max-width:760px){
  .dsheet{left:0;right:0;bottom:0;transform:translateY(102%);max-height:92dvh;
    border-radius:calc(var(--deal-radius) + 10px) calc(var(--deal-radius) + 10px) 0 0}
  .dsheet.on{transform:none}
  .dsheet .grab{width:40px;height:4px;border-radius:2px;background:var(--hair);margin:10px auto 0;flex:0 0 auto}}
@media(min-width:761px){.dsheet .grab{display:none}}
@media(prefers-reduced-motion:reduce){.dsheet,.dsheet-bd{transition:opacity 120ms linear}}
.dsheet .inner{overflow-y:auto;padding:20px 22px calc(20px + env(safe-area-inset-bottom,0px))}
.dsheet .idr{display:flex;align-items:center;gap:13px}
.dsheet .disc{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--deal-bg);border:1px solid var(--deal-line);color:var(--deal-ink)}
.dsheet .idr h3{font-family:var(--f-serif);font-weight:400;font-size:1.25rem;margin:0;line-height:1.2;min-width:0}
.dsheet .x{margin-left:auto;flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:1rem;padding:6px}
.dsheet .x:hover{color:var(--ink)}
.dsheet .tags{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 0}
.dsheet .tags span{font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;color:var(--deal-ink);
  background:var(--deal-bg);border:1px solid var(--deal-line);border-radius:999px;padding:3px 9px}
.dsheet .line{font-size:.875rem;line-height:1.6;color:var(--ink);margin:14px 0 0}
.dsheet .prg{margin:14px 0 0}
.dsheet .prg .row{display:flex;align-items:center;gap:9px;font-size:.78125rem;color:var(--deal-ink);
  font-variant-numeric:tabular-nums;margin:0 0 7px}
.dsheet .prg .bar{flex:1;height:3px;border-radius:2px;overflow:hidden;
  background:color-mix(in srgb,var(--deal-line) 55%,transparent)}
.dsheet .prg .bar i{display:block;height:100%;background:var(--deal-accent)}
.dsheet .mh{font-size:.625rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  margin:20px 0 10px}
.dsheet .rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin:0 -22px;padding:0 22px}
.dsheet .rail::-webkit-scrollbar{display:none}
.dsheet .mc{flex:0 0 108px;text-decoration:none;color:inherit;min-width:0}
.dsheet .mc .im{width:108px;aspect-ratio:4/5;background:var(--hair);border-radius:var(--deal-radius);
  overflow:hidden;margin-bottom:6px}
.dsheet .mc img{width:100%;height:100%;object-fit:cover;display:block}
.dsheet .mc .nm{font-size:.6875rem;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.dsheet .mc .pr{font-size:.71875rem;font-weight:600;margin:3px 0 0;font-variant-numeric:tabular-nums}
.dsheet .mc.ld .im{animation:dsk 1.1s ease-in-out infinite}
@keyframes dsk{0%,100%{opacity:.55}50%{opacity:.9}}
.dsheet .fine{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hair)}
.dsheet .fine p{font-size:.71875rem;color:var(--muted);margin:0 0 5px;line-height:1.5}
.dsheet details{margin:12px 0 0}
.dsheet details summary{font-size:.75rem;color:var(--deal-ink);cursor:pointer;list-style:none;font-weight:600}
.dsheet details summary::-webkit-details-marker{display:none}
.dsheet details .calc{font-size:.78125rem;color:var(--ink);margin:8px 0 0;font-variant-numeric:tabular-nums;
  background:var(--deal-bg);border-radius:var(--deal-radius);padding:10px 12px;line-height:1.6}
.dsheet details .calc .calc-h{font-size:.65625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.dsheet details .calc-tiers{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dsheet details .calc-tiers li{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.dsheet details .calc-tiers .tq{color:var(--muted);font-weight:600;white-space:nowrap;flex:0 0 auto}
.dsheet details .calc-tiers .te{color:var(--ink);text-align:right;min-width:0}
.dsheet details .calc .calc-you{margin:0}
.dsheet details .calc .calc-you.sep{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--deal-line);font-weight:600}
.dsheet .ftr{display:flex;gap:14px;align-items:center;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--hair)}
.dsheet .ftr button,.dsheet .ftr a{font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.06em;
  color:var(--deal-ink);background:none;border:0;cursor:pointer;text-decoration:none;padding:0}
.dsheet .ftr a{margin-left:auto;color:var(--muted)}
.dsheet .ftr a:hover{color:var(--ink)}
/* S-140: the sheet footer actions (Compartir · Ver todos los beneficios) are the
   same padding:0 ~14px controls as the deal-card .acts (S-139) — grow the hit
   area to 44px on touch (the .ftr flex align-items:center absorbs the height). */
@media(pointer:coarse),(max-width:760px){
  .dsheet .ftr button,.dsheet .ftr a{min-height:44px;display:inline-flex;align-items:center}}

/* product-spot — featured product band (merchant pick) */
.sc-ps{padding:var(--ss-gap,64px) 24px}
.sc-ps[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-ps-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.sc-ps-in>*{min-width:0}
.sc-ps-img{display:block;background:var(--hair);overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5}
.sc-ps-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.sc-ps-img:hover img{transform:scale(1.04)}
.sc-ps-k{font-size:.625rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--brand-2);margin:0 0 18px}
.sc-ps-info h3{font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.1;margin:0 0 14px}
.sc-ps-lede{font-family:var(--f-serif);font-style:italic;font-size:1.0625rem;line-height:1.55;color:var(--muted);margin:0 0 22px;padding-left:14px;border-left:2px solid var(--brand-2)}
.sc-ps-price{font-family:var(--f-serif);font-size:1.625rem;color:var(--brand-2);margin:0 0 4px}
.sc-ps-cuotas{font-size:.8125rem;color:var(--muted);margin:0 0 22px}
.sc-ps-ctas{display:flex;gap:10px;flex-wrap:wrap}
.sc-ps-btn{display:inline-block;padding:13px 26px;background:var(--ink);color:var(--bg);border:0;border-radius:var(--radius);font-size:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .2s}
.sc-ps-btn:hover{background:var(--brand-2);color:var(--on-brand)}
.sc-ps-btn.outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.sc-ps-btn[disabled]{opacity:.5;cursor:default}
@media(max-width:760px){.sc-ps-in{grid-template-columns:1fr}.sc-ps[data-side=right] .sc-ps-img{order:-1}}
/* lookbook — shoppable image with merchant-placed hotspots */
.sc-lb{position:relative;overflow:hidden;min-height:60vh}
.sc-lb[data-h=tall]{min-height:80vh}
.sc-lb[data-h=full]{min-height:100svh}
.sc-lb-body{display:block;position:absolute;inset:0;color:inherit;text-decoration:none}
a.sc-lb-body{cursor:pointer}
.sc-lb-img{position:absolute;inset:0;background-size:cover;background-position:center top}
.sc-lb-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.5));pointer-events:none}
.sc-lb-cap{position:absolute;left:0;right:0;top:12vh;text-align:center;color:#fff;z-index:2;padding:0 32px}
.sc-lb-k{font-size:.6875rem;font-weight:500;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.sc-lb-cap h2{font-family:var(--f-display,var(--f-serif));font-weight:300;font-style:italic;font-size:clamp(2.25rem,7vw,3.75rem);line-height:1;margin:0;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.sc-lb-spot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.95);border:2px solid #fff;cursor:pointer;display:grid;place-items:center;font-size:1rem;font-weight:700;color:var(--ink);z-index:3;text-decoration:none;animation:sclbPulse 2s infinite}
@keyframes sclbPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}50%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.sc-lb-lbl{position:absolute;left:42px;top:50%;transform:translateY(-50%);background:var(--surface);color:var(--ink);padding:9px 14px;font-size:.75rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;letter-spacing:.04em;border-radius:var(--radius)}
.sc-lb-spot:hover .sc-lb-lbl,.sc-lb-spot:focus .sc-lb-lbl{opacity:1}
.sc-lb-hint{padding:56px 24px;text-align:center;color:var(--muted);border:1px dashed var(--hair);margin:16px;border-radius:var(--radius)}
/* statement — manifesto band */
.sc-st{padding:calc(var(--ss-gap,64px) * 1.4) 32px}
.sc-st[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-st[data-bg=ink]{background:var(--ink);color:var(--bg)}
.sc-st[data-align=center]{text-align:center}
.sc-st-in{max-width:1080px;margin:0 auto}
.sc-st-k{font-size:.6875rem;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--brand-2);margin:0 0 26px}
.sc-st[data-bg=ink] .sc-st-k{color:var(--gold)}
.sc-st-in h2{font-family:var(--f-display,var(--f-serif));font-weight:300;font-style:italic;font-size:clamp(2.5rem,8vw,4.5rem);line-height:1.05;margin:0 0 24px;letter-spacing:-.02em}
.sc-st-s{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.0625rem,2vw,1.25rem);line-height:1.5;color:var(--muted);max-width:580px;margin:0}
.sc-st[data-align=center] .sc-st-s{margin:0 auto}
.sc-tb{padding:calc(var(--ss-gap,64px) * .6) 24px}
.sc-tb[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-tb-in{max-width:1200px;margin:0 auto}
.sc-tb-in h2{text-align:center;font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.375rem,2.6vw,1.875rem);margin:0 0 28px}
.sc-tb-row{display:flex;flex-wrap:wrap;gap:22px 30px;justify-content:center;align-items:center}
.sc-tb-item{display:flex;align-items:center;gap:13px;flex:0 1 auto;min-width:180px;max-width:300px}
.sc-tb-ic{flex:0 0 auto;display:inline-flex;color:var(--brand-1)}
.sc-tb-tx{min-width:0}
.sc-tb-t{display:block;font-weight:600;font-size:.9375rem;letter-spacing:.005em;line-height:1.2}
.sc-tb-s{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px;line-height:1.35}
/* testimonials (B2) */
.sc-te{padding:var(--ss-gap,64px) 24px}
.sc-te[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-te[data-bg=ink]{background:var(--ink);color:var(--bg)}
.sc-te[data-bg=brand]{background:var(--brand-2);color:var(--on-brand)}
.sc-te-in{max-width:1200px;margin:0 auto}
.sc-te[data-align=center] .sc-te-in>h2{text-align:center}
.sc-te-in>h2{font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.5rem,3vw,2rem);margin:0 0 32px;text-align:left}
.sc-te-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(var(--te-min,240px),calc((100% - (var(--te-cols,3) - 1)*22px)/var(--te-cols,3))),1fr));gap:22px}
.sc-te[data-layout=carousel] .sc-te-wrap{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
.sc-te[data-layout=carousel] .sc-te-wrap::-webkit-scrollbar{display:none}
.sc-te[data-layout=carousel] .sc-te-card{flex:0 0 min(340px,80vw);scroll-snap-align:start}
.sc-te-card{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--bg);text-align:left}
.sc-te[data-bg=ink] .sc-te-card,.sc-te[data-bg=brand] .sc-te-card{background:color-mix(in srgb,currentColor 8%,transparent);border-color:color-mix(in srgb,currentColor 18%,transparent)}
.sc-te-st{display:flex;gap:3px;color:var(--gold)}
.sc-te-card blockquote{margin:0;font-family:var(--f-display,var(--f-serif));font-size:1.0625rem;line-height:1.5;font-weight:400}
.sc-te-card figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.sc-te-av{flex:0 0 auto;width:44px;height:44px;border-radius:999px;background:var(--hair) center/cover no-repeat;overflow:hidden}
.sc-te-av.ph{display:grid;place-items:center;font-weight:600;font-size:1.0625rem;color:var(--muted);text-transform:uppercase}
.sc-te-who{display:flex;flex-direction:column;min-width:0}
.sc-te-au{font-weight:600;font-size:.875rem;line-height:1.2}
.sc-te-sb{font-size:.8125rem;color:var(--muted);margin-top:2px}
/* editorial-quote */
.sc-eq{padding:var(--ss-gap,80px) 24px;text-align:center}
.sc-eq[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-eq[data-bg=ink]{background:var(--ink);color:var(--bg)}
.sc-eq[data-bg=brand]{background:var(--brand-2);color:var(--on-brand)}
.sc-eq[data-align=left]{text-align:left}
.sc-eq-in{max-width:720px;margin:0 auto}
.sc-eq[data-align=left] .sc-eq-in{margin:0}
.sc-eq blockquote{font-family:var(--f-display,var(--f-serif));font-style:italic;font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.5;margin:0}
.sc-eq cite{display:block;margin-top:20px;font-size:.6875rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-style:normal}
/* bento */
.sc-bt{padding:var(--ss-gap,40px) clamp(14px,3vw,40px)}
.sc-bt[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-bt-grid{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(190px,22vw,300px);gap:14px}
.sc-bt-tile{position:relative;cursor:pointer;overflow:hidden;border-radius:var(--radius);background-size:cover;background-position:center;background-color:var(--hair);text-decoration:none;display:block}
.sc-bt-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));z-index:1}
.sc-bt-body{position:absolute;left:22px;right:22px;bottom:20px;color:#fff;z-index:2}
.sc-bt-kick{font-size:.625rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 7px}
.sc-bt-tile h3{font-size:clamp(1.125rem,2vw,1.625rem);font-weight:600;line-height:1.06;margin:0;letter-spacing:-.01em}
.sc-bt-tile.t1{grid-column:span 2;grid-row:span 2}
.sc-bt-tile.t1 h3{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(1.875rem,4vw,3.25rem)}
.sc-bt-tile.t2{grid-column:span 2}
.sc-bt-tile.fin{background:linear-gradient(135deg,var(--ink),color-mix(in srgb,var(--brand-2) 60%,var(--ink)));text-align:center;cursor:default}
.sc-bt-tile.fin::before{display:none}
.sc-bt-body.fin-b{position:relative;left:auto;right:auto;bottom:auto;display:grid;place-items:center;height:100%;padding:24px}
.sc-bt-tile.fin h3{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(1.375rem,2.6vw,2rem)}
@media(max-width:900px){.sc-bt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sc-bt-tile.t1{grid-column:span 2;grid-row:span 1}}
.sc-nl{padding:var(--ss-gap,64px) 24px}
.sc-nl[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-nl[data-bg=ink]{background:var(--ink);color:var(--bg)}
.sc-nl[data-bg=brand]{background:var(--brand-2);color:var(--on-brand)}
.sc-nl-in{max-width:560px;margin:0 auto}
.sc-nl[data-align=left] .sc-nl-in{margin:0;max-width:640px}
.sc-nl[data-align=left]{text-align:left}.sc-nl[data-align=center]{text-align:center}
.sc-nl h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);margin:0 0 10px;letter-spacing:-.01em}
.sc-nl p{margin:0 0 22px;opacity:.72;font-size:.875rem;line-height:1.6}
.sc-nl-f{display:flex;gap:10px;max-width:440px}
.sc-nl[data-align=center] .sc-nl-f{margin:0 auto}
.sc-nl-f input{flex:1;min-width:0;font:inherit;font-size:.875rem;color:inherit;background:transparent;
  border:1px solid color-mix(in srgb,currentColor 34%,transparent);border-radius:var(--radius);padding:12px 14px;outline:none}
.sc-nl-f input::placeholder{color:inherit;opacity:.5}
.sc-nl-f input:focus{border-color:currentColor}
.sc-nl[data-style=underline] .sc-nl-f input{border:0;border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:0;padding:12px 2px}
.sc-nl-f button{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;padding:0 20px;border:0;border-radius:var(--radius);
  background:var(--ink);color:var(--bg);transition:.18s}
.sc-nl[data-bg=ink] .sc-nl-f button,.sc-nl[data-bg=brand] .sc-nl-f button{background:var(--bg);color:var(--ink)}
.sc-nl-f button:hover{opacity:.86}
/* promo */
.sc-pr{padding:clamp(56px,7vw,104px) 24px}
.sc-pr[data-bg=ink]{background:var(--ink);color:var(--bg);
  background-image:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--brand-2) 24%,transparent),transparent 62%)}
.sc-pr[data-bg=brand]{background:var(--brand-2);color:var(--on-brand)}
.sc-pr[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-pr-in{max-width:720px;margin:0 auto}
.sc-pr[data-align=left] .sc-pr-in{margin:0;max-width:820px}
.sc-pr[data-align=left]{text-align:left}.sc-pr[data-align=center]{text-align:center}
.sc-pr-k{font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;margin:0 0 16px;color:var(--gold)}
.sc-pr h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.875rem,5vw,3.25rem);line-height:1.06;margin:0 0 16px;letter-spacing:-.01em}
.sc-pr-s{font-size:clamp(.9375rem,1.8vw,1.125rem);opacity:.78;line-height:1.6;margin:0 auto 30px;max-width:520px}
.sc-pr[data-align=left] .sc-pr-s{margin:0 0 30px}
.sc-pr-cta{display:inline-block;padding:15px 34px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border:1px solid currentColor;transition:.2s;border-radius:var(--radius)}
.sc-pr-cta:hover{background:currentColor}
.sc-pr[data-bg=ink] .sc-pr-cta:hover,.sc-pr[data-bg=brand] .sc-pr-cta:hover{color:var(--ink)}
.sc-pr[data-bg=surface] .sc-pr-cta:hover{color:var(--surface)}
@media(max-width:560px){.sc-nl-f{flex-direction:column}.sc-nl[data-align=center] .sc-nl-f{margin:0}}
/* product rail */
.sc-rail{padding:var(--ss-gap,56px) 0}
.sc-rail[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-rail-h{max-width:1440px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 22px}
.sc-rail[data-align=center] .sc-rail-h{text-align:center}
.sc-rail-h h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.125rem);margin:0;letter-spacing:-.01em}
.sc-rail-track{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px clamp(16px,4vw,40px) 6px;scroll-padding-left:clamp(16px,4vw,40px)}
.sc-rail-track::-webkit-scrollbar{display:none}
.sc-rail-c{flex:0 0 var(--rail-w,200px);width:var(--rail-w,200px);scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
.sc-rail-img{aspect-ratio:3/4;background:var(--hair);background-size:cover;background-position:center;border-radius:var(--radius);overflow:hidden;transition:opacity .2s}
.sc-rail-c:hover .sc-rail-img{opacity:.86}
.sc-rail-n{margin:11px 0 3px;font-size:.84375rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-rail-p{margin:0;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:560px){.sc-rail-c{flex-basis:min(var(--rail-w,200px),64vw);width:min(var(--rail-w,200px),64vw)}}
/* hero band */
.sc-hero{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--ink) center/cover no-repeat}
.sc-hero[data-h=compact]{min-height:340px}
.sc-hero[data-h=medium]{min-height:clamp(440px,60vh,560px)}
.sc-hero[data-h=tall]{min-height:clamp(560px,86vh,820px)}
.sc-hero[data-align=center]{justify-content:center}
.sc-hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,var(--hero-ov,.4));z-index:1}
.sc-hero-in{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(20px,6vw,72px);color:#fff}
.sc-hero[data-align=center] .sc-hero-in{text-align:center;max-width:800px}
.sc-hero-in h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.125rem,6vw,4.5rem);line-height:1.02;margin:0 0 18px;letter-spacing:-.02em;text-wrap:balance}
.sc-hero-s{font-size:clamp(.9375rem,2vw,1.25rem);line-height:1.55;margin:0 0 30px;max-width:540px;opacity:.94}
.sc-hero[data-align=center] .sc-hero-s{margin-left:auto;margin-right:auto}
/* .store-root prefix beats `.store-root a{color:inherit}` (else the light-on-image
   copy color leaks into the CTA and it goes white-on-white / invisible). Written
   host-agnostic (NOT `.sc-hero a…`) so every hero layout gets the full chip —
   scoping to .sc-hero once left split/asym/minimal CTAs unpadded + underlined. */
.store-root a.sc-hero-cta{display:inline-block;padding:15px 38px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  background:#fff;color:#111;border:1px solid #fff;transition:.2s;border-radius:var(--radius)}
.store-root a.sc-hero-cta:hover{background:transparent;color:#fff}
@media(max-width:560px){.sc-hero[data-h=tall]{min-height:72vh}}
.sc-hero-k{font-size:.625rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;margin:0 0 14px;opacity:.9}
/* hero · split — image | copy halves (side + split% knobs) */
.sc-hero-sp{display:grid;grid-template-columns:var(--hero-split,50%) minmax(0,1fr);overflow:hidden;background:var(--surface)}
/* :side = the side of the IMAGE (dict label: Lado de la imagen). Media is the first
   grid column; rtl flips it to the right — so right (the default) needs the flip. */
.sc-hero-sp[data-side=right]{direction:rtl}
.sc-hero-sp[data-side=right]>*{direction:ltr}
.sc-hero-sp[data-h=compact]{min-height:340px}
.sc-hero-sp[data-h=medium]{min-height:clamp(440px,56vh,560px)}
.sc-hero-sp[data-h=tall]{min-height:clamp(560px,80vh,780px)}
.sc-hero-sp-media{background:var(--hair) center/cover no-repeat;min-height:260px}
.sc-hero-sp-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vw,72px)}
.sc-hero-sp-body h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.875rem,4.4vw,3.25rem);line-height:1.05;margin:0 0 16px;letter-spacing:-.015em;text-wrap:balance}
.sc-hero-sp-body .sc-hero-k{color:var(--brand-2)}
.sc-hero-sp-body .sc-hero-s{color:var(--muted);opacity:1;margin-bottom:26px}
.sc-hero-sp-body a.sc-hero-cta{align-self:flex-start;background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sc-hero-sp-body a.sc-hero-cta:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--on-brand)}
@media(max-width:820px){.sc-hero-sp{grid-template-columns:minmax(0,1fr)}.sc-hero-sp[data-side]{direction:ltr}.sc-hero-sp-media{order:-1;aspect-ratio:16/10}}
/* hero · asymmetric — editorial italic display + offset shot */
.sc-hero-as{display:grid;grid-template-columns:1fr var(--hero-split,50%);gap:clamp(24px,4vw,64px);align-items:center;
  max-width:1440px;margin:0 auto;padding:clamp(40px,7vw,88px) clamp(20px,5vw,64px)}
.sc-hero-as-body h2{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(2rem,5vw,3.75rem);line-height:1.04;margin:0 0 18px;letter-spacing:-.02em;text-wrap:balance}
.sc-hero-as-body .sc-hero-k{color:var(--muted)}
.sc-hero-as-body .sc-hero-s{color:var(--muted);opacity:1;margin-bottom:26px;font-family:var(--f-serif)}
.sc-hero-as-body a.sc-hero-cta{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.sc-hero-as-body a.sc-hero-cta:hover{background:var(--ink);color:var(--bg)}
.sc-hero-as-shot{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);display:block}
@media(max-width:900px){.sc-hero-as{grid-template-columns:1fr;gap:28px}.sc-hero-as-shot{order:-1;aspect-ratio:3/4}}
/* hero · minimal — type only */
.sc-hero-mn{padding:clamp(56px,10vw,120px) 24px}
.sc-hero-mn[data-align=center]{text-align:center}
.sc-hero-mn h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.25rem,7vw,5rem);line-height:1;margin:0 0 18px;letter-spacing:-.025em;text-wrap:balance}
.sc-hero-mn .sc-hero-k{color:var(--brand-2)}
.sc-hero-mn .sc-hero-s{color:var(--muted);opacity:1;max-width:560px;margin:0 0 28px}
.sc-hero-mn[data-align=center] .sc-hero-s{margin-left:auto;margin-right:auto}
.sc-hero-mn a.sc-hero-cta{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.sc-hero-mn a.sc-hero-cta:hover{background:transparent;color:var(--ink)}

/* product-wall (B-26) — masonry catalog */
.sc-pw-h{text-align:center;padding:clamp(28px,5vw,56px) 24px 8px}
.sc-pw-k{font-size:.625rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--brand-2);margin:0 0 10px}
.sc-pw-t{font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.12;margin:0}
.sc-pw-wall{column-count:var(--pw-cols,4);column-gap:var(--pw-gap,14px);padding:8px clamp(12px,3vw,28px) 56px;max-width:1560px;margin:0 auto}
.sc-pw-wall>*{break-inside:avoid;margin:0 0 var(--pw-gap,14px);display:block}
.sc-pw[data-natural] .sc-pw-wall .ck-media{aspect-ratio:auto}
.sc-pw[data-natural] .sc-pw-wall .ck-media .ck-img{position:static;height:auto}
.sc-pw[data-natural] .sc-pw-wall .ck-media .ck-alt{position:absolute;inset:0;height:100%}
.sc-pw-banner{break-inside:avoid;margin:0 0 var(--pw-gap,14px);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,var(--brand-1) 0%,var(--brand-2) 100%);color:#fff;
  min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;text-decoration:none;position:relative;container-type:inline-size}
.sc-pw-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.32),transparent 70%)}
.sc-pw-banner>*{position:relative;z-index:2}
.sc-pw-banner .kk{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin:0 0 6px}
.sc-pw-banner .bt{font-family:var(--f-serif);font-weight:500;font-size:clamp(1rem,10.5cqi,1.625rem);line-height:1.08;margin:0 0 10px;overflow-wrap:normal;word-break:normal}
.sc-pw-banner .go{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;opacity:.92}
@media(max-width:760px){.sc-pw-wall{column-count:var(--pw-cols-m,2)}}

/* category-accordion (B-27) — cinematic category rows */
.sc-ca{display:flex;flex-direction:column;border-bottom:1px solid var(--hair)}
.sc-ca-row{position:relative;border-top:1px solid var(--hair);overflow:hidden}
.sc-ca-row:first-child{border-top:0}
.sc-ca-banner{position:relative;display:block;min-height:var(--ca-h,240px);background-size:cover;background-position:center;
  background-color:var(--surface);filter:brightness(var(--ca-bf,100%))}
.sc-ca-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb,var(--ink) calc(var(--ca-ov,50%) * .4),transparent) 0%,
  color-mix(in srgb,var(--ink) var(--ca-ov,50%),transparent) 100%)}
.sc-ca-banner.grad{background-image:linear-gradient(135deg,var(--brand-1) 0%,var(--brand-2) 100%)}
.sc-ca-banner.grad::after{background:color-mix(in srgb,var(--ink) 24%,transparent)}
.sc-ca-inner{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;padding:clamp(20px,3vw,40px)}
.sc-ca a.sc-ca-ttl{margin:0;text-decoration:none;color:#fff;font-family:var(--ca-font,var(--f-serif));font-weight:500;
  font-size:var(--ca-ts,3rem);line-height:1.02;letter-spacing:-.01em;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.sc-ca a.sc-ca-ttl .ct{display:block;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;font-family:var(--f-sans);
  font-weight:600;opacity:.85;margin:0 0 8px;text-shadow:none}
.sc-ca-toggle{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.12);color:#fff;font-size:1.375rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);transition:transform .25s ease,background .2s ease}
.sc-ca-toggle:hover{background:rgba(255,255,255,.24)}
.sc-ca-toggle.on{transform:rotate(45deg)}
.sc-ca-sub{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px;background:var(--hair);
  border-top:1px solid var(--hair)}
.sc-ca-sub a{background:var(--surface);padding:18px 20px;font-size:.875rem;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .15s ease,color .15s ease}
.sc-ca-sub a:hover{background:color-mix(in srgb,var(--brand-1) 8%,var(--surface));color:var(--brand-1)}
.sc-ca-sub a .arr{opacity:.4;font-size:.8125rem}
.sc-ca-sub a.all{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-1);font-weight:600}
@media(max-width:760px){
  .sc-ca-banner{min-height:calc(var(--ca-h,240px) * .8)}
  .sc-ca a.sc-ca-ttl{font-size:clamp(1.75rem,9vw,var(--ca-ts,3rem))}
  .sc-ca-toggle{width:42px;height:42px;font-size:1.25rem}}

/* product-feed (B-28) — immersive vertical shopping feed as a stackable WINDOW */
.sc-fd-wrap{position:relative;height:calc(var(--fd-h,82svh) - 1px);overflow:hidden}
.sc-fd{height:100%;overflow-y:auto;scroll-snap-type:y var(--fd-snap,proximity);
  background:#111;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sc-fd::-webkit-scrollbar{display:none}
.sc-fd[data-snap=none]{scroll-snap-type:none}
.sc-fd-card{position:relative;height:calc(var(--fd-h,82svh) - 1px);scroll-snap-align:start;overflow:hidden;display:flex;align-items:flex-end}
.sc-fd-card .bg{position:absolute;inset:0;background-size:var(--fd-fit,cover);background-position:var(--fd-pos,center);
  background-repeat:no-repeat;background-color:#111;
  transform:scale(calc(var(--fd-zoom,100)/100));filter:brightness(calc(var(--fd-bri,100)/100))}
.sc-fd-card[data-kb=on] .bg{animation:scfkb 18s ease-in-out infinite alternate}
@keyframes scfkb{from{transform:scale(calc(var(--fd-zoom,100)/100*1.02))}to{transform:scale(calc(var(--fd-zoom,100)/100*1.14)) translateY(-1.5%)}}
.sc-fd-card .veil{position:absolute;inset:0;background:linear-gradient(to top,
  color-mix(in srgb,var(--fd-veilc,#000) var(--fd-ov,82%),transparent) 0%,
  color-mix(in srgb,var(--fd-veilc,#000) calc(var(--fd-ov,82%) * .5),transparent) 38%,transparent 66%)}
.sc-fd-card .inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px) clamp(36px,5vh,64px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sc-fd-card .info{color:#fff;max-width:680px}
.sc-fd-card .pill{display:inline-block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:5px 13px;margin:0 0 16px}
.sc-fd-card h2{font-family:var(--fd-font,var(--f-serif));font-weight:500;font-size:var(--fd-ts,3.25rem);line-height:1.02;
  letter-spacing:-.01em;margin:0 0 12px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.sc-fd-card .desc{font-size:.9375rem;line-height:1.6;opacity:.9;max-width:46ch;margin:0 0 20px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-fd-card .row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:22px;flex-wrap:wrap}
.sc-fd-card .price{font-size:1.625rem;font-weight:600;margin:0;line-height:1;color:#fff}
.sc-fd-card .cuotas{font-size:.8125rem;opacity:.8;margin:6px 0 0}
.sc-fd-card .acts{display:flex;gap:12px;align-items:center}
.sc-fd-card .btn{height:50px;padding:0 26px;border-radius:var(--radius);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:.2s;border:1px solid #fff;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.sc-fd-card .btn.ghost{background:transparent;color:#fff}.sc-fd-card .btn.ghost:hover{background:#fff;color:#111}
.sc-fd-card .btn.solid{background:#fff;color:#111;border-color:#fff}
.sc-fd-card .btn.solid:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--on-brand)}
.sc-fd-card .btn:disabled{opacity:.5;cursor:not-allowed}
.sc-fd-card .side{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(120px,20vh,200px);z-index:3;
  display:flex;flex-direction:column;gap:18px;align-items:center}
.sc-fd-card .side button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:#fff;font-size:1.25rem;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);transition:.2s}
.sc-fd-card .side button:hover{background:rgba(255,255,255,.28)}
.sc-fd-card .side button.on{background:var(--brand-2);border-color:var(--brand-2);color:var(--on-brand)}
.sc-fd-card .side .lbl{display:block;font-size:.59375rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-align:center;margin-top:5px;opacity:.85}
/* progress rail — absolute on the WRAPPER (pinned to the feed window; the
   stage used position:fixed — wrong for a stackable block) */
.sc-fd-wrap .rail{position:absolute;left:clamp(10px,1.6vw,22px);top:50%;transform:translateY(-50%);z-index:7;
  display:flex;flex-direction:column;gap:7px}
.sc-fd-wrap .rail i{width:3px;height:18px;border-radius:3px;background:rgba(255,255,255,.3);transition:.25s;display:block}
.sc-fd-wrap .rail i.on{background:#fff;height:30px}
@media(max-width:760px){
  .sc-fd-card .inner{flex-direction:column;align-items:stretch;padding-bottom:100px}
  .sc-fd-card h2{font-size:clamp(1.875rem,8vw,var(--fd-ts,3.25rem))}
  .sc-fd-card .row{flex-direction:column;align-items:stretch;gap:14px}
  .sc-fd-card .acts{justify-content:stretch}.sc-fd-card .btn{flex:1;text-align:center}
  .sc-fd-card .side{bottom:170px;gap:14px}
  .sc-fd-card .side button{width:46px;height:46px;font-size:1.125rem}
  .sc-fd-card .info{padding-right:64px}
  .sc-fd-wrap .rail{display:none}}

/* shared multi-paragraph body (text/media-text/faq) */
.sc-body p{margin:0 0 14px;font-size:.9375rem;line-height:1.7;opacity:.86}
.sc-body p:last-child{margin-bottom:0}
/* text block */
.sc-tx{padding:var(--ss-gap,56px) 24px}
.sc-tx[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-tx-in{margin:0 auto}
.sc-tx[data-w=narrow] .sc-tx-in{max-width:680px}
.sc-tx[data-w=normal] .sc-tx-in{max-width:900px}
.sc-tx[data-w=wide] .sc-tx-in{max-width:1200px}
.sc-tx[data-align=center]{text-align:center}
.sc-tx h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.125rem);margin:0 0 18px;letter-spacing:-.01em}
/* media + text */
.sc-mt{padding:var(--ss-gap,56px) 24px}
.sc-mt[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-mt-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.sc-mt[data-side=right] .sc-mt-img{order:2}
.sc-mt-img{aspect-ratio:var(--mt-ar,4/5);background:var(--hair) center/cover no-repeat;border-radius:var(--radius)}
.sc-mt-c h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.25rem);margin:0 0 16px;letter-spacing:-.01em}
.sc-mt-cta{display:inline-block;margin-top:22px;padding:13px 30px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:inherit;border:1px solid currentColor;border-radius:var(--radius);transition:.2s}
.sc-mt-cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:760px){.sc-mt-in{grid-template-columns:1fr}.sc-mt[data-side=right] .sc-mt-img{order:0}}
/* FAQ */
.sc-fq{padding:var(--ss-gap,56px) 24px}
.sc-fq[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-fq-in{max-width:760px;margin:0 auto}
.sc-fq h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.125rem);margin:0 0 22px;letter-spacing:-.01em}
.sc-fq-item{border-bottom:1px solid var(--hair)}
.sc-fq-item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;
  padding:16px 2px;font-size:.9375rem;font-weight:600}
.sc-fq-item summary::-webkit-details-marker{display:none}
.sc-fq-item summary svg{flex:0 0 auto;opacity:.55;transition:transform .2s}
.sc-fq-item[open] summary svg{transform:rotate(180deg)}
.sc-fq-item .sc-body{padding:0 2px 18px}
/* gallery */
.sc-gl{padding:var(--ss-gap,56px) 24px}
.sc-gl-in{max-width:1200px;margin:0 auto}
.sc-gl h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.125rem);margin:0 0 22px;letter-spacing:-.01em}
.sc-gl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(var(--gl-min,180px),calc((100% - (var(--gl-cols,3) - 1)*var(--gl-gap,10px))/var(--gl-cols,3))),1fr));gap:var(--gl-gap,10px)}
.sc-gl-cell{margin:0}
.sc-gl-img{aspect-ratio:var(--gl-ar,1/1);background:var(--hair) center/cover no-repeat;border-radius:var(--radius)}
.sc-gl-cell figcaption{margin-top:8px;font-size:.78125rem;opacity:.66}
/* video */
.sc-vd{padding:var(--ss-gap,56px) 24px}
.sc-vd-in{max-width:900px;margin:0 auto}
.sc-vd-frame{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--ink)}
.sc-vd-frame iframe{width:100%;height:100%;border:0;display:block}
.sc-vd-cap{margin:10px 0 0;font-size:.8125rem;opacity:.66;text-align:center}
.sc-vd-hint{margin:0;padding:34px;text-align:center;font-size:.84375rem;opacity:.6;border:1px dashed var(--hair);border-radius:var(--radius)}
/* contact CTA */
.sc-ct{padding:var(--ss-gap,64px) 24px;text-align:center}
.sc-ct[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-ct[data-bg=ink]{background:var(--ink);color:var(--bg)}
.sc-ct[data-bg=brand]{background:var(--brand-2);color:var(--on-brand)}
.sc-ct-in{max-width:620px;margin:0 auto}
.sc-ct h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.125rem);margin:0 0 10px;letter-spacing:-.01em}
.sc-ct p{margin:0 0 24px;opacity:.75;font-size:.90625rem;line-height:1.6}
.sc-ct-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sc-ct-b{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:inherit;border:1px solid currentColor;border-radius:var(--radius);transition:.2s}
.sc-ct-b:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sc-ct[data-bg=ink] .sc-ct-b:hover,.sc-ct[data-bg=brand] .sc-ct-b:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
/* divider */
.sc-dv{height:var(--dv-h,48px);display:flex;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}
.sc-dv hr{width:100%;border:0;border-top:1px solid var(--hair);margin:0}
/* custom page title band (store.core :page route) */
.pg-head{padding:clamp(36px,6vw,72px) 24px 0;text-align:center}
.pg-head h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.875rem,5vw,3.25rem);margin:0;letter-spacing:-.015em}
/* shop-by-color (C7) */
.sc-shopcolor{padding:clamp(36px,5vw,64px) clamp(18px,4vw,40px)}
.sc-shopcolor[data-bg=surface]{background:var(--surface)}
.sc-shopcolor[data-bg=ink]{background:var(--ink);color:var(--bg)}
.sc-shopcolor .sc-sc-in{max-width:1200px;margin:0 auto}
.sc-shopcolor h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(20px,2.6vw,28px);margin:0 0 clamp(18px,3vw,26px)}
.sc-shopcolor[data-align=center] h2{text-align:center}
.sc-shopcolor .sc-sc-row{display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,18px)}
.sc-shopcolor[data-align=center] .sc-sc-row{justify-content:center}
.sc-shopcolor .sc-sc-chip{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  border:1px solid var(--hair);border-radius:999px;padding:8px 16px 8px 9px;transition:border-color .15s,transform .12s}
.sc-shopcolor .sc-sc-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.sc-shopcolor .sc-sc-dot{width:22px;height:22px;border-radius:50%;display:inline-block;border:1px solid var(--hair)}
.sc-shopcolor .sc-sc-l{font-size:.8125rem;letter-spacing:.02em}
.sc-shopcolor .sc-sc-n{font-size:.6875rem;color:var(--muted)}
.sc-shopcolor[data-style=dots] .sc-sc-chip{flex-direction:column;border:0;padding:4px;gap:7px}
.sc-shopcolor[data-style=dots] .sc-sc-dot{width:clamp(44px,5vw,58px);height:clamp(44px,5vw,58px)}
.sc-shopcolor[data-style=dots] .sc-sc-chip:hover .sc-sc-dot{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.sc-shopcolor[data-style=dots] .sc-sc-l{font-size:.75rem}
/* store-locations (puntos de venta) */
.stloc{padding:var(--ss-gap,56px) 24px}
.stloc-in{max-width:1200px;margin:0 auto}
.stloc-head{text-align:center;margin:0 auto 26px;max-width:640px}
.stloc-head h2{font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.5rem,3vw,2.125rem);margin:0;letter-spacing:-.01em}
.stloc-sub{margin:10px 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.stloc-search{display:flex;align-items:center;gap:9px;max-width:420px;margin:0 auto 22px;
  border:1px solid var(--hair);border-radius:var(--radius);padding:10px 14px;color:var(--muted)}
.stloc-search input{flex:1;min-width:0;font:inherit;font-size:.9375rem;color:var(--ink);background:transparent;border:0;outline:none}
.stloc-body{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
.stloc[data-layout=map-list] .stloc-body{grid-template-columns:1.15fr .85fr;align-items:start}
.stloc-map{position:sticky;top:16px}
.stloc-list{display:flex;flex-direction:column;gap:12px}
.stloc-card{border:1px solid var(--hair);border-radius:var(--radius);padding:16px 18px;background:var(--bg)}
.stloc-name{margin:0;font-size:1rem;font-weight:600;line-height:1.25}
.stloc-addr{margin:5px 0 0;font-size:.875rem;line-height:1.5;color:var(--muted)}
.stloc-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.stloc-lk{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit;
  font-size:.8125rem;font-weight:500;transition:opacity .15s}
.stloc-lk:hover{opacity:.7}
.stloc-dir{color:var(--brand-1)}
.stloc-empty{text-align:center;color:var(--muted);font-size:.9375rem;padding:32px 0;margin:0}
.stloc-sk{pointer-events:none}
.stloc-skl{height:14px;width:60%;border-radius:6px;background:var(--hair);animation:stloc-pulse 1.2s ease-in-out infinite}
.stloc-skl.sm{height:11px;width:40%;margin-top:9px;opacity:.7}
@keyframes stloc-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:820px){.stloc[data-layout=map-list] .stloc-body{grid-template-columns:1fr}.stloc-map{position:static}}

/* product-grid (B-24) — the functional catalog band as a block */
.sc-pg{padding:0 0 var(--ss-gap,64px)}
.sc-pg-h{max-width:1200px;margin:0 auto;padding:clamp(28px,5vw,56px) 24px 8px;text-align:center}
.sc-pg-k{font-size:.625rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--brand-2);margin:0 0 10px}
.sc-pg-t{font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.12;margin:0}
.sc-pg-grid{display:grid;grid-template-columns:repeat(var(--pg-cols,4),minmax(0,1fr));gap:var(--pg-gap,24px);max-width:1200px;margin:0 auto;padding:24px}
@media(max-width:1100px){.sc-pg-grid{grid-template-columns:repeat(min(var(--pg-cols,4),3),minmax(0,1fr))}}
@media(max-width:760px){.sc-pg-grid{grid-template-columns:repeat(var(--pg-cols-mob,2),minmax(0,1fr));gap:14px;padding:16px 14px}}

/* category-nav (B-25) — categories band: circles · pills · tiles · banners */
.sc-cn{padding:clamp(32px,5vw,64px) 24px}
.sc-cn[data-bg=surface]{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sc-cn-h{max-width:1200px;margin:0 auto 26px}
.sc-cn[data-align=center] .sc-cn-h{text-align:center}
.sc-cn-k{font-size:.625rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--brand-2);margin:0 0 10px}
.sc-cn-t{font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.12;margin:0}
.sc-cn-n{font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px}
/* circles */
.sc-cn-circles{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,34px);max-width:1200px;margin:0 auto;justify-content:center}
.sc-cn[data-align=left] .sc-cn-circles{justify-content:flex-start}
.sc-cn-circle{text-decoration:none;color:inherit;text-align:center;width:calc(var(--cn-size,96px) + 36px)}
.sc-cn-ci{width:var(--cn-size,96px);height:var(--cn-size,96px);border-radius:50%;background:var(--hair) center/cover no-repeat;margin:0 auto 10px;border:1px solid var(--hair);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.sc-cn[data-shape=rounded] .sc-cn-ci{border-radius:var(--radius,12px)}
.sc-cn[data-shape=square] .sc-cn-ci{border-radius:0}
.sc-cn-circle:hover .sc-cn-ci{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.sc-cn-circle p{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.3;overflow-wrap:normal;word-break:normal}
/* pills */
.sc-cn-pills{display:flex;flex-wrap:wrap;gap:10px;max-width:1200px;margin:0 auto;justify-content:center}
.sc-cn[data-align=left] .sc-cn-pills{justify-content:flex-start}
.sc-cn-pill{display:inline-flex;align-items:center;padding:10px 20px;border:1px solid var(--hair);border-radius:999px;text-decoration:none;color:var(--ink);font-size:.8125rem;font-weight:600;letter-spacing:.04em;transition:.2s;background:var(--surface,transparent)}
.sc-cn-pill:hover{border-color:var(--ink);transform:translateY(-1px)}
.sc-cn-pill.all{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* tiles */
.sc-cn-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;max-width:1200px;margin:0 auto}
.sc-cn-tile{position:relative;display:block;border-radius:var(--radius,12px);overflow:hidden;text-decoration:none;color:#fff;aspect-ratio:4/3;background:var(--hair)}
.sc-cn[data-shape=square] .sc-cn-tile{border-radius:0}
.sc-cn-ti{position:absolute;inset:0;background:var(--hair) center/cover no-repeat;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.sc-cn-tile:hover .sc-cn-ti{transform:scale(1.05)}
.sc-cn-tm{position:absolute;inset:auto 0 0 0;padding:36px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.sc-cn-tm p{margin:0;font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sc-cn-tm .sc-cn-n{color:rgba(255,255,255,.75)}
/* banners */
.sc-cn-banners{display:flex;flex-direction:column;gap:14px;max-width:1200px;margin:0 auto}
.sc-cn-banner{position:relative;display:block;border-radius:var(--radius,12px);overflow:hidden;text-decoration:none;color:#fff;min-height:clamp(120px,18vw,200px);background:var(--ink)}
.sc-cn[data-shape=square] .sc-cn-banner{border-radius:0}
.sc-cn-bi{position:absolute;inset:0;background:center/cover no-repeat;opacity:.78;transition:transform .8s cubic-bezier(.2,.6,.2,1),opacity .3s}
.sc-cn-banner:hover .sc-cn-bi{transform:scale(1.03);opacity:.9}
.sc-cn-banner::after{content:;position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,0) 62%)}
.sc-cn-banner .sc-cn-bm{z-index:1}
.sc-cn-bm{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(20px,4vw,36px);min-height:inherit;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.sc-cn-bm h3{margin:0;font-family:var(--f-display,var(--f-serif));font-weight:400;font-size:clamp(1.25rem,3vw,2rem);letter-spacing:.02em}
.sc-cn-go{font-size:.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.9}
/* ver-todas link */
.sc-cn-allrow{max-width:1200px;margin:22px auto 0;text-align:center}
.sc-cn[data-align=left] .sc-cn-allrow{text-align:left}
.sc-cn-alllink{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.sc-cn-alllink:hover{color:var(--brand-2);border-color:var(--brand-2)}
@media(max-width:640px){.sc-cn-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

.sc-sld{position:relative;overflow:hidden;background:var(--ink);outline:none}
.sc-sld:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sc-sld-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
.sc-sld-track::-webkit-scrollbar{display:none}
.sc-sld-slide{position:relative;flex:0 0 100%;width:100%;scroll-snap-align:start;display:flex;padding:clamp(28px,5vw,72px);overflow:hidden;color:#fff;min-height:var(--sld-h,clamp(440px,60vh,560px))}
.sc-sld[data-h=compact]{--sld-h:340px}
.sc-sld[data-h=medium]{--sld-h:clamp(440px,60vh,560px)}
.sc-sld[data-h=tall]{--sld-h:clamp(560px,86vh,820px)}
.sc-sld-hit{position:absolute;inset:0;z-index:1}
.sc-sld-img{position:absolute;inset:0;background-repeat:no-repeat;z-index:0}
div.sc-sld-img.desk{background-position:var(--focD,center)}
div.sc-sld-img.mob{background-position:var(--focM,center)}
/* video layer covers the slide */
video.sc-sld-img{width:100%;height:100%;object-fit:cover;pointer-events:none}
/* youtube (IFrame API) player: the wrapper covers the slide; the API-made iframe
   is scaled to COVER (16:9) without letterboxing (!important beats YT's inline size) */
.sc-sld-yt{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sc-sld-yt>div,.sc-sld-yt iframe{position:absolute!important;top:50%!important;left:50%!important;
  transform:translate(-50%,-50%)!important;width:100%!important;height:56.25vw!important;
  min-height:100%!important;min-width:177.78vh!important;border:0!important}
.sc-sld-img.mob{display:none}
.sc-sld-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
.sc-sld-in{position:relative;z-index:2;max-width:min(640px,100%);pointer-events:none}
.sc-sld-in *{pointer-events:auto}
.sc-sld-slide[data-pos^=t]{align-items:flex-start}
.sc-sld-slide[data-pos^=m]{align-items:center}
.sc-sld-slide[data-pos^=b]{align-items:flex-end}
.sc-sld-slide[data-pos$=l]{justify-content:flex-start}
.sc-sld-slide[data-pos$=c]{justify-content:center}
.sc-sld-slide[data-pos$=r]{justify-content:flex-end}
.sc-sld-slide[data-pos$=l] .sc-sld-in{text-align:left}
.sc-sld-slide[data-pos$=c] .sc-sld-in{text-align:center}
.sc-sld-slide[data-pos$=r] .sc-sld-in{text-align:right}
.sc-sld-in[data-scrim]{padding:clamp(20px,3vw,34px);background:rgba(0,0,0,.26);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-radius:var(--radius)}
.sc-sld-k{font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin:0 0 14px;opacity:.92}
.sc-sld-in h2{font-family:var(--sld-hfont,var(--f-serif));font-weight:400;font-size:calc(clamp(2.125rem,6vw,4.5rem)*var(--sld-hscale,1));line-height:1.02;margin:0 0 16px;letter-spacing:-.02em;text-wrap:balance}
.sc-sld-s{font-size:clamp(.9375rem,2vw,1.25rem);line-height:1.55;margin:0 0 26px;opacity:.94}
.sc-sld-cch{display:flex;gap:13px;flex-wrap:wrap}
.sc-sld-slide[data-pos$=c] .sc-sld-cch{justify-content:center}
.sc-sld-slide[data-pos$=r] .sc-sld-cch{justify-content:flex-end}
.sc-sld-cta{display:inline-block;padding:14px 34px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-radius:var(--radius);transition:.2s;cursor:pointer;border:1px solid #fff;background:transparent;color:#fff}
.sc-sld-cta[data-bstyle=solid]{background:#fff;color:#111}
.sc-sld-cta[data-bstyle=solid]:hover{background:transparent;color:#fff}
.sc-sld-cta[data-bstyle=outline]:hover{background:#fff;color:#111}
.sc-sld-cta[data-bstyle=text]{border-color:transparent;padding-left:2px;padding-right:2px;text-decoration:underline;text-underline-offset:5px}
.sc-sld-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;display:grid;place-items:center;background:rgba(0,0,0,.3);color:#fff;border:0;border-radius:50%;cursor:pointer;transition:.18s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sc-sld-ar:hover{background:rgba(0,0,0,.55)}
.sc-sld-ar.prev{left:16px}
.sc-sld-ar.next{right:16px}
.sc-sld-dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;display:flex;justify-content:center}
/* a11y target-size: the BUTTON is a 24px+ tap target (WCAG 2.5.8); the refined
   8px dot is drawn inside via ::before so the visual stays delicate */
.sc-sld-dot{position:relative;width:26px;height:26px;background:none;border:0;padding:0;cursor:pointer}
.sc-sld-dot::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:.18s}
.sc-sld-dot.on::before{background:#fff;width:22px;border-radius:5px}
/* FADE transition — slides stack + crossfade on --idx (JS-driven .on class);
   the track loses horizontal scroll so it needs an explicit height (children are
   absolute). Slide 0 carries .on server-side (idx starts 0) → SSR shows a slide. */
.sc-sld[data-trans=fade] .sc-sld-track{display:block;position:relative;overflow:hidden;min-height:var(--sld-h,clamp(440px,60vh,560px))}
.sc-sld[data-trans=fade] .sc-sld-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease}
.sc-sld[data-trans=fade] .sc-sld-slide.on{opacity:1;pointer-events:auto}
/* autoplay PROGRESS bar — fills 0→100% over the interval, remounts each slide */
.sc-sld-prog{position:absolute;left:0;bottom:0;height:3px;width:0;z-index:3;background:#fff;opacity:.85;animation:sc-sld-fill linear forwards;pointer-events:none}
@keyframes sc-sld-fill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.sc-sld-track{scroll-behavior:auto}.sc-sld-prog{display:none}}
@media(max-width:768px){
  .sc-sld-img.desk{display:none}
  .sc-sld-img.mob{display:block}
  .sc-sld[data-hm=compact]{--sld-h:300px}
  .sc-sld[data-hm=medium]{--sld-h:clamp(380px,56vh,460px)}
  .sc-sld[data-hm=tall]{--sld-h:78vh}
  .sc-sld-ar{width:38px;height:38px}
  .sc-sld-in h2{font-size:calc(clamp(1.75rem,8vw,2.5rem)*var(--sld-hscale,1))}
}
/* touch devices: SWIPE is the gesture and the dots the indicator — the mid-
   height arrows overlapped the slide CTAs on narrow phones (§2 sweep, 320px) */
@media(pointer:coarse){.sc-sld-ar{display:none}}

.store-root .cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:400;background:var(--ink);color:var(--bg);
  padding:16px clamp(16px,4vw,32px);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:clamp(12px,3vw,32px);flex-wrap:wrap;
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.5)}
.store-root .cookiebar .ckt{margin:0;flex:1;min-width:220px;font-size:.8125rem;line-height:1.5;opacity:.9}
.store-root .cookiebar .ckbtns{display:flex;gap:10px;flex:0 0 auto}
.store-root .cookiebar button{border:0;cursor:pointer;font:600 12px inherit;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 22px;border-radius:var(--radius);transition:.18s}
.store-root .cookiebar .ckdec{background:transparent;color:var(--bg);border:1px solid color-mix(in srgb,var(--bg) 40%,transparent)}
.store-root .cookiebar .ckdec:hover{border-color:var(--bg)}
.store-root .cookiebar .ckacc{background:var(--bg);color:var(--ink)}
.store-root .cookiebar .ckacc:hover{opacity:.88}
.store-root .cookiebar .ckcfgbtn{background:transparent;color:var(--bg);opacity:.72;text-decoration:underline;text-underline-offset:3px;padding:11px 8px}
.store-root .cookiebar .ckcfgbtn:hover{opacity:1}
/* granular 'Configurar' panel */
.store-root .cookiebar .ckcfg{flex:0 0 100%;display:flex;flex-direction:column;gap:12px;margin-top:2px;
  border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent);padding-top:14px}
.store-root .cookiebar .ckcat{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:.8125rem;line-height:1.45}
.store-root .cookiebar .ckcat input{margin-top:2px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--ink);cursor:pointer}
.store-root .cookiebar .ckcat b{display:block;font-weight:600;text-transform:none;letter-spacing:0}
.store-root .cookiebar .ckcat i{display:block;font-style:normal;opacity:.6;font-size:.75rem;margin-top:1px}
.store-root .cookiebar .ckcfg .ckbtns{width:100%;justify-content:flex-end}
@media(max-width:560px){.store-root .cookiebar .ckbtns{width:100%}.store-root .cookiebar button{flex:1}
  .store-root .cookiebar .ckcfg .ckbtns button{flex:0 0 auto}}
.store-root a:focus-visible,.store-root button:focus-visible,.store-root input:focus-visible,.store-root textarea:focus-visible,.store-root select:focus-visible,.store-root summary:focus-visible,.store-root [tabindex]:focus-visible{outline:2px solid var(--ink) !important;outline-offset:2px !important;border-radius:2px}.store-root .skip-link{position:fixed;top:0;left:0;z-index:1000;transform:translateY(-130%);background:var(--ink);color:var(--bg);padding:12px 20px;font-size:.875rem;letter-spacing:.02em;text-decoration:none;border-radius:0 0 var(--radius) 0;box-shadow:0 6px 20px -8px rgba(0,0,0,.4);transition:transform .16s ease}.store-root .skip-link:focus{transform:translateY(0)}
/* scroll-reveal — pre-state only when .reveal-on is present (JS-added); SSR/no-JS
   keeps [data-reveal] fully visible. Reduced-motion neutralizes it. */
#store-root.reveal-on [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
#store-root.reveal-on [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#store-root.reveal-on [data-reveal]{opacity:1;transform:none;transition:none}}

.wa-fab{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--botbar-h,0px));width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#fff;text-decoration:none;
  border:0;cursor:pointer;padding:0;
  box-shadow:0 6px 22px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,opacity .22s ease;
  animation:wa-in .34s cubic-bezier(.2,.7,.2,1) both}
/* an open overlay (esp. the right-side cart drawer) sets html.sm-lock — hide the
   bottom-right FAB so it never floats over the drawer; fades back on close.
   Mirrors the scroll-top FAB. */
html.sm-lock .wa-fab{opacity:0;pointer-events:none;transform:scale(.9)}
.wa-fab:hover{transform:scale(1.07);box-shadow:0 10px 30px rgba(37,211,102,.4),0 3px 8px rgba(0,0,0,.18)}
.wa-fab:active{transform:scale(.96)}
.wa-fab:focus-visible{outline:3px solid rgba(37,211,102,.5);outline-offset:3px}
/* soft ambient pulse ring — subtle, once-settled it idles */
.wa-fab::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  opacity:0;animation:wa-pulse 2.6s ease-out infinite}
@keyframes wa-in{from{opacity:0;transform:scale(.4) translateY(8px)}to{opacity:1;transform:none}}
@keyframes wa-pulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@media(max-width:520px){.wa-fab{width:52px;height:52px}}
/* any fixed bottom bar (ATC/action/cart) is cleared generically via --botbar-h
   (store.core/botbar-offset) — the FAB lifts above whatever bar is present. */
/* channel picker — popover above the FAB; theme surface, WhatsApp-green accents */
.wa-sheet{position:fixed;z-index:61;right:max(18px,env(safe-area-inset-right));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--botbar-h,0px) + 66px);
  min-width:250px;max-width:320px;background:var(--surface,var(--bg,#fff));color:var(--ink,#111);
  border:1px solid var(--hair,rgba(0,0,0,.1));border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.12);
  animation:wa-in .22s cubic-bezier(.2,.7,.2,1) both}
html.sm-lock .wa-sheet{opacity:0;pointer-events:none}
.wa-sheet-t{margin:0;padding:14px 16px 8px;font-size:.8125rem;letter-spacing:.02em;opacity:.75}
.wa-ch{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;
  color:inherit;text-decoration:none;transition:background .15s ease}
.wa-ch:hover{background:color-mix(in srgb,#25D366 10%,transparent)}
.wa-ch svg{flex:0 0 auto;color:#25D366}
.wa-ch-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.wa-ch-n{font-size:.875rem;font-weight:600}
.wa-ch-m{font-size:.75rem;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
@media(max-width:520px){
  .wa-sheet{left:10px;right:10px;max-width:none;border-radius:18px;
    bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--botbar-h,0px) + 62px)}}
@media(prefers-reduced-motion:reduce){
  .wa-fab{animation:none;transition:none}
  .wa-fab:hover{transform:none}
  .wa-fab::after{animation:none;display:none}
  .wa-sheet{animation:none}}

/* .store-root prefix so the green text beats base-css `.store-root a{color:inherit}` */
/* AA contrast (Lighthouse fail 2026-07-02): raw WhatsApp green #25D366 is ~2:1
   on light surfaces — mix it toward the DNA's ink so it darkens on light themes
   and lightens on dark ones, staying recognizably WhatsApp on both */
/* QUIET text link, not a bordered CTA — with the buy block pinned (P1-2) this
   sits right above qty/ATC, and a full-width bordered green button there reads
   as a COMPETING primary action (hierarchy smell, screenshot critique) */
.store-root .wa-inq{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;
  color:color-mix(in srgb,#25D366 52%,var(--ink));
  background:none;border:0;text-decoration:none;cursor:pointer;
  font-size:.78125rem;letter-spacing:.03em;transition:color .18s ease}
.store-root .wa-inq:hover{color:color-mix(in srgb,#25D366 30%,var(--ink));text-decoration:underline;text-underline-offset:3px}
.store-root .wa-inq svg{flex:0 0 auto}

/* FAB colours: --ink/--bg (the fundamental text/background pair) — NOT
   --brand-2/--on-brand. --on-brand is a static DNA value that does NOT track
   --brand-2, so a dark or merchant-overridden brand-2 gave a black icon on a
   black disc (invisible; brutalista + custom themes, 2026-07-08). --ink always
   contrasts --bg on every DNA and every override (else all body text would
   break), so the icon can never vanish. */
.stchat-fab{position:fixed;z-index:72;right:max(18px,env(safe-area-inset-right));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--botbar-h,0px));width:56px;height:56px;
  border-radius:50%;display:grid;place-items:center;background:var(--ink,#1a1a1a);color:var(--bg,#fff);
  border:0;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}
.stchat-fab:hover{transform:scale(1.06)}
.stchat-fab:focus-visible{outline:3px solid var(--ink,#1a1a1a);outline-offset:3px}
/* The global a/button color reset is now :where()-wrapped (0-specificity, see
   core.cljs), so bare single-class colors apply again. These .store-root-prefixed
   rules predate that fix; kept as harmless belt-and-braces. DIV surfaces
   (header/bubble) aren't buttons so they never needed it. */
.store-root .stchat-fab,.store-root .stchat-send{color:var(--bg,#fff)}
.store-root .stchat-act.wa{color:#fff}
.store-root .stchat-act.li{color:var(--bg,#fff)}
html.sm-lock .stchat-fab{opacity:0;pointer-events:none}
/* while the assistant panel is open it owns the bottom-right corner — clear the
   scroll-top ring and the cinematic bottom-search pill so nothing overlaps it. */
html.sc-chat-open .stt,html.sc-chat-open .cin-search{opacity:0 !important;pointer-events:none}
/* Slim, content-height assistant — it GROWS with its content up to a modest cap
   (never a fixed 1/3-page block). The agent drives the STORE, so the panel only
   holds the current exchange + input; results live on the store behind it. */
.stchat-panel{position:fixed;z-index:73;right:max(16px,env(safe-area-inset-right));
  bottom:calc(max(16px,env(safe-area-inset-bottom)) + var(--botbar-h,0px));
  width:min(340px,calc(100vw - 32px));height:auto;max-height:min(52vh,430px);
  color:var(--ink,#1a1a1a);border:1px solid color-mix(in srgb,var(--hair,#e5e5e5) 60%,transparent);
  /* translucent frosted glass — the store stays visible behind the assistant */
  background:color-mix(in srgb,var(--surface,#fff) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-radius:18px;display:flex;flex-direction:column;overflow:hidden;font-family:var(--f-sans,sans-serif);
  box-shadow:0 16px 44px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.10);
  animation:stchat-pop .2s cubic-bezier(.2,.7,.2,1)}
@keyframes stchat-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* solid-fill assistant surfaces use --ink/--bg (guaranteed contrast) for the same
   reason as the FAB — --on-brand does not track a dark/overridden --brand-2. */
.stchat-hd{display:flex;align-items:center;gap:9px;padding:11px 14px;color:var(--bg,#fff);flex:0 0 auto;
  background:color-mix(in srgb,var(--ink,#1a1a1a) 88%,transparent)}
.stchat-av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto}
.stchat-hd .nm{font-weight:700;font-size:13px;line-height:1.1}
.stchat-hd .av2{font-size:10px;opacity:.85}
.stchat-hd .hd-tt{flex:1;min-width:0}
.stchat-exp,.stchat-x{background:none;border:0;color:inherit;cursor:pointer;opacity:.75;padding:5px;line-height:0;border-radius:8px;display:grid;place-items:center}
.stchat-exp:hover,.stchat-x:hover{opacity:1;background:rgba(255,255,255,.14)}
.stchat-body{flex:0 1 auto;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:transparent}
.stchat-msg{max-width:86%;padding:8px 11px;border-radius:13px;font-size:13.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.stchat-msg.u{align-self:flex-end;background:var(--ink,#1a1a1a);color:var(--bg,#fff);border-bottom-right-radius:4px}
.stchat-msg.a{align-self:flex-start;color:var(--ink,#1a1a1a);border-bottom-left-radius:4px;
  background:color-mix(in srgb,var(--surface,#fff) 82%,transparent);border:1px solid color-mix(in srgb,var(--hair,#e5e5e5) 55%,transparent)}
/* markdown inside a bubble — sized to the bubble, tight spacing, and it MUST
   inherit the bubble's text color (else the .md default ink wins → dark text on
   the dark user bubble = unreadable) */
.stchat-msg .md,.stchat-msg .md *{color:inherit}
.stchat-msg .md{font-size:inherit;line-height:1.4}
.stchat-msg .md>*{margin:0}.stchat-msg .md>*+*{margin-top:.45em}
.stchat-msg .md ul,.stchat-msg .md ol{padding-left:1.15em}
.stchat-msg .md strong{font-weight:700}
.stchat-msg .md a{color:inherit;text-decoration:underline}
.stchat-act{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:11px 14px;min-height:44px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;border:0}
.stchat-act.wa{background:#25D366;color:#fff}
.stchat-act.li{background:var(--ink,#1a1a1a);color:var(--bg,#fff)}
/* multi-channel handoff: one labeled button per canal, stacked */
.stchat-chs{display:flex;flex-direction:column;gap:6px;align-self:flex-start;max-width:86%}
.stchat-chips{display:flex;flex-wrap:wrap;gap:7px}
.stchat-chip{background:var(--surface,#fff);border:1px solid var(--hair,#e5e5e5);color:var(--ink,#1a1a1a);
  border-radius:20px;padding:7px 12px;font-size:12px;cursor:pointer}
.stchat-chip:hover{border-color:var(--brand-2,#1a1a1a)}
.stchat-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px}
.stchat-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted,#999);animation:stc-b 1s infinite}
.stchat-typing i:nth-child(2){animation-delay:.15s}.stchat-typing i:nth-child(3){animation-delay:.3s}
@keyframes stc-b{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.stchat-ft{display:flex;gap:8px;padding:10px;flex:0 0 auto;
  border-top:1px solid color-mix(in srgb,var(--hair,#e5e5e5) 55%,transparent);
  background:color-mix(in srgb,var(--surface,#fff) 55%,transparent)}
.stchat-ft input{flex:1;border:1px solid color-mix(in srgb,var(--hair,#e5e5e5) 70%,transparent);border-radius:20px;padding:9px 14px;font-size:14px;
  font-family:inherit;background:color-mix(in srgb,var(--surface,#fff) 70%,transparent);color:var(--ink,#1a1a1a);outline:none}
.stchat-ft input:focus{border-color:var(--brand-2,#1a1a1a)}
.stchat-send{width:40px;height:40px;border-radius:50%;border:0;background:var(--ink,#1a1a1a);color:var(--bg,#fff);
  cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.stchat-send svg{stroke:currentColor;stroke-width:2.4}
.stchat-send:disabled{opacity:.72;cursor:default}
@media(max-width:520px){.stchat-panel{width:calc(100vw - 20px);max-height:min(60vh,460px);left:10px;bottom:10px}}

.stag-ovl{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:var(--bg,#fafafa);color:var(--ink,#1a1a1a);font-family:var(--f-sans,sans-serif);
  animation:stag-in .22s cubic-bezier(.2,.7,.2,1)}
@keyframes stag-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stag-hd{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--hair,#e5e5e5);
  background:var(--surface,#fff);position:sticky;top:0;z-index:2}
.stag-hd .ttl{font-weight:800;font-size:18px;line-height:1.15;letter-spacing:-.01em}
.stag-hd .sub{font-size:12px;color:var(--muted,#888)}
.stag-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--brand-2,#1a1a1a);background:var(--bg,#f4f4f4);border-radius:20px;padding:4px 10px}
.stag-x{margin-left:auto;background:none;border:1px solid var(--hair,#e5e5e5);border-radius:10px;color:inherit;
  cursor:pointer;padding:8px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.stag-x:hover{background:var(--bg,#f4f4f4)}
.stag-body{flex:1;overflow-y:auto;padding:20px;max-width:1100px;margin:0 auto;width:100%}
.stag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.stag-card{background:var(--surface,#fff);border:1px solid var(--hair,#e5e5e5);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.stag-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.12);transform:translateY(-2px)}
.stag-card .ph{aspect-ratio:1;background:var(--bg,#f4f4f4);position:relative;overflow:hidden}
.stag-card .ph img{width:100%;height:100%;object-fit:cover}
.stag-card .off{position:absolute;top:8px;left:8px;background:var(--brand-2,#1a1a1a);color:var(--on-brand,#fff);
  font-size:10px;font-weight:800;padding:3px 7px;border-radius:6px;text-transform:uppercase}
.stag-card .oos{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.6);
  font-size:12px;font-weight:700;color:#555}
.stag-card .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.stag-card .nm{font-size:13px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stag-card .note{font-size:11px;color:var(--muted,#888);font-style:italic;line-height:1.3}
.stag-card .pr{font-size:15px;font-weight:800;margin-top:auto}
.stag-card .pr small{font-size:10px;font-weight:600;color:var(--muted,#888)}
.stag-card .row{display:flex;gap:6px;margin-top:4px}
.stag-btn{flex:1;text-align:center;border:0;border-radius:9px;padding:8px;font-size:12px;font-weight:700;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.stag-btn.go{background:var(--brand-2,#1a1a1a);color:var(--on-brand,#fff)}
.stag-btn.gh{background:var(--bg,#f0f0f0);color:var(--ink,#1a1a1a)}
.stag-btn:hover{opacity:.9}
.stag-empty{padding:60px 20px;text-align:center;color:var(--muted,#888)}
/* compare */
.stag-cmp{overflow-x:auto}
.stag-cmp table{border-collapse:collapse;width:100%;min-width:520px}
.stag-cmp th,.stag-cmp td{border:1px solid var(--hair,#e5e5e5);padding:12px;text-align:left;vertical-align:top;font-size:13px}
.stag-cmp thead th{background:var(--surface,#fff);position:sticky;top:0}
.stag-cmp .rl{font-weight:700;color:var(--muted,#666);white-space:nowrap;width:120px;background:var(--bg,#fafafa)}
.stag-cmp .pnm{font-weight:700;font-size:14px}
.stag-cmp .pimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:8px;background:var(--bg,#f4f4f4)}
.stag-cmp .pr{font-weight:800;font-size:15px}
@media(max-width:520px){.stag-body{padding:14px}.stag-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}

.pdp-mbar{display:none}
@media(max-width:860px){
  .pdp-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;align-items:center;gap:14px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--hair);box-shadow:0 -4px 22px rgba(0,0,0,.09);
    transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s;
    /* S-152: the SHOWN resting state is explicit (transform:none), NOT the tail of
       an entrance keyframe. The old entrance keyframe left no static transform on
       the shown state, so when it did not run at SSR→hydrate mount (its common
       failure) the both-fill pinned the bar at the from-frame = translateY(100%) —
       the pinned ATC never appeared, breaking CTA reachability after scrolling past
       the in-page buy box. The existing transition slides it on the .hide toggle. */
    transform:none;opacity:1}
  /* P1-12: while the in-page ATC is on screen the bar slides out — no double
     Agregar button (the IntersectionObserver in pdp-bar/bar toggles .hide) */
  .pdp-mbar.hide{transform:translateY(100%);opacity:0;pointer-events:none}
  .pdp-mbar .pm-price{display:flex;flex-direction:column;line-height:1.15;flex:0 0 auto;min-width:0}
  .pdp-mbar .pm-price .pm-amt{font-family:var(--f-sans);font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap}
  .pdp-mbar .pm-price .pm-was{font-weight:400;font-size:.78em;color:var(--deal-strike,var(--muted));text-decoration:line-through}
  .pdp-mbar .pm-price .pm-cuo{font-size:.6875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .pdp-mbar .pm-add{flex:1;min-height:48px;background:var(--ink);color:var(--bg);border:0;
    font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
    border-radius:var(--radius);transition:background .2s,transform .12s}
  .pdp-mbar .pm-add:hover{background:var(--brand-2)}
  .pdp-mbar .pm-add:active{transform:scale(.98)}
  .pdp-mbar .pm-add:disabled{opacity:.4;cursor:not-allowed}
  .pdp-mbar .pm-add:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
  /* bar clearance is NOT reserved here anymore. Reserving it on this mid-page
     PDP wrapper opened a dead gap before the recs rail + footer (which render
     BELOW the wrapper in store.core). The clearance now lives once at the true
     page bottom — .store-root{padding-bottom:var(--botbar-h)} — tracking the
     measured bar height wherever the last content actually is. */
}

.cart-cobar{display:none}
@media(max-width:900px){
  .cart-cobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;align-items:center;gap:14px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--hair);box-shadow:0 -4px 24px rgba(0,0,0,.11);
    /* S-153 (S-152 family): deterministic SHOWN state — an explicit transform:none,
       NOT the tail of an entrance keyframe. The old cobar entrance keyframe left no
       static transform, so when it did not run at SSR→hydrate / re-render the
       both-fill pinned the bar at the from-frame (translateY(100%), opacity:0) =
       the persistent Finalizar checkout CTA never appeared. */
    transform:none;opacity:1}
  .cart-cobar .cb-tot{display:flex;flex-direction:column;line-height:1.1;flex:0 0 auto;min-width:0}
  .cart-cobar .cb-tot .cb-lbl{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .cart-cobar .cb-tot .cb-amt{font-family:var(--f-serif);font-size:1.1875rem;color:var(--ink);white-space:nowrap}
  .cart-cobar .cb-go{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
    background:var(--ink);color:var(--bg);border:0;border-radius:var(--radius);font-size:.75rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,transform .12s}
  .cart-cobar .cb-go:hover{background:var(--brand-2)}
  .cart-cobar .cb-go:active{transform:scale(.98)}
  .cart-cobar .cb-go:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
  /* carts add `cart-has-cobar` to their scroll root → reserve space so the last
     content (summary/note) clears the fixed bar */
  .cart-has-cobar{padding-bottom:86px !important}
}
.store-root .qty .qpk{font-size:.625rem;font-weight:700;color:var(--brand-2);padding:0 9px 0 1px;letter-spacing:.05em}.store-root .srlive{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.store-root .snotice{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:240;display:flex;align-items:center;gap:12px;max-width:min(92vw,480px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:var(--radius);box-shadow:0 10px 34px rgba(0,0,0,.28);font-size:.8125rem;line-height:1.45}.store-root .snotice button{background:none;border:0;color:inherit;opacity:.7;cursor:pointer;font-size:.875rem;line-height:1;padding:2px}.store-root .snotice button:hover{opacity:1}.store-root .copt-line{padding:16px 0;border-bottom:1px solid var(--hair)}.store-root .copt-head{display:flex;align-items:flex-start;gap:12px;margin:0 0 6px}.store-root .copt-img{flex:0 0 auto;width:52px;height:65px;object-fit:cover;background:var(--hair);border-radius:var(--radius)}.store-root .copt-htx{flex:1 1 auto;min-width:0}.store-root .copt-title{font-size:.875rem;margin:0;line-height:1.3;overflow-wrap:anywhere}.store-root .copt-hrt{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}.store-root .copt-total{font-weight:600;font-size:.875rem;white-space:nowrap;font-variant-numeric:tabular-nums}.store-root .copt-del{background:none;border:0;color:var(--muted);font-size:.6875rem;cursor:pointer;text-decoration:underline;padding:0}.store-root .copt-del:hover{color:var(--ink)}.store-root .copt{display:grid;grid-template-columns:minmax(64px,1fr) auto auto auto;margin:2px 0 0}.store-root .copt .copt-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;column-gap:9px;padding:6px 0;border-top:1px solid var(--hair)}.store-root .copt .copt-row:first-child{border-top:0}.store-root .copt .copt-lbl{min-width:0;display:flex;align-items:center;gap:6px;font-size:.8125rem;line-height:1.25}.store-root .copt .copt-nm{overflow-wrap:anywhere}.store-root .copt .copt-pvr{font-size:.65625rem;font-weight:600;color:var(--alert,#d64545);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;margin-left:8px}.store-root .copt .copt-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}.store-root .copt .copt-stp{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:var(--radius)}.store-root .copt .copt-stp button{width:28px;height:30px;background:none;border:0;cursor:pointer;color:inherit;font-size:.9375rem;line-height:1;padding:0}.store-root .copt .copt-stp button:disabled{opacity:.4;cursor:not-allowed}.store-root .copt .copt-stp .qtyin{width:32px;text-align:center;border:0;background:none;font:inherit;font-size:.875rem;color:inherit;-moz-appearance:textfield;padding:0}.store-root .copt .copt-stp .qtyin::-webkit-outer-spin-button,.store-root .copt .copt-stp .qtyin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.store-root .copt .copt-sub{justify-self:end;text-align:right;font-size:.78125rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.store-root .copt .copt-rm{justify-self:end;background:none;border:0;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:2px 3px;border-radius:var(--radius)}.store-root .copt .copt-rm:hover{color:var(--ink)}.store-root .copt .copt-sum{grid-column:1/-1;margin:9px 0 0;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.store-root .copt[data-layout=compact]{grid-template-columns:minmax(64px,1fr) auto auto}.store-root .copt[data-layout=compact] .copt-row{padding:4px 0}.store-root .copt[data-layout=compact] .copt-sub{display:none}@supports not (grid-template-columns:subgrid){.store-root .copt{display:block}.store-root .copt .copt-row{display:flex;gap:9px}.store-root .copt .copt-lbl{flex:1 1 auto}.store-root .copt .copt-sub{flex:0 0 auto;min-width:58px}}@media(max-width:380px){.store-root .copt{grid-template-columns:minmax(48px,1fr) auto auto}.store-root .copt .copt-row{grid-template-rows:auto auto}.store-root .copt .copt-sub{grid-column:1/-1;grid-row:2;justify-self:end;padding-top:2px;color:var(--muted)}.store-root .copt[data-layout=compact] .copt-sub{display:none}}@media(pointer:coarse){.store-root .copt .copt-stp button{width:38px;height:44px}.store-root .copt .copt-stp .qtyin{width:40px;height:44px}.store-root .copt .copt-rm{min-width:44px;min-height:44px}.store-root .copt-del{padding:12px 4px;margin:-9px -4px}}.store-root .acctlk{max-width:150px;display:inline-flex;align-items:center;gap:7px;min-width:0;vertical-align:middle}.store-root .acctlk.txt{max-width:100%}.store-root .acctlk .acct-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store-root .acctlk .acct-ic{display:none;line-height:0}@media(max-width:640px){.store-root .acctlk:not(.txt) .acct-tx{display:none}.store-root .acctlk:not(.txt) .acct-ic{display:inline-flex}.store-root .acctlk:not(.txt){max-width:none}}.store-root .acctic{display:inline-flex;align-items:center;justify-content:center}@media(pointer:coarse),(max-width:760px){.store-root .acctic{min-width:44px;min-height:44px}}
.store-more{display:flex;flex-direction:column;align-items:center;gap:16px;padding:38px 24px 10px;text-align:center}
.store-more .prog{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.store-more .prog .bar{display:block;width:130px;height:2px;margin:11px auto 0;background:var(--hair);border-radius:2px;overflow:hidden}
.store-more .prog .bar i{display:block;height:100%;background:var(--brand-1);transition:width .45s ease}
.store-more .btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  min-height:48px;padding:0 36px;background:none;border:1px solid var(--ink);color:var(--ink);
  font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius);
  transition:background .2s,color .2s}
.store-more .btn:hover{background:var(--ink);color:var(--bg)}
.store-more .btn:disabled{opacity:.5;cursor:default}
.store-more .sk{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%;max-width:1200px;margin-top:4px}
.store-more .sk .c{aspect-ratio:3/4;border-radius:var(--radius);
  background:linear-gradient(100deg,var(--hair) 30%,color-mix(in srgb,var(--hair) 55%,var(--surface)) 50%,var(--hair) 70%);
  background-size:200% 100%;animation:store-sk 1.3s ease-in-out infinite}
@keyframes store-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.store-more .end{font-size:.75rem;letter-spacing:.1em;color:var(--muted);margin:0}
@media(max-width:760px){.store-more .sk{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(prefers-reduced-motion:reduce){.store-more .sk .c{animation:none}}

.store-recs{max-width:1440px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(18px,4vw,40px) clamp(48px,6vw,80px)}
.store-recs > h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,3vw,30px);margin:0 0 clamp(20px,3vw,30px);
  letter-spacing:-.01em}
.store-recs .rrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,240px);gap:clamp(16px,2vw,28px);
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.store-recs .rrail > *{scroll-snap-align:start;min-width:0}
.store-recs .rrail::-webkit-scrollbar{display:none}
@media(max-width:760px){.store-recs .rrail{grid-auto-columns:minmax(150px,64vw)}}

.store-oc{max-width:1440px;margin:0 auto;padding:clamp(20px,3vw,32px) clamp(18px,4vw,40px) 0}
.store-oc h3{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.store-oc .ocrow{display:flex;gap:12px;flex-wrap:wrap}
.store-oc .occ{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;width:72px}
.store-oc .occ img{width:72px;height:90px;object-fit:cover;border-radius:6px;border:1px solid var(--hair)}
.store-oc .occ span{font-size:.625rem;color:var(--muted);text-align:center;line-height:1.2;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:72px;text-transform:capitalize}

.store-rv{max-width:1440px;margin:0 auto;padding:clamp(30px,5vw,56px) clamp(18px,4vw,40px) clamp(40px,6vw,72px)}
.store-rv > h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.25rem,2.6vw,1.625rem);margin:0 0 clamp(16px,2.4vw,24px);letter-spacing:-.01em}
.store-rv .rvtrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);gap:clamp(14px,2vw,22px);
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.store-rv .rvtrack::-webkit-scrollbar{display:none}
.store-rv .rvc{scroll-snap-align:start;text-decoration:none;color:inherit;min-width:0}
.store-rv .rvc .rvimg{width:100%;aspect-ratio:3/4;background:var(--hair) center/cover no-repeat;border-radius:var(--radius);margin-bottom:10px}
.store-rv .rvc .rvn{font-size:.8125rem;line-height:1.35;margin:0 0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.store-rv .rvc .rvp{font-size:.8125rem;font-weight:600;margin:0}
.store-rv .rvc:hover .rvn{color:var(--brand-1)}
@media(max-width:760px){.store-rv .rvtrack{grid-auto-columns:minmax(130px,44vw)}}

.cart-recs{max-width:1240px;margin:0 auto;padding:clamp(24px,4vw,44px) clamp(18px,4vw,56px) clamp(30px,4vw,56px);border-top:1px solid var(--hair)}
.cart-recs > h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.125rem,2.4vw,1.5rem);margin:0 0 clamp(14px,2vw,22px);letter-spacing:-.01em}
.cart-recs .crtrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);gap:clamp(14px,2vw,22px);
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cart-recs .crtrack::-webkit-scrollbar{display:none}
.cart-recs .crc{position:relative;scroll-snap-align:start;text-decoration:none;color:inherit;min-width:0}
.cart-recs .crc .crimg{width:100%;aspect-ratio:3/4;background:var(--hair) center/cover no-repeat;border-radius:var(--radius);margin-bottom:10px}
.cart-recs .crc .crn{font-size:.8125rem;line-height:1.35;margin:0 0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cart-recs .crc .crp{font-size:.8125rem;font-weight:600;margin:0}
.cart-recs .crc:hover .crn{color:var(--brand-1)}
@media(max-width:760px){.cart-recs .crtrack{grid-auto-columns:minmax(130px,44vw)}}
/* compact (side-panel drawer/sheet carts): tighter, smaller cards, no max-width */
.cart-recs.compact{max-width:none;padding:18px 4px 8px;margin-top:8px}
.cart-recs.compact > h3{font-size:.9375rem;margin:0 0 12px}
.cart-recs.compact .crtrack{grid-auto-columns:minmax(112px,124px);gap:12px}
.cart-recs.compact .crc .crn{font-size:.75rem}
.cart-recs.compact .crc .crp{font-size:.75rem}
.store-404{display:grid;place-items:center;min-height:60vh;padding:60px 24px;text-align:center}.store-404 .inner{max-width:520px}.store-404 .code{font-family:var(--f-display);font-size:clamp(4rem,12vw,7.5rem);line-height:1;margin:0;color:var(--brand-1);opacity:.5;letter-spacing:-.02em}.store-404 h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,4vw,2.125rem);margin:14px 0 0}.store-404 p{color:var(--muted);line-height:1.6;margin:16px 0 30px}.store-404 .btn{display:inline-block;min-height:48px;line-height:48px;padding:0 34px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-radius:var(--radius);transition:background .2s}.store-404 .btn:hover{background:var(--brand-2)}@media (pointer:coarse),(max-width:760px){.store-root .sw{width:40px !important;height:40px !important}.store-root .qty button{min-width:44px !important;min-height:44px !important}.store-root .sz{min-height:44px !important}.store-root .rm{min-height:44px !important;display:inline-flex;align-items:center}.store-root .ck-atc{min-height:44px !important}.store-root .qv{min-height:44px !important}.store-root .iconbtn,.store-root .cartbtn,.store-root .ham,.store-root .dx,.store-root .x,.store-root .ov-x,.store-root .wrm,.store-root .close{min-width:44px !important;min-height:44px !important;align-items:center !important;justify-content:center !important}.store-root .acctlk{min-height:44px !important;align-items:center !important}.store-root .sc-sld-dot{min-width:32px !important;min-height:32px !important}.store-root .frow,.store-root .gt-frow{min-height:44px !important}.store-root select,.store-root .gt-filter>summary{min-height:44px !important}.store-root .sdeals .chip,.store-root .sdeals .all,.store-root .cat-chips .chip{min-height:44px !important}.store-root .cat-crumbs a,.store-root .crumbs a{display:inline-block;padding:10px 4px;margin:-8px -4px}.store-root .acctnav a,.store-root .acctnav .logout,.store-root .ofilter button{min-height:44px !important}.store-root .od-top a,.store-root .od-top button{min-height:44px !important;align-items:center !important}.store-root footer a{display:inline-block;padding:10px 6px;margin:-8px -6px}.store-root footer .social a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;margin:-10px -4px}.store-root footer .sf-social a{min-width:44px;min-height:44px;justify-content:center;align-items:center}.store-root footer button{min-height:44px !important}.store-root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),.store-root textarea{font-size:16px !important}}.store-root .sz .swdot{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.18);margin-right:7px;vertical-align:-1px;flex:0 0 auto}.store-root .swatches .sz{text-transform:capitalize;white-space:normal;text-align:left;max-width:100%;display:inline-flex;align-items:center}@property --hfl{syntax:'<length>';inherits:false;initial-value:0px}@property --hfr{syntax:'<length>';inherits:false;initial-value:0px}.hfade{--hfl:0px;--hfr:28px;mask-image:linear-gradient(90deg,transparent 0,#000 var(--hfl),#000 calc(100% - var(--hfr)),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--hfl),#000 calc(100% - var(--hfr)),transparent 100%)}@supports (animation-timeline:scroll()){.hfade{animation:hfl linear both,hfr linear both;animation-timeline:scroll(self x),scroll(self x)}@keyframes hfl{0%{--hfl:0px}12%,100%{--hfl:28px}}@keyframes hfr{0%,88%{--hfr:28px}100%{--hfr:0px}}}.store-root .buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.store-root .buy > *{flex:0 0 auto}.store-root .buy .atc{flex:1 1 200px;min-width:180px;white-space:nowrap}html.sm-lock,html.sm-lock body{overflow:hidden}
.store-lb{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,12,.94);backdrop-filter:blur(4px);animation:store-lb-in .2s ease both;touch-action:pan-y}
@keyframes store-lb-in{from{opacity:0}to{opacity:1}}
.store-lb .lb-img{max-width:92vw;max-height:88vh;object-fit:contain;display:block;user-select:none;
  transition:transform .25s ease;cursor:zoom-in;border-radius:2px;-webkit-user-drag:none;touch-action:none}
/* zoom transform is applied INLINE (a store-root reveal rule out-specifies a
   class selector here, so inline is the reliable winner); this rule only owns
   the cursor + a paint hint. Origin change is instant; only scale animates. */
.store-lb .lb-img.zoomed{cursor:zoom-out;will-change:transform,transform-origin}
.store-lb .lb-x{position:absolute;top:max(16px,env(safe-area-inset-top));right:18px;width:46px;height:46px;
  display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .2s}
.store-lb .lb-x:hover{background:rgba(255,255,255,.24)}
.store-lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:50%;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .2s,transform .2s}
.store-lb .lb-nav:hover{background:rgba(255,255,255,.24)}
.store-lb .lb-nav.prev{left:18px}.store-lb .lb-nav.next{right:18px}
.store-lb .lb-count{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.85);font-size:.75rem;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.store-lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:640px){
  .store-lb .lb-nav{width:44px;height:44px}
  .store-lb .lb-img{max-width:96vw;max-height:82vh}
}
@media(prefers-reduced-motion:reduce){.store-lb{animation:none}.store-lb .lb-img{transition:none}}

.store-search{position:relative}
.store-search form{display:flex}
.store-search .sdrop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.14);overflow:hidden;
  max-height:min(70vh,460px);overflow-y:auto;overscroll-behavior:contain;animation:store-search-in .16s ease both}
@keyframes store-search-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* rows carry their OWN colors — the panel must read identically inside dark
   glass cards, dark DNAs, and light pages (user: white-on-white names) */
.store-search .sr{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--hair);transition:background .12s ease}
.store-search .sr:last-of-type{border-bottom:0}
.store-search .sr.on,.store-search .sr:hover{background:color-mix(in srgb,var(--brand-1) 8%,var(--surface))}
.store-search .sr.on{box-shadow:inset 2px 0 0 var(--brand-1)}
.store-search .sr .thumb{width:48px;height:60px;flex:0 0 auto;background:var(--hair) center/cover no-repeat;border-radius:calc(var(--radius)*.6)}
.store-search .sr .thumb.cat{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.store-search .sr.catr .pr{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.store-search .sr.catr .pr .sdeal{color:var(--deal-ink);font-weight:600}
.store-search .sr.catr .pr .sdeal::before{content:'·';margin:0 8px;color:var(--muted);font-weight:400}
.store-search .sr .meta{min-width:0;flex:1}
.store-search .sr .nm{font-size:.84375rem;line-height:1.35;margin:0 0 3px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-search .sr .nm mark{background:none;color:inherit;font-weight:700}
.store-search .sr .pr{font-size:.78125rem;font-weight:600;margin:0;color:var(--muted)}
.store-search .sr .go{flex:0 0 auto;color:var(--muted);opacity:0;transition:opacity .12s ease}
.store-search .sr.on .go,.store-search .sr:hover .go{opacity:.8}
/* loading shimmer rows */
.store-search .sr.skel{pointer-events:none}
.store-search .sr.skel .thumb,.store-search .sr.skel .ln{background:linear-gradient(90deg,var(--hair) 25%,color-mix(in srgb,var(--hair) 50%,var(--surface)) 45%,var(--hair) 65%);
  background-size:220% 100%;animation:ssk 1.1s linear infinite}
.store-search .sr.skel .ln{display:block;height:11px;border-radius:6px;width:72%;margin:0 0 7px}
.store-search .sr.skel .ln.s{width:34%;margin:0}
@keyframes ssk{from{background-position:180% 0}to{background-position:-40% 0}}
/* 'Ver todos los resultados' is STICKY at the dropdown's bottom — it's the
   primary escape hatch and must stay visible while the results scroll
   (user report 2026-07-05: it hid below the fold). */
.store-search .sall{position:sticky;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;text-decoration:none;color:var(--brand-1);background:var(--surface);border-top:1px solid var(--hair)}
.store-search .sall:hover{background:color-mix(in srgb,var(--brand-1) 8%,var(--surface))}
.store-search .snote{padding:20px 14px;text-align:center;color:var(--muted);font-size:.8125rem}
/* recent searches */
.store-search .rhead{display:flex;align-items:center;justify-content:space-between;padding:11px 14px 7px;
  font-size:.65625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.store-search .rhead button{background:none;border:0;cursor:pointer;color:var(--muted);font:inherit;
  text-decoration:underline;text-underline-offset:2px;padding:4px}
.store-search .rhead button:hover{color:var(--ink)}
.store-search .sr.rc .rcic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  color:var(--muted);background:color-mix(in srgb,var(--hair) 55%,var(--surface));border-radius:50%}
/* full-screen search overlay (opened by a menu search icon) */
.search-ov{position:fixed;inset:0;z-index:300;background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;padding:clamp(60px,12vh,140px) 20px 40px;
  animation:search-ov-in .2s ease both}
@keyframes search-ov-in{from{opacity:0}to{opacity:1}}
.search-ov .ov-x{position:absolute;top:18px;right:18px;width:46px;height:46px;display:grid;place-items:center;
  background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:50%;cursor:pointer;transition:background .2s}
.search-ov .ov-x:hover{background:var(--hair)}
.search-ov .ov-box{width:min(680px,100%)}
.search-ov .ov-box .store-search form{border-bottom:2px solid var(--ink);align-items:center;gap:12px;padding:0 2px 12px}
.search-ov .ov-box .store-search .ico{color:var(--muted);display:flex}
.search-ov .ov-box .store-search input{flex:1;border:0;background:none;outline:none;color:var(--ink);
  font-family:var(--f-display);font-size:clamp(1.375rem,4vw,2.125rem);font-weight:400}
.search-ov .ov-box .store-search input::placeholder{color:var(--muted);opacity:.7}
.search-ov .ov-box .store-search .sdrop{margin-top:14px;position:static;box-shadow:none;border:0;background:none;max-height:60vh}
.search-ov .ov-box .store-search .sr{border-color:color-mix(in srgb,var(--ink) 8%,transparent)}
/* overlay flavor: sticky needs an opaque backing (the page bg) or rows show
   through while scrolling */
.search-ov .ov-box .store-search .sall{background:var(--bg)}

.wl-heart{background:none;border:0;cursor:pointer;color:inherit;padding:0;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s ease,color .2s ease}
.wl-heart:hover{color:var(--brand-1)}
.wl-heart:active{transform:scale(.85)}
.wl-heart.on{color:var(--brand-1)}
.wl-heart.on svg{fill:var(--brand-1);stroke:var(--brand-1)}
/* PDP heart sits beside the ATC */
.wl-heart.pdp{flex:0 0 auto;width:52px;height:52px;border:1px solid var(--hair);border-radius:var(--radius)}
.wl-heart.pdp:hover{border-color:var(--brand-1)}
/* card heart — frosted circle over the product image, top-right */
.wl-heart.card{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(4px);color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.14);opacity:.92}
/* S-5: 46px HIT AREA without growing the 34px frosted circle — the pseudo
   extends the button's clickable box, the visual stays untouched */
.wl-heart.card::before{content:'';position:absolute;inset:-6px;border-radius:50%}
.wl-heart.card:hover{opacity:1;color:var(--brand-1)}
.wl-heart.card.on{opacity:1}
/* count badge on the menu heart */
.wl-badge{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--brand-2);color:var(--on-brand);font-size:.625rem;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}
/* overlay (mirrors the search overlay) */
.wl-ov{position:fixed;inset:0;z-index:300;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;padding:clamp(56px,10vh,120px) 20px 40px;overflow-y:auto;overscroll-behavior:contain;
  animation:wl-ov-in .2s ease both}
@keyframes wl-ov-in{from{opacity:0}to{opacity:1}}
.wl-ov .ov-x{position:absolute;top:18px;right:18px;width:46px;height:46px;display:grid;place-items:center;background:var(--surface);
  color:var(--ink);border:1px solid var(--hair);border-radius:50%;cursor:pointer}
.wl-ov .ov-x:hover{background:var(--hair)}
.wl-ov h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,4vw,2rem);margin:0 0 clamp(20px,3vw,30px)}
.wl-ov .wl-grid{width:min(1100px,100%);display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(16px,2.5vw,28px)}
.wl-ov .wl-c{position:relative;text-decoration:none;color:inherit}
.wl-ov .wl-c .wimg{width:100%;aspect-ratio:3/4;background:var(--hair) center/cover no-repeat;border-radius:var(--radius);margin-bottom:10px}
.wl-ov .wl-c .wn{font-size:.84375rem;line-height:1.35;margin:0 0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wl-ov .wl-c .wp{font-size:.8125rem;font-weight:600;margin:0}
.wl-ov .wl-c .wrm{position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;background:var(--surface);
  border:1px solid var(--hair);border-radius:50%;cursor:pointer;color:var(--ink)}
.wl-ov .wl-c .wrm:hover{background:var(--hair)}
/* stale-state chips (refreshed on open): OOS / removed-from-catalog */
.wl-ov .wl-c.off .wimg{filter:grayscale(.6) opacity(.75)}
.wl-ov .wl-c .wl-oos{position:absolute;top:8px;left:8px;background:color-mix(in srgb,var(--ink) 78%,var(--bg));color:var(--bg);
  font-size:.625rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:calc(var(--radius)*.5)}
/* compact back-in-stock CTA on OOS tiles */
.wl-ov .wl-c .wnot{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:none;cursor:pointer;
  border:1px solid var(--hair);border-radius:999px;color:var(--ink);font:inherit;font-size:.65625rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;transition:.15s}
.wl-ov .wl-c .wnot:hover{border-color:var(--ink)}
.wl-ov .wl-c .wnot:disabled{opacity:.55;cursor:default}
.wl-ov .wl-c .wn-ok{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--ink);margin:8px 0 0}
.wl-ov .wl-c .wn-ok svg{color:var(--brand-1)}
.wl-ov .wl-c .wn-login{display:inline-block;margin-top:8px;font-size:.75rem;color:var(--brand-1);text-decoration:underline;text-underline-offset:3px}
.wl-ov .wl-empty{text-align:center;color:var(--muted);max-width:420px;margin:40px auto}
.wl-ov .wl-empty a{display:inline-block;margin-top:20px;padding:14px 32px;background:var(--ink);color:var(--bg);text-decoration:none;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius)}
@media(max-width:760px){.wl-ov .wl-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

.store-lowstock{display:inline-flex;align-items:center;gap:8px;font-size:.78125rem;font-weight:600;letter-spacing:.02em;
  color:var(--alert,#d64545);margin:0 0 4px}
.store-lowstock::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--alert,#d64545);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(231,76,60,.5);animation:store-lowstock-pulse 1.8s ease-out infinite}
@keyframes store-lowstock-pulse{0%{box-shadow:0 0 0 0 rgba(231,76,60,.5)}70%{box-shadow:0 0 0 7px rgba(231,76,60,0)}100%{box-shadow:0 0 0 0 rgba(231,76,60,0)}}
@media(prefers-reduced-motion:reduce){.store-lowstock::before{animation:none}}

.sh-btn{flex:0 0 auto;height:52px;min-width:52px;padding:0 14px;border:1px solid var(--hair);border-radius:var(--radius);
  background:none;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:.75rem;letter-spacing:.04em;transition:border-color .15s ease,color .15s ease,transform .1s ease}
.sh-btn:hover{border-color:var(--brand-1);color:var(--brand-1)}
.sh-btn:active{transform:scale(.95)}
.sh-btn.ok{border-color:var(--brand-2);color:var(--brand-2)}
.sh-btn .sh-lbl{white-space:nowrap}
@media(max-width:520px){.sh-btn{padding:0;width:52px}.sh-btn .sh-lbl{display:none}}

.qrsc{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ink) 46%,transparent);padding:20px;animation:qrfade .16s ease}
@keyframes qrfade{from{opacity:0}to{opacity:1}}
.qrsheet{width:min(360px,100%);background:var(--bg);color:var(--ink);border:1px solid var(--hair);
  border-radius:calc(var(--radius)*1.4);box-shadow:0 24px 64px -20px color-mix(in srgb,var(--ink) 60%,transparent);
  padding:22px;text-align:center;position:relative}
.qrsheet .qrx{position:absolute;top:12px;right:12px;border:0;background:none;color:var(--muted);cursor:pointer;
  padding:8px;display:inline-flex;border-radius:8px}
.qrsheet .qrx:hover{color:var(--ink);background:var(--surface)}
.qrsheet h3{margin:0 0 4px;font-size:1rem;font-weight:600}
.qrsheet .qrsub{margin:0 0 16px;font-size:.78125rem;color:var(--muted)}
.qrsheet .qrbox{width:220px;height:220px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:16px;padding:10px;box-shadow:0 1px 0 var(--hair) inset}
.qrsheet .qrbox canvas,.qrsheet .qrbox svg{width:100%!important;height:100%!important;border-radius:8px}
.qrsheet .qrload{font-size:.8125rem;color:var(--muted)}
.qrsheet .qracts{display:flex;gap:10px}
.qrsheet .qracts button{flex:1;height:46px;border-radius:var(--radius);cursor:pointer;font:inherit;font-size:.8125rem;
  font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.14s}
.qrsheet .qra-share{border:0;background:var(--brand-2);color:var(--on-brand)}
.qrsheet .qra-share:hover{filter:brightness(1.06)}
.qrsheet .qra-dl{border:1px solid var(--hair);background:none;color:var(--ink)}
.qrsheet .qra-dl:hover{border-color:var(--ink)}
.qrsheet .qra-dl.ok{border-color:var(--brand-2);color:var(--brand-2)}

.anmsg{display:inline-block;animation:an-fade .5s ease}
.anmsg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@keyframes an-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.anmsg{animation:none}}

.cat-crumbs{max-width:1440px;margin:0 auto;padding:16px 24px 0;font-size:.75rem;color:var(--muted);letter-spacing:.04em}
.cat-crumbs a{text-decoration:none;color:inherit}.cat-crumbs a:hover{color:var(--ink)}
.cat-crumbs .leaf{color:var(--ink)}
@media(max-width:760px){.cat-crumbs{padding:12px 14px 0}}
/* category drill-down / lateral chips under the landing crumb — own horizontal
   scroll track on mobile (page scrollX stays 0) */
.cat-chips{max-width:1440px;margin:0 auto;padding:11px 24px 0;display:flex;gap:8px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips .chip{flex:0 0 auto;padding:8px 15px;min-height:36px;display:inline-flex;align-items:center;
  border:1px solid var(--hair);border-radius:99px;font-size:.78125rem;letter-spacing:.03em;text-decoration:none;
  color:var(--ink);background:var(--surface);transition:border-color .15s}
.cat-chips .chip:hover{border-color:var(--ink)}
@media(max-width:760px){.cat-chips{padding:10px 14px 0}}

.stt{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--botbar-h,0px));width:46px;height:46px;border:0;padding:0;
  border-radius:50%;background:var(--surface,#fff);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.16);
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.stt.on{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* stack ABOVE the WhatsApp FAB (56px) when it's present, so both stay tappable
   in the shared bottom-right corner. */
.store-root.has-fab .stt{bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--botbar-h,0px) + 70px)}
/* an open overlay (drawer/search/wishlist/sheet/lightbox) sets html.sm-lock —
   hide the FAB while any overlay is up so it never floats over the drawer/modal;
   it fades back on close. Higher specificity than .stt.on, so it wins even when
   scrolled. */
html.sm-lock .stt{opacity:0;pointer-events:none;transform:translateY(10px) scale(.9)}
.stt:hover{color:var(--brand-2,var(--ink))}
.stt svg.ring{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg);pointer-events:none}
.stt svg.ring circle{fill:none;stroke-width:2.5}
.stt svg.ring .track{stroke:var(--hair,rgba(0,0,0,.12))}
.stt svg.ring .bar{stroke:var(--brand-2,var(--ink));stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.stt .chev{position:relative;display:grid;place-items:center}
.stt:focus-visible{outline:2px solid var(--brand-2,var(--ink));outline-offset:3px}
@media(prefers-reduced-motion:reduce){.stt{transition:opacity .2s ease}.stt svg.ring .bar{transition:none}}

.minord{margin:0 0 14px;padding:12px 14px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface)}
.minord.mo-met{border-color:color-mix(in srgb,var(--brand-2) 40%,var(--hair))}
.minord .mo-cap{display:flex;align-items:center;gap:7px;font-size:.78125rem;line-height:1.35;margin:0 0 9px;color:var(--ink)}
.minord.mo-met .mo-cap{color:var(--brand-2)}
.minord .mo-cap .mo-strong{font-weight:600}
.minord .mo-track{height:7px;border-radius:5px;background:var(--hair);overflow:hidden;
  transition:height .3s cubic-bezier(.3,.7,.2,1)}
.minord .mo-bar{height:100%;border-radius:5px;background:var(--brand-2);
  transition:width .45s cubic-bezier(.3,.7,.2,1)}
/* MET: the meter has done its job — at 100% a full-height solid bar is a
   redundant progress affordance that out-shouts the actual reward. Recede it to
   a SLIM confirmation line so the ✓ + 'mínimo alcanzado' message leads (SOTA
   completed-goal pattern — the meter settles into a done-underline, it doesn't
   keep measuring). Keeps spatial continuity vs. removing the track outright. */
.minord.mo-met .mo-track{height:3px}
.minord .mo-check{flex:0 0 auto;width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.minord .mo-bar,.minord .mo-track{transition:none}}

.co-billing{margin:0 0 30px}
/* self-sufficient section header — the express .act column (unlike .sec-based
   variants) has no h2 base style; :where keeps variant .sec h2 rules winning */
:where(.co-billing) h2{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.co-billing .bill-done{display:flex;align-items:center;gap:9px;font-size:.875rem;line-height:1.5;flex-wrap:wrap}
.co-billing .bill-done .bd-ok{color:#1a7f37;display:inline-flex;flex:0 0 auto}
.co-billing .bill-done .bd-sep{color:var(--muted)}
.co-billing .bill-done button{margin-left:auto;background:none;border:0;padding:2px 0;font:inherit;font-size:.8125rem;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.co-billing .bill-open{border:1px solid var(--hair);border-radius:var(--radius);padding:16px;background:var(--surface)}
.co-billing .bill-why{font-size:.8125rem;color:var(--muted);margin:0 0 14px;line-height:1.5}
.co-billing .bfields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-billing .bfield{min-width:0}
.co-billing .bfield.full{grid-column:1 / -1}
.co-billing label{display:block;font-size:.75rem;color:var(--muted);margin:0 0 5px}
.co-billing input,.co-billing select{width:100%;display:block;box-sizing:border-box;height:44px;padding:0 12px;
  border:1px solid var(--hair);border-radius:var(--radius);background:var(--bg);color:inherit;font:inherit;font-size:.875rem}
.co-billing input:focus,.co-billing select:focus{outline:none;border-color:var(--ink)}
.co-billing input.bad,.co-billing select.bad{border-color:var(--alert,#d64545)}
.co-billing select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.co-billing .fnote{font-size:.8125rem;margin:6px 0 0;display:flex;align-items:center;gap:5px;color:var(--muted);line-height:1.3}
.co-billing .fnote.ok{color:#1a7f37}
.co-billing .fnote.err{color:var(--alert,#d64545)}
.co-billing .fnote.warn{color:#9a6700}
.co-billing .bactions{display:flex;align-items:center;gap:14px;margin-top:14px}
.co-billing .bsave{height:42px;padding:0 22px;background:var(--ink);color:var(--bg);border:0;border-radius:var(--radius);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.co-billing .bsave:disabled{opacity:.5;cursor:not-allowed}
.co-billing .bcancel{background:none;border:0;font:inherit;font-size:.8125rem;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.co-billing .berr{font-size:.8125rem;color:var(--alert,#d64545);margin:10px 0 0;line-height:1.4}
.co-billing .bsaved{font-size:.8125rem;color:#1a7f37;margin:0 0 0 auto;display:inline-flex;align-items:center;gap:5px}
@media(max-width:560px){.co-billing .bfields{grid-template-columns:1fr}}

.co-alert{border:1.5px solid var(--alert,#d64545);border-radius:var(--radius);background:color-mix(in srgb,var(--alert,#d64545) 7%,var(--bg));
  padding:14px 16px;margin:0 0 14px;display:flex;gap:11px;align-items:flex-start}
.co-alert .ca-ic{flex:0 0 auto;color:var(--alert,#d64545);margin-top:1px}
.co-alert .ca-tit{font-size:.875rem;font-weight:600;margin:0 0 3px;color:var(--ink)}
.co-alert .ca-msg{font-size:.8125rem;line-height:1.5;color:var(--ink);margin:0;white-space:pre-line}
.co-alert .ca-act{display:inline-block;margin-top:9px;padding:8px 16px;background:var(--alert,#d64545);color:#fff;border:0;
  border-radius:calc(var(--radius)*.8);font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.06em;cursor:pointer;text-decoration:none}
.co-alert .ca-act:hover{filter:brightness(.92)}
@media(max-width:820px){.co-alert{position:sticky;bottom:8px;z-index:5;box-shadow:0 4px 18px rgba(0,0,0,.14);background:var(--bg)}}
.store-root .pknote{font-size:.78125rem;color:var(--brand-2);font-weight:600;margin:8px 0 0;letter-spacing:.02em}.store-root .buy .pknote{flex:1 1 100%;margin:0 0 2px}.store-root .qty .qtyin{width:54px;min-width:0;text-align:center;border:0;background:none;font:inherit;font-size:.9375rem;color:inherit;-moz-appearance:textfield;padding:0;align-self:stretch}.store-root .qty .qtyin::-webkit-outer-spin-button,.store-root .qty .qtyin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.store-root [data-oos] .imgwrap img,.store-root [data-oos] .img img,.store-root [data-oos].tile>img{filter:grayscale(.6) opacity(.75);transition:filter .3s ease}.store-root [data-oos][data-oos-style=grayscale] .imgwrap img,.store-root [data-oos][data-oos-style=grayscale] .img img,.store-root [data-oos][data-oos-style=grayscale].tile>img{filter:grayscale(1) opacity(.85)}.store-root [data-oos][data-oos-style=blur] .imgwrap img,.store-root [data-oos][data-oos-style=blur] .img img,.store-root [data-oos][data-oos-style=blur].tile>img{filter:blur(3px) opacity(.9)}.store-root [data-oos][data-oos-style=none] .imgwrap img,.store-root [data-oos][data-oos-style=none] .img img,.store-root [data-oos][data-oos-style=none].tile>img{filter:none}.store-root .soos{position:absolute;top:10px;left:10px;z-index:2;background:color-mix(in srgb,var(--ink) 78%,var(--bg));color:var(--bg);font-size:.625rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px}.store-root .spv{position:absolute;top:10px;left:10px;z-index:2;background:var(--ink);color:var(--bg);font-size:.625rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px}.store-root .store-pv{margin:4px 0 16px;padding:12px 14px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));border-left:2px solid var(--brand-1,var(--ink));display:flex;flex-direction:column;gap:7px;align-items:flex-start}.store-root .store-pv .pv-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.store-root .store-pv .spv{position:static;flex:0 0 auto}.store-root .store-pv .spv-eta{font-size:.8125rem;font-weight:500;color:var(--ink);letter-spacing:.01em}.store-root .store-pv .pv-left{font-size:.71875rem;font-weight:600;color:var(--alert,#d64545);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.store-root .pv-ln{display:inline-flex;align-items:center;gap:6px;margin-top:2px}.store-root .pv-ln .pv-tag{background:var(--ink);color:var(--bg);font-size:.5625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px}.store-root .pv-ln .pv-eta{font-size:.6875rem;color:var(--muted,var(--ink))}.store-root .pv-mixed{font-size:.75rem;color:var(--muted,var(--ink));margin:8px 0 0}.store-root .pv-mixed.clamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}.store-root .pv-mixed:not(.clamp){cursor:pointer}.store-root .pv-confirm{max-width:520px;margin:14px auto 0;text-align:center;font-size:.8125rem;color:var(--muted,var(--ink))}.store-root .pv-disclosure{font-size:.71875rem;line-height:1.5;color:var(--muted,var(--ink));margin:10px 0;padding:8px 10px;background:var(--surface,transparent);border-left:2px solid var(--brand-1,var(--ink))}
.store-root .pro-desk{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--bg);color:var(--ink)}
.store-root .pro-desk .phead{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.store-root .pro-desk .plens{display:flex;gap:2px}
.store-root .pro-desk .plt{border:0;background:none;padding:7px 12px;cursor:pointer;font:inherit;font-size:.8125rem;color:var(--muted);border-radius:var(--radius)}
.store-root .pro-desk .plt:hover{color:var(--ink)}
.store-root .pro-desk .plt-on{color:var(--ink);background:color-mix(in srgb,var(--brand-1) 10%,transparent);font-weight:600}
.store-root .pro-desk .psw{flex:1;min-width:180px;position:relative;display:flex}
.store-root .pro-desk .psearch{flex:1;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);color:inherit;font:inherit;font-size:.875rem;padding:8px 34px 8px 12px;transition:border-color .16s}
.store-root .pro-desk .psearch:focus{outline:none;border-color:color-mix(in srgb,var(--brand-1) 55%,var(--hair))}
.store-root .pro-desk .pskbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:inherit;font-size:.6875rem;color:var(--muted);border:1px solid var(--hair);border-radius:5px;padding:1px 6px;background:var(--bg);pointer-events:none}
.store-root .pro-desk .psearch:focus~.pskbd{opacity:0}
.store-root .pro-desk .pchips{display:flex;gap:6px}
.store-root .pro-desk .pchip{border:1px solid var(--hair);background:var(--surface);color:var(--muted);font:inherit;font-size:.75rem;padding:5px 10px;border-radius:20px;cursor:pointer}
.store-root .pro-desk .pchip.pc-on{color:var(--ink);border-color:var(--brand-1);background:color-mix(in srgb,var(--brand-1) 8%,transparent)}
.store-root .pro-desk .pback{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-size:.8125rem;padding:7px 10px;border-radius:var(--radius);margin-right:2px}
.store-root .pro-desk .pback:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
/* table — numbers are the interface: tabular + right-aligned money/history */
.store-root .pro-desk .ptwrap{flex:1;display:flex;flex-direction:column;min-height:0;font-variant-numeric:tabular-nums}
/* column budget: every fixed column is sized to its actual content — ALL
   slack goes to the PRODUCT column (names must not truncate while other
   columns sit empty, user 2026-07-10) */
.store-root .pro-desk .pthead,.store-root .pro-desk .prow{display:grid;grid-template-columns:48px 96px minmax(0,1fr) 72px 132px 96px 148px;align-items:center;gap:10px;padding:0 16px}
.store-root .pro-desk .pthead{height:34px;font-size:.6563rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair)}
/* header cells reuse the column classnames for alignment ONLY — strip every
   component skin (the CANTIDAD label must not wear the stepper's pill) AND
   pin one font-size: the column classes (.pcode .75rem, .phist .6875rem…)
   otherwise leak their sizes into the header row (user 2026-07-10) */
.store-root .pro-desk .pthead>span{border:0;background:none;box-shadow:none;padding:0;font-weight:400;font-size:.6563rem;color:var(--muted);display:inline-flex;align-items:center}
.store-root .pro-desk .pthead .ppr,.store-root .pro-desk .pthead .phist,.store-root .pro-desk .pthead .pst{justify-content:flex-end}
.store-root .pro-desk .pthead .pqty{justify-self:end}
.store-root .pro-desk .ptbody{flex:1;overflow-y:auto;min-height:0}
.store-root .pro-desk .prow{height:44px;border-bottom:1px solid color-mix(in srgb,var(--hair) 55%,transparent);font-size:.8125rem;transition:background .12s}
/* group rhythm (local flatten): separators INSIDE a producto group fade —
   the boundary (.pr-last, and every solo row) keeps the normal weight, so
   an option-less catalog looks exactly like a plain flat list */
.store-root .pro-desk .prow:not(.pr-last){border-bottom-color:color-mix(in srgb,var(--hair) 28%,transparent)}
.store-root .pro-desk .prow:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.store-root .pro-desk .prow.pr-on{background:color-mix(in srgb,var(--brand-1) 5%,transparent)}
.store-root .pro-desk .prow.pr-on:hover{background:color-mix(in srgb,var(--brand-1) 8%,transparent)}
.store-root .pro-desk .prow.pr-off{opacity:.55}
.store-root .pro-desk .pimg{position:relative}
.store-root .pro-desk .pimgb{border:0;background:none;padding:0;cursor:zoom-in;display:block;line-height:0;position:relative}
/* invisible hit-area extension → ≥44px touch target on the 38px thumb */
.store-root .pro-desk .pimgb::after{content:"";position:absolute;inset:-4px}
.store-root .pro-desk .pimg img{width:38px;height:38px;object-fit:contain;border-radius:calc(var(--radius)/2)}
/* hover-card photo preview (pointer devices): the buyer scans the catalog's
   images without a single click; click still opens the full gallery */
.store-root .pro-desk .pimg-pop{display:none;position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);z-index:30;pointer-events:none;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:0 10px 34px rgba(0,0,0,.16);padding:6px}
.store-root .pro-desk .pimg-pop img{width:250px;height:250px;object-fit:contain;border-radius:calc(var(--radius)/2)}
@media(hover:hover){.store-root .pro-desk .pimgb:hover .pimg-pop{display:block}}
.store-root .pro-desk .pcode{color:var(--muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-root .pro-desk .pvar{display:flex;align-items:center;gap:8px;min-width:0}
/* name + variant, ONE grammar per row: the NAME is the only child that
   yields — the variant token NEVER shrinks ("crema" must never render
   "cre…"); its only cap is 55% of the cell, for pack labels like
   "curva cerrada (3s/m,3l,3l)" against a long name */
.store-root .pro-desk .pvtx{min-width:0;flex:1 1 auto;display:flex;align-items:baseline;gap:6px}
.store-root .pro-desk .pvnm{font-weight:600;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-root .pro-desk .pvsep{color:var(--muted);font-weight:400;flex:0 0 auto}
.store-root .pro-desk .pvtk{font-weight:600;flex:0 1 auto;min-width:6ch;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* continuation rows: the repeated name recedes, the token carries the eye */
.store-root .pro-desk .pr-cont .pvnm{color:var(--muted);font-weight:400}
/* the row's ONE typed deal chip (combo/2×1/cross/%/personal — the deals the
   deterministic price can't voice). Compact, zero animation, yields before
   the variant token, tap → benefit sheet. */
.store-root .pro-desk .pdchip{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;max-width:130px;overflow:hidden;border:0;cursor:pointer;font:inherit;font-size:.6563rem;font-weight:600;line-height:1;padding:3px 7px;border-radius:9px;color:var(--deal-ink,var(--brand-2));background:var(--deal-bg,color-mix(in srgb,var(--brand-2) 8%,transparent))}
.store-root .pro-desk .pdchip .pdcl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-root .pro-desk .pdchip:hover{filter:brightness(.96)}
.store-root .pro-desk .pvm-deal{display:none}
/* hover = read the WHOLE name: ellipsized name/token un-clamp and paint over
   the neighbouring columns on a solid pad (pointer devices; user 2026-07-10).
   Rows that already fit look identical — the pad blends into the hover wash. */
@media(hover:hover){
.store-root .pro-desk .prow:hover .pvar{z-index:4}
.store-root .pro-desk .prow:hover .pvtx{overflow:visible}
.store-root .pro-desk .prow:hover .pvnm,.store-root .pro-desk .prow:hover .pvtk{overflow:visible;max-width:none;flex:0 0 auto;background:color-mix(in srgb,var(--ink) 3%,var(--bg));box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 3%,var(--bg));border-radius:2px}
}
.store-root .pro-desk .pdot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:1px solid var(--hair)}
/* stock: a bare right-aligned tabular figure — no status dot (it said
   nothing the number doesn't and read as a second colour swatch). Low
   stock speaks through amber ink; OOS through red words. */
.store-root .pro-desk .pst{font-size:.75rem;color:var(--muted);display:inline-flex;align-items:center;justify-content:flex-end;white-space:nowrap;text-align:right}
.store-root .pro-desk .psn-low{color:#d97706;font-weight:600}
.store-root .pro-desk .pst-oos{color:#b3423a;font-size:.6875rem}
/* preventa state: chip + remaining STACK inside the 44px row — never bleed
   into the price column */
.store-root .pro-desk .pst-pv{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;overflow:hidden}
/* the card badge slot positions .spv absolutely — inside the desk the chip is
   INLINE table data (it escaped onto the group header without this) */
.store-root .pro-desk .pst-pv .spv{position:static;font-size:.625rem;padding:1px 7px;border-radius:10px;background:#fffbeb;color:#92400e;border:1px solid #f3e0b8;white-space:nowrap}
.store-root .pro-desk .pst-pv .pv-left{font-size:.65rem;color:#92400e;white-space:nowrap}
/* precio: single line, right-aligned, per-unit truth */
/* deal price STACKS (struck base above, final + chip below): half the width
   of the inline form — a deal row must NEVER paint into the stock column
   (collision, user 2026-07-10). overflow:hidden = the belt. */
.store-root .pro-desk .ppr{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:7px;white-space:nowrap;text-align:right;min-width:0;overflow:hidden}
.store-root .pro-desk .ppr-deal{flex-direction:column;align-items:flex-end;justify-content:center;gap:0;line-height:1.25}
.store-root .pro-desk .pnow{display:inline-flex;align-items:baseline;gap:6px}
.store-root .pro-desk .ppr .was{text-decoration:line-through;color:var(--deal-strike,var(--muted));font-size:.71875rem}
.store-root .pro-desk .ppr .now{font-weight:650}
/* the on-demand price-break card (hover, pointer devices): the FULL tier
   ladder + stack decomposition — industrial price-break-table convention.
   The anchor escapes .ppr's overflow belt only while hovered. */
.store-root .pro-desk .ppr.ppr-hov{cursor:pointer}
.store-root .pro-desk .ppr.ppr-hov:hover{overflow:visible}
/* the anchor is CONTIGUOUS with .ppr (the visual gap is internal padding):
   crossing a real gap fires pointer-leave and the card vanished before the
   click could land (user 2026-07-10) */
.store-root .pro-desk .ppr-anchor{display:none;position:absolute;right:0;top:100%;padding-top:4px;z-index:31;width:330px}
.store-root .pro-desk .ppr-anchor.flip{top:auto;bottom:100%;padding-top:0;padding-bottom:4px}
@media(hover:hover){.store-root .pro-desk .ppr{position:relative}.store-root .pro-desk .ppr.ppr-hov:hover .ppr-anchor{display:block}}
.store-root .pro-desk .ppr-pop{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:0 10px 34px rgba(0,0,0,.16);padding:10px 12px;text-align:left;white-space:normal;font-variant-numeric:tabular-nums}
.store-root .pro-desk .ppr-pop .dlad{margin:0}
/* stack decomposition: which deals hit this line, one row per rule */
.store-root .pro-desk .pprd{margin-top:8px;border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent);padding-top:6px;font-size:.71875rem}
.store-root .pro-desk .pprd-r{display:flex;align-items:center;gap:6px;padding:2px 0}
.store-root .pro-desk .pprd-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.store-root .pro-desk .pprd-m{font-weight:600;color:var(--deal-ink,var(--brand-2))}
.store-root .pro-desk .pprd-t{border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent);margin-top:4px;padding-top:5px}
.store-root .pro-desk .pprd-t .pprd-l{color:var(--ink)}
.store-root .pro-desk .pprd-t .pprd-m{color:var(--ink);font-weight:700}
/* the active row's quantified micro-nudge — replaces the history badge on
   THE row being edited, click snaps qty to the breakpoint */
.store-root .pro-desk .pnudge{border:0;cursor:pointer;font:inherit;font-size:.6875rem;font-weight:600;line-height:1;padding:3px 8px;border-radius:9px;color:var(--deal-ink,var(--brand-2));background:var(--deal-bg,color-mix(in srgb,var(--brand-2) 8%,transparent));white-space:nowrap}
.store-root .pro-desk .pnudge:hover{filter:brightness(.96)}
.store-root .pro-desk .ppr .pct{font-size:.6563rem;font-weight:600;color:var(--deal-ink,var(--brand-2));background:var(--deal-bg,color-mix(in srgb,var(--brand-2) 8%,transparent));padding:1px 5px;border-radius:5px}
.store-root .pro-desk .phist{font-size:.6875rem;color:var(--muted);text-align:right;white-space:nowrap}
/* cantidad: ONE quiet pill per stepper — the data outshines the chrome */
.store-root .pro-desk .pqty{display:inline-flex;align-items:stretch;justify-self:end;border:1px solid var(--hair);border-radius:8px;background:var(--surface);overflow:hidden;transition:background .16s,border-color .16s,box-shadow .16s}
.store-root .pro-desk .pqty:focus-within{border-color:color-mix(in srgb,var(--brand-1) 60%,var(--hair));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-1) 12%,transparent)}
.store-root .pro-desk .pqty.ph1{background:color-mix(in srgb,var(--deal-accent,var(--brand-2)) 6%,var(--surface))}
.store-root .pro-desk .pqty.ph2{background:color-mix(in srgb,var(--deal-accent,var(--brand-2)) 12%,var(--surface))}
.store-root .pro-desk .pqty.ph3{background:color-mix(in srgb,var(--deal-accent,var(--brand-2)) 20%,var(--surface))}
.store-root .pro-desk .pqb{width:28px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:.9375rem;line-height:1;transition:color .12s,background .12s}
.store-root .pro-desk .pqb:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.store-root .pro-desk .pqin{width:52px;height:30px;text-align:center;border:0;background:none;color:inherit;font:inherit;font-size:.875rem;font-weight:600}
.store-root .pro-desk .pqin:focus{outline:none}
.store-root .pro-desk .pqin::placeholder{color:color-mix(in srgb,var(--muted) 55%,transparent);font-weight:400}
.store-root .pro-desk .pq-off{color:var(--muted);justify-self:end;padding-right:26px}
/* bar */
.store-root .pro-desk .pbar{border-top:1px solid var(--hair);background:var(--surface);padding:10px 16px}
/* the ONE promoted goal meter (nearest unfinished, realistic range) + its
   transient completion flash */
.store-root .pro-desk .pgoal{padding:2px 0 8px;font-size:.75rem}
.store-root .pro-desk .pgoal .dopps{margin:0}
.store-root .pro-desk .pgoal.pg-done{color:#2f9e63;font-weight:600}
/* teased deals: the discovery list inside the fold — every deal the cart
   hasn't earned yet, tap → sheet */
.store-root .pro-desk .pteas{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.store-root .pro-desk .pteas-r{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;font:inherit;font-size:.75rem;color:var(--ink);cursor:pointer;padding:5px 2px;border-radius:6px;text-align:left}
.store-root .pro-desk .pteas-r:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.store-root .pro-desk .pteas-l{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-root .pro-desk .pteas-tag{font-size:.65rem;color:var(--muted);white-space:nowrap}
.store-root .pro-desk .pteas-go{margin-left:auto;color:var(--muted)}
.store-root .pro-desk .ppagot{margin:4px 0 0;font-size:.71875rem;color:var(--muted)}
/* '¿Te olvidaste?' chip strip (P1) */
.store-root .pro-desk .pforgot{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;white-space:nowrap}
.store-root .pro-desk .pfl{flex:0 0 auto;font-size:.71875rem;font-weight:600;color:var(--muted)}
.store-root .pro-desk .pfchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);background:var(--bg);border-radius:20px;padding:6px 6px 6px 12px;font:inherit;font-size:.75rem;color:var(--ink);cursor:pointer;transition:border-color .12s}
.store-root .pro-desk .pfchip:hover{border-color:var(--brand-1)}
.store-root .pro-desk .pfn{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.store-root .pro-desk .pfq{background:var(--brand-2);color:var(--on-brand);border-radius:12px;padding:2px 9px;font-size:.6875rem;font-weight:700}
/* anomaly guardrail: amber ring on the stepper, words on mobile meta */
.store-root .pro-desk .pqty.pq-anom{border-color:#d97706;box-shadow:0 0 0 3px color-mix(in srgb,#d97706 14%,transparent)}
.store-root .pro-desk .pvm-anom{display:inline-flex;color:#92400e}
.store-root .pro-desk .pbenef{margin-top:6px;border-top:1px solid color-mix(in srgb,var(--hair) 60%,transparent)}
.store-root .pro-desk .pbenef-t{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:var(--muted);font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.03em;padding:7px 0 2px;cursor:pointer}
.store-root .pro-desk .pbenef-t:hover{color:var(--ink)}
.store-root .pro-desk .pbv-ch{transition:transform .16s}
.store-root .pro-desk .pbv-ch.up{transform:rotate(180deg)}
.store-root .pro-desk .pbenef-b{padding:4px 0 2px;max-height:40dvh;overflow-y:auto}
.store-root .pro-desk .pbrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.store-root .pro-desk .pbt{flex:1;margin:0;font-size:.875rem;font-variant-numeric:tabular-nums;min-width:0}
/* money NEVER breaks mid-figure — each segment is atomic; the line wraps
   BETWEEN segments only */
.store-root .pro-desk .pbn,.store-root .pro-desk .pbtot,.store-root .pro-desk .pbsave{white-space:nowrap;display:inline-block}
.store-root .pro-desk .pbtot{font-weight:700}
.store-root .pro-desk .pbsave{color:var(--deal-ink,var(--brand-2));font-weight:600;margin-left:6px}
.store-root .pro-desk .pberr{color:#b3423a;cursor:pointer;margin-left:8px;text-decoration:underline}
.store-root .pro-desk .pbsync{color:var(--muted);margin-left:8px}
.store-root .pro-desk .pbv{margin:4px 0 0;font-size:.75rem;color:#92400e}
.store-root .pro-desk .pbcta{padding:10px 22px;border-radius:var(--radius);background:var(--brand-2);color:var(--on-brand);font-weight:600;text-decoration:none;white-space:nowrap}
.store-root .pro-desk .pbcta.pb-off{opacity:.5;pointer-events:none}
.store-root .pro-desk .ptoast{display:flex;align-items:center;gap:12px;font-size:.8125rem;padding:6px 0;color:var(--ink)}
.store-root .pro-desk .ptundo{border:0;background:none;color:var(--brand-2);font-weight:600;cursor:pointer;font:inherit}
.store-root .pro-desk .pskel{padding:40px;text-align:center;color:var(--muted)}
/* anon gate */
.store-root .pro-desk .pgate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.store-root .pro-desk .pgt{margin:0;font-size:1.25rem;font-weight:650}
.store-root .pro-desk .pgc{margin:0;max-width:420px;color:var(--muted);font-size:.875rem;line-height:1.55}
.store-root .pro-desk .pgback{color:var(--muted);font-size:.8125rem;text-decoration:underline}
/* the mobile second line — hidden wherever the real columns exist */
.store-root .pro-desk .pvmeta{display:none}
/* mobile: card-hybrid rows (§4.5). Load-bearing signals REFLOW into the
   product cell's second line (status/preventa/history) — never hidden.
   Row height 58px here MUST match store.pro.table/row-h. */
@media(max-width:760px){
 .store-root .pro-desk .pback-l{display:none}
 .store-root .pro-desk .pskbd{display:none}
 .store-root .pro-desk .phead{gap:8px;padding:8px 12px}
 .store-root .pro-desk .plens{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}
 .store-root .pro-desk .plt{white-space:nowrap;padding:7px 10px}
 .store-root .pro-desk .psw{order:3;flex-basis:100%}
 .store-root .pro-desk .pchips{order:4;overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}
 .store-root .pro-desk .pchip{white-space:nowrap}
 .store-root .pro-desk .pthead{display:none}
 /* fixed columns sized to CONTENT — every spare px feeds the product text.
    Phone-width budget (user 2026-07-11: names rendered as 'BLUSA TULUM…' on
    EVERY row at 390px — the 40/84/124 fixed columns left the name ~100px):
    thumb 36, price = max-content (a short '$U 14.500' frees ~20px; a stacked
    deal price is its own cap), stepper 104 (34+36+34, heights keep the touch
    law). Name gets ~150px @390 / ~125px @360. */
 .store-root .pro-desk .pthead,.store-root .pro-desk .prow{grid-template-columns:36px minmax(0,1fr) minmax(52px,max-content) 104px;gap:5px;padding:0 10px}
 /* 72px = a DETERMINISTIC budget: 2-line clamped text (~31px) + one meta
    line (~16px) + breathing room. MUST match store.pro.table/row-h. The
    overflow clip is the belt: content can never bleed onto the next row. */
 .store-root .pro-desk .prow{height:72px;overflow:hidden}
 /* mobile rows are INDEPENDENT cards (Shopify/Faire precedent): uniform
    separators, no group border rhythm */
 .store-root .pro-desk .prow:not(.pr-last){border-bottom-color:color-mix(in srgb,var(--hair) 55%,transparent)}
 .store-root .pro-desk .pcode,.store-root .pro-desk .phist,.store-root .pro-desk .pst{display:none}
 /* product cell: line 1 = dot + 2-line-clamped text (long names stay
    READABLE); line 2 = status + history */
 .store-root .pro-desk .pvar{flex-wrap:wrap;row-gap:2px;align-items:flex-start;align-content:center}
 .store-root .pro-desk .pdot{margin-top:3px}
 .store-root .pro-desk .pvtx{flex:1 1 calc(100% - 24px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.22;font-size:.78125rem}
 /* inside the 2-line clamp the spans flow INLINE (the bare space between
    them renders here); the name un-mutes — every card is self-contained —
    and the token goes muted-colored instead */
 .store-root .pro-desk .pvnm,.store-root .pro-desk .pvtk,.store-root .pro-desk .pvsep{display:inline;white-space:normal;overflow:visible;max-width:none}
 .store-root .pro-desk .pvtk{color:var(--muted);font-weight:500}
 .store-root .pro-desk .pr-cont .pvnm{color:inherit;font-weight:600}
 .store-root .pro-desk .pvmeta{order:5;flex:1 1 auto;display:flex;gap:12px;font-size:.65rem;color:var(--muted);align-items:center;min-width:0;overflow:hidden;white-space:nowrap}
 .store-root .pro-desk .pvm-st,.store-root .pro-desk .pvm-pv{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
 /* history + deal word are the meta line's YIELDING tail: ellipsize, never
    hard-clip mid-word ('hasta' cut at the row edge, user 2026-07-11) */
 .store-root .pro-desk .pvm-h{display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .store-root .pro-desk .pvm-pv{color:#92400e}
 .store-root .pro-desk .pvm-oos{color:#b3423a}
 /* the deal chip demotes to a colored WORD on the meta line (a pill next to
    the 2-line clamp reads as debris); the PILL hides */
 .store-root .pro-desk .pdchip{display:none}
 .store-root .pro-desk .pvm-deal{display:inline-flex;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--deal-ink,var(--brand-2));font-weight:600}
 /* no hover layer on touch — the price cell TAP opens the sheet instead */
 .store-root .pro-desk .ppr-anchor{display:none!important}
 /* price stacks FULLY on mobile: struck, final, then the −N% chip on its
    own line — final + chip side-by-side clipped the figure in the 84px
    column (user 2026-07-10) */
 .store-root .pro-desk .ppr{flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap}
 .store-root .pro-desk .pnow{flex-direction:column;align-items:flex-end;gap:1px}
 .store-root .pro-desk .ppr .was{font-size:.65rem}
 .store-root .pro-desk .ppr .pct{font-size:.625rem;padding:0 5px}
 /* stepper: 104px pill (34+36+34) — narrower buttons, FULL-HEIGHT hit areas
    (the pill is ~42px tall; width 34 + height 42 keeps the effective touch
    area at the platform minimum) */
 .store-root .pro-desk .pqb{width:34px}
 .store-root .pro-desk .pqin{width:36px;height:40px}
 /* thumb rides the 36px column */
 .store-root .pro-desk .pimg img{width:32px;height:32px}
 /* forgot chips may carry the FULL identity on a narrow screen */
 .store-root .pro-desk .pfn{max-width:62vw}
 /* bar: totals line + FULL-WIDTH CTA below (thumb zone) — never a clipped
    button beside a wrapping figure */
 .store-root .pro-desk .pbar{padding:8px 12px}
 .store-root .pro-desk .pbrow{gap:8px}
 .store-root .pro-desk .pbcta{flex:1 1 100%;text-align:center;order:9;padding:12px 22px}
}
@media(prefers-reduced-motion:reduce){.store-root .pro-desk .pqty,.store-root .pro-desk .prow,.store-root .pro-desk .psearch{transition:none}}

.store-root .pro-desk .porders{flex:1;overflow-y:auto;min-height:0}
.store-root .pro-desk .porow{display:grid;grid-template-columns:120px 90px 92px 90px 1fr 200px 130px;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid color-mix(in srgb,var(--hair) 55%,transparent);font-size:.8125rem;font-variant-numeric:tabular-nums}
.store-root .pro-desk .porow.po-off{opacity:.5}
.store-root .pro-desk .porow:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.store-root .pro-desk .poth{display:inline-flex;gap:4px}
.store-root .pro-desk .poth img{width:34px;height:34px;object-fit:contain;border-radius:calc(var(--radius)/2);border:1px solid var(--hair);background:var(--surface)}
.store-root .pro-desk .poid{color:var(--muted)}
.store-root .pro-desk .pocnt{color:var(--muted);font-size:.75rem}
.store-root .pro-desk .potag{font-size:.6563rem;padding:2px 8px;border-radius:10px;border:1px solid var(--hair);color:var(--muted);white-space:nowrap}
.store-root .pro-desk .pototal{text-align:right;white-space:nowrap}
.store-root .pro-desk .posave{display:block;font-size:.6875rem;color:var(--deal-ink,var(--brand-2))}
.store-root .pro-desk .poact{text-align:right}
.store-root .pro-desk .pobtn{border:1px solid var(--hair);background:var(--surface);color:var(--ink);font:inherit;font-size:.75rem;font-weight:600;padding:7px 14px;border-radius:var(--radius);cursor:pointer;transition:border-color .12s,background .12s}
.store-root .pro-desk .pobtn:hover{border-color:var(--brand-1);background:color-mix(in srgb,var(--brand-1) 6%,transparent)}
.store-root .pro-desk .pobtn:disabled{opacity:.6;cursor:default}
@media(max-width:760px){
 .store-root .pro-desk .porow{grid-template-columns:80px 1fr 110px 100px}
 .store-root .pro-desk .poid,.store-root .pro-desk .potrk,.store-root .pro-desk .pocnt{display:none}
}

.store-root .proent-w{position:relative;display:inline-flex}
.store-root .proent{display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.75;transition:opacity .12s}
.store-root .proent:hover{opacity:1}
@media(pointer:coarse),(max-width:760px){.store-root .proent{min-width:44px;min-height:44px}}
.store-root .procoach{position:absolute;top:calc(100% + 10px);right:-8px;z-index:120;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--bg);border-radius:10px;padding:10px 12px;font-size:.75rem;line-height:1.4;width:230px;
  box-shadow:0 10px 30px rgba(0,0,0,.22)}
.store-root .procoach:before{content:"";position:absolute;top:-5px;right:18px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.store-root .pcc-x{flex:0 0 auto;border:0;background:none;color:inherit;opacity:.7;font-size:1rem;cursor:pointer;padding:2px 4px}
.store-root .pcc-x:hover{opacity:1}
.store-root .proent-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);border-radius:var(--radius);
  padding:8px 14px;font-size:.8125rem;font-weight:600;color:var(--ink);text-decoration:none;background:var(--surface);transition:border-color .12s}
.store-root .proent-btn:hover{border-color:var(--brand-1)}
.store-root .cat-hero{position:relative;height:clamp(220px,32vh,380px);overflow:hidden;background-size:cover;background-position:center}.store-root .cat-hero .ch-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.05) 100%);pointer-events:none}.store-root .cat-hero .ch-copy{position:absolute;left:0;right:0;bottom:0;padding:26px clamp(20px,4vw,48px);color:#fff}.store-root .cat-hero .ch-k{font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);margin:0 0 8px}.store-root .cat-hero h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.625rem,3.6vw,2.5rem);margin:0;text-shadow:0 1px 14px rgba(0,0,0,.35)}.store-root .cat-hero .ch-d{color:rgba(255,255,255,.85);max-width:560px;margin:10px 0 0;line-height:1.55;font-size:.875rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.store-root .cat-hero .ch-n{color:rgba(255,255,255,.65);font-size:.75rem;letter-spacing:.06em;margin:10px 0 0}
.catx{max-width:1200px;margin:0 auto;padding:32px 20px 72px}
.catx-h{font-family:var(--f-serif);font-size:clamp(24px,4vw,34px);margin:0 0 6px;color:var(--ink)}
.catx-sub{margin:0 0 28px;color:var(--ink-2,#666);font-size:14px}
.catx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:26px}
.catx-cat{min-width:0;display:flex;flex-direction:column}
.catx-media{display:block;position:relative;overflow:hidden;border-radius:var(--radius,10px);
  aspect-ratio:4/3;background:var(--soft,#f2f2f2);text-decoration:none}
.catx-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.catx-cat:hover .catx-media img{transform:scale(1.045)}
.catx-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-serif);font-size:56px;color:var(--ink-2,#999);opacity:.35;user-select:none}
.catx-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:12px 2px 0}
.catx-name{min-width:0;text-decoration:none;color:var(--ink);font-weight:600;font-size:16.5px;line-height:1.25}
.catx-name:hover{text-decoration:underline}
.catx-count{flex:0 0 auto;color:var(--ink-2,#777);font-size:12.5px;white-space:nowrap}
.catx-subs{margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.catx-subs a{display:inline-block;text-decoration:none;color:var(--ink-2,#555);font-size:12.5px;
  border:1px solid var(--line,#e5e5e5);border-radius:999px;padding:4px 11px;
  transition:border-color .15s,color .15s}
.catx-subs a:hover{color:var(--ink);border-color:var(--ink-2,#999)}
.catx-empty{color:var(--ink-2,#666);font-size:15px}

/* S-45: min-width:0 lets the sort control shrink — a native select reserves
   width for its LONGEST option (e.g. the price-descending label), so .ssort
   swelled to ~372px and overflowed the ~340px toolbar at 360-390 (clipped by the
   global overflow-x:hidden, so silent). The flex item (.ssort) + the select both
   need min-width:0 so the select shrinks to the available space; the SELECTED
   value shown is short and stays legible, only the reserve collapses. */
.ssort{display:inline-flex;align-items:center;gap:8px;font-size:.78125rem;color:var(--muted);min-width:0}
.ssort .ssort-lbl{letter-spacing:.12em;text-transform:uppercase;font-size:.6875rem;flex:0 0 auto}
.ssort select{appearance:none;-webkit-appearance:none;background:var(--surface);color:var(--ink);
  border:1px solid var(--hair);border-radius:var(--radius);padding:8px 30px 8px 12px;font:inherit;font-size:.8125rem;
  cursor:pointer;line-height:1.2;min-width:0;flex:0 1 auto;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.ssort select:hover{border-color:var(--ink)}
.ssort select:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
/* shared grid toolbar: filter (left) + sort (right) */
.gtoolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1440px;margin:0 auto;padding:0 24px 16px}
/* S-93: NO min-width:0 here — it let the flex shrink .gt-left below the FILTRAR
   button intrinsic width, and the button (inline-flex, non-shrinking) then
   overflowed :visible to the RIGHT, covering the first letters of the Ordenar
   label (Ordenar rendered rdenar at ~360). The sort select is the only element
   that should absorb the squeeze (it has min-width:0 + text-overflow:ellipsis). */
.gtoolbar .gt-left{position:relative;display:flex;align-items:center;gap:16px;flex:0 0 auto}
.gtoolbar .gt-count{font-size:.71875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.gtoolbar.nofilter{justify-content:flex-end}
@media(max-width:520px){.gtoolbar .gt-count{display:none}}
/* S-94: FILTRAR keeps its natural sizing here (no magic px). The height match with
   the sort <select> is owned by ONE shared law, not a one-off number:
   - desktop: both derive ~35px from their own font-size + padding;
   - mobile/touch: both hit the 44px tap-target minimum (FILTRAR added to core
     tap-css alongside the select, so neither is the odd one out).
   Also dropped <select> from the iOS 16px font guard (selects never focus-zoom),
   so the select keeps its designed .8125rem — close to FILTRAR .75rem. */
.gt-filter>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:var(--radius);padding:9px 15px;background:var(--surface);color:var(--ink);transition:border-color .15s}
.gt-filter>summary::-webkit-details-marker{display:none}
.gt-filter>summary:hover{border-color:var(--ink)}
.gt-filter>summary svg{flex:0 0 auto;opacity:.75}
.gt-badge{background:var(--ink);color:var(--bg);border-radius:99px;min-width:17px;height:17px;font-size:.625rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
/* the filter panel is a CENTERED MODAL, never a button-anchored popover — an
   anchored panel clips against the viewport and wastes the screen (user
   directive 2026-07-05: 'popup posicional = muy mala experiencia'). Scrim dims
   the page and closes on click-outside; the ✕ in the head is the explicit
   close. Mobile overrides to a bottom sheet below. */
.gt-scrim{display:none}
/* z 140/150: ABOVE every sticky header/nav (skeletons top out ≤100) and the
   FABs; below the editor SPA overlay (200) and search/edit overlays (300) —
   the modal was hiding UNDER pink-preset headers (user report 2026-07-05) */
.gt-filter[open] .gt-scrim{display:block;position:fixed;inset:0;z-index:140;
  background:color-mix(in srgb,var(--ink) 32%,transparent)}
.gt-pacts{display:inline-flex;align-items:center;gap:14px}
.gt-x{border:0;background:none;cursor:pointer;color:var(--ink);padding:8px;margin:-8px;display:inline-flex;opacity:.7}
.gt-x:hover{opacity:1}
.gt-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:150;
  width:min(560px,calc(100vw - 32px));max-height:min(78vh,760px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg);border:1px solid var(--hair);border-radius:calc(var(--radius)*1.2);
  box-shadow:0 24px 56px -22px color-mix(in srgb,var(--ink) 55%,transparent);padding:0 22px 22px}
/* the head (title + Limpiar + ✕) is STICKY — scrolling the facets must never
   lose the context or the close (user report 2026-07-05) */
.gt-phead{position:sticky;top:0;z-index:2;background:var(--bg);
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--ink);padding:18px 0 9px;margin-bottom:14px}
.gt-phead b{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.gt-clear{font-size:.6875rem;letter-spacing:.04em;color:var(--brand-1);text-decoration:none}
.gt-clear:hover{text-decoration:underline}
.gt-group{margin-bottom:20px}.gt-group:last-child{margin-bottom:0}
.gt-group h4{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:600}
.gt-frow{display:flex;align-items:center;gap:10px;padding:5px 0;color:inherit;text-decoration:none;font-size:.84375rem}
.gt-frow:hover{color:var(--ink)}
.gt-frow .box{width:15px;height:15px;border:1px solid var(--hair);border-radius:3px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.12s}
.gt-frow.on .box{background:var(--ink);border-color:var(--ink)}
.gt-frow .box svg{width:11px;height:11px;stroke:var(--bg);stroke-width:3;fill:none;display:none}
.gt-frow.on .box svg{display:block}
.gt-frow .dot{width:15px;height:15px;border-radius:50%;border:1px solid var(--hair);flex:0 0 auto;box-shadow:inset 0 0 0 2px var(--surface)}
.gt-frow.on .dot{box-shadow:inset 0 0 0 2px var(--surface),0 0 0 1.5px var(--brand-1)}
.gt-frow .lbl{flex:1;text-transform:capitalize}
.gt-frow .cnt{font-size:.6875rem;color:var(--muted)}
.gt-frow.on{color:var(--ink);font-weight:500}
@media(max-width:620px){
  .gtoolbar{padding:0 14px 12px}
  /* S-162: the filter bottom-sheet is pinned to bottom:0 — pad its base 18px by the
     home-indicator inset so the last filter row / Limpiar clears the notch bar on
     iOS (the sibling fixed bars — cart-cobar, pdp-mbar, matrix actionbar — already do). */
  .gt-panel{left:0;right:0;bottom:0;top:auto;transform:none;width:auto;max-height:78vh;
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    border-radius:16px 16px 0 0;box-shadow:0 -24px 56px -22px color-mix(in srgb,var(--ink) 60%,transparent)}
}
/* tap-law: 'Limpiar' clears ALL filters — a discrete action, not inline text, so
   WCAG 2.5.8's inline exception does not apply. At 11px it was a 13px-tall target
   in the mobile filter sheet; a mis-tap here silently wipes the shopper's filters
   (Baymard). Pad the hit area to the HIG minimum WITHOUT moving the baseline text
   (negative margin absorbs the padding). Touch only — desktop keeps the compact
   header (mouse precision, S-38). */
@media(pointer:coarse),(max-width:760px){
  .gt-clear{padding:16px 8px;margin:-16px -8px}
}

.sacct{max-width:900px;margin:0 auto;padding:clamp(28px,4vw,52px) 24px 90px;min-height:62vh}
.sacct h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.625rem,3.4vw,2.375rem);margin:0 0 6px}
.sacct .sub{color:var(--muted);font-size:.875rem;margin:0 0 30px}
/* labels never wrap mid-word — the bar scrolls horizontally when tight */
/* the ROW owns the hairline + rhythm; the tab scroller and the logout are
   siblings. Keeping the border here (not on the overflow scroller) means the
   logout — lifted out of the .hfade mask — never gets faded (S-25). */
.sacct .acctnav-row{display:flex;align-items:flex-end;gap:26px;margin:0 0 26px;border-bottom:1px solid var(--hair)}
.sacct .acctnav{display:flex;gap:26px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.sacct .acctnav::-webkit-scrollbar{display:none}
.sacct .acctnav a{white-space:nowrap;flex:0 0 auto}
.sacct .acctnav a{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:0 0 12px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.sacct .acctnav a:hover{color:var(--ink)}
.sacct .acctnav a.on{color:var(--ink);border-bottom-color:var(--ink)}
/* profile */
.sacct .psec{margin:0 0 32px}
.sacct .psec h2{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.sacct .pfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 32px}
.sacct .pf .k{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.sacct .pf .v{font-size:.9375rem;line-height:1.4}
.sacct .paddr{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sacct .paddr .card{border:1px solid var(--hair);border-radius:var(--radius);padding:18px 20px;font-size:.875rem;line-height:1.6;color:var(--muted);
  background:var(--surface);transition:border-color .15s}
.sacct .paddr .card:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--hair))}
.sacct .paddr .card .top{color:var(--ink);font-weight:600;margin:0 0 4px;letter-spacing:.01em}
.sacct .paddr .card{display:flex;flex-direction:column}
.sacct .paddr .card .acard-act{display:flex;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.sacct .paddr .card .acard-act button{background:none;border:0;cursor:pointer;padding:0;font:inherit;font-size:.75rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);transition:color .15s}
.sacct .paddr .card .acard-act button:first-child:hover{color:var(--ink)}
.sacct .paddr .card .acard-act button:last-child:hover{color:var(--brand-2)}
/* empty addresses: a friendly dashed prompt, not an orphaned grey line */
.sacct .pempty{color:var(--muted);font-size:.875rem;border:1px dashed var(--hair);border-radius:var(--radius);
  padding:26px 20px;text-align:center;line-height:1.6}
.sacct .order{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--hair)}
.sacct .order .meta{flex:1;min-width:180px}
/* the title row FLEX-WRAPS: a long status pill drops to its own line as ONE
   coherent rounded block — a plain inline span's background fragments into
   broken strips across line boxes (user report) */
.sacct .order .num{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.9375rem;font-weight:600;margin:0 0 4px;letter-spacing:.02em}
.sacct .order .num .st{font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;line-height:1.4}
.sacct .order .num .st.void{background:color-mix(in srgb,var(--brand-2) 16%,transparent);color:var(--brand-2)}
.sacct .order .num .st.ok{background:color-mix(in srgb,var(--brand-1) 18%,transparent);color:var(--ink)}
.sacct .order .det{font-size:.8125rem;color:var(--muted)}
.sacct .order .tot{font-size:1rem;font-weight:600;white-space:nowrap}
/* narrow phones: a 5-digit thousands price (107px, nowrap) + the 180px meta
   floor overflowed the ~288px row at 320. The meta shrinks (its num/det
   already wrap); the price stays whole and right-aligned. */
@media(max-width:400px){.sacct .order .meta{min-width:0}.sacct .rowlink{min-width:0}}
.sacct .order .reo{border:1px solid var(--hair);background:none;color:inherit;cursor:pointer;border-radius:var(--radius);
  padding:10px 18px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;transition:.15s;white-space:nowrap}
.sacct .order .reo:hover{border-color:var(--ink)}
.sacct .order .reo:disabled{opacity:.5;cursor:not-allowed}
/* card-grid orders layout (ordersLayout=cards) */
.sacct .ocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.sacct .rnote{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;margin:0 0 18px;
  padding:12px 16px;border:1px solid color-mix(in srgb,var(--brand-2) 40%,var(--hair));border-radius:var(--radius);
  background:color-mix(in srgb,var(--brand-2) 8%,var(--surface));font-size:.8125rem;line-height:1.5}
.sacct .rnote button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:.875rem;line-height:1;padding:2px}
.sacct .rnote button:hover{color:var(--ink)}
.sacct .ofilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.sacct .ofilter button{background:none;border:1px solid var(--hair);color:var(--muted);cursor:pointer;
  font:inherit;font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;padding:7px 14px;border-radius:999px;transition:.15s}
/* hover ONLY on hover-capable devices — on touch, :hover sticks after a tap
   and the last-tapped chip reads as half-selected (user report: two different
   emphasis looks at once) */
@media(hover:hover){.sacct .ofilter button:hover{border-color:var(--ink);color:var(--ink)}}
.sacct .ofilter button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* phones: the merchant's long status names stacked 6 pills into a wall that
   ate the first viewport — a filter is SECONDARY UI. One scrollable row
   (the cat-chips pattern), .hfade edge cue; mask off where the row wraps */
@media(max-width:760px){
  .sacct .ofilter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sacct .ofilter::-webkit-scrollbar{display:none}
  .sacct .ofilter button{white-space:nowrap;flex:0 0 auto}
}
@media(min-width:761px){.sacct .ofilter.hfade{mask-image:none;-webkit-mask-image:none}}
.sacct .omore{text-align:center;padding:26px 0 6px}
.sacct .omore button{background:none;border:1px solid var(--hair);color:var(--muted);cursor:pointer;
  font:inherit;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:12px 28px;border-radius:var(--radius);transition:.15s}
.sacct .omore button:hover{border-color:var(--ink);color:var(--ink)}
.sacct .omore button:disabled{opacity:.5;cursor:default}
.sacct .ocard{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.sacct .ocard:hover{border-color:var(--ink);box-shadow:0 10px 30px -18px color-mix(in srgb,var(--ink) 55%,transparent)}
.sacct .ocard.void{opacity:.62}
.sacct .ocard-link{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.sacct .ocard-thumbs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--hair);aspect-ratio:4/2.4}
.sacct .ocard-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.sacct .ocard-thumbs .ocard-ph{grid-column:1/-1;display:grid;place-items:center;font-size:2rem;color:var(--muted);background:var(--bg)}
.sacct .ocard-more{position:absolute;right:8px;bottom:8px;background:color-mix(in srgb,var(--ink) 82%,transparent);color:var(--bg);font-size:.6875rem;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:99px;backdrop-filter:blur(3px)}
.sacct .ocard-body{padding:15px 16px 4px;flex:1}
.sacct .ocard-body .num{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:.9375rem;font-weight:600;margin:0 0 4px;letter-spacing:.02em}
.sacct .ocard-body .num .st{font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:99px;line-height:1.4}
.sacct .ocard-body .num .st.void{background:color-mix(in srgb,var(--brand-2) 16%,transparent);color:var(--brand-2)}
.sacct .ocard-body .num .st.ok{background:color-mix(in srgb,var(--brand-1) 18%,transparent);color:var(--ink)}
.sacct .ocard-body .det{font-size:.8125rem;color:var(--muted);margin:0 0 10px}
.sacct .ocard-body .tot{font-size:1rem;font-weight:600}
.sacct .ocard-link:hover .num{color:var(--brand-1)}
.sacct .ocard .reo{margin:12px 16px 16px;border:1px solid var(--hair);background:none;color:inherit;cursor:pointer;border-radius:var(--radius);
  padding:10px 18px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;transition:.15s}
.sacct .ocard .reo:hover{border-color:var(--ink)}
.sacct .ocard .reo:disabled{opacity:.5;cursor:not-allowed}
.sacct .center{text-align:center;padding:64px 24px;max-width:520px;margin:0 auto}
.sacct .center .big{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.375rem,3vw,1.875rem);margin:0 0 14px}
.sacct .center p{color:var(--muted);line-height:1.6;margin:0 0 24px}
.sacct .center a{display:inline-block;padding:14px 32px;background:var(--ink);color:var(--bg);text-decoration:none;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;border-radius:var(--radius)}
.sacct .load{color:var(--muted);padding:40px 0;text-align:center;font-size:.875rem}
.sacct .rowlink{display:flex;align-items:center;gap:18px;flex:1;min-width:200px;text-decoration:none;color:inherit}
.sacct .rowlink:hover .num{color:var(--brand-1)}
.sacct .rowlink .tot{margin-left:auto}
/* order detail */
.sacct .back{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;margin:0 0 22px;transition:color .15s}
.sacct .back:hover{color:var(--ink)}
.sacct .od-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sacct .od-print{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:0;margin:0 0 22px;transition:color .15s}
.sacct .od-print:hover{color:var(--ink)}
.sacct .odhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.sacct .odhead h1{margin:0}
.sacct .odhead .date{color:var(--muted);font-size:.875rem;flex:1;min-width:120px}
.sacct .odhead .st{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.sacct .odhead .st.void{background:color-mix(in srgb,var(--brand-2) 16%,transparent);color:var(--brand-2)}
.sacct .odhead .st.ok{background:color-mix(in srgb,var(--brand-1) 18%,transparent);color:var(--ink)}
/* status timeline */
.sacct .otl{display:flex;margin:0 0 32px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.sacct .otl::-webkit-scrollbar{display:none}
.sacct .otl-step{flex:1;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;text-align:center}
.sacct .otl-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--hair);background:var(--bg);display:grid;place-items:center;color:var(--muted);z-index:2;transition:.2s}
/* S-157: done step uses --brand-2, NOT --brand-1 — the ✓/number is `--on-brand`,
   which is per-DNA curated to contrast --brand-2 (all 24 DNAs ≥5:1) but NOT
   --brand-1. On DNAs whose brand-1 is light (e.g. :default #a6a195 → white ✓ at
   2.58:1) or where brand-1≠brand-2 (y2k brand-1 #000 + on-brand #000 = invisible),
   the completed-step marker was unreadable. brand-2 pairing is contrast-safe. */
.sacct .otl-step.done .otl-dot{background:var(--brand-2);border-color:var(--brand-2);color:var(--on-brand)}
.sacct .otl-step.on .otl-dot{outline:3px solid color-mix(in srgb,var(--brand-1) 24%,transparent)}
.sacct .otl-step::before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--hair);z-index:1}
.sacct .otl-step:first-child::before{display:none}
.sacct .otl-step.done::before{background:var(--brand-2)}
.sacct .otl-lbl{font-size:.6875rem;letter-spacing:.03em;color:var(--muted);line-height:1.3;max-width:100px}
.sacct .otl-step.on .otl-lbl{color:var(--ink);font-weight:600}
.sacct .oline{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:18px;padding:18px 0;border-bottom:1px solid var(--hair);align-items:center}
.sacct .oline .thumb{width:76px;height:96px;border-radius:var(--radius);overflow:hidden;background:var(--hair);display:grid;place-items:center;flex:0 0 auto}
.sacct .oline .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sacct .oline .thumb .ph{color:var(--muted);opacity:.5}
.sacct .oline .nm{font-size:.90625rem;line-height:1.35;margin:0 0 5px}
.sacct .oline .op .opdot{width:12px;height:12px;border-radius:50%;display:inline-block;
  vertical-align:-1px;margin-right:6px;border:1px solid var(--hair)}
.sacct .oline .op{font-size:.78125rem;color:var(--muted);margin:2px 0 0}
.sacct .oline .q{font-size:.75rem;color:var(--muted);margin:6px 0 0;letter-spacing:.02em}
.sacct .oline .lt{font-size:.9375rem;font-weight:600;white-space:nowrap}
.sacct .odgrid{display:grid;grid-template-columns:1fr 320px;gap:clamp(28px,4vw,56px);align-items:start;margin-top:30px}
.sacct .odsum{position:sticky;top:calc(var(--hdr-h,0px) + 24px);border:1px solid var(--hair);border-radius:var(--radius);padding:24px;background:var(--surface)}
.sacct .odsum h2{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.sacct .odsum .row{display:flex;justify-content:space-between;font-size:.875rem;margin:0 0 11px}
.sacct .odsum .row.tot{font-family:var(--f-serif);font-size:1.375rem;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);align-items:baseline}
.sacct .odsum .row .dsc{color:var(--deal-ink);font-weight:500}
.sacct .odaddr{font-size:.8125rem;line-height:1.65;color:var(--muted);margin:20px 0 0;padding-top:18px;border-top:1px solid var(--hair)}
.sacct .odaddr .lbl{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 8px;font-weight:600}
.sacct .odsum .reo{width:100%;height:52px;margin-top:20px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--radius);
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.2s}
.sacct .odsum .reo:hover{background:var(--brand-2);border-color:var(--brand-2)}
.sacct .odsum .reo:disabled{opacity:.5;cursor:not-allowed}
.sacct .odgrid.sumleft{grid-template-columns:320px 1fr}
.sacct .odgrid.sumleft > div:first-child{order:2}
.sacct .odgrid.sumleft > div:last-child{order:1}
.sacct .oline.noimg{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:720px){.sacct .odgrid,.sacct .odgrid.sumleft{grid-template-columns:1fr}.sacct .odsum{position:static}
  .sacct .odgrid.sumleft > div:first-child{order:1}.sacct .odgrid.sumleft > div:last-child{order:2}}
@media(max-width:560px){.sacct .order .reo{width:100%}}
/* order-detail · receipt variant (invoice-style document) */
.sacct .odrcpt{margin-top:26px}
.sacct .odrcpt .rc-doc{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--hair);border-radius:calc(var(--radius)*1.4);
  padding:clamp(24px,4vw,44px);box-shadow:0 24px 60px -40px color-mix(in srgb,var(--ink) 60%,transparent)}
.sacct .odrcpt .rc-mast{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:8px;border-bottom:2px solid var(--ink)}
.sacct .odrcpt .rc-brand{font-family:var(--rc-tf,var(--f-serif));font-size:clamp(1rem,2vw,1.25rem);letter-spacing:.02em;max-width:60%;overflow-wrap:anywhere}
.sacct .odrcpt .rc-meta{text-align:right;min-width:0}
.sacct .odrcpt .rc-num{font-family:var(--rc-tf,var(--f-serif));font-size:clamp(1.375rem,3vw,1.75rem);margin:0 0 2px}
.sacct .odrcpt.docbg .rc-doc{background:var(--bg);box-shadow:none}
.sacct .odrcpt .rc-date{color:var(--muted);font-size:.8125rem;margin:0 0 8px}
.sacct .odrcpt .st{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.sacct .odrcpt .st.void{background:color-mix(in srgb,var(--brand-2) 16%,transparent);color:var(--brand-2)}
.sacct .odrcpt .st.ok{background:color-mix(in srgb,var(--brand-1) 18%,transparent);color:var(--ink)}
.sacct .odrcpt .otl{margin:20px 0 4px}
.sacct .odrcpt .rc-table{margin-top:18px}
.sacct .odrcpt .rc-thead{display:grid;grid-template-columns:1fr 56px 110px;gap:12px;padding:0 0 10px;border-bottom:1px solid var(--hair);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sacct .odrcpt .rc-thead .rc-c-qty{text-align:center}.sacct .odrcpt .rc-thead .rc-c-amt{text-align:right}
.sacct .odrcpt .rc-row{display:grid;grid-template-columns:1fr 56px 110px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
.sacct .odrcpt .rc-item{display:flex;gap:12px;align-items:center;min-width:0}
.sacct .odrcpt .rc-thumb{flex:0 0 auto;width:44px;height:54px;border-radius:calc(var(--radius)*.6);overflow:hidden;background:var(--hair)}
.sacct .odrcpt .rc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sacct .odrcpt .rc-thumb .ph{display:grid;place-items:center;width:100%;height:100%;color:var(--muted)}
.sacct .odrcpt .rc-nm{font-size:.875rem;margin:0 0 2px;line-height:1.35}
.sacct .odrcpt .rc-op{font-size:.75rem;color:var(--muted);margin:2px 0 0}
.sacct .odrcpt .rc-qty{text-align:center;font-size:.875rem}
.sacct .odrcpt .rc-amt{text-align:right;font-size:.875rem;font-weight:500;white-space:nowrap}
.sacct .odrcpt .rc-totals{margin:18px 0 0;margin-left:auto;max-width:280px}
.sacct .odrcpt .rc-trow{display:flex;justify-content:space-between;font-size:.875rem;margin:0 0 10px}
.sacct .odrcpt .rc-trow .dsc{color:var(--deal-ink);font-weight:500}
.sacct .odrcpt .rc-trow.tot{font-family:var(--f-serif);font-size:1.375rem;margin-top:12px;padding-top:12px;border-top:2px solid var(--ink);align-items:baseline}
.sacct .odrcpt .rc-foot{margin-top:22px;padding-top:20px;border-top:1px dashed var(--hair)}
.sacct .odrcpt .rc-foot .odaddr{margin-top:0;padding-top:0;border-top:0}
.sacct .odrcpt .rc-reo{width:100%;height:52px;margin-top:24px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--radius);
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.2s}
.sacct .odrcpt .rc-reo:hover{background:var(--brand-2);border-color:var(--brand-2)}
.sacct .odrcpt .rc-reo:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:560px){
  .sacct .odrcpt .rc-doc{padding:20px 16px}
  .sacct .odrcpt .rc-thead,.sacct .odrcpt .rc-row{grid-template-columns:1fr 40px 84px;gap:8px}
  .sacct .odrcpt .rc-thumb{display:none}
  .sacct .odrcpt .rc-totals{max-width:none}
}
/* order-detail · tracking variant (status-first, vertical rail) */
.sacct .odtrk{max-width:640px;margin:26px auto 0}
.sacct .odtrk .tk-hero{text-align:center;margin:0 0 30px}
.sacct .odtrk .tk-k{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.sacct .odtrk .tk-st{font-family:var(--tk-tf,var(--f-serif));font-size:clamp(1.625rem,4vw,2.375rem);line-height:1.1;margin:0 0 10px}
.sacct .odtrk .tk-meta{font-size:.8125rem;color:var(--muted);margin:0}
.sacct .odtrk .tk-rail{margin:0 auto 30px;max-width:380px;display:flex;flex-direction:column}
.sacct .odtrk .tk-step{display:flex;align-items:center;gap:16px;position:relative;padding:0 0 26px}
.sacct .odtrk .tk-step:last-child{padding-bottom:0}
.sacct .odtrk .tk-step::before{content:'';position:absolute;left:15px;top:30px;bottom:-2px;width:2px;background:var(--hair)}
.sacct .odtrk .tk-step:last-child::before{display:none}
.sacct .odtrk .tk-step.done::before{background:var(--brand-2)}
.sacct .odtrk .tk-dot{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--hair);background:var(--bg);
  display:grid;place-items:center;color:var(--muted);z-index:1;transition:.2s}
.sacct .odtrk .tk-step.done .tk-dot{background:var(--brand-2);border-color:var(--brand-2);color:var(--on-brand)}
.sacct .odtrk .tk-step.on .tk-dot{outline:3px solid color-mix(in srgb,var(--brand-1) 24%,transparent)}
.sacct .odtrk.railink .tk-step.done::before{background:var(--ink)}
.sacct .odtrk.railink .tk-step.done .tk-dot{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sacct .odtrk.railink .tk-step.on .tk-dot{outline-color:color-mix(in srgb,var(--ink) 20%,transparent)}
.sacct .odtrk .tk-lbl{font-size:.875rem;color:var(--muted)}
.sacct .odtrk .tk-step.on .tk-lbl{color:var(--ink);font-weight:600}
.sacct .odtrk .tk-sum{border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);padding:22px;margin:0 0 26px}
.sacct .odtrk .tk-sum .row{display:flex;justify-content:space-between;font-size:.875rem;margin:0 0 11px}
.sacct .odtrk .tk-sum .row.tot{font-family:var(--f-serif);font-size:1.375rem;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--hair);align-items:baseline}
.sacct .odtrk .tk-sum .row .dsc{color:var(--deal-ink);font-weight:500}
.sacct .odtrk .tk-sum .reo{width:100%;height:52px;margin-top:18px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--radius);
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.2s}
.sacct .odtrk .tk-sum .reo:hover{background:var(--brand-2);border-color:var(--brand-2)}
.sacct .odtrk .tk-sum .reo:disabled{opacity:.5;cursor:not-allowed}
.sacct .odtrk .tk-items{margin:0 0 4px}
/* order-detail · compact variant (dense ops list + summary strip) */
.sacct .odcpt{margin-top:22px}
.sacct .odcpt .cp-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--hair);
  border-radius:var(--radius);background:var(--surface);margin:0 0 6px}
.sacct .odcpt .cp-bar.stick{position:sticky;top:calc(var(--hdr-h,0px) + 8px);z-index:5;box-shadow:0 10px 30px -18px color-mix(in srgb,var(--ink) 50%,transparent)}
.sacct .odcpt .cp-num{font-family:var(--f-serif);font-size:1.1875rem;margin:0}
.sacct .odcpt .cp-date{font-size:.75rem;color:var(--muted);margin:2px 0 0}
.sacct .odcpt .cp-tot{margin-left:auto;display:flex;align-items:baseline;gap:10px}
/* S-158: discount labels use --deal-ink (the DS9-per-DNA-AA-tuned deal text token),
   NOT raw --brand-2. brand-2 as small text fails AA on ~7 DNAs (japandi 1.79:1,
   pink 3.05, gold 3.61…); deal-ink is brand mixed toward --ink → always ≥ contrast
   AND semantically correct (a discount IS deal content). Sister .dsc rules above. */
.sacct .odcpt .cp-dsc{color:var(--deal-ink);font-size:.8125rem;font-weight:500}
.sacct .odcpt .cp-amt{font-family:var(--f-serif);font-size:1.3125rem}
.sacct .odcpt.totbrand .cp-amt,.sacct .odcpt.totbrand .cp-tots .row.tot span:last-child{color:var(--brand-2)}
/* comfy row density: taller rows + bigger thumbs */
.sacct .odcpt.comfy .cp-row{padding:15px 6px;gap:16px}
.sacct .odcpt.comfy .cp-thumb{width:44px;height:54px}
.sacct .odcpt.comfy .cp-nm p{font-size:.90625rem;white-space:normal}
/* S-215: was height:42px — the lone od-detail reorder button under the 44px
   touch floor (standard/receipt/tracking siblings are 52px; on ≤640 this goes
   width:100% so it's the full-width primary reorder CTA). 44px meets the floor
   and stays the tightest of the four, preserving the compact variant's density. */
.sacct .odcpt .cp-reo{height:44px;padding:0 20px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--radius);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.2s}
.sacct .odcpt .cp-reo:hover{background:var(--brand-2);border-color:var(--brand-2)}
.sacct .odcpt .cp-reo:disabled{opacity:.5;cursor:not-allowed}
.sacct .odcpt .cp-row{display:grid;grid-template-columns:auto 1fr auto 96px;gap:14px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--hair)}
.sacct .odcpt .cp-thumb{width:34px;height:42px;border-radius:calc(var(--radius)*.6);overflow:hidden;background:var(--hair)}
.sacct .odcpt .cp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sacct .odcpt .cp-thumb .ph{display:grid;place-items:center;width:100%;height:100%;color:var(--muted)}
.sacct .odcpt .cp-nm{min-width:0}
.sacct .odcpt .cp-nm p{font-size:.84375rem;margin:0;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sacct .odcpt .cp-op{font-size:.71875rem;color:var(--muted);margin:2px 0 0 !important}
.sacct .odcpt .cp-q{font-size:.78125rem;color:var(--muted);white-space:nowrap}
.sacct .odcpt .cp-lt{text-align:right;font-size:.84375rem;font-weight:500;white-space:nowrap}
.sacct .odcpt .cp-foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:20px}
.sacct .odcpt .cp-tots{margin-left:auto;order:2;min-width:250px}
.sacct .odcpt .cp-tots .row{display:flex;justify-content:space-between;font-size:.875rem;margin:0 0 10px}
.sacct .odcpt .cp-tots .row.tot{font-family:var(--f-serif);font-size:1.3125rem;margin-top:10px;padding-top:10px;border-top:1px solid var(--ink);align-items:baseline}
.sacct .odcpt .cp-tots .row .dsc{color:var(--deal-ink);font-weight:500}
.sacct .odcpt .cp-foot .odaddr{order:1;margin:0;padding:0;border:0;max-width:320px}
@media(max-width:640px){
  .sacct .odcpt .cp-row{grid-template-columns:auto 1fr auto}
  .sacct .odcpt .cp-lt{grid-column:2 / -1;text-align:right;margin-top:-6px}
  .sacct .odcpt .cp-thumb{grid-row:span 2}
  .sacct .odcpt .cp-tot{width:100%;order:5}
  .sacct .odcpt .cp-reo{width:100%;order:6}
  .sacct .odcpt .cp-tots{margin-left:0;min-width:0;width:100%}
}
/* account nav logout + profile edit — logout is a sibling of the tab scroller
   (S-25), pinned right (flex:0 0 auto after the flex:1 tab nav), unmasked. */
.sacct .acctnav-row .logout{flex:0 0 auto;white-space:nowrap;border:0;background:none;cursor:pointer;color:#c62828;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:0 0 14px;transition:color .15s}
.sacct .acctnav-row .logout:hover{color:#a31f1f}
.sacct .pedit-top{display:flex;justify-content:flex-end;margin:0 0 4px}
.sacct .editbtn{border:1px solid var(--hair);background:none;color:inherit;cursor:pointer;border-radius:var(--radius);
  padding:8px 18px;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;transition:.15s}
.sacct .editbtn:hover{border-color:var(--ink)}
/* S-10: profile edit/address-card actions were 31px + 19px — under the 44px
   touch minimum. On touch/narrow the hit area grows (bordered editbtn via
   min-height; borderless card actions via a padding bump + compensating
   negative margin so the card layout is unshifted). Desktop mouse keeps the
   compact look. */
@media(pointer:coarse),(max-width:760px){
  .sacct .editbtn{min-height:44px}
  .sacct .paddr .card .acard-act button{padding:12px 4px;margin:-12px -4px}
  .sacct .paddr .card .acard-act{gap:22px}
  /* S-38: the order-LIST/card 'Volver a pedir' (36px) and the account-nav
     'Cerrar sesión' logout (28px) fell through the coarse tap-target net —
     core's global net only lists `.acctnav .logout` (a DESCENDANT), but this
     logout is `.acctnav-row > .logout` (a SIBLING of `.acctnav`), and `.reo`
     was never enumerated. Bump both to the 44px minimum; the logout centers so
     it aligns with the 44px account tabs beside it. (The order-DETAIL `.reo`
     variants are already 52px.) */
  .sacct .order .reo,.sacct .ocard .reo{min-height:44px}
  .sacct .acctnav-row .logout{min-height:44px;display:inline-flex;align-items:center}
}
/* section header BAR: title left · action (Agregar) right · one full-width
   divider under both (the psec h2 border alone underlined only the title,
   leaving the button floating above a half-underline — user report) */
.sacct .phead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.sacct .phead h2{margin:0;border:0;padding:0}
.sacct .pform{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px 32px}
/* address form: Calle+Número and Provincia+Código-postal pair on shared rows
   (a real address shape); Ciudad + País stay full width. Not the flat 6-box
   stack. Shares .pform base with the profile form; only .addr repositions. */
/* address autocomplete (geocoded, mirrors the dashboard picker): a search
   field above the manual grid; matches drop in a bordered list, picking one
   autofills the fields below */
.sacct .ageo{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;position:relative}
.sacct .ageo>label{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sacct .ageo-in{position:relative;display:flex}
.sacct .ageo-in input{width:100%;min-width:0;height:44px;border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--surface);color:inherit;font:inherit;font-size:.9375rem;padding:0 40px 0 12px;transition:border-color .15s}
.sacct .ageo-in input:focus{outline:none;border-color:var(--ink)}
.sacct .ageo-spin{position:absolute;right:14px;top:50%;width:15px;height:15px;margin-top:-8px;border:2px solid var(--hair);
  border-top-color:var(--ink);border-radius:50%;animation:ageo-spin .7s linear infinite}
@keyframes ageo-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sacct .ageo-spin{animation-duration:1.6s}}
.sacct .ageo-list{list-style:none;margin:6px 0 0;padding:4px;border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--surface);box-shadow:0 12px 30px -18px color-mix(in srgb,var(--ink) 60%,transparent);
  max-height:260px;overflow-y:auto}
.sacct .ageo-list .ageo-msg{padding:12px 12px;font-size:.84375rem;color:var(--muted)}
.sacct .ageo-list li button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.875rem;color:var(--ink);padding:12px;border-radius:calc(var(--radius)*.7);line-height:1.4;min-height:44px}
.sacct .ageo-list li button:hover,.sacct .ageo-list li button:focus-visible{background:color-mix(in srgb,var(--brand-1) 9%,var(--surface))}
.sacct .pform.addr{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px 14px}
.sacct .pform.addr .pfield{grid-column:1 / -1;min-width:0}
.sacct .pform.addr .pf-street{grid-column:1}
.sacct .pform.addr .pf-number{grid-column:2}
.sacct .pform.addr .pf-province{grid-column:1}
.sacct .pform.addr .pf-postal{grid-column:2}
.sacct .pfield{display:flex;flex-direction:column;gap:6px}
.sacct .pfield label{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sacct .pfield input{height:44px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);color:inherit;
  font:inherit;font-size:.9375rem;padding:0 12px;transition:border-color .15s;min-width:0;width:100%}
.sacct .pfield input:focus{outline:none;border-color:var(--ink)}
.sacct .pfield select{height:44px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);color:inherit;
  font:inherit;font-size:.9375rem;padding:0 34px 0 12px;transition:border-color .15s;min-width:0;width:100%;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.sacct .pfield select:focus{outline:none;border-color:var(--ink)}
.sacct .pactions{display:flex;gap:12px;align-items:center;margin:26px 0 0;flex-wrap:wrap}
.sacct .pactions .save{height:46px;padding:0 32px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--radius);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.2s}
.sacct .pactions .save:hover{background:var(--brand-2);border-color:var(--brand-2)}
.sacct .pactions .save:disabled{opacity:.5;cursor:not-allowed}
.sacct .pactions .cancel{height:46px;padding:0 22px;background:none;border:1px solid var(--hair);color:inherit;border-radius:var(--radius);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.15s}
.sacct .pactions .cancel:hover{border-color:var(--ink)}
.sacct .pactions .err{color:var(--brand-2);font-size:.8125rem;flex-basis:100%}
.sacct .saved{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--brand-1) 14%,transparent);
  color:var(--ink);font-size:.8125rem;padding:9px 16px;border-radius:var(--radius);margin:0 0 22px}
@media(max-width:560px){.sacct .pactions .save,.sacct .pactions .cancel{flex:1}}
/* stock alerts (Mis avisos) */
.sacct .alert-row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--hair)}
.sacct .alert-row .arow-lk{display:contents;text-decoration:none;color:inherit}
.sacct .alert-row .athumb{width:64px;height:80px;border-radius:var(--radius);overflow:hidden;background:var(--hair);display:grid;place-items:center}
.sacct .alert-row .athumb img{width:100%;height:100%;object-fit:cover;display:block}
.sacct .alert-row .athumb .ph{color:var(--muted);opacity:.5}
.sacct .alert-row .anm{font-size:.90625rem;line-height:1.35;margin:0}
.sacct .alert-row .asub{font-size:.78125rem;color:var(--muted);margin:5px 0 0}
.sacct .alert-row .acancel{border:1px solid var(--hair);background:none;color:var(--muted);cursor:pointer;border-radius:var(--radius);
  padding:9px 16px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;transition:.15s;white-space:nowrap}
.sacct .alert-row .acancel:hover{border-color:var(--brand-2);color:var(--brand-2)}
@media(max-width:560px){.sacct .alert-row{grid-template-columns:56px 1fr;gap:12px}.sacct .alert-row .acancel{grid-column:2;justify-self:start;margin-top:4px}}
/* S-14: the Cancelar alert action was 34px — under the 44px touch minimum */
@media(pointer:coarse),(max-width:760px){.sacct .alert-row .acancel{min-height:44px}}

.sacct .ledger{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin:0 0 14px;
  padding:12px 16px;background:var(--deal-bg);border:1px solid var(--deal-line);border-radius:var(--deal-radius)}
.sacct .ledger .lm{font-family:var(--f-serif);font-size:1rem;color:var(--deal-ink)}
.sacct .ledger .la{font-size:.75rem;color:var(--deal-ink);font-variant-numeric:tabular-nums}
.ledger .lm,.ledger .la{min-width:0}

.slogin .card{width:100%;min-width:0;max-width:440px;text-align:center}
.slogin .brand{margin:0 0 30px}
.slogin .brand .blogo{margin:0 auto}
.slogin .ic{width:60px;height:60px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand-1) 12%,transparent);color:var(--brand-1)}
.slogin h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.625rem,3.4vw,2.125rem);margin:0 0 10px}
.slogin .sub{color:var(--muted);font-size:.9375rem;line-height:1.6;margin:0 auto 28px;max-width:360px}
.slogin form{display:flex;flex-direction:column;gap:14px;text-align:left}
.slogin label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.slogin input{height:52px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);color:inherit;
  font:inherit;font-size:1rem;padding:0 16px;transition:border-color .15s}
.slogin input:focus{outline:none;border-color:var(--ink)}
.slogin input.bad{border-color:var(--brand-2)}
.slogin .go{height:52px;margin-top:4px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--radius);
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.2s}
.slogin .go:hover{background:var(--brand-2);border-color:var(--brand-2)}
/* S-130: tactile press feedback on the login submit (the wholesale-wall / modal /
   /ingresar conversion button). `:hover` never fires on touch; darken on press,
   mirroring the CTA press family (S-126 card · S-127 buy · S-128 checkout). */
.slogin .go:active{filter:brightness(.9)}
.slogin .go:disabled{opacity:.55;cursor:not-allowed}
/* biometric accelerator — the device holds a WebAuthn credential: one-tap
   sign-in ABOVE the email form (it skips the magic-link email round-trip).
   Renders on the FIRST client frame from the localStorage device hint (no
   round-trip pop-in), and says WHO it signs in (the email is exempt from the
   CTA uppercase — an uppercased email reads broken). */
.slogin .biobtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0;min-width:0}
.slogin .biobtn svg{flex:0 0 auto}
.slogin .biobtn .bwrap{display:flex;align-items:baseline;gap:6px;min-width:0}
.slogin .biobtn .bmail{text-transform:none;letter-spacing:.02em;font-size:.8125rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.slogin .linkbtn.bforget{display:block;margin:10px auto 0;color:var(--muted);text-decoration:none;font-size:.75rem;padding:8px 12px}
.slogin .linkbtn.bforget:hover{color:var(--ink);text-decoration:underline}
.slogin .err{color:var(--brand-2);font-size:.84375rem;margin:2px 0 0}
.slogin .back{display:block;width:max-content;margin:26px auto 0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .15s}
.slogin .back:hover{color:var(--ink)}
.slogin .sentmsg{color:var(--muted);font-size:.9375rem;line-height:1.65;margin:0 auto 22px;max-width:380px}
.slogin .sentmsg b{color:var(--ink);font-weight:600}
.slogin .linkbtn{display:inline-block;background:none;border:0;cursor:pointer;color:var(--brand-1);font:inherit;font-size:.875rem;
  text-decoration:underline;text-underline-offset:3px;padding:0}
.slogin .linkbtn:hover{color:var(--ink)}
@media(max-width:520px){.slogin input,.slogin .go{height:50px}}
/* tap-law: 'Volver a la tienda' is a standalone BLOCK nav link (display:block,
   alone on its line — no inline-prose exception), at .75rem it was a 15px-tall
   target on every auth surface (login/register/sent, all 4 variants share
   `.slogin .back`). Pad the hit area to the touch minimum and pull the top margin
   back by the same amount so the 26px gap above is unchanged; touch only, desktop
   keeps the compact link (mouse precision). */
@media(pointer:coarse),(max-width:760px){
  .slogin .back{padding:15px 12px;margin:11px auto 0}
  .slogin .linkbtn.bforget{padding:14px 12px;margin:4px auto 0}
}

.slogin .sdiv{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--muted);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.slogin .sdiv::before,.slogin .sdiv::after{content:'';flex:1;height:1px;background:var(--hair)}
.slogin .sbtns{display:flex;flex-direction:column;gap:10px}
.slogin .sbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border:1px solid var(--hair);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;font-size:.9375rem;
  font-weight:500;transition:border-color .15s,background .15s}
.slogin .sbtn:hover{border-color:var(--muted);background:var(--bg)}
.slogin .sbtn svg{flex:0 0 auto}

.slogin-modal{position:fixed;inset:0;z-index:230;display:grid;place-items:center;padding:20px}
.slogin-modal .mscrim{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:sm-fade .2s ease}
.slogin-modal .mcard{position:relative;width:100%;max-width:430px;background:var(--bg);color:var(--ink);
  border:1px solid var(--hair);border-radius:calc(var(--radius)*1.4 + 6px);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  padding:clamp(26px,4vw,38px) clamp(20px,3vw,32px);text-align:center;animation:sm-rise .24s cubic-bezier(.3,.7,.2,1)}
.slogin-modal .mx{position:absolute;top:10px;right:10px;width:38px;height:38px;background:none;border:0;font-size:1.25rem;
  line-height:1;cursor:pointer;color:var(--muted)}
.slogin-modal .mx:hover{color:var(--ink)}
.slogin-modal .brand{margin:0 0 22px}
@keyframes sm-fade{from{opacity:0}}
@keyframes sm-rise{from{opacity:0;transform:translateY(14px)}}
@media(max-width:520px){
  .slogin-modal{place-items:end stretch;padding:0}
  .slogin-modal .mcard{max-width:none;border-radius:calc(var(--radius)*1.4 + 6px) calc(var(--radius)*1.4 + 6px) 0 0;
    border-bottom:0;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.slogin-modal .mscrim,.slogin-modal .mcard{animation:none}}

.bio-sheet{position:fixed;inset:0;z-index:235;display:grid;place-items:center;padding:20px}
.bio-sheet .bs-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:sm-fade .2s ease}
.bio-sheet .bs-card{position:relative;width:100%;max-width:400px;background:var(--bg);color:var(--ink);
  border:1px solid var(--hair);border-radius:calc(var(--radius)*1.4 + 6px);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  padding:clamp(26px,4vw,36px) clamp(20px,3vw,30px) 26px;text-align:center;animation:sm-rise .24s cubic-bezier(.3,.7,.2,1)}
.bio-sheet .bs-ic{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand-1) 12%,transparent);color:var(--brand-1)}
.bio-sheet h2{font-family:var(--f-display);font-weight:400;font-size:1.375rem;margin:0 0 10px}
.bio-sheet p{color:var(--muted);font-size:.9375rem;line-height:1.6;margin:0 0 24px}
.bio-sheet .bs-cta{width:100%;min-height:50px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);
  border-radius:var(--radius);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.2s}
.bio-sheet .bs-cta:hover{background:var(--brand-2);border-color:var(--brand-2)}
.bio-sheet .bs-cta:active{filter:brightness(.9)}
.bio-sheet .bs-later{display:block;margin:16px auto 0;background:none;border:0;cursor:pointer;color:var(--muted);
  font:inherit;font-size:.8125rem;padding:12px;min-height:44px}
.bio-sheet .bs-later:hover{color:var(--ink)}
.bio-sheet .bs-err{color:var(--brand-2);font-size:.84375rem;margin:14px 0 0}
@media(max-width:520px){
  .bio-sheet{place-items:end stretch;padding:0}
  .bio-sheet .bs-card{max-width:none;border-radius:calc(var(--radius)*1.4 + 6px) calc(var(--radius)*1.4 + 6px) 0 0;
    border-bottom:0;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.bio-sheet .bs-scrim,.bio-sheet .bs-card{animation:none}}

.sacct .bio-desc{color:var(--muted);font-size:.875rem;line-height:1.6;margin:0 0 14px;max-width:480px}
.sacct .bio-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sacct .bio-status{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.875rem}
.sacct .bio-status.on{color:var(--brand-1)}
.sacct .bio-btn{min-height:44px;padding:0 18px;background:none;border:1px solid var(--hair);border-radius:var(--radius);
  color:var(--ink);font:inherit;font-size:.8125rem;cursor:pointer;transition:.15s}
.sacct .bio-btn:hover{border-color:var(--ink)}
.sacct .bio-btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sacct .bio-btn.pri:hover{background:var(--brand-2);border-color:var(--brand-2)}
.sacct .bio-btn:disabled{opacity:.55;cursor:not-allowed}
.sacct .bio-err{color:var(--brand-2);font-size:.84375rem;margin:10px 0 0}

/* .register = the register BODY wrapper inside any auth variant's chrome; the
   card hosting it widens via :has (the form is two-column) */
.slogin .card:has(.register),.slogin .inbody:has(.register){max-width:540px}
/* the fields are nested in a wrapper div (not direct flex children of the form),
   so force full-width inputs + block labels — else they auto-size + sit inline */
.slogin .register form label{display:block}
.slogin .register form input,.slogin .register form select{width:100%;display:block;box-sizing:border-box}
.slogin .register form .rrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.slogin .register form .rrow > div,.slogin .register form > div{min-width:0}
.slogin .register select{height:52px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);color:inherit;
  padding:0 14px;font:inherit;font-size:.9375rem;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.slogin .register select:focus{outline:none;border-color:var(--ink)}
.slogin .register select.bad{border-color:var(--brand-2)}
.slogin .register .qopts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.slogin .register .qopt{display:flex;align-items:center;gap:9px;font-size:.9375rem;color:inherit;cursor:pointer;font-weight:400}
.slogin .register .qopt input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--ink);cursor:pointer}
.slogin .register .qopt.bad{color:var(--brand-2)}
/* fiscal-id inline status note (verificando / válido / no figura / …) */
.slogin .register .fnote{font-size:.8125rem;margin:6px 0 0;display:flex;align-items:center;gap:5px;color:var(--muted);line-height:1.3}
.slogin .register .fnote.ok{color:#1a7f37}
.slogin .register .fnote.err{color:var(--alert,#d64545)}
.slogin .register .fnote.warn{color:#9a6700}
.slogin .register .fnote svg{flex:0 0 auto}
.slogin .altln{display:block;text-align:center;font-size:.84375rem;color:var(--muted);margin:20px 0 0}
.slogin .altln a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.slogin .done-ic{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-2);color:var(--on-brand);font-size:1.875rem}
@media(max-width:520px){.slogin .register form .rrow{grid-template-columns:1fr}}

/* .sphone = the whole bordered field (country button + input), looks like a
   register text input: 52px tall, 1px var(--hair), var(--radius). */
.sphone{position:relative;display:flex;align-items:stretch;height:52px;
  border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);
  box-sizing:border-box;font:inherit}
.sphone:focus-within{border-color:var(--ink)}
.sphone.bad{border-color:var(--brand-2)}
/* NOTE the !important + high specificity: the store/register theme styles bare
   `.slogin .register form input` (border/bg/width:100%) which would otherwise turn
   the inner field into a nested box and break the flex row. These win over it. */
.sphone .sphone-cc{display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;
  border:0 !important;border-right:1px solid var(--hair) !important;background:transparent !important;
  color:inherit;font:inherit;font-size:.9375rem;height:auto;cursor:pointer;white-space:nowrap}
.sphone .sphone-cc:focus{outline:none}
.sphone .sphone-cc .fl{font-size:1.125rem;line-height:1}
.sphone .sphone-cc .cd{color:var(--muted)}
.sphone .sphone-cc svg{color:var(--muted);margin-left:-2px}
.sphone .sphone-in{flex:1 1 auto;min-width:0;width:auto !important;height:auto;
  border:0 !important;background:transparent !important;box-shadow:none !important;
  color:inherit;font:inherit;font-size:.9375rem;padding:0 12px;margin:0}
.sphone .sphone-in:focus{outline:none;border:0 !important}
.sphone-ok{display:flex;align-items:center;padding-right:12px;color:#1a9c58}
/* dropdown */
.sphone-back{position:fixed;inset:0;z-index:40;background:transparent}
.sphone-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:41;width:min(340px,86vw);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.14);overflow:hidden}
.sphone-srch{position:relative;padding:10px;border-bottom:1px solid var(--hair)}
.sphone-srch svg{position:absolute;top:50%;left:22px;transform:translateY(-50%);color:var(--muted);z-index:1;pointer-events:none}
/* !important: beats the theme's `.slogin .register form input` border+padding that
   otherwise double-boxes this search field and shoves the placeholder under the icon. */
.sphone .sphone-srch input{width:100%;box-sizing:border-box;height:40px;padding:0 12px 0 38px !important;
  border:1px solid var(--hair) !important;border-radius:var(--radius);background:var(--bg) !important;
  color:inherit;font:inherit;font-size:.9375rem;display:block}
.sphone .sphone-srch input:focus{outline:none;border-color:var(--ink) !important}
.sphone-list{max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sphone-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  border:0;background:transparent;color:inherit;font:inherit;font-size:.9375rem;
  text-align:left;cursor:pointer}
.sphone-item:hover,.sphone-item:focus,.sphone-item.hi{background:var(--bg);outline:none}
.sphone-item.sel{font-weight:600}
.sphone-item .fl{font-size:1.125rem;line-height:1;flex:0 0 auto}
.sphone-item .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sphone-item .cd{color:var(--muted)}
.sphone-item .ck{color:var(--ink);flex:0 0 auto}
.sphone-empty{padding:16px 12px;color:var(--muted);font-size:.9375rem;text-align:center}

.co-done{max-width:520px;margin:0 auto;text-align:center;padding:clamp(28px,5vw,56px) 20px}
.co-done .co-check{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand-1) 14%,transparent);color:var(--brand-1);
  /* S-154 (S-152 family): the SUCCESS checkmark must be deterministically visible.
     It previously relied on the co-pop entrance keyframe (both-fill) reaching its
     `to` frame; on this SSR-rendered confirmation page a hydrate where the entrance
     did not run left the both-fill pinned at `from` (opacity:0;scale(.5)) = an
     INVISIBLE success mark on the order-placed trust moment. The reduced-motion
     path already proves the base renders bare. Static visible state, no keyframe. */
  opacity:1;transform:none}
.co-done .co-eyebrow{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-1);margin:0 0 8px;font-weight:600}
.co-done h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.625rem,4vw,2.25rem);margin:0 0 14px;line-height:1.1}
.co-done .co-msg{color:var(--muted);font-size:.9375rem;line-height:1.65;margin:0 auto 30px;max-width:400px}
.co-done .co-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.co-done .co-save{font-family:var(--f-serif);font-size:1.0625rem;color:var(--deal-ink);margin:-14px 0 26px;
  padding-bottom:6px;position:relative;display:inline-block}
.co-done .co-save::after{content:'';position:absolute;left:10%;right:10%;bottom:0;height:1px;
  background:var(--deal-accent);animation:co-underline .9s var(--deal-ease) .3s both}
@keyframes co-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.co-done .co-save::after{animation:none}}
.co-done .co-actions a{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 30px;
  border-radius:var(--radius);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:.2s}
.co-done .co-primary{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.co-done .co-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.co-done .co-secondary{background:none;color:var(--ink);border:1px solid var(--hair)}
.co-done .co-secondary:hover{border-color:var(--ink)}
@media(max-width:520px){.co-done .co-actions a{width:100%}}
.co-blocks{border-top:1px solid var(--hair);margin-top:clamp(16px,4vw,40px)}

.cart-empty .ce-deals{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 4px}
.cart-empty .ce-chip{font:inherit;font-size:.71875rem;font-weight:600;color:var(--deal-ink);background:var(--deal-bg);
  border:1px solid var(--deal-line);border-radius:999px;padding:7px 13px;cursor:pointer}
.cart-empty .ce-all{font-size:.6875rem;font-weight:600;color:var(--muted);text-decoration:none;align-self:center;padding:7px 4px}
.cart-empty .ce-all:hover{color:var(--deal-ink)}
.cart-empty{text-align:center;padding:clamp(30px,5vw,56px) 8px}
.cart-empty .ce-ic{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--hair);color:var(--muted)}
.cart-empty .ce-title{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.25rem,3vw,1.625rem);margin:0 0 8px;color:var(--ink)}
.cart-empty .ce-sub{color:var(--muted);font-size:.875rem;line-height:1.6;margin:0 auto 24px;max-width:340px}
.cart-empty .ce-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;
  background:var(--ink);color:var(--bg);text-decoration:none;border-radius:var(--radius);
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:background .2s}
.cart-empty .ce-cta:hover{background:var(--brand-2)}
.cart-empty .store-rv{margin-top:34px;text-align:left}
.cart-empty .store-rv h2{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cart-loading{padding:8px 0}
.cart-loading .cl-row{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--hair);align-items:start}
.cart-loading .cl-txt{display:flex;flex-direction:column}
/* tap-law (S-160): the empty-cart benefit chips OPEN the deal sheet (dp/open-sheet!)
   and 'Ver todos los beneficios' navigates to /beneficios — real controls, but
   padding-sized to 30px / 27px. On touch they must clear the 44px minimum like the
   sibling .sdeals .chip. Centre the label in a 44px box; desktop keeps the compact
   pill (mouse precision, S-38). */
@media(pointer:coarse),(max-width:760px){
  .cart-empty .ce-chip,.cart-empty .ce-all{min-height:44px;display:inline-flex;align-items:center}
}

.estate{text-align:center;padding:clamp(28px,5vw,52px) 12px;max-width:420px;margin:0 auto}
.estate .es-ic{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--hair);color:var(--muted)}
.estate .es-title{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.1875rem,2.6vw,1.5rem);margin:0 0 8px;color:var(--ink)}
.estate .es-sub{color:var(--muted);font-size:.875rem;line-height:1.6;margin:0 0 22px}
.estate .es-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 30px;
  background:var(--ink);color:var(--bg);text-decoration:none;border:0;border-radius:var(--radius);cursor:pointer;font-family:inherit;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:background .2s}
.estate .es-cta:hover{background:var(--brand-2)}

.sk{background:linear-gradient(100deg,var(--hair) 25%,var(--surface) 50%,var(--hair) 75%);background-size:200% 100%;
  animation:sk-shimmer 1.25s linear infinite;border-radius:6px;display:block}
.sk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes sk-shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* Pre-load opacity only when #store-root has .img-fade (JS-added) → no-JS /
   crawlers see images immediately. Reduced-motion never adds the class.
   HARD CAP: the imgreveal animation forces opacity 1 at .8s even if load never
   fired — a slow catalog image must degrade to a plain progressive load, never
   an invisible page. Without it, every not-yet-complete image held opacity:0
   until ITS OWN load event, so image-heavy pages LOOKED blank/slow while the
   network trickled (user report 2026-07-11: 'no aparece la página hasta que
   cargan las imágenes'). imgok cancels the animation and hands back to the
   .5s transition for the premium fade on fast loads. */
#store-root.img-fade img{opacity:0;transition:opacity .5s ease;animation:imgreveal .3s ease .8s forwards}
#store-root.img-fade img.imgok{opacity:1;animation:none}
@keyframes imgreveal{to{opacity:1}}
/* broken-image fallback: the neutral placeholder sits small on a soft wash
   instead of stretching edge-to-edge (margin lives in the SVG viewBox) */
.store-root img.imgbroken{object-fit:contain;background:color-mix(in srgb,var(--hair) 55%,var(--surface));opacity:1}

.store-root .notify-stock{margin-top:14px;border:1px solid var(--hair);border-radius:var(--radius);padding:16px 18px;background:var(--surface)}
.store-root .notify-stock .ns-msg{font-size:.84375rem;color:var(--muted);line-height:1.5;margin:0 0 12px}
.store-root .notify-stock .ns-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;
  background:var(--ink);color:var(--bg);border:0;border-radius:var(--radius);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:background .2s}
.store-root .notify-stock .ns-cta:hover{background:var(--brand-2)}
.store-root .notify-stock .ns-cta:disabled{opacity:.6;cursor:not-allowed}
.store-root .notify-stock .ns-ok{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:.875rem;margin:0}
.store-root .notify-stock .ns-ok svg{color:var(--brand-1);flex:0 0 auto}
.store-root .notify-stock .ns-login{display:inline-block;margin-top:4px;color:var(--link,var(--brand-1));font-size:.8125rem;text-decoration:underline;text-underline-offset:3px}

.sfoot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:0 auto 4px;max-width:760px;line-height:1.7}
.sfoot-links a{color:inherit;text-decoration:none;font-size:.78125rem;letter-spacing:.04em;opacity:.72;transition:opacity .15s}
.sfoot-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

.arlegal{background:var(--surface);border-top:1px solid var(--hair);color:var(--muted);font-size:.75rem;line-height:1.5}
.arlegal-in{max-width:1440px;margin:0 auto;padding:14px clamp(18px,4vw,40px);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.arlegal-txt{margin:0;flex:1 1 240px;min-width:0}
.arlegal-txt a,.arlegal-arr{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.arlegal-txt a:hover,.arlegal-arr:hover{color:var(--brand-2)}
.arlegal-arr{flex:0 0 auto;font-weight:600;white-space:nowrap}
.arlegal-seller{flex-basis:100%;order:99}
.arlegal-afip{flex:0 0 auto;display:inline-flex}
.arlegal-afip img{height:52px;width:auto;display:block;border-radius:2px}
@media(max-width:640px){.arlegal-in{gap:12px 18px}.arlegal-txt{flex-basis:100%}}

.arrep{max-width:560px;margin:0 auto;padding:clamp(28px,5vw,56px) 20px}
.arrep h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,4vw,2rem);margin:0 0 12px}
.arrep .arrep-policy{color:var(--muted);font-size:.9375rem;line-height:1.65;margin:0 0 28px;
  padding:14px 16px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius)}
.arrep form label{display:block;font-size:.8125rem;margin:0 0 6px;color:var(--ink)}
.arrep form .fld{margin:0 0 16px}
.arrep form input,.arrep form textarea{width:100%;box-sizing:border-box;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius);color:inherit;padding:13px 14px;font:inherit;font-size:.9375rem}
.arrep form textarea{min-height:120px;resize:vertical}
.arrep form input:focus,.arrep form textarea:focus{outline:none;border-color:var(--ink)}
.arrep form input.bad,.arrep form textarea.bad{border-color:var(--brand-2)}
.arrep .err{color:var(--brand-2);font-size:.8125rem;margin:0 0 12px}
.arrep .go{display:block;width:100%;height:52px;background:var(--ink);color:var(--bg);border:0;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius);margin-top:6px}
.arrep .go:hover{background:var(--brand-2);color:var(--on-brand)}
.arrep .go:disabled{opacity:.6;cursor:default}
.arrep-done{text-align:center;padding:clamp(24px,5vw,48px) 0}
.arrep-done .done-ic{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-2);color:var(--on-brand);font-size:1.875rem}
.arrep-done h1{margin:0 0 12px}
.arrep-done p{color:var(--muted);line-height:1.6;margin:0 auto 26px;max-width:400px}
.arrep-done .go{display:inline-flex;align-items:center;justify-content:center;width:auto;padding:0 30px;
  text-decoration:none;line-height:52px}

.mkit{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,44px) 20px 140px}
.mkit .mk-head{margin:0 0 8px;display:flex;align-items:center;gap:10px}
.mkit h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,4vw,2.1rem);margin:0}
.mkit .mk-intro{color:var(--muted);font-size:.9375rem;line-height:1.6;margin:0 0 22px;max-width:640px}
.mkit .mk-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.mkit .mk-bar input[type=search]{flex:1 1 220px;min-width:0;height:44px;padding:0 14px;font:inherit;font-size:.9375rem;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);color:inherit}
.mkit .mk-bar input:focus{outline:none;border-color:var(--ink)}
.mkit .mk-bar select{height:44px;max-width:46vw;padding:0 10px;font:inherit;font-size:.875rem;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius);color:inherit}
.mkit .mk-selall{height:44px;padding:0 14px;font:inherit;font-size:.8125rem;cursor:pointer;white-space:nowrap;
  background:none;border:1px solid var(--hair);border-radius:var(--radius);color:var(--ink)}
.mkit .mk-selall:hover{border-color:var(--ink)}
.mkit .mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media(max-width:560px){.mkit .mk-grid{grid-template-columns:repeat(2,1fr)}}
.mkit .mk-card{position:relative;text-align:left;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--radius);padding:8px;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s}
.mkit .mk-card:hover{border-color:var(--ink)}
.mkit .mk-card.on{border-color:var(--brand-2);box-shadow:0 0 0 1px var(--brand-2)}
.mkit .mk-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--radius) - 4px);background:var(--bg);display:block}
.mkit .mk-card .mk-noimg{width:100%;aspect-ratio:1;border-radius:calc(var(--radius) - 4px);background:var(--bg);
  display:grid;place-items:center;color:var(--muted)}
.mkit .mk-card .mk-nm{font-size:.8125rem;font-weight:500;margin:8px 0 2px;line-height:1.35;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em}
.mkit .mk-card .mk-cd{font-size:.6875rem;color:var(--muted);margin:0}
.mkit .mk-card .mk-pr{font-size:.8125rem;font-weight:600;margin:4px 0 0}
.mkit .mk-card .mk-ck{position:absolute;top:14px;left:14px;width:26px;height:26px;border-radius:8px;
  background:var(--bg);border:1px solid var(--hair);display:grid;place-items:center;color:transparent;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.mkit .mk-card.on .mk-ck{background:var(--brand-2);color:var(--on-brand);border-color:var(--brand-2)}
.mkit .mk-card .mk-sh{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;border:0;
  background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.mkit .mk-card:hover .mk-sh{opacity:1}
@media(pointer:coarse){.mkit .mk-card .mk-sh{opacity:.92;width:40px;height:40px}}
.mkit .mk-more{display:block;margin:22px auto 0;height:46px;padding:0 26px;font:inherit;font-size:.8125rem;cursor:pointer;
  background:none;border:1px solid var(--hair);border-radius:var(--radius);color:var(--ink)}
.mkit .mk-empty{color:var(--muted);text-align:center;padding:48px 0}
.mk-dock{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--bg);border-top:1px solid var(--hair);
  box-shadow:0 -8px 30px rgba(0,0,0,.08)}
.mk-dock .mk-dk-in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mk-dock .mk-count{font-size:.8125rem;color:var(--muted);flex:1 1 auto;min-width:120px}
.mk-dock .mk-count b{color:var(--ink)}
.mk-dock .mk-clear{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;font-size:.75rem;
  text-decoration:underline;padding:6px}
.mk-dock .mk-act{height:46px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.8125rem;
  font-weight:500;cursor:pointer;border-radius:var(--radius);border:1px solid var(--hair);background:var(--surface);color:var(--ink)}
.mk-dock .mk-act:hover{border-color:var(--ink)}
.mk-dock .mk-act.pri{background:var(--brand-2);border-color:var(--brand-2);color:var(--on-brand)}
.mk-dock .mk-act.pri:hover{filter:brightness(1.06)}
@media(max-width:560px){.mk-dock .mk-act{flex:1 1 calc(50% - 5px);justify-content:center;padding:0 8px}}
.mk-busy{position:fixed;inset:0;z-index:310;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ink) 40%,transparent);padding:20px}
.mk-busy .mk-bx{width:min(380px,100%);background:var(--bg);border-radius:calc(var(--radius)*1.4);padding:26px;text-align:center;
  border:1px solid var(--hair)}
.mk-busy h3{margin:0 0 6px;font-size:1rem}
.mk-busy p{margin:0 0 14px;font-size:.8125rem;color:var(--muted)}
.mk-busy .mk-pgw{height:8px;border-radius:99px;background:var(--surface);overflow:hidden;margin:0 0 6px}
.mk-busy .mk-pg{height:100%;background:var(--brand-2);border-radius:99px;transition:width .2s}
.mk-busy .mk-cancel,.mk-busy .mk-go{height:44px;padding:0 22px;font:inherit;font-size:.8125rem;cursor:pointer;
  border-radius:var(--radius);margin-top:10px}
.mk-busy .mk-go{border:0;background:var(--brand-2);color:var(--on-brand);margin-right:10px}
.mk-busy .mk-cancel{border:1px solid var(--hair);background:none;color:var(--ink)}
.mkit .mk-err{background:color-mix(in srgb,var(--brand-2) 10%,var(--surface));border:1px solid var(--brand-2);
  color:var(--ink);border-radius:var(--radius);padding:12px 14px;font-size:.8125rem;margin:0 0 14px}
.mkit .mk-wall{max-width:460px;margin:40px auto;text-align:center}
.mkit .mk-wall .mk-wic{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--hair)}
.mkit .mk-wall p{color:var(--muted);line-height:1.6;margin:0 0 22px}
.mkit .mk-wall .go{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 30px;
  background:var(--ink);color:var(--bg);border-radius:var(--radius);text-decoration:none;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase}
.kit-pdp{margin:18px 0 0;border:1px dashed var(--hair);border-radius:var(--radius);padding:12px 14px;
  display:flex;align-items:center;gap:12px;font-size:.8125rem}
.kit-pdp .kp-tx{flex:1;color:var(--muted)}
.kit-pdp a{color:var(--ink);font-weight:600;text-decoration:underline;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center}
.kit-nudge{margin:20px 0 0;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  padding:14px 16px;display:flex;align-items:center;gap:12px}
.kit-nudge .kn-tx{flex:1;font-size:.8125rem;color:var(--muted)}
.kit-nudge a{color:var(--ink);font-weight:600;font-size:.8125rem;text-decoration:underline;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center}

.ctform{max-width:600px;margin:0 auto;padding:clamp(24px,5vw,48px) 20px}
.ctform-banner{width:100%;height:auto;max-height:220px;object-fit:cover;border-radius:var(--radius);margin:0 0 22px;display:block}
.ctform h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,4vw,2rem);margin:0 0 8px}
.ctform .ctform-sub{color:var(--muted);font-size:.9375rem;line-height:1.6;margin:0 0 26px}
.ctform form label{display:block;font-size:.8125rem;margin:0 0 6px;color:var(--ink)}
.ctform form .fld{margin:0 0 16px}
.ctform form input,.ctform form textarea{width:100%;box-sizing:border-box;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius);color:inherit;padding:13px 14px;font:inherit;font-size:.9375rem}
.ctform form textarea{min-height:120px;resize:vertical}
.ctform form input:focus,.ctform form textarea:focus{outline:none;border-color:var(--ink)}
.ctform form input.bad,.ctform form textarea.bad{border-color:var(--brand-2)}
.ctform .qopts{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px}
.ctform .qopt{display:flex;align-items:center;gap:9px;font-size:.9375rem;color:inherit;cursor:pointer;font-weight:400}
.ctform .qopt input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--ink);cursor:pointer}
.ctform .qopt.bad{color:var(--brand-2)}
.ctform .err{color:var(--brand-2);font-size:.8125rem;margin:0 0 12px}
.ctform .go{display:block;width:100%;height:52px;background:var(--ink);color:var(--bg);border:0;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius);margin-top:6px}
.ctform .go:hover{background:var(--brand-2);color:var(--on-brand)}
.ctform .go:disabled{opacity:.6;cursor:default}
.ctform-done{text-align:center;padding:clamp(24px,5vw,48px) 0}
.ctform-done .done-ic{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-2);color:var(--on-brand);font-size:1.875rem}
.ctform-done h1{margin:0 0 12px}
.ctform-done p{color:var(--muted);line-height:1.6;margin:0 auto 26px;max-width:400px}
.ctform-done .go{display:inline-flex;align-items:center;justify-content:center;width:auto;padding:0 30px;text-decoration:none;line-height:52px}
.constr{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;color:var(--ink);padding:clamp(28px,6vw,72px) clamp(20px,5vw,56px);overflow:hidden;text-align:center}.constr-in{position:relative;z-index:2;max-width:560px;width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.4vw,30px);animation:constr-in .6s cubic-bezier(.22,.61,.36,1) both}@keyframes constr-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.constr-logo{display:flex;align-items:center;justify-content:center;margin-bottom:2px}.constr-logo .blogo{height:clamp(38px,7vw,64px);max-width:min(280px,70vw)}.constr-logo{font-family:var(--f-display);font-size:clamp(1.4rem,4vw,2rem);font-weight:600;letter-spacing:.01em}.constr-h{font-family:var(--f-display);font-weight:400;margin:0;font-size:clamp(2rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.015em;text-wrap:balance}.constr-msg{margin:0;color:var(--muted);line-height:1.6;max-width:44ch;font-size:clamp(1rem,2.2vw,1.15rem)}.constr-cd{display:flex;gap:clamp(10px,2.4vw,22px);flex-wrap:wrap;justify-content:center}.constr-cd-u{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:56px}.constr-cd-n{font-family:var(--f-display);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;font-size:clamp(1.9rem,5.5vw,3rem);color:var(--ink)}.constr-cd-l{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.constr-notify{width:100%;max-width:400px;display:flex;flex-direction:column;gap:10px}.constr-notify-l{margin:0;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.constr-nl{display:flex;gap:8px;width:100%}.constr-nl input{flex:1;min-width:0;padding:13px 16px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:.9375rem}.constr-nl input::placeholder{color:var(--muted)}.constr-nl input:focus{outline:none;border-color:var(--brand-2)}.constr-nl button{flex:0 0 auto;padding:13px 22px;border:0;cursor:pointer;background:var(--brand-2);color:var(--on-brand);border-radius:var(--radius);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:filter .18s ease}.constr-nl button:hover{filter:brightness(1.08)}.constr-nl button:disabled{opacity:.6;cursor:default}@media(max-width:460px){.constr-nl{flex-direction:column}}.constr-social{display:flex;gap:14px;justify-content:center;margin-top:2px}.constr-social a{color:var(--ink);opacity:.8;transition:opacity .18s ease}.constr-social a:hover{opacity:1}.constr-image{background-size:cover;background-position:center;color:#fff}.constr-image.no-img{background:var(--brand-2)}.constr-image .constr-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.62))}.constr-image .constr-h,.constr-image .constr-cd-n{color:#fff}.constr-image .constr-msg,.constr-image .constr-cd-l,.constr-image .constr-notify-l{color:rgba(255,255,255,.82)}.constr-image .constr-social a{color:#fff}.constr-image .constr-nl input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}.constr-image .constr-nl input::placeholder{color:rgba(255,255,255,.7)}.constr-split{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;text-align:left}.constr-split .constr-col{display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vw,80px) clamp(24px,5vw,64px)}.constr-split .constr-in{align-items:flex-start;text-align:left;margin:0}.constr-split .constr-h{text-align:left}.constr-split .constr-cd,.constr-split .constr-social{justify-content:flex-start}.constr-split .constr-panel{position:relative;background:color-mix(in srgb,var(--brand-2) 14%,var(--surface));background-size:cover;background-position:center;min-height:100%;display:flex;align-items:center;justify-content:center}.constr-split .constr-panel-mark{font-family:var(--f-display);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;color:var(--ink);opacity:.7;padding:24px;text-align:center}.constr-split .constr-panel-mark .blogo{height:clamp(56px,9vw,110px);opacity:.85}@media(max-width:820px){.constr-split{grid-template-columns:1fr}.constr-split .constr-panel{min-height:38vh;order:-1}.constr-split .constr-col{padding:clamp(32px,8vw,56px) 24px}.constr-split .constr-in,.constr-split .constr-h{text-align:center;align-items:center}.constr-split .constr-cd,.constr-split .constr-social{justify-content:center}}
.md{color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:24px}
.md>*:first-child{margin-top:0}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{font-family:var(--f-display);font-weight:400;padding:2px 0}
.md h1{font-size:42px;line-height:50px;margin:32px 0 0}
.md h2{font-size:36px;line-height:44px;margin:28px 0 0}
.md h3{font-size:32px;line-height:40px;margin:24px 0 0}
.md h4{font-size:28px;line-height:36px;margin:20px 0 0}
.md h5{font-size:24px;line-height:32px;margin:16px 0 0}
.md h6{font-size:18px;line-height:28px;font-weight:700;margin:16px 0 0}
.md p{font-size:16px;line-height:24px;padding:4px 0;margin:0}
.md a{color:var(--brand-2);text-decoration:underline;text-underline-offset:2px}
.md a:hover{opacity:.8}
.md ul,.md ol{margin:0;padding-left:1.5em}.md li{margin:.2em 0;font-size:16px;line-height:24px}
.md strong{font-weight:700}.md em{font-style:italic}
.md blockquote{position:relative;margin:4px 0;padding-left:40px;color:var(--muted)}
.md blockquote:before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:4px;background:var(--hair);border-radius:100px}
.md code{background:var(--surface);border:1px solid var(--hair);border-radius:4px;padding:0 2px;font-size:87.5%}
.md pre{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:14px;overflow:auto;margin:8px 0}
.md pre code{background:none;border:0;padding:0}
.md hr{border:0;border-top:1px solid var(--hair);margin:20px 0}
.md .md-img{max-width:100%;height:auto;border-radius:var(--radius);margin:4px 0;display:block}
.md .md-table{border-collapse:collapse;width:100%;margin:8px 0;font-size:.9em}
.md .md-table td{border:1px solid var(--hair);padding:8px 10px}
/* checkout notice (aviso-checkout) — a CALM collapsed disclosure atop the
   checkout. One quiet line; the merchant's markdown opens on demand with its
   typography hard-capped so shouty headings can never take over the page. */
.co-notice{margin:0 auto 18px;max-width:var(--content-w,1200px);background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius)}
.co-notice-t{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;background:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-align:left}
.co-notice-t .fe{font-size:14px;color:var(--muted);flex:0 0 auto}
.co-notice-chev{margin-left:auto;transition:transform .15s}
.co-notice.open .co-notice-chev{transform:rotate(180deg)}
.co-notice-b{padding:0 14px 12px;color:var(--muted)}
.co-notice-b .md h1,.co-notice-b .md h2,.co-notice-b .md h3,.co-notice-b .md h4,.co-notice-b .md h5,.co-notice-b .md h6{font-family:inherit;font-size:13px;line-height:20px;font-weight:700;letter-spacing:0;margin:10px 0 2px;color:var(--ink)}
.co-notice-b .md p{font-size:13px;line-height:20px;padding:2px 0}
.co-notice-b .md li{font-size:13px;line-height:20px}
.stmap{width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hair);background:var(--surface)}
.stmap img{max-width:none}