/* NANspace base: design tokens, reset, layout and buttons. The Figtree face comes from theme.json (and is preloaded). */

/* Cross-page transitions; browsers without support navigate as usual. */
@view-transition { navigation: auto; }

/* Figtree replaced Urbanist on 2026-10-27 (owner: closer to Magalu's crisper type; Figtree is the same geometric style with a taller
   x-height, OFL, see assets/fonts/figtree-OFL.txt). "Figtree Fallback": what paints until Figtree arrives (owner report 2026-10-25,
   header FOUC). Local Arial, or a font with Arial's widths (Helvetica, Liberation Sans, Arimo), scaled to Figtree's width and given its
   vertical metrics, so the swap moves nothing. size-adjust = Figtree width / Arial width of the store's text at that weight, measured
   in Chromium (400: the header texts, the top bar terms first; 600: the category bar; 700: "Elegí tu departamento"; 800: "Todas las
   categorías"); the tool is /opt/odoo/codex/temps/2026-10-27-figtree/measure.cjs. Overrides = Figtree's typo metrics (ascender 950,
   descender 250, line gap 0 per 1000 units) divided by size-adjust. Arial has regular and bold only. */
@font-face { font-family: 'Figtree Fallback'; font-style: normal; font-weight: 100 549; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); size-adjust: 98.82%; ascent-override: 96.13%; descent-override: 25.30%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; font-style: normal; font-weight: 550 649; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"); size-adjust: 94.54%; ascent-override: 100.49%; descent-override: 26.44%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; font-style: normal; font-weight: 650 749; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"); size-adjust: 97.51%; ascent-override: 97.43%; descent-override: 25.64%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; font-style: normal; font-weight: 750 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"); size-adjust: 95.84%; ascent-override: 99.12%; descent-override: 26.09%; line-gap-override: 0%; }

:root {
  --red: #E23434;
  --red-text: #D62E2E;
  --red-hover: #B92323;
  --green: #00873E;
  --green-bg: #E6F4EC;
  --orange: #F8A814;
  --orange-bg: #FFF4DC;
  --navy: #232F3E;
  --navy-dark: #131A22;
  --teal: #50D3CD;
  --blue: #0067C5;
  --bg: #F2F3F5;
  --ph: #E5E8EC; /* photo placeholder while it loads: visible on white cards and on the page background (owner 2026-10-28) */
  --text: #1F2328;
  --gray: #5C6670;
  /* Card text after Magalu (owner 2026-10-27): grey titles and secondary text, a darker grey for scores. */
  --text-soft: #51585C;
  --text-2: #343B3F;
  --border: #E1E4E8;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --font: var(--wp--preset--font-family--figtree, 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  /* Delivery dates (owner 2026-10-27): a bolt for same day, a delivery moto (with its box) for a later day, a truck for UES. */
  --icon-moto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3' width='8' height='7' rx='1'/%3E%3Cpath d='M2 12.5h10.5c1.7 0 3 1.3 3 3V17H19M18.5 4.5h3L23 17'/%3E%3Ccircle cx='6.5' cy='17' r='2.75'/%3E%3Ccircle cx='23' cy='17' r='2.75'/%3E%3C/svg%3E");
  --icon-today: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  --icon-ues: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13v10H1zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='5.5' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E");
  /* Height of the sticky header until assets/js/ui/header.js measures it: the chips row and the sidebar stick under it. */
  --header-height: 209px;
}
@media (min-width: 900px) { :root { --header-height: 113px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.4; color: var(--text); background: var(--bg); }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
main { padding-bottom: 24px; min-height: 60vh; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Text fields light up instead (owner 2026-10-28: the thick line looked heavy on the searches and the coupon): a soft blue glow
   around the whole field. The transparent outline still shows in Windows high contrast. */
:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="image"], [type="file"]), textarea, select):focus-visible { outline: 2px solid transparent; outline-offset: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 103, 197, .16), 0 0 12px rgba(0, 103, 197, .22); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.only-desktop { display: none; }
@media (min-width: 600px) { .only-desktop { display: inline; } }

/* Layout: the store never grows past 1440 px. */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 12px; }
@media (min-width: 768px) { .container { padding: 0 20px; } }

/* Buttons are at least 44 px high. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 8px; border: 2px solid transparent; font-weight: 700; text-decoration: none; cursor: pointer; background: none; text-align: center; }
.btn--red { background: var(--red-text); color: #fff; }
.btn--red:hover { background: var(--red-hover); }
.btn--outline { border-color: var(--red-text); color: var(--red-text); background: #fff; }
.btn--white { background: #fff; color: var(--text); }
.btn--dark { background: var(--text); color: #fff; }
.btn--text { color: var(--gray); text-decoration: underline; font-weight: 600; }
.btn--large { width: 100%; min-height: 52px; font-size: 17px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Panels (white sections) */
.panel { width: calc(100% - 24px); max-width: 1400px; margin: 12px auto 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.panel__head h2 { font-size: 19px; margin: 0; }
.panel__head a { color: var(--red-text); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }

/* Rails: horizontal product carousels with arrows from 1024 px */
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 600px) { .rail { grid-auto-columns: 31%; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((100% - 50px) / 6); } }
/* Phones: every product loop (home rows, "También te puede gustar", "Inspirado en lo que viste") loses its white box, so the
   cards get its width (owner 2026-10-27, "dejemos solo las fichas"); titles keep the page gutter and rails run to the screen
   edges, starting at the gutter. On the product page the loop steps out of the page gutter. Other panels keep their box.
   Without boxes, 28px of space separates the sections (owner: "5 o 10 px más"; Baymard: sections read as groups by
   proximity, so the gap between them must be clearly larger than the gaps inside them). */
@media (max-width: 599px) {
  .product-row.panel, .inspired.panel { width: 100%; margin-top: 28px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .product-page > .product-row.panel, .product-page > .inspired.panel { width: calc(100% + 24px); margin-inline: -12px; }
  .product-row .panel__head, .inspired .panel__head { padding: 0 12px; }
  .product-row .rail, .inspired .rail { padding: 0 12px; scroll-padding-inline: 12px; }
  /* The viewed product spans the gutter like the suggestions; more specific than the base and container-query rules after it. */
  .inspired .inspired__seed { margin: 0 12px; padding: 0; background: none; }
  .inspired__suggestions h3 { padding: 0 12px; }
}
.rail__arrow { display: none; }
/* Desktop rail arrows (owner 2026-10-28, after Havan): frosted glass boxes (translucent white over a lightly blurred backdrop, so the card behind still shows through) with a blue arrow sitting on the rail edges, so the cards take the
   width the old 34px lanes held. They cover the edge cards, so carousel.js hides each one at its end of the rail. */
@media (min-width: 1024px) {
  .rail__arrow { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 48px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 8px; background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(3px) saturate(180%); backdrop-filter: blur(3px) saturate(180%); box-shadow: 0 4px 16px rgba(16, 24, 40, .22); color: var(--blue); line-height: 1; cursor: pointer; z-index: 2; }
  .rail__arrow:hover { background: rgba(255, 255, 255, .7); box-shadow: 0 4px 18px rgba(16, 24, 40, .28); }
  .rail__arrow--prev { left: -8px; }
  .rail__arrow--next { right: -8px; }
  .rail__arrow[hidden] { display: none; }
}

/* Stars */
.stars { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); }
.stars__score { color: var(--text-2); font-size: 14px; font-weight: 600; }
.stars__track { position: relative; display: inline-flex; color: #D0D4D9; }
.stars__fill { position: absolute; left: 0; top: 0; display: inline-flex; overflow: hidden; color: #F5B301; }
.stars__fill svg, .stars__track > svg { flex: none; }

/* Product card: the whole card is one link to the product page; no cart button. Owner 2026-10-27, closer to Magalu's cards (measured
   on its page): grey title, dark price in a lighter weight, more air, and one tag shape for every label (12px, 3px 7px, radius 4). */
.card { position: relative; background: #fff; border-radius: 8px; border: 1px solid #E6E8EA; display: flex; flex-direction: column; overflow: hidden; }
.card:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, .12); }
.card__link { display: flex; flex-direction: column; gap: 6px; padding: 12px; text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
@media (min-width: 1024px) { .card__link { padding: 14px; } }
.card__photo { position: relative; display: block; aspect-ratio: 1; margin-bottom: 4px; }
.card__photo img { width: 100%; height: 100%; object-fit: contain; }
/* Grey until the photo is in (owner 2026-10-28, "un placeholder gris"): cards.js marks the box (and a gallery photo) loaded. The
   category circles and the menu photos are opaque round photos: their own grey background is the placeholder. */
.js .card__photo:not(.is-loaded) { background: var(--ph); border-radius: 8px; }
.js .gallery img:not(.is-loaded) { background: var(--ph); }
/* A photo still waiting for boot.js has no src: Chrome would draw a broken image frame over the grey box. */
.card__photo img[data-src] { visibility: hidden; }
.card__ship-label { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 4px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.card__oca { position: absolute; left: 0; bottom: 0; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.1; padding: 4px 7px; border-radius: 4px; text-align: center; text-transform: uppercase; }
.card__oca strong { display: block; font-size: 15px; font-weight: 900; color: var(--teal); }
.card__few { position: absolute; right: 0; bottom: 0; background: var(--orange); color: var(--text); font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.card__sold-out { position: absolute; left: 0; bottom: 0; background: #5F6670; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
/* Ofertas cards (owner 2026-10-27: "el ícono del fueguito animado está ok"): an animated flame on the photo next to the deal band. */
.card__flame { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); display: grid; place-items: center; font-size: 17px; animation: flame 1.4s ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.15) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .card__flame { animation: none; } }
.card--sold-out .card__photo img { opacity: .55; }
/* Baymard: the title is the key attribute and must not be cut short; 3 to 4 lines on phones is the limit before it reads as a
   description. Four lines, whole words (break-word only splits a word longer than the line), at least three lines' height so the
   prices of a row line up. */
.card__name { font-size: 15px; line-height: 1.3; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; min-height: 3.9em; }
/* Baymard: every list item shows the same attributes; a product without reviews says so instead of leaving its row out. */
.card__no-reviews { font-size: 12px; color: var(--text-soft); }
.card__before { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 13px; margin-top: 2px; }
/* The discount as a green "25% OFF" tag (Magalu's style), next to the struck original price (Baymard: show the reference price). */
.pill-off { background: #E0FFEE; color: #1D6A3E; font-weight: 700; font-size: 12px; padding: 3px 7px; border-radius: 4px; }
/* The "Termina en" deal band (owner 2026-10-27, after Magalu): a clock, the label and the time left, left aligned, on the Ofertas
   cards only and on the product page. One mark per card (Baymard: few badges; the animated flame was removed). The label never
   breaks inside itself: on a narrow card the time moves to a second line instead. */
.hot-sale { display: flex; flex-wrap: wrap; white-space: nowrap; align-items: center; justify-content: flex-start; column-gap: 5px; margin: 0 0 4px; padding: 4px 6px; border-radius: 4px; background: #FDECEE; color: #B3261E; font-size: 13px; font-weight: 700; }
.hot-sale svg { flex: none; }
.hot-sale time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 5ch; }
/* On a card the band is a compact pill as wide as its text. */
.card__link > .card__hot { align-self: flex-start; padding: 3px 7px; font-size: 12px; }
.hot-sale--page { justify-content: flex-start; font-size: 15px; padding: 8px 12px; margin: 0 0 10px; }
.card__price { font-size: 13px; color: var(--text-soft); }
.card__price strong { font-size: 24px; font-weight: 700; color: #1E2428; letter-spacing: -.01em; }
/* Prices are dark; a deal price is red, as on the product page (owner 2026-10-27; Baymard: a distinct color for the sale price). */
.card--deal .card__price strong { color: var(--red-text); }
.card__price strong small { font-size: 14px; font-weight: 600; }
.card__from { font-size: 12px; }
.card__installments { font-size: 13.5px; color: var(--text-soft); line-height: 1.25; }
/* One delivery pill per card (owner 2026-10-27, "tantos badges sobrecargan", then "queda mejor como badge pill"): zv-envios-uy's
   date, a bolt and solid green while "Llega hoy en Mvdeo" holds (before the cutoff), light green after it ("Llega
   mañana en Mvdeo", "Se envía hoy" for the interior). Pickup and the shipping cost are on the product page; "Envío gratis"
   stays on the photo. Until it is written the slot keeps its line, so the card does not grow. Long texts wrap. */
.card__eta { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; min-height: 22px; margin-top: 2px; padding: 3px 7px; border-radius: 4px; background: var(--green-bg); color: #1D6A3E; font-size: 12px; font-weight: 700; line-height: 1.3; }
.card__eta[hidden] { display: inline-flex; visibility: hidden; }
.card__eta[data-today="1"] { background: var(--green); color: #fff; }
.card__eta::before, .eta::before { content: ''; flex: none; width: 20px; height: 15px; background: currentColor; -webkit-mask: var(--icon-moto) center / contain no-repeat; mask: var(--icon-moto) center / contain no-repeat; }
.card__eta[data-kind="interior"]::before, .eta[data-kind="interior"]::before { -webkit-mask-image: var(--icon-ues); mask-image: var(--icon-ues); }
/* Same day ("Llega hoy", "Se envía hoy"): a bolt (owner 2026-10-27); another day keeps the moto or the truck. */
.card__eta[data-today="1"]::before, .eta[data-today]::before { -webkit-mask-image: var(--icon-today); mask-image: var(--icon-today); }

/* Template parts are transparent wrappers, so the sticky header sticks to the page and not to its own part. */
.wp-block-template-part { display: contents; }

/* Top bar */
.top-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; min-height: 36px; padding: 4px 12px; background: var(--orange); color: var(--text); font-size: 13px; text-align: center; }
.top-bar__coupon { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; }
.top-bar__clock { font-variant-numeric: tabular-nums; font-weight: 800; }
/* Figtree has no tabular figures, so the clock gets the width of its widest value: "0d 00:00:00" is 75px in Figtree (68px in the
   fallback), "00d 00:00:00" 83px (75px). Ticking and the font swap never resize the centered bar, and on a 390px phone the terms and a
   one-digit-day clock still share a line as before. data-long (ten days or more) is set by the server and by assets/js/ui/header.js. */
.top-bar__clock time { display: inline-block; min-width: 76px; text-align: left; }
.top-bar__clock time[data-long] { min-width: 84px; }
.top-bar__shipping { display: inline-flex; align-items: center; gap: 6px; }
.top-bar__track, .top-bar__group { display: contents; }
/* Phones (owner 2026-10-27): one line; when it does not fit, a lower-third ticker faded at both ends (assets/js/ui/header.js adds
   .is-ticker and a hidden copy of the group, so the loop is seamless). It stops while touched or hovered (WCAG 2.2.2) and, like
   the category circles, only slows down with reduced motion. */
@media (max-width: 899px) {
  .top-bar { position: relative; display: block; overflow: hidden; min-height: 32px; padding: 0; }
  .top-bar__track { display: flex; width: max-content; margin: 0 auto; }
  .top-bar__group { display: flex; flex: none; align-items: center; gap: 10px; padding: 7px 12px; white-space: nowrap; }
  .top-bar__coupon { flex-wrap: nowrap; }
  .top-bar.is-ticker .top-bar__track { margin: 0; animation: top-bar-ticker 22s linear infinite; }
  .top-bar.is-ticker .top-bar__group { padding-right: 56px; }
  .top-bar.is-ticker:hover .top-bar__track, .top-bar.is-ticker:active .top-bar__track { animation-play-state: paused; }
  .top-bar.is-ticker::before, .top-bar.is-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 28px; pointer-events: none; }
  .top-bar.is-ticker::before { left: 0; background: linear-gradient(to right, var(--orange), transparent); }
  .top-bar.is-ticker::after { right: 0; background: linear-gradient(to left, var(--orange), transparent); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .top-bar.is-ticker .top-bar__track { animation-duration: 44s; } }
@keyframes top-bar-ticker { to { transform: translateX(-50%); } }
/* Figtree is wider than Urbanist: on a 390px phone the terms and the clock shared their line only from 12.5px (owner 2026-10-27). */
@media (max-width: 420px) { .top-bar { font-size: 12.5px; column-gap: 8px; } .top-bar__coupon { column-gap: 8px; } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; }
.site-header__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "logo . destination user cart" "search search search search search"; align-items: center; gap: 8px 4px; padding-top: 8px; padding-bottom: 8px; }
/* Phones: two 44px touch rows; the destination is an icon beside the account and the cart (see Destination chip). */
@media (max-width: 899px) { .site-header__row { grid-template-rows: 44px 44px; } }
/* Phones (owner 2026-10-28): scrolling down rolls the header up until only the search is left, scrolling up unrolls it
   (assets/js/ui/header.js toggles .site-header--rolled and measures --roll, the logo row, and --keep, down to the search's
   bottom). The header keeps its place in the page, so nothing below moves: it slides up by --roll and clips the categories bar. */
@media (max-width: 899px) {
  .site-header { clip-path: inset(0 0 0 0); transition: transform .25s ease, clip-path .25s ease; }
  .site-header--rolled { transform: translateY(calc(-1 * var(--roll, 52px))); clip-path: inset(0 0 calc(100% - var(--keep, 112px)) 0); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header__logo { grid-area: logo; }
.site-header__logo img { height: 26px; width: auto; }
.site-header__cart { grid-area: cart; position: relative; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; }
.site-header__badge { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: var(--text); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.site-search { grid-area: search; position: relative; display: flex; border-radius: 8px; transition: box-shadow .15s; }
/* The header search lights up as one piece, field and button, in the button's orange (owner 2026-10-28). */
.site-search input[type="search"]:focus-visible { box-shadow: none; }
.site-search:focus-within { box-shadow: 0 0 0 2px rgba(248, 168, 20, .75), 0 0 18px 3px rgba(248, 168, 20, .45); }
.site-search input[type="search"] { flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 8px 0 0 8px; padding: 0 14px; background: #fff; color: var(--text); font-size: 16px; }
.site-search button { width: 52px; border: 0; border-radius: 0 8px 8px 0; background: var(--orange); color: var(--text); cursor: pointer; display: grid; place-items: center; }
@media (min-width: 900px) {
  .site-header__row { grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "logo destination search user cart"; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
  .site-header__logo img { height: 32px; }
  .site-search { max-width: 720px; }
}

/* User options (owner 2026-10-25): a link to My account right before the cart, with the cart's white line icon and 44px target.
   Phones and narrow desktops show the icon only; the label stays for screen readers (it names the link), clipped, never display:none.
   From 1200px the two-line label sits in a fixed 72px box ("Mi cuenta" is 64px in Figtree 14px bold, 68px in the fallback), so the
   customer's name never moves the search box or the cart, and the search box keeps its 720px at 1440px. Both label lines and both
   link lists are printed; data-user-menu-state picks the ones shown. On phones the header row's 4px column gap keeps the user and
   cart icons together. */
.user-menu { grid-area: user; position: relative; }
.user-menu__button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; color: #fff; text-decoration: none; }
.user-menu__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.user-menu__text small, .user-menu__text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__text small { font-size: 11px; color: #C7D0D9; }
.user-menu__text strong { font-size: 14px; }
.user-menu[data-user-menu-state="customer"] .user-menu__visitor { display: none; }
.user-menu:not([data-user-menu-state="customer"]) .user-menu__customer { display: none; }
.user-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 46; width: min(260px, calc(100vw - 24px)); padding: 8px; background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.user-menu__list { list-style: none; margin: 0; padding: 0; }
.user-menu__link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--text); font-size: 15px; text-decoration: none; }
.user-menu__link:hover { background: #EEF2F6; }
.user-menu__link--main { color: var(--navy); font-weight: 700; }
.user-menu__link--quiet { color: var(--gray); font-size: 13px; }
@media (min-width: 1200px) {
  .user-menu__button { justify-content: flex-start; }
  .user-menu__text { position: static; display: flex; flex-direction: column; width: 72px; height: auto; overflow: visible; clip-path: none; line-height: 1.15; text-align: left; }
}

/* Category bar */
.site-nav { background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .08); }
.site-nav__row { display: flex; align-items: center; gap: 8px; }
.site-nav__all { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 0; border: 0; background: none; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.site-nav__all[aria-expanded="true"] { color: var(--orange); }
.site-nav__list { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.site-nav__list::-webkit-scrollbar { display: none; }
/* Desktop: one row of items (14px x 1.4 + 2 x 10px = 39.6px); the items that do not fit wrap to a second row that the height clips,
   like the mockup's ajustarBarra() but without a script, so nothing moves after load. */
@media (min-width: 900px) { .site-nav__list { overflow: hidden; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; height: 39.6px; } }
.site-nav__item { color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px; }
.site-nav__item[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--orange); }
.site-nav__item--hot { color: var(--orange); }

/* Destination chip */
.destination { grid-area: destination; position: relative; }
.destination__chip { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.destination__chip span { display: flex; flex-direction: column; line-height: 1.15; }
.destination__chip small { font-size: 11px; color: #C7D0D9; }
.destination__chip strong { font-size: 14px; }
/* Phones (owner 2026-10-26, Baymard: keep the sticky header compact, icons need a name): a 44px pin icon like the account and cart
   icons, opening the list as a dropdown right under the icon row. "Ship to <department>" stays its accessible name (clipped, never
   display:none), and the assumed department is spelled out where the cost is shown: on the cards and, with a Change link, in the
   product page delivery block. */
@media (max-width: 899px) {
  .site-header__logo img { width: clamp(112px, 35vw, 172px); height: auto; } /* a little bigger (owner 2026-10-27, again 2026-10-28) */
  .destination__chip { width: 44px; height: 44px; justify-content: center; padding: 0; }
  /* The pin's ink (22.4px) is as tall as the account icon's but sits 0.85px higher in its box (its outline centres at y 11.75 of
     the 24 grid, the account's at 12.5, in a 26px box against 28px), so it moves down by that much to share their centre line. */
  .destination__chip > svg:first-child { width: 26px; height: 26px; transform: translateY(.85px); }
  .destination__chip > svg:last-child { display: none; }
  .destination__chip span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .destination__chip[aria-expanded="true"] { color: var(--orange); }
  /* With a department chosen the pin carries its name (owner 2026-10-27); "Enviar a" stays for screen readers. A long name is
     cut, never pushing the account and cart icons. */
  .destination__chip[data-chosen] { width: auto; max-width: 136px; gap: 4px; padding: 0 4px; }
  .destination__chip[data-chosen] span { position: static; width: auto; height: auto; margin: 0; min-width: 0; clip-path: none; }
  .destination__chip[data-chosen] small { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .destination__chip[data-chosen] strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.destination__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 46; width: min(340px, calc(100vw - 24px)); max-height: var(--destination-height, 50dvh); overflow-y: auto; overscroll-behavior: contain; padding: 14px; background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
/* Phones: the list drops right under the icon row (the top is measured by assets/js/ui/destination.js), full width. */
@media (max-width: 899px) { .destination__panel { position: fixed; left: 12px; right: 12px; top: var(--destination-top, var(--header-height)); width: auto; } }
.destination__help { margin: 0 0 10px; font-size: 13px; color: var(--gray); }
.destination__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.destination__list button { min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; text-align: left; font-size: 14px; cursor: pointer; }
.destination__list button:hover { border-color: var(--navy); }
.destination__list button[aria-pressed="true"] { border-color: var(--navy); background: #EEF2F6; font-weight: 700; }

/* Checkout header (site/partials/header-checkout.html): the logo on the left, "Secure checkout" on the right, sticky like the store
   header. It is 42px high on phones and 56px from 900px (padding plus the logo); that is the --header-height the order summary of the
   checkout sticks under, since the header module that measures the store header is not loaded there. */
.checkout-header { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; }
.checkout-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.checkout-header__logo img { height: 26px; width: auto; }
.checkout-header__secure { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
:root:has(.checkout-header) { --header-height: 42px; }
@media (min-width: 900px) {
  .checkout-header__row { gap: 24px; padding-top: 12px; padding-bottom: 12px; }
  .checkout-header__logo img { height: 32px; }
  :root:has(.checkout-header) { --header-height: 56px; }
}

/* Category menu: desktop dropdown under the header, side panel on phones */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 50; }
.scrim.scrim--menu { z-index: 40; }
.mega-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; }
.mega-menu__box { display: grid; grid-template-columns: 280px 1fr; max-height: min(70vh, 640px); background: #fff; color: var(--text); border-radius: 0 0 12px 12px; box-shadow: 0 16px 30px rgba(0, 0, 0, .2); padding: 0; overflow: hidden; }
.mega-menu__head { display: none; }
.mega-menu__roots { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; border-right: 1px solid var(--border); }
.mega-menu__roots a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 16px; text-decoration: none; font-size: 14px; }
.mega-menu__roots a svg { color: #9AA4AE; flex: none; }
.mega-menu__roots a:hover, .mega-menu__roots a.is-active { background: #F2F5F8; color: var(--blue); font-weight: 700; }
.mega-menu__detail { padding: 18px 24px; overflow-y: auto; }
/* The box clips at its max height, so each column scrolls on its own: without this the roots list grew past the box and the
   last categories were cut off with no way to reach them. */
@media (min-width: 900px) {
  .mega-menu__roots, .mega-menu__detail { max-height: min(70vh, 640px); }
  /* The panel's wrapper spans the full width; only the white box takes clicks, so a click beside it reaches the scrim
     and closes the menu (owner 2026-10-25: it no longer closed when clicking outside). */
  .mega-menu { pointer-events: none; }
  .mega-menu__box { pointer-events: auto; }
}
.mega-menu__roots .mega-menu__all { font-weight: 700; border-bottom: 1px solid var(--border); }
.mega-menu__back { display: none; }
.mega-menu__title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-size: 20px; font-weight: 800; text-decoration: none; }
.mega-menu__title small { font-size: 13px; font-weight: 700; color: var(--blue); }
.mega-menu__circles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 14px; }
.mega-menu__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; }
.mega-menu__photo { position: relative; width: 88px; height: 88px; border-radius: 50%; background: var(--ph); }
.mega-menu__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mega-menu__photo em { position: absolute; top: -2px; right: -6px; padding: 2px 6px; border-radius: 999px; background: #C2410C; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; }
.mega-menu__name { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mega-menu__item:hover .mega-menu__name { color: var(--blue); }
.mega-menu__item:hover .mega-menu__photo { box-shadow: 0 0 0 3px #DCE8F5; }
.mega-menu a:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .mega-menu { position: fixed; inset: 0 auto 0 0; top: 0; width: min(360px, 88%); z-index: 61; }
  .mega-menu__box { display: flex; flex-direction: column; height: 100%; max-height: none; border-radius: 0; padding: 0; }
  .mega-menu__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; background: var(--navy); color: #fff; }
  .mega-menu__close { width: 44px; height: 44px; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
  .mega-menu__roots { flex: 1; border: 0; }
  .mega-menu__roots a { min-height: 48px; border-bottom: 1px solid var(--border); }
  .mega-menu__detail { display: none; flex: 1; padding: 0 16px 16px; }
  .mega-menu.has-detail .mega-menu__roots { display: none; }
  .mega-menu.has-detail .mega-menu__detail { display: block; }
  .mega-menu__back { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--border); background: none; font-weight: 700; color: var(--blue); cursor: pointer; padding: 0; margin-bottom: 12px; }
  .mega-menu__circles { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .mega-menu__photo { width: 74px; height: 74px; }
  .scrim.scrim--menu { z-index: 60; }
}

/* Footer */
.footer { background: var(--navy-dark); color: #B8C1CA; margin-top: 40px; font-size: 14px; }
.footer a { color: #D7DCE1; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer p { margin: 0; }
.footer__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 32px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer__head img { width: 160px; height: auto; }
.footer__grid { display: grid; padding-top: 8px; padding-bottom: 8px; }
.footer__group { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer__group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.footer__group summary::-webkit-details-marker { display: none; }
.footer__group summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #8F9BA8; border-bottom: 2px solid #8F9BA8; transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
.footer__group[open] summary::after { transform: rotate(-135deg); }
.footer__group h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.footer__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; line-height: 1.35; }
.footer__list--cats { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.footer__list--info strong { color: #fff; font-weight: 700; }
.footer__all { grid-column: 1 / -1; font-weight: 700; }
.footer__all a { color: var(--teal); }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1.4fr 1.2fr; gap: 40px; padding-top: 28px; padding-bottom: 20px; }
  .footer__group { border-bottom: 0; }
  .footer__group summary { pointer-events: none; min-height: 0; margin-bottom: 16px; }
  .footer__group summary::after { content: none; }
}
.footer__payments { padding: 20px 0 22px; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer .footer__payments-title { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 18px; padding-bottom: 96px; font-size: 12px; color: #8F9BA8; }
@media (min-width: 900px) { .footer__legal { padding-bottom: 24px; } }

/* Payment logos in a continuous strip */
.payments { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.payments__track { display: flex; width: max-content; animation: payments 60s linear infinite; }
.payments:hover .payments__track { animation-play-state: paused; }
.payments__group, .payments__copy { display: flex; align-items: center; gap: 16px; }
.payments__group { padding-right: 16px; }
.payments img { flex: none; width: 96px; height: 43px; border-radius: 6px; object-fit: cover; display: block; }
@keyframes payments { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .payments { -webkit-mask-image: none; mask-image: none; }
  .payments__track { animation: none; width: auto; }
  .payments__group { flex-wrap: wrap; justify-content: center; padding: 0 12px; }
  .payments__group[aria-hidden], .payments__copy { display: none; }
}

/* Floating WhatsApp button */
.whatsapp-float { position: fixed; right: 14px; bottom: 14px; z-index: 25; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }

/* Home page: hero, benefits, category circles */
/* Hero. Efecto de Magalu: en el inicio el color de la cabecera baja detrás del banner y se funde con el fondo. */
body.home main { display: flow-root; background: linear-gradient(180deg, var(--navy) 0, var(--navy) 40px, var(--bg) 270px) no-repeat; }
@media (min-width: 900px) { body.home main { background-image: linear-gradient(180deg, var(--navy) 0, var(--navy) 60px, var(--bg) 360px); } }
.hero { width: calc(100% - 24px); max-width: 1400px; margin: 12px auto 0; }
.hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius); scrollbar-width: none; }
.hero__track::-webkit-scrollbar { display: none; }
.banner { flex: 0 0 100%; scroll-snap-align: start; min-height: 230px; padding: 22px 20px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.banner p { margin: 0; }
.banner__pre { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 13px; }
.banner__title { font-size: clamp(30px, 8vw, 56px); font-weight: 900; margin: 0; letter-spacing: -.01em; }
.banner__code strong { background: #FFE14D; color: #8A0F0F; padding: 2px 10px; border-radius: 6px; font-size: 1.2em; letter-spacing: .04em; }
.banner__clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; }
.banner__fine { font-size: 13px; opacity: .95; }
.banner .btn { margin-top: 8px; }
.banner--coupon { background: linear-gradient(120deg, var(--red) 0%, #A91B1B 100%); }
.banner--boom { background: #FFD23F; color: var(--text); }
.banner--pickup { background: linear-gradient(120deg, var(--navy) 0%, #2D4A5E 100%); }
.banner--pickup .banner__title { color: var(--teal); }
.hero__dots { display: flex; justify-content: center; padding-top: 0; }
/* 24px touch targets around the 8px dots (WCAG 2.5.8; PageSpeed flagged the bare dots, owner 2026-10-28). */
.hero__dots button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #C5CAD0; }
.hero__dots button[aria-current="true"] { min-width: 30px; }
.hero__dots button[aria-current="true"]::before { width: 22px; background: var(--red-text); }
@media (min-width: 900px) { .banner { min-height: 300px; padding: 40px 56px; } }

/* Beneficios y categorías */
.benefits { width: calc(100% - 24px); max-width: 1400px; margin: 12px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.benefit { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.benefit svg { flex: none; color: var(--green); }
.benefit strong { display: block; font-size: 14px; }
@media (min-width: 900px) { .benefits { grid-template-columns: repeat(4, 1fr); } }
/* Phones and tablets: one line of categories swiped sideways; both desktop rows flow into it (owner 2026-10-27, "debe ser una
   sola línea", after a two-row try the same day). */
.circles__rows { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.circles__rows::-webkit-scrollbar { display: none; }
.circle { flex: 0 0 80px; text-align: center; text-decoration: none; font-size: 12px; font-weight: 600; }
.circle img, .circle__initial { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 6px; background: var(--ph); }
.circle__initial { display: grid; place-items: center; font-size: 26px; font-weight: 800; color: var(--gray); }
.circles__row, .circles__lane, .circles__group { display: contents; }
.circles__group--copy, .circles__pause { display: none; }
.circles { background: transparent; box-shadow: none; }
@media (min-width: 1024px) {
  .circles { width: 100%; max-width: none; border-radius: 0; padding: 48px 0 24px; position: relative; }
  .circles__pause { display: block; position: absolute; right: 24px; top: 6px; min-height: 36px; background: none; border: 0; color: var(--gray); text-decoration: underline; cursor: pointer; font-size: 12px; }
  .circles .circles__rows { display: grid; gap: 24px; overflow: hidden; }
  .circles__row { display: block; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
  .circles__lane { display: flex; width: max-content; animation: circles-slide 65s linear infinite; }
  .circles__row:nth-child(2) .circles__lane { animation-direction: reverse; }
  .circles__group { display: flex; flex: none; width: max-content; align-items: start; justify-content: space-around; gap: 32px; min-width: 100vw; padding: 0 32px 0 0; }
  .circles .circle { flex: 0 0 156px; width: 156px; font-size: 14px; line-height: 1.3; padding: 4px 0; }
  .circles .circle img, .circles .circle__initial { width: 124px; height: 124px; margin-bottom: 10px; }
  .circles__row:hover .circles__lane, .circles__row:focus-within .circles__lane, .circles--paused .circles__lane { animation-play-state: paused; }
  @keyframes circles-slide { to { transform: translateX(-50%); } }
}
/* Owner 2026-10-27: every PC shows the same two sliding rows, also the ones that ask for less motion (Windows with "Efectos de
   animación" off, Remote Desktop sessions: many visitors, who saw a static grid instead). There the rows slide slower, and the
   "Pausar" button stops them for anyone (WCAG 2.2.2). */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .circles__lane { animation-duration: 110s; }
}

.banner--shipping { background: linear-gradient(120deg, var(--green) 0%, #005F2B 100%); }
.banner--boom .btn--dark { background: var(--text); color: #fff; }
.banner .btn--white { color: var(--text); }

/* Trust strip */
.trust { width: calc(100% - 24px); max-width: 1400px; margin: 12px auto 0; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.trust__item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--gray); }
.trust__item svg { flex: none; color: var(--green); }
.trust__item strong { display: block; font-size: 14px; color: var(--text); }
@media (min-width: 900px) { .trust__list { grid-template-columns: repeat(4, 1fr); } }

/* Product listing (site/categoria.html): a full-width subheader band (breadcrumbs, title with the count and the sort, chips), then
   the body: the filters sidebar and the grid from 1024 px; on phones the filters are the "Filter and sort" sheet. */
.listing-layout { width: calc(100% - 24px); max-width: 1400px; margin: 12px auto 0; }
.listing { min-width: 0; }
.breadcrumbs { font-size: 13px; color: var(--gray); margin: 4px 0 6px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: '/'; margin: 0 6px; color: #9AA4AE; }
.breadcrumbs a { color: var(--gray); }
.listing__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.listing__head h1 { font-size: 22px; margin: 0; }
/* The count sits on the title's line (owner 2026-10-26: the stacked head wasted space). */
.listing__head > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.listing__count { color: var(--gray); font-size: 14px; }
.listing__sort { display: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 10px; position: sticky; top: var(--header-height); z-index: 5; background: var(--bg); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip small { color: var(--gray); font-weight: 600; }
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.is-active small { color: #CBD2D9; }
.chip.is-disabled { opacity: .45; cursor: default; }
.chip--filter { background: var(--text); color: #fff; border-color: var(--text); }
.chip[hidden] { display: none; }
.filters-form { display: block; }
.filters { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; background: #fff; z-index: 60; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; transform: translateY(100%); visibility: hidden; transition: transform .25s; }
.filters.is-open { transform: none; visibility: visible; }
/* Keep category links and GET controls reachable when scripts are unavailable. */
html:not(.js) .filters { position: static; max-height: none; transform: none; visibility: visible; }
html:not(.js) .filters__head { display: none; }
.filters__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); }
.filters__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--text); }
.filters__body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 8px 16px; }
.filters__foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
/* Sections: a fieldset (or the tree's nav) per mockup .filtro; the floated legend keeps the section padding above it like an h3. */
.filter { border: 0; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.filter legend { float: left; width: 100%; }
.filter legend + * { clear: both; }
.filter legend, .filter__title { font-size: 14px; font-weight: 800; line-height: 1.15; padding: 0; margin: 0 0 4px; }
.filter-form { margin: 0; }
/* Options: native inputs drawn like the mockup's .opcion-f::before boxes (still real checkboxes and radios, so no script is needed). */
.option { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; cursor: pointer; }
/* content-box like the mockup's pseudo-element (the global border-box rule never reaches ::before): an 18px box inside a 2px border. */
.option input { appearance: none; -webkit-appearance: none; box-sizing: content-box; flex: none; width: 18px; height: 18px; margin: 0; border: 2px solid #9AA4AE; border-radius: 5px; background: #fff; cursor: inherit; }
.option input:checked { border-color: var(--navy); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.option--radio input { border-radius: 50%; }
.option--radio input:checked { background: radial-gradient(circle, var(--navy) 40%, #fff 46%); }
.option span { flex: 1; }
.option small { color: var(--gray); font-size: 12px; }
.option:has(input:disabled) { opacity: .45; cursor: default; }
/* Compact cards and native checkbox pills. */
.filters__card { background: #fff; border-radius: var(--radius); padding: 4px 12px; }
.filters__card-head { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.filters__card-title { font-size: 16px; font-weight: 800; margin: 0; }
.filters__card-head .btn { padding: 4px 0; min-height: 36px; font-size: 12px; }
.filter:last-child { border-bottom: 0; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.filter-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.filter-pill small { color: var(--gray); font-size: 12px; font-weight: 600; }
.filter-pill:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-pill:has(input:checked) small { color: #CBD2D9; }
.filter-pill:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.filter-pill:has(input:disabled) { opacity: .45; cursor: default; }
.subs__more > summary, .subs__roots > summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; font-weight: 700; color: var(--red-text); list-style: none; }
.subs__more > summary::-webkit-details-marker, .subs__roots > summary::-webkit-details-marker { display: none; }
.subs__close, .subs__more[open] .subs__open { display: none; }
.subs__more[open] .subs__close { display: inline; }
.filter--subs .tree__item a { min-height: 36px; }
@media (pointer: coarse) { .filter-pill, .filter--subs .tree__item a, .subs__more > summary, .subs__roots > summary { min-height: 44px; } }
/* Category tree with its search box (shown by assets/js/ui/filters.js). */
.tree__search { margin: 2px 0 6px; }
.tree__search-field { display: block; }
.tree__search input { width: 100%; height: 44px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: #fff; font-size: 16px; }
.tree__empty { margin: 4px 0; color: var(--gray); font-size: 13.5px; }
.tree__list { list-style: none; margin: 0; padding: 0; }
.tree__list .tree__list { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--border); }
.tree__item a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-size: 13.5px; text-decoration: none; }
.tree__item a:hover { text-decoration: underline; }
.tree__item small { color: var(--gray); font-size: 12px; }
.tree__branch > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; cursor: pointer; }
.tree__branch > summary::-webkit-details-marker { display: none; }
.tree__branch > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: 0 8px; border: solid var(--gray); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.tree__branch[open] > summary::after { transform: rotate(-135deg); }
.tree__item.is-current > a, .tree__item.is-current > details > summary a { font-weight: 800; color: var(--red-text); }
.tree__item.is-current-branch > details > summary a { font-weight: 700; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.load-more { display: flex; justify-content: center; margin: 16px 0; }
.load-more [aria-busy="true"] { opacity: .6; pointer-events: none; }
.listing__empty { text-align: center; padding: 40px 12px; background: #fff; border-radius: var(--radius); }
.listing__empty .btn { margin-top: 8px; }
@media (min-width: 700px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .listing-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  /* Owner 2026-10-26: breadcrumbs, title and count sit above the sidebar and the quick chips take the space beside them above the
     grid, instead of three stacked full-width rows. */
  .listing-layout > .breadcrumbs { grid-column: 1; grid-row: 1; min-width: 0; }
  .listing-layout > .listing__head { grid-column: 1; grid-row: 2; align-self: end; min-width: 0; }
  .listing-body { display: contents; }
  .listing-layout > .chips { grid-column: 2; grid-row: 1 / 3; align-self: end; flex-wrap: wrap; overflow: visible; }
  .listing-body > .filters-form { grid-column: 1; grid-row: 3; align-self: stretch; }
  .listing-body > .listing { grid-column: 2; grid-row: 3; min-width: 0; }
  /* Never taller than the viewport: a sticky sidebar taller than the screen hides its end until the grid ends (owner 2026-10-26,
     "ya no es posible hacer scroll"). It scrolls on its own; the side padding keeps the cards' shadow inside the scroll box. */
  .filters { position: sticky; top: calc(var(--header-height) + 12px); left: auto; right: auto; bottom: auto; max-height: calc(100vh - var(--header-height) - 24px); overflow-y: auto; scrollbar-width: thin; padding: 0 4px 4px; margin: 0 -4px; background: none; transform: none; visibility: visible; border-radius: 0; box-shadow: none; z-index: 1; transition: none; }
  /* "Show all" opens the rest of the list in a short box of its own instead of stretching the card. */
  .subs__more > .tree__list, .subs__roots > .tree__list { max-height: 252px; overflow-y: auto; scrollbar-width: thin; }
  .filters__body { overflow: visible; padding: 0; }
  .filters__card { box-shadow: var(--shadow); padding: 8px 16px 6px; }
  .filters__head, .chip--filter, .filter--sort { display: none; }
  .js .filters__foot { display: none; }
  .filters-form .scrim { display: none; }
  .listing__sort { display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .listing__sort select { height: 40px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: #fff; }
  .chips { position: static; justify-content: flex-end; } /* owner 2026-10-25: quick filters aligned to the right */
}
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 1360px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }

/* Product page. The root is .product-page, never .product: WordPress prints "product" on <body> of product pages. */
.product-page { width: calc(100% - 24px); max-width: 1400px; margin: 12px auto 0; }
.product-page .panel { width: 100%; }
.product__grid { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: grid; gap: 16px; margin-top: 6px; }
.product__details, .product__buy { min-width: 0; }
/* Layout after Mercado Libre and Magalu (owner 2026-10-27, docs/research/2026-10-27-product-page-baymard.md). Below 1200px the main
   card wrapper is transparent; on phones the details and buy columns are too, so their blocks form one column in this order (price
   before variations, as before). */
@media (max-width: 1199px) { .product__main { display: contents; } }
@media (max-width: 899px) {
  .product__grid { gap: 0; }
  .product__details, .product__buy { display: contents; }
  .product__main > .gallery { order: 1; margin-bottom: 16px; }
  .product__notice { order: 2; }
  .product__title { order: 3; }
  .product__meta { order: 4; }
  .product__details > .hot-sale { order: 5; }
  .price-block { order: 6; }
  .stock { order: 7; }
  .variants { order: 8; }
  .buy { order: 9; }
  .product__buy > .free-meter { order: 10; }
  .delivery { order: 11; }
  .pay-note { order: 12; }
  .highlights { order: 13; }
  .product__description { order: 14; }
}
/* 900 to 1199px: the photos beside the details with the buy column under them. */
@media (min-width: 900px) and (max-width: 1199px) {
  .product__grid { grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 0; padding: 24px; }
  .product__main > .gallery { grid-row: 1 / 3; }
  .product__buy { align-self: start; }
  .product__description { grid-column: 1 / -1; }
}
/* From 1200px the product sheet has two columns: the card with photos and details, then "También te puede gustar", the description,
   the technical sheet, the reviews and "Inspirado en lo que viste" on the left; the buy card on the right, a plain card that neither
   sticks nor scrolls (owner: "colocaste scroll en la tercera columna"). */
@media (min-width: 1200px) {
  .product-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 16px; align-items: start; }
  .product-page > * { grid-column: 1; min-width: 0; }
  .product-page > .breadcrumbs { grid-column: 1 / -1; }
  .product__grid { display: contents; }
  .product__main { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; margin-top: 6px; padding: 24px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
  /* The buy card itself sticks under the header while the sheet scrolls (owner 2026-10-27: "solo hacer la columna de añadir al
     carrito sticky"). It spans every row of the sheet so it can travel, and never scrolls inside. */
  .product__buy { grid-column: 2; grid-row: 2 / span 6; align-self: start; position: sticky; top: calc(var(--header-height) + 12px); margin-top: 6px; padding: 20px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
  .product__buy > .free-meter { margin-top: 0; }
  .product__main > .product__description { grid-column: 1 / -1; }
  /* In the 380px buy card a delivery line's link goes under its text instead of squeezing it. */
  .product__buy .delivery li { flex-wrap: wrap; row-gap: 0; }
  .product__buy .delivery li > div { flex: 1 1 calc(100% - 34px); min-width: 0; }
  .product__buy .delivery__change { margin-left: 34px; min-height: 32px; }
}
/* The recommendations inside the product sheet show 4 cards at a time, never the 6 narrow ones of the home rails (owner 2026-10-27:
   "algunas recomendaciones pueden ir dentro de la ficha pero no con tantas columnas"). */
@media (min-width: 900px) { .product-page > .product-row .rail { grid-auto-columns: calc((100% - 30px) / 4); } }
.product__title { font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
/* Desktop: a lighter, smaller title than before, closer to Mercado Libre's and Magalu's (owner 2026-10-27). */
@media (min-width: 900px) { .product__title { font-size: 24px; font-weight: 600; color: #1E2428; } }
.product__meta { display: flex; gap: 10px; align-items: center; color: var(--gray); font-size: 13px; margin-bottom: 10px; flex-wrap: wrap; }
.product__rating { display: inline-flex; align-items: center; min-height: 44px; color: var(--gray); text-decoration: none; }
.product__rating:hover { text-decoration: underline; }
.product-page .hot-sale--page { margin-bottom: 10px; }
.product-page .panel h2 { font-size: 19px; }

.gallery { position: relative; min-width: 0; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track img { flex: 0 0 100%; width: 100%; aspect-ratio: 1; object-fit: contain; scroll-snap-align: start; background: #fff; }
.gallery__count { position: absolute; top: 10px; right: 10px; background: rgba(31, 35, 40, .75); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 999px; }
/* Thumbnails on every width (owner 2026-10-26; Baymard: thumbnails, not dots, on phones too, and signpost the hidden ones). Phones:
   one row of 56px thumbnails that scrolls sideways; the partly visible last one shows there are more, so there is no button.
   From 900px: a wrapping row clipped to one line (64px) with "Ver más fotos"; the module opens it, a noscript rule never clips. */
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--navy); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.gallery__more { display: none; }
@media (min-width: 900px) {
  .gallery__count { display: none; }
  .gallery__thumbs { flex-wrap: wrap; max-height: 64px; overflow: hidden; }
  .gallery__thumbs.is-open { max-height: none; }
  .gallery__thumbs button { width: 64px; height: 64px; }
  .gallery__more { display: block; margin: 8px 0 0; padding: 0; min-height: 44px; background: none; border: 0; color: var(--red-text); font: inherit; font-weight: 700; cursor: pointer; visibility: hidden; }
  .gallery__more.is-ready { visibility: visible; }
  .gallery__more[hidden] { display: none; }
}

.price-block__before { display: flex; align-items: center; gap: 8px; color: var(--gray); font-size: 15px; }
.price-block__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-block__price { font-size: 34px; font-weight: 800; }
.price-block__price small { font-size: 18px; font-weight: 700; }
.price-block__price .price-block__from { font-size: 16px; font-weight: 600; color: var(--gray); }
.price-block--deal .price-block__price { color: var(--red-text); }
.price-block__installments { margin: 2px 0 0; color: var(--gray); }
.price-block__saving { margin: 2px 0 0; color: var(--green); font-weight: 700; }

.stock { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: 700; color: var(--green); }
.stock__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.stock__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: stock-pulse 1.8s ease-out infinite; }
.stock[data-kind="few"] { display: inline-flex; color: var(--text); background: var(--orange-bg); border: 1px solid var(--orange); padding: 4px 10px; border-radius: 8px; }
.stock[data-kind="few"] .stock__dot { background: var(--orange); }
.stock[data-kind="out"] { color: var(--red-text); }
.stock[data-kind="out"] .stock__dot { background: var(--red-text); }
.stock[data-kind="out"] .stock__dot::after { animation: none; }
.product__buy > .stock { padding-inline: 16px; }
@keyframes stock-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stock__dot::after { animation: none; } }

.var { border: 0; padding: 0; margin: 12px 0; min-width: 0; }
.var legend { font-size: 14px; margin-bottom: 6px; padding: 0; }
.var__options { display: flex; flex-wrap: wrap; gap: 8px; }
.var__option { min-height: 44px; min-width: 44px; padding: 0 14px; border: 2px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 600; }
.var__option[aria-pressed="true"] { border-color: var(--navy); background: #EEF2F6; }
.var__option:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.var__option--sold-out { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.1; text-decoration: none !important; }
.var__option--sold-out small { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--red-text); }
html:not(.js) .variants { display: none; }
.buy__select { width: 100%; min-height: 44px; margin: 12px 0 0; padding: 0 10px; border: 2px solid var(--border); border-radius: 8px; background: #fff; }
.js .buy__select { display: none; }

.buy__row { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 14px 0; }
.buy__row .btn { min-height: 48px; }
.buy__now { grid-column: 1 / -1; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.qty button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.qty button:disabled { opacity: .35; cursor: default; }
.qty__input { width: 52px; height: 44px; border: 0; text-align: center; font-weight: 700; background: none; -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html:not(.js) .qty button { display: none; }

/* Free shipping meter, shared by the cart drawer (full width under the title) and the product page (top of the delivery block):
   the message above a slim green bar. The slot is empty and hidden until the browser has something to say. */
.free-meter { padding: 10px 16px; background: var(--green-bg); font-size: 14px; }
.free-meter__text { margin: 0 0 6px; }
.free-meter__text--free strong { color: #005F2B; } /* darker than --green, which is under 4.5:1 on the green tint */
.free-meter__bar { height: 6px; border-radius: 999px; background: #CDE7D8; overflow: hidden; }
.free-meter__bar span { display: block; height: 100%; background-color: var(--green); border-radius: inherit; transition: width .3s;
  /* Owner 2026-10-25: the bar looks like it is loading: it grows in from the left and moving stripes run along it. */
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
  background-size: 14px 14px; transform-origin: left center; animation: meter-stripes 1s linear infinite, meter-grow .8s ease-out; }
@keyframes meter-stripes { to { background-position: 14px 0; } }
@keyframes meter-grow { from { transform: scaleX(0); } }
.product-page .free-meter { margin: 14px 0 0; border-radius: var(--radius); }
.free-meter + .delivery { margin-top: 8px; }

.delivery { list-style: none; margin: 14px 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.delivery li { display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); }
.delivery li:last-child { border-bottom: 0; }
.delivery svg { flex: none; color: var(--green); }
.delivery strong { display: block; }
.delivery small { color: var(--gray); }
.delivery__free, [data-del-montevideo][data-free="1"] { color: var(--green); }
.delivery__yours { background: #F2F7FD; }
/* Delivery dates in the rows (owner 2026-10-27): the rule in words from zv-envios-uy, then its module's date ("Llega hoy",
   "Llega entre el miércoles 28 y el viernes 30") with what is left to order today. */
.eta-list { display: block; margin-top: 6px; }
.eta-list[hidden] { display: none; }
.eta { display: grid; grid-template-columns: 21px minmax(0, 1fr); column-gap: 6px; align-items: start; font-size: 13px; line-height: 1.35; color: var(--gray); }
.eta + .eta { margin-top: 6px; }
.eta::before { grid-row: span 2; margin-top: 1px; background: var(--green); }
.eta strong { color: var(--green); font-size: 14px; }
.eta small { grid-column: 2; font-size: 13px; }
.delivery__yours svg { color: var(--blue) !important; }
/* Baymard: the assumed destination of a shipping estimate is a link that changes it (opens the header's department list). */
.delivery__change { flex: none; align-self: center; margin-left: auto; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--blue); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.delivery a.delivery__change { display: inline-flex; align-items: center; }
.pay-note { display: grid; gap: 8px; font-size: 14px; color: var(--gray); }
/* As many 64px-or-wider columns as fit, stretched to the full width (owner 2026-10-26: on phones they sat left with a gap); auto-fit
   drops empty columns, so eight seals on a wide column share the row instead of leaving a ninth, empty one. */
.seals { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.seals img { width: 100%; height: auto; aspect-ratio: 64 / 29; object-fit: contain; border-radius: 4px; background: #fff; }

.product__description { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); min-width: 0; }
.product__description h2 { font-size: 19px; margin: 0 0 10px; }
.product__description-content { line-height: 1.6; color: #3A424A; }
/* Baymard: a very long description is cut with a visible signpost (assets/js/ui/product-page.js marks it). */
.product__description.is-long .product__description-content { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.product__more { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 0; min-height: 44px; border: 0; background: none; color: var(--blue); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.product__more:hover { text-decoration: underline; }
/* "Lo que tenés que saber de este producto" under the variations (as Mercado Libre). */
.highlights { margin: 16px 0 0; }
.highlights__title { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.highlights__list { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 14px; line-height: 1.4; }
.highlights__list span { color: var(--text-2); font-weight: 600; }
.highlights__more { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-size: 14px; font-weight: 600; text-decoration: none; }
.highlights__more:hover { text-decoration: underline; }
.product__more[hidden] { display: none; }
.ficha-tecnica { padding: 0; }
.ficha-tecnica summary { display: flex; justify-content: space-between; cursor: pointer; padding: 16px; font-size: 18px; font-weight: 700; list-style: none; }
.ficha-tecnica summary::-webkit-details-marker { display: none; }
.ficha-tecnica[open] summary > span { transform: rotate(45deg); }
.product__specs table { width: 100%; border-collapse: collapse; }
.product__specs th, .product__specs td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.product__specs th { width: 40%; }
.product__specs tr:nth-child(odd) { background: var(--bg); }

/* Anchored sections land under the sticky header, not behind it (owner 2026-10-27: "Ver la ficha técnica completa" left the sheet
   stuck to the header). */
#reviews, #ficha-tecnica, #description, #related { scroll-margin-top: calc(var(--header-height) + 16px); }
.reviews__score { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; }
.reviews__score > strong { font-size: 32px; }
.reviews__score .stars__score { display: none; }
/* Baymard's ratings distribution: a bar per star, each a filter (one at a time). */
.ratings { display: grid; gap: 2px; max-width: 420px; margin: 0 0 16px; }
.ratings__row { display: grid; grid-template-columns: 40px 1fr 44px; align-items: center; gap: 10px; min-height: 32px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ratings__row:hover:not(:disabled), .ratings__row[aria-pressed="true"] { background: #EEF2F6; }
.ratings__row[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--navy); }
.ratings__row:disabled { cursor: default; opacity: .5; }
html:not(.js) .ratings__row { cursor: default; }
.ratings__star { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.ratings__star svg { width: 14px; height: 14px; color: #F5B301; }
.ratings__bar { height: 8px; border-radius: 999px; background: #E6E8EA; overflow: hidden; }
.ratings__bar span { display: block; height: 100%; border-radius: inherit; background: #F5B301; }
.ratings__count { color: var(--text-soft); font-size: 13px; text-align: right; }
.ratings__empty { margin: 4px 6px; color: var(--text-soft); font-size: 13px; }
.reviews.is-filtered .reviews__all > summary, .reviews.is-filtered .reviews__more { display: none; }
@media (pointer: coarse) { .ratings__row { min-height: 44px; } }
.review { padding: 18px 0; border-top: 1px solid var(--border); }
.review header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.review time { color: var(--gray); font-size: 12px; }
.review .stars { margin-left: auto; }
.review p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; margin: 8px 0 0; }
.reviews__all summary { cursor: pointer; color: var(--red-text); padding: 18px 0; min-height: 44px; font-weight: 700; }
.reviews__more { color: var(--gray); font-size: 14px; }
/* AI review summary (owner 2026-10-25): the mockup's review summary box (site .opiniones__resumen) with aspect chips. */
.reviews__summary { padding: 16px; background: #F2F7FD; border-radius: 10px; margin-bottom: 24px; }
.reviews__summary h3 { margin-top: 0; }
.reviews__summary p { line-height: 1.6; margin: 8px 0 0; }
.reviews__aspects { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.reviews__aspect { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 700; }
.reviews__aspect--positive { border-color: transparent; background: var(--green-bg); color: #00733A; }
.reviews__aspect--negative { border-color: transparent; background: #FDECEC; color: var(--red-hover); }
.reviews__summary .reviews__ai-note { color: var(--gray); font-size: 12px; }

.buybar { display: none; }
.js .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; transform: translateY(110%); visibility: hidden; transition: transform .2s, visibility .2s; }
.js .buybar.is-visible { transform: none; visibility: visible; }
.buybar__price { font-size: 20px; font-weight: 800; white-space: nowrap; }
.buybar__price--deal { color: var(--red-text); }
.buybar .btn { flex: 1; }
@media (min-width: 900px) { .js .buybar { display: none; } }

@media (max-width: 899px) { body:has(.buybar) .whatsapp-float { bottom: 84px; } }
.product__notice { margin: 6px 0; padding: 12px 14px; border-radius: 8px; background: #FDE3E7; color: #8A1C1C; font-weight: 700; }

/* Cart drawer */
.scrim.scrim--cart { z-index: 69; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; z-index: 70; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease, visibility .25s; visibility: hidden; }
.cart-drawer.is-open { transform: none; visibility: visible; }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
.cart-drawer__head h2 { margin: 0; font-size: 18px; }
.cart-drawer__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.cart-drawer__message { margin: 0; padding: 10px 16px; background: #FDE3E7; color: #8A1C1C; font-weight: 700; font-size: 14px; }
.cart-drawer__lines { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px; overscroll-behavior: contain; }
.cart-drawer__empty { text-align: center; padding: 40px 0; }
.cart-line { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-line img, .cart-line__photo { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.cart-line__info { min-width: 0; }
.cart-line__name { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cart-line__info small { display: block; color: var(--gray); }
.cart-line__row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.cart-line__remove { border: 0; background: none; color: var(--gray); text-decoration: underline; font-size: 13px; padding: 0; min-height: 44px; cursor: pointer; }
.cart-line .qty output { min-width: 28px; text-align: center; font-weight: 700; }
.cart-drawer__footer { flex-shrink: 0; max-height: 60dvh; overflow-y: auto; border-top: 1px solid var(--border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.cart-drawer__footer:empty { display: none; }
.coupon { display: flex; gap: 8px; }
.coupon input { flex: 1; min-width: 0; height: 44px; border: 1px solid #B9C0C7; border-radius: 8px; padding: 0 12px; text-transform: uppercase; font-size: 16px; }
.coupon__error { margin: 0; color: var(--red-text); font-size: 13px; font-weight: 600; }
.coupon__ok { margin: 0; color: var(--green); font-weight: 700; font-size: 13px; }
.btn--link { border: 0; background: none; padding: 0; min-height: 44px; color: var(--gray); text-decoration: underline; font-weight: 600; cursor: pointer; }
.totals { margin: 0; display: grid; gap: 4px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals dt { color: var(--gray); }
.totals dd { margin: 0; font-weight: 700; text-align: right; }
.totals__discount dd { color: var(--green); }
.totals__total { font-size: 19px; border-top: 1px solid var(--border); padding-top: 6px; }
.totals__total dt { color: var(--text); font-weight: 800; }
.cart-drawer__hint { margin: 0; font-size: 13px; color: var(--gray); }
@media (prefers-reduced-motion: reduce) { .cart-drawer, .free-meter__bar span { transition: none; } .free-meter__bar span { animation: none; } }

.selected-categories { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.selected-categories .chip { min-height: 30px; padding: 0 10px; font-size: 13px; }

/* Recent browsing is local; the seed and public suggestions arrive as a single matching response. */
/* The section lays itself out by its own width, not the screen's (owner 2026-10-27: on the product page it sits inside the product
   sheet, about 1000px wide). Wide (1176px and more, the home from a 1200px screen): the seed card beside five suggestions, six
   columns in total like every other rail (owner 2026-10-25). Narrower: the compact layout below, the suggestions four at a time
   from 700px ("no con tantas columnas"). */
.inspired { container: inspired / inline-size; }
@container inspired (min-width: 1176px) { .inspired__suggestions .rail { grid-auto-columns: calc((100% - 40px) / 5); } }
@container inspired (min-width: 700px) and (max-width: 1175px) { .inspired__suggestions .rail { grid-auto-columns: calc((100% - 30px) / 4); } }
/* Wide: the viewed card is as wide as a suggestion, 16px from the suggestions rail (owner 2026-10-27, "ganemos un poco de espacio";
   the rail arrows sit on the rail since 2026-10-28). */
.inspired__body { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 16px; }
.inspired__seed { padding: 10px; border-radius: var(--radius); background: #f0f3fa; min-width: 0; }
.inspired__caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.inspired__caption button { border: 0; background: transparent; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px; }
.inspired__suggestions { min-width: 0; }
.inspired__suggestions h3 { font-size: 17px; margin: 6px 0 14px; }
@media (min-width: 1024px) { .inspired__suggestions h3 { padding-inline: 34px; } }
/* Narrower than 1176px (owner 2026-10-26: "totalmente roto" on phones; at 600-1199px the 230px seed column left the suggestions 90
   to 140px wide): the viewed product is one compact row (photo, name, price) under its caption and the suggestions rail follows at
   full width. Baymard's essentials for a list item (thumbnail, title, price) stay; the rest of that card is the product the visitor
   already saw. */
@container inspired (max-width: 1175px) {
  .inspired__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .inspired__seed { padding: 2px 12px 12px; }
  .inspired__caption { margin-bottom: 2px; }
  .inspired__seed .card { width: 100%; }
  .inspired__seed .card__link { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 8px; }
  .inspired__seed .card__photo { grid-row: 1 / span 2; width: 72px; margin: 0; }
  .inspired__seed .card__name { -webkit-line-clamp: 2; min-height: 0; font-size: 14px; align-self: end; }
  .inspired__seed .card__price { align-self: start; }
  .inspired__seed .card__price strong { font-size: 18px; }
  .inspired__seed :is(.card__hot, .stars, .card__no-reviews, .card__before, .card__installments, .card__eta, .card__few, .card__oca, .card__ship-label, .card__sold-out) { display: none; }
  .inspired__suggestions h3 { margin: 4px 0 10px; }
}

/* Fade into the transparent category section without overlays intercepting taps or swipe. */
@media (max-width: 899px) {
  .circles__rows {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
}