@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],.sk-ed-an,.pdp-mbar,.cobar,.stt,.sdealsw,.stchat-fab,.stchat-panel,.cin-search,.sacct .reo,.sacct .rc-reo,.sacct .cp-reo,.co-actions,.kit-nudge,.sm-drawer,.sm-scrim,.search-ov,.slogin-modal,.edp,.sacct .back,.od-print,.arlegal,.scart,.lcart,.ecart,.scbs,.opcart,.sscart,.wl-ov,.dsheet,.store-lb,.qrsc,.bio-sheet,.snotice,.cookiebar,.spa-nav-ovl,.vsb,.vsbtop,.vsb-scrim{display:none !important}.store-root{padding-left:0 !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}
/* S-392/S-211 slot law at the ROOT: the heart OWNS top-right. A merchant
   picking badgePos=tr on a wishlist-enabled card covered the heart (32×20px,
   its tap STOLEN — measured). Conflict-only: the badge yields below the
   heart's slot (8+34+8). tl/bl and heartless cards untouched; list_row's
   S-211 bottom placement outranks by source order. */
.ck[data-badge=tr]:has(.wl-heart) .ck-ob{top:50px}
.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) */
/* the category eyebrow is a SINGLE-LINE label (SOTA product-grid convention): a
   long category name ('IMPORTADOS LIMITED EDITION!', 'CAPSULA AGUS (EDICIÓN
   LIMITADA)') wrapping to 2 lines pushed the name + price DOWN vs a 1-line
   rowmate ('SELECCIÓN'), misaligning the row at narrow widths — the name has a
   height reserve (C-52) but the kicker had none. Clamp to 1 line + ellipsis so
   every eyebrow is one line and rows stay aligned. */
.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;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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}
/* C-5: the price is atomic — never split mid-number even in a narrow card column
   or under an inherited word-break (the .dprice deal line still wraps BETWEEN its
   parts via its own flex-wrap; nowrap only keeps each value whole). */
.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;white-space:nowrap}
.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{width:calc(var(--ck-sw-size,16px) * 1.9);border-radius:999px}
.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). The MAIN catalog grid is `.sc-pg-grid`
   (sections.cljc product-grid); the original rule only named `.grid` and so never
   matched it — list-row rendered 4-up (name/price collapsed, cuotas wrapped one
   char per line). Cover both. Specificity (.store-root .sc-pg-grid + :has(.lrcard)
   = 3 classes) beats `.sc-pg-grid`'s own column rules (1), so no !important. */
.store-root .sc-pg-grid:has(.lrcard),.store-root .grid:has(.lrcard){grid-template-columns:1fr}
@media(min-width:900px){.store-root .sc-pg-grid:has(.lrcard),.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(--ctl-line)}
/* 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 — for the FILL controls only (colour swatches .sw + colour-
   FILL size chips .sz.szfill; selected = .on). A colour FILL can MASQUERADE as
   selection (a black 'Negro' tile reads as chosen just for being dark), so those
   must not lean on the fill/ring alone — stamp an unmistakable corner CHECK
   (theme disc + ink check + hairline ring, legible over ANY fill). NOT on plain
   TEXT size chips (.sz sans .szfill): those already invert on select (bg→--ink /
   editorial gold / underline) — an unmistakable, non-fill cue — and on a compact
   46px 2-digit chip ('35'/'44') the 16px corner disc COLLIDED with the centred
   digit (the top-right of the numeral sat under the check). Top-tier stores mark
   a selected size by inverting the box, never a badge on the number.
   ::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.szfill.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}
/* capitalize (NOT none) so the selected-value echo matches the option chip
   (`.swatches .sz` is capitalize) — the DTO axis token is lowercase, so `none`
   showed 'fondo beige rayas negras' next to the chip's 'Fondo Beige Rayas
   Negras'. `capitalize` still overrides the parent .lbl uppercase. */
.store-root .lbl .lblsel{opacity:.6;font-weight:400;margin-left:8px;text-transform:capitalize;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)}
/* .szfill colour chips ARE the swatch (color-btn-attrs — fill on the button, no
   inner .swdot/.swbig), so the strike above has NO target: a filled OOS chip
   showed ONLY the .55 dim — an ambiguous cue that leans on opacity alone (fails
   colour-blind / low-vision, SOTA says pair colour with a pattern). Slash the
   whole button via its own free ::after (.on::before owns the check), corner-to-
   corner in currentColor (the contrast-computed text colour) so the line reads on
   ANY fill. Stays clickable (pointer-events:none) — selecting reveals notify-stock. */
.store-root .sz.coos.szfill::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + 1px),transparent calc(50% + 1px))}
/* 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(--ctl-line);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(--ctl-line);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(--deal-ink,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(--deal-ink,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(--deal-ink,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)}
/* G-1: the strip is a full-bleed band (.sdealsw) but its CONTENT scroller must
   inset to the SAME page gutter as the sibling catalog chrome right below it —
   .cat-chips (breadcrumbs.cljs) already uses max-width:1440 + 24/14px. .sdeals
   was the lone offender at padding:0 → first chip flush to the edge, last chip
   clipped mid-word at the trailing edge. Match the sibling: centered 1440 column
   + gutter + scroll-padding so scroll/snap aligns to it and nothing clips. */
.sdeals{display:flex;align-items:center;gap:0;max-width:1440px;margin-inline:auto;
  padding-inline:24px;scroll-padding-inline:24px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sdeals::-webkit-scrollbar{display:none}
/* left pad dropped: the scroller's padding-inline is now the leading gutter, so
   the lead aligns to it (keep the right pad as the gap to the first chip divider) */
.sdeals .lead{flex:0 0 auto;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:0 18px 0 0;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)}
@media(max-width:760px){.sdeals{padding-inline:14px;scroll-padding-inline:14px}}
.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 color-mix(in srgb,var(--ink) 55%,transparent);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}
/* S-412: the input's uppercase is for CODES (demo10 → DEMO10) — but it also
   SHOUTED the instructional placeholder (Ingresá tu código → INGRESÁ TU
   CÓDIGO). Prose stays sentence-case; typed codes keep the transform. */
.scoupon input::placeholder{text-transform:none}
/* S-413: both coupon controls were 42px — 2px under the touch floor on a
   mobile-primary drawer surface (the S-404 sweep recorded the number without
   flagging it). Coarse/narrow floors them; desktop keeps the compact 42. */
@media(pointer:coarse),(max-width:760px){
  .scoupon input,.scoupon button{height:auto;min-height:44px}
}
.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(--deal-muted)}
@media(max-width:520px){.dpay{grid-template-columns:1fr 1fr}}
/* installments (cuotas/parcelas): a 'Parcele em' chip row under the selected
   method. Split, not surcharge — total is unchanged (v1). */
.dinst{margin:12px 0 2px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dinst .dinst-lbl{font-size:.6875rem;font-weight:600;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;margin-right:2px}
.dinst .dinst-free{font-size:.625rem;font-weight:600;color:var(--deal-ink);letter-spacing:.03em}
.dinst-ch{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--hair);border-radius:var(--deal-radius);padding:6px 11px;background:var(--surface);
  cursor:pointer;transition:border-color .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.dinst-ch:hover{border-color:var(--brand)}
.dinst-ch:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dinst-ch.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.dinst-ch .dinst-n{font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.dinst-ch .dinst-a{font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dinst-ch.lk{cursor:default;opacity:.5;border-style:dashed}
.dinst-ch.lk:hover{border-color:var(--hair)}
.dinst-ch.lk .dinst-a{font-size:.625rem}

.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:var(--deal-muted);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;flex-wrap:wrap;gap:10px 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;white-space:nowrap;
  color:var(--deal-ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.dpg .bc .acts button{margin-left:auto;color:var(--deal-muted)}
.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.
   C-62: the shared `deal-actions` .acts renders in ALL THREE benefits variants —
   grid (.dpg .bc), editorial (.dpge-main), spotlight (.dpgs-hero) — but S-139
   only covered grid, so editorial/spotlight actions stayed ~13px (measured).
   Cover all three (the feed card's `.sc-fd-card .acts` is a different context). */
@media(pointer:coarse),(max-width:760px){
  .dpg .bc .acts a,.dpg .bc .acts button,
  .dpge-main .acts a,.dpge-main .acts button,
  .dpgs-hero .acts a,.dpgs-hero .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;white-space:nowrap;color:var(--muted);text-decoration:none}
.dlh a:hover{color:var(--ink)}

/* C-5: a monetary value is ATOMIC — it must never split mid-number (user report:
   14.4 / 83). flex-wrap handles wrapping BETWEEN the parts (struck · net · pct);
   white-space:nowrap (inherited by .was/.now/.pct) keeps each value whole even in
   a narrow column or under an inherited word-break. Shared by every price surface. */
.dprice{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;white-space:nowrap}
.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(--deal-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}
/* S-385: the relational deal chips (aria-haspopup dialog openers, 31px pills on
   PDP + category header) — grouped pills GROW on touch (S-42 law: overhang
   pseudos would overlap adjacent wrapped rows' hit zones) */
.dchips .chip{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))}
/* S-415: the tier-upsell nudge is a CLICKABLE money-path row (bumps qty to the
   next tier) at 40px on phones — 4px under the floor */
@media(pointer:coarse),(max-width:760px){.dnudge{min-height:44px}}
.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}
/* reserve the 2-line clamp height so prices align across the rail — a 1-line name
   must still hold the 2nd line's space, else the price rides up (S-20). */
.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;min-height:calc(1.35em * 2)}
.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(--deal-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;flex-wrap:wrap;gap:10px 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;white-space:nowrap;
  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}}
/* S-286: on narrow phones the 3 footer actions no longer fit one row; the
   secondary see-all link (margin-left:auto) then floated ALONE on row 2
   right-of-centre. Drop the auto margin below 400px so a wrapped row aligns left
   (primary actions row 1, the muted see-all link row 2). At 390 the actions fill
   the row so the auto margin was already a no-op there — no change. */
@media(max-width:400px){.dsheet .ftr a{margin-left:0}}

/* 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)}
/* S-257: content-block section kickers + the product-spot PRICE were raw
   var(--brand-2). --brand-2 is a decorative accent, not a foreground token — as
   small text it fails WCAG 1.4.3 on 11/32 DNAs vs --bg (worst 1.57; the product-
   spot kicker AND price measured 1.79:1 on the dark-academia DNA — a near-
   invisible PRICE). Closes the S-245/S-256 raw-brand-2-as-text family across ALL
   the on-block-bg kickers: product-spot (.sc-ps-k + .sc-ps-price), split &
   minimal hero (.sc-hero-sp/mn .sc-hero-k), product-wall (.sc-pw-k), product-grid
   (.sc-pg-k), category-nav (.sc-cn-k). Each → --brand2-ink (color-mix(--brand-2,
   --ink 55%), >=4.88:1 on every DNA). SAFE and left alone: the base .sc-hero-k
   (white over the image scrim), the asymmetric hero kicker (--muted), and every
   --brand-2 used as a background/border/on-brand. */
.sc-ps-k{font-size:.625rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--brand2-ink);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(--brand2-ink);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;top:var(--sy,50%);left:calc(var(--sx,50%) + 26px);transform:translateY(-50%);width:max-content;max-width:min(300px,38vw);line-height:1.5;background:var(--surface);color:var(--ink);padding:9px 14px;font-size:.75rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s;letter-spacing:.04em;border-radius:var(--radius);z-index:4}
.sc-lb-lbl[data-side=l]{left:auto;right:calc(100% - var(--sx,50%) + 26px)}
.sc-lb-spot:hover+.sc-lb-lbl,.sc-lb-spot:focus+.sc-lb-lbl{opacity:1}
@media(max-width:760px){.sc-lb-lbl,.sc-lb-lbl[data-side=l]{left:12px;right:12px;top:auto;bottom:12px;transform:none;width:auto;max-width:none;text-align:center}}
.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}
/* S-256: the base statement kicker was raw var(--brand-2). --brand-2 is a
   decorative brand accent, not a foreground token — as small (11px) text it fails
   WCAG 1.4.3 on 11/32 DNAs vs --bg (8 vs --surface, worst 1.57), where the brand
   and the (dark) bg are both dark. S-229 fixed the INK variant (below) but left
   the base. Use --brand2-ink (S-245, color-mix(--brand-2,--ink 55%)) — the
   readable brand-2 token, >=4.88:1 on every DNA. The S-245 follow-up for the raw
   --brand-2 content-block kickers, now surfaced (cf. S-250 magazine kicker). */
.sc-st-k{font-size:.6875rem;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--brand2-ink);margin:0 0 26px}
.sc-st[data-bg=ink] .sc-st-k{color:color-mix(in srgb,var(--gold),var(--bg) 60%)}
.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}
/* S-255: the testimonial card was background:--bg + border:--hair for the surface/
   none sections, while the ink/brand sections ALREADY used an adaptive card
   (currentColor 8% fill + 18% border). On a dark surface DNA --hair is ~1.15:1 and
   --bg barely differs from --surface (~1.11:1), so the cards nearly merged into the
   section. Unify on that adaptive treatment for ALL section bgs: currentColor is
   the section's contrasting text colour, so 8%/18% of it defines a card that reads
   on every DNA (dark surface border ~2.9:1) while staying subtle. */
.sc-te-card{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:var(--radius);background:color-mix(in srgb,currentColor 8%,transparent);text-align:left}
.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}
/* S-254: this financing promo tile paints a DARK brand gradient under hardcoded
   #fff body text (.sc-bt-body) — but the gradient was built from --ink, which
   INVERTS across DNAs: on a dark DNA --ink is LIGHT, so the gradient went light and
   the white title vanished (white vs the --ink light end measured 1.04:1, failing
   on 9 dark DNAs). Derive it from --brand-2 mixed toward #000 — guaranteed dark on
   every DNA (white text >=5.93:1), keeps the brand hue. Same fix as the S-247
   express hero. The --gold kicker on the now-dark gradient matches the image
   tiles' kicker over their dark ::before scrim. */
.sc-bt-tile.fin{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-2),#000 60%),color-mix(in srgb,var(--brand-2),#000 45%));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}
/* S-222: the newsletter-block input boundary must clear WCAG 1.4.11's 3:1 for a
   form control. currentColor is the right (backdrop-adaptive) base — but 34% (box)
   / 40% (underline) measured 2.25–2.72:1 across the surface/ink/brand backdrops.
   The store's other form inputs (auth/account/coupon/search-first, C-39/C-41/S-220)
   already standardize on 55% — match it here. */
.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 55%,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 55%,transparent);border-radius:0;padding:12px 2px}
/* S-379: the button's height was BORROWED from the flex-row stretch against the
   padded input — the 560px column stack removes that source and a 0-y-padding
   button collapses (29px with a wrapped merchant label; the footer 44px touch
   net covers only `footer button`, not a home block). A control owns its own
   min-height; centered label for the stacked full-width state. */
.sc-nl-f button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  font:inherit;font-size:.75rem;min-height:44px;
  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:color-mix(in srgb,var(--gold),var(--ink) 60%)}
.sc-pr[data-bg=ink] .sc-pr-k{color:color-mix(in srgb,var(--gold),var(--bg) 60%)}
.sc-pr[data-bg=brand] .sc-pr-k{color:var(--on-brand)}
.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}
/* S-271: the white overlay copy sat over the image with ONLY the flat --hero-ov
   veil (default 40%) to carry it — no per-glyph protection, so a light-toned or
   busy hero image (white-bg product shot, a bright sky) drops the copy toward
   illegible. The sibling lookbook caption (.sc-lb-cap h2) already carries a
   text-shadow for exactly this; unify the overlay-text legibility here (tight +
   soft shadow = local contrast on any image, independent of the veil setting). */
.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;text-shadow:0 1px 3px rgba(0,0,0,.5),0 3px 24px rgba(0,0,0,.35)}
.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);text-shadow:none}
.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(--brand2-ink)}
.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(--brand2-ink)}
.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(--brand2-ink);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);
  /* S-434: the ::after scrim maxes out only at the banner's BOTTOM EDGE while
     the text block sits 60-90% down — and even the full 50% ink over a light
     image leaves white text ~2:1 (pixel-measured: the CATEGORIA eyebrow read
     2.25/3.1 median on cosmetica's light tiles). The TEXT BAND owns its
     guarantee (the S-387 law, bento/ilmega black-band family) — PX-anchored
     from the bottom, not %-anchored: a 2-line title pushes the eyebrow to
     ~35% banner height where any %-gradient is still transparent. Covers the
     tallest content stack (eyebrow + 2-line title + padding ≈ 190px);
     independent of the merchant's --ca-ov mood knob. */
  background:linear-gradient(to top,rgba(0,0,0,.78) 0,rgba(0,0,0,.68) 135px,rgba(0,0,0,.28) 190px,transparent 240px)}
.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;margin:0 0 8px;
  /* S-434: the 85% fade dimmed the 11px eyebrow's effective white — with the
     text-band guarantee below, de-emphasis comes from size+tracking, not fade. */
  /* S-278: the category eyebrow reset text-shadow to none while the sibling title
     kept one (S-271 precedent: proactively protect white overlay copy over ANY
     merchant image). At 11px on the 50%-ink bottom scrim, a light banner region
     dropped the eyebrow toward ~3.9:1 (below WCAG 1.4.3's 4.5:1 for small text)
     while the shadowed title stayed legible. Give it a TIGHT shadow (offset+small
     blur — what Lighthouse credits for contrast; a wide blur muddies tracked caps)
     so it holds local contrast on any image, layered with the scrim. */
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.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 */
/* --fd-eff: the panel never grows past the viewport space BELOW a sticky header
   (--hdr-h, measured by core). A full-bleed hero sits under the menu; sizing it at
   var(--fd-h)=82/100svh against the FULL viewport pushed its own bottom row — the
   PRICE + Add-to-cart — below the fold under a tall sticky menu (search-first + trends
   ~150px). Cap to 100svh - header so the CTA is always visible (0px fallback / static
   headers that scroll away → unchanged). Same --hdr-h pattern as scroll_stack PDP. */
.sc-fd-wrap{position:relative;--fd-eff:min(calc(var(--fd-h,82svh) - 1px),calc(100svh - var(--hdr-h,0px) - 1px));height:var(--fd-eff);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:var(--fd-eff,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%)}}
/* S-309: continuous autoplay zoom = the classic WCAG 2.3.3 vestibular trigger */
@media(prefers-reduced-motion:reduce){.sc-fd-card[data-kb=on] .bg{animation:none}.sc-lb-spot{animation:none}}
.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}
/* S-363: pt's VER DETALHE + ADICIONAR exceed the 390-viewport info column —
   the parent .row wraps but the button PAIR didn't, clipping ADICIONAR's
   right edge 29px off-panel. Wrap the pair too (stacked buttons on narrow). */
.sc-fd-card .acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.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);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));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)}
/* S-242: the side rail (frosted circles + white icons + labels) sits over the
   RIGHT of a merchant photo of unknown tone, ABOVE the bottom-left .veil that
   only protects the title/price — so over a LIGHT slide (e.g. a gadget on a
   white studio bg) the white circle/icon/label washed out. The title already
   carries a text-shadow for exactly this; the rail didn't. Give it the S-236
   over-image treatment: a soft dark halo on the buttons (drop-shadow, follows the
   circle + icon so both read on light) + a text-shadow on the labels — both
   imperceptible over dark slides, legible over light. */
.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;text-shadow:0 1px 4px rgba(0,0,0,.55)}
/* 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;
  /* the dashes are fixed white and sit at the image's vertical CENTER, outside the
     bottom .veil scrim — a soft shadow keeps them visible over light image areas */
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55))}
.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-wrap .rail{display:none}}
/* S-249: the feed action rail (.side, absolute right) is labeled CURTIR /
   COMPARTILHAR / SALVAR. The labels have NO width cap, so a long one (pt
   COMPARTILHAR, ~90px) widened the rail leftward into the product title —
   collision on phones AND small tablets (the info reserved only 64px, but the
   labeled rail needs ~118px). The buttons already carry aria-labels, so below
   desktop we drop the VISUAL labels (icon-only, Reels/TikTok-style — zero a11y
   loss) and the info reserves the icon-rail footprint, so the title can never
   collide at any language or title length. */
@media(max-width:860px){
  .sc-fd-card .side .lbl{display:none}
  .sc-fd-card .info{padding-right:74px}}
/* cinematic skeleton pins .cin-search (position:fixed, z-90) to the viewport
   bottom, and the feed anchors its CTA row to the SAME band (.inner flex-end +
   bottom padding). Two things collided there, both fixed here:
   (A) the feed sized to 100svh-hdr-h, but under the scroll-LOCKED cinematic body
       the in-flow bands between the sticky header and <main> (deals strip /
       freeship / landing) never scroll away, so the card ran ~1 band below the
       fold and its CTA sat at/under the pill. Re-cap to main's TRUE top
       (--main-top, published by core's header-offset) so the card ends AT the
       viewport bottom. Only under has-botsearch (cinematic = the only locked
       skeleton), where --main-top is stable; every other skeleton keeps
       100svh-hdr-h (the deals strip scrolls away, so hdr-h is right).
   (B) even fitted, the CTA's own bottom rhythm (~41px) fell inside the pill's
       band, and z-90 made the pill INTERCEPT clicks on View-detail / Add.
       Reserve the pill (24px offset + 44px height + 24px gap = 92px, tracking
       --botbar-h) so the CTAs always clear it. Mobile already pads 100px (above)
       and its own search sits higher; the +92px is desktop-only. */
.store-root.has-botsearch .sc-fd-wrap{--fd-eff:min(calc(var(--fd-h,82svh) - 1px),calc(100svh - var(--main-top,var(--hdr-h,0px)) - 1px))}
@media(min-width:761px){.store-root.has-botsearch .sc-fd-card .inner{padding-bottom:calc(var(--botbar-h,0px) + 92px)}}

/* 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;
  /* S-299: form-boundary law (C-40) — ink-derived, never --hair (1.46:1 on dark DNAs) */
  border:1px solid color-mix(in srgb,var(--ink) 55%,transparent);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}
/* S-300: the map panel renders only when locations are GEOCODED — without it the
   map-list template still reserved the .85fr column, stranding the card list
   lopsided-left beside a void. When no .stloc-map is present, collapse to ONE
   CENTERED column at the width the cards already read at (~720px) — never
   stretch cards to the full 1200px container (line length). :has() precedent:
   card-kit .lrcard grid. */
.stloc[data-layout=map-list] .stloc-body:not(:has(.stloc-map)){grid-template-columns:minmax(0,720px);justify-content:center}
.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}
/* S-299: accent-text law (S-224 family) — raw --brand-1 text read 1.79:1 on
   dark-academia; --brand-ink (brand-1 mixed 50% toward ink) keeps the brand
   voice at AA on every DNA (the confirmation eyebrow precedent). */
.stloc-dir{color:var(--brand-ink)}
.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}}
/* S-299: tap law (44px floor) — the card's action links (WhatsApp / web / Como
   llegar) are 16px text links; extend the HIT AREA with the invisible-pseudo
   idiom (S-5/S-42) on touch/narrow — vertical-only inset so the 16px column gap
   keeps neighbors separated; row-gap grows so stacked hit boxes don't overlap. */
@media(pointer:coarse),(max-width:760px){
  .stloc-links{row-gap:28px}
  .stloc-lk{position:relative}
  .stloc-lk::before{content:'';position:absolute;inset:-14px 0}
}

/* 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(--brand2-ink);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(--brand2-ink);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}}

/* bottom rhythm: a full-bleed hero slider used to sit FLUSH against the products
   block below it — the headerless catalog grid (.sc-pg) has no top padding (its
   top spacing comes from the .sc-pg-h title, absent on a home feed), so the
   FILTRAR/ORDENAR toolbar butted right up under the last slide (user 2026-07-17,
   agustinahuerga home). Matches the .cat-hero banner rhythm. */
.sc-sld{position:relative;overflow:hidden;background:var(--ink);outline:none;margin-bottom:clamp(20px,3vw,34px)}
.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;flex-wrap:wrap}
.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}
/* NARROW: the three actions never fit on one row. `flex:1` is `flex:1 1 0%`, but
   min-width:auto floors every item at its min-content width — three uppercase
   words with letter-spacing plus 22px side padding each need ~414px, so at 320-375px
   the row overflowed to the right and clipped ACEPTAR (user report 2026-07-20).
   Fix: the two real actions split one row 50/50 and the 'Configurar' link takes
   its own row below, so the primary choice always reads first and nothing clips. */
@media(max-width:560px){
  .store-root .cookiebar .ckbtns{width:100%;row-gap:8px}
  /* flex-basis auto + NO min-width:0 — basis 0 with min-width:0 let the two
     actions squash to ~46px and wrap their label onto three lines instead of
     overflowing. Natural min-content is the floor; flex-wrap moves a button to
     the next row when it truly does not fit. */
  .store-root .cookiebar button{flex:1 1 auto;padding-inline:14px}
  .store-root .cookiebar .ckcfgbtn{flex:1 0 100%;order:1;padding-block:6px}
  .store-root .cookiebar .ckcfg .ckbtns button{flex:0 0 auto}
  .store-root .cookiebar .ckcfg .ckcfgbtn{flex:0 0 auto;order:0}}
.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,.store-portal a:focus-visible,.store-portal button:focus-visible,.store-portal input:focus-visible,.store-portal textarea:focus-visible,.store-portal select:focus-visible,.store-portal summary:focus-visible,.store-portal [tabindex]:focus-visible{outline:2px solid var(--ink) !important;outline-offset:2px !important;box-shadow:0 0 0 2px var(--bg) !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:#0b3b24}
.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}
/* S-349: 13px BOLD white on raw WhatsApp green was 1.94:1 (the whatsapp.cljs
   Lighthouse class, 2026-07-02 — its text-link fix mixed toward ink; a FILLED
   brand chip instead keeps the exact #25D366 and flips the TEXT dark:
   #0b3b24 on #25D366 ≈ 6.3:1 AA. White-on-WA-green can never pass. */
.stchat-act.wa{background:#25D366;color:#0b3b24}
.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)}}
@media(prefers-reduced-motion:reduce){.stchat-win{animation:none}.stchat-typing i{animation:none}}
.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)}
/* S-223: the message input is a FORM CONTROL — its boundary must clear WCAG
   1.4.11's 3:1. --hair (the hairline color) at 70% measured 1.33:1 on the light
   panel (nearly invisible); the store's form inputs standardize on --ink 55%
   (C-39/C-41/S-220/S-222) → 3.74:1. The panel border + assistant bubble keep
   --hair (a container edge + a filled bubble, not form controls). */
.stchat-ft input{flex:1;border:1px solid color-mix(in srgb,var(--ink,#1a1a1a) 55%,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}}
@media(prefers-reduced-motion:reduce){.stag-ovl{animation: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;min-height:calc(1.25em * 2)}
.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-ink,#a83a3a);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}.store-root .acctlk.txt .acct-ic{display:inline-flex;align-items:center}@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;min-height:calc(1.35em * 2)}
.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}
/* no-photo product → the shared placeholder glyph (C-56 cards / S-218 search parity):
   contain (the SVG has baked margin) + a lighter tint so it reads as an intentional
   placeholder, not a blank --hair box */
.cart-recs .crc .crimg.ph{background-size:contain;background-color:color-mix(in srgb,var(--hair) 55%,var(--surface))}
.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;min-height:calc(1.35em * 2)}
.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 .mxpdp .qin{min-height:44px !important}.store-root .qopt{min-height:44px}.store-root .rm{min-height:44px !important;display:inline-flex;align-items:center}.store-root a.brand,.store-root .vsbtop a.b{padding-block:11px;margin-block:-11px}.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:15px 4px;margin:-15px -4px}.store-root .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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:12px 6px;margin:-10px -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%;padding-right:24px;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}
.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}
/* legibility layer: the mobile image is 96vw, so the .lb-nav arrows sit OVER the
   product image (not the dark backdrop) — a white glass control + white chevron
   vanish on a light/white catalog photo. A drop-shadow gives every white control
   its own edge on any image brightness, independent of the backdrop veil (same
   principle as the S-271 hero-overlay text-shadow). Harmless over the dark
   backdrop where the close/counter always sit. */
.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;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.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;filter:drop-shadow(0 1px 5px rgba(0,0,0,.55))}
.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;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.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);display:flex;flex-direction:column;animation:store-search-in .16s ease both}
/* the results scroll HERE; .sall is a flex footer below (never overlaps the last
   row — a sticky footer covered it, user-visible clip on the bottom result) */
.store-search .srscroll{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  /* scroll-shadow cue (same trick as the cart .body / PDP .iscroll, on --surface):
     when more results sit below the fold, a shadow signals scrollability */
  background:linear-gradient(var(--surface) 30%,transparent),
    linear-gradient(transparent,var(--surface) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.09),transparent),
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.09),transparent) 0 100%;
  background-repeat:no-repeat;background-size:100% 34px,100% 34px,100% 8px,100% 8px;
  background-attachment:local,local,scroll,scroll}
/* the scroll-shadow is result-LIST chrome. On the no-results empty state (a single
   short .snote) it has nothing to scroll — and in the full-screen overlay, where
   .sdrop is transparent (card-less), the top+bottom white fades collapse into an
   incongruous white box + a false 'scroll for more' cue around the message. Drop
   the shadow so the empty state sits cleanly on the panel backdrop (transparent in
   the overlay, the --surface card inline) — matching the card-less overlay look. */
.store-search .srscroll.plain{background:none}
@keyframes store-search-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.store-search .sdrop{animation: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)}
/* S-218: no-image product → the shared placeholder glyph (C-56 parity), NOT a
   blank --hair box. contain (the SVG has baked margin) + the lighter tint that
   .imgbroken cards use so it reads as an intentional placeholder, not a fail. */
.store-search .sr .thumb.ph{background-size:contain;background-color:color-mix(in srgb,var(--hair) 55%,var(--surface))}
.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' — the primary escape hatch, always visible below the
   scrolling results as a flex footer (was position:sticky, which floated over and
   clipped the bottom result; user report 2026-07-05 wanted it not hidden below the
   fold — the flex footer keeps it pinned WITHOUT overlapping). */
.store-search .sall{flex:0 0 auto;
  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)}
/* S-402: the clear-recents text button was 21px in the MOBILE search overlay —
   the S-241 pad+neg-margin grows the tap to 45px with the compact header row
   unshifted (min-height would stretch the rhead) */
@media(pointer:coarse),(max-width:760px){
  .store-search .rhead button{padding:16px 12px;margin:-12px -8px}
}
.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}}
/* S-355: --ctl-line, not --hair — the same control-boundary law as the
   wishlist twin (identical 46px overlay close). */
.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(--ctl-line);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(--ctl-line);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}}
/* S-355: --ctl-line, not --hair — a CONTROL boundary (the C-39/S-339/S-354
   law); the divider token reads ~1.5:1 on dark DNAs. */
.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(--ctl-line);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)}
/* S-285: the full-height overlay is a flex column, so the shared empty-state
   (.estate) rendered TOP-aligned right under the heading with a large void below
   (unbalanced vs the store's other empty states). Auto block-margins centre it in
   the body below the heading; auto margins overflow at the END so a short viewport
   still scrolls (unlike justify-content:center). The card .wl-grid is untouched. */
.wl-ov .estate{margin-block:auto}
.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;min-height:calc(1.35em * 2)}
.wl-ov .wl-c .wp{font-size:.8125rem;font-weight:600;margin:0}
/* the remove ✕ sits OVER the product image, so its boundary can't ride the
   --surface fill + --hair hairline — both are the SAME tone as the surface, so
   over a same-tone image (a cream product shot on a light DNA) the whole disc
   vanishes into it (WCAG 1.4.11 wants a 3:1 boundary). Make the disc TWO-TONE:
   the --surface fill + an --ink-derived ring (the C-31 idiom — --ink always
   contrasts the surface). Whatever tone the image is, one of the two contrasts
   it: a dark ring reads on a light image, a light fill on a dark one. A soft
   shadow lifts it; a frosted blur adds real-browser polish. */
/* S-392: slot guard (the ck-ob/S-211 law) — the remove disc OWNS top-right
   (z above), the state chip owns top-left and may never run under it: on a
   ~134px tile @320 the pt INDISPONÍVEL chip spanned the width and painted
   OVER the disc (later in source), half-burying the control. */
.wl-ov .wl-c .wrm{position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;z-index:2;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:50%;cursor:pointer;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.28)}
.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);
  max-width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 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-ink,#a83a3a);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(--ctl-line);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}
/* S-354: the sheet is phone-first and this 34px corner close had no touch
   handling — the S-42 standalone-control pseudo inset grows the hit area to
   ~46px without touching the visual. */
.qrsheet .qrx::before{content:'';position:absolute;inset:-6px}
.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)}
/* S-354: --hair is the DIVIDER token — as a CONTROL boundary it reads ~1.5:1
   on dark DNAs (the C-39/S-315/S-339 disease). --ctl-line adapts per context. */
.qrsheet .qra-dl{border:1px solid var(--ctl-line);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}
/* S-418: a linked announce message is a 14px-tall tap on phones (the bar's
   text height) — the S-241 pad+neg-margin grows the tap without moving the
   slim bar's layout */
@media(pointer:coarse),(max-width:760px){
  .anmsg a{display:inline-block;padding:15px 6px;margin:-15px -6px}
}
@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}}
/* S-389 note: the touch floors for this file's controls live in core tap-css —
   the chips at `.cat-chips .chip{min-height:44px !important}` and the crumb
   links at the shared `.cat-crumbs a,.crumbs a` padding rule (bumped 10→14
   there; a local rule here loses the cascade to it). */

.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}
/* the middot separator is a ::before of each item span (not a standalone flex
   item) so a wrapping .bill-done can never strand a lone dot at a line end;
   also makes it decorative (not announced). single-quoted content: a double
   quote would terminate this css STRING (the P1-2 gotcha). */
.co-billing .bill-done .bd-item::before{content:'·';color:var(--muted);margin-right:9px}
.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 color-mix(in srgb,var(--ink) 55%,transparent);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-ink,#a83a3a)}
.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-ink,#a83a3a)}
.co-billing .fnote.warn{color:#9a6700}
.co-billing .bactions{display:flex;align-items:center;gap:14px;margin-top:14px}
/* C-63: the billing Guardar button was 42px — 2px under the 44px touch minimum
   (WCAG 2.5.5 / Apple HIG) and 2px SHORTER than the 44px inputs right above it.
   Match the inputs at 44px (the sibling full-width CTAs auth/register/contacto .go
   are 52px, but .bsave is a compact inline save, so 44px is the right floor). */
.co-billing .bsave{height:44px;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-ink,#a83a3a);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}}
/* S-382: the collapsed-summary Edit (24px, padding 2px 0) and the form Cancel
   (underlined text) had no touch handling — checkout money-path actions under
   the 44px floor. The S-39/S-144 idiom: min-height on coarse/narrow; the flex
   rows center them, desktop keeps the compact look. */
@media(pointer:coarse),(max-width:760px){
  .co-billing .bill-done button{min-height:44px;display:inline-flex;align-items:center}
  .co-billing .bcancel{min-height:44px}
  /* S-431: iOS zooms on focusing controls under 16px — the 14px billing
     fields were a zoom trap on the money path. Phone-only floor. */
  .co-billing input,.co-billing select{font-size:16px}
}

.co-alert{border:1.5px solid var(--alert-ink,#a83a3a);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-ink,#a83a3a);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)}
/* S-383: the failure-banner action (padding 8px 16px ≈ 36px) is THE recovery
   control at the checkout's worst moment — 44px floor on coarse/narrow */
@media(pointer:coarse),(max-width:760px){.co-alert .ca-act{min-height:44px;display:inline-flex;align-items:center}}
@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-ink,#a83a3a);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}
/* S-315: the desk's PRIMARY input rides the C-40 boundary token — --hair
   measured 1.32:1 (light) / 1.46:1 (dark-academia), under the 1.4.11 3:1 floor */
.store-root .pro-desk .psearch{flex:1;border:1px solid var(--ctl-line);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}
}
/* S-304: the swatch ring is the S-262 two-tone-disc token (--ink 55%), never
   --hair — a WHITE/light resolved color (blanca/crema, endemic in moda) with a
   hair ring read as a stray EMPTY circle on the cream row (~1.2:1). The engine's
   inset .14 ring composes; dark fills just gain definition. */
.store-root .pro-desk .pdot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 55%,transparent)}
/* 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:var(--warn-ink);font-weight:600}
.store-root .pro-desk .pst-oos{color:var(--alert-ink);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:color-mix(in srgb,var(--warn) 8%,var(--surface));color:var(--warn-ink);border:1px solid color-mix(in srgb,var(--warn) 30%,var(--hair));white-space:nowrap}
.store-root .pro-desk .pst-pv .pv-left{font-size:.65rem;color:var(--warn-ink);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:var(--ok-ink);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:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 14%,transparent)}
.store-root .pro-desk .pvm-anom{display:inline-flex;color:var(--warn-ink)}
.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:var(--alert-ink);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:var(--warn-ink)}
.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)}
/* S-303: terminal catalog-error state (error + Reintentar, no eternal spinner) */
.store-root .pro-desk .pskel .perr-t{margin:0 0 14px}
.store-root .pro-desk .pskel .pretry{font:inherit;font-size:.8125rem;cursor:pointer;color:var(--ink);
  background:none;border:1px solid var(--ctl-line);border-radius:var(--radius);min-height:44px;padding:0 22px}
.store-root .pro-desk .pskel .pretry:hover{border-color:var(--ink)}
/* 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-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,4vw,2rem)}
.store-root .pro-desk .pgc{margin:0;max-width:420px;color:var(--muted);font-size:.875rem;line-height:1.55}
/* S-302: tap law — the back link is a real control; 44px min hit box */
.store-root .pro-desk .pgback{color:var(--muted);font-size:.8125rem;text-decoration:underline;
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px}
/* 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}
 /* S-306: overflow:hidden is what makes -webkit-line-clamp actually TRUNCATE —
    without it the 3rd+ line of a long name PAINTS over the meta line below
    (LARGA M25S095 through Stock 42). The .prow overflow belt only stops
    bleed onto the NEXT row, not within the card. */
 .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;overflow:hidden;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:var(--warn-ink)}
 .store-root .pro-desk .pvm-oos{color:var(--alert-ink)}
 /* 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}
 /* S-302: scope the full-width stretch to the BAR's cta — the bare .pbcta
    selector also hit the anon GATE's cta inside the full-height flex COLUMN,
    where flex-grow:1 ballooned the Ingresar button to ~613px tall @390 */
 .store-root .pro-desk .pbar .pbcta{flex:1 1 100%;text-align:center;order:9;padding:12px 22px}
 .store-root .pro-desk .pgate .pbcta{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}}
/* ═══ DESK TOUCH LAW (S-334) — the coarse-pointer block, at the css TAIL (the
   S-329 architecture: source order can never bury a rule). The desk's mobile
   block bumps rows/steppers but its HEADER chrome measured 28-32px under real
   touch: lens tabs 31 · filter chips 28 · back 30 · the row image button 32.
   Grouped rows grow; the standalone image button takes a pseudo inset. */
@media(pointer:coarse){
  .store-root .pro-desk .plt{min-height:40px}
  .store-root .pro-desk .pchip{min-height:36px}
  .store-root .pro-desk .pback{min-height:40px;padding:5px 10px}
  .store-root .pro-desk .pimgb::after{content:'';position:absolute;inset:-4px}
}

.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 .poth-ph{width:34px;height:34px;display:inline-grid;place-items:center;color:var(--muted);
  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;justify-content:center;text-decoration:none;color:var(--ink)}
.store-root .cat-hero{position:relative;height:clamp(220px,32vh,380px);overflow:hidden;margin:clamp(20px,3vw,34px) 0;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,.78) 0%,rgba(0,0,0,.55) 32%,rgba(0,0,0,.16) 64%,rgba(0,0,0,0) 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,.95);margin:0 0 8px;text-shadow:0 1px 8px rgba(0,0,0,.5)}.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,.4)}.store-root .cat-hero .ch-d{color:rgba(255,255,255,.9);max-width:560px;margin:10px 0 0;line-height:1.55;font-size:.875rem;text-shadow:0 1px 8px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.store-root .cat-hero .ch-n{color:rgba(255,255,255,.85);font-size:.75rem;letter-spacing:.06em;margin:10px 0 0;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.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)}
/* touch tap-target: the pills are ~25px tall (font 12.5 + 4px pad) — under the
   44px touch minimum. Grow them to 44px on coarse pointers / narrow widths
   (same pattern as the deal-ladder rows), text vertically centered. Desktop
   mouse keeps the compact pill. */
@media (pointer:coarse),(max-width:760px){.catx-subs a{min-height:44px;display:inline-flex;align-items:center}}
.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}
/* S-431: iOS Safari ZOOMS the viewport on focusing any form control whose
   font-size is under 16px — the 13px toolbar select was a zoom trap on every
   phone. Floor it on coarse/mobile only; desktop keeps the compact 13px. */
@media(pointer:coarse),(max-width:760px){
  .ssort select{font-size:16px}
}
.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}
/* S-277: the count is the sacrificial element ONLY when a FILTRAR button competes
   for the row (mobile: filter left, sort right, count dropped so both fit — S-93/94).
   When there are no facets the count is the sole left element; hiding it left the
   sort floating right over dead space AND dropped useful info (the N-productos count).
   Scope the hide to .hasfilter so a count-only toolbar keeps its count on mobile —
   it fills the left and balances the row; the sort <select> already absorbs any
   squeeze (min-width:0 + ellipsis, S-45), so no overflow at 320. */
@media(max-width:520px){.gtoolbar.hasfilter .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}
}

/* the whole account area (order list · order-detail all variants · profile) is a
   financial-document surface — every number (order#, dates, qty, prices, totals,
   fiscal ids) should read as lining + TABULAR figures: unambiguous glyphs and
   columns that align. font-variant-numeric is inherited, so ONE rule on the root
   covers it. Serif DNAs with OLD-STYLE default figures (e.g. Cormorant on deco)
   otherwise render a 1-that-looks-like-I + a bumpy, non-aligning baseline on the
   serif order#/totals (`.rc-num`, `.odsum .row.tot`, `Pedido #…`). Graceful no-op
   on already-lining fonts. Generalises [[C-50]] (which scoped it to the receipt)
   to every account surface. */
.sacct{max-width:900px;margin:0 auto;padding:clamp(28px,4vw,52px) 24px 90px;min-height:62vh;font-variant-numeric:lining-nums tabular-nums}
.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)}
/* longer locales (pt 'MEUS PEDIDOS / MEU PERFIL / MEUS AVISOS') overflowed the
   3-tab nav at phone widths — the 3rd tab hid behind the scroll fade. Tighten the
   mobile gap + tracking so 3 tabs fit without scrolling (the scroller stays as the
   fallback for even longer / >3-tab navs). */
@media(max-width:480px){
  .sacct .acctnav-row{gap:12px}
  .sacct .acctnav{gap:13px}
  .sacct .acctnav a{letter-spacing:.05em}}
/* 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(--alert) 12%,transparent);color:var(--alert-ink)}
.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(--ctl-line);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.rerr{border-color:color-mix(in srgb,var(--alert) 40%,var(--hair));color:var(--alert-ink);
  background:color-mix(in srgb,var(--alert) 8%,var(--surface))}
.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(--ctl-line);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(--ctl-line);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(--alert) 12%,transparent);color:var(--alert-ink)}
.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(--ctl-line);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(--alert) 12%,transparent);color:var(--alert-ink)}
.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 color-mix(in srgb,var(--ink) 55%,transparent);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}
/* S-407: at phone widths the 4-stage timeline overflowed by exactly ~28px
   (84px min-width × 4 vs ~314 card-inner) — a scroller that LOOKS like a clip
   and barely moves. Squeeze the step floor so the STANDARD 4 stages FIT
   (labels wrap to 2 lines); 5+ merchant stages still scroll with the hfade. */
@media(max-width:420px){.sacct .otl-step{min-width:72px}}
.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}  /* figures inherit lining+tabular from .sacct root [[C-50]] */
.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(--alert) 12%,transparent);color:var(--alert-ink)}
.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 color-mix(in srgb,var(--ink) 55%,transparent);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(--ctl-line);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 color-mix(in srgb,var(--ink) 55%,transparent);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 color-mix(in srgb,var(--ink) 55%,transparent);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 color-mix(in srgb,var(--ink) 55%,transparent);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(--ctl-line);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(--alert-ink,#a83a3a);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}
/* S-267: at mobile the primary+secondary actions STACK full-width (SOTA mobile
   form pattern) instead of flex:1 half-width side-by-side — else the longer
   address label (Guardar direccion / Salvar endereco / Save address) wraps to
   2 lines cramped in a ~165px half-button. Full-width fits any label / locale
   and gives the primary CTA a proper tap target. */
@media(max-width:560px){.sacct .pactions{flex-direction:column;align-items:stretch}}
/* 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(--ctl-line);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 color-mix(in srgb,var(--ink) 55%,transparent);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)}
/* S-225: error states use the dedicated --alert token, NOT --brand-2. --brand-2 is
   the merchant's BRAND color (a blue/green-brand store showed BLUE validation errors
   — no danger signal) and on a dark DNA it's a dark red on the dark surface (1.57:1,
   invisible). --alert (#d64545) is a consistent alert-red (checkout_billing/register
   already use it; the rest had drifted to --brand-2). */
.slogin input.bad{border-color:var(--alert-ink,#a83a3a)}
.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(--alert-ink,#a83a3a);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}
/* S-251: the SSO/OAuth buttons fill with --surface on a --bg page, but
   --surface is ~1.05:1 vs --bg, so the FILL doesn't delineate them — the border
   does all the work. It was raw --hair, which fails WCAG 1.4.11 (control boundary
   3:1) on 31/32 DNAs (min 1.16 vs --bg): the three login buttons had a nearly
   invisible boundary. Derive the border from --ink at 65% alpha — because it must
   stand out vs the PAGE (--bg), not just the fill, 65% (not --ctl-line 55%, which
   still fell to 2.86 on 5 DNAs) clears 3:1 on every DNA (min 3.72 vs --bg). */
.slogin .sbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border:1px solid color-mix(in srgb,var(--ink) 65%,transparent);
  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(--alert-ink,#a83a3a);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}
.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(--alert-ink,#a83a3a);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 color-mix(in srgb,var(--ink) 55%,transparent);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}
/* S-431: the 15px select is an iOS zoom-on-focus trap — 16px floor on phones */
@media(pointer:coarse),(max-width:760px){
  .slogin .register select{font-size:16px}
}
.slogin .register select:focus{outline:none;border-color:var(--ink)}
.slogin .register select.bad{border-color:var(--alert-ink,#a83a3a)}
.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(--alert-ink,#a83a3a)}
/* 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-ink,#a83a3a)}
.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 color-mix(in srgb,var(--ink) 55%,transparent);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 color-mix(in srgb,var(--ink) 55%,transparent) !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}

/* confirmation is a financial moment (savings amount, order#, totals) — lining +
   tabular figures so serif DNAs (e.g. Cormorant/deco) don't render a 1-that-looks
   -like-I or a bumpy baseline on the serif savings line. Inherited; graceful no-op
   on lining fonts. Extends the C-50/C-51 account-figures family to the checkout
   confirmation (which is NOT under .sacct). */
.co-done{max-width:520px;margin:0 auto;text-align:center;padding:clamp(28px,5vw,56px) 20px;font-variant-numeric:lining-nums tabular-nums}
.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-ink);
  /* S-243: the checkmark GLYPH + eyebrow were raw var(--brand-1) — a brand accent
     that on a dark DNA (e.g. libreria's dark-red brand-1 on the dark-green bg) sank
     to 1.7:1 (check) / 1.79:1 (eyebrow), a near-invisible success mark on the
     order-placed trust moment. --brand-ink (brand-1 mixed 50% toward --ink)
     preserves the brand hue but is readable on EVERY DNA (analytically ≥4.8 check /
     ≥5.0 eyebrow across all 32). The circle backdrop stays raw --brand-1 14%. */
  /* 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-ink);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(--ctl-line)}
.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)}
/* the loading skeleton is rendered as a SIBLING of the padded .body in every cart
   variant (never inside it), so it must supply the cart-line horizontal inset (22px)
   itself — with padding:8px 0 the image bar bled off the LEFT edge and the price bar
   off the RIGHT, and the rows jumped 22px sideways when the real lines landed. Match
   the .body inset so the skeleton previews the real line position. */
.cart-loading{padding:8px 22px}
.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-msg.ns-err{color:var(--alert-ink)}
.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}
/* S-403: the anon prompt's Ingresar link — the flow's ONLY conversion path on
   a mobile-primary surface (OOS PDP) — was 16px. The S-241 pad+neg-margin
   grows the tap to ~44px with the compact prompt unshifted. */
@media(pointer:coarse),(max-width:760px){
  .store-root .notify-stock .ns-login{padding:14px 10px;margin:-10px -10px -14px}
}

.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}
/* S-388: the padding+neg-margin net reached only ~37px here (the S-203
   under-shoot class) — min-height guarantees the floor; flex centers */
@media(pointer:coarse),(max-width:760px){.store-root .sfoot-links a{min-height:44px;display:inline-flex;align-items:center}}

.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}
/* S-408: the standalone mandated controls (AR Botón de arrepentimiento, MX
   Distintivo…) were 18px on phones — a LEGALLY-required control under the
   floor. S-241 idiom: 44px tap, strip rhythm unshifted. Prose-embedded
   links (.arlegal-txt a) stay exempt (WCAG inline exception, S-388 line). */
@media(pointer:coarse),(max-width:760px){
  .arlegal-arr{display:inline-block;padding:13px 8px;margin:-13px -8px}
}
.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 color-mix(in srgb,var(--ink) 55%,transparent);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(--alert-ink,#a83a3a)}
.arrep .err{color:var(--alert-ink,#a83a3a);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}

/* S-296: NO hardcoded bottom clearance for the fixed dock — the dock is
   registered in core's botbar-offset selector, so .store-root's
   padding-bottom:var(--botbar-h) reserves the dock's MEASURED height at the
   true page bottom (tracks count-line wraps @320, locale lengths, safe-area)
   and the chat/scroll-top FABs float above it. The old 140px was short of the
   real dock (149px @390 / 164px @320) and occluded the last grid row. */
.mkit{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,44px) 20px}
.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 color-mix(in srgb,var(--ink) 55%,transparent);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(--ctl-line);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(--ctl-line);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)}
/* S-298: the selection ring is INK, not raw --brand-2 — a brand-2 hairline on a
   theme surface has unbounded non-text contrast (1.57:1 on dark-academia, WCAG
   1.4.11 needs 3:1). Ink is max-contrast on every DNA by construction and matches
   the store's selection language (.sz.on underline / .szfill.on ink ring) + the
   card's own hover border; the brand voice stays on the filled .mk-ck check. */
.mkit .mk-card.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.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;
  /* S-297: RESERVE the true clamp height (line-height x lines — the ck-name idiom;
     the old 2.2em was short of 2 lines at lh 1.35 = 2.7em, so 1-line vs 2-line
     names misaligned the code/price rows across a grid row) */
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.35em*2)}
.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(--ctl-line);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;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom))}
.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(--ctl-line);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(--ctl-line);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 color-mix(in srgb,var(--ink) 55%,transparent);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(--alert-ink,#a83a3a)}
.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(--alert-ink,#a83a3a)}
.ctform .err{color:var(--alert-ink,#a83a3a);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}}@media(prefers-reduced-motion:reduce){.constr-in{animation: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 color-mix(in srgb,var(--ink) 55%,transparent);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)}
/* S-269: the merchant checkout notice renders at the checkout SURFACE, above the
   variant that swaps form -> confirmation, so once the order is placed the notice
   lingers above the confirmation hero (pre-purchase disclosure competing with the
   success moment). Hide it while any confirmation variant (co-done/co-cel/co-rcp)
   is on the page — the notice was fully available during checkout. */
main:has(.co-done,.co-cel,.co-rcp) .co-notice{display:none}
.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}
/* S-383: the accordion toggle is a checkout-page control — 38px tall; the S-39/
   S-144 coarse/narrow 44px floor applies (desktop keeps the compact row) */
@media(pointer:coarse),(max-width:760px){.co-notice-t{min-height:44px}}
.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}