/* Superunico theme: the approved mockup's CSS (build/template.html, Vercel superunico-mockup-1dkn3j9e3), ported by tools/port_css.py. Do not edit by hand; theme additions go in theme.css. */
/* Self-hosted, so the first paint already has them. Loaded late from Google, the first frames showed the
   fallback and then swapped. Latin covers every catalog name. Chrome refuses a font preload on file://, so
   the mockup waits for the local files (a millisecond) with `block`; the theme preloads them over https and
   keeps `swap`. Google's Latin subsets, SIL Open Font License: Inter v20 (opsz 14-32, wght 100-900) for
   text, Passion One v20 Regular for headlines. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Passion One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/passion-one-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks (theme): a late swap on a slow phone changes neither width nor line breaks.
   Computed with fontTools from the two files against Arial's weighted average advance. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 110.40%; ascent-override: 87.75%; descent-override: 21.85%; line-gap-override: 0%; }
@font-face { font-family: "Passion One Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 86.04%; ascent-override: 97.05%; descent-override: 30.92%; line-gap-override: 0%; }
:root {
  --pink: #FF2668;
  --pink-d: #E3155A;
  --pink-dd: #C80C4B;
  --pink-50: #FFF0F4;
  --pink-100: #FFE1EA;
  --ink: #1A1A2E;
  --ink-2: #3A3A4E;
  --muted: #74748A;
  --line: #ECECF2;
  --tile: #F4F4F7;
  --sk: #EDEDF2;
  --sheen: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 80%);
  --fill: #F3F3F7;
  --bg: #FFFFFF;
  --ok: #107F4A;
  --ok-d: #0B5B33;
  --ok-dd: #0B3B24;
  --ok-50: #E7F8EE;
  --warn-dd: #7A4B00;
  --warn-50: #FFF4DB;
  --bought-bg: #FFD71F;
  --bought-fg: #5C4D06;
  --wa: #25D366;
  --grad-pink: linear-gradient(150deg, #FF2668, #FF5C8A 60%, #FF8FB0);
  --glass: rgba(255, 255, 255, .16);
  --glass-h: rgba(255, 255, 255, .24);
  --r: 18px;
  --shadow-1: 0 1px 2px rgba(20, 16, 40, .05), 0 6px 18px rgba(20, 16, 40, .06);
  --shadow-2: 0 24px 60px rgba(20, 16, 40, .22);
  /* Sticky bars cast short shadows: tinted under the pink header, neutral under a white bar, so no pink
     haze falls across white content or the pinned pill bar. */
  --shadow-hdr: 0 10px 22px -12px rgba(170, 0, 50, .32);
  --shadow-bar: 0 10px 20px -14px rgba(20, 16, 40, .2);
  /* "You are here" in navigation: header links, Pasillos when open, the sidebar, pills, an active Filtros.
     Chips and pills use this fill with no ring; a ring marks the chosen card among options (payment, pack size). */
  --on-bg: var(--pink-50);
  --on-fg: var(--pink-dd);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: "Inter", "Inter Fallback", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-d: "Passion One", "Passion One Fallback", var(--font);
  --hh: 108px;
  --wrap: 1320px;
  --wrap-wide: 2400px;
  --wrap-product: clamp(1320px, 62.5vw, 1600px);
  --pad: 32px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* An especialidad circle's hidden name label (.eb-l, absolute, up to ~125 px) on a right-column card can poke past a 320 px
   viewport and let the page pan sideways by a few px; clip the root's sideways overflow (clip keeps the viewport scrolling). */
html { overflow-x: clip; }
/* Overscroll (the rubber band past the top or bottom): Safari and the app's WebView paint the root's background-color
   there, so it is pink like the header and the footer instead of white (the user, 2026-10-12). The page itself keeps
   --bg on body. In the app the footer is hidden and in the checkout flow header and footer are, so there the root
   stays --bg, and the app gets only the top painted pink by a block above the document. */
html { background-color: var(--pink); }
html.app, html:has(body.flow) { background-color: var(--bg); }
html.app:not(:has(body.flow)) body::before { content: ''; position: absolute; left: 0; right: 0; top: -150vh; height: 150vh; background: var(--pink); pointer-events: none; z-index: -1; }
/* Lock the root only: hidden overflow on body would make it the sticky header's scroller and push the header off screen. */
html.lock { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }
svg { display: block; flex: 0 0 auto; }
:focus-visible { outline: 3px solid rgba(255, 38, 104, .45); outline-offset: 2px; border-radius: 10px; }
h1, h2, h3, h4, p { margin: 0; }

/* ——— Delivery strip + header ———
   The strip and the header are sibling stickies: the strip pins at 0 and the header right under it, at the
   strip's height (--sh, measured). A sticky inside a sticky lags on iOS: WebKit places the inner one only once
   scrolling stops (bugs 106062, 199915), which cut the phone header when Safari's toolbar came back. */
.strip {
  position: sticky; top: 0; z-index: 41;
  background: var(--pink-d); /* #E3155A (the user, 2026-10-11), was --pink-dd */
  color: #fff;
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 16px;
  text-align: center;
  line-height: 1.3;
}
.strip b { font-weight: 700; }
.live {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: #7CFFB2;
  flex: 0 0 auto;
}
/* The ring grows and fades with transform and opacity, so it never repaints the pinned strip. Keyframe
   names are global: the last @keyframes of a name wins for every element that uses it. */
.live::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(124, 255, 178, .7);
  animation: su-live-ring 2s infinite;
}
@keyframes su-live-ring {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
.hdr {
  position: sticky;
  top: var(--sh, 30px);
  z-index: 40;
  background: var(--pink);
  transition: box-shadow .25s ease;
}
.hdr.sc { box-shadow: var(--shadow-hdr); }
/* Computers: logo, then the search, then the shopper's own things in the order the phone shows them:
   the account, UNICOCASH (or a guest's zone) and the cart last, as Instacart sets its address by the cart.
   The markup is in that order too, so Tab follows the eye; phones place the same items by grid area.
   Every control is one 50 px white pill with ink text and pink marks (the search, UNICOCASH or the zone, the
   cart), so they read as one set on the pink (the user, 2026-10-09: not glass beside white). */
.hdr-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 78px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.logo { flex: none; margin-right: 22px; }
.logo img { height: 34px; width: auto; }
.srch { flex: 1 1 auto; margin-right: 10px; }
.ib.acc, .zone, .uc-btn, .acts { flex: none; }
.zone {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  height: 50px;
  padding: 0 14px 0 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(120, 0, 40, .18);
  text-align: left;
  transition: transform .2s ease;
  min-width: 0;
}
.zone:hover { transform: translateY(-1px); }
.zone .pin {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink-50); color: var(--pink);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.zone small { display: block; font-size: 11px; font-weight: 620; color: var(--muted); letter-spacing: .02em; }
.zone b {
  display: block; font-size: 14px; font-weight: 680;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.zone .chev { color: var(--muted); }
.zone .chev-m, .lg-mark, .promos { display: none; }
/* UNICOCASH (logged in), where a guest has the zone picker */
.uc-btn {
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 14px 0 7px; border-radius: 999px;
  background: #fff; color: var(--ink); text-align: left;
  box-shadow: 0 8px 24px rgba(120, 0, 40, .18);
  transition: background .2s ease, transform .2s ease;
}
.uc-btn:hover { transform: translateY(-1px); }
.uc-btn[aria-expanded="true"] { background: var(--pink-50); }
.uc-ti {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink-50); display: grid; place-items: center; flex: 0 0 auto;
}
.uc-btn[aria-expanded="true"] .uc-ti { background: #fff; }
.uc-ti img { width: 24px; height: 24px; }
.uc-tx { display: grid; gap: 4px; }
/* The pink wordmark is 315 px wide with 4 px of air each side, so 64 px draws the letters at the white one's size. */
.uc-wm { width: 64px; height: auto; }
.uc-btn b { display: block; font-size: 17px; line-height: 1; }
.ucw-a .m { color: #fff; }
.uc-btn .chev { color: var(--muted); transition: transform .2s var(--ease); }
.uc-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ucp {
  position: absolute; top: calc(100% - 6px); z-index: 45;
  width: 372px; border-radius: 26px; overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 60px rgba(40, 0, 20, .24), 0 0 0 1px rgba(20, 10, 26, .05);
  transform-origin: calc(100% - 48px) 0;
  animation: su-ucIn .24s var(--ease);
}
.ucp:focus { outline: none; }
@keyframes su-ucIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.ucw-hero {
  display: grid; padding: 16px 18px 20px 20px;
  background:
    radial-gradient(120% 130% at 100% 0%, #FF8FB0 0%, rgba(255, 143, 176, 0) 55%),
    linear-gradient(150deg, #FF2668, #FF4B7C 55%, #E0105A);
  color: #fff;
}
.ucw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ucw-top h2 { line-height: 0; }
.ucw-top img { width: 118px; height: auto; }
.ucw-x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: #fff; transition: background .2s ease; }
.ucw-x:hover { background: rgba(255, 255, 255, .3); }
.ucw-x svg { width: 18px; height: 18px; }
.ucw-l { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.ucw-a { font-size: 48px; line-height: 1.02; }
.ucw-a .m { letter-spacing: -.05em; }
.ucw-u { margin-top: 6px; font-size: 13.5px; font-weight: 590; opacity: .92; }
.ucw-b { display: grid; gap: 14px; padding: 16px 20px 20px; }
.ucw-ic {
  width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px rgba(20, 10, 26, .07);
}
.ucw-st { display: flex; align-items: center; gap: 12px; }
.ucw-st small { display: block; font-size: 11.5px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ucw-st b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ucw-r { margin-left: auto; text-align: right; font-size: 12.5px; font-weight: 590; color: var(--muted); line-height: 1.35; }
.ucw-r b { display: inline; font-size: inherit; color: var(--pink-d); }
.ucw-lad { position: relative; padding-top: 2px; }
.ucw-tr { position: absolute; top: 18px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 4px; border-radius: 4px; background: #F2E8ED; }
.ucw-tr i { position: absolute; inset: 0 auto 0 0; width: var(--at); border-radius: inherit; background: linear-gradient(90deg, #FF7FA6, var(--pink)); }
.ucw-lad ol { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ucw-lad li { display: grid; justify-items: center; text-align: center; }
.ucw-lad .ucw-ic { width: 36px; height: 36px; border-radius: 12px; margin-bottom: 6px; }
.ucw-lad li:not(.on):not(.done) img { filter: grayscale(1); opacity: .45; }
.ucw-lad li.on .ucw-ic { box-shadow: 0 0 0 2px var(--pink), 0 8px 18px rgba(255, 38, 104, .28); }
.ucw-lad b { font-size: 12.5px; font-weight: 700; }
.ucw-lad li.on b { color: var(--pink-d); }
.ucw-lad small { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.ucw-p { padding: 11px 13px; border-radius: 14px; background: var(--pink-50); font-size: 13.5px; font-weight: 590; line-height: 1.45; color: var(--ink-2); }
.ucw-p b { color: var(--ink); font-weight: 700; }
.ucw-n { font-size: 12.5px; font-weight: 570; line-height: 1.45; color: var(--muted); }
.ucw-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ucw-f .btn { height: 46px; padding: 0 22px; font-size: 14.5px; }
.ucw-t { font-size: 12.5px; font-weight: 650; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.ucw-t:hover { color: var(--ink); }
.modal[data-kind="uc"] .mbox { overflow: auto; }
.modal[data-kind="uc"] .ucw-b { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.srch { position: relative; min-width: 0; }
/* Phones on the web open their navigation here, beside the search, which stays pinned: live has the same
   menu (no tab bar). The app has native tabs, and its injected CSS hides .mobile-nav in every build. */
.mn-b { display: none; }
.mn { display: grid; gap: 2px; }
.mn h5 { font-size: 12px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px 10px; }
.mn h5:first-child { margin-top: 2px; }
.mn .mg-i { color: var(--ink-2); }
.mn .mg-i.ic { background: var(--tile); }
.mn .mg-i.fv { background: var(--pink-50); color: var(--pink); }
.mn .mg-d { min-height: 54px; }
.srch-f {
  height: 50px;
  background: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 18px;
  box-shadow: 0 8px 24px rgba(120, 0, 40, .18);
}
.srch-f > svg { color: var(--pink); }
.srch-f input {
  flex: 1; min-width: 0; align-self: stretch;
  border: 0; outline: 0; background: none; padding: 0;
  font-size: 15.5px; font-weight: 570; color: var(--ink);
}
.srch-f input::placeholder { color: #9C9CB0; transition: color .16s ease; }
/* iOS zooms the page into a field whose text is under 16px when it takes focus, and stays zoomed after.
   On touch screens every field is 16px or more (qa_smoke checks it); pinch zoom stays on. */
@media (pointer: coarse) { #q, #zq, #sort, #thwma-billing-alt { font-size: 16px; } }
/* "Buscar en SUPERUNICO" stands in for the placeholder once the phone header's logo has scrolled away.
   It is sized by the field, not the screen: the text and the wordmark scale together (12.3em in all) so the
   label ends 24px before the field's rounded end, 15.5px and a 110px wordmark in a field from 262px wide, and
   a field too narrow for 12px text shows the wordmark alone. cqi is the field's content box, 28px narrower
   than the field. In the app, with no menu or cart beside it, the field is wide. */
.srch-f { position: relative; container-type: inline-size; }
.q-br {
  position: absolute; top: 0; bottom: 0; left: 48px; right: 16px;
  display: flex; align-items: center; overflow: hidden;
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.q-br > span { white-space: nowrap; font-size: 15.5px; font-size: clamp(12px, (100cqi - 44px) / 12.3, 15.5px); font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.q-wm { display: inline-block; vertical-align: baseline; width: 7.1em; height: auto; margin-left: .39em; }
@container (max-width: 191px) {
  .q-bt { display: none; }
  .q-wm { width: min(110px, 100cqi - 44px); margin-left: 0; }
}
.hdr.cmp #q:placeholder-shown ~ .q-br { opacity: 1; transform: none; }
.hdr.cmp #q:placeholder-shown::placeholder { color: transparent; }
.srch-f input::-webkit-search-cancel-button { display: none; }
.kbd {
  font-size: 12px; font-weight: 680; color: #9C9CB0;
  border: 1.5px solid #E6E6EE; border-radius: 8px; padding: 1px 7px;
}
.qx {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #F1F1F5; color: var(--ink-2);
}
[hidden] { display: none !important; }
/* On a phone the open search covers the page, so it carries its own way out, on the right as on iOS: the
   app's back button covers the screen's top-left corner. */
.sp-x { display: none; }
.acts { display: flex; align-items: center; }
.ib {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; position: relative;
  transition: background .2s ease;
}
.ib:hover { background: var(--glass); }
/* Signed in, where the search keeps at least the width it has at 1024 px even with a long name: the icon
   becomes a pill with "Hola, name", on the same glass hover. */
.acc-hi { display: none; }
@media (min-width: 1280px) {
  .ib.acc.hi { width: auto; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; border-radius: 999px; }
  .ib.acc.hi svg { flex: none; }
  .acc-hi { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .acc-hi b { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-weight: 720; }
}
.ib .bdg {
  position: absolute; top: 3px; right: 1px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #fff; color: var(--pink);
  font-size: 11px; font-weight: 700; font-style: normal;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(120, 0, 40, .2);
}
.bdg:empty { display: none !important; }
.cartp {
  height: 50px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 14px;
  font-weight: 680;
  box-shadow: 0 8px 24px rgba(120, 0, 40, .18);
  transition: transform .2s ease;
}
.cartp:hover { transform: translateY(-1px); }
.cartp .ci { color: var(--pink); }
.cartp .cn {
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--pink); color: #fff;
  font-size: 12px; display: grid; place-items: center;
}
.cartp .cn.zero { background: #EDEDF3; color: var(--muted); }
.bump { animation: su-bump .55s var(--spring); }
@keyframes su-bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.pop { animation: su-tap-pop .42s var(--spring); }
@keyframes su-tap-pop { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 100% { transform: scale(1); } }
.ib.cart-m { display: none; }

/* ——— Aisle bar + mega menu ——— */
.dept { position: relative; background: #fff; box-shadow: inset 0 -1px 0 var(--line); }
.dept-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dept-b {
  flex: none; position: relative;
  height: 38px; padding: 0 10px; border-radius: 999px;
  background: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 680;
  transition: background .2s ease, color .2s ease;
}
.dept-b > svg { width: 18px; height: 18px; color: var(--pink); }
.dept-b::after { content: ""; position: absolute; right: -6px; top: 9px; bottom: 9px; width: 1px; background: var(--line); }
.dept-b:hover { background: #F4F4F8; }
.dept-b[aria-expanded="true"] { background: var(--on-bg); color: var(--on-fg); }
.dept-b .chev { display: inline-flex; opacity: .75; transition: transform .25s var(--ease); }
.dept-b[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dept-l {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
  padding-right: 64px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
}
.dept-l.sl {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 80px), transparent);
}
.dept-l::-webkit-scrollbar { display: none; }
.dept-l a {
  flex: none;
  height: 38px; padding: 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 620; color: var(--ink-2);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.dept-l a:hover { background: #F4F4F8; color: var(--ink); }
.dept-l a.on { background: var(--on-bg); color: var(--on-fg); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 30px 60px rgba(20, 16, 40, .2);
  max-height: calc(100vh - var(--hh) - 56px);
  overflow: auto;
  overscroll-behavior: contain;
  animation: su-drop .22s var(--ease);
}
.mega-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--pad);
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 300px;
  gap: 16px 28px;
}
@media (max-height: 740px) { .mega-in { padding-block: 12px; } }
.mg-ds { display: grid; gap: 2px; align-content: start; padding-right: 20px; box-shadow: inset -1px 0 0 var(--line); }
.mg-d { display: flex; align-items: center; gap: 12px; padding: 5px 10px 5px 5px; border-radius: 16px; transition: background .2s ease; }
.mg-d b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 680; letter-spacing: -.01em; }
.mg-d > svg { width: 16px; height: 16px; color: #C6C6D2; }
.mg-d:hover, .mg-d.on { background: #F6F6FA; }
.mg-d.on > svg { color: var(--pink); }
.mg-p { min-width: 0; }
.mg-all { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0 10px; padding: 6px 10px; border-radius: 12px; font-size: 14px; font-weight: 680; color: var(--pink-d); }
.mg-all:hover { background: var(--pink-50); }
.mg-sh { justify-self: start; margin: 12px 0 0 5px; }
.mega h5 { font-size: 12px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px 10px; }
.mg-c { display: grid; gap: 2px; align-content: start; padding-left: 26px; box-shadow: inset 1px 0 0 var(--line); }
.mg-r { display: flex; align-items: center; gap: 12px; padding: 4px 10px; border-radius: 16px; transition: background .2s ease; }
.mg-r .mg-i { width: 40px; height: 40px; border-radius: 13px; }
.mg-r:hover { background: #F6F6FA; }
.mg-r b { display: block; font-size: 14.5px; font-weight: 680; letter-spacing: -.01em; }
.mg-r small { display: block; font-size: 12.5px; font-weight: 590; color: var(--muted); margin-top: 1px; }
/* Flex, not grid (here and .cxp): in a grid the photo's % height follows the auto row, which grows to a tall photo and crops it. */
.mg-i {
  flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--t);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mg-i img { width: 80%; height: 84%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(40, 10, 30, .18)); transition: transform .3s var(--spring); }
.mg-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px 8px; }
.mg-a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 8px 4px 10px; border-radius: 20px;
  text-align: center; font-size: 13.5px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em;
  transition: background .2s ease;
}
.mg-a:hover { background: #F6F6FA; }
.mg-a .mg-i { width: 64px; height: 64px; border-radius: 30%; }
.mg-a .mg-i img { width: 70%; height: 78%; }
.mg-a:hover .mg-i img, .mg-r:hover .mg-i img { transform: translateY(-3px) scale(1.06); }
.mscrim { position: fixed; inset: 0; z-index: 39; background: rgba(20, 10, 26, .32); display: none; }
.mscrim.show { display: block; animation: su-fade .2s ease; }

/* Computers: the aisles as the home's circles, in a row under the header that scrolls away; the text bar
   waits behind the header and fades in once the row has gone under it. The home's own circles hide. */
.dept-c { display: none; }
@media (min-width: 821px) {
  .hdr-in { z-index: 2; }
  .dept {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
    opacity: 0; visibility: hidden;
    box-shadow: inset 0 -1px 0 var(--line), var(--shadow-bar);
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  .hdr.dk { box-shadow: none; }
  .hdr.dk .dept { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
  /* The menu lives in the text bar, and a faded parent hides its children whatever they set, so the bar
     shows while the menu is open, over the circles row if need be. The menu opens in one place at any scroll. */
  .dept:has(.mega:not([hidden])) { opacity: 1; visibility: visible; transition: none; }
  .mscrim { z-index: 38; }
  .dept-c { display: block; position: relative; z-index: 39; background: #fff; box-shadow: inset 0 -1px 0 var(--line); }
  .dc-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: flex-start; gap: 10px; }
  .dc-in > .dept-b, .dc-a { margin-top: calc(17px + var(--bub) / 2 - 19px); }
  .dc-r { position: relative; flex: 1; min-width: 0; }
  .dc-l {
    position: relative;
    display: flex; gap: 8px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 4px; overscroll-behavior-x: none;
    padding: 17px 4px 12px;
    -webkit-mask-image: linear-gradient(90deg, var(--ml, #000), #000 56px, #000 calc(100% - 56px), var(--mr, #000));
    mask-image: linear-gradient(90deg, var(--ml, #000), #000 56px, #000 calc(100% - 56px), var(--mr, #000));
  }
  .dc-l::-webkit-scrollbar { display: none; }
  .dc-l.fl { --ml: transparent; }
  .dc-l.fr { --mr: transparent; }
  .dc-a { position: absolute; top: 0; z-index: 1; box-shadow: inset 0 0 0 1.5px var(--line), 0 6px 16px rgba(20, 16, 40, .12); }
  .dc-a[data-crail="-1"] { left: 0; }
  .dc-a[data-crail="1"] { right: 0; }
  .dc-in { --bub: 69px; }
  .dc-l .bub { flex: 0 0 84px; }
  .dc-l .bub-c { width: var(--bub); height: var(--bub); }
  .dc-l .bub-c img { bottom: 7.5px; }
  .dc-l .bub b { margin-top: 7px; }
  .bub.on .bub-c { box-shadow: 0 0 0 2px #fff, 0 0 0 3.25px var(--pink); }
  .bub.on b { color: var(--pink-d); }
  .bsec { display: none; }
}
body.flow .dept-c { display: none !important; }

/* ——— Search panel ——— */
.sp {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  max-height: min(76vh, 680px);
  overflow: auto;
  padding: 0;
  display: none;
  z-index: 45;
  overscroll-behavior: contain;
}
.srch.open .sp { display: block; animation: su-drop .22s var(--ease); }
@keyframes su-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sp-in { padding: 14px 12px 8px; }
.sp h4 {
  font-size: 12px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 4px 6px 8px;
}
.sp h4:not(:first-child) { margin-top: 16px; }
.sp-hint { margin: 2px 6px 4px; color: var(--muted); font-size: 13.5px; font-weight: 590; }
.stg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px; }
.stc {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 100%; min-height: 46px; padding: 6px 14px 6px 6px;
  border-radius: 16px; background: #F5F5F9;
  transition: background .2s ease;
}
.stc:hover, .stc.kb { background: #ECECF3; }
.stc-i {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; color: var(--pink-d); font-size: 12px; font-weight: 700;
}
.stc-i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.stc-t { min-width: 0; display: grid; }
.stc-t b { font-size: 14px; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stc-t small { color: var(--muted); font-size: 12px; font-weight: 590; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.chip.rc { padding: 0 6px 0 12px; gap: 2px; }
.chip.rc a { display: inline-flex; align-items: center; gap: 7px; height: 100%; }
.chip.rc a svg { width: 15px; height: 15px; opacity: .45; }
.sp-ft {
  position: sticky; bottom: 0; z-index: 3;
  padding: 10px 12px 12px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 14px);
}
.sp-src { margin: 8px 6px 0; text-align: center; color: var(--muted); font-size: 11.5px; font-weight: 590; }
.sp-wa { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font-size: 13.5px; font-weight: 620;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.chip:hover { background: #EAEAF1; }
.chip:active { transform: scale(.97); }
.chip.on { background: var(--on-bg); color: var(--on-fg); }
.chip b { background: var(--pink); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; font-size: 11.5px; display: grid; place-items: center; padding: 0 6px; }
.chip .rx { opacity: .5; }
.sr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border-radius: 16px;
}
.sr:hover, .sr.kb { background: #F5F5F9; }
.sr-a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.sr-i { position: relative; width: 52px; height: 52px; border-radius: 14px; background: var(--tile); isolation: isolate; }
.sr-i img { width: 100%; height: 100%; padding: 2px; object-fit: contain; mix-blend-mode: multiply; border-radius: inherit; }
.sr-k {
  position: absolute; left: -3px; top: -3px; z-index: 1;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: #A2CA60; color: #fff; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(20, 16, 40, .18);
  font-size: 10px; font-weight: 700;
}
.sr-t { min-width: 0; display: grid; gap: 2px; }
.sr-t b {
  font-size: 14px; font-weight: 620; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp mark { background: none; color: var(--pink-d); }
.sr-p { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr.oos .sr-i img { filter: grayscale(1); opacity: .5; }
.sr.oos .sr-p .m { color: var(--muted); }
.sr.sk { pointer-events: none; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
.sr.sk .sr-i, .sr.sk i { position: relative; overflow: hidden; background: var(--sk); }
.sr.sk i { display: block; height: 12px; border-radius: 6px; width: 78%; }
.sr.sk i + i { width: 30%; margin-top: 6px; }
.sr.sk .sr-i::before, .sr.sk i::before { content: ""; position: absolute; inset: 0; background: var(--sheen); transform: translateX(-100%); animation: su-sheen 1.5s .3s linear infinite; }
.sp-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 16px;
  background: var(--pink); color: #fff; font-weight: 680; font-size: 15px;
  box-shadow: 0 8px 18px rgba(255, 38, 104, .24);
}
.sp-all:hover, .sp-all.kb { background: var(--pink-d); }
.sp-none { padding: 22px 8px 8px; text-align: center; color: var(--muted); font-weight: 590; }
.sp-none b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.sp-none .mark { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-50); color: var(--pink-d); }
.srel { display: flex; align-items: center; gap: 10px; min-width: 0; margin: -4px 0 6px; }
.srel:empty { display: none; }
.srel-l { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-weight: 650; }
.srel .xsw { flex: 1; min-width: 0; }
.srel .chip small { color: var(--muted); font-weight: 590; font-size: 12px; }
.lst > .sp-src { text-align: left; margin: 0 0 12px; }

/* ——— Layout ——— */
main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) 56px;
  min-height: 70vh;
}
#main > .view { animation: su-viewIn .38s var(--ease); }
@keyframes su-viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.e { display: inline-block; margin-right: 8px; font-style: normal; }

/* ——— Hero bento ——— */
.bento {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 16px;
  margin: 26px 0 8px;
}
.bento-s { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.tile {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  min-height: 212px;
  background: var(--t, #F4F4F7);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20, 16, 40, .12); }
.tile:hover .cut { --lift: -6px; }
.tile.big {
  min-height: 440px;
  padding: 34px;
  color: #fff;
  background:
    radial-gradient(90% 110% at 100% 0%, #FF7FA6 0%, rgba(255, 127, 166, 0) 60%),
    radial-gradient(70% 90% at 0% 100%, #D10C4E 0%, rgba(209, 12, 78, 0) 70%),
    var(--pink);
}
/* The hero on computers: 308px up to 1440px wide, easing to 260px from about 2126px (the user, 2026-10-12: a 30 %
   smaller footprint than the 440px it had; it used to grow to 560px on wide screens). The four side tiles follow
   the hero's height with compact type, so their title, two lines and "Ver" still fit at the shortest. */
@media (min-width: 1081px) {
  body.wide .bento { --hero-h: clamp(260px, 308px - (100vw - 1440px) * .07, 308px); }
  body.wide .tile.big { min-height: var(--hero-h); padding: 28px 30px 26px; }
  body.wide .tile.big h3 { font-size: clamp(26px, 2.3vw, 34px); margin-top: 10px; }
  body.wide .tile.big p { font-size: 15.5px; margin-top: 10px; }
  body.wide .tile.big .go { margin-top: 16px; }
  body.wide .bento-s .tile { min-height: calc((var(--hero-h) - 16px) / 2); padding: 18px 20px 16px; }
  body.wide .bento-s .tile h3 { font-size: 22px; }
  body.wide .bento-s .tile p { font-size: 13.5px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
}
.tile.big::after {
  content: "";
  position: absolute; z-index: -1;
  width: 520px; height: 520px; right: -160px; bottom: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 65%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-size: 12px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(26, 26, 46, .07);
}
.tile.big .eyebrow { background: rgba(255, 255, 255, .2); }
.tile h2 {
  font-size: clamp(38px, 3.7vw, 56px);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 700;
  margin-top: 14px;
  max-width: 7.5em;
}
.tile h3 {
  font-size: 25px;
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 700;
  max-width: 7em;
}
.tile p { font-weight: 590; font-size: 14px; color: rgba(26, 26, 46, .66); margin-top: 6px; max-width: 12em; }
.tile.big p { color: rgba(255, 255, 255, .92); font-size: 16.5px; max-width: 15em; margin-top: 14px; line-height: 1.4; }
.tile .go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 680; margin-top: 12px;
  color: var(--ink);
}
.tile.big .go {
  height: 50px; padding: 0 22px; border-radius: 999px;
  background: #fff; color: var(--pink-d); font-size: 15px;
  box-shadow: 0 12px 26px rgba(120, 0, 40, .28);
  align-self: flex-start;
}
.tile .go svg { transition: transform .25s var(--ease); }
.tile:hover .go svg { transform: translateX(3px); }
.cut {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  filter: drop-shadow(0 16px 20px rgba(40, 10, 30, .22));
  transform: translateY(var(--lift, 0)) rotate(var(--r, 0deg));
  transition: transform .5s var(--spring);
  object-fit: contain;
}
.tile.big .cut { filter: drop-shadow(0 22px 26px rgba(100, 0, 35, .38)); animation: su-float 7s ease-in-out infinite; }
@keyframes su-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
.pile { position: absolute; left: 50%; right: 1%; top: 7%; bottom: 2%; z-index: -1; }
.big-t { max-width: 54%; }
.tile .ca { right: 21%; bottom: -5%; width: 33%; height: 68%; --r: -6deg; }
.tile .ca.dup { right: 15%; }
.tile .cb { right: -5%; bottom: -8%; width: 37%; height: 72%; --r: 12deg; }
.bento-s .tile { padding: 26px 26px 24px; }
.bento-s .tile h3 { font-size: 27px; }
.bento-s .tile p { max-width: 8.6em; line-height: 1.35; margin-top: 8px; }
.tile .go { align-self: flex-start; }
.tile.big .go { margin-top: 22px; }
/* A tile set to "Imagen": the campaign art fills it edge to edge, with no text, button or photos on top, and
   the whole tile is one link. Tiles change shape with the screen, so the art is cropped from its middle. */
.tile.art, .pr.art { padding: 0; background: #F4F4F7; }
.tile.art::after { content: none; }
.tile.art > img, .pr.art > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.empty .mark svg { width: 38px; height: 38px; }
.strip .st, .strip .xs { display: none; }

/* ——— Section heads ——— */
.sec { margin-top: 44px; }
.sh {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.sh h2 { font-size: 25px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.sh-l { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; }
.sh-l svg { flex: none; width: .88em; height: .88em; color: var(--pink); transition: transform .25s var(--ease); }
.sh-l:hover svg { transform: translateX(3px); }
.sh p { color: var(--muted); font-weight: 590; font-size: 14px; margin-top: 3px; }
.sh-a { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.more {
  font-size: 14px; font-weight: 680; color: var(--pink-d);
  padding: 8px 12px; border-radius: 999px;
  transition: background .2s ease;
  white-space: nowrap;
}
.more:hover { background: var(--pink-50); }
.arr {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background .2s ease, opacity .2s ease;
}
.arr:hover { background: #F6F6FA; }
.arr:disabled { opacity: .35; cursor: default; }

/* ——— Aisle bubbles ——— */
.bubs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 26px 4px 6px;
  scroll-padding-inline: 4px;
  margin: -18px -4px 0;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: none;
}
.bubs::-webkit-scrollbar { display: none; }
.bub {
  flex: 0 0 108px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  scroll-snap-align: start;
}
.bub-c {
  width: 92px; height: 92px;
  border-radius: 30%;
  background: var(--t);
  position: relative;
  transition: transform .3s var(--spring), box-shadow .3s ease;
}
.bub-c .clip {
  position: absolute;
  inset: 0;
  clip-path: inset(-48% 0 0 0 round 0 0 30% 30%);
}
/* Every photo stands at one height: its width follows its own shape, up to nearly the circle's. */
.bub-c img {
  position: absolute;
  left: 50%; bottom: 10px;
  width: auto; max-width: 96%; height: 92%;
  object-fit: contain;
  object-position: center bottom;
  translate: -50% 0;
  filter: drop-shadow(0 6px 7px rgba(40, 10, 30, .2));
  transition: transform .35s var(--spring);
}
.bub-c .emo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 36px; }
.bub:hover .bub-c img { transform: translateY(-5px) scale(1.06) rotate(-3deg); }
.bub:hover .bub-c { transform: translateY(-2px); }
.bub b { font-size: 13px; font-weight: 650; margin-top: 9px; line-height: 1.2; letter-spacing: -.01em; }
.bub small { font-size: 11.5px; font-weight: 590; color: var(--muted); margin-top: 1px; }
.bub.all .bub-c { display: grid; place-items: center; }
.bub.fv .bub-c, .bub.pas .bub-c { background: var(--pink-50); color: var(--pink); }
.bub.fv:hover .bub-c, .bub.pas:hover .bub-c { background: var(--pink-100); }
.pcols { margin-top: 48px; }

/* ——— Aisle board ——— */
.board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ac {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 10px 16px 10px 10px;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: transform .3s var(--spring), box-shadow .3s ease;
}
.ac:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20, 16, 40, .08); }
.ac-m {
  height: 100px;
  border-radius: 18px;
  background: var(--t, var(--tile));
  position: relative;
  overflow: hidden;
}
.ac-m img {
  position: absolute;
  left: 50%; bottom: 8px;
  width: 76%; height: calc(100% - 16px);
  object-fit: contain;
  object-position: center bottom;
  translate: -50% 0;
  filter: drop-shadow(0 8px 8px rgba(40, 10, 30, .18));
  transition: transform .4s var(--spring);
}
.ac:hover .ac-m img { transform: translateY(-3px); }
.ac-b { min-width: 0; display: grid; gap: 2px; }
.ac-b b {
  font-size: 18px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac > svg { color: #C6C6D2; transition: transform .25s var(--ease), color .2s ease; }
.ac:hover > svg { color: var(--pink); transform: translateX(3px); }
.board.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles .ac { grid-template-columns: 108px minmax(0, 1fr) auto; gap: 14px; }
.tiles .ac-m { height: 82px; }
.tiles .ac-b b { font-size: 16.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dbar { margin: 0 0 4px; }
.dbar + .sec { margin-top: 26px; }
.brw > .sec:first-child { margin-top: 20px; }
.hub .sec, .hub .pcols { scroll-margin-top: calc(var(--hh) + 72px); }
.hub .sec:focus, .hub .pcols:focus { outline: none; }
#sec-all { scroll-margin-top: calc(var(--hh) + 12px); }
.hub:not(.dpt) #sec-all { margin-top: 0; }
#sec-all { scroll-margin-top: calc(var(--hh) + 12px); }
.hub:not(.dpt) #sec-all { margin-top: 0; }

/* ——— Rails ——— */
/* Every row that scrolls sideways and snaps follows three rules, or iOS Safari keeps the next vertical
   swipe that starts on it:
   - overflow-y: hidden, so it has one axis and never takes a vertical pan;
   - overscroll-behavior-x: none, so it has no sideways bounce;
   - its first and last snap points are its first and last scroll positions (scroll-padding equal to its
     inline padding).
   A finger lifted while the row is past its end snap point makes WebKit aim the glide back against the
   finger, and UIKit then takes seconds to settle; a row still settling catches the next touch, and that
   touch scrolls nothing. Fixed in WebKit on 2026-10-08 (bug 321127), not yet in a shipped Safari. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 186px;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: none;
  padding: 2px 2px 8px;
  scroll-padding-inline: 2px;
  margin: 0 -2px;
  scroll-behavior: smooth;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
/* A card on its way: the photo's tile, and bars drawn inside the real card's boxes where the price, the name
   and the size go, so it is a card's height at every column width. One sweep crosses it while it loads (.ld),
   unless it waits off screen (.away). */
.pc-wait { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; visibility: hidden; }
.pc-wait .pc-m, .pc-wait .pc-b > *::before, .pc-wait .pc-t::after { visibility: visible; }
.pc-wait .pc-b > * { position: relative; }
.pc-wait .pc-b > *::before, .pc-wait .pc-t::after { content: ""; position: absolute; left: 0; border-radius: 6px; background: var(--sk); }
.pc-bs { display: grid; min-width: 0; }
.pc-bs > * { grid-area: 1 / 1; }
.pc-wait .sz > *::before, .pc-wait .sz .pc-t::after { content: none; }
.pc-wait .pc-p::before { top: 4px; height: 15px; width: 46%; }
.pc-wait .pc-t::before { top: 4px; height: 11px; width: 92%; }
.pc-wait .pc-t::after { top: calc(1.36em + 4px); height: 11px; width: 62%; }
.pc-wait .pc-s::before { top: 4px; height: 9px; width: 40%; }
.ld > .pc-wait:not(.away)::after, .pc-wait.on::after { content: ""; position: absolute; inset: 0; visibility: visible; background: var(--sheen); transform: translateX(-100%); animation: su-sheen 1.5s .3s linear infinite; }
.arrive { animation: su-fade .3s ease both; }
.rail.sm { grid-auto-columns: 140px; gap: 12px; }
.endc {
  aspect-ratio: 1;
  border-radius: var(--r);
  background: var(--pink-50);
  color: var(--pink-dd);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-weight: 680; font-size: 15px; text-align: center; padding: 16px;
  transition: background .2s ease;
}
.endc:hover { background: var(--pink-100); }
.endc span { width: 46px; height: 46px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; }

/* ——— Product card ——— */
.pc { position: relative; min-width: 0; display: flex; flex-direction: column; }
/* The photo's corners: the heart at the top left (top --fy, size --fs), the especialidad circles at the
   bottom left (inset --ex, size --eb), the + and its stepper at the bottom right (inset --qx, height --qh,
   open width --qw; --qnow is its width now). The circles read the others' boxes to keep clear of them, so a
   card's sizes are set here and nowhere else. */
.pc-top { position: relative; --ex: 10px; --eb: 26px; --fy: 10px; --fs: 34px; --qx: 10px; --qh: 40px; --qw: 118px; --qnow: var(--qh); }
.pc-top:has(.qa.on) { --qnow: var(--qw); }
.pc-top:has(.nt) { --qnow: 104px; }
.pc-top:has(.nt.on) { --qnow: 128px; }
.pc-top:has(.pc-when) { --fy: 36px; }
.pc-top:has(.fav.on, .fav:focus-visible) { --fav: 1; }
@media (hover: hover) { .pc:hover .pc-top { --fav: 1; } }
.pc-m {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r);
  background: var(--tile);
  overflow: hidden;
  isolation: isolate;
}
/* Loading states, only for what arrives after the page is on screen. The placeholder holds the content's
   space at once; the sweep starts after 300 ms, so a short wait stays calm. A photo on its way sweeps only
   while it is on screen (.wt, set by script): off screen it would cost the phone memory for nothing. The
   name is ours because the UNICOCASH plugin defines its own "shimmer" on every page. */
.pc-m.wt::before { content: ""; position: absolute; inset: 0; background: var(--sheen); transform: translateX(-100%); animation: su-sheen 1.5s .3s linear infinite; }
@keyframes su-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pc-i {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .35s ease, transform .55s var(--ease);
}
.pc-i.ok { opacity: 1; }
.pc:hover .pc-i { transform: scale(1.05); }
.ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #BDBDCB; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  background: radial-gradient(circle at 50% 42%, #FBFBFD, var(--tile) 72%);
}
/* Especialidad marks: the store's circles and colors, with the name on hover, focus or tap. */
.ebs { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; gap: 4px; }
/* On a card the circles keep their place at the bottom left, as on the live site (the user, 2026-10-12: "instead
   of moving up, keep position with the +1"). Up to three print: the first ones and "+N" for the rest. Where the
   room beside the collapsed + is short for them, they close up and overlap (at least 10 px of each shows) rather
   than rise or wrap; the open stepper (z 3) covers them for the moment it is open and they reappear unmoved.
   --n, printed with them, is how many show; --na is the total once "+N" is opened. */
.pc-top .ebs {
  left: var(--ex); bottom: var(--ex); gap: 0; translate: none;
  --room: calc(100cqw - var(--ex) - var(--qx) - var(--qh) - 6px);
}
.pc-top .ebs.all { --n: var(--na, var(--n)); }
.pc-top .ebs > * + * { margin-left: clamp(10px - var(--eb), (var(--room) - var(--n, 1) * var(--eb)) / max(var(--n, 1) - 1, 1), 4px); }
.pc-top .eb { width: var(--eb); height: var(--eb); }
@supports not (width: 1cqw) {
  .pc-top .ebs > * + * { margin-left: 4px; }
}
.eb {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 6px rgba(20, 16, 40, .14);
  font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.eb svg { width: 15px; height: 15px; }
.eb .sm { font-size: 8.5px; letter-spacing: 0; }
.eb.pa { background: #fff; }
.eb.pa svg { width: 100%; height: 100%; border-radius: 50%; }
.eb.more { background: #6B7280; font-size: 10.5px; }
.ebs:not(.all) .eb.x, .ebs.all .eb.more { display: none; }
/* Not rendered until it opens: an invisible but laid-out label on a right-column card widened the page by up to 16 px,
   and the Android app's WebView lays the page out at that width and lets it pan (the user, 2026-10-13, video). */
.eb-l {
  position: absolute; left: -2px; bottom: calc(100% + 8px);
  height: 26px; padding: 0 10px; border-radius: 999px;
  display: none; align-items: center; white-space: nowrap;
  background: rgba(26, 26, 46, .94); color: #fff;
  box-shadow: 0 6px 16px rgba(20, 16, 40, .18);
  font-size: 12px; font-weight: 650; letter-spacing: 0;
  pointer-events: none;
}
.eb:focus-visible .eb-l, .eb.open .eb-l { display: flex; animation: su-fade .15s ease; }
@media (hover: hover) { .eb:hover .eb-l { display: flex; animation: su-fade .15s ease; } }
.fav {
  position: absolute; left: var(--ex); top: var(--fy);
  width: var(--fs); height: var(--fs); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92);
  color: var(--ink-2);
  box-shadow: 0 2px 8px rgba(20, 16, 40, .1);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s ease, transform .25s var(--spring), color .2s ease;
  z-index: 2;
}
.pc:hover .fav, .fav.on, .fav:focus-visible { opacity: 1; transform: none; }
.fav.on { color: var(--pink); }
.fav.pop { animation: su-heart .5s var(--spring); }
@keyframes su-heart { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.qa {
  position: absolute; right: var(--qx); bottom: var(--qx);
  height: var(--qh); width: var(--qh);
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  display: flex; flex-direction: row-reverse; align-items: center;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(255, 38, 104, .36);
  transition: width .32s var(--spring), background .2s ease;
  z-index: 3; /* above the especialidad circles (z 2): the open stepper covers them, they never move */
}
.qa.on { width: var(--qw); }
.qa button { width: var(--qh); height: var(--qh); flex: 0 0 var(--qh); display: grid; place-items: center; color: #fff; border-radius: 50%; }
.qa button:hover { background: rgba(255, 255, 255, .16); }
.qa button:active { transform: scale(.9); }
.qa .n { flex: 1; text-align: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.qa:not(.on) .n, .qa:not(.on) .qm { opacity: 0; pointer-events: none; }
.qa.inl { position: static; box-shadow: 0 6px 14px rgba(255, 38, 104, .28); --qh: 36px; --qw: 108px; }
.qa .qp[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.qa .qp[aria-disabled="true"]:active { transform: none; }
.pc.oos .pc-i { filter: grayscale(1); opacity: .5; }
.pc.oos .pc-i.ok { opacity: .5; }
.pc.oos .pc-p .m { color: var(--muted); }
.oos-b { padding: 3px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 680; letter-spacing: .01em; white-space: nowrap; align-self: center; }
/* An especialidad in banner mode (live: "Destacado"): the term's label on its two colours, one per product.
   It leaves room for the heart on the left. */
.bn {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  max-width: calc(100% - 64px); height: 24px; padding: 0 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--bt);
  box-shadow: 0 2px 8px rgba(20, 16, 40, .12);
  font-size: 11.5px; font-weight: 680; line-height: 24px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* "Compraste en", where live's Complementa puts it: yellow, top left. The heart and the banner move a row down.
   Pack photos carry their "N PACK" circle in the image, from 65% across at the earliest, so the whole tag
   must end before it: the text shrinks with the card down to 8 px, and a card too narrow even then
   stacks it on two lines. */
.pc-top { container-type: inline-size; }
.pc-when {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  max-width: calc(100% - 12px); height: 2.1em; padding: 0 .5em; border-radius: 999px;
  background: var(--bought-bg); color: var(--bought-fg);
  box-shadow: 0 2px 8px rgba(120, 90, 0, .18);
  font-size: clamp(8px, calc(6.3cqi - 1.1px), 10.5px); font-weight: 700; line-height: 2.1em;
  white-space: nowrap; overflow: hidden; pointer-events: none;
}
.pc-top:has(.pc-when) .bn { top: 36px; }
/* In browsing grids the label is a quiet gray (the user, 2026-10-13); the shopper's own lists, rails and Complementa keep the yellow. */
body.su-browse .grid.products .pc-when { background: rgba(107, 114, 128, .96); color: #F3F4F6; box-shadow: 0 1px 4px rgba(20, 16, 40, .12); font-weight: 650; }
@container (max-width: 137px) { .pc-when { height: auto; padding: .4em .55em; border-radius: .8em; font-size: clamp(8px, 7cqi, 9px); line-height: 1.2; white-space: normal; } .pc-wp { display: block; } }
@container (max-width: 239px) { .pc-when.y { height: auto; padding: .4em .55em; border-radius: .8em; font-size: clamp(8px, 7cqi, 9px); line-height: 1.2; white-space: normal; } .pc-when.y .pc-wp { display: block; } }
.pd-bn {
  display: block; width: fit-content; max-width: 100%; height: 28px; margin: 0 0 10px; padding: 0 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--bt);
  font-size: 13px; font-weight: 680; line-height: 28px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nt {
  position: absolute; right: var(--qx); bottom: var(--qx); z-index: 2;
  height: var(--qh); width: var(--qnow); padding: 0 14px 0 11px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line), 0 6px 14px rgba(20, 16, 40, .08);
  font-size: 13px; font-weight: 680;
}
.nt svg { width: 17px; height: 17px; }
.nt.on { background: var(--ink); color: #fff; box-shadow: none; }
.pc-b { padding: 10px 2px 0; min-width: 0; }
.pc-p { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pc-p .m { font-size: 19px; }
.was { color: var(--muted); font-size: 13px; font-weight: 590; }
.off { padding: 3px 7px; border-radius: 6px; background: #DCFCE7; color: #166534; font-size: 11px; font-weight: 680; letter-spacing: .01em; white-space: nowrap; align-self: center; }
.pd-p .was { font-size: 17px; }
.pd-p .off { font-size: 13px; padding: 4px 9px; }
.pc-t {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.36;
  font-weight: 590;
  color: #2A2A3E;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.72em;
}
.pc-t a:hover { color: var(--pink-d); }
.pc-s {
  margin-top: 3px;
  font-size: 12.5px; font-weight: 590; color: var(--muted);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  min-height: 1.4em;
}
.m { font-weight: 700; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.m-s { font-size: .7em; margin-right: 1px; vertical-align: .2em; }
.m-c { font-size: .58em; vertical-align: .62em; margin-left: 1px; letter-spacing: -.01em; }

/* ——— Brands ——— */
.brs { grid-auto-columns: 132px; gap: 12px; }
.br { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.br-l {
  width: 132px; height: 88px; border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  display: grid; place-items: center; padding: 14px;
  transition: box-shadow .2s ease, transform .3s var(--spring);
}
.br-l img { max-width: 100%; max-height: 52px; object-fit: contain; }
.br:hover .br-l { box-shadow: inset 0 0 0 2px var(--pink); transform: translateY(-2px); }
.br b { font-size: 13px; font-weight: 650; line-height: 1.2; }
.br small { font-size: 11.5px; color: var(--muted); font-weight: 590; margin-top: -6px; }
.mono {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--pink-50); color: var(--pink-d);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -.02em;
}

/* ——— Promo banners ——— */
.promo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 30px;
  padding: 36px 40px;
  margin-top: 48px;
  min-height: 230px;
  display: flex; flex-direction: column; justify-content: center;
}
.promo h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-top: 12px; max-width: 12em; }
.promo p { font-size: 16px; font-weight: 590; margin-top: 10px; max-width: 26em; line-height: 1.45; }
.promo .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.p-wa { background: linear-gradient(120deg, #DDF7E8 0%, #C8F1DA 60%, #B6EBCD 100%); color: var(--ok-dd); }
.p-wa .eyebrow { background: rgba(11, 59, 36, .08); }
.p-wa p { color: rgba(11, 59, 36, .75); }
.p-app { background: radial-gradient(80% 140% at 100% 0%, #3A2A5A 0%, rgba(58,42,90,0) 60%), var(--ink); color: #fff; }
.p-app .eyebrow { background: rgba(255, 255, 255, .12); }
.p-app p { color: rgba(255, 255, 255, .78); }
.btn-wa {
  height: 50px; padding: 0 22px; border-radius: 999px;
  background: var(--wa); color: #06361E;
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 26px rgba(37, 211, 102, .32);
  transition: transform .2s ease;
}
.btn-wa:hover { transform: translateY(-1px); }
.store {
  height: 50px; padding: 0 18px 0 14px; border-radius: 16px;
  background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .2s ease;
}
.store:hover { transform: translateY(-1px); }
.store small { display: block; font-size: 10.5px; font-weight: 620; color: var(--muted); line-height: 1; }
.store b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.promo .cut { z-index: -1; }
.phone {
  position: absolute; right: 7%; top: 30px;
  width: 210px; height: 400px;
  border-radius: 38px;
  background: #0D0D18;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 2px #2E2E44;
  rotate: -8deg;
  z-index: -1;
}
.phone-s { height: 100%; border-radius: 30px; background: #fff; overflow: hidden; }
.phone-h { background: var(--pink); padding: 16px 12px 12px; display: grid; gap: 8px; }
.phone-h img { height: 13px; width: auto; }
.phone-h i { height: 20px; border-radius: 999px; background: #fff; }
.phone-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.phone-g span { aspect-ratio: 1; border-radius: 12px; background: var(--tile); overflow: hidden; isolation: isolate; }
.phone-g img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.phone-g em { display: block; height: 7px; border-radius: 4px; background: #EEEEF3; margin-top: 4px; }
.p-uc {
  color: #fff;
  background:
    radial-gradient(70% 120% at 100% 0%, #FF8FB0 0%, rgba(255, 143, 176, 0) 60%),
    radial-gradient(60% 90% at 0% 100%, #C8084A 0%, rgba(200, 8, 74, 0) 70%),
    var(--pink);
}
.p-uc .uc-eb { width: 150px; height: auto; }
.p-uc h3 { max-width: 13em; }
.p-uc p { color: rgba(255, 255, 255, .9); }
.p-uc p b { color: #fff; font-weight: 700; }
.btn.w { background: #fff; color: var(--pink-d); box-shadow: 0 12px 26px rgba(120, 0, 40, .25); }
.btn.w:hover { background: var(--pink-50); }
.btn.o { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.btn.o:hover { background: rgba(255, 255, 255, .24); }
.uc-art { position: absolute; right: 5%; bottom: 26px; z-index: -1; display: flex; align-items: flex-end; gap: 14px; }
.uc-art span { flex: 0 0 auto; display: grid; justify-items: center; gap: 8px; }
.uc-art img { width: var(--s); height: var(--s); max-width: none; rotate: var(--r); filter: drop-shadow(0 16px 22px rgba(90, 0, 30, .35)); }
.uc-art b { padding: 4px 11px; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.uc-art .on b { background: #fff; color: var(--pink-d); }

/* ——— ?app=1: the page inside the phone app. The app's injected CSS hides the header cart, footer
   and WhatsApp button, and lays its web view out above its native tabs; this preview draws the tabs
   inside the page, in the bottom 88px (theme-blueprint.mdc, "The app", rule 10). It also hides any .header-top,
   so the theme's delivery strip must never carry that class (live's top bar is .whb-top-bar and shows). ——— */
html.app #ft, html.app .cartp, html.app .ib.cart-m, html.app .mobile-nav, html.app .joinchat, html.app #su-ab { display: none !important; }
@media (max-width: 820px) {
  html.app .hdr-in { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo zone" "srch srch"; }
  html.app .acts { display: none; }
}
@media (max-width: 380px) {
  .p-uc .uc-art { gap: 6px; }
  .p-uc .uc-art img { width: calc(var(--s) * .6); height: calc(var(--s) * .6); }
}

/* ——— Lists: aisle, search, especialidad, brand ——— */
/* The title is one line. The way up is a chevron on it, as shopping apps do, named "Volver a <parent>"
   for screen readers and on hover; on computers the sidebar shows the parent too. The chevron is as tall
   as the title's first line (--h is the title's size), so it stays on that line however the title wraps. */
.lst, .dpt, .doc, .zones { padding-top: 20px; }
:root { --th: clamp(28px, 2.7vw, 36px); }
.bh { --h: var(--th); display: flex; align-items: flex-start; margin: 0 0 12px; }
.bh h1 { min-width: 0; font-size: var(--h); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.bh h1 small { color: var(--muted); font-size: inherit; }
.up {
  position: relative; flex: none; display: grid; place-items: center;
  width: 34px; height: calc(var(--h) * 1.05); margin: 0 2px 0 -10px;
  border-radius: 12px; color: var(--muted);
  transition: color .2s ease, background-color .2s ease;
}
/* A 40 px tall tap area on the shorter phone title, without making the line taller. */
.up::after { content: ""; position: absolute; inset: calc(50% - 20px) 0; }
.up svg { width: 24px; height: 24px; }
.up:hover { color: var(--pink-d); background: var(--pink-50); }
.bhb {
  display: flex; align-items: center; gap: 18px;
  margin: 12px 0 20px; padding: 18px;
  border-radius: 24px; background: var(--tile);
}
.bhb .br-l { width: 120px; height: 80px; flex: 0 0 auto; box-shadow: none; }
.bhb small { font-size: 12px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.bhb h1 { font-size: 34px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.lbar {
  position: sticky;
  top: var(--hh);
  z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0;
  margin: 0 0 6px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}
.lbar .sortw { order: 3; }
.hbar { display: none; }
.fbtn { flex: 0 0 auto; order: 2; }
.lbf { display: none; }
.lbar .fbtn, .lbar .sortw select { height: 40px; background: #fff; box-shadow: inset 0 0 0 1px #E2E2EA; }
.lbar .fbtn:hover, .lbar .sortw select:hover { box-shadow: inset 0 0 0 1px #C8C8D4; }
.lbar .fbtn.on { background: var(--on-bg); color: var(--on-fg); box-shadow: none; }
.xsw { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.xs {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.xs::-webkit-scrollbar { display: none; }
.xs.fl { --fl: 34px; }
.xs.fr { --fr: 44px; }
.xsw .xa {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: none; place-items: center;
  background: #fff; color: var(--ink);
  box-shadow: 0 2px 10px rgba(20, 16, 40, .16);
}
.xsw .xa svg { width: 16px; height: 16px; }
.xsw .xa.l { left: 0; }
.xsw .xa.r { right: 0; }
@media (hover: hover) and (pointer: fine) {
  .xsw:has(.xs.fl) .xa.l, .xsw:has(.xs.fr) .xa.r { display: grid; }
}
/* Aisle pills: white with a hairline, the aisle's photo on its tile colour, and the current one in
   the brand's light pink. Under the pink header they read as one clean row, not grey blocks. */
.cx { flex: 0 0 auto; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px #E2E2EA; }
.cx:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #C8C8D4; }
.cx.on { background: var(--on-bg); color: var(--on-fg); box-shadow: none; }
.lbar .cx { height: 40px; }
.cxi { padding: 0 15px 0 4px; gap: 8px; }
.cxp {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--t, var(--tile)); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cxp img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.side { display: none; }
@media (min-width: 1081px) {
  .browse { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .bmain { min-width: 0; }
  .side {
    display: block;
    position: sticky; top: calc(var(--hh) + 18px);
    max-height: calc(100vh - var(--hh) - 36px); overflow: auto; overscroll-behavior: contain;
    padding: 4px 6px 16px 0;
    /* Its heading (the parent, "Alimentos") sits on the page title's baseline, so the two read as one
       line: the title's baseline is .806 of its size down, the heading's 27 px into the sidebar. */
    margin-top: calc(var(--th) * .806 - 27px);
    scrollbar-width: thin;
  }
  .side ul { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }
  .side ul ul { margin: 2px 0 6px 12px; padding-left: 8px; box-shadow: inset 1.5px 0 0 var(--line); }
  .side a { display: block; padding: 7px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 620; color: var(--ink-2); line-height: 1.25; transition: background .2s ease, color .2s ease; }
  .side ul ul a { font-size: 14px; padding: 6px 10px; }
  .side a:hover { background: #F4F4F8; color: var(--ink); }
  .side a.in { color: var(--ink); font-weight: 680; }
  .side a.on { background: var(--on-bg); color: var(--on-fg); font-weight: 680; }
  .side .side-d { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); padding: 6px 12px 10px; }
  .side .side-d.on { background: none; color: var(--pink-d); }
  .side .side-all { display: inline-flex; align-items: center; gap: 2px; margin-top: 14px; padding-left: 6px; font-size: 13.5px; color: var(--muted); }
  .side .side-all svg { width: 16px; height: 16px; }
  /* The pills stay one line that scrolls, as on a phone; the tree on the left already lists every aisle. */
  .browse .lbar .sortw { margin-left: auto; }
  .hub .dbar { display: none; }
  .hub .sec, .hub .pcols { scroll-margin-top: calc(var(--hh) + 20px); }
  .hub .dbar + .sec { margin-top: 8px; }
  .browse .board.tiles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  .browse .tiles .ac { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; padding-right: 12px; }
  .browse .tiles .ac-m { height: 74px; }
}
.lprev { display: flex; justify-content: center; margin: 4px 0 22px; }
.lmore { max-width: 420px; margin: 40px auto 0; text-align: center; }
.lm-t { color: var(--ink-2); font-weight: 650; font-size: 14px; }
.lm-t b { font-weight: 700; color: var(--ink); }
.lm-bar { height: 6px; border-radius: 99px; background: #EEEEF4; margin: 10px auto 16px; overflow: hidden; max-width: 260px; }
.lm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--pink); transition: width .4s var(--ease); }
.lm-b { min-width: 240px; }
.lm-b[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* While the list loads itself (su.js initList, setting 0 = no limit) the link is only the observer's target: the
   wait cards in the grid show the loading. It comes back when a limit is reached or a fetch fails. */
.lmore.auto .lm-b { opacity: 0; pointer-events: none; }
.lm-r { position: relative; left: 50%; translate: -50% 0; width: min(680px, 100vw - 32px); margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.lm-r p { color: var(--muted); font-weight: 590; font-size: 14px; }
.lm-r .chips { justify-content: center; margin-top: 12px; }
.lm-r .chip svg { width: 16px; height: 16px; flex: none; }
.lend { margin: 44px auto 0; max-width: 560px; text-align: center; }
.lend .lm-bar i { background: var(--ok); }
.lend h3 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; margin-top: 4px; }
.lend p { color: var(--muted); font-weight: 590; font-size: 14px; margin-top: 4px; }
.lend .chips { justify-content: center; margin-top: 16px; }
.lend .chips .chip { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.lend .chips .chip:hover { box-shadow: inset 0 0 0 1.5px var(--pink); color: var(--pink-d); }
.lend .top { margin-top: 14px; }
.kmini {
  width: 18px; height: 18px; border-radius: 50%;
  background: #A2CA60; color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.sortw { position: relative; flex: 0 0 auto; }
.sortw select {
  appearance: none;
  height: 36px; padding: 0 34px 0 14px;
  border-radius: 999px; border: 0;
  background: var(--fill); color: var(--ink);
  font-size: 13.5px; font-weight: 620;
  cursor: pointer;
}
.sortw svg { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; }
.act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.achip {
  height: 32px; padding: 0 10px 0 13px; border-radius: 999px;
  background: var(--pink-50); color: var(--pink-d);
  font-size: 13px; font-weight: 650;
  display: inline-flex; align-items: center; gap: 6px;
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lnk { color: var(--pink-d); font-weight: 680; font-size: 13.5px; padding: 6px 8px; border-radius: 10px; }
.lnk:hover { background: var(--pink-50); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 30px 18px;
}
/* Big screens: the header, the circles row, the footer and every browse page (body.wide: home, aisles,
   lists, search) run to 2400px and add product columns; the product page grows to --wrap-product, and
   cart, checkout and account keep --wrap, centered.
   A rail's cards take the width of a grid's cards in the same column, so a rail and a grid line up: the
   count is the grid's own auto-fill count, floor((width + 18) / 196), read from the column's width. */
@media (min-width: 1081px) {
  .hdr, .dept-c, .ft, body.wide main, body.wide .fl-in { --wrap: var(--wrap-wide); --pad: clamp(32px, 2.2vw, 40px); }
  body.wide main, body.wide .bmain { container-type: inline-size; }
  .dc-l { justify-content: space-between; }
  .dc-l .bub { flex-shrink: 1; }
  @container (min-width: 570px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
  @container (min-width: 766px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }
  @container (min-width: 962px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 4 * 18px) / 5); } }
  @container (min-width: 1158px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 5 * 18px) / 6); } }
  @container (min-width: 1354px) { .grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 6 * 18px) / 7); } }
  @container (min-width: 1550px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 7 * 18px) / 8); } }
  @container (min-width: 1746px) { .grid { grid-template-columns: repeat(9, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 8 * 18px) / 9); } }
  @container (min-width: 1942px) { .grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 9 * 18px) / 10); } }
  @container (min-width: 2138px) { .grid { grid-template-columns: repeat(11, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 10 * 18px) / 11); } }
  @container (min-width: 2334px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .rail:not(.sm, .brs) { grid-auto-columns: calc((100% - 11 * 18px) / 12); } }
}
.empty {
  text-align: center;
  padding: 56px 16px 40px;
  max-width: 440px;
  margin: 0 auto;
}
.empty .mark {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--pink-50); color: var(--pink);
  display: grid; place-items: center; font-size: 40px;
}
.empty h2 { font-size: 26px; font-weight: 700; letter-spacing: -.035em; }
.acc-e { max-width: none; width: 100%; padding: 44px 24px 36px; border-radius: 26px; box-shadow: inset 0 0 0 1px var(--line); }
.acc-e .woocommerce-info { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.acc-e p { margin-top: 6px; }
.empty p { color: var(--muted); font-weight: 590; margin: 8px 0 20px; line-height: 1.45; }
.empty .chips { justify-content: center; }
.btn {
  height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--pink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 26px rgba(255, 38, 104, .3);
  transition: background .2s ease, transform .2s ease;
}
.btn:hover { background: var(--pink-d); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--fill); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: #EAEAF1; }

/* ——— Aisle tiles ——— */
.h2 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin: 34px 0 14px; }
.ccs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.cc {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
  padding: 10px 16px 10px 10px;
  border-radius: 22px;
  background: var(--t);
  transition: transform .3s var(--spring), box-shadow .3s ease;
}
.cc:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 16, 40, .1); }
.cc-i {
  flex: none;
  width: 64px; height: 64px; border-radius: 17px;
  background: rgba(255, 255, 255, .72);
  display: flex; align-items: center; justify-content: center;
}
.cc-i img { width: 80%; height: 86%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(40, 10, 30, .18)); transition: transform .35s var(--spring); }
.cc-ph { background: #fff; }
.cc-ph img { filter: none; }
.cc:hover .cc-i img { transform: translateY(-3px) rotate(-3deg); }
.cc-t { min-width: 0; }
.cc b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
/* The home's carousels: Pasillos' cards at Pasillos' size, as many as fit, so both rows' columns line up.
   The scroll box clips, so it keeps room for the hover's lift and a softer shadow. Before it fills, a row
   holds its filled height, and its title keeps the arrows' height whether they show or not. */
@media (min-width: 821px) {
  .hcc .sh-a { min-height: 38px; }
  .ccs.cr {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 12px) / 4);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    scroll-snap-type: x mandatory; overscroll-behavior-x: none; scroll-behavior: smooth;
    margin: -6px 0 -18px; padding: 10px 0 18px;
  }
  .ccs.cr::-webkit-scrollbar { display: none; }
  .cr > .cc { scroll-snap-align: start; }
  .cr > .cc:hover { box-shadow: 0 8px 18px rgba(20, 16, 40, .09); }
  .ccs.cr[data-later] { min-height: 112px; }
}
@media (min-width: 1081px) {
  @container (min-width: 1048px) { .ccs.cr { grid-auto-columns: calc((100% - 4 * 12px) / 5); } }
  @container (min-width: 1260px) { .ccs.cr { grid-auto-columns: calc((100% - 5 * 12px) / 6); } }
  @container (min-width: 1472px) { .ccs.cr { grid-auto-columns: calc((100% - 6 * 12px) / 7); } }
  @container (min-width: 1684px) { .ccs.cr { grid-auto-columns: calc((100% - 7 * 12px) / 8); } }
  @container (min-width: 1896px) { .ccs.cr { grid-auto-columns: calc((100% - 8 * 12px) / 9); } }
  @container (min-width: 2108px) { .ccs.cr { grid-auto-columns: calc((100% - 9 * 12px) / 10); } }
}
/* ——— Product overlay ——— */
.ov {
  position: fixed; inset: 0; z-index: 60;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 34px 20px;
  display: none;
  isolation: isolate;
}
/* The dim and the blur sit on a layer that never scrolls. When they were on .ov itself, which is the sheet's scroll
   container, Chrome re-rasterized the backdrop on every scroll and on a Mac dropped frames to a white backdrop (the
   user, 2026-10-13, video). A fixed pseudo-element of a fixed parent covers the same viewport box. */
.ov::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--ov-dim, rgba(20, 10, 26, .5));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ov.show { display: block; animation: su-fade .22s ease; }
/* A swiped sheet takes the dim with it, the open's fade in reverse, so nothing is left to vanish when the address
   catches up. Opacity, not the blur's radius: a changing blur is redrawn every frame. */
.ov.out { opacity: 0; transition: opacity .3s var(--ease); }
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }
.pd {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  background: #fff;
  border-radius: 30px;
  box-shadow: var(--shadow-2);
  animation: su-pop .36s var(--ease);
}
@keyframes su-pop { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.pd-x, .xbtn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fill); color: var(--ink);
  transition: background .2s ease;
}
.pd-x:hover, .xbtn:hover { background: #E8E8EF; }
.pd-x { position: absolute; top: 18px; right: 18px; z-index: 5; }
.pd-nav {
  position: fixed; top: 50%; translate: 0 -50%;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow-1);
  z-index: 61;
  transition: transform .2s ease;
}
.pd-nav:hover { transform: scale(1.06); }
.pd-nav.l { left: max(14px, calc(50% - 620px)); }
.pd-nav.r { right: max(14px, calc(50% - 620px)); }
.grab { display: none; }
.pd-g { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
.pd-media { padding: 28px; position: sticky; top: 0; align-self: start; }
.pd-z {
  position: relative;
  aspect-ratio: 1;
  border-radius: 24px;
  background: var(--tile);
  overflow: hidden;
  isolation: isolate;
}
.pd-z img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pd-z { cursor: zoom-in; }
  .pd-z.z img { transform: scale(2.1); }
}
.pd-zw { position: relative; }
.pd-zw .ebs { left: 18px; bottom: 18px; gap: 6px; }
.pd-zw .eb { width: 36px; height: 36px; font-size: 15px; }
.pd-zw .eb svg { width: 20px; height: 20px; }
.pd-zw .eb.pa svg { width: 100%; height: 100%; }
.pd-zw .eb .sm { font-size: 11px; }
.pd-zw .eb-l { height: 30px; font-size: 13px; padding: 0 12px; }
.pd-info { padding: 40px 40px 34px 14px; min-width: 0; }
/* Name, size and price lead; the brand follows as a chip to its page (plain text when it has none). */
.pd-brand {
  display: flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%; margin-top: 18px;
  color: var(--ink-2); font-size: 14.5px; font-weight: 650;
}
a.pd-brand {
  min-height: 46px; padding: 6px 14px 6px 10px; border-radius: var(--r);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: color .2s ease, box-shadow .2s ease;
}
a.pd-brand:not(:has(img)) { padding-left: 16px; }
a.pd-brand:hover { color: var(--pink-d); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.pd-brand img { height: 28px; width: auto; max-width: 84px; object-fit: contain; }
.pd-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-brand svg { flex: none; width: 16px; height: 16px; color: #A6A6B8; }
.pd-t {
  margin-right: 30px;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.pd-t a { text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color .2s ease; }
.pd-t a:hover { text-decoration-color: var(--pink); }
.pd-s { margin-top: 8px; color: var(--muted); font-weight: 620; font-size: 14.5px; }
.pd-p { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pd-p .m { font-size: 40px; }
.pd-buy { margin-top: 22px; display: grid; gap: 10px; }
.btn-add {
  width: 100%; height: 58px; border-radius: var(--r);
  background: var(--pink); color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  font-weight: 700; font-size: 16.5px;
  box-shadow: 0 14px 28px rgba(255, 38, 104, .34);
  transition: background .2s ease, transform .15s ease;
}
.btn-add:hover { background: var(--pink-d); }
.btn-add:active { transform: scale(.985); }
.btn-add b { margin-left: auto; font-weight: 700; opacity: .95; }
.stepper {
  height: 58px; border-radius: 20px;
  background: var(--pink-50);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 7px;
  color: var(--pink-d);
}
.stepper button {
  width: 44px; height: 44px; border-radius: 14px;
  background: #fff; color: var(--pink-d);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(255, 38, 104, .14);
  transition: transform .15s ease;
}
.stepper button:active { transform: scale(.92); }
.stepper span { font-weight: 650; font-size: 15px; }
.stepper span b { font-size: 19px; font-weight: 700; margin-right: 4px; }
.sub { display: flex; justify-content: space-between; color: var(--muted); font-weight: 620; font-size: 13.5px; padding: 0 6px; }
.sub b { color: var(--ink); }
.sub.max { color: var(--pink-d); }
.stepper button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
/* Back-in-stock */
.bis { border-radius: 22px; padding: 16px; background: var(--fill); display: grid; gap: 12px; }
.bis-h { display: flex; align-items: center; gap: 12px; }
.bis-h .ic { width: 42px; height: 42px; border-radius: 14px; background: #fff; color: var(--pink-d); display: grid; place-items: center; flex: 0 0 auto; }
.bis-h b { display: block; font-weight: 700; font-size: 16px; }
.bis-h small { display: block; color: var(--ink-2); font-weight: 620; font-size: 14px; margin-top: 1px; }
.bis-f { display: flex; gap: 8px; }
.bis-f input {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: 16px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 16px; font-weight: 590; color: var(--ink); outline: 0;
}
.bis-f input::placeholder { color: #9A9AAE; }
.bis-f input:focus { box-shadow: inset 0 0 0 2px var(--pink); }
.bis-f input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--pink-dd); }
.bis-f .btn { height: 52px; padding: 0 22px; flex: 0 0 auto; border-radius: 16px; box-shadow: none; }
.bis-e { margin-top: -4px; color: var(--pink-dd); font-weight: 650; font-size: 13.5px; }
.bis.done { background: var(--ok-50); color: var(--ok-dd); gap: 4px; padding: 16px 18px; }
.bis.done b { font-weight: 700; font-size: 15.5px; line-height: 1.35; }
.bis.done small { font-weight: 620; font-size: 13px; opacity: .8; }
.bis-bar {
  width: 100%; height: 54px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 16px;
}
.bis-bar.on { background: var(--ok-50); color: var(--ok-dd); }

/* Product photos */
.pd-media.many { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; }
.pd-tr { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px; overscroll-behavior-x: none; }
.pd-tr::-webkit-scrollbar { display: none; }
.pd-tr > .pd-z { flex: 0 0 100%; width: 100%; scroll-snap-align: start; border-radius: 0; }
.pd-th { display: grid; gap: 10px; }
.pd-th button {
  width: 76px; height: 76px; border-radius: 16px; padding: 6px;
  background: var(--tile); box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow .2s ease;
}
.pd-th button:hover { box-shadow: inset 0 0 0 1.5px #C9C9D6; }
.pd-th button.on { box-shadow: inset 0 0 0 2.5px var(--pink); }
.pd-th img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-cnt {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(26, 26, 46, .72); color: #fff;
  font-size: 12px; font-weight: 680; font-variant-numeric: tabular-nums;
  display: none;
}
.pd-ex {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 4px 12px rgba(20, 16, 40, .12);
  pointer-events: none;
}
.pd-dots { display: none; justify-content: center; gap: 6px; margin-top: 10px; }
.pd-dots i { width: 6px; height: 6px; border-radius: 99px; background: #DADAE4; transition: width .3s var(--ease), background .3s ease; }
.pd-dots i.on { width: 20px; background: var(--pink); }
.pd-z { cursor: zoom-in; }
.gv {
  position: fixed; inset: 0; z-index: 90;
  background: #0E0C1A; color: #fff;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  opacity: 0; transition: opacity .2s ease;
}
.gv.show { opacity: 1; }
.gv[hidden] { display: none; }
.gv-top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 16px 8px 20px; }
.gv-n { font-weight: 680; font-size: 14px; font-variant-numeric: tabular-nums; opacity: .85; }
.gv-x { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; }
.gv-x svg { width: 18px; height: 18px; }
.gv-tr { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; overscroll-behavior: none contain; }
.gv-tr::-webkit-scrollbar { display: none; }
.gv.zoomed .gv-tr { overflow: hidden; touch-action: none; }
.gv-s { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 8px 72px; overflow: hidden; }
.gv-s img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 14px; background: #fff;
  cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  touch-action: pan-x;
}
.gv.zoomed .gv-s img { cursor: grab; touch-action: none; }
.gv-a {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: grid; place-items: center;
}
.gv-a:hover { background: rgba(255, 255, 255, .24); }
.gv-a.l { left: 14px; }
.gv-a.r { right: 14px; }
.gv-th { display: flex; justify-content: center; gap: 10px; padding: 12px 16px 4px; }
.gv-th button { width: 60px; height: 60px; border-radius: 14px; overflow: hidden; background: #fff; padding: 4px; opacity: .55; transition: opacity .2s ease, box-shadow .2s ease; }
.gv-th button.on { opacity: 1; box-shadow: 0 0 0 2.5px var(--pink); }
.gv-th img { width: 100%; height: 100%; object-fit: contain; }
.gv-h { text-align: center; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); font-size: 13px; font-weight: 620; opacity: .6; }
.gv.zoomed .gv-h { visibility: hidden; }
.pres { margin-top: 18px; }
.pres h3 { font-size: 12px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pres-l { display: flex; flex-wrap: wrap; gap: 8px; }
.pz {
  min-width: 96px; padding: 9px 13px; border-radius: 16px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  display: grid; gap: 1px; text-align: left;
  transition: box-shadow .2s ease;
}
.pz:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.pz.on { box-shadow: inset 0 0 0 2px var(--pink); background: var(--pink-50); }
.pz b { font-size: 14px; font-weight: 700; }
.pz span { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.pz.oos span { color: var(--muted); }
.pd-fav {
  margin-top: 10px;
  height: 46px; border-radius: 16px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #F4F4F8; color: var(--ink-2);
  font-weight: 650; font-size: 14.5px;
  transition: background .2s ease, color .2s ease;
}
.pd-fav:hover { background: var(--line); }
.pd-fav.on { color: var(--pink-d); background: var(--pink-50); }
.eta {
  display: flex; gap: 12px; align-items: center;
  margin-top: 18px; padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(120deg, #F0FBF4, #E4F7EC);
  color: var(--ok-dd);
}
.eta .ic { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; }
.eta b { display: block; font-weight: 700; font-size: 14.5px; }
.eta span { font-size: 13px; font-weight: 590; color: rgba(11, 59, 36, .72); }
.eta button { min-height: 28px; padding: 0 2px; color: var(--ok); font-weight: 680; text-decoration: underline; text-underline-offset: 2px; }
.pd-d { margin: 22px 0 0; display: grid; }
.pd-d div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pd-d div:last-child { border-bottom: 1px solid var(--line); }
.pd-d dt { color: var(--muted); font-weight: 620; }
.pd-d dd { margin: 0; font-weight: 650; text-align: right; }
.pd-d dd a { color: var(--pink-d); }
.pd-desc { margin-top: 20px; }
.pd-desc h3 { font-size: 13px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-desc p { margin-top: 8px; font-size: 15.5px; line-height: 1.62; font-weight: 510; color: var(--ink-2); }
.pd-rails { padding: 4px 28px 34px; border-top: 1px solid var(--line); }
.pd-rails .sec { margin-top: 30px; }
.pd-rails .sh h2 { font-size: 21px; }
.pd-bar { display: none; }
/* The product page (/product/<slug>/ loaded fresh): the overlay's content set in the page. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin: 8px 0 18px;
  font-size: 13.5px; font-weight: 620; color: var(--muted);
}
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 5px; border-radius: 8px; color: var(--ink-2); transition: color .2s ease, background .2s ease; }
.crumbs a:last-child { color: var(--ink); }
.crumbs a:hover { color: var(--pink-d); background: var(--pink-50); }
.crumbs svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .45; }
/* Wider only from 2112px, where screens are also tall enough for the bigger photo. */
main:has(> .pdp) { --wrap: var(--wrap-product); }
.pd.pd-pg { max-width: none; margin: 0; background: none; border-radius: 0; box-shadow: none; animation: none; }
.pd-pg .pd-media { padding: 0 28px 0 0; top: calc(var(--hh, 80px) + 16px); }
.pd-pg .pd-info { padding: 6px 0 34px 14px; }
.pd-pg .pd-t { margin-right: 0; }
.pd-pg .pd-rails { padding: 4px 0 8px; }

/* ——— Cart drawer ——— */
.scrim {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(20, 10, 26, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.scrim.show { opacity: 1; pointer-events: auto; }
.scrim.out { opacity: 0; transition: opacity .3s var(--ease); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(460px, 100%);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(104%);
  visibility: hidden;
  transition: transform .42s var(--ease), visibility 0s linear .42s;
  box-shadow: -20px 0 60px rgba(20, 16, 40, .18);
}
.drawer.show { transform: none; visibility: visible; transition: transform .42s var(--ease); }
.dr-h { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 14px; }
.dr-h h2 { font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.dr-b { flex: 1; overflow: auto; padding: 4px 22px 22px; overscroll-behavior: contain; overflow-anchor: none; }
.cl {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  animation: su-viewIn .3s var(--ease);
}
/* A line set to 0 leaves at once (su.js drawerLine): it slides out and its row closes, before the server's redraw
   removes it; "Deshacer" clears .gone. The footer's subtotal dims until that redraw. */
.cl { max-height: 240px; transition: opacity .22s var(--ease), transform .22s var(--ease), max-height .3s var(--ease) .12s, padding .3s var(--ease) .12s, border-color .3s var(--ease) .12s; }
.cl.gone { animation: none; opacity: 0; transform: translateX(28px); max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; overflow: hidden; pointer-events: none; }
.dr-tot[aria-busy="true"] .m { opacity: .4; transition: opacity .2s; }
.cl-i { width: 78px; height: 78px; border-radius: 16px; background: var(--tile); overflow: hidden; isolation: isolate; position: relative; }
.cl-i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cl-t {
  font-size: 14px; font-weight: 620; line-height: 1.34;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-t:hover { color: var(--pink-d); }
.cl-s { font-size: 12.5px; font-weight: 590; color: var(--muted); margin-top: 3px; }
.cl-r { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.cl-r .m { font-size: 17px; }
.mstep {
  height: 36px; border-radius: 999px; background: var(--fill);
  display: flex; align-items: center; padding: 0 3px;
}
.mstep button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.mstep button:hover { background: #fff; }
.mstep b { min-width: 26px; text-align: center; font-weight: 700; font-size: 14.5px; }
.dr-sug { margin-top: 26px; }
.dr-sug h3 { font-size: 18px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.dr-sug .pc-t { font-size: 12.5px; }
.dr-sug .pc-p .m { font-size: 16px; }
.dr-sug .pc-s { min-height: 0; }
.dr-sug .pc-top { --qx: 7px; --qh: 34px; --qw: 100px; }
.dr-f { padding: 16px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.dr-tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.dr-tot span { font-weight: 650; color: var(--muted); }
.dr-tot .m { font-size: 26px; }
.dr-go { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }
.dr-go .btn { height: 54px; border-radius: 18px; padding: 0 14px; font-size: 15.5px; white-space: nowrap; }
.dr-go .btn:not(.ghost) { box-shadow: 0 10px 22px rgba(255, 38, 104, .26); }
.mo { margin-bottom: 14px; }
.mo p { font-size: 13.5px; font-weight: 620; color: var(--ink-2); margin-bottom: 7px; }
.mo b { font-weight: 700; color: var(--ink); }
/* Below the minimum the checkout button states the gap and goes nowhere. */
.btn.short, .dr-go .btn.short { background: #fff; border: 1.5px dashed #C4C4D2; color: var(--ink-2); box-shadow: none; cursor: default; white-space: normal; line-height: 1.15; text-align: center; text-wrap: balance; }
.dr-go .btn.short { padding: 0 10px; }
.btn.short:hover { background: #fff; }
.btn.short:active { transform: none; }
.nudge { animation: su-nudge .4s ease; }
@keyframes su-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.fine { color: var(--muted); font-size: 12px; font-weight: 570; line-height: 1.45; margin-top: 10px; text-align: center; }
.dr-f .lnk { display: block; margin: 6px auto 0; font-size: 13px; color: var(--muted); }
.mo-bar { height: 8px; border-radius: 99px; background: #EEEEF4; overflow: hidden; }
.mo-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FF5C8A, var(--pink)); transition: width .45s var(--ease); }

/* ——— Cart page ——— */
.cart-v { padding-top: 4px; }
.ct-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ct-h p { margin-top: 6px; color: var(--muted); font-weight: 620; font-size: 14.5px; }
.steps { display: flex; align-items: center; list-style: none; margin: 0 0 4px; padding: 0; font-size: 13px; font-weight: 680; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li + li::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: #E2E2EA; margin: 0 10px; }
.steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #F1F1F6; color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
.steps .on { color: var(--ink); }
.steps .on b { background: var(--pink); color: #fff; box-shadow: 0 6px 14px rgba(255, 38, 104, .3); }
.steps .done b { background: var(--ok-50); color: var(--ok); }
.ct-g { display: grid; grid-template-columns: minmax(0, 1fr) 392px; grid-template-areas: "l s" "x s"; gap: 16px 40px; align-items: start; }
.ct-l { grid-area: l; display: grid; gap: 16px; min-width: 0; }
.ct-s { grid-area: s; }
.ct-x { grid-area: x; }
.ct-l .mo { margin: 0; }
.ln-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ln {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.ln-i { width: 96px; height: 96px; border-radius: 18px; background: var(--tile); overflow: hidden; isolation: isolate; }
.ln-i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ln-b { min-width: 0; }
.ln-t {
  font-size: 15.5px; font-weight: 650; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ln-t:hover { color: var(--pink-d); }
.ln-s { margin-top: 3px; font-size: 12.5px; font-weight: 590; color: var(--muted); }
.ln-p { margin-top: 7px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; }
.ln-p .m { font-size: 15px; }
.ln-u { font-size: 12px; font-weight: 620; color: var(--muted); margin-left: -3px; }
.ln-p .was { font-size: 12.5px; }
.ln-p .off { font-size: 10.5px; padding: 2px 6px; }
.ln { position: relative; }
.ln-x { margin: 6px 0 0 -6px; padding: 6px; border-radius: 10px; font-size: 13px; font-weight: 650; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #D0D0DC; }
.ln-x svg { display: none; }
.ln-x:hover { color: var(--pink-dd); background: var(--pink-50); }
.ln-r { display: flex; align-items: center; gap: 20px; }
.ln-r > .m { min-width: 88px; text-align: right; font-size: 19px; }
.ln .mstep { height: 44px; padding: 0 4px; }
.ln .mstep button { width: 36px; height: 36px; }
.ln .mstep b { min-width: 30px; font-size: 15.5px; }
.mstep [aria-disabled="true"] { opacity: .35; }
.cpn { border-radius: 18px; background: #F6F6F9; }
.cpn summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 16px;
  font-weight: 650; font-size: 14.5px; color: var(--ink-2);
}
.cpn summary::-webkit-details-marker { display: none; }
.cpn summary > svg:first-child { color: var(--pink-d); }
.cpn summary b { font-weight: 700; color: var(--ink); }
.cpn summary span { flex: 1; }
.cpn summary > svg:last-child { transition: transform .2s ease; color: var(--muted); }
.cpn[open] summary > svg:last-child { transform: rotate(180deg); }
/* Where "Código de cupón" would be cut, the button drops under the field and takes the full width;
   on one line the field's grow factor leaves it all the free space. */
.cpn-f { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.cpn-f .btn { flex: 1 0 auto; }
.cpn-f input {
  flex: 999 1 164px; width: 0; min-width: 0; height: 50px; padding: 0 16px; border: 0; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 16px; font-weight: 620; text-transform: uppercase; outline: 0;
}
.cpn-f input::placeholder { text-transform: none; color: #9A9AAE; font-weight: 570; }
.cpn-f input:focus { box-shadow: inset 0 0 0 2px var(--pink); }
.cpn-f input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--pink-dd); }
.cpn-f .btn { height: 50px; border-radius: 14px; padding: 0 18px; background: var(--ink); color: #fff; }
.cpn-f .btn:hover { background: #000; }
.cpn-e { padding: 0 16px 14px; margin-top: -2px; color: var(--pink-dd); font-weight: 650; font-size: 13.5px; }
.empty .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ct-x { text-align: center; }
.ct-x .lnk { color: var(--muted); font-size: 13.5px; }
.ct-s {
  position: sticky; top: calc(var(--hh) + 18px);
  border-radius: 26px; padding: 22px 22px 20px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.ct-s h2 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
.tot { margin: 0; }
.tot > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.tot dt { font-weight: 620; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tot dd { margin: 0; font-weight: 680; text-align: right; min-width: 0; }
.tot dd .m { font-size: 16px; }
.tot small { display: block; margin-top: 3px; color: var(--muted); font-weight: 590; font-size: 12.5px; line-height: 1.4; }
.tot small b { color: var(--ink-2); font-weight: 680; }
.tot small.warn { color: var(--pink-dd); }
.tot .sh-r dd { max-width: 230px; }
.tot .cb-r dt, .tot .cb-r dd, .tot .cb-r dd .m { color: var(--pink-d); }
.tot .cb-r dt { white-space: nowrap; }
.tot .tier { width: 18px; height: 18px; border-radius: 4px; }
.tot .uc { width: auto; height: 13px; }
.tot .cp-r dd, .tot .fu-r dd { color: var(--ok); }
.tot .cp-r dd .m, .tot .fu-r dd .m { color: var(--ok); }
.tot-x { display: block; margin: 2px 0 0 auto; padding: 2px 0; font-size: 12.5px; font-weight: 650; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.tot-x:hover { color: var(--pink-dd); }
.tot .fu-r { align-items: center; }
.tot .fu-r.ask { flex-direction: column; align-items: stretch; gap: 8px; }
.tot .fu-r .ck { padding: 11px 12px; gap: 10px; border-radius: 14px; background: #F0FBF4; color: var(--ok-dd); font-size: 13.5px; font-weight: 620; text-align: left; }
.tot .fu-r .ck b { font-weight: 700; }
.tot .fu-r .ck-b { background: #fff; }
.tot .tt { padding-top: 16px; border-top: 2px solid var(--ink); align-items: baseline; }
.tot .tt dt { font-size: 17px; font-weight: 700; color: var(--ink); }
.tot .tt dd .m { font-size: 28px; }
.ct-s .go { width: 100%; height: 58px; margin-top: 14px; border-radius: 18px; font-size: 16.5px; }
.ct-bar { display: none; }
.sk-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sk { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: #F6F6F9; }
.sk-i { width: 52px; height: 52px; border-radius: 12px; background: #fff; overflow: hidden; }
.sk-i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sk.out .sk-i img { filter: grayscale(1); opacity: .6; }
.sk-t { min-width: 0; }
.sk-t a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 650; line-height: 1.3; }
.sk-t small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 590; color: var(--muted); }
.sk-b { padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--warn-50); color: var(--warn-dd); font-variant-numeric: tabular-nums; }
.sk.out .sk-b { background: var(--pink-100); color: var(--pink-dd); }
@media (max-width: 1080px) {
  .ct-g { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px 24px; }
  .ln { grid-template-columns: 80px minmax(0, 1fr); }
  .ln-i { width: 80px; height: 80px; }
  .ln-r { grid-column: 2; justify-content: space-between; }
}
@media (max-width: 820px) {
  .ct-h { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ct-h h1 { font-size: 30px; }
  .steps { font-size: 12px; }
  .steps li + li::before { width: 14px; margin: 0 7px; }
  .steps b { width: 22px; height: 22px; font-size: 11.5px; }
  .ct-g { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "s" "x"; gap: 18px; }
  .ln { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px 0; align-items: start; }
  .ln-i { width: 72px; height: 72px; border-radius: 16px; }
  .ln-t { font-size: 14.5px; padding-right: 30px; }
  .ln-x { position: absolute; top: 8px; right: -8px; margin: 0; width: 40px; height: 40px; display: grid; place-items: center; }
  .ln-x span { display: none; }
  .ln-x svg { display: block; }
  .ln-r { margin-top: -2px; gap: 12px; }
  .ln-r > .m { font-size: 17px; min-width: 0; }
  .ln .mstep { height: 44px; padding: 0; }
  .ln .mstep button { width: 44px; height: 44px; }
  .ct-s { position: static; padding: 18px 18px 6px; border-radius: 22px; }
  .ct-s .go { display: none; }
  .tot .sh-r dd { max-width: 62%; }
  .ct-bar {
    display: flex; align-items: center; gap: 14px;
    position: sticky; bottom: 0; z-index: 6;
    margin: 18px -14px 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .ct-bar small { display: block; font-size: 12px; font-weight: 650; color: var(--muted); }
  .ct-bar .m { font-size: 22px; }
  .ct-bar .btn { flex: 1; height: 54px; border-radius: 18px; font-size: 16px; }
  .sk { grid-template-columns: 46px minmax(0, 1fr); }
  .sk-i { width: 46px; height: 46px; }
  .sk-b { grid-column: 2; justify-self: start; }
}

/* ——— Focused flow: Complementa, checkout, thank-you ——— */
body.flow { --hh: 72px; }
body.flow .strip, body.flow .hdr, body.flow .ft { display: none !important; }
.fl-h {
  position: sticky; top: 0; z-index: 30; height: 72px; margin-bottom: 6px;
  background: var(--pink); color: #fff; box-shadow: 0 0 0 100vmax var(--pink); clip-path: inset(0 -100vmax);
}
.fl-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.fl-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 6px; margin-left: -6px; border-radius: 14px; font-weight: 680; font-size: 14.5px; color: #fff; }
.fl-back:hover { background: rgba(255, 255, 255, .16); }
.fl-back .s { display: none; }
.fl-logo img { display: block; height: 29px; width: auto; }
.flow-v { padding-bottom: 8px; }
.cp-h { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 16px 0 10px; }
.cp-h h1 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
.cp-go { justify-self: end; padding: 0 22px; font-size: 15.5px; white-space: nowrap; }
.btn .cp-tot { margin-left: 2px; padding-left: 12px; border-left: 1.5px solid rgba(255, 255, 255, .45); }
.btn.w .cp-tot { border-left-color: rgba(227, 21, 90, .28); }
.btn .cp-tot .m { color: inherit; font-size: inherit; }
.co-cpn { margin: 4px 0 12px; }
.co-n {
  margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; scroll-margin-top: calc(var(--hh) + 12px);
  background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-100); color: var(--pink-dd); font-size: 14px; font-weight: 620; line-height: 1.4;
}
.co-n:focus { outline: none; }
.co-n ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.co-n strong { font-weight: 700; }
.co-c, .cf, .pin, .pin-m, .fel, .fel-f, .pm, .pm-b, .mi-f { grid-template-columns: minmax(0, 1fr); }
.co-c { display: grid; gap: 14px; padding: 22px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.co-c h2 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.co-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.ad-p { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; font-weight: 680; color: var(--ink-2); }
.ad-p span { white-space: nowrap; }
.ad-p select { min-width: 0; max-width: 280px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 620; cursor: pointer; }
.cf { margin: 0; display: grid; gap: 6px; min-width: 0; }
.cf label { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.cf abbr { color: var(--pink-d); text-decoration: none; }
.cf .opt { color: var(--muted); font-weight: 590; }
.cf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-e { color: var(--pink-dd); font-size: 13px; font-weight: 620; }
.cf-e strong { font-weight: 620; }
.cf-s { padding: 2px 0; font-size: 15px; font-weight: 680; }
.rf[aria-invalid="true"], .rf:has([aria-invalid="true"]) { background: #fff; box-shadow: inset 0 0 0 2px var(--pink-dd); }
.rf[readonly] { background: #FAFAFC; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.rf.tel { display: flex; align-items: center; gap: 10px; padding-left: 12px; }
.tel-c { display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 1px solid #DCDCE6; color: var(--ink-2); font-size: 15px; font-weight: 650; }
.rf.tel input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; color: inherit; }
.pin { display: grid; gap: 10px; }
.pin-go { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 16px; background: #F6F6F9; font-size: 14.5px; font-weight: 650; text-align: left; }
.pin-go:hover { background: #EFEFF5; }
.pin-go span:nth-child(2) { flex: 1; }
.pin-go > svg { color: var(--muted); }
.pin-m { display: grid; gap: 10px; }
.pin-h { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.pin-map {
  position: relative; height: 220px; border-radius: 18px; overflow: hidden; cursor: crosshair; box-shadow: inset 0 0 0 1px var(--line);
  background:
    radial-gradient(circle at 80% 24%, #CFE9C9 0 44px, transparent 45px),
    linear-gradient(160deg, transparent 0 74%, #BFDDF2 74%),
    linear-gradient(90deg, transparent calc(38% - 5px), #fff calc(38% - 5px) calc(38% + 5px), transparent calc(38% + 5px)),
    linear-gradient(0deg, transparent calc(58% - 6px), #fff calc(58% - 6px) calc(58% + 6px), transparent calc(58% + 6px)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255, 255, 255, .85) 58px 61px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255, 255, 255, .85) 46px 49px),
    #ECEEE6;
}
.pin-map:focus-visible { outline: 3px solid rgba(255, 38, 104, .45); outline-offset: 2px; }
.pin-p { position: absolute; transform: translate(-50%, -100%); color: var(--pink); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); animation: su-pinIn .3s var(--ease); pointer-events: none; }
.pin-p svg { display: block; width: 38px; height: 38px; }
@keyframes su-pinIn { from { opacity: 0; transform: translate(-50%, -150%); } }
.pin-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pin-a .btn { height: 44px; padding: 0 16px; border-radius: 14px; font-size: 14px; }
.pin-s { color: var(--ok); font-size: 13px; font-weight: 650; }
.pin-s:empty { display: none; }
.fel { display: grid; gap: 12px; }
.fel-f { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: #F9F9FB; }
.fel-f .rf:not([readonly]) { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.fel-f .rf:not([readonly]):focus { box-shadow: inset 0 0 0 2px var(--pink); }
.fel-st { margin-top: -4px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 650; line-height: 1.4; }
.fel-st small { font-weight: 590; }
.fel-st.ok { background: var(--ok-50); color: var(--ok-d); }
.fel-st.err { background: var(--pink-50); color: var(--pink-dd); }
.fel-st.wait { display: flex; align-items: center; gap: 8px; background: #F1F1F6; color: var(--ink-2); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #D5D5E0; border-top-color: var(--pink); animation: su-spin .7s linear infinite; }
@keyframes su-spin { to { transform: rotate(360deg); } }
.pm { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pm-o { position: relative; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s ease, background .15s ease; }
.pm-o.on { background: #FFFBFC; box-shadow: inset 0 0 0 2px var(--pink); }
.pm-o > .input-radio { position: absolute; opacity: 0; pointer-events: none; }
.pm-l { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 16px; cursor: pointer; font-size: 15px; font-weight: 680; }
.pm-r { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #CFCFDB; transition: box-shadow .15s ease; }
.input-radio:checked + .pm-l .pm-r { box-shadow: inset 0 0 0 7px var(--pink); }
.input-radio:focus-visible + .pm-l .pm-r { outline: 3px solid rgba(255, 38, 104, .45); outline-offset: 2px; }
.pm-t { flex: 1; }
.pm-uc { width: auto; height: 13px; }
.pm-ic { display: flex; align-items: center; gap: 6px; }
.pm-ic img { display: block; width: auto; height: 20px; border-radius: 4px; }
.pm-ic img[alt="Yappy"] { height: 16px; border-radius: 0; }
.pm-b { display: grid; gap: 12px; padding: 0 16px 16px; color: var(--ink-2); font-size: 14px; font-weight: 590; }
.pm-b p { margin: 0; }
.pm-b .rf { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pm-b .rf:focus { box-shadow: inset 0 0 0 2px var(--pink); }
.pm-b .rf[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--pink-dd); }
.pm-b .ck { font-size: 13.5px; }
.nmi_new_card, #wc-nmi-cc-form, #yappy-payment-fields { display: grid; gap: 12px; min-width: 0; }
#wc-nmi-cc-form { margin: 0; padding: 0; border: 0; }
#wc-nmi-cc-form .required { color: var(--pink-d); }
#nmi-three-ds-mount-point:empty { display: none; }
.wc-nmi-elements-field { position: relative; }
.wc-nmi-elements-field .rf { width: 100%; }
#nmi-card-number { padding-right: 52px; }
.nmi-credit-card-brand { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: grid; color: var(--muted); pointer-events: none; }
.nmi-credit-card-brand svg { width: 24px; height: 24px; }
.nmi-source-errors:empty { display: none; }
.wc-nmi-error { margin: 0; padding: 12px 14px; list-style: none; border-radius: 14px; background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-100); color: var(--pink-dd); font-size: 13.5px; font-weight: 650; line-height: 1.4; scroll-margin: calc(var(--hh) + 24px); }
.tk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk li { position: relative; }
.tk input { position: absolute; opacity: 0; pointer-events: none; }
.tk label { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 650; cursor: pointer; transition: box-shadow .15s ease; }
.tk input:checked + label { box-shadow: inset 0 0 0 2px var(--ink); }
.tk input:focus-visible + label { outline: 3px solid rgba(255, 38, 104, .45); outline-offset: 2px; }
.tk-r { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px #CFCFDB; transition: box-shadow .15s ease; }
.tk input:checked + label .tk-r { box-shadow: inset 0 0 0 6px var(--ink); }
.tk-c { display: grid; color: var(--muted); }
.tk-c svg { width: 22px; height: 22px; }
#yappy-phone-field { display: grid; gap: 6px; }
#yappy_phone.yappy-valid { box-shadow: inset 0 0 0 2px var(--ok); }
.yappy-field-hint { color: var(--muted); font-size: 12.5px; font-weight: 590; line-height: 1.4; }
#yappy-button-container { display: grid; justify-items: center; padding-top: 2px; }
.btn-yappy { width: 100%; max-width: 360px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: #1061D8; color: #fff; font-size: 15px; font-weight: 650; transition: opacity .2s ease, transform .15s ease; }
.btn-yappy img { display: block; width: auto; height: 22px; }
.btn-yappy:active { transform: scale(.98); }
.btn-yappy:focus-visible { outline: 3px solid rgba(16, 97, 216, .4); outline-offset: 3px; }
.btn-yappy[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn-yappy.ld { opacity: .75; }
.btn-yappy.ld img { animation: su-pulse 1s ease-in-out infinite; }
@keyframes su-pulse { 50% { opacity: .35; } }
#yappy-status-message { padding: 10px 12px; border-radius: 12px; background: var(--warn-50); color: var(--warn-dd); font-size: 13.5px; font-weight: 620; }
#yappy-status-message:empty { display: none; }
.place-order { margin: 0; }
.po-real { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.po-y { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: 18px; background: #EEF5FE; color: #0B3A75; font-size: 14px; font-weight: 620; line-height: 1.4; text-align: left; transition: background .15s ease; }
.po-y:hover { background: #E2EEFD; }
.po-y img { flex: 0 0 auto; width: auto; height: 16px; }
.po-y u { text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.ct-bar .yp { background: #1061D8; }
.co-g > .co-n { grid-area: n; margin: 0; }
.co-g:has(> .co-n:not([hidden])) { grid-template-areas: "n n" "l s" "x s"; }
@media (max-width: 820px) {
  .co-g:has(> .co-n:not([hidden])) { grid-template-areas: "n" "l" "s" "x"; }
  .ct-s .po-y { display: none; }
}
.woocommerce-billing-fields__field-wrapper { display: contents; }
.op-n { margin-top: 6px; color: var(--muted); font-size: 15px; font-weight: 620; }
.op-go { margin: 4px 0 0; }
.op-go .btn { width: 100%; height: 58px; border-radius: 18px; font-size: 16.5px; }
.op-x { max-width: 720px; }
@media (max-width: 820px) {
  .op-g { grid-template-areas: "s" "l" "x"; }
  .op-g:has(> .co-n:not([hidden])) { grid-template-areas: "n" "s" "l" "x"; }
  .co-lg { padding: 28px 20px 18px; }
}
.co-lg { max-width: 520px; margin: 8px auto 0; padding: 36px 32px 28px; justify-items: center; text-align: center; gap: 0; }
.co-lg-i { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--pink-50); color: var(--pink); margin-bottom: 18px; }
.co-lg-i svg { width: 36px; height: 36px; }
.co-c .co-lg-t { font-size: 24px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.co-lg-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 22px; }
.co-lg-b .btn { padding: 0 16px; white-space: nowrap; }
@media (max-width: 480px) { .co-lg-b { grid-template-columns: minmax(0, 1fr); } }
/* Tu pedido is read-only: quantities change in the cart, where the minimum-order bar lives, and
   "Editar carrito" goes back there, as Instacart and gopuff do. */
/* Taller than the room under the header, "Tu pedido" pins by its foot, so "Realizar el pedido" stays in view. */
.co-s { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; top: min(calc(var(--hh) + 18px), calc(100vh - var(--co-h, 0px) - 18px)); }
.co-s > * { grid-column: 1 / -1; }
.co-s > h2 { grid-column: 1; margin-bottom: 10px; }
.co-s > .co-ed { grid-column: 2; margin: 0 -8px 10px 0; }
.co-l { list-style: none; margin: 0 0 6px; padding: 0 4px 0 0; max-height: min(38vh, 340px); overflow: auto; overscroll-behavior: contain; }
.co-ln { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; }
.co-ln + .co-ln { border-top: 1px solid var(--line); }
.co-i { width: 48px; height: 48px; border-radius: 12px; background: var(--tile); overflow: hidden; }
.co-i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.co-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 620; line-height: 1.3; }
.co-q { color: var(--muted); font-weight: 650; white-space: nowrap; }
.co-ln > .m { font-size: 14.5px; }
.co-mo { margin: 14px 0 0; }
/* Placing an order waits on the card charge and the store's emails (10 to 21 s on live, 2026-10-06):
   both buttons show one busy state, the form is locked, and a calm line follows after a few seconds. */
.btn[aria-busy="true"] { background: var(--pink); cursor: progress; transform: none; }
.btn.ghost[aria-busy="true"] { background: var(--fill); color: var(--muted); }
/* The order's figures while WooCommerce works them out again: a bar where each amount goes, at its size.
   Clipped rather than overflow-hidden, which would move an inline-block's baseline. */
.recalc .m { position: relative; display: inline-block; border-radius: 6px; background: var(--sk); clip-path: inset(0 round 6px); }
.recalc .m, .recalc .m * { color: transparent !important; }
.recalc .m::after { content: ""; position: absolute; inset: 0; background: var(--sheen); transform: translateX(-100%); animation: su-sheen 1.5s .3s linear infinite; }
[data-wait] { opacity: .6; cursor: progress; }
[data-wait][data-go] { opacity: 1; }
.btn .spin { flex: none; width: 18px; height: 18px; border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
body.placing .ct-l, body.placing .co-cpn, body.placing .co-ed, body.placing .fl-back { opacity: .45; transition: opacity .2s ease; }
.co-wait { margin: 12px 0 0; padding: 11px 14px; border-radius: 14px; background: var(--fill); color: var(--ink-2); font-size: 13.5px; font-weight: 590; line-height: 1.45; animation: su-fade .3s ease; }
.co-wait b { display: block; color: var(--ink); font-weight: 680; }
@media (max-width: 820px) {
  .co-bar { flex-wrap: wrap; row-gap: 10px; }
  .co-bar .co-wait { flex: 1 0 100%; order: -1; margin: 0; padding: 9px 12px; font-size: 13px; }
  .ct-s .co-wait { display: none; }
}
.ty-g { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 24px 40px; align-items: start; }
.ty-m { display: grid; gap: 16px; min-width: 0; }
.ty-s { position: sticky; top: calc(var(--hh) + 18px); display: grid; gap: 16px; }
.ty-s .co-ln { grid-template-columns: 48px minmax(0, 1fr) auto; }
.ty-s .co-l { margin: 0; }
.ty-s .tot dd { overflow-wrap: anywhere; }
.mi-t { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: var(--pink-50); font-size: 14px; font-weight: 680; }
.mi-t a { display: inline-flex; align-items: center; min-height: 32px; color: var(--pink-d); text-decoration: underline; text-underline-offset: 2px; }
.ty-hero {
  display: grid; justify-items: center; gap: 6px; padding: 26px 22px 24px; border-radius: 26px; text-align: center;
  background: var(--grad-pink); color: #fff; box-shadow: 0 14px 30px rgba(255, 38, 104, .22);
}
.ty-pill { padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ty-lb { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.ty-lb img { width: auto; height: 14px; filter: brightness(0) invert(1); }
.ty-amt { font-size: 52px; line-height: 1; }
.ty-amt .m { color: #fff; letter-spacing: -.05em; }
.ty-d { font-weight: 620; opacity: .92; }
.ty-hero .btn { margin-top: 10px; background: #fff; color: var(--pink-d); }
.ty-hero .btn:hover { background: var(--pink-50); }
.ty-ok { padding: 22px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ty-ic { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-50); color: var(--ok); }
.ty-ic svg { width: 22px; height: 22px; }
.ty-ok h2 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.ty-ov { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; }
.ty-ov dt { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.ty-ov dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 680; overflow-wrap: anywhere; }
.mi { padding: 22px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pink-100); scroll-margin-top: calc(var(--hh) + 16px); }
.mi-f, .mi-ok { display: grid; gap: 10px; }
.mi-e { color: var(--pink-d); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.mi h3 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.mi p { color: var(--muted); font-size: 14px; font-weight: 590; line-height: 1.45; }
.mi-rows { display: grid; gap: 8px; }
.mi-r { display: flex; align-items: center; gap: 8px; }
.mi-x { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--muted); }
.mi-add { justify-self: start; padding-left: 0; }
.mi-a { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mi-a span { color: var(--muted); font-size: 13px; font-weight: 590; }
.mi .mi-err { color: var(--pink-dd); font-weight: 650; }
.mi-ok { justify-items: center; text-align: center; }
.mi-ok:focus { outline: none; }
.ty-ad address { color: var(--ink-2); font-size: 14.5px; font-style: normal; font-weight: 590; line-height: 1.55; }
.ty-ad p { color: var(--muted); font-size: 13.5px; font-weight: 590; }
.ty-go { width: 100%; }
@media (max-width: 1080px) { .ty-g { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px 24px; } }
@media (max-width: 820px) {
  body.flow { --hh: 58px; }
  .fl-h { height: 58px; }
  .fl-back .l { display: none; }
  .fl-back .s { display: inline; }
  .cp-h { margin-top: 10px; }
  .cp-go { display: none; }
  body.flow .ct-bar { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .co-c { padding: 18px; border-radius: 22px; }
  .fel .cf-2 { grid-template-columns: 1fr; }
  .ad-p { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .ad-p select { width: 100%; max-width: none; height: 46px; padding: 0 12px; }
  .co-l { max-height: none; }
  .ty-g { grid-template-columns: minmax(0, 1fr); }
  .ty-s { position: static; }
  .ty-amt { font-size: 44px; }
}

/* ——— My Account ——— */
.acc-v { padding-top: 4px; }
.acc-back { display: none; }
.acc-back.deep { display: grid; }
.acc-g { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.acc-nav { position: sticky; top: calc(var(--hh) + 18px); padding: 8px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.acc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acc-nav li.an-end { margin-bottom: 6px; padding-bottom: 6px; box-shadow: 0 1px 0 var(--line); }
.acc-nav a { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border-radius: 14px; color: var(--ink-2); font-size: 14.5px; font-weight: 650; transition: background .15s ease, color .15s ease; }
.acc-nav a:hover { background: #F4F4F8; color: var(--ink); }
.an-i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); }
.an-i svg { width: 18px; height: 18px; }
.an-t { flex: 1; min-width: 0; }
.an-s { padding: 2px 8px; border-radius: 99px; background: #F1F1F6; color: var(--ink-2); font-size: 12px; font-weight: 680; font-variant-numeric: tabular-nums; }
.an-c { display: none; color: #B4B4C4; }
.an-c svg { width: 18px; height: 18px; }
.acc-nav .is-active a { background: var(--pink-50); color: var(--pink-d); font-weight: 700; }
.acc-nav .is-active .an-i { background: var(--pink); color: #fff; }
.acc-nav .is-active .an-s { background: #fff; color: var(--pink-d); }
.acc-nav .wd-my-acc-whatsapp .an-i { background: #E8FAEF; color: #128C4A; }
.acc-nav .woocommerce-MyAccount-navigation-link--customer-logout a, .acc-nav .wd-my-acc-delete a { color: var(--muted); }
.acc-nav .wd-my-acc-delete a:hover { background: var(--pink-50); color: var(--pink-dd); }
.acc-c { min-width: 0; display: grid; gap: 18px; align-content: start; }
.acc-v img.uc { display: inline-block; width: auto; vertical-align: middle; }
.acc-n { padding: 14px 16px; border-radius: 18px; background: #F4F4F8; color: var(--ink-2); font-size: 14.5px; font-weight: 620; line-height: 1.45; }
.acc-n.ok { background: var(--ok-50); color: var(--ok-d); }
.acc-n.err { background: var(--pink-50); color: var(--pink-dd); }
.acc-n .ob { margin-left: 8px; }
.ob {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 12px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-size: 13.5px; font-weight: 680; white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease;
}
.ob:hover { background: #F7F7FA; box-shadow: inset 0 0 0 1.5px #DCDCE6; }
.ob svg { width: 16px; height: 16px; }
.ob.repeat { background: var(--pink); box-shadow: none; color: #fff; }
.ob.repeat:hover { background: var(--pink-d); }
.ob.repeat-disabled { background: #F6F6F9; box-shadow: none; color: #A8A8B8; cursor: not-allowed; }
.ob-x { color: var(--pink-dd); }
.ob-x:hover { background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-100); }
.ob-add { justify-self: start; height: 48px; padding: 0 18px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--pink-100); color: var(--pink-d); }
.ob-add:hover { background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-100); }
.btn.danger { background: var(--pink-dd); box-shadow: none; }
.btn.danger:hover { background: #A80A3F; }
.acc-hola { color: var(--ink); font-size: 17px; font-weight: 590; line-height: 1.5; }
.acc-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; }
.acc-uc {
  display: grid; align-content: space-between; gap: 10px; min-height: 176px; padding: 20px 22px; border-radius: 26px;
  background: var(--grad-pink); color: #fff; box-shadow: 0 14px 30px rgba(255, 38, 104, .22);
  transition: transform .2s var(--ease);
}
.acc-uc:hover { transform: translateY(-2px); }
.uc-l, .balance-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.uc-l .uc, .balance-label .uc { filter: brightness(0) invert(1); }
.uc-a { font-size: 44px; line-height: 1; }
.uc-a .m, .balance-amount .m { color: #fff; letter-spacing: -.05em; }
.uc-t { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 12px 5px 5px; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.uc-t img { border-radius: 50%; background: #fff; }
.acc-last { display: grid; gap: 12px; align-content: start; padding: 20px 22px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.al-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc-last h2 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.al-m { color: var(--muted); font-size: 14px; font-weight: 620; }
.al-m a { color: var(--ink); font-weight: 700; }
.al-m .m { color: var(--ink-2); }
.al-th { display: flex; gap: 8px; }
.al-th span { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--tile); overflow: hidden; }
.al-th img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.al-th .more { color: var(--ink-2); font-size: 13px; font-weight: 680; }
.al-a, .oa { display: flex; flex-wrap: wrap; gap: 8px; }
.ost { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--warn-50); color: var(--warn-dd); font-size: 12.5px; font-weight: 680; white-space: nowrap; }
.ost::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ost-completed { background: var(--ok-50); color: var(--ok-d); }
.ost-en-ruta { background: #E6F1FF; color: #0F4C9A; }
.ost-on-hold, .ost-failed, .ost-pending { background: var(--pink-50); color: var(--pink-dd); }
.ost-cancelled { background: #F1F1F6; color: var(--muted); }
.ob.pay { background: var(--ink); box-shadow: none; color: #fff; }
.ob.pay:hover { background: #2A2640; }
.ob.cancel { color: var(--pink-dd); }
.ob.cancel:hover { background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-100); }
.acc-ord .ost { margin-left: 8px; vertical-align: 1px; }
.acc-t, .cashback-history-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-size: 14.5px; }
.acc-t th, .acc-t td, .cashback-history-table th, .cashback-history-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.acc-t thead th, .cashback-history-table thead th { background: #FAFAFC; color: var(--muted); font-size: 12.5px; font-weight: 680; letter-spacing: .02em; }
.acc-t tbody tr:last-child > *, .cashback-history-table tbody tr:last-child > * { border-bottom: 0; }
.acc-t tbody th a, .cashback-history-table a { color: var(--ink); font-weight: 700; }
.cashback-history-table a { display: inline-flex; align-items: center; min-height: 32px; }
.acc-t tbody th a:hover, .cashback-history-table a:hover { color: var(--pink-d); }
.acc-t td, .cashback-history-table td { color: var(--ink-2); font-weight: 620; }
.ot-n { display: block; color: var(--muted); font-size: 12.5px; font-weight: 590; }
.pmt .oa { justify-content: flex-end; }
@media (min-width: 821px) {
  .ord-t th, .ord-t td { padding: 12px; }
  .ord-t tr > :first-child { padding-left: 18px; }
  .ord-t tr > :last-child { padding-right: 16px; }
  .ord-t .oa { display: grid; grid-template-columns: 144px 52px 108px; }
  .ord-t .oa > * { grid-row: 1; }
  .ord-t .oa .repeat, .ord-t .oa .repeat-disabled, .ord-t .oa .pay { grid-column: 1; }
  .ord-t .oa .view { grid-column: 2; }
  .ord-t .oa .fel_pdf, .ord-t .oa .cancel { grid-column: 3; }
}
@media (min-width: 821px) and (max-width: 1279px) {
  .ord-t, .ord-t tbody, .ord-t th, .ord-t td { display: block; }
  .ord-t { border-radius: 0; box-shadow: none; overflow: visible; }
  .ord-t thead { display: none; }
  .ord-t tbody { display: grid; gap: 12px; }
  .ord-t tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num st act" "date date act" "tot tot act";
    gap: 4px 12px; align-items: center; padding: 16px 18px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line);
  }
  .acc-t.ord-t tr > * { padding: 0; border: 0; }
  .ord-t .woocommerce-orders-table__cell-order-number { grid-area: num; font-size: 16px; }
  .ord-t .woocommerce-orders-table__cell-order-status { grid-area: st; justify-self: start; }
  .ord-t .woocommerce-orders-table__cell-order-date { grid-area: date; color: var(--muted); font-size: 13px; }
  .ord-t .woocommerce-orders-table__cell-order-total { grid-area: tot; }
  .ord-t .ot-n { display: inline; }
  .ord-t .woocommerce-orders-table__cell-order-actions { grid-area: act; }
}
.ord-t time { white-space: nowrap; }
.ord-t .oa .ob { height: 36px; padding: 0 10px; }
.acc-pg { display: flex; justify-content: space-between; gap: 10px; }
.acc-ord { color: var(--muted); font-size: 14px; font-weight: 620; }
.trk { padding: 18px 20px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.trk ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trk li { position: relative; display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 650; text-align: center; }
.trk li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: var(--line); }
.trk li.done::before, .trk li.on::before { background: #BDE8CF; }
.trk b { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #F1F1F6; color: var(--ink-2); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 4px #fff; }
.trk b svg { width: 16px; height: 16px; }
.trk .done b { background: var(--ok-50); color: var(--ok); }
.trk .on { color: var(--ink); }
.trk .on b { background: var(--pink); color: #fff; }
.trk-d { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 620; text-align: center; }
.vo-g { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.vo-g .co-l { max-height: none; }
.vo-g .co-ln { grid-template-columns: 48px minmax(0, 1fr) auto; }
.vo-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.vo-a > span { margin-right: 4px; color: var(--ink-2); font-size: 13.5px; font-weight: 680; }
.superunico-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dashboard-hero { grid-column: 1 / -1; padding: 24px; border-radius: 26px; background: var(--grad-pink); color: #fff; box-shadow: 0 14px 30px rgba(255, 38, 104, .22); }
.balance-display { display: grid; gap: 8px; justify-items: start; }
.balance-amount { font-size: 52px; line-height: 1; }
.dashboard-card { border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.card-header { padding: 20px 20px 0; }
.card-header h4 { font-size: 16px; font-weight: 700; }
.card-content { display: grid; gap: 12px; padding: 20px; }
.current-status-pill span { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--pink-50); color: var(--pink-d); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.current-tier-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.current-tier-info .tier-name { font-size: 17px; font-weight: 700; }
.tier-rate { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--pink-d); font-weight: 700; }
.tier-explanation { color: var(--muted); font-size: 13.5px; font-weight: 590; line-height: 1.5; }
.progress-bar { height: 10px; border-radius: 99px; background: #F1F1F6; overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--pink); }
.progress-info { margin-top: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 590; line-height: 1.45; }
.progress-info strong { color: var(--ink); font-weight: 700; }
.tier-list-header, .tier-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 8px; align-items: center; }
.tier-list-header { padding: 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.tier-list-header div:last-child { text-align: right; }
.tier-list { display: grid; gap: 6px; }
.tier-item { padding: 10px 12px; border-radius: 14px; background: #FAFAFC; font-size: 13.5px; font-weight: 620; }
.tier-item.current { background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-100); }
.tier-status-column { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tier-range-column { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tier-cashback-column { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--pink-d); font-weight: 700; }
.st-card { grid-column: 1 / -1; }
.st-card .card-content { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.stats-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.stat-item { display: grid; gap: 2px; }
.stat-value { font-size: 32px; line-height: 1.1; }
.stat-label { color: var(--ink-2); font-size: 14px; font-weight: 650; }
.stat-description { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 590; }
.terms-note { grid-column: 1 / -1; }
.terms-link { display: inline-block; padding: 4px 0; color: var(--pink-d); font-size: 13.5px; font-weight: 680; text-decoration: underline; text-underline-offset: 3px; }
.superunico-cashback-history { display: grid; gap: 12px; }
.superunico-cashback-history h4 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.cashback-amount { color: var(--pink-d) !important; font-weight: 700 !important; }
.status-completed, .status-pending { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--ok-50); color: var(--ok-d); font-size: 12.5px; font-weight: 680; }
.status-pending { background: var(--warn-50); color: var(--warn-dd); }
.cashback-history-actions { display: flex; justify-content: center; }
.acc-ad { display: grid; gap: 24px; }
.acc-ads { display: grid; gap: 12px; }
.acc-ads h3 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.adc-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.adc { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.adc.def { max-width: 560px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; background: #FFFBFC; box-shadow: inset 0 0 0 1.5px var(--pink-100); }
.adc address { color: var(--ink-2); font-size: 14.5px; font-style: normal; font-weight: 590; line-height: 1.55; }
.adc-h { font-size: 15px; font-weight: 700; }
.thwma-acnt-adr-footer { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.acc-f { max-width: 640px; }
.af-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.cf-h { color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 590; }
.acc-pw { min-width: 0; margin: 6px 0 0; padding: 16px; border: 0; border-radius: 18px; background: #F9F9FB; display: grid; gap: 14px; }
.acc-pw legend { float: left; width: 100%; padding: 0; font-size: 15px; font-weight: 700; }
.acc-pw .rf, .acc-del .rf:not([readonly]) { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.acc-pw .rf:focus, .acc-del .rf:not([readonly]):focus { box-shadow: inset 0 0 0 2px var(--pink); }
.pin-b { color: var(--ok); font-size: 13.5px; font-weight: 680; }
.pmt-c { display: inline-grid; place-items: center; width: 36px; height: 26px; margin-right: 10px; border-radius: 6px; background: #F1F1F6; color: var(--ink-2); vertical-align: middle; }
.pmt-c svg { width: 18px; height: 18px; }
.pmt-d { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--ok-50); color: var(--ok-d); font-size: 11.5px; font-weight: 700; }
.lg-v { display: grid; justify-items: center; padding: 24px 0 8px; }
.lg-c { width: min(440px, 100%); display: grid; gap: 16px; padding: 28px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.lg-c h1 { font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.acc-lf { display: grid; gap: 14px; }
.acc-lf .btn { width: 100%; }
.lf-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lf-r .ck { padding: 4px 0; font-size: 14px; }
.lf-reg { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.lf-reg p { color: var(--ink-2); font-size: 14px; font-weight: 650; }
.lg-m { display: grid; gap: 16px; }
.lg-back { justify-self: center; display: inline-flex; align-items: center; gap: 2px; }
.lg-back svg { width: 16px; height: 16px; }
.lp-p { color: var(--ink-2); font-size: 14.5px; font-weight: 590; line-height: 1.5; }
.lp-demo { justify-self: start; }
.acc-del { display: grid; gap: 16px; max-width: 640px; }
.del-sub { color: var(--muted); font-size: 15px; font-weight: 620; }
.del-info { padding: 16px; border-radius: 18px; background: #FFF6F0; color: #6B3A12; font-size: 14px; font-weight: 590; line-height: 1.5; }
.del-info ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
textarea.rf { height: 112px; padding: 14px 16px; resize: vertical; }
.del-ok { justify-items: center; text-align: center; }
.del-ok:focus { outline: none; }
.del-ok p { color: var(--ink-2); font-weight: 590; line-height: 1.5; }
.su-links { display: flex; justify-content: center; }
@media (max-width: 1080px) {
  .acc-g { grid-template-columns: 236px minmax(0, 1fr); gap: 20px 24px; }
  .vo-g { grid-template-columns: minmax(0, 1fr); }
  .acc-sum { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .acc-back { display: grid; }
  .acc-g { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .acc-v:not([data-ep="dashboard"]) .acc-nav { display: none; }
  .acc-nav { position: static; order: 2; padding: 4px 6px; border-radius: 22px; }
  .acc-nav li.an-end { margin-bottom: 4px; padding-bottom: 4px; }
  .acc-nav a { min-height: 54px; font-size: 15px; }
  .acc-nav .woocommerce-MyAccount-navigation-link--dashboard { display: none; }
  .an-c { display: grid; }
  .acc-uc { min-height: 0; }
  .uc-a { font-size: 40px; }
  .ob, .ord-t .oa .ob { height: 44px; }
  .acc-t, .acc-t tbody, .acc-t tr, .acc-t th, .acc-t td { display: block; }
  .acc-t { border-radius: 0; box-shadow: none; overflow: visible; }
  .acc-t thead { display: none; }
  .acc-t tbody { display: grid; gap: 12px; }
  .acc-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 16px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
  .acc-t th, .acc-t td { padding: 0; border: 0 !important; }
  .ord-t .woocommerce-orders-table__cell-order-number { font-size: 16px; }
  .ord-t .woocommerce-orders-table__cell-order-status { grid-column: 2; grid-row: 1; }
  .ord-t .woocommerce-orders-table__cell-order-date { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
  .ord-t .woocommerce-orders-table__cell-order-total { grid-column: 1 / -1; }
  .ord-t .ot-n { display: inline; }
  .ord-t .woocommerce-orders-table__cell-order-actions, .pmt .payment-method-actions { grid-column: 1 / -1; margin-top: 8px; }
  .pmt .oa { justify-content: flex-start; }
  .ord-t .oa, .al-a { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }
  .ord-t .oa .fel_pdf, .ord-t .oa .cancel { order: 1; }
  .ord-t .oa .view, .al-a .view { order: 2; min-width: 72px; }
  .pmt .payment-method-expires { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
  .pmt .payment-method-expires::before { content: attr(data-title) " "; }
  .acc-pg .ob { flex: 1; }
  .trk { padding: 16px 12px; }
  .trk li { font-size: 11px; gap: 6px; }
  .trk b { width: 28px; height: 28px; font-size: 12px; }
  .trk li + li::before { top: 13px; }
  .superunico-dashboard { grid-template-columns: minmax(0, 1fr); }
  .balance-amount { font-size: 44px; }
  .cashback-history-table, .cashback-history-table tbody { display: block; }
  .cashback-history-table thead { display: none; }
  .cashback-history-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .cashback-history-table tbody tr:last-child { border-bottom: 0; }
  .cashback-history-table td { padding: 0; border: 0 !important; }
  .cashback-history-table td:nth-child(1) { grid-row: 2; color: var(--muted); font-size: 12.5px; }
  .cashback-history-table td:nth-child(2) { grid-row: 1; }
  .cashback-history-table td:nth-child(3) { grid-row: 1; grid-column: 2; text-align: right; }
  .cashback-history-table td:nth-child(4) { grid-row: 2; grid-column: 2; text-align: right; }
  .adc.def { max-width: none; }
  .adc-l { grid-template-columns: minmax(0, 1fr); }
  .thwma-acnt-adr-footer .ob { flex: 1 1 auto; }
  .tier-list-header { display: none; }
  .tier-info { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .tier-range-column { grid-column: 1; grid-row: 2; padding-left: 26px; color: var(--muted); font-size: 12.5px; }
  .tier-cashback-column { grid-column: 2; grid-row: 1 / span 2; }
  .st-card .card-content { grid-template-columns: minmax(0, 1fr); }
  .acc-f .cf-2 { grid-template-columns: minmax(0, 1fr); }
  .lg-v { padding-top: 8px; }
  .lg-c { padding: 4px 0; border-radius: 0; box-shadow: none; }
}

/* ——— Modal / sheet ——— */
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 10, 26, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal.show { display: flex; animation: su-fade .2s ease; }
.modal.out { opacity: 0; transition: opacity .3s var(--ease); }
.mbox {
  width: min(480px, 100%);
  max-height: min(86vh, 760px);
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: su-pop .32s var(--ease);
}
.mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 12px; }
.mh h2 { font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.mh p { color: var(--muted); font-weight: 590; font-size: 14px; margin-top: 4px; }
.mb { overflow: auto; padding: 4px 24px 20px; overscroll-behavior: contain; }
.mf { padding: 14px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.mf .btn { flex: 1; white-space: nowrap; padding: 0 18px; }
.mf .btn.ghost { flex: 0 0 auto; }
.zin {
  height: 48px; border-radius: 16px; background: var(--fill);
  display: flex; align-items: center; gap: 10px; padding: 0 14px; margin-bottom: 10px;
  color: var(--muted);
}
.zin input { border: 0; outline: 0; background: none; flex: 1; font-size: 15px; font-weight: 590; color: var(--ink); }
.zl { display: grid; gap: 2px; }
.zo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px; border-radius: 14px;
  font-weight: 620; font-size: 15px; text-align: left;
}
.zo:hover { background: #F5F5F9; }
.zo.on { background: var(--pink-50); color: var(--pink-d); }
.reg { display: grid; gap: 10px; padding-top: 6px; }
.rf {
  width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 14px; outline: 0;
  background: var(--fill); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 590;
  transition: background .15s ease, box-shadow .15s ease;
}
.rf::placeholder, .reg-tel input::placeholder { color: #9A9AAE; }
.rf:focus, .rf:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--pink); }
select.rf { appearance: auto; cursor: pointer; }
select.rf:has(option[value=""]:checked) { color: #9A9AAE; }
.reg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-tel { display: flex; align-items: center; gap: 10px; }
.reg-tel span { color: var(--muted); font-weight: 650; }
.reg-tel input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; color: inherit; }
.reg-ts {
  height: 65px; border-radius: 14px; border: 1.5px dashed var(--line);
  display: grid; place-items: center; color: var(--muted); font-size: 12.5px; font-weight: 590;
}
.reg-msg { padding: 11px 14px; border-radius: 12px; background: #FFE8EE; color: #B0003A; font-size: 14px; font-weight: 650; }
.reg-msg.ok { background: #E2F6E9; color: #0E7A3A; }
.reg-go { width: 100%; height: 52px; }
.reg-go:disabled { opacity: .6; }
.reg-links { display: flex; justify-content: space-between; gap: 12px; padding: 2px 4px 0; }
.reg-links button { min-height: 40px; padding: 0 4px; font-size: 14px; font-weight: 680; color: var(--pink-d); }
.reg-links button + button { color: var(--muted); }
.reg-p {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  background: var(--pink-50); font-size: 14px; font-weight: 590; line-height: 1.35;
}
.reg-p b { font-weight: 680; }
.reg-pi { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #fff; overflow: hidden; }
.reg-pi img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.reg-note { text-align: center; color: var(--muted); font-size: 12px; font-weight: 590; }
.fg { padding: 16px 0; border-bottom: 1px solid var(--line); }
.fg:last-child { border-bottom: 0; }
.fg h4 { font-size: 12px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ck { display: flex; align-items: center; gap: 12px; padding: 9px 2px; cursor: pointer; font-weight: 620; font-size: 14.5px; }
.ck input { position: absolute; opacity: 0; pointer-events: none; }
.ck-b {
  width: 22px; height: 22px; border-radius: 7px;
  box-shadow: inset 0 0 0 2px #D5D5E0;
  display: grid; place-items: center; color: transparent;
  transition: background .15s ease, box-shadow .15s ease;
  flex: 0 0 auto;
}
.ck input:checked + .ck-b { background: var(--pink); box-shadow: none; color: #fff; }
.ck input:focus-visible + .ck-b { outline: 3px solid rgba(255, 38, 104, .45); outline-offset: 2px; }
.ck .eb { width: 26px; height: 26px; margin-right: -4px; box-shadow: none; }
.ck .eb.pa { box-shadow: inset 0 0 0 1px var(--line); }
.ck .eb svg { width: 15px; height: 15px; }
.ck .eb.pa svg { width: 100%; height: 100%; }
.prs { display: flex; flex-wrap: wrap; gap: 8px; }
/* ——— Toasts, flyer, floats ——— */
/* Full-width box, children centred: a fixed box at left: 50% with no width shrinks to half the viewport, which
   cut the undo toast's product name to one or two words on phones (the user, 2026-10-13). */
.toasts {
  position: fixed; left: 14px; right: 14px; bottom: 26px;
  z-index: 95;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--ink); color: #fff;
  border-radius: 18px;
  padding: 10px 12px 10px 10px;
  display: flex; align-items: center; gap: 12px;
  font-weight: 620; font-size: 14px;
  box-shadow: 0 16px 40px rgba(20, 16, 40, .3);
  animation: su-toastIn .42s var(--spring);
  max-width: min(440px, 100%);
}
/* With the cart drawer open, toasts (the undo) sit over the drawer, above its footer, not at the page's foot behind it. */
html:has(#drawer.show) .toasts { left: auto; right: 14px; width: calc(min(460px, 100vw) - 28px); bottom: calc(var(--drf, 150px) + 12px); }
.toast.out { animation: su-toastOut .28s ease forwards; }
@keyframes su-toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes su-toastOut { to { opacity: 0; transform: translateY(10px); } }
.toast .ti { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--pink); overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; font-size: 18px; }
.toast .ti svg { width: 20px; height: 20px; }
.toast .ti img { width: 100%; height: 100%; object-fit: contain; }
.toast span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; line-height: 1.3; }
.toast button { color: #FF8FB0; font-weight: 700; padding: 6px 8px; border-radius: 10px; white-space: nowrap; }
/* ——— Footer ——— */
.ft { background: var(--pink); color: #fff; border-radius: 36px 36px 0 0; margin-top: 64px; }
.ft-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 48px var(--pad) 26px;
  display: grid; grid-template-columns: 1.5fr 1fr .8fr 1.1fr; gap: 36px;
}
.ft-in img.lg { height: 38px; width: auto; }
.ft-me > a { display: inline-block; padding: 0; }
.ft-in p { font-weight: 590; font-size: 15px; margin-top: 14px; max-width: 22em; line-height: 1.45; opacity: .95; }
.ft h5 { margin: 4px 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ft-me h5 { margin: 26px 0 0; }
.ft-in a, .ft-in .t { display: block; font-weight: 620; font-size: 15px; padding: 5px 0; opacity: .95; }
.ft-in .ic { display: flex; align-items: center; gap: 10px; }
.ft-in .ic svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .9; }
.ft-in a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ft .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ft-in a.store { display: inline-flex; padding: 0 18px 0 14px; opacity: 1; }
.ft-in a.store:hover { text-decoration: none; }
.soc { display: flex; gap: 10px; margin-top: 16px; }
.ft-in .soc a {
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); opacity: 1;
  transition: background .2s ease, transform .2s var(--spring);
}
.ft-in .soc a:hover { background: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.ft-b {
  max-width: var(--wrap); margin: 0 auto;
  padding: 18px var(--pad) 26px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 13px; font-weight: 620; opacity: .85;
}

/* ——— Content pages ——— */
.doc-h, .zn-h, .lp-h { flex-direction: column; }
.doc-h, .zn-h { margin-bottom: 24px; }
.doc-h p, .zn-h p, .lp-h p { margin-top: 8px; color: var(--muted); font-weight: 620; font-size: 14.5px; }
.doc-g { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc {
  position: sticky; top: calc(var(--hh) + 16px);
  max-height: calc(100vh - var(--hh) - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 10px 8px 12px; border-radius: 22px; background: #F7F7FA;
}
.toc summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 10px; pointer-events: none;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary small { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 620; }
.toc summary svg { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc button {
  width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 7px 10px; border-radius: 12px;
  font-size: 13.5px; font-weight: 620; line-height: 1.3; color: var(--ink-2);
  transition: background .15s ease, color .15s ease;
}
.toc button:hover { background: #fff; color: var(--pink-d); }
.sn {
  flex: 0 0 auto; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 7px;
  display: grid; place-items: center;
  background: #fff; color: var(--pink-d); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.prose { max-width: 70ch; font-size: 16px; line-height: 1.7; font-weight: 510; color: var(--ink-2); overflow-wrap: anywhere; }
.prose h2 {
  display: flex; gap: 12px; align-items: center;
  margin: 44px 0 12px; scroll-margin-top: calc(var(--hh) + 24px);
  font-size: 22px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .sn { min-width: 34px; height: 34px; border-radius: 11px; background: var(--pink-50); font-size: 14px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose strong { color: var(--ink); font-weight: 680; }
.prose a { color: var(--pink-d); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; margin: 6px 0 22px; border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14.5px; line-height: 1.4; }
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose tr:first-child td { background: #F7F7FA; }
.prose tr:last-child td { border-bottom: 0; }
.help {
  margin-top: 56px; padding: 22px 26px; border-radius: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(120deg, #DDF7E8 0%, #C8F1DA 100%); color: var(--ok-dd);
}
.help b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.help span { display: block; margin-top: 3px; font-weight: 590; opacity: .8; }
.help span a { text-decoration: underline; text-underline-offset: 2px; font-weight: 680; }
.help .btn-wa { flex: 0 0 auto; }
.ab-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-top: 18px; }
.ab-t h1 { margin-top: 16px; font-size: clamp(36px, 4.6vw, 62px); line-height: .98; letter-spacing: -.055em; font-weight: 700; }
.ab-t p { margin-top: 16px; font-size: 20px; font-weight: 590; color: var(--ink-2); line-height: 1.4; }
.ab-t .btns, .nf .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.ab-ph img { width: 100%; height: auto; border-radius: 32px; box-shadow: var(--shadow-1); }
.ab-facts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab-facts li { padding: 18px 20px; border-radius: 22px; background: #F7F7FA; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.ab-facts span { grid-row: span 2; width: 48px; height: 48px; border-radius: 15px; background: #fff; display: grid; place-items: center; font-size: 23px; }
.ab-facts b { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.ab-facts small { color: var(--muted); font-weight: 620; font-size: 13.5px; }
.ab-facts small a { display: inline-block; padding: 4px 0; }
.ab-facts small a { color: var(--pink-d); font-weight: 680; }
.ab-s { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 72px; }
.ab-s.r .ab-i { order: 2; }
.ab-i { aspect-ratio: 4 / 3; border-radius: 32px; background: var(--t); display: grid; place-items: center; padding: 36px; }
.ab-i img { max-width: 70%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ab-x h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -.05em; font-weight: 700; }
.ab-x p { margin-top: 14px; max-width: 30em; font-size: 17.5px; line-height: 1.6; font-weight: 540; color: var(--ink-2); }
.ab-x strong { color: var(--ink); font-weight: 680; }
.zn-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.zn-q {
  height: 54px; padding: 0 18px; border-radius: 999px;
  display: flex; align-items: center; gap: 10px;
  background: var(--fill); color: var(--muted);
  transition: background .2s ease, box-shadow .2s ease;
}
.zn-q:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--pink); }
.zn-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; font-weight: 620; color: var(--ink); }
.zn-s { margin: 14px 2px 0; color: var(--muted); font-weight: 620; font-size: 14px; }
.zn-s b { color: var(--ink); }
.zn-c { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.zn-c .sp-none { width: 100%; }
.zc {
  height: 42px; padding: 0 15px 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 14.5px; font-weight: 650; color: var(--ink-2);
  transition: box-shadow .2s ease, background .2s ease;
}
.zc svg { width: 15px; height: 15px; color: var(--pink); }
.zc:hover { box-shadow: inset 0 0 0 1.5px var(--pink); }
.zc.on { background: var(--pink); color: #fff; box-shadow: none; }
.zc.on svg { color: #fff; }
.zn-m { margin: 0; position: sticky; top: calc(var(--hh) + 16px); border-radius: 28px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--tile); }
.zn-m img { width: 100%; height: auto; }
.lp-b { display: block; margin-top: 6px; border-radius: 28px; overflow: hidden; background: var(--tile); }
.lp-b img { width: 100%; height: auto; }
.lp-h { margin-top: 26px; }
.nf-h { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 52px; align-items: center; max-width: 1040px; padding-top: 24px; }
.nf-i { width: 100%; height: auto; color: var(--pink); font-family: inherit; }
.nf-h .eyebrow { margin-bottom: 14px; }
.nf-h h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1; letter-spacing: -.05em; font-weight: 700; }
.nf-t { margin-top: 14px; min-height: 1.5em; font-size: 19px; font-weight: 590; line-height: 1.45; color: var(--ink-2); }

/* ——— Mobile ——— */
@media (max-width: 1080px) {
  .browse { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
  .zone b { max-width: 110px; }
  .logo { margin-right: 8px; }
  .logo img { height: 30px; }
  .srch { margin-right: 4px; }
  .kbd, .zone > .chev, .uc-btn .chev { display: none; }
  .ft-in { grid-template-columns: 1.3fr 1fr 1fr; }
  .ft-dp { display: none; }
}
@media (max-width: 820px) {
  :root { --pad: 14px; --hdr-r: 28px; }
  /* The strip pins under the status bar, the logo row slides under it, and the search pins below the strip. */
  .strip { gap: 7px; min-height: 30px; padding: calc(6px + env(safe-area-inset-top)) var(--pad) 6px; font-size: 12px; white-space: nowrap; }
  .strip .lg { display: none; }
  .strip .st { display: inline; }
  .strip .live { width: 7px; height: 7px; }
  #strip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* One colour from the clock to the search: the app paints its status bar --pink natively, and the phone
     browser bar takes the --pink theme-color. The line is plain white on --pink, 3.7:1 (the user's choice,
     2026-10-07: no darker pill behind it). */
  .strip { background: var(--pink); }
  .hdr {
    top: calc(var(--sh, 30px) - var(--hcol, 0px));
    border-radius: 0 0 var(--hdr-r) var(--hdr-r);
  }
  /* The cart sits at the end of the search row, so the pinned header always shows it (the user, 2026-10-07:
     no floating "Ver carrito" bar). It is a flex item of that row, so where the app hides it the field
     simply takes its room. */
  .hdr-in {
    height: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo zone" "srch srch";
    gap: 12px 10px;
    padding: 10px var(--pad) 14px;
  }
  .logo { grid-area: logo; display: flex; align-items: center; height: 44px; margin-right: 0; padding-right: 2px; }
  .logo .lg-full { height: 28px; }
  .zone { grid-area: zone; justify-self: stretch; height: auto; padding: 0; gap: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; }
  .zone:hover { transform: none; }
  .zone .pin, .zone > .chev { display: none; }
  .zone .zd { font-size: 11px; line-height: 1.2; color: inherit; opacity: .85; }
  .zone b { display: flex; align-items: center; gap: 3px; font-size: 17px; font-weight: 700; letter-spacing: -.025em; line-height: 1.36; max-width: 100%; margin-top: 1px; }
  .zone .zn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zone .chev-m { display: inline-flex; flex: 0 0 auto; }
  .uc-btn { grid-area: zone; justify-self: end; height: 44px; gap: 8px; padding: 0 12px 0 4px; border-radius: 15px; box-shadow: 0 8px 20px rgba(120, 0, 40, .2); }
  .uc-btn:hover { transform: none; }
  .uc-ti { border-radius: 11px; }
  .uc-wm { width: 55px; }
  .uc-btn b { font-size: 16px; }
  .uc-btn .chev { display: none; }
  .srch { grid-area: srch; margin-right: 0; display: flex; gap: 10px; }
  .srch-f { flex: 1; min-width: 0; height: 48px; box-shadow: 0 8px 20px rgba(120, 0, 40, .2); }
  .mn-b { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--glass); color: #fff; }
  .mn-b svg { width: 22px; height: 22px; }
  .srch.open .mn-b { display: none; }
  .srch.open .sp-x { display: block; flex: none; height: 48px; padding: 0 2px 0 4px; color: #fff; font-size: 16px; font-weight: 680; }
  .kbd { display: none; }
  .acts, .ib.acc { display: none; }
  /* The cart is white like the search beside it, with the pink mark and a pink count ringed in white; the menu,
     less used, stays glass. */
  .ib.cart-m { display: grid; flex: none; width: 48px; height: 48px; border-radius: 16px; background: #fff; color: var(--pink); box-shadow: 0 8px 20px rgba(120, 0, 40, .2); }
  .ib.cart-m:hover { background: #fff; }
  .srch.open .ib.cart-m { display: none; }
  .ib.cart-m .bdg { top: -5px; right: -5px; background: var(--pink); color: #fff; box-shadow: 0 0 0 2px #fff; }
  /* The open search is one fixed layer over the page, as FiboSearch's mobile overlay is: under the strip, a pink
     bar with the field where the pinned header holds it and Cancelar beside it, then the list, the only part
     that scrolls. It fills the visual viewport (--vvt, --vvh, kept while open), so the list ends at the keyboard
     and the bar stays on screen if iOS pans. The header keeps the row's height, so the page under it holds. */
  html.sp-on .strip { z-index: 57; }
  html.sp-on .hdr { z-index: 56; }
  html.sp-on .hdr-in { grid-template-rows: auto var(--srch-h, 48px); }
  .srch.open {
    position: fixed; z-index: 1; left: 0; right: 0; top: var(--vvt, 0px);
    height: var(--vvh, 100dvh);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: 0 10px;
    padding: calc(var(--sh, 30px) + 10px) var(--pad) 0;
    background: #fff;
  }
  .srch.open::before {
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0;
    height: calc(var(--sh, 30px) + 72px);
    background: var(--pink); border-radius: 0 0 var(--hdr-r) var(--hdr-r); box-shadow: var(--shadow-hdr);
  }
  .srch.open .sp {
    grid-column: 1 / -1; position: static;
    min-height: 0; max-height: none; margin: 14px calc(-1 * var(--pad)) 0;
    padding: 0 2px env(safe-area-inset-bottom);
    border-radius: 0; box-shadow: none;
  }
  /* The layer covers the logo, so the field names the store, as it does once the logo has scrolled away. */
  .srch.open #q:placeholder-shown ~ .q-br { opacity: 1; transform: none; }
  .srch.open #q:placeholder-shown::placeholder { color: transparent; }
  .promos { display: block; margin: 16px -14px 0; }
  .pr-track {
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding: 0 14px 2px; scroll-padding: 0 14px;
    overscroll-behavior-x: none;
  }
  .pr-track::-webkit-scrollbar { display: none; }
  .pr {
    position: relative; isolation: isolate; overflow: hidden;
    flex: 0 0 calc(100% - 40px);
    height: 176px; border-radius: 26px;
    background: var(--t); color: var(--ink);
    padding: 16px 18px 16px;
    display: flex; flex-direction: column; align-items: flex-start;
    scroll-snap-align: start;
  }
  .pr.hot {
    color: #fff;
    background:
      radial-gradient(90% 120% at 100% 0%, #FF7FA6 0%, rgba(255, 127, 166, 0) 60%),
      radial-gradient(70% 90% at 0% 100%, #D10C4E 0%, rgba(209, 12, 78, 0) 70%),
      var(--pink);
  }
  .pr .pe {
    width: 34px; height: 34px; border-radius: 12px;
    background: rgba(255, 255, 255, .75);
    display: grid; place-items: center; font-size: 17px;
  }
  .pr.hot .pe { background: rgba(255, 255, 255, .22); }
  .pr h3 { font-size: 25px; line-height: 1.02; letter-spacing: -.045em; font-weight: 700; margin-top: 4px; max-width: 50%; }
  .pr p { font-size: 13px; line-height: 1.3; font-weight: 590; margin-top: 5px; max-width: 47%; color: rgba(26, 26, 46, .66); }
  .pr.hot p { color: rgba(255, 255, 255, .92); }
  .pr .go {
    margin-top: auto;
    height: 30px; padding: 0 12px; border-radius: 999px;
    background: var(--ink); color: #fff;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 680;
  }
  .pr.hot .go { background: #fff; color: var(--pink-d); }
  .pr .cut { filter: drop-shadow(0 12px 14px rgba(40, 10, 30, .24)); }
  .pr.hot .cut { filter: drop-shadow(0 14px 16px rgba(100, 0, 35, .36)); }
  .pr .pa { right: 15%; bottom: -8%; width: 31%; height: 80%; --r: -7deg; z-index: -1; }
  .pr .pa.dup { right: 12%; }
  .pr .pb { right: -9%; bottom: -5%; width: 34%; height: 90%; --r: 10deg; z-index: -2; }
  .pr .p1 { right: 25%; bottom: -10%; width: 21%; height: 70%; --r: -11deg; z-index: -2; }
  .pr .p2 { right: 3%; bottom: 22%; width: 26%; height: 70%; --r: 8deg; z-index: -3; }
  .pr .p3 { right: -11%; bottom: -14%; width: 34%; height: 76%; --r: 12deg; z-index: -1; }
  .dots { display: flex; justify-content: center; margin-top: 2px; }
  .dots button { width: 24px; height: 24px; display: grid; place-items: center; }
  .dots button::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: #DADAE4; transition: width .3s var(--ease), background .3s ease; }
  .dots button.on { width: 32px; }
  .dots button.on::before { width: 20px; background: var(--pink); }
  .stg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .stg::-webkit-scrollbar { display: none; }
  .stc { flex: 0 0 auto; max-width: 78vw; }
  main { padding: 0 14px 8px; }
  .bento { display: none; }
  .sec { margin-top: 30px; }
  .sh { margin-bottom: 10px; }
  .sh h2 { font-size: 21px; }
  .sh p { font-size: 13px; }
  .sh .lg { display: none; }
  .arr { display: none; }
  .promos + .sec { margin-top: 26px; }
  .dept, .mscrim { display: none !important; }
  .bsec { margin-top: 4px; }
  .bsec .sh { display: none; }
  .bsec + .promos { margin-top: 10px; }
  .bubs {
    gap: 0;
    margin: 0 -14px;
    padding: 12px 10px 2px;
    scroll-padding: 0 10px;
  }
  .bub { flex: 0 0 76px; }
  .bub-c { width: 62px; height: 62px; }
  .bub-c img { height: 90%; bottom: 8px; }
  .bub-c .emo { font-size: 28px; }
  .bub.all .bub-c svg { width: 22px; height: 22px; }
  .bub.pas .bub-c svg { width: 27px; height: 27px; }
  .bub b { font-size: 11.5px; margin-top: 7px; line-height: 1.18; }
  /* Two cards and half of the next on any phone: 100% is the screen less the rail's 14px sides, so a card is
     (screen - 14px - 2 gaps) / 2.5. Below 124px the stepper and two name lines get cramped (a 320px phone
     shows about 2.3); 168px is where the tablet rule below starts, so the width never jumps. */
  .rail { grid-auto-columns: clamp(124px, calc((100% - 10px) / 2.5), 168px); gap: 12px; margin: 0 -14px; padding: 2px 14px 8px; scroll-padding: 0 14px; }
  .rail.sm { grid-auto-columns: 36vw; }
  .brs { grid-auto-columns: 112px; }
  .br-l { width: 112px; height: 76px; }
  .pc-t { font-size: 13.5px; }
  .pc-p .m { font-size: 18px; }
  .fav { opacity: 1; transform: none; }
  .fav:not(.on) { display: none; }
  .bn { right: 8px; top: 8px; max-width: calc(100% - 56px); }
  .pc-top { --ex: 8px; --eb: 28px; --fy: 8px; --fs: 32px; --qx: 8px; --qh: 44px; --qw: min(128px, 100cqw - 16px); }
  .eb { width: 28px; height: 28px; }
  .eb svg { width: 16px; height: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .promo { padding: 26px 22px 200px; border-radius: 26px; min-height: 0; margin-top: 38px; }
  /* "¿No encuentras algo?" shorter on phones (the user, 2026-10-12: too tall): the three cutouts sit low on the
     right at about half their height, behind the button's end, instead of filling 160 px below it. */
  .promo.p-wa { padding-bottom: 72px; }
  .promo.p-wa .cut { height: 56% !important; bottom: -8% !important; }
  .promo.p-wa .cut:nth-of-type(1) { right: 1% !important; width: 27% !important; }
  .promo.p-wa .cut:nth-of-type(2) { right: 24% !important; width: 20% !important; height: 46% !important; bottom: -6% !important; }
  .promo.p-wa .cut:nth-of-type(3) { display: none; } /* the third would sit fully behind the button */
  .promo p { font-size: 15px; }
  .phone { right: 50%; translate: 50% 0; top: auto; bottom: -190px; width: 190px; height: 360px; rotate: -6deg; }
  .promo.p-uc { padding-bottom: 150px; }
  .uc-art { right: 50%; translate: 50% 0; bottom: 20px; gap: 10px; }
  .uc-art img { width: calc(var(--s) * .62); height: calc(var(--s) * .62); }
  .uc-art b { font-size: 12px; padding: 3px 9px; }
  .p-uc .btns .btn { flex: 1 1 auto; }
  .lst, .dpt, .doc, .zones { padding-top: 10px; }
  .board.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
  .board.tiles .ac { grid-template-columns: 1fr; padding: 0; border-radius: 0; gap: 5px; background: none; box-shadow: none; }
  .board.tiles .ac:hover { transform: none; box-shadow: none; }
  .board.tiles .ac-m { height: auto; aspect-ratio: 1; border-radius: 18px; }
  .board.tiles .ac-m img { bottom: 9%; width: 72%; height: 78%; }
  .board.tiles .ac-b { padding: 0 1px; text-align: center; }
  .board.tiles .ac-b b { font-size: 11.5px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .bh { --h: 26px; margin-bottom: 8px; }
  .bh h1 { font-size: var(--h); }
  .bhb { padding: 14px; gap: 14px; }
  .bhb .br-l { width: 96px; height: 64px; }
  .bhb h1 { font-size: 26px; }
  .lbar { margin: 0 -14px 6px; padding: 8px 0 8px 14px; gap: 6px; }
  .lbar { padding-right: 14px; }
  .lbar .sortw { display: none; }
  /* Pinned, the bar reaches up behind the header's rounded corners, so the page never shows through them.
     Only while pinned: in place it would cover the title above it. */
  .lbar.stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--hdr-r); background: #fff; }
  .lbar.solo { display: none; }
  /* The home's circles, once half under the header, pin below it as an aisle bar's pills (body.hb). It is fixed,
     not sticky, so it never moves the page, and it is a sibling of the header, never inside it (iOS). */
  .hbar {
    display: flex; align-items: center;
    position: fixed; top: var(--hh); left: 0; right: 0; z-index: 20;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 1px 0 var(--line);
    visibility: hidden; opacity: 0; translate: 0 -6px;
    transition: opacity .18s var(--ease), translate .18s var(--ease), visibility 0s linear .18s;
  }
  .hbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--hdr-r); background: #fff; }
  body.hb .hbar { visibility: visible; opacity: 1; translate: none; transition: opacity .18s var(--ease), translate .18s var(--ease); }
  .hbar .cx { height: 40px; }
  .hbar .cx.fv .cxp, .hbar .cx.pas .cxp { background: var(--pink-50); color: var(--pink); }
  .hbar .cxp svg { width: 18px; height: 18px; }
  .hbar .cx.pas .cxp svg { width: 20px; height: 20px; }
  .lbf:not(:empty) { display: flex; flex: none; align-self: center; margin: -7px 0 -7px auto; padding-left: 12px; }
  .bhb .lbf:not(:empty) { padding-left: 0; }
  .lbf .fbtn { background: #fff; box-shadow: inset 0 0 0 1px #E2E2EA; }
  .lbf .fbtn.on { background: var(--on-bg); color: var(--on-fg); box-shadow: none; }
  .fbtn { width: 40px; height: 40px; padding: 0; justify-content: center; position: relative; }
  .fbtn .fbt { display: none; }
  .fbtn b { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
  .xs { padding-right: 24px; }
  .dbar { margin: 0 -14px; padding: 8px 0 8px 14px; }
  .dbar .xs { padding-right: 14px; }
  .dbar + .sec { margin-top: 18px; }
  .brw > .sec:first-child { margin-top: 12px; }
  .lmore { margin-top: 32px; }
  .lm-b { width: 100%; }
  .lend { margin-top: 36px; }
  .ccs {
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    margin: 0 -14px; padding: 2px 14px 6px;
    scroll-padding: 0 14px; scroll-snap-type: x proximity; overscroll-behavior-x: none;
  }
  .ccs::-webkit-scrollbar { display: none; }
  .ccs[data-later] { min-height: 70px; }
  .cc { flex: none; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 18px; scroll-snap-align: start; }
  .cc-i { width: 48px; height: 48px; border-radius: 13px; }
  .cc b { font-size: 14.5px; white-space: nowrap; }
  .pcols { margin-top: 34px; }
  .ov { padding: 0; --ov-dim: rgba(20, 10, 26, .55); }
  .pd {
    margin-top: 5vh;
    min-height: 95vh;
    border-radius: 28px 28px 0 0;
    animation: su-sheetUp .42s var(--ease);
  }
  @keyframes su-sheetUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
  .grab {
    display: block;
    position: sticky; top: 0; z-index: 4;
    height: 26px;
    touch-action: none;
  }
  .grab::before {
    content: "";
    position: absolute; left: 50%; top: 9px; translate: -50% 0;
    width: 44px; height: 5px; border-radius: 99px; background: #D6D6E0;
  }
  .pd-x { top: 12px; right: 12px; width: 38px; height: 38px; }
  .pd-nav { display: none; }
  .pd-g { display: block; }
  .pd-media { position: static; padding: 4px 16px 0; }
  .pd-media.many { display: block; }
  .pd-th { display: none; }
  .pd-dots { display: flex; }
  .pd-cnt { display: block; }
  .pd-ex { width: 34px; height: 34px; right: 10px; bottom: 10px; }
  .pd-zw { width: min(100%, 40vh); margin-inline: auto; }
  .gv-s { padding: 4px 10px; }
  .gv-a { display: none; }
  .gv-th button { width: 52px; height: 52px; }
  .pd-zw .ebs { left: 12px; bottom: 12px; }
  .pd-zw .eb { width: 34px; height: 34px; }
  .pd-info { padding: 16px 18px 8px; }
  .pd-t { font-size: 24px; margin: 2px 0 0; }
  .pd-brand { margin-top: 14px; font-size: 14px; }
  a.pd-brand { min-height: 44px; padding: 6px 12px 6px 8px; }
  a.pd-brand:not(:has(img)) { padding-left: 14px; }
  .pd-brand img { height: 26px; max-width: 72px; }
  .pd-p { margin-top: 12px; }
  .pd-p .m { font-size: 32px; }
  .pd-info .pd-buy, .pd-info .eta { display: none; }
  .pd-info .pd-buy:has(.bis) { display: grid; margin-top: 16px; }
  .bis { scroll-margin-bottom: 140px; }
  .bis-f .btn { padding: 0 18px; }
  .pd-fav {
    height: 40px; margin-top: 4px; width: auto;
    justify-content: flex-start; background: transparent; padding: 0 2px;
  }
  .pd-rails { padding: 0 16px 24px; }
  .pd-rails .rail { margin: 0 -16px; padding: 2px 16px 8px; scroll-padding: 0 16px; }
  .pd-bar {
    display: block;
    position: sticky; bottom: 0; z-index: 4;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 28px rgba(255, 255, 255, .92);
  }
  .bar-eta {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    min-height: 32px; margin-bottom: 8px;
    color: var(--ok-dd); text-align: left;
  }
  .bar-eta .ic {
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--ok-50); display: grid; place-items: center; font-size: 14px;
  }
  .bar-eta b {
    font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bar-eta em {
    margin-left: auto; flex: 0 1 auto; min-width: 0;
    font-style: normal; font-size: 12.5px; font-weight: 680; color: var(--ok);
    text-decoration: underline; text-underline-offset: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pd-bar:not(:has(.bar-eta)) { padding-top: 10px; }
  .pd-bar .pd-buy { margin: 0; }
  .pd-bar .sub { display: none; }
  .crumbs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 6px -14px 8px; padding: 0 10px;
    font-size: 12.5px; white-space: nowrap;
    --fl: 0px; --fr: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  }
  .crumbs::-webkit-scrollbar { display: none; }
  .crumbs.fl { --fl: 30px; }
  .crumbs.fr { --fr: 30px; }
  .crumbs a { padding: 4px 5px; }
  .crumbs svg { width: 12px; height: 12px; }
  .pd-pg .pd-media { padding: 0; }
  .pd-pg .pd-zw { width: min(100%, 33vh); }
  .pd-pg .pd-info { padding: 14px 2px 8px; }
  .pd-pg .pd-info .eta { display: flex; }
  /* Bottom bars sit on the screen's edge. The preview draws the app's tab bar inside the page, so it
     lifts them 88px there; the app lays its web view out above its tabs. */
  .pd-pg .pd-bar { margin: 0 -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .pd-pg .pd-rails { padding: 0 0 16px; }
  .pd-pg .pd-rails .rail { margin: 0 -14px; padding: 2px 14px 8px; scroll-padding: 0 14px; }
  .board { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ac {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 8px 12px;
  }
  .ac > svg { display: none; }
  .ac-m { height: 88px; }
  .ac-b b { font-size: 14.5px; white-space: normal; }
  .drawer {
    top: 6vh; width: 100%;
    border-radius: 28px 28px 0 0;
    transform: translateY(104%);
  }
  .modal { align-items: flex-end; padding: 0; }
  .mbox { position: relative; width: 100%; max-height: 90vh; border-radius: 28px 28px 0 0; animation: su-sheetUp .38s var(--ease); }
  /* The product sheet's handle on every sheet that swipes closed, drawn so it takes no room. */
  .drawer::before, .mbox::before {
    content: ""; position: absolute; z-index: 6; left: 50%; top: 9px; translate: -50% 0;
    width: 44px; height: 5px; border-radius: 99px; background: #D6D6E0; pointer-events: none;
  }
  .modal[data-kind="uc"] .mbox::before { background: rgba(255, 255, 255, .55); }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ft { margin-top: 48px; border-radius: 30px 30px 0 0; }
  .doc-h, .zn-h { margin-bottom: 16px; }
  .doc-g { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .toc { position: static; max-height: none; padding: 0 6px; }
  .toc summary { pointer-events: auto; cursor: pointer; padding: 14px 10px; font-size: 13px; }
  .toc summary svg { display: block; width: 14px; height: 14px; transition: rotate .2s ease; }
  .toc[open] summary svg { rotate: 180deg; }
  .toc ol { padding-bottom: 10px; }
  .prose { font-size: 15.5px; line-height: 1.65; }
  .prose h2 { font-size: 19px; margin-top: 34px; gap: 10px; }
  .prose h2 .sn { min-width: 30px; height: 30px; font-size: 13px; }
  .prose table { font-size: 13.5px; }
  .prose td { padding: 9px 10px; }
  .help { flex-direction: column; align-items: flex-start; padding: 20px; margin-top: 40px; }
  .ab-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 4px; }
  .ab-t p { font-size: 17px; }
  .ab-ph { order: -1; }
  .ab-ph img { border-radius: 24px; }
  .ab-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 28px; }
  .ab-facts li { padding: 14px 16px; }
  .ab-s { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 44px; }
  .ab-s.r .ab-i { order: 0; }
  .ab-i { aspect-ratio: 16 / 10; border-radius: 24px; padding: 22px; }
  .ab-x p { font-size: 16px; }
  .zn-g { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .zn-m { position: static; order: -1; border-radius: 22px; }
  .zc { height: 40px; font-size: 14px; }
  .lp-b { margin: 2px 0 0; border-radius: 20px; }
  .lp-h { margin-top: 18px; }
  .nf-h { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: center; padding-top: 8px; }
  .nf-i { width: 150px; margin: 0 auto 8px; }
  .nf-t { font-size: 16.5px; }
  .nf .btns { justify-content: center; }
  .ft-in { grid-template-columns: 1fr 1fr; gap: 28px 18px; padding-top: 36px; }
  .ft-me { grid-column: 1 / -1; }
  .ft-dp { display: none; }
  .ft-in .t { font-size: 14.5px; padding: 6px 0; }
  .ft-in a { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 14.5px; }
  .ft-in .ic { gap: 8px; }
  .ft-b { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
@media (min-width: 560px) and (max-width: 820px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-auto-columns: 30vw; }
}
/* Narrow phones: the full logo shrinks, and below 360px a guest gets the mark so the zone name keeps its room. */
@media (max-width: 374px) {
  .logo .lg-full { height: 25px; }
}
@media (max-width: 359px) {
  .strip .st { display: none; }
  .strip .xs { display: inline; }
  .logo { width: 44px; height: 44px; padding: 0; border-radius: 15px; background: rgba(255, 255, 255, .16); justify-content: center; }
  .logo .lg-full { display: none; }
  .logo .lg-mark { display: block; width: 28px; height: auto; }
  body.logged-in .logo { width: auto; padding: 0 2px 0 0; border-radius: 0; background: none; justify-content: flex-start; }
  body.logged-in .logo .lg-full { display: block; height: 21px; }
  body.logged-in .logo .lg-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Headlines and section titles in the display face, never product names, prices or buttons. Last and with
   :root, so it wins over each title's own weight and tracking. Cap heights are matched, so the condensed
   face is not smaller. */
:root :is(.tile h2, .tile h3, .promo h3, .pr h3, .bh h1, .bhb h1, .cp-h h1, .ct-h h1, .lg-c h1, .ab-t h1, .ab-x h2, .nf-h h1, .empty h2, .co-c .co-lg-t, .ty-ok h2, .ty-amt, .ty-amt .m, .uc-a, .uc-a .m, .ucw-a, .ucw-a .m, .balance-amount, .balance-amount .m, .sh h2, .h2, .prose h2) {
  font-family: var(--font-d);
  font-weight: 400;
  letter-spacing: -.012em;
  font-size-adjust: cap-height .66;
}
/* The phone app's floating tab bar (app builds from the 2026-10 revamp). The app sets --su-tab (the space its
   bar takes at the bottom, px) on <html> before first paint, and html.su-tabbar while the bar is on screen; it
   takes the class away while a sheet has the page (html.lock) or the keyboard is up. The body padding is the
   app's; here the bars that stick to the bottom step over the pill, and the toasts with them. Older app builds
   set none of this, so nothing here reaches them. */
html.su-tabbar:not(.lock) .ct-bar { bottom: var(--su-tab, 0px); padding-bottom: 12px; }
html.su-tabbar:not(.lock) .pd-bar { bottom: var(--su-tab, 0px); padding-bottom: 10px; }
html.su-tabbar:not(.lock) .toasts { bottom: calc(26px + var(--su-tab, 0px)); }

/* Three products per row in grids on phones from 390 px (Superunico → Ajustes "Productos por fila en el teléfono";
   the user, 2026-10-12). A compact card: 3-line name at 13 px (names run 36 characters at the median, 56 at the
   90th percentile, so two lines at this width would cut 38 % of them), smaller price, marks and + button (40 px).
   Narrower phones (iPhone SE and mini, 360 px Androids) keep two; rails never change. The admin's default is
   body.su-cols3 (Superunico → Ajustes); a shopper's own choice from Filtros → "Vista" is a class on <html> and wins. */
@media (min-width: 390px) and (max-width: 820px) {
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .pc-top { --ex: 6px; --eb: 24px; --fy: 6px; --fs: 28px; --qx: 6px; --qh: 40px; --qw: min(112px, 100cqw - 12px); }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .eb { width: 24px; height: 24px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .eb svg { width: 14px; height: 14px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .qp svg { width: 16px; height: 16px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .pc-p { gap: 5px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .pc-p .m { font-size: 16px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .was { font-size: 11.5px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .off { font-size: 10px; padding: 2px 5px; }
  /* A label opened on the last card of a row grows leftwards, so it never pokes past the screen (the Android WebView would pan). */
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products > .pc:nth-child(3n) .eb-l { left: auto; right: -2px; }
  :is(html.su-cols2, html:not(.su-cols3) body:not(.su-cols3)) .grid.products > .pc:nth-child(2n) .eb-l { left: auto; right: -2px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .pc-t { font-size: 13px; line-height: 1.3; -webkit-line-clamp: 3; min-height: 3.9em; margin-top: 3px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .pc-s { font-size: 11px; gap: 6px; }
  :is(html.su-cols3, html:not(.su-cols2) body.su-cols3) .grid.products .bn { height: 20px; font-size: 10px; padding: 0 7px; right: 6px; top: 6px; max-width: calc(100% - 48px); }
}
@media (max-width: 389px) {
  .grid.products > .pc:nth-child(2n) .eb-l { left: auto; right: -2px; }
}

.fg-vista .chip svg { margin-right: 6px; vertical-align: -3px; }

/* Home rows: where each shows (Superunico → Inicio → Secciones, "Dónde"; the user, 2026-10-12). html.app comes
   from the head script, before paint, so a cached page is right in both places. */
html.app .only-web { display: none !important; }
html:not(.app) .only-app { display: none !important; }
/* WhatsApp and UNICOCASH side by side on computers when they are consecutive rows (front-page.php wraps them);
   a hidden one leaves the other the full width. Phones stack them as before. */
.promos2 { display: flex; gap: 16px; margin-top: 48px; }
.promos2 > .promo { flex: 1 1 0; min-width: 0; margin-top: 0; }
.promos2 > .promo h3 { max-width: 11em; }
/* UNICOCASH at half width: the text keeps the left 58 % and the tier icons shrink to the right, so they never meet. */
@media (min-width: 1400px) {
  .promos2 .p-uc h3, .promos2 .p-uc p { max-width: 58%; }
  .promos2 .p-uc .btns { flex-wrap: nowrap; }
  .promos2 .p-uc .uc-art { right: 2.5%; gap: 8px; bottom: 22px; }
  .promos2 .p-uc .uc-art img { width: calc(var(--s) * .64); height: calc(var(--s) * .64); }
  .promos2 .p-uc .uc-art b { font-size: 11.5px; padding: 3px 8px; }
  .promos2 .p-wa h3, .promos2 .p-wa p { max-width: 60%; }
}
/* ...and on laptops (the pair is 600–800 px each) the icons at half size, so the second button clears them. */
@media (min-width: 1400px) and (max-width: 1699px) {
  .promos2 .p-uc .uc-art img { width: calc(var(--s) * .5); height: calc(var(--s) * .5); }
  .promos2 .p-uc .uc-art { gap: 6px; right: 2%; }
  .promos2 .p-uc .uc-art b { font-size: 10.5px; padding: 2px 7px; }
}
@media (max-width: 1399px) { .promos2 { display: block; margin-top: 0; } .promos2 > .promo { margin-top: 48px; } } /* below 1400 px each would be under 660 px: UNICOCASH's buttons would meet its icons, so they stack */
@media (max-width: 820px) { .promos2 > .promo { margin-top: 38px; } }
/* "Tu súper, en el bolsillo" slimmer (the user, 2026-10-12). */
.p-app { min-height: 190px; padding: 26px 40px; }
.p-app h3 { font-size: clamp(24px, 2.2vw, 30px); margin-top: 8px; }
.p-app p { font-size: 15px; margin-top: 8px; }
.p-app .btns { margin-top: 14px; }
.p-app .phone { top: 18px; width: 170px; height: 320px; }
@media (max-width: 820px) {
  .promo.p-app { padding: 24px 22px 26px; }
  .p-app .phone { display: none; } /* no room for the mock-up beside two store buttons; text and buttons only */
}
/* Favoritos' heart a fifth bigger (the user, 2026-10-12). */
.bub.fv .bub-c svg { width: 30px; height: 30px; }
@media (max-width: 820px) { .bub.all.fv .bub-c svg { width: 26px; height: 26px; } .hbar .cx.fv .cxp svg { width: 22px; height: 22px; } }

/* Footer a third slimmer (the user, 2026-10-12): tighter paddings and link rows, the Pasillos list in two columns,
   a lower bottom bar; on phones no tagline or "Descarga la app" heading (the store buttons say it), 40 px link rows,
   smaller social buttons. */
.ft { margin-top: 48px; }
.ft-in { padding: 32px var(--pad) 18px; gap: 28px; grid-template-columns: 1.4fr 1fr 1.15fr 1fr; }
.ft-in img.lg { height: 32px; }
.ft-in p { margin-top: 8px; font-size: 14px; max-width: 26em; }
.ft h5 { margin: 2px 0 8px; font-size: 12px; }
.ft-me h5 { margin: 14px 0 0; }
.ft-in a, .ft-in .t { font-size: 14px; padding: 3px 0; }
.ft .btns { margin-top: 8px; }
@media (min-width: 821px) { .ft-dp { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 26px; align-content: start; } .ft-dp h5 { grid-column: 1 / -1; } .ft-dp a { white-space: nowrap; } }
.ft-in .soc { margin-top: 10px; }
.ft-in .soc a { width: 40px; height: 40px; }
.ft-b { padding: 12px var(--pad) 14px; font-size: 12.5px; }
@media (max-width: 820px) {
  .ft { margin-top: 40px; }
  .ft-in { padding: 22px var(--pad) 10px; gap: 14px 16px; }
  .ft-in p, .ft-me h5 { display: none; }
  .ft .btns { margin-top: 12px; }
  .ft-in a { min-height: 40px; font-size: 14px; }
  .ft-in .t { font-size: 14px; padding: 4px 0; }
  .ft h5 { margin: 0 0 4px; }
  .ft-in .soc { margin-top: 6px; }
  .ft-in .soc a { width: 40px; height: 40px; }
  .ft-b { padding: 10px var(--pad) calc(14px + env(safe-area-inset-bottom)); }
}
/* A closed day's notice may run long: the phone strip wraps to a second line instead of clipping. */
@media (max-width: 820px) { .strip.note { white-space: normal; } }

/* The phone hero a fifth shorter (the user, 2026-10-12): 176 → 146 px tiles with slightly tighter type; the
   cutouts, placed in percentages, follow. */
@media (max-width: 820px) {
  .pr { height: 146px; padding: 14px 18px 14px; }
  .pr h3 { font-size: 23px; margin-top: 2px; }
  .pr p { font-size: 12.5px; margin-top: 4px; }
  .pr .go { height: 28px; font-size: 12px; }
}
/* The looping hero: a 14 px gap equals the gutter, so the copy before the first tile ends exactly at the edge. */
@media (max-width: 820px) { .pr-track[data-loop] { gap: 14px; } }