/* ==========================================================================
   Molde · Atoms
   1:1 with the Figma page "⚛️ Atoms". Only System / Scale / Breakpoint tokens.
   Forced states for docs use data-state; real :hover / :active / :focus-visible
   behave the same way.
   ========================================================================== */

/* ---------- Icon (Material Symbols Outlined, weight 400) ---------- */
.molde .mo-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; white-space: nowrap; direction: ltr;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1em; height: 1em; overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased; user-select: none;
}
.molde .mo-icon.is-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
/* Icons must never inherit text styles from a parent rule (font shorthand, flex: 1, column layout) */
.molde span.mo-icon { font-family: "Material Symbols Outlined" !important; font-weight: normal !important; font-style: normal !important; line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important; display: inline-flex !important; flex: none !important; }
.molde svg.mo-icon { width: 1em; height: 1em; flex: none !important; }
.molde .mo-art { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }

/* Shared state overlay (Hover 12% / Pressed 24% on solid, 8% / 16% brand on outline) */
.molde .mo-ov { position: relative; isolation: isolate; }
.molde .mo-ov::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ov-c, var(--neutral-900)); opacity: 0; pointer-events: none; z-index: -1; transition: opacity var(--motion-fast) var(--ease-out); }

/* ---------- Button ---------- */
.molde .mo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-button);
  font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); white-space: nowrap;
  cursor: pointer; text-decoration: none; background: transparent; color: var(--text-brand);
}
.molde .mo-btn .mo-icon { font-size: 20px; }
.molde .mo-btn[data-size="sm"] { padding: var(--space-2) var(--space-4); }
.molde .mo-btn[data-size="sm"] .mo-icon { font-size: 16px; }
.molde .mo-btn[data-size="lg"] { padding: var(--space-4) var(--space-8); font-size: var(--type-label-lg); }
.molde .mo-btn[data-h="primary"] { background: var(--action-primary); color: var(--action-on-primary); --ov-c: var(--neutral-900); }
.molde .mo-btn[data-h="secondary"] { border: 1px solid var(--border-brand); --ov-c: var(--action-primary); }
.molde .mo-btn[data-h="ghost"] { --ov-c: var(--action-primary); }
.molde .mo-btn[data-h="primary"]:hover::after, .molde .mo-btn[data-h="primary"][data-state="hover"]::after { opacity: .12; }
.molde .mo-btn[data-h="primary"]:active::after, .molde .mo-btn[data-h="primary"][data-state="pressed"]::after { opacity: .24; }
.molde .mo-btn:not([data-h="primary"]):hover::after, .molde .mo-btn:not([data-h="primary"])[data-state="hover"]::after { opacity: .08; }
.molde .mo-btn:not([data-h="primary"]):active::after, .molde .mo-btn:not([data-h="primary"])[data-state="pressed"]::after { opacity: .16; }
.molde .mo-btn[data-state="disabled"], .molde .mo-btn:disabled { cursor: not-allowed; color: var(--text-disabled); }
.molde .mo-btn[data-h="primary"][data-state="disabled"], .molde .mo-btn[data-h="primary"]:disabled { background: var(--action-disabled); color: var(--action-on-disabled); }
.molde .mo-btn[data-h="secondary"][data-state="disabled"], .molde .mo-btn[data-h="secondary"]:disabled { border-color: var(--border-default); }
.molde .mo-btn[data-state="disabled"]::after, .molde .mo-btn:disabled::after { opacity: 0 !important; }
.molde .mo-btn[data-state="focus"], .molde .mo-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.molde .mo-btn.is-full { width: 100%; }

/* ---------- Icon Button ---------- */
.molde .mo-ibtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-button);
  background: transparent; color: var(--icon-default); cursor: pointer; --ov-c: var(--action-primary);
}
.molde .mo-ibtn .mo-icon { font-size: 20px; }
.molde .mo-ibtn[data-size="md"] { width: 44px; height: 44px; }
.molde .mo-ibtn[data-size="md"] .mo-icon { font-size: 24px; }
.molde .mo-ibtn[data-h="primary"] { background: var(--action-primary); color: var(--action-on-primary); --ov-c: var(--neutral-900); }
.molde .mo-ibtn[data-h="secondary"] { border: 1px solid var(--border-brand); color: var(--icon-brand); }
.molde .mo-ibtn[data-h="primary"]:hover::after, .molde .mo-ibtn[data-h="primary"][data-state="hover"]::after { opacity: .12; }
.molde .mo-ibtn[data-h="primary"]:active::after, .molde .mo-ibtn[data-h="primary"][data-state="pressed"]::after { opacity: .24; }
.molde .mo-ibtn:not([data-h="primary"]):hover::after, .molde .mo-ibtn:not([data-h="primary"])[data-state="hover"]::after { opacity: .08; }
.molde .mo-ibtn:not([data-h="primary"]):active::after, .molde .mo-ibtn:not([data-h="primary"])[data-state="pressed"]::after { opacity: .16; }
.molde .mo-ibtn[data-state="disabled"] { cursor: not-allowed; color: var(--text-disabled); }
.molde .mo-ibtn[data-h="primary"][data-state="disabled"] { background: var(--action-disabled); color: var(--action-on-disabled); }
.molde .mo-ibtn[data-h="secondary"][data-state="disabled"] { border-color: var(--border-default); }
.molde .mo-ibtn[data-state="disabled"]::after { opacity: 0 !important; }
.molde .mo-ibtn[data-state="focus"], .molde .mo-ibtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Hyperlink ---------- */
.molde .mo-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-brand); text-decoration: none; cursor: pointer; font: 400 var(--type-body-lg)/1.5 var(--font-body); }
.molde .mo-link .mo-icon { font-size: 20px; color: var(--icon-brand); }
.molde .mo-link[data-size="md"] { font-size: var(--type-body-md); line-height: 1.45; }
.molde .mo-link[data-size="md"] .mo-icon { font-size: 16px; }
.molde .mo-link[data-size="sm"] { font-size: var(--type-body-sm); line-height: 1.4; }
.molde .mo-link[data-size="sm"] .mo-icon { font-size: 14px; }
.molde .mo-link[data-prom="prominent"] { font-weight: var(--font-label-weight); line-height: 1.4; }
.molde .mo-link[data-size="lg"][data-prom="prominent"] { font-size: var(--type-label-lg); }
.molde .mo-link[data-size="md"][data-prom="prominent"] { font-size: var(--type-label-md); }
.molde .mo-link[data-size="sm"][data-prom="prominent"] { font-size: var(--type-label-sm); }
.molde .mo-link:hover .mo-label { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Input / Select ---------- */
.molde .mo-field { display: flex; flex-direction: column; gap: var(--space-2); width: 320px; max-width: 100%; }
.molde .mo-field.is-select { width: 260px; }
.molde .mo-field > .mo-lbl { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-field > .mo-help { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-box {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-field);
  color: var(--icon-secondary);
}
.molde .mo-box .mo-icon { font-size: 20px; }
.molde .mo-box .mo-val { flex: 1; min-width: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; outline: 0; background: transparent; padding: 0; }
.molde .mo-box .mo-val.is-filled { color: var(--text-primary); }
.molde .mo-field.is-select .mo-box > .mo-icon { color: var(--icon-default); }
.molde .mo-field[data-state="focus"] .mo-box, .molde .mo-field[data-state="open"] .mo-box, .molde .mo-box:focus-within { border: 2px solid var(--border-brand); }
.molde .mo-field[data-state="error"] .mo-box { border: 2px solid var(--feedback-error); }
.molde .mo-field[data-state="error"] .mo-trail { color: var(--feedback-error); }
.molde .mo-field[data-state="error"] > .mo-help { color: var(--feedback-error); }
.molde .mo-field[data-state="disabled"] .mo-box { background: var(--bg-subtle); border-color: var(--border-default); }
.molde .mo-field[data-state="disabled"] > .mo-lbl, .molde .mo-field[data-state="disabled"] > .mo-help, .molde .mo-field[data-state="disabled"] .mo-val { color: var(--text-disabled); }

/* ---------- Checkbox / Radio ---------- */
.molde .mo-check { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-primary); cursor: pointer; }
.molde .mo-check .mo-ctl { width: 20px; height: 20px; flex: none; display: grid; place-items: center; background: var(--bg-surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--action-on-primary); }
.molde .mo-check .mo-ctl .mo-icon { font-size: 16px; }
.molde .mo-check[data-checked="true"] .mo-ctl, .molde .mo-check[data-checked="indeterminate"] .mo-ctl { background: var(--action-primary); border-color: transparent; }
.molde .mo-check.is-radio .mo-ctl { border-radius: 10px; }
.molde .mo-check.is-radio[data-checked="true"] .mo-ctl { background: var(--bg-surface); border: 2px solid var(--border-brand); }
.molde .mo-check.is-radio[data-checked="true"] .mo-ctl::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--action-primary); }
.molde .mo-check[data-state="hover"] .mo-ctl, .molde .mo-check:hover .mo-ctl { border-color: var(--border-brand); }
.molde .mo-check[data-state="disabled"] { color: var(--text-disabled); cursor: not-allowed; }
.molde .mo-check[data-state="disabled"] .mo-ctl { background: var(--bg-subtle); border-color: var(--border-default); }
.molde .mo-check[data-state="focus"] .mo-ctl { box-shadow: var(--focus-ring); }

/* ---------- Switch ---------- */
.molde .mo-switch { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-primary); cursor: pointer; }
.molde .mo-switch .mo-track { width: 40px; height: 24px; flex: none; padding: 0 2px; display: flex; align-items: center; border-radius: 12px; background: var(--border-strong); transition: background var(--motion-base) var(--ease-in-out); }
.molde .mo-switch .mo-knob { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--elevation-1); transition: transform var(--motion-base) var(--ease-in-out); }
.molde .mo-switch[data-checked="on"] .mo-track { background: var(--action-primary); }
.molde .mo-switch[data-checked="on"] .mo-knob { transform: translateX(16px); }
.molde .mo-switch[data-state="disabled"] { color: var(--text-disabled); cursor: not-allowed; }
.molde .mo-switch[data-state="disabled"] .mo-track { background: var(--action-disabled); }
.molde .mo-switch[data-state="focus"] .mo-track { box-shadow: var(--focus-ring); }

/* ---------- Quantity Stepper ---------- */
.molde .mo-qty { display: inline-flex; align-items: center; padding: var(--space-1); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-field); color: var(--icon-default); }
.molde .mo-qty button { width: 20px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.molde .mo-qty .mo-icon { font-size: 20px; }
.molde .mo-qty output { width: 32px; text-align: center; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-qty[data-state="min"] button:first-child { color: var(--text-disabled); cursor: not-allowed; }
.molde .mo-qty[data-state="disabled"] { background: var(--bg-subtle); }
.molde .mo-qty[data-state="disabled"] output { color: var(--text-disabled); }

/* ---------- Badge ---------- */
.molde .mo-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-button); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); white-space: nowrap; background: var(--bg-accent); color: var(--text-on-accent); }
.molde .mo-badge .mo-icon { font-size: 14px; }
/* long labels: one line, never wider than its container, ends in "…" (inline-block so text-overflow applies;
   the text stays a plain text node, so code that rewrites a badge's text keeps working) */
.molde .mo-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.molde .mo-badge > .mo-icon { vertical-align: -3px; margin-right: var(--space-1); }
.molde .mo-media .mo-badges, .molde .mo-gal .mo-gmain .mo-badges { right: var(--space-2); }
.molde .mo-badge[data-type="descuento"] { background: var(--commerce-discount); color: var(--text-inverse); }
.molde .mo-badge[data-type="envio-gratis"] { background: var(--feedback-success-subtle); color: var(--commerce-free-shipping); }
.molde .mo-badge[data-type="cuotas"] { background: var(--commerce-installments); color: var(--text-inverse); }
.molde .mo-badge[data-type="mismo-precio"] { background: var(--bg-subtle); color: var(--text-primary); }
.molde .mo-badge[data-type="info"] { background: var(--feedback-info-subtle); color: var(--feedback-info); }
.molde .mo-badge[data-type="disponible"] { background: var(--feedback-success-subtle); color: var(--feedback-success); }
.molde .mo-badge[data-type="transferencia"] { background: var(--feedback-info-subtle); color: var(--feedback-info); }
.molde .mo-badge[data-type="efectivo"] { background: var(--feedback-warning-subtle); color: var(--text-primary); }

/* ---------- Price ---------- */
.molde .mo-price { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.molde .mo-price .mo-now { font: var(--font-heading-weight) var(--type-price-lg)/1.2 var(--font-heading); color: var(--commerce-price); }
.molde .mo-price .mo-old { font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--commerce-price-old); text-decoration: line-through; }
.molde .mo-price[data-size="md"] .mo-now { font: var(--font-label-weight) var(--type-price-md)/1.25 var(--font-body); }
.molde .mo-price[data-size="sm"] .mo-now { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-price:not([data-size="lg"]) .mo-old { font-size: var(--type-body-sm); line-height: 1.4; }

/* ---------- Badge Brand (brand tab on images) ---------- */
.molde .mo-brandtab { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; background: var(--bg-surface); border-radius: 0 var(--radius-card) 0 0; box-shadow: var(--elevation-up-2); color: var(--text-primary); }
.molde .mo-brandtab .mo-art { width: 22px; height: 22px; }

/* ---------- Swatches ---------- */
.molde .mo-swc { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border-default); position: relative; cursor: pointer; }
.molde .mo-swc i { width: 26px; height: 26px; border-radius: 50%; background: var(--swatch, #212633); }
.molde .mo-swc[data-state="selected"] { border: 2px solid var(--border-brand); }
.molde .mo-swc[data-state="disabled"] { cursor: not-allowed; }
.molde .mo-swc[data-state="disabled"] i { opacity: .35; }
.molde .mo-swc[data-state="disabled"]::after { content: ""; position: absolute; width: 1.5px; height: 30px; background: var(--text-secondary); transform: rotate(45deg); }
.molde .mo-swc[data-state="focus"] { box-shadow: var(--focus-ring); }
.molde .mo-sws { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 48px; padding: 10px var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-field); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); cursor: pointer; }
.molde .mo-sws small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-sws .mo-pop { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--commerce-discount); }
.molde .mo-sws[data-state="selected"] { background: var(--action-primary); border-color: transparent; color: var(--action-on-primary); }
.molde .mo-sws[data-state="selected"] small { color: var(--action-on-primary); opacity: .8; }
.molde .mo-sws[data-state="disabled"] { border-color: var(--border-default); color: var(--text-disabled); cursor: not-allowed; }
.molde .mo-sws[data-state="disabled"] small { color: var(--text-disabled); }
.molde .mo-sws[data-state="focus"] { box-shadow: var(--focus-ring); }

/* ---------- Rating ---------- */
.molde .mo-rating { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.molde .mo-rating .mo-stars { display: inline-flex; gap: 1px; color: var(--feedback-warning); }
.molde .mo-rating .mo-stars .mo-icon { font-size: 16px; }
.molde .mo-rating .mo-stars .is-empty { color: var(--border-strong); }
.molde .mo-rating b { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-primary); }
.molde .mo-rating > span:not(.mo-stars) { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }

/* ---------- Countdown ---------- */
.molde .mo-count { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-count b { padding: var(--space-1) var(--space-2); background: var(--bg-accent); color: var(--text-on-accent); border-radius: var(--radius-button); font-weight: inherit; font-variant-numeric: tabular-nums; }
/* On media: separators sit over photos or dark surfaces, so they switch to the inverse text token */
.molde .mo-count[data-tone="on-media"] { color: var(--text-inverse); }
.molde .mo-count[data-size="sm"] b { padding: 2px 6px; font-size: var(--type-label-sm); line-height: 1.3; }

/* ---------- Avatar ---------- */
.molde .mo-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-accent); color: var(--text-on-accent); font: var(--font-label-weight) var(--type-label-sm)/1 var(--font-body); overflow: hidden; }
.molde .mo-avatar[data-size="md"] { width: 40px; height: 40px; font-size: var(--type-label-md); }
.molde .mo-avatar[data-size="lg"] { width: 56px; height: 56px; font-size: var(--type-label-lg); }
.molde .mo-avatar[data-type="icon"] { background: var(--bg-subtle); color: var(--icon-secondary); }
.molde .mo-avatar[data-type="icon"] .mo-icon { font-size: 18px; }
.molde .mo-avatar[data-size="md"][data-type="icon"] .mo-icon { font-size: 22px; }
.molde .mo-avatar[data-size="lg"][data-type="icon"] .mo-icon { font-size: 30px; }
.molde .mo-avatar[data-type="image"] { background: linear-gradient(135deg, #c9b79c, #8b7355); }

/* ---------- Chip ---------- */
.molde .mo-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-button); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); white-space: nowrap; cursor: pointer; --ov-c: var(--action-primary); }
.molde .mo-chip .mo-icon { font-size: 16px; color: var(--icon-secondary); }
.molde .mo-chip:hover::after, .molde .mo-chip[data-state="hover"]::after { opacity: .08; }
.molde .mo-chip[data-state="selected"] { background: var(--action-primary); border-color: transparent; color: var(--action-on-primary); }
.molde .mo-chip[data-state="selected"] .mo-icon { color: var(--action-on-primary); }
.molde .mo-chip[data-state="selected"]::after { opacity: 0 !important; }
.molde .mo-chip[data-state="disabled"] { border-color: var(--border-default); color: var(--text-disabled); cursor: not-allowed; }
.molde .mo-chip[data-state="disabled"] .mo-icon { color: var(--text-disabled); }
.molde .mo-chip[data-state="disabled"]::after { opacity: 0 !important; }
.molde .mo-chip[data-state="focus"] { box-shadow: var(--focus-ring); }

/* ---------- Loader ---------- */
.molde .mo-loader { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--border-default); border-top-color: var(--action-primary); animation: mo-spin .8s linear infinite; }
.molde .mo-loader[data-size="md"] { width: 24px; height: 24px; border-width: 3px; }
.molde .mo-loader[data-size="lg"] { width: 40px; height: 40px; border-width: 4px; }
@keyframes mo-spin { to { transform: rotate(360deg); } }

/* ---------- Skeleton ---------- */
.molde .mo-skel { display: block; width: 200px; height: 12px; border-radius: var(--radius-sm); background: var(--bg-subtle); position: relative; overflow: hidden; }
.molde .mo-skel[data-shape="title"] { width: 280px; height: 20px; }
.molde .mo-skel[data-shape="circle"] { width: 48px; height: 48px; border-radius: var(--radius-full); }
.molde .mo-skel[data-shape="image"] { width: 240px; height: 240px; border-radius: var(--radius-md); }
.molde .mo-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: mo-shimmer 1.4s ease-in-out infinite; }
@keyframes mo-shimmer { to { transform: translateX(100%); } }

/* ---------- Divider ---------- */
.molde .mo-divider { display: block; width: 240px; max-width: 100%; height: 1px; background: var(--border-default); border: 0; margin: 0; }
.molde .mo-divider[data-o="vertical"] { width: 1px; height: 40px; }

/* ---------- Image Action ---------- */
.molde .mo-imgact { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--icon-default); cursor: pointer; --ov-c: var(--action-primary); }
.molde .mo-imgact .mo-icon { font-size: 18px; }
.molde .mo-imgact[data-size="md"] { width: 40px; height: 40px; }
.molde .mo-imgact[data-size="md"] .mo-icon { font-size: 20px; }
.molde .mo-imgact[data-action="favorite-on"] { color: var(--icon-brand); }
.molde .mo-imgact:hover::after, .molde .mo-imgact[data-state="hover"]::after { opacity: .08; }
.molde .mo-imgact[data-state="focus"] { box-shadow: var(--focus-ring); }

/* ---------- Logos (artwork) ---------- */
.molde .mo-logo { display: inline-flex; align-items: center; color: var(--text-primary); }
.molde .mo-logo[data-tone="light"] { color: var(--text-inverse); }
.molde .mo-logo[data-tone="brand"] { color: var(--text-brand); }
.molde .mo-logo[data-tone="on-brand"] { color: var(--text-on-brand); }
.molde .mo-logo .mo-wordmark { font: var(--font-heading-weight) 22px/1 var(--font-heading); letter-spacing: -0.02em; white-space: nowrap; }
.molde .mo-logo .mo-logoimg { display: block; max-height: 36px; max-width: 140px; }
/* Default shows the MadeOf logo; a client brand shows its own logo or wordmark */
.molde .mo-logo .l-custom { display: none; }
.molde[data-brand="custom"] .mo-logo .l-madeof { display: none; }
.molde[data-brand="custom"] .mo-logo .l-custom { display: inline-flex; }
.molde .mo-paylogo { display: inline-block; height: 32px; width: auto; }
.molde .mo-partner { display: inline-flex; align-items: center; color: var(--icon-secondary); }
.molde .mo-partner[data-tone="on-brand"] { color: var(--icon-on-brand); }
.molde .mo-partner .mo-art { height: 24px; }
/* store credit = the brand logo, sized and tinted like the other credits */
.molde .mo-partner-store .mo-logo { color: inherit; }
.molde .mo-partner.mo-partner-store .mo-logo .mo-art { height: 22px !important; width: auto !important; aspect-ratio: 112 / 29; }
.molde .mo-partner.mo-partner-store .mo-logo .mo-logoimg { aspect-ratio: var(--ar, 3.5); }
.molde .mo-partner-store .mo-wordmark { font-size: 17px; }
.molde .mo-datafiscal { display: inline-block; width: 36px; height: 50px; }

/* ---------- Motion ----------
   Timing comes from the Motion tokens, so each store style (Esencial / Editorial / Marketplace)
   has its own feel. Only color, shadow, opacity and transform animate (no layout properties). */
.molde .mo-btn, .molde .mo-ibtn, .molde .mo-chip, .molde .mo-imgact, .molde .mo-qty button, .molde .mo-sws, .molde .mo-swc, .molde .mo-brandtab {
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.molde .mo-btn:active, .molde .mo-ibtn:active, .molde .mo-chip:active, .molde .mo-imgact:active, .molde .mo-sws:active, .molde .mo-swc:active { transform: scale(var(--motion-press)); }
.molde .mo-link { transition: color var(--motion-fast) var(--ease-out), text-decoration-color var(--motion-fast) var(--ease-out); }
.molde .mo-link .mo-icon { transition: transform var(--motion-base) var(--ease-out); }
@media (hover: hover) { .molde .mo-link:hover .mo-icon:last-child { transform: translateX(2px); } }
.molde .mo-box { transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.molde .mo-check .mo-ctl { transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); }
.molde .mo-check .mo-ctl .mo-icon { animation: mo-pop var(--motion-base) var(--ease-out); }
.molde .mo-toast, .molde .mo-tip { animation: mo-pop var(--motion-slow) var(--ease-out); }
.molde .mo-loader, .molde .mo-skel { transition: opacity var(--motion-base) var(--ease-out); }

/* ---------- Badge hardening ----------
   A badge is a <span>; container rules like ".x span { color: … }" must never repaint it
   (it broke contrast on magenta discount pills). Same idea as the icon hardening. */
.molde .mo-badge { color: var(--text-on-accent) !important; font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body) !important; }
.molde .mo-badge[data-type="descuento"], .molde .mo-badge[data-type="cuotas"] { color: var(--text-inverse) !important; }
.molde .mo-badge[data-type="envio-gratis"] { color: var(--commerce-free-shipping) !important; }
.molde .mo-badge[data-type="mismo-precio"], .molde .mo-badge[data-type="efectivo"] { color: var(--text-primary) !important; }
.molde .mo-badge[data-type="info"], .molde .mo-badge[data-type="transferencia"] { color: var(--feedback-info) !important; }
.molde .mo-badge[data-type="disponible"] { color: var(--feedback-success) !important; }
/* ---------- Avatar hardening ----------
   The avatar is a <span>; container rules like ".x span { display:flex; flex-direction:column }" must not
   move its initials off center (seen in reviews and testimonials). */
.molde .mo-avatar { display: grid !important; place-items: center !important; flex-direction: row !important; }
/* Select menu: floats under the field inside pages */
.molde .mo-field.is-select { position: relative; }
.molde .mo-field.is-select .mo-selmenu { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 30; }