/* Mundo Ofertas · extensions on top of the kit (assets/brand/components.css).
 * Rule: tokens only. No hex, no off-scale font sizes (12/13/14/16/17/18/20/24/32/36/48/72), no soft shadows. */

.mo-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mo-price ins { text-decoration: none; }
.mo-link { background: none; border: 0; padding: var(--space-3); min-height: 44px; font: 700 14px/1.5 var(--font-sans); text-decoration: underline; cursor: pointer; color: var(--text); }
.mo-link:focus-visible { outline: 3px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.mo-btn[disabled] { box-shadow: none; }
.mo-btn-block { width: 100%; }
a.mo-btn { text-decoration: none; }  /* the kit built buttons as <button>; ours are often links */

/* ---------------------------------------------------------------- progress (shipping goal) */
.mo-progress { background: var(--bg); color: var(--text); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--border-soft); }
.mo-progress__msg { margin: 0 0 var(--space-2); font: 700 14px/1.4 var(--font-sans); text-align: center; text-wrap: balance; }
.mo-progress .mo-stock-track { height: 16px; padding: 2px; max-width: 720px; margin-inline: auto; }
.mo-progress__scale { position: relative; max-width: 720px; margin: var(--space-1) auto 0; height: 16px; color: var(--text-muted); }
.mo-progress__scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mo-progress__scale .is-end { right: 0; left: auto; transform: none; }
.mo-progress.is-done .mo-stock-fill { background-color: var(--success-text); background-image: none; animation: none; }

/* ---------------------------------------------------------------- category strip */
.mo-cat-strip { display: flex; gap: var(--space-4); margin: 0; padding: var(--space-2) var(--space-1) var(--space-4); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.mo-cat-strip li { flex: none; scroll-snap-align: start; }
.mo-cat-strip .mo-cat-item { text-decoration: none; color: var(--text); min-height: 44px; border-radius: var(--radius-sticker); }
.mo-cat-strip .mo-cat-item img { transition: transform .12s ease; }
.mo-cat-strip .mo-cat-item:hover img { transform: translate(-1px, -1px) rotate(-4deg); }
.mo-cat-strip a:focus-visible, .mo-card-title a:focus-visible, .mo-cat-item:focus-visible { outline: 3px solid transparent; outline-offset: 3px; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------- product cards in a grid */
.mo-products { display: grid; gap: var(--space-6); padding: 0; margin: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); }
.mo-products::before, .mo-products::after { display: none; }  /* WooCommerce's clearfix pseudo-elements would become empty grid cells */
.mo-products > li { display: flex; }
.mo-products .mo-card { width: 100%; align-content: start; transition: transform .12s ease, box-shadow .12s ease; }
.mo-products .mo-card:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-sticker-lg); }
.mo-card-media { overflow: hidden; }
.mo-card-media > a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }  /* flex, not grid: a % height inside an auto grid row is circular */  /* the image fits the 160px kit frame instead of stretching it */
.mo-card-img { width: auto; height: auto; max-width: min(100%, var(--nw, 100%)); max-height: min(100%, var(--nh, 100%)); object-fit: contain; padding: var(--space-2); filter: drop-shadow(2px 3px 0 var(--primary-300)); }
.mo-card-img--photo { mix-blend-mode: multiply; filter: none; border-radius: var(--radius-md); }
.mo-card-badges { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: calc(100% - var(--space-4)); z-index: 1; }
.mo-card-media .mo-card-badges .mo-badge { position: static; }
/* the kit sizes `.mo-card-media svg` (64px) for its placeholder icon; badges inside the media must stay 14px */
.mo-card-media .mo-badge svg, .mo-gallery__main .mo-badge svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.mo-card-media .mo-badge-luca svg, .mo-gallery__main .mo-badge-luca svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; }
.mo-card-title a { color: inherit; text-decoration: none; }
.mo-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mo-card .mo-price, .mo-card .mo-stock { align-self: end; }
.mo-card form, .mo-card .mo-card-cta { display: grid; }
.mo-card .mo-btn { width: 100%; }
.mo-card--luca .mo-card-media { background: var(--ink-900); color: var(--ink-50); }
.mo-card--luca .mo-card-img { filter: drop-shadow(2px 3px 0 var(--primary-500)); }
.mo-card--luca .mo-card-img--photo { mix-blend-mode: normal; background: var(--ink-50); }
.mo-card--luca .mo-card-badges { left: var(--space-2); }

/* ---- professional rhythm: every card has the same anatomy, the buy block sits on the bottom edge ---- */
.mo-products { gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.mo-products .mo-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
.mo-card-media { height: auto; aspect-ratio: 4 / 3; }
.mo-card-img { padding: var(--space-3); }
.mo-card-title { margin: 0; font: 700 16px/1.35 var(--font-display); letter-spacing: -.005em; }
.mo-card-buy { display: grid; gap: var(--space-3); margin-top: auto; }
.mo-card .mo-price { gap: var(--space-1); }
.mo-card .mo-price-now.is-lg { font-size: 24px; }
.mo-card .mo-price-old { font-size: 14px; }
.mo-card-badges .mo-badge { padding: 5px 10px; }

/* A Luca ticket (kit Badge, "is-unlocked" toggles it); the kit preview used inline sizes, here they are classes */
.mo-badge-luca .mo-luca-label { font: 800 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); }
.mo-badge-luca.is-unlocked .mo-luca-label { color: var(--ink-50); }
.mo-badge-luca > span { display: grid; gap: var(--space-1); }

/* ---- minimal: surfaces rest flat; the kit's hard shadow appears on interaction (buttons and badges keep it always) ---- */
.mo-card { border-color: var(--border-soft); box-shadow: none; }
.mo-products .mo-card:hover, .mo-products .mo-card:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-sticker); transform: none; }
.mo-card-media, .mo-card--luca .mo-card-media { background: var(--bg-sunken); color: var(--text-muted); }
.mo-card-img, .mo-card--luca .mo-card-img { filter: none; }
.mo-card--luca .mo-card-img--photo { mix-blend-mode: multiply; background: none; }
.mo-products { gap: var(--space-8) var(--space-6); }

/* ---------------------------------------------------------------- sections used by the home */
.mo-countdown-end { margin: var(--space-2) 0 0; color: var(--text-muted); }
.mo-flash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.mo-luca-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.mo-luca-ticket .mo-badge-luca { font-size: 12px; }
.mo-luca-state { margin: 0; font: 500 14px/1.5 var(--font-sans); color: var(--text-muted); }
.mo-luca-card-note { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }

/* compact countdown for the top strip (same markup + JS ticker as the kit Countdown) */
.mo-countdown--inline { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle; }
.mo-countdown--inline .mo-countdown-cell { min-width: 28px; height: 24px; padding: 0 var(--space-1); font-size: 14px; border: 0; border-radius: var(--radius-xs); background: var(--ink-700); box-shadow: none; }
.mo-countdown--inline .mo-countdown-sep { font-size: 14px; color: var(--ink-300); animation: none; }

/* ---------------------------------------------------------------- dialogs (A Luca modal, Gira y Gana) */
.mo-dialog { box-sizing: border-box; width: min(96vw, 720px); max-height: 92vh; padding: 0; overflow: auto; border: 2px solid var(--border-strong); border-radius: var(--radius-card); background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-sticker-lg); }
.mo-dialog::backdrop { background: var(--ink-950); opacity: .72; }
.mo-dialog[open] { animation: mo-pop .35s cubic-bezier(.2, .8, .3, 1.2) both; }
.mo-dialog__body { padding: var(--space-8) var(--space-6) var(--space-6); }
.mo-dialog__close { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-raised); color: var(--text); cursor: pointer; }
.mo-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mo-dialog__close:focus-visible { outline: 3px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.mo-dialog .h6 { margin: 0 0 var(--space-2); color: var(--brand); }
.mo-dialog h2 { margin: 0 0 var(--space-3); }
.mo-dialog p { margin: 0 0 var(--space-4); }

.mo-luca-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin: var(--space-4) 0; }
.mo-luca-grid .mo-card { width: 100%; padding: var(--space-3); gap: var(--space-3); }
.mo-luca-grid .mo-card-media { height: 128px; }
.mo-luca-grid .mo-card-title { font-size: 17px; }

/* ---------------------------------------------------------------- wheel */
.mo-wheel { text-align: center; }
.mo-wheel__stage { position: relative; width: min(78vw, 320px); margin: var(--space-6) auto var(--space-4); }
.mo-wheel__svg { display: block; width: 100%; height: auto; }
.mo-wheel__slice { stroke: var(--border-strong); stroke-width: 2; }
.mo-wheel__label { font: 800 8px var(--font-display); text-transform: uppercase; }
.mo-wheel__hub { fill: var(--bg-raised); stroke: var(--border-strong); stroke-width: 3; }
.mo-wheel__pointer { position: absolute; top: -14px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border: 14px solid transparent; border-top: 28px solid var(--border-strong); }
.mo-wheel__form { display: grid; gap: var(--space-3); text-align: left; }
.mo-wheel__form .mo-field { max-width: none; }
.mo-check { display: flex; gap: var(--space-2); align-items: flex-start; font: 400 14px/1.5 var(--font-sans); }
.mo-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--brand-fill); }
.mo-wheel__msg { min-height: 24px; margin: 0; font: 700 14px/1.5 var(--font-sans); color: var(--urgent-text); }
.mo-wheel__win { text-align: center; }
.mo-wheel__win .price-lg { margin: var(--space-2) 0 var(--space-3); color: var(--brand); }

/* ---------------------------------------------------------------- floating action, toasts */
.mo-fab { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 50; background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-sticker-sm); }
.mo-fab:hover:not(:disabled) { background: var(--bg-sunken); }
.mo-toasts { position: fixed; z-index: 60; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-3); width: min(calc(100vw - 2 * var(--space-4)), 384px); pointer-events: none; }
.mo-toasts .mo-toast { pointer-events: auto; max-width: none; }
.mo-toast img { flex: none; border-radius: var(--radius-sm); border: 2px solid var(--border-strong); object-fit: cover; background: var(--ink-50); }
.mo-toast a { color: inherit; font-weight: 700; }
body.has-fab .mo-toasts { bottom: calc(var(--space-4) + 64px); }
@media (min-width: 640px) { body.has-fab .mo-toasts { bottom: var(--space-4); } }

/* Notice icons are CSS masks, not inline <svg>: WooCommerce runs checkout messages through wp_kses,
 * which strips <circle> and lower-cases viewBox. A mask survives any filter. */
.mo-toast-ico { flex: none; width: 20px; height: 20px; margin-top: 2px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mo-toast-ico--check { --ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E"); }
.mo-toast-ico--info { --ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8v.2'/%3E%3C/svg%3E"); }
.mo-toast-ico--alert { --ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.2'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- checkout */
.mo-bump { margin: var(--space-4) 0; padding: var(--space-4); background: var(--bg-raised); color: var(--text); border: 2px solid var(--border-soft); border-radius: var(--radius-card); }
.mo-bump__title { margin: 0 0 var(--space-3); }
.woocommerce-checkout #payment .mo-bump label.mo-bump__opt { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; padding: var(--space-2) 0; font: 400 16px/1.5 var(--font-sans); cursor: pointer; }
.mo-bump__opt input[type="checkbox"] { flex: none; display: inline-block; width: 24px; height: 24px; min-width: 24px; margin: 2px 0 0; accent-color: var(--brand-fill); }
.mo-bump__opt > span { display: block; }
.mo-bump__opt strong { font-weight: 700; }
.mo-bump__opt small { display: block; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.mo-receipt { display: grid; gap: var(--space-3); margin: var(--space-6) 0; padding: var(--space-6); background: var(--bg-sunken); color: var(--text); border: 2px solid var(--border-soft); border-radius: var(--radius-card); }
.mo-receipt.is-done { background: var(--success-soft); color: var(--on-success-soft); border-color: var(--success-text); }
.mo-receipt h3 { margin: 0; }
.mo-receipt p { margin: 0; }
.mo-receipt input[type="file"] { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-3); border: 2px solid var(--border-strong); border-radius: var(--radius-sticker); background: var(--bg-raised); color: var(--text); font: 500 16px/1.5 var(--font-sans); }
.mo-ship-note td { font-weight: 700; }

/* ---------------------------------------------------------------- combos */
.mo-combos { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 256px), 1fr)); }
.mo-combo { position: relative; display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-4) var(--space-4); border: 2px solid var(--border-soft); border-radius: var(--radius-card); background: var(--bg-raised); text-align: center; }
.mo-combo .mo-badge { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-4); }
.mo-combo__imgs { display: flex; justify-content: center; align-items: center; height: 128px; padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-sunken); }
.mo-combo__imgs img { width: 34%; height: 100%; margin: 0 -2%; object-fit: contain; }
.mo-combo__imgs img.mo-card-img--photo { filter: none; mix-blend-mode: multiply; }
.mo-combo h3 { margin: 0; }
.mo-combo .mo-price { align-items: center; }
.mo-combo form { display: grid; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {
  .mo-progress { padding: var(--space-2) var(--space-3) var(--space-2); }
  .mo-progress__msg { font-size: 13px; margin-bottom: var(--space-1); }
  .mo-progress__scale { display: none; }
  .mo-dialog__body { padding: var(--space-6) var(--space-4) var(--space-4); }
  .mo-luca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mo-dialog[open] { animation: none; }
  .mo-products .mo-card, .mo-cat-strip .mo-cat-item img { transition: none; }
}
@media (forced-colors: active) {
  .mo-card, .mo-dialog, .mo-bump, .mo-receipt, .mo-combo { border: 2px solid CanvasText; }
}

/* Minimal meters: thin flat track, solid fill, no stripes, no heavy outline, no animation. */
.mo-stock-track { height: 6px; padding: 0; border: 0; border-radius: var(--radius-sticker); background: var(--border-soft); box-shadow: none; overflow: hidden; }
.mo-stock-fill { height: 100%; border-radius: inherit; background-image: none; background-color: var(--urgent-text); animation: none; }
.mo-stock-head { margin-bottom: var(--space-2); }
.mo-stock-label { font: 600 14px/1.4 var(--font-sans); color: var(--urgent-text); }
.mo-stock-label svg { width: 16px; height: 16px; }
.mo-stock-count { font: 600 14px/1 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mo-stock-count small { font: inherit; }
.mo-progress { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); background: var(--bg-raised); }
.mo-progress__msg { font: 600 14px/1.4 var(--font-sans); }
.mo-progress .mo-stock-track { height: 6px; padding: 0; max-width: 560px; }
.mo-progress .mo-stock-fill { background-color: var(--brand); }
.mo-progress__scale { max-width: 560px; margin-top: var(--space-2); font: 500 12px/1.2 var(--font-sans); }
.mo-progress.is-done .mo-stock-fill { background-color: var(--success-text); }

/* Cards never change shape on add: WooCommerce's "Ver carrito" link is hidden (the toast and the header cart carry that) */
.mo-card a.added_to_cart { display: none !important; }
.mo-card .mo-btn.is-added { background: var(--success-700); color: var(--on-brand-fill); }
.mo-products .mo-card:hover, .mo-products .mo-card:focus-within { box-shadow: none; border-color: var(--border-strong); }

/* Buttons: tone shift on hover, icon nudge, small press */
.mo-btn { transition: background-color .15s ease, color .15s ease, transform .1s ease; }
.mo-btn svg { transition: transform .18s ease; }
.mo-btn:hover:not(:disabled) svg { transform: translateX(2px) scale(1.08); }
.mo-btn-cart:hover:not(:disabled) { background: var(--success-600); }
.mo-btn-primary:hover:not(:disabled) { background: var(--primary-600); }
.mo-btn:active:not(:disabled) { transform: scale(.98) !important; }
@media (prefers-reduced-motion: reduce) { .mo-btn, .mo-btn svg { transition: none; } .mo-btn:hover svg { transform: none; } }
.mo-dialog { border: 1px solid var(--border-soft); box-shadow: none; }

/* WooCommerce clearfix pseudo-elements (`.woocommerce ul.products::before`) would become empty grid cells */
.woocommerce ul.products.mo-products::before, .woocommerce ul.products.mo-products::after, .woocommerce .mo-products::before, .woocommerce .mo-products::after, .mo-products::before, .mo-products::after { content: none !important; display: none !important; }

/* ---- One text line for every product tile: left-aligned, title → price, calm weights ---- */
.mo-card, .mo-card-title, .mo-card-buy { text-align: left; }
.mo-card-title { font: 600 15px/1.4 var(--font-sans); min-height: calc(2 * 1.4em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mo-card .mo-price { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; align-self: start; gap: var(--space-2); min-height: 28px; }
.mo-card .mo-price-now.is-lg { font: 700 20px/1 var(--font-display); letter-spacing: -.01em; }
.mo-card .mo-price-now .mo-cur { font-size: 1em; vertical-align: baseline; margin-right: 1px; }
.mo-card .mo-price-old { font: 500 13px/1 var(--font-sans); color: var(--text-muted); text-decoration-thickness: 1px; text-decoration-color: currentColor; }
.mo-card .mo-stock, .mo-card .mo-instock { align-self: start; }

/* Add-to-cart: quiet outline, fills ink on hover (the one filled button per view stays the primary action) */
.mo-card .mo-btn:not(:disabled) { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ink-900) !important; min-height: 44px; font: 600 14px/1 var(--font-sans); }
.mo-card .mo-btn:hover:not(:disabled) { background: var(--ink-900); color: var(--ink-50); }
.mo-card .mo-btn.is-added { background: var(--success-700); color: var(--on-brand-fill); box-shadow: none !important; }
.mo-card .mo-btn:disabled { font: 600 13px/1.2 var(--font-sans); }

/* Combos share the tile line and weights */
.mo-combos .mo-combo { text-align: left; border-width: 1px; }
.mo-combos .mo-combo h3 { font: 600 16px/1.4 var(--font-sans); }
.mo-combos .mo-combo .mo-price { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: var(--space-2); }
.mo-combos .mo-combo .mo-price-now { font: 700 20px/1 var(--font-display); letter-spacing: -.01em; }
.mo-combos .mo-combo .mo-price-now .mo-cur { font-size: 1em; vertical-align: baseline; }
.mo-combos .mo-combo .mo-price-old { font: 500 13px/1 var(--font-sans); color: var(--text-muted); text-decoration-thickness: 1px; text-decoration-color: currentColor; }
.mo-combos .mo-combo .mo-btn:not(:disabled) { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ink-900) !important; min-height: 44px; font: 600 14px/1 var(--font-sans); }
.mo-combos .mo-combo .mo-btn:hover:not(:disabled) { background: var(--ink-900); color: var(--ink-50); }
.mo-card--luca.is-locked .mo-card-media img { opacity: .85; }
.mo-stock.is-plain .mo-stock-head { margin-bottom: 0; }
.mo-stock-count { font: 500 13px/1 var(--font-sans); }