/* ==========================================================================
   Molde · Organisms
   1:1 with the Figma page "🦠 Organisms". Full-width sections use
   --layout-page-margin for the side gutter (80 desktop / 16 mobile).
   data-device="mobile" forces the Mobile variant regardless of viewport.
   ========================================================================== */
.molde .mo-org { width: 100%; }
.molde [data-device="mobile"] { --layout-page-margin: 16px; --layout-gutter: 16px; --layout-section-gap: 40px; --type-display: 36px; --type-heading-xl: 24px; --type-heading-lg: 20px; --type-heading-md: 18px; --type-price-lg: 20px; }

/* ---------- Promo Bar ---------- */
.molde .mo-promo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 36px; padding: var(--space-2) var(--layout-page-margin); background: var(--bg-brand); color: var(--text-on-brand); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); overflow: hidden; }
.molde .mo-promo .mo-msg { display: inline-flex; align-items: center; gap: var(--space-2); text-align: center; }
.molde .mo-promo .mo-icon { font-size: 18px; }
.molde .mo-promo .mo-x { font-size: 16px; cursor: pointer; }
.molde .mo-promo .mo-sp { width: 16px; }
.molde .mo-promo[data-tone="accent"] { background: var(--bg-accent); color: var(--text-on-accent); }
.molde .mo-promo[data-type="marquee"] { justify-content: flex-start; }
.molde .mo-promo .mo-track { display: flex; gap: var(--space-6); white-space: nowrap; animation: mo-marquee 28s linear infinite; }
.molde .mo-promo:hover .mo-track { animation-play-state: paused; }
@keyframes mo-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .molde .mo-promo .mo-track { animation: none; } }

/* ---------- Nav ---------- */
.molde .mo-nav { background: var(--bg-surface); }
.molde .mo-nav .mo-main { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--layout-page-margin); border-bottom: 1px solid var(--border-default); }
.molde .mo-nav .mo-links { display: flex; align-items: center; gap: 28px; }
.molde .mo-nav .mo-links a { 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); text-decoration: none; white-space: nowrap; }
.molde .mo-nav .mo-links a .mo-icon { font-size: 18px; }
.molde .mo-nav .mo-links a.is-hot { color: var(--commerce-discount); }
.molde .mo-nav .mo-grow { flex: 1; }
.molde .mo-nav .mo-search { width: 300px; }
.molde .mo-nav .mo-acts { display: flex; align-items: center; gap: var(--space-1); }
.molde .mo-nav .mo-cart { position: relative; }
.molde .mo-nav .mo-cart b { position: absolute; top: 2px; left: 26px; width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: var(--commerce-discount); color: var(--text-inverse); font: var(--font-label-weight) var(--type-label-sm)/1 var(--font-body); pointer-events: none; }
.molde .mo-nav .mo-logo .mo-art { height: 40px !important; width: 112px !important; }
/* B · Editorial: links left, logo centered, icons right */
.molde .mo-nav[data-style="b"] .mo-main { justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); }
.molde .mo-nav[data-style="b"] .mo-links { flex: 1; gap: var(--space-8); }
.molde .mo-nav[data-style="b"] .mo-acts { flex: 1; justify-content: flex-end; }
.molde .mo-nav[data-style="b"] .mo-logo .mo-art { width: 134px !important; height: 48px !important; }
/* C · Marketplace: brand header + subnav */
.molde .mo-nav[data-style="c"] .mo-main { gap: var(--space-6); padding-block: 14px; background: var(--bg-brand); border: 0; }
.molde .mo-nav[data-style="c"] .mo-main .mo-search { flex: 1; width: auto; max-width: 468px; }
/* wider than 1440 the free space goes after the search, so payments, notifications and icons stay on the right edge */
.mo-nav[data-style="c"] .mo-main .mo-search + * { margin-left: auto; }
.molde .mo-nav[data-style="c"] .mo-main .mo-ibtn { color: var(--icon-on-brand); }
.molde .mo-nav .mo-pays { display: flex; gap: 6px; }
.molde .mo-nav .mo-notif { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); border: 0; border-radius: var(--radius-button); background: var(--bg-accent); color: var(--text-on-accent); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); white-space: nowrap; cursor: pointer; }
.molde .mo-nav .mo-notif .mo-icon { font-size: 18px; }
.molde .mo-nav .mo-sub { display: flex; align-items: center; gap: var(--space-6); padding: 10px var(--layout-page-margin); border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
.molde .mo-nav .mo-sub a { display: inline-flex; align-items: center; gap: 6px; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.molde .mo-nav .mo-sub a .mo-icon { font-size: 18px; color: var(--icon-brand); }
.molde .mo-nav .mo-sub .mo-cats { padding: var(--space-2) var(--space-4); gap: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-button); }
.molde .mo-nav .mo-sub .mo-cats .mo-icon:last-child { color: var(--icon-default); }
.molde .mo-nav .mo-sub .mo-loc { margin-left: auto; }
/* Mobile */
.molde .mo-nav[data-device="mobile"] .mo-main { gap: var(--space-1); padding: var(--space-2) var(--space-4); }
.molde .mo-nav[data-device="mobile"] .mo-logo .mo-art { width: 95px !important; height: 34px !important; }
.molde .mo-nav[data-device="mobile"][data-style="b"] .mo-main { padding: 10px var(--space-4); }
.molde .mo-nav[data-device="mobile"][data-style="b"] .mo-logo .mo-art { width: 112px !important; height: 40px !important; }
.molde .mo-nav[data-device="mobile"][data-style="b"] .mo-side { flex: 0 0 88px; display: flex; }
.molde .mo-nav[data-device="mobile"][data-style="b"] .mo-side.is-r { justify-content: flex-end; }
.molde .mo-nav[data-device="mobile"] .mo-msearch { padding: 0 var(--space-4) var(--space-3); background: var(--bg-brand); }
.molde .mo-nav[data-device="mobile"] .mo-msearch .mo-search { width: 100%; }
.molde .mo-nav[data-device="mobile"] .mo-sub { gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.molde .mo-nav[data-device="mobile"] .mo-sub a:not(.mo-cats) { padding: var(--space-2) var(--space-3); background: var(--bg-subtle); border-radius: var(--radius-button); }

/* ---------- Mega Menu ---------- */
.molde .mo-mega { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--layout-page-margin); background: var(--bg-surface); border-top: 1px solid var(--border-default); box-shadow: var(--elevation-5); }
.molde .mo-mega .mo-mrow { display: flex; gap: var(--space-12); }
.molde .mo-mega .mo-col { display: flex; flex-direction: column; gap: 10px; width: 180px; flex: none; }
.molde .mo-mega .mo-col > span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); letter-spacing: .02em; }
.molde .mo-mega .mo-col a { display: inline-flex; align-items: center; gap: var(--space-1); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-primary); text-decoration: none; }
.molde .mo-mega .mo-col a.is-hot { color: var(--commerce-discount); }
.molde .mo-mega .mo-col a.is-on { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-brand); }
.molde .mo-mega .mo-col a .mo-icon { font-size: 16px; color: var(--icon-brand); }
.molde .mo-mega .mo-col a.mo-more { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-brand); }
.molde .mo-mega .mo-hr { height: 1px; background: var(--border-default); }
.molde .mo-mega .mo-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-mega .mo-camps { display: flex; gap: var(--space-4); margin-left: auto; }
.molde .mo-mega .mo-camp { position: relative; width: 300px; height: 360px; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-card); overflow: hidden; color: var(--border-strong); }
.molde .mo-mega .mo-camp > .mo-icon { font-size: 64px; }
.molde .mo-mega .mo-camp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
.molde .mo-mega .mo-camp a { position: absolute; left: 20px; bottom: 20px; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-inverse); text-decoration: none; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-mega .mo-camp a .mo-icon { font-size: 16px; }
.molde .mo-mega[data-style="c"] .mo-mrow { gap: var(--space-10, 40px); }
.molde .mo-mega .mo-vr { width: 1px; align-self: stretch; background: var(--border-default); }
.molde .mo-mega .mo-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.molde .mo-mega .mo-sizes .mo-sws { min-width: 41px; padding: 8.5px 10px; }
.molde .mo-mega .mo-side { display: flex; flex-direction: column; gap: var(--space-4); width: 180px; }
.molde .mo-mega .mo-side > span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-mega .mo-brands { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-mega .mo-brands i { width: 52px; height: 52px; display: grid; place-items: center; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-field); color: var(--text-primary); }
.molde .mo-mega .mo-pill { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; padding: var(--space-1) 14px var(--space-1) var(--space-1); border: 1px solid var(--border-strong); border-radius: var(--radius-button); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-primary); text-decoration: none; }
.molde .mo-mega .mo-pill i { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-subtle); color: var(--border-strong); }
.molde .mo-mega .mo-pill .mo-icon { font-size: 16px; }

/* ---------- Footer ---------- */
.molde .mo-footer { display: flex; flex-direction: column; gap: 40px; padding: 56px var(--layout-page-margin) var(--space-8); background: var(--bg-subtle); color: var(--text-primary); }
.molde .mo-footer .mo-ftop { display: flex; gap: 40px; }
.molde .mo-footer .mo-fbrand { display: flex; flex-direction: column; gap: var(--space-4); width: 256px; flex: none; }
.molde .mo-footer .mo-fbrand p { margin: 0; font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-footer .mo-social { display: flex; gap: var(--space-2); }
.molde .mo-footer .mo-social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 18px; color: var(--icon-default); }
.molde .mo-footer .mo-social .mo-icon { font-size: 18px; }
.molde .mo-footer .mo-fcol { display: flex; flex-direction: column; gap: 10px; }
.molde .mo-footer .mo-fcol b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-footer .mo-fcol a { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); text-decoration: none; }
.molde .mo-footer .mo-fcol a:hover { color: var(--text-brand); }
.molde .mo-footer .mo-fgrow { flex: 1; }
.molde .mo-footer .mo-fnews { width: 340px; flex: none; }
.molde .mo-footer .mo-fnews .mo-news { width: 100%; }
.molde .mo-footer .mo-hr { height: 1px; background: var(--border-default); }
.molde .mo-footer .mo-fpay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.molde .mo-footer .mo-fpay > span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-footer .mo-pays { display: flex; flex-wrap: wrap; gap: 6px; }
.molde .mo-footer .mo-flegal { width: 100%; }
.molde .mo-footer[data-style="b"] { align-items: center; background: var(--bg-surface); text-align: center; }
.molde .mo-footer[data-style="b"] .mo-logo .mo-art { width: 157px !important; height: 56px !important; }
.molde .mo-footer[data-style="b"] .mo-tag { font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; }
.molde .mo-footer[data-style="b"] .mo-flinks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.molde .mo-footer[data-style="b"] .mo-flinks a { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); text-decoration: none; }
.molde .mo-footer[data-style="b"] .mo-hr, .molde .mo-footer[data-style="b"] .mo-flegal { align-self: stretch; text-align: left; }
.molde .mo-footer[data-style="c"] { gap: 0; padding: 0 0 var(--space-8); background: var(--bg-surface); }
.molde .mo-footer .mo-fben { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); padding: 28px var(--layout-page-margin); background: var(--bg-accent); color: var(--text-on-accent); }
.molde .mo-footer .mo-fben span { display: flex; align-items: center; gap: var(--space-3); }
.molde .mo-footer .mo-fben .mo-icon { font-size: 28px; }
.molde .mo-footer .mo-fben b { display: block; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-footer .mo-fben small { font: 400 var(--type-body-sm)/1.4 var(--font-body); }
.molde .mo-footer .mo-fmain { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-12) var(--layout-page-margin) var(--space-8); }
.molde .mo-footer[data-style="c"] .mo-ftop { gap: 56px; }
.molde .mo-footer .mo-fpay.is-stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.molde .mo-footer .mo-fbar { margin: 0; padding: 20px var(--layout-page-margin); background: var(--bg-brand); }
.molde .mo-footer .mo-fbar .mo-flegal { padding: var(--space-4); background: var(--bg-brand); border-radius: 12px; }
.molde .mo-footer[data-device="mobile"] .mo-ftop { flex-direction: column; gap: var(--space-6); }
.molde .mo-footer[data-device="mobile"] .mo-fnews { width: 100%; }
.molde .mo-footer[data-device="mobile"] { padding-top: 40px; }
.molde .mo-footer[data-style="c"][data-device="mobile"] { padding-top: 0; }
.molde .mo-footer[data-device="mobile"] .mo-fben { flex-direction: column; gap: var(--space-4); }

/* ---------- Header Title ---------- */
.molde .mo-htitle { display: flex; flex-direction: column; gap: 20px; padding: 40px var(--layout-page-margin); background: var(--bg-brand); color: var(--text-on-brand); }
.molde .mo-htitle h1 { margin: 0; font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.molde .mo-htitle .mo-crumbs, .molde .mo-htitle .mo-crumbs a, .molde .mo-htitle .mo-crumbs span { color: var(--text-on-brand); }
.molde .mo-htitle[data-tone="subtle"] { background: var(--bg-subtle); color: var(--text-primary); }
.molde .mo-htitle[data-tone="subtle"] .mo-crumbs { color: var(--icon-secondary); }
.molde .mo-htitle[data-tone="subtle"] .mo-crumbs a { color: var(--text-brand); }
.molde .mo-htitle[data-tone="subtle"] .mo-crumbs span { color: var(--text-secondary); }
.molde .mo-htitle[data-device="mobile"] { gap: var(--space-3); padding-block: var(--space-6); }

/* ---------- Hero ---------- */
.molde .mo-hero { position: relative; display: flex; align-items: center; min-height: 520px; padding: 0 var(--layout-page-margin); background: var(--bg-inverse); color: var(--text-inverse); overflow: hidden; }
.molde .mo-hero > img, .molde .mo-hs > img:not(.rb-img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.molde .mo-hero .mo-ph { position: absolute; left: 57%; top: 35%; font-size: 156px; opacity: .5; }
.molde .mo-hero .mo-hc { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 560px; }
.molde .mo-hero .mo-eye { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); letter-spacing: .02em; }
.molde .mo-hero h2 { margin: 0; font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.molde .mo-hero p { margin: 0; font: 400 var(--type-body-lg)/1.5 var(--font-body); }
.molde .mo-hero[data-style="b"] { min-height: 560px; padding: 0; background: var(--bg-subtle); color: var(--text-primary); align-items: stretch; }
.molde .mo-hero[data-style="b"] .mo-hc { flex: 1; max-width: none; justify-content: center; gap: 20px; padding: var(--space-16) var(--layout-page-margin); }
.molde .mo-hero[data-style="b"] .mo-eye { color: var(--text-brand); }
.molde .mo-hero[data-style="b"] h2 { max-width: 520px; }
.molde .mo-hero[data-style="b"] p { max-width: 480px; color: var(--text-secondary); }
.molde .mo-hero[data-style="b"] .mo-acts { display: flex; gap: var(--space-3); }
.molde .mo-hero[data-style="b"] .mo-himg { position: relative; flex: 1; display: grid; place-items: center; background: var(--border-default); color: var(--border-strong); }
.molde .mo-hero[data-style="b"] .mo-himg .mo-icon { font-size: 168px; opacity: .5; }
/* a slide photo fills the image half instead of pushing the slide to the photo's natural width */
.molde .mo-hero[data-style="b"] .mo-himg { min-width: 0; }
.molde .mo-hero[data-style="b"] .mo-himg > img:not(.rb-img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.molde .mo-hero .mo-hslides { grid-template-columns: minmax(0, 1fr); }
.molde .mo-hero[data-style="c"] { gap: var(--space-4); min-height: 0; padding: var(--space-6) var(--layout-page-margin); background: var(--bg-page); color: var(--text-primary); align-items: stretch; }
.molde .mo-hero .mo-slide { position: relative; flex: 1 1 872px; height: 400px; display: flex; align-items: center; padding: 0; background: var(--bg-brand); color: var(--text-on-brand); border-radius: var(--radius-card); overflow: hidden; }
.molde .mo-hero .mo-slide .mo-hs > .mo-icon { position: absolute; right: 60px; top: 120px; font-size: 160px; opacity: .35; }
.molde .mo-hero .mo-slide .mo-hc { gap: var(--space-3); max-width: 460px; }
.molde .mo-hero .mo-banners { display: flex; flex-direction: column; gap: var(--space-4); flex: 0 1 392px; }
.molde .mo-hero .mo-ban { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); padding: 0 28px; border-radius: var(--radius-card); background: var(--bg-accent); color: var(--text-on-accent); }
.molde .mo-hero .mo-ban b { font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; }
.molde .mo-hero .mo-ban span { font: 400 var(--type-body-sm)/1.4 var(--font-body); }
.molde .mo-hero .mo-ban.is-subtle { background: var(--bg-subtle); color: var(--text-primary); }
.molde .mo-hero .mo-ban.is-subtle span { color: var(--text-secondary); }
/* the slide's content is absolutely positioned (carousel), so the slide has to stretch to the hero's width */
.molde .mo-hero[data-style="c"] .mo-slide { align-self: stretch; }
.molde .mo-hero[data-device="mobile"] { align-items: flex-end; padding-bottom: 48px; }
.molde .mo-hero[data-device="mobile"] .mo-ph { left: 47%; top: 39%; font-size: 113px; }
.molde .mo-hero[data-device="mobile"] .mo-hc { gap: var(--space-3); width: 100%; }
.molde .mo-hero[data-device="mobile"] p { font-size: var(--type-body-md); line-height: 1.45; }
.molde .mo-hero[data-device="mobile"] .mo-btn { width: 100%; }
.molde .mo-hero[data-style="b"][data-device="mobile"] { padding: 0; }
.molde .mo-hero[data-style="b"][data-device="mobile"] .mo-himg { min-height: 280px; }
.molde .mo-hero[data-style="b"][data-device="mobile"] .mo-hc { padding: var(--space-8) var(--space-4); }
.molde .mo-hero[data-style="c"][data-device="mobile"] { flex-direction: column; padding: var(--space-4); }
.molde .mo-hero[data-style="c"][data-device="mobile"] .mo-slide { flex: none; height: 320px; padding: 0; }
.molde .mo-hero[data-style="c"][data-device="mobile"] .mo-banners { flex-direction: row; flex: none; }
.molde .mo-hero[data-style="c"][data-device="mobile"] .mo-ban { min-height: 120px; padding: 0 var(--space-4); }

/* ---------- Hero slides (real carousel) ---------- */
/* slides stack in one grid cell and crossfade; the container takes the tallest slide */
.molde .mo-hslides { display: grid; }
.molde .mo-hs { grid-area: 1 / 1; position: relative; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--motion-slow) var(--ease-in-out), visibility 0s linear var(--motion-slow); }
.molde .mo-hs.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.molde [data-carousel="hero"] .mo-hslides { touch-action: pan-y; }
.molde [data-carousel="hero"]:focus-visible { outline: 2px solid var(--focus-ring, currentColor); outline-offset: -4px; }
/* A · Esencial: full-bleed slides */
.molde .mo-hero[data-style="a"] > .mo-hslides { position: absolute; inset: 0; }
.molde .mo-hero[data-style="a"] .mo-hs { padding: 0 var(--layout-page-margin); }
.molde .mo-hero[data-style="a"][data-device="mobile"] .mo-hs { align-items: flex-end; padding: 0 var(--space-4) 64px; }
/* B · Editorial: text + image, the image side carries the arrows */
.molde .mo-hero[data-style="b"] > .mo-hslides { flex: 1; }
.molde .mo-hero[data-style="b"] .mo-hs { align-items: stretch; }
.molde .mo-hero[data-style="b"] .mo-hs .mo-hc { padding-bottom: 88px; }
.molde .mo-hero[data-style="b"][data-device="mobile"] .mo-hs { flex-direction: column-reverse; }
.molde .mo-hero[data-style="b"][data-device="mobile"] .mo-hs .mo-hc { padding-bottom: 72px; }
/* C · Marketplace: slides inside the brand card */
.molde .mo-hero .mo-slide > .mo-hslides { position: absolute; inset: 0; }
.molde .mo-hero .mo-slide .mo-hs { padding: 0 88px; }
.molde .mo-hero[data-style="c"][data-device="mobile"] .mo-slide .mo-hs { padding: 0 var(--space-6) 40px; }
/* photo from a store (rubros / Live): the slide's own placeholder icon hides, as elsewhere */
.molde .rb-host .mo-hs > .mo-icon, .molde .rb-host .mo-hs > .mo-ph { visibility: hidden; }

/* dots + pause: one row; the active dot fills like a progress bar while autoplay runs */
.molde .mo-hnav { position: absolute; z-index: 3; left: var(--layout-page-margin); bottom: 16px; display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-hero[data-style="b"] .mo-hnav { bottom: 24px; }
.molde .mo-hero .mo-slide .mo-hnav { left: 50%; transform: translateX(-50%); bottom: 12px; }
.molde .mo-hero[data-device="mobile"] .mo-hnav { left: var(--space-4); bottom: 12px; }
.molde .mo-hero[data-device="mobile"] .mo-slide .mo-hnav { left: 50%; }
.molde .mo-dots, .molde .mo-tdots { display: flex; align-items: center; gap: 6px; }
.molde .mo-dot { display: grid; place-items: center; height: 24px; min-width: 16px; padding: 0 4px; border: 0; background: none; cursor: pointer; color: inherit; }
.molde .mo-dot i { position: relative; display: block; width: 8px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--mo-dot, var(--text-secondary)); transition: width var(--motion-base) var(--ease-out); }
.molde .mo-dot.is-on i { width: 28px; background: var(--mo-dot-track, rgb(255 255 255 / .35)); }
.molde .mo-dot b { position: absolute; inset: 0; background: var(--mo-dot-on, var(--text-inverse)); transform: scaleX(0); transform-origin: left; }
.molde .mo-dot.is-on b { transform: scaleX(1); }
.molde [data-autoplay="on"] .mo-dot.is-on b { animation: mo-dotfill var(--mo-car-ms, 6500ms) linear forwards; }
.molde [data-running="false"] .mo-dot.is-on b { animation-play-state: paused; }
@keyframes mo-dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.molde .mo-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 6px; }
.molde .mo-hero[data-style="a"] { --mo-dot: rgb(255 255 255 / .5); }
.molde .mo-hero[data-style="b"] { --mo-dot: var(--border-strong); --mo-dot-track: var(--border-default); --mo-dot-on: var(--action-primary); }
.molde .mo-hero .mo-slide { --mo-dot: rgb(255 255 255 / .5); --mo-dot-on: var(--text-on-brand); }
/* pause/play over the photo reads like the On media arrows: light translucent surface, no border */
.molde .mo-tnav { display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-hnav .mo-hplay.mo-ibtn, .molde .mo-tnav .mo-hplay.mo-ibtn { flex: none; background: color-mix(in srgb, var(--bg-surface) 88%, transparent); border-color: transparent; color: var(--text-primary); box-shadow: var(--elevation-2); }

/* arrows over the photo: hidden at rest, faint while the pointer is on the hero, solid when pointed or focused */
.molde [data-carousel="hero"] > .mo-arrow, .molde [data-carousel="hero"] .mo-slide > .mo-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
.molde [data-carousel="hero"] .mo-arrow.is-prev { left: 24px; }
.molde [data-carousel="hero"] .mo-arrow.is-next { right: 24px; }
.molde .mo-hero[data-style="b"] > .mo-arrow.is-prev { left: calc(50% + 24px); }
.molde [data-carousel="hero"]:hover .mo-arrow { opacity: .6; }
.molde [data-carousel="hero"] .mo-arrow:hover, .molde [data-carousel="hero"] .mo-arrow:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .molde .mo-hs, .molde .mo-tq { transition: none; } .molde .mo-dot.is-on b { animation: none !important; transform: scaleX(1); } }

/* ---------- Sidebar (navigation drawer) ---------- */
.molde .mo-drawer { display: flex; flex-direction: column; width: 375px; max-width: 100%; background: var(--bg-surface); box-shadow: var(--elevation-5); }
.molde .mo-drawer .mo-dtop { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); }
.molde .mo-drawer .mo-dtop .mo-grow { flex: 1; }
.molde .mo-drawer .mo-dtop b { font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-drawer .mo-dtop > .mo-icon { font-size: 22px; color: var(--icon-brand); }
.molde .mo-drawer .mo-acc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-subtle); color: var(--text-brand); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-drawer .mo-acc-row .mo-icon { font-size: 20px; color: var(--icon-brand); }
.molde .mo-drawer .mo-item { display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); border-bottom: 1px solid var(--border-default); font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); text-decoration: none; }
.molde .mo-drawer .mo-item span { flex: 1; }
.molde .mo-drawer .mo-item .mo-icon { font-size: 20px; color: var(--icon-secondary); }
.molde .mo-drawer .mo-item.is-sm { font: 400 var(--type-body-md)/1.45 var(--font-body); }
.molde .mo-drawer .mo-item.is-md { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-drawer .mo-item .mo-icon.is-lead { color: var(--icon-brand); }
.molde .mo-drawer .mo-item.is-hot { color: var(--commerce-discount); }
.molde .mo-drawer .mo-item.is-brand { color: var(--text-brand); }
.molde .mo-drawer .mo-dban { padding: var(--space-4); }
.molde .mo-drawer .mo-dban div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--bg-accent); color: var(--text-on-accent); border-radius: var(--radius-card); }
.molde .mo-drawer .mo-dban b { font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); }
.molde .mo-drawer .mo-dban a { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; text-decoration: none; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-drawer .mo-dban .mo-icon { font-size: 16px; }
.molde .mo-drawer .mo-dchips { display: flex; gap: var(--space-2); padding: 0 var(--space-4) var(--space-2); overflow-x: auto; scrollbar-width: none; }
.molde .mo-drawer .mo-dsec { padding: var(--space-4) var(--space-4) var(--space-1); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-drawer[data-style="b"] .mo-dtop { justify-content: flex-end; padding: var(--space-4) 20px; border: 0; }
.molde .mo-drawer[data-style="b"] .mo-dtop .mo-icon { color: var(--icon-default); font-size: 24px; }
.molde .mo-drawer .mo-big { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 20px; }
.molde .mo-drawer .mo-big a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; }
.molde .mo-drawer .mo-big a span { flex: 1; }
.molde .mo-drawer .mo-big a .mo-icon { font-size: 24px; }
.molde .mo-drawer .mo-big a.is-hot { color: var(--commerce-discount); }
.molde .mo-drawer .mo-tiles { display: flex; gap: var(--space-3); padding: var(--space-6) 20px var(--space-4); }
.molde .mo-drawer .mo-tiles a { position: relative; flex: 1; height: 200px; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-card); color: var(--border-strong); text-decoration: none; }
.molde .mo-drawer .mo-tiles .mo-icon { font-size: 48px; }
.molde .mo-drawer .mo-tiles span { position: absolute; left: var(--space-3); bottom: var(--space-2); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-drawer .mo-dfoot { display: flex; gap: 20px; padding: 0 20px 28px; }
.molde .mo-drawer .mo-dfoot a { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); text-decoration: none; }
.molde .mo-drawer[data-device="desktop"] { width: 400px; }

/* ---------- Shared section shell (carousels, shelves) ---------- */
.molde .mo-sec { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-12) var(--layout-page-margin); background: var(--bg-page); }
.molde .mo-sh { display: flex; align-items: center; gap: var(--space-4); }
.molde .mo-sh h2 { flex: 1; margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-sh .mo-ends { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-eyebrow { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); letter-spacing: .02em; }
.molde .mo-rail { position: relative; }
.molde .mo-rail .mo-tr { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.molde .mo-rail .mo-tr > * { flex: none; scroll-snap-align: start; }
/* ---------- Carousel (one pattern for all, see standardizeCarousel in molde.js) ----------
   Arrows straddle the row edge (half over the edge card, half outside). Each arrow has an
   invisible safe zone (bigger hit area) so aiming at it never wakes a card hover. */
.molde .mo-rail > .mo-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; }
/* arrows straddle the edge of the row: half over the first/last visible card, half outside */
.molde .mo-rail > .mo-arrow.is-prev { left: -22px; }
.molde .mo-rail > .mo-arrow.is-next { right: -22px; }
.molde .mo-rail > .mo-arrow::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.molde .mo-rail > .mo-arrow:active { transform: translateY(-50%) scale(var(--motion-press)); }
.molde .mo-rail > .mo-arrow[data-state="disabled"] { pointer-events: none; }
.molde .mo-rail[data-static] > .mo-arrow { display: none; }
.molde [data-device="mobile"] .mo-rail > .mo-arrow, .molde .mo-rail[data-device="mobile"] > .mo-arrow { display: none; }
.molde .mo-rail > .mo-tr { scroll-behavior: smooth; }
/* rows that reserve hover room below (96px) keep their arrows centered on the cards, not on the room */
.molde .mo-rail:has(> .mo-tr > .mo-card[data-style="a"], > .mo-tr > .mo-card[data-style="c"]) > .mo-arrow { top: calc(50% - 48px); }
/* content rows (guides, testimonials): fixed grid on desktop, swiped on mobile with the next one peeking */
.molde .mo-tr.is-content-row { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-4); }
.molde [data-device="mobile"] .mo-tr.is-content-row { grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.molde [data-device="mobile"] .mo-tr.is-content-row > * { scroll-snap-align: start; min-width: 0; }

/* ---------- Carousel Product ---------- */
.molde .mo-cprod[data-style="b"] { gap: var(--space-8); align-items: center; background: var(--bg-surface); }
.molde .mo-cprod[data-style="b"] .mo-sh { flex-direction: column; gap: var(--space-2); text-align: center; }
.molde .mo-cprod[data-style="b"] .mo-sh span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-brand); }
.molde .mo-cprod[data-style="b"] .mo-sh h2 { font-size: var(--type-heading-xl); line-height: 1.2; }
.molde .mo-cprod .mo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
.molde .mo-cprod .mo-dbody { display: flex; gap: var(--space-6); }
.molde .mo-cprod .mo-feat-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 400px; flex: none; padding: var(--space-4); background: var(--bg-surface); border: 2px solid var(--border-brand); border-radius: var(--radius-card); }
.molde .mo-cprod .mo-feat-card .mo-fimg { width: 100%; height: 300px; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-field); color: var(--border-strong); }
.molde .mo-cprod .mo-feat-card .mo-fimg .mo-icon { font-size: 96px; }
.molde .mo-cprod .mo-feat-card small { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-cprod .mo-feat-card b { font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-cprod .mo-feat-card .mo-inst { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--commerce-installments); }
.molde .mo-cprod .mo-feat-card .mo-btn { width: 100%; }
.molde .mo-cprod .mo-dlist { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.molde .mo-cprod .mo-dlist .mo-bundle { width: auto; }
/* phone: one deal per row, so each horizontal card keeps a proportioned thumbnail */
.molde .mo-cprod[data-device="mobile"] .mo-dlist { grid-template-columns: 1fr; }

/* ---------- Carousel Categories ---------- */
.molde .mo-ccats { gap: 20px; padding-block: 40px; }
.molde .mo-ccats .mo-tr { display: flex; align-items: center; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.molde .mo-ccats .mo-tr > * { flex: none; }
.molde .mo-ccats[data-style="b"] { gap: 28px; padding-block: var(--space-16); background: var(--bg-surface); }
.molde .mo-ccats[data-style="b"] .mo-sh h2 { font-size: var(--type-heading-xl); line-height: 1.2; }
.molde .mo-ccats[data-style="b"] .mo-tr > .mo-ccat { flex: 1; width: auto; min-width: 240px; }
.molde .mo-ccats[data-style="c"] { padding-block: var(--space-8); background: var(--bg-subtle); }

/* ---------- Benefits ---------- */
.molde .mo-bens { display: flex; justify-content: center; gap: var(--space-16); padding: var(--space-6) var(--layout-page-margin); background: var(--bg-surface); flex-wrap: wrap; }
.molde .mo-bens .mo-ben { display: flex; align-items: center; gap: 10px; }
.molde .mo-bens .mo-ben i { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--bg-accent); color: var(--text-on-accent); }
.molde .mo-bens .mo-ben .mo-icon { font-size: 22px; }
.molde .mo-bens .mo-ben b { display: block; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-bens .mo-ben small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-bens[data-style="b"] { justify-content: flex-start; gap: var(--space-12); padding-block: 56px; flex-wrap: nowrap; }
.molde .mo-bens[data-style="c"] { justify-content: flex-start; gap: var(--space-4); padding-block: var(--space-8); background: var(--bg-page); flex-wrap: nowrap; }
.molde .mo-bens[data-style="b"] .mo-feat, .molde .mo-bens[data-style="c"] .mo-feat { flex: 1; width: auto; min-width: 0; }
.molde .mo-bens[data-device="mobile"] { justify-content: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.molde .mo-bens[data-device="mobile"] .mo-ben { flex: none; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); background: var(--bg-subtle); border-radius: var(--radius-button); }
.molde .mo-bens[data-device="mobile"] .mo-ben i { width: 32px; height: 32px; }
.molde .mo-bens[data-device="mobile"] .mo-feat { flex: none; width: 260px; }

/* ---------- Carousel Financial Promos ---------- */
.molde .mo-cfin { gap: 20px; padding-block: 40px; }
.molde .mo-cfin .mo-tr { display: flex; align-items: stretch; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.molde .mo-cfin .mo-tr > * { flex: none; }
.molde .mo-cfin .mo-tr > .mo-arrow { align-self: center; }
.molde .mo-cfin[data-style="b"] { gap: var(--space-8); padding-block: var(--space-16); background: var(--bg-subtle); }
.molde .mo-cfin[data-style="b"] .mo-sh { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.molde .mo-cfin[data-style="b"] .mo-sh span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-brand); }
.molde .mo-cfin[data-style="b"] .mo-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.molde .mo-cfin[data-style="b"] .mo-row3 .mo-fin { width: auto; }
.molde .mo-cfin[data-style="c"] { background: var(--bg-subtle); }
.molde .mo-cfin[data-style="c"] .mo-sh { gap: var(--space-6); }
.molde .mo-cfin[data-style="c"] .mo-sh h2 { flex: none; font-size: var(--type-heading-md); line-height: 1.3; }
.molde .mo-cfin[data-style="c"] .mo-chips { display: flex; gap: var(--space-2); flex: 1; }
.molde .mo-cfin[data-style="c"] .mo-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.molde .mo-cfin[data-style="c"] .mo-grid3 .mo-fin { width: auto; }

/* ---------- Carousel Reels ---------- */
.molde .mo-creels { gap: 20px; padding-block: 40px; background: var(--bg-surface); }
.molde .mo-creels .mo-sh { gap: var(--space-3); }
.molde .mo-creels .mo-sh > .mo-icon { font-size: 24px; color: var(--icon-default); }
.molde .mo-creels .mo-tr { display: flex; align-items: flex-start; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.molde .mo-creels .mo-tr > * { flex: none; }
.molde .mo-creels .mo-tr > .mo-arrow { align-self: center; }

/* ---------- Carousel Articles ---------- */
.molde .mo-carts .mo-sh { justify-content: space-between; }
.molde .mo-carts .mo-sh h2 { flex: none; }
.molde .mo-carts .mo-tr { display: flex; align-items: flex-start; gap: var(--space-4); }
.molde .mo-carts .mo-tr > .mo-arrow { align-self: center; }
.molde .mo-carts .mo-tr > .mo-article { flex: 1; width: auto; min-width: 0; }
.molde .mo-carts .mo-tr > .mo-arrow { flex: none; }
.molde .mo-carts[data-style="b"] { padding-block: var(--space-20, 80px); background: var(--bg-surface); }
.molde .mo-carts[data-style="b"] .mo-sh { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.molde .mo-carts[data-style="b"] .mo-sh h2 { font-size: var(--type-heading-xl); line-height: 1.2; }
.molde .mo-carts[data-style="c"] .mo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.molde .mo-carts[data-style="c"] .mo-grid2 .mo-article { width: auto; }

/* ---------- Testimonials ---------- */
.molde .mo-testi .mo-sh { justify-content: space-between; }
.molde .mo-testi .mo-sh h2 { flex: none; }
.molde .mo-testi .mo-tr { display: flex; align-items: center; gap: var(--space-4); }
.molde .mo-testi .mo-tcard { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); min-width: 0; }
.molde .mo-testi .mo-tcard > p { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-primary); }
.molde .mo-testi .mo-tauth { display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-testi .mo-tauth span { display: flex; flex-direction: column; }
.molde .mo-testi .mo-tauth b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-testi .mo-tauth small, .molde .mo-testi .mo-tprod small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-testi .mo-tprod { display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-testi .mo-tprod i { width: 36px; height: 36px; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-field); color: var(--border-strong); }
.molde .mo-testi .mo-tprod .mo-icon { font-size: 20px; }
.molde .mo-testi[data-style="b"] { align-items: center; gap: var(--space-6); padding-block: 96px; background: var(--bg-subtle); text-align: center; }
.molde .mo-testi[data-style="b"] blockquote { margin: 0; max-width: 880px; font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-testi[data-style="b"] .mo-who { display: flex; flex-direction: column; gap: 2px; }
.molde .mo-testi[data-style="b"] .mo-who b { font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-testi[data-style="b"] .mo-who small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
/* Editorial quotes: one at a time, centered, crossfading */
.molde .mo-testi[data-style="b"] { --mo-dot: var(--border-strong); --mo-dot-track: var(--border-default); --mo-dot-on: var(--action-primary); }
.molde .mo-testi[data-style="b"] .mo-tqs { display: grid; width: 100%; justify-items: center; touch-action: pan-y; }
.molde .mo-testi[data-style="b"] .mo-tq { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 100%; margin: 0; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--motion-slow) var(--ease-in-out), visibility 0s linear var(--motion-slow); }
.molde .mo-testi[data-style="b"] .mo-tq.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.molde .mo-testi[data-style="b"] blockquote { margin-inline: auto; }
.molde .mo-testi[data-style="b"] .mo-who { align-items: center; }
.molde .mo-testi .mo-tsum { width: 260px; flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: 20px; background: var(--bg-subtle); border-radius: var(--radius-card); }
.molde .mo-testi .mo-tsum > span { display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-testi .mo-tsum b { font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; color: var(--text-primary); }
.molde .mo-testi .mo-tsum small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-testi .mo-tsum .mo-badge { align-self: flex-start; }

/* ---------- Stats ---------- */
.molde .mo-stats { gap: var(--space-8); padding-block: var(--space-16); }
.molde .mo-stats .mo-sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.molde .mo-stats .mo-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; text-align: center; }
.molde .mo-stats .mo-stat > .mo-icon { font-size: 28px; color: var(--icon-brand); }
.molde .mo-stats .mo-stat b { display: block; font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-stats .mo-stat small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-stats > h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-stats[data-style="b"] { background: var(--bg-surface); }
.molde .mo-stats[data-style="b"] > h2 { font-size: var(--type-heading-xl); line-height: 1.2; }
.molde .mo-stats[data-style="b"] .mo-sgrid { grid-template-columns: repeat(3, 1fr); gap: 0; }
.molde .mo-stats[data-style="b"] .mo-stat { align-items: flex-start; gap: var(--space-1); padding: 0; text-align: left; }
.molde .mo-stats[data-style="b"] .mo-stat + .mo-stat { padding-left: var(--space-8); border-left: 1px solid var(--border-default); }
.molde .mo-stats[data-style="b"] .mo-stat b { font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.molde .mo-stats[data-style="b"] .mo-stat small { font-size: var(--type-body-lg); line-height: 1.5; }
.molde .mo-stats[data-style="c"] .mo-stat { flex-direction: row; gap: var(--space-3); padding: 20px; background: var(--bg-subtle); border-radius: var(--radius-card); text-align: left; }
.molde .mo-stats[data-style="c"] .mo-stat > i { width: 48px; height: 48px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--bg-brand); color: var(--icon-on-brand); }
.molde .mo-stats[data-style="c"] .mo-stat > i .mo-icon { font-size: 24px; }
.molde [data-device="mobile"].mo-stats .mo-sgrid { grid-template-columns: 1fr 1fr; }
.molde [data-device="mobile"].mo-stats[data-style="b"] .mo-sgrid { grid-template-columns: 1fr; gap: var(--space-4); }
.molde [data-device="mobile"].mo-stats[data-style="b"] .mo-stat + .mo-stat { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--border-default); }
.molde [data-device="mobile"] .mo-cfin .mo-row3, .molde [data-device="mobile"].mo-cfin .mo-row3, .molde [data-device="mobile"].mo-cfin .mo-grid3, .molde [data-device="mobile"].mo-carts .mo-grid2 { grid-template-columns: 1fr; }

/* ---------- Grid Banners ---------- */
.molde .mo-gban { display: grid; gap: var(--space-4); padding: var(--space-8) var(--layout-page-margin); background: var(--bg-page); grid-template-columns: 1fr; grid-auto-rows: 280px; }
.molde .mo-gban[data-layout="1-2"], .molde .mo-gban[data-layout="2-1"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 192px; }
.molde .mo-gban[data-layout="1-2"] .mo-bn:first-child { grid-row: span 2; }
.molde .mo-gban[data-layout="2-1"] .mo-bn:last-child { grid-column: 2; grid-row: 1 / span 2; }
.molde .mo-gban[data-layout="3-columns"] { grid-template-columns: repeat(3, 1fr); }
.molde .mo-gban[data-layout="2-columns"] { grid-template-columns: 1fr 1fr; }
.molde .mo-gban[data-layout="wide-narrow"] { grid-template-columns: 2fr 1fr; }
.molde .mo-gban[data-layout="narrow-wide"] { grid-template-columns: 1fr 2fr; }
.molde .mo-bn { position: relative; display: grid; align-items: center; justify-items: end; padding: var(--space-6); background: var(--bg-subtle); border-radius: var(--radius-card); overflow: hidden; color: var(--border-strong); }
.molde .mo-bn > .mo-icon { font-size: 84px; }
.molde .mo-bn .mo-bt { position: absolute; left: var(--space-6); top: var(--space-6); display: flex; flex-direction: column; gap: 2px; }
.molde .mo-bn .mo-bt b { font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-bn .mo-bt small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-bn .mo-btn { position: absolute; right: var(--space-6); bottom: var(--space-5, 20px); background: var(--bg-surface); border: 0; }
/* Mobile follows each Figma mobile variant (16px margins, 12px gaps) */
.molde .mo-gban[data-device="mobile"] { gap: var(--space-3); padding: var(--space-4); grid-template-columns: 1fr; grid-auto-rows: 200px; }
.molde .mo-gban[data-device="mobile"] .mo-bn { grid-row: auto; grid-column: auto; padding: var(--space-4); }
.molde .mo-gban[data-device="mobile"] .mo-bn > .mo-icon { font-size: 54px; }
.molde .mo-gban[data-device="mobile"] .mo-bn .mo-bt { left: var(--space-4); top: var(--space-4); }
.molde .mo-gban[data-device="mobile"] .mo-bn .mo-btn { right: var(--space-4); bottom: var(--space-4); }
/* Mobile banners (Figma: Copy block + Text scrim): copy has a fixed width and clamps, a light scrim keeps dark text readable over photos */
.molde .mo-bn .mo-bscrim { display: none; }
.molde .mo-gban[data-device="mobile"] .mo-bn { container-type: inline-size; }
.molde .mo-gban[data-device="mobile"] .mo-bn .mo-bscrim { display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .88) 0%, rgb(255 255 255 / .45) 50%, rgb(255 255 255 / 0) 75%); pointer-events: none; }
.molde .mo-gban[data-device="mobile"] .mo-bn .mo-bt, .molde .mo-gban[data-device="mobile"] .mo-bn .mo-btn { z-index: 1; }
.molde .mo-gban[data-device="mobile"] .mo-bn .mo-bt { width: 60%; }
.molde .mo-gban[data-device="mobile"] .mo-bn .mo-bt > * { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@container (max-width: 200px) {
  .molde .mo-gban[data-device="mobile"] .mo-bn .mo-bscrim { background: linear-gradient(180deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .55) 45%, rgb(255 255 255 / 0) 75%); }
  .molde .mo-gban[data-device="mobile"] .mo-bn .mo-bt { width: calc(100% - 2 * var(--space-4)); }
  .molde .mo-gban[data-device="mobile"] .mo-bn .mo-bt small { -webkit-line-clamp: 1; line-clamp: 1; }
}
.molde .mo-gban[data-device="mobile"][data-layout="2-columns"] { grid-template-columns: 1fr 1fr; }
.molde .mo-gban[data-device="mobile"][data-layout="3-columns"] { display: flex; overflow-x: auto; scrollbar-width: none; }
.molde .mo-gban[data-device="mobile"][data-layout="3-columns"] .mo-bn { flex: none; width: 260px; height: 200px; }
.molde .mo-gban[data-device="mobile"][data-layout="1-2"], .molde .mo-gban[data-device="mobile"][data-layout="2-1"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
.molde .mo-gban[data-device="mobile"][data-layout="1-2"] .mo-bn:first-child { grid-column: 1 / -1; grid-row: auto; height: 220px; }
.molde .mo-gban[data-device="mobile"][data-layout="1-2"] { grid-template-rows: 220px 140px; }
.molde .mo-gban[data-device="mobile"][data-layout="2-1"] .mo-bn:last-child { grid-column: 1 / -1; grid-row: auto; }
.molde .mo-gban[data-device="mobile"][data-layout="2-1"] { grid-template-rows: 140px 220px; }
.molde .mo-gban[data-device="mobile"][data-layout="wide-narrow"] { grid-template-columns: 1fr; grid-template-rows: 180px 140px; }
.molde .mo-gban[data-device="mobile"][data-layout="narrow-wide"] { grid-template-columns: 1fr; grid-template-rows: 140px 180px; }

/* ---------- Carousel Promo / Banner / Flash Sale / Brands ---------- */
.molde .mo-cpromo { flex-direction: row; align-items: center; gap: var(--space-6); padding-block: 40px; }
.molde .mo-cpromo .mo-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 264px; flex: none; }
.molde .mo-cpromo .mo-panel h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-cpromo .mo-panel p { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-cpromo .mo-rail { flex: 1; min-width: 0; }
.molde .mo-cpromo .mo-rail .mo-tr { gap: var(--space-4); }
.molde .mo-cbanner { flex-direction: row; gap: var(--space-4); padding-block: var(--space-8); }
.molde .mo-cbanner[data-align="right"] { flex-direction: row-reverse; }
.molde .mo-cbanner .mo-bn { width: 400px; flex: none; min-height: 455px; }
.molde .mo-cbanner .mo-bn > .mo-icon { font-size: 120px; }
.molde .mo-cbanner .mo-bn .mo-bt { left: 20px; top: 20px; }
.molde .mo-cbanner .mo-bn .mo-bt b { font-size: var(--type-heading-lg); line-height: 1.25; }
.molde .mo-cbanner .mo-bn .mo-btn { left: 20px; right: auto; bottom: 20px; }
.molde .mo-cbanner .mo-cards { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.molde .mo-cbanner .mo-cards > * { flex: none; }
.molde .mo-cflash { gap: var(--space-4); padding-block: 40px; }
.molde .mo-cflash .mo-sh { gap: var(--space-4); }
.molde .mo-cflash .mo-sh h2 { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.molde .mo-cflash .mo-sh h2 .mo-icon { font-size: 28px; color: var(--icon-accent); }
.molde .mo-cflash .mo-tr { display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.molde .mo-cflash .mo-tr > * { flex: none; }
.molde .mo-cbrands { gap: 20px; padding-block: 40px; }
.molde .mo-cbrands .mo-tr { display: flex; align-items: center; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.molde .mo-cbrands .mo-tr > * { flex: none; }
.molde .mo-btile { width: 148px; height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); color: var(--text-primary); text-decoration: none; }
.molde .mo-btile small { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde [data-device="mobile"].mo-cpromo, .molde [data-device="mobile"].mo-cbanner { flex-direction: column; align-items: stretch; }
.molde [data-device="mobile"].mo-cpromo .mo-panel, .molde [data-device="mobile"].mo-cbanner .mo-bn { width: 100%; }
.molde [data-device="mobile"].mo-cbanner .mo-bn { min-height: 240px; }

/* ---------- Filters ---------- */
.molde .mo-filters { display: flex; flex-direction: column; width: 280px; }
.molde .mo-filters .mo-fhd { display: flex; align-items: center; gap: var(--space-2); padding: 14px var(--space-4); border-bottom: 1px solid var(--border-default); }
.molde .mo-filters .mo-fhd b { flex: 1; font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-filters .mo-fq { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.molde .mo-filters .mo-facets { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4); }
.molde .mo-filters .mo-facets .mo-facet { width: 100%; }
.molde .mo-filters .mo-fapp { padding: var(--space-3) var(--space-4) 0; }
.molde .mo-filters[data-style="b"] { width: 100%; gap: var(--space-3); background: transparent; }
.molde .mo-filters .mo-fbar { display: flex; align-items: center; gap: 10px; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.molde .mo-filters .mo-dd { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) 14px; 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); background: var(--bg-surface); cursor: pointer; }
.molde .mo-filters .mo-dd .mo-icon { font-size: 18px; color: var(--icon-default); }
.molde .mo-filters .mo-dd.is-set { border-color: var(--border-brand); color: var(--text-brand); }
.molde .mo-filters .mo-dd.is-open { border: 2px solid var(--border-brand); }
.molde .mo-filters .mo-fbar small { margin-left: auto; font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-filters[data-style="b"] { position: relative; }
.molde .mo-filters button.mo-dd { appearance: none; margin: 0; }
.molde .mo-filters .mo-dd .mo-icon { transition: transform var(--motion-base) var(--ease-out); }
.molde .mo-filters .mo-dd.is-open .mo-icon { transform: rotate(180deg); }
.molde .mo-filters .mo-ddpanel[hidden] { display: none; }
.molde .mo-filters .mo-ddpanel { position: absolute; z-index: 20; transform-origin: top left; animation: mo-pop var(--motion-slow) var(--ease-out); }
.molde .mo-filters .mo-ddpanel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 342px; padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--elevation-5); }
.molde .mo-filters .mo-ddpanel .mo-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-filters .mo-ddpanel .mo-acts { display: flex; align-items: center; justify-content: space-between; }
.molde .mo-filters[data-device="mobile"] { width: 375px; }

/* ---------- PLP Toolbar ---------- */
.molde .mo-plpbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
.molde .mo-plpbar > b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); white-space: nowrap; }
.molde .mo-plpbar .mo-applied { flex: 1; }
.molde .mo-plpbar .mo-vt { display: flex; gap: var(--space-1); }
.molde .mo-plpbar .mo-sort { width: auto; }
.molde .mo-plpbar[data-device="mobile"] { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-surface); }
.molde .mo-plpbar[data-device="mobile"] .mo-macts { display: flex; gap: var(--space-2); }
.molde .mo-plpbar[data-device="mobile"] .mo-macts .mo-btn { flex: 1; }
.molde .mo-plpbar[data-device="mobile"] small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }

/* ---------- PDP Gallery ---------- */
.molde .mo-gal { display: flex; gap: var(--space-4); width: 696px; max-width: 100%; }
.molde .mo-gal .mo-thumbs { display: flex; flex-direction: column; gap: var(--space-3); }
.molde .mo-gal .mo-th { width: 80px; height: 80px; flex: none; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-field); color: var(--border-strong); }
.molde .mo-gal .mo-th .mo-icon { font-size: 24px; }
.molde .mo-gal .mo-th.is-on { box-shadow: inset 0 0 0 2px var(--border-brand); }
.molde .mo-gal .mo-th.is-more { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-gal .mo-gmain { position: relative; flex: 1; aspect-ratio: 1; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-card); overflow: hidden; color: var(--border-strong); }
.molde .mo-gal .mo-gmain > .mo-icon { font-size: 180px; }
.molde .mo-gal .mo-gmain > .mo-imgact { position: absolute; right: 18px; top: 18px; }
.molde .mo-gal .mo-gmain > .mo-imgact + .mo-imgact { top: 70px; }
.molde .mo-gal .mo-gmain > .mo-brandtab { position: absolute; left: 0; bottom: 0; }
.molde .mo-gal[data-style="b"] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); width: 728px; }
.molde .mo-gal[data-style="b"] .mo-gimg { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--bg-subtle); color: var(--border-strong); }
.molde .mo-gal[data-style="b"] .mo-gimg .mo-icon { font-size: 108px; }
.molde .mo-gal[data-style="c"] { flex-direction: column; gap: var(--space-3); width: 720px; }
.molde .mo-gal[data-style="c"] .mo-gmain { aspect-ratio: 4 / 3; border: 1px solid var(--border-default); flex: none; }
.molde .mo-gal[data-style="c"] .mo-gmain > .mo-icon { font-size: 162px; }
.molde .mo-gal[data-style="c"] .mo-thumbs { flex-direction: row; gap: var(--space-2); }
.molde .mo-gal .mo-gmain .mo-badges { position: absolute; left: var(--space-4); top: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.molde .mo-gal .mo-gmain .mo-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.molde .mo-gal .mo-gmain .mo-arrow.is-prev { left: var(--space-4); }
.molde .mo-gal .mo-gmain .mo-arrow.is-next { right: var(--space-4); }
.molde .mo-gal .mo-count { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: var(--space-1) 10px; border-radius: var(--radius-button); background: var(--bg-inverse); opacity: .85; color: var(--text-inverse); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); }
.molde .mo-gal[data-device="mobile"] { flex-direction: column; width: 375px; gap: 0; }
.molde .mo-gal[data-device="mobile"] .mo-gmain { border-radius: 0; }
.molde .mo-gal[data-device="mobile"] .mo-gmain > .mo-icon { font-size: 112px; }
.molde .mo-gal[data-device="mobile"] .mo-thumbs { display: none; }
.molde .mo-gal[data-device="mobile"] .mo-gdots { display: flex; justify-content: center; gap: 6px; padding: var(--space-3); }
.molde .mo-gal .mo-gdots { display: none; }
.molde .mo-gal .mo-gdots i { width: 8px; height: 8px; border-radius: 4px; background: var(--border-default); }
.molde .mo-gal .mo-gdots i:first-child { width: 20px; background: var(--action-primary); }
.molde .mo-gal[data-style="b"][data-device="mobile"] { display: flex; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
.molde .mo-gal[data-style="b"][data-device="mobile"] .mo-gimg { flex: 0 0 300px; }

/* ---------- PDP Buy Box ---------- */
.molde .mo-buybox { display: flex; flex-direction: column; gap: 20px; width: 480px; max-width: 100%; }
.molde .mo-buybox .mo-bh { display: flex; flex-direction: column; gap: 6px; }
.molde .mo-buybox .mo-bh small { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-buybox .mo-bh h1 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-buybox .mo-pblock, .molde .mo-buybox .mo-variant, .molde .mo-buybox .mo-ship, .molde .mo-buybox .mo-urg, .molde .mo-buybox .mo-best, .molde .mo-buybox .mo-qb, .molde .mo-buybox .mo-coupon, .molde .mo-buybox .mo-flashpdp { width: 100%; }
.molde .mo-buybox .mo-bacts { display: flex; align-items: center; gap: var(--space-3); }
.molde .mo-buybox .mo-bacts .mo-btn { flex: 1; min-width: 0; }
/* the CTA adapts to the room it has (brand typefaces can be wider than Inter): tighter padding first,
   then the icon goes, so stepper + CTA + wishlist always fit on one row */
.molde .mo-buybox .mo-bacts { container-type: inline-size; }
.molde .mo-buybox .mo-bacts .mo-btn > span:not(.mo-icon) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 360px) { .molde .mo-buybox .mo-bacts .mo-btn { padding-inline: var(--space-4); } }
@container (max-width: 320px) { .molde .mo-buybox .mo-bacts .mo-btn > .mo-icon { display: none; } }
.molde .mo-buybox .mo-bens2 { display: flex; flex-direction: column; gap: var(--space-2); }
.molde .mo-buybox .mo-bens2 span { display: flex; align-items: center; gap: var(--space-2); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-buybox .mo-bens2 .mo-icon { font-size: 18px; color: var(--icon-brand); }
.molde .mo-buybox[data-style="b"] { gap: var(--space-6); }
.molde .mo-buybox[data-style="b"] .mo-bh { gap: var(--space-2); }
.molde .mo-buybox[data-style="b"] .mo-bh h1 { font-size: var(--type-heading-xl); line-height: 1.2; }
.molde .mo-buybox[data-style="b"] .mo-bh > span:last-child { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-buybox .mo-bgrp { display: flex; flex-direction: column; gap: 10px; }
.molde .mo-buybox .mo-bgrp > b, .molde .mo-buybox .mo-bgrp .mo-gh b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-buybox .mo-bgrp .mo-gh { display: flex; justify-content: space-between; align-items: center; }
.molde .mo-buybox .mo-bgrp .mo-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-buybox[data-style="b"] > .mo-btn { width: 100%; }
.molde .mo-buybox .mo-bacc .mo-acc { width: 100%; }
.molde .mo-buybox[data-style="c"] { background: var(--bg-surface); gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-buybox .mo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.molde .mo-buybox .mo-proof { display: flex; align-items: center; gap: var(--space-2); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-buybox .mo-banks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-brand); }
.molde .mo-buybox .mo-bbtns { display: flex; flex-direction: column; gap: var(--space-2); }
.molde .mo-buybox .mo-bbtns .mo-btn { width: 100%; }
.molde .mo-buybox .mo-seller { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--bg-subtle); border-radius: var(--radius-field); }
.molde .mo-buybox .mo-seller > .mo-icon { font-size: 24px; color: var(--icon-brand); }
.molde .mo-buybox .mo-seller span { display: flex; flex-direction: column; gap: 2px; }
.molde .mo-buybox .mo-seller b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-buybox .mo-seller small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-buybox[data-device="mobile"] { width: 375px; padding-inline: var(--space-4); }
.molde .mo-buybox[data-style="c"][data-device="mobile"] { padding: var(--space-4); border: 0; border-radius: 0; }

/* ---------- Reviews ---------- */
.molde .mo-reviews { display: flex; gap: var(--space-16); padding: 40px 0; }
.molde .mo-reviews .mo-rsum { display: flex; flex-direction: column; gap: var(--space-3); width: 320px; flex: none; }
.molde .mo-reviews .mo-rsum h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-reviews .mo-score { display: flex; align-items: center; gap: var(--space-3); }
.molde .mo-reviews .mo-score > b { font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; color: var(--text-primary); }
.molde .mo-reviews .mo-score > span { display: flex; flex-direction: column; gap: var(--space-1); }
.molde .mo-reviews .mo-score small, .molde .mo-reviews .mo-bar small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-reviews .mo-bar { display: flex; align-items: center; gap: var(--space-2); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-reviews .mo-bar .mo-icon { font-size: 14px; color: var(--feedback-warning); }
.molde .mo-reviews .mo-bar > span:not(.mo-icon) { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-subtle); overflow: hidden; }
.molde .mo-reviews .mo-bar > span i { display: block; height: 100%; border-radius: 3px; background: var(--feedback-warning); }
.molde .mo-reviews .mo-bar small { width: 16px; text-align: right; }
.molde .mo-reviews .mo-rsum .mo-btn { align-self: flex-start; }
.molde .mo-reviews .mo-rlist { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.molde .mo-reviews .mo-rlist .mo-review { width: 100%; }
.molde .mo-reviews .mo-rlist > .mo-link { margin-top: var(--space-4); }
.molde .mo-reviews[data-device="mobile"] { flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-4); }
.molde .mo-reviews[data-device="mobile"] .mo-rsum { width: 100%; }

/* ---------- Product Details ---------- */
.molde .mo-pdetails { display: flex; flex-direction: column; gap: var(--space-4); }
.molde .mo-pdetails .mo-tabs { width: 100%; }
.molde .mo-pdetails .mo-panel { display: flex; flex-direction: column; gap: 14px; padding-top: var(--space-4); }
.molde .mo-pdetails .mo-panel p { margin: 0; font: 400 var(--type-body-lg)/1.5 var(--font-body); color: var(--text-primary); }
.molde .mo-pdetails .mo-bul { display: flex; align-items: center; gap: var(--space-2); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-primary); }
.molde .mo-pdetails .mo-bul .mo-icon { font-size: 18px; color: var(--icon-brand); }
.molde .mo-pdetails table { width: 100%; border-collapse: collapse; font: 400 var(--type-body-md)/1.45 var(--font-body); }
.molde .mo-pdetails td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.molde .mo-pdetails td:first-child { width: 240px; color: var(--text-secondary); background: var(--bg-subtle); }
.molde .mo-pdetails[data-style="b"] { gap: 0; }
.molde .mo-pdetails[data-style="b"] .mo-acc { width: 100%; }
.molde .mo-pdetails[data-style="b"] .mo-panel { padding: var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-default); }

/* ---------- Shop The Look ---------- */
.molde .mo-stl { gap: var(--space-8); padding-block: 56px; }
.molde .mo-stl .mo-shd { display: flex; flex-direction: column; gap: 6px; }
.molde .mo-stl .mo-shd span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-brand); }
.molde .mo-stl .mo-shd h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-stl .mo-srow { display: flex; align-items: center; gap: var(--space-12); }
.molde .mo-stl .mo-limg2 { position: relative; display: grid; place-items: center; width: 560px; height: 680px; flex: none; background: var(--bg-subtle); border-radius: var(--radius-card); color: var(--border-strong); overflow: hidden; }
.molde .mo-stl .mo-limg2 > .mo-icon { font-size: 196px; }
.molde .mo-stl .mo-side { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.molde .mo-stl .mo-side > b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-stl .mo-side .mo-list { display: flex; flex-direction: column; gap: 10px; }
.molde .mo-stl .mo-side .mo-cps, .molde .mo-stl .mo-side .mo-btn { width: 100%; }
.molde .mo-stl[data-style="b"] { background: var(--bg-surface); }
.molde .mo-stl[data-style="b"] .mo-limg2 { width: 100%; height: 720px; }
.molde .mo-stl[data-style="b"] .mo-limg2 > .mo-icon { font-size: 252px; }
.molde .mo-stl[data-style="b"] .mo-hotspot, .molde .mo-stl[data-style="b"] .mo-limg2 > .mo-cps { position: absolute; }
/* hotspot left/top are the product's center on the photo */
.molde .mo-stl[data-style="b"] .mo-limg2 > .mo-hotspot { transform: translate(-50%, -50%); z-index: 1; }
.molde .mo-stl[data-style="b"] .mo-limg2 > .mo-lcard { z-index: 2; width: 240px; box-shadow: var(--elevation-3); }
.molde .mo-stl[data-style="b"] .mo-limg2 > .mo-lcard[hidden] { display: none; }
.molde [data-device="mobile"].mo-stl[data-style="b"] .mo-limg2 > .mo-lcard { width: auto; }
.molde .mo-stl[data-style="c"] { gap: var(--space-4); padding-block: var(--space-12); }
.molde .mo-stl[data-style="c"] .mo-ltr { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.molde .mo-stl[data-style="c"] .mo-ltr .mo-look { width: auto; }
.molde .mo-stl[data-style="c"] .mo-ltr > .mo-arrow { position: absolute; top: 238px; z-index: 3; }
.molde .mo-stl[data-style="c"] .mo-ltr > .mo-arrow.is-prev { left: -22px; }
.molde .mo-stl[data-style="c"] .mo-ltr > .mo-arrow.is-next { right: -22px; }
.molde [data-device="mobile"].mo-stl .mo-srow { flex-direction: column; align-items: stretch; gap: var(--space-6); }
.molde [data-device="mobile"].mo-stl .mo-limg2 { width: 100%; height: 420px; }
.molde [data-device="mobile"].mo-stl[data-style="c"] .mo-ltr { grid-template-columns: 1fr; }

/* ---------- Look Product List ---------- */
.molde .mo-lpl { display: flex; flex-direction: column; gap: var(--space-6); width: 560px; max-width: 100%; }
.molde .mo-lpl .mo-lh { display: flex; flex-direction: column; gap: var(--space-1); }
.molde .mo-lpl .mo-lh small { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-lpl .mo-lh h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-lpl .mo-lh span { font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-lpl .mo-items { display: flex; flex-direction: column; gap: var(--space-2); }
.molde .mo-lpl .mo-items .mo-cps { width: 100%; }
.molde .mo-lpl .mo-it { display: flex; align-items: center; gap: var(--space-3); }
.molde .mo-lpl .mo-it .mo-cps { flex: 1; width: auto; }
.molde .mo-lpl .mo-it > b { font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); color: var(--text-secondary); }
.molde .mo-lpl .mo-tot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-lpl .mo-la { display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-lpl .mo-la .mo-btn { flex: 1; }
.molde .mo-lpl .mo-share { display: flex; align-items: center; gap: var(--space-3); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-lpl .mo-share .mo-icon { font-size: 20px; color: var(--icon-secondary); }
.molde .mo-lpl[data-style="b"] { gap: var(--space-8); }
.molde .mo-lpl[data-style="b"] .mo-lh { gap: var(--space-3); }
.molde .mo-lpl[data-style="b"] .mo-lh h2 { font-size: var(--type-heading-xl); line-height: 1.2; }
.molde .mo-lpl[data-style="b"] .mo-lh span { font-size: var(--type-body-lg); line-height: 1.5; }
.molde .mo-lpl[data-style="b"] .mo-items { gap: var(--space-4); }
.molde .mo-lpl[data-style="b"] > .mo-btn { width: 100%; }
.molde .mo-lpl .mo-lsum { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--bg-subtle); border-radius: var(--radius-card); }
.molde .mo-lpl .mo-lsum .mo-tot { width: 100%; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-lpl .mo-lsum .mo-la { width: 100%; }
.molde .mo-lpl .mo-ltitle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.molde .mo-lpl .mo-ltitle h2 { font-size: var(--type-heading-md); line-height: 1.3; }

/* ---------- Bundle ---------- */
.molde .mo-bund { display: flex; flex-direction: column; gap: var(--space-6); }
.molde .mo-bund .mo-bh2 { display: flex; flex-direction: column; gap: var(--space-1); }
.molde .mo-bund .mo-bh2 h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-bund .mo-bh2 span { font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-bund .mo-brow { display: flex; align-items: center; gap: var(--space-4); }
.molde .mo-bund .mo-brow > .mo-icon { font-size: 24px; color: var(--icon-secondary); }
.molde .mo-bund .mo-brow > .mo-bundle { flex: 1; width: auto; }
.molde .mo-bund .mo-bsum { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 320px; flex: none; align-self: stretch; justify-content: center; padding: var(--space-4); background: var(--bg-subtle); border-radius: var(--radius-card); }
.molde .mo-bund .mo-bsum > small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-bund .mo-bsum .mo-btn { width: 100%; }
.molde .mo-bund .mo-line { display: flex; justify-content: space-between; width: 100%; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-bund .mo-line b { font-weight: 400; color: var(--text-primary); }
.molde .mo-bund .mo-line b.is-disc { color: var(--commerce-discount); }
.molde .mo-bund .mo-line.is-total { align-items: center; font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-bund .mo-line.is-total b { font: var(--font-heading-weight) var(--type-price-lg)/1.2 var(--font-heading); color: var(--commerce-price); }
.molde .mo-bund[data-style="b"] .mo-brow { gap: var(--space-16); align-items: flex-start; }
.molde .mo-bund .mo-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 400px; flex: none; }
.molde .mo-bund .mo-intro h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-bund .mo-intro p { margin: 0; font: 400 var(--type-body-lg)/1.5 var(--font-body); color: var(--text-secondary); }
.molde .mo-bund .mo-bitems { flex: 1; display: flex; align-items: center; gap: var(--space-6); }
.molde .mo-bund .mo-bitems > .mo-icon { font-size: 24px; color: var(--icon-secondary); }
.molde .mo-bund .mo-bitems > .mo-bundle { flex: 1; width: auto; }
.molde .mo-bund[data-style="c"] .mo-bh2 { flex-direction: row; align-items: center; gap: var(--space-3); }
.molde .mo-bund[data-style="c"] .mo-bh2 h2 { font-size: var(--type-heading-md); line-height: 1.3; }
.molde .mo-bund[data-style="c"] .mo-bitems { gap: var(--space-2); }
.molde [data-device="mobile"].mo-bund .mo-brow, .molde [data-device="mobile"].mo-bund .mo-bitems { flex-direction: column; align-items: stretch; }
.molde [data-device="mobile"].mo-bund .mo-bsum, .molde [data-device="mobile"].mo-bund .mo-intro { width: 100%; }

/* ---------- Modals (shared shell) ---------- */
.molde .mo-modal { display: flex; flex-direction: column; width: 640px; max-width: 100%; background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--elevation-5); overflow: hidden; }
.molde .mo-modal .mo-mh { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) 20px; border-bottom: 1px solid var(--border-default); }
.molde .mo-modal .mo-mh b { flex: 1; font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-modal .mo-mh .mo-icon { font-size: 22px; color: var(--icon-default); cursor: pointer; }
.molde .mo-modal .mo-mb { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 20px; }
.molde .mo-modal[data-device="mobile"] { width: 375px; border-radius: var(--radius-card) var(--radius-card) 0 0; }

/* ---------- Modal Cart ---------- */
.molde .mo-mcart { width: 420px; }
.molde .mo-mcart .mo-goalbar { padding: var(--space-4) 20px; background: var(--feedback-success-subtle); }
.molde .mo-mcart .mo-goalbar .mo-goal { width: 100%; }
.molde .mo-mcart .mo-mb { gap: 0; }
.molde .mo-mcart .mo-mb .mo-cartitem { width: 100%; }
.molde .mo-mcart .mo-mf { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4) 20px; border-top: 1px solid var(--border-default); }
.molde .mo-mcart .mo-mf .mo-btn { width: 100%; }
.molde .mo-sub2 { display: flex; align-items: center; justify-content: space-between; font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-sub2 b { font: var(--font-heading-weight) var(--type-price-lg)/1.2 var(--font-heading); color: var(--commerce-price); }
.molde .mo-instl { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--commerce-installments); }
.molde .mo-mcart[data-device="mobile"] { width: 375px; border-radius: 0; }

/* ---------- Cart Summary ---------- */
.molde .mo-csum { display: flex; flex-direction: column; gap: 14px; width: 400px; max-width: 100%; padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-csum > b { font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-csum .mo-goal { width: 100%; }
.molde .mo-csum .mo-crow { display: flex; justify-content: space-between; gap: var(--space-2); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-csum .mo-crow b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-csum .mo-crow b.is-free { color: var(--commerce-free-shipping); }
.molde .mo-csum .mo-crow b.is-disc { color: var(--commerce-discount); }
.molde .mo-csum .mo-hr { height: 1px; background: var(--border-default); }
.molde .mo-csum .mo-sub2 b { color: var(--text-primary); }
.molde .mo-csum > small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-csum .mo-cpn { display: flex; align-items: flex-end; gap: var(--space-2); }
.molde .mo-csum .mo-cpn .mo-field { flex: 1; width: auto; }
.molde .mo-csum > .mo-btn { width: 100%; }
.molde .mo-csum .mo-pays { display: flex; flex-wrap: wrap; gap: 6px; }
.molde .mo-csum .mo-secure { display: inline-flex; align-items: center; gap: 6px; font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-csum .mo-secure .mo-icon { font-size: 16px; color: var(--icon-secondary); }
.molde .mo-csum[data-device="mobile"] { width: 375px; border-radius: 0; border-inline: 0; padding: var(--space-4); }

/* ---------- Modal Calculator / Modal Size ---------- */
.molde .mo-tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; font: 400 var(--type-body-md)/1.45 var(--font-body); }
.molde .mo-tbl th { padding: 10px var(--space-3); background: var(--bg-subtle); text-align: left; font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-tbl td { padding: 10px var(--space-3); border-top: 1px solid var(--border-default); color: var(--text-primary); }
.molde .mo-tbl td.is-inst { color: var(--commerce-installments); font-weight: var(--font-label-weight); }
.molde .mo-calc .mo-price-l { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-calc .mo-sels { display: flex; gap: var(--space-3); }
.molde .mo-calc .mo-sels .mo-field { flex: 1; width: auto; }
.molde .mo-calc .mo-note2 { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-calc .mo-tabs, .molde .mo-msize .mo-tabs { width: 100%; }
.molde .mo-msize { width: 560px; }
.molde .mo-msize .mo-mb { gap: 14px; }
.molde .mo-msize table { width: 100%; border-collapse: collapse; font: 400 var(--type-body-md)/1.45 var(--font-body); text-align: center; }
.molde .mo-msize th { padding: 10px 0; background: var(--bg-subtle); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-primary); border-bottom: 1px solid var(--border-default); }
.molde .mo-msize td { padding: 10px 0; color: var(--text-primary); border-bottom: 1px solid var(--border-default); }
.molde .mo-msize tr.is-on td { background: var(--bg-accent); color: var(--text-on-accent); }
.molde .mo-msize .mo-tip2 { display: flex; gap: 10px; padding: var(--space-3); background: var(--bg-subtle); border-radius: var(--radius-field); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-msize .mo-tip2 .mo-icon { font-size: 20px; color: var(--icon-brand); }

/* ---------- FAQ ---------- */
.molde .mo-faq { display: flex; flex-direction: column; gap: 20px; width: 960px; max-width: 100%; padding: 40px 0; }
.molde .mo-faq > h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-faq .mo-search { width: 100%; }
.molde .mo-faq .mo-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-faq .mo-qs .mo-acc { width: 100%; }
.molde .mo-faq .mo-contact { display: flex; align-items: center; gap: var(--space-3); padding: 20px; background: var(--bg-subtle); border-radius: var(--radius-card); }
.molde .mo-faq .mo-contact > .mo-icon { font-size: 32px; color: var(--icon-brand); }
.molde .mo-faq .mo-contact span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.molde .mo-faq .mo-contact b { font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-faq .mo-contact small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-faq[data-device="mobile"] { width: 375px; padding: var(--space-6) var(--space-4); }
.molde .mo-faq[data-device="mobile"] .mo-contact { flex-direction: column; align-items: flex-start; }

/* ---------- Modal Search Results ---------- */
.molde .mo-msr { width: 1280px; }
.molde .mo-msr .mo-msb { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-default); }
.molde .mo-msr .mo-msb .mo-search { width: 100%; }
.molde .mo-msr .mo-mc { display: flex; }
.molde .mo-msr .mo-sugs { display: flex; flex-direction: column; gap: 10px; width: 320px; flex: none; padding: 20px var(--space-6); border-right: 1px solid var(--border-default); }
.molde .mo-msr .mo-sugs > span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-msr .mo-sugs a { 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); text-decoration: none; }
.molde .mo-msr .mo-sugs a .mo-icon { font-size: 16px; color: var(--icon-secondary); }
.molde .mo-msr .mo-sugs a.is-cat { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-brand); }
.molde .mo-msr .mo-prods { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: 20px var(--space-6); }
.molde .mo-msr .mo-prods > span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-msr .mo-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; }
.molde .mo-msr .mo-pgrid .mo-cps { width: auto; }
.molde .mo-msr[data-device="mobile"] { width: 375px; border-radius: 0; }
.molde .mo-msr[data-device="mobile"] .mo-mc { flex-direction: column; }
.molde .mo-msr[data-device="mobile"] .mo-sugs { width: 100%; border-right: 0; border-bottom: 1px solid var(--border-default); }
.molde .mo-msr[data-device="mobile"] .mo-pgrid { grid-template-columns: 1fr; }

/* ---------- Store Locator ---------- */
.molde .mo-locator { flex-direction: row; gap: var(--space-6); padding-block: 40px; }
.molde .mo-locator .mo-lp { display: flex; flex-direction: column; gap: var(--space-3); width: 420px; flex: none; padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-locator .mo-lp h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-locator .mo-lp .mo-search, .molde .mo-locator .mo-lp .mo-store { width: 100%; }
.molde .mo-locator .mo-map { position: relative; flex: 1; min-height: 560px; background: var(--bg-subtle); border-radius: var(--radius-card); }
.molde .mo-locator .mo-map small { position: absolute; left: var(--space-4); top: var(--space-4); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-locator .mo-map .mo-icon { position: absolute; font-size: 32px; color: var(--icon-secondary); }
.molde .mo-locator .mo-map .mo-icon.is-on { font-size: 40px; color: var(--action-primary); }
.molde [data-device="mobile"].mo-locator { flex-direction: column-reverse; }
.molde [data-device="mobile"].mo-locator .mo-lp { width: 100%; }
.molde [data-device="mobile"].mo-locator .mo-map { min-height: 240px; }

/* ---------- Empty State ---------- */
.molde .mo-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 420px; max-width: 100%; padding: var(--space-8) 0; text-align: center; }
.molde .mo-empty i { width: 80px; height: 80px; border-radius: 40px; display: grid; place-items: center; background: var(--bg-subtle); color: var(--icon-secondary); }
.molde .mo-empty i .mo-icon { font-size: 36px; }
.molde .mo-empty[data-type="error"] i { background: var(--feedback-error-subtle); color: var(--feedback-error); }
.molde .mo-empty b { font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-empty p { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }

/* ---------- Modal Subscription ---------- */
.molde .mo-msub { flex-direction: row; width: 740px; }
.molde .mo-msub .mo-msimg { width: 320px; flex: none; display: grid; place-items: center; background: var(--bg-accent); color: var(--text-on-accent); }
.molde .mo-msub .mo-msimg .mo-icon { font-size: 96px; }
.molde .mo-msub .mo-msc { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 40px var(--space-8); }
.molde .mo-msub .mo-msc > .mo-icon { align-self: flex-end; font-size: 22px; color: var(--icon-default); cursor: pointer; }
.molde .mo-msub .mo-msc h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-msub .mo-msc p { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-msub .mo-msc .mo-news { width: 100%; }
/* the consent line is fine print: same size as "No, gracias", secondary color */
.mo-msub .mo-msc .mo-check { font-size: var(--type-body-sm); color: var(--text-secondary); }
.molde .mo-msub .mo-msc .mo-news > b, .molde .mo-msub .mo-msc .mo-news > span:first-of-type { display: none; }
.molde .mo-msub[data-device="mobile"] { flex-direction: column; width: 375px; }
.molde .mo-msub[data-device="mobile"] .mo-msimg { width: 100%; height: 160px; }

/* ---------- Legal AR ---------- */
.molde .mo-legal { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4); background: var(--bg-subtle); }
.molde .mo-legal .mo-df { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-legal .mo-df .mo-datafiscal { width: 29px; height: 40px; }
.molde .mo-legal p { flex: 1; margin: 0; font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-legal[data-device="mobile"] { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

/* ---------- Shop By Size ---------- */
.molde .mo-sbs .mo-sbh { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.molde .mo-sbs .mo-sbh h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-sbs .mo-sbh p { margin: var(--space-1) 0 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-sbs .mo-tog, .molde .mo-sbs .mo-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-sbs .mo-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.molde .mo-sbs .mo-rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.molde .mo-sbs .mo-rh h3 { margin: 0; font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-sbs .mo-rh span { font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-sbs .mo-res { display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.molde .mo-sbs .mo-res > * { flex: none; }
.molde .mo-sbs > .mo-btn { align-self: flex-start; }
.molde .mo-sbs[data-style="b"] { align-items: center; gap: 40px; padding-block: 96px; background: var(--bg-surface); text-align: center; }
.molde .mo-sbs[data-style="b"] .mo-sbh { flex-direction: column; align-items: center; gap: var(--space-2); }
.molde .mo-sbs[data-style="b"] .mo-sbh h2 { font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.molde .mo-sbs .mo-utabs { display: flex; gap: var(--space-6); }
.molde .mo-sbs .mo-utabs a { display: flex; flex-direction: column; gap: 6px; font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-secondary); text-decoration: none; }
.molde .mo-sbs .mo-utabs a::after { content: ""; height: 2px; background: transparent; }
.molde .mo-sbs .mo-utabs a.is-on { color: var(--text-primary); }
.molde .mo-sbs .mo-utabs a.is-on::after { background: var(--action-primary); }
.molde .mo-sbs .mo-utabs.is-big { gap: var(--space-8); flex-wrap: wrap; justify-content: center; }
.molde .mo-sbs .mo-utabs.is-big a { font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); }
.molde .mo-sbs[data-style="b"] .mo-res { gap: var(--space-6); }
.molde .mo-sbs[data-style="c"] { background: var(--bg-subtle); }
.molde .mo-sbs .mo-top { display: flex; gap: var(--space-4); }
.molde .mo-sbs .mo-promo2 { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 10px; width: 300px; flex: none; padding: var(--space-6); background: var(--bg-accent); color: var(--text-on-accent); border-radius: var(--radius-card); }
.molde .mo-sbs .mo-promo2 small { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); }
.molde .mo-sbs .mo-promo2 b { display: block; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); }
.molde .mo-sbs .mo-promo2 span { font: 400 var(--type-body-sm)/1.4 var(--font-body); }
.molde .mo-sbs .mo-sel { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-sbs .mo-sel .mo-sbh h2 { font-size: var(--type-heading-md); line-height: 1.3; }
.molde .mo-sbs .mo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-sbs .mo-legend span { display: inline-flex; align-items: center; gap: 6px; }
.molde .mo-sbs .mo-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--commerce-discount); }
.molde .mo-sbs .mo-legend i.is-ok { background: var(--feedback-success); }
.molde .mo-sbs .mo-legend i.is-info { background: var(--feedback-info); }
.molde .mo-sbs .mo-rcol { display: flex; flex-direction: column; gap: var(--space-2); }
.molde [data-device="mobile"].mo-sbs .mo-top { flex-direction: column; }
.molde [data-device="mobile"].mo-sbs .mo-promo2 { width: 100%; }
.molde [data-device="mobile"].mo-sbs .mo-sbh { flex-direction: column; align-items: flex-start; }

/* ---------- Sticky Buy Bar ---------- */
.molde .mo-sticky { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--layout-page-margin); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); box-shadow: var(--elevation-3); }
.molde .mo-sticky .mo-sp { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.molde .mo-sticky .mo-sp i { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-card); color: var(--border-strong); }
.molde .mo-sticky .mo-sp i .mo-icon { font-size: 24px; }
.molde .mo-sticky .mo-sp > span { display: flex; flex-direction: column; gap: 2px; }
.molde .mo-sticky .mo-sp b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-sticky .mo-sp small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-sticky .mo-sa { display: flex; align-items: center; gap: var(--space-3); }
.molde .mo-sticky[data-style="b"] .mo-sp b { font-size: var(--type-label-lg); }
.molde .mo-sticky[data-device="mobile"] { padding: var(--space-3) var(--space-4); border-bottom: 0; border-top: 1px solid var(--border-default); box-shadow: var(--elevation-up-4); }
.molde .mo-sticky[data-device="mobile"] .mo-sp i, .molde .mo-sticky[data-device="mobile"] .mo-qty, .molde .mo-sticky[data-device="mobile"] .mo-sp .mo-badge { display: none; }
.molde .mo-sticky[data-device="mobile"] .mo-sa .mo-btn[data-h="secondary"] { display: none; }

/* ---------- Brand Header ---------- */
.molde .mo-bhdr { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--layout-page-margin) var(--space-12); background: var(--bg-page); }
.molde .mo-bhdr .mo-cover { position: relative; height: 220px; display: grid; place-items: center; background: var(--bg-brand); border-radius: var(--radius-card); color: var(--icon-on-brand); }
.molde .mo-bhdr .mo-cover .mo-icon { font-size: 64px; opacity: .5; }
.molde .mo-bhdr .mo-id { display: flex; align-items: center; gap: var(--space-6); padding-left: var(--space-8); }
.molde .mo-bhdr .mo-ltile { width: 120px; height: 120px; flex: none; display: grid; place-items: center; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); color: var(--text-primary); }
.molde .mo-bhdr .mo-inf { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.molde .mo-bhdr .mo-nm { display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-bhdr .mo-nm b { font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-bhdr .mo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-bhdr .mo-ba { display: flex; gap: var(--space-2); }
.molde .mo-bhdr .mo-perks { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 20px 0 0 var(--space-8); }
.molde .mo-bhdr[data-style="b"] { position: relative; height: 640px; padding: 0; background: var(--bg-subtle); color: var(--border-strong); display: grid; place-items: center; }
.molde .mo-bhdr[data-style="b"] > .mo-icon { font-size: 140px; }
.molde .mo-bhdr[data-style="b"]::after { content: ""; position: absolute; inset: 0; background: var(--bg-inverse); opacity: .35; }
.molde .mo-bhdr .mo-cap { position: absolute; left: var(--layout-page-margin); bottom: 64px; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; color: var(--text-inverse); }
.molde .mo-bhdr .mo-cap small { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); }
.molde .mo-bhdr .mo-cap b { font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.molde .mo-bhdr .mo-cap p { margin: 0; font: 400 var(--type-body-lg)/1.5 var(--font-body); }
.molde .mo-bhdr .mo-cap a { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: inherit; text-decoration: none; }
.molde .mo-bhdr[data-style="c"] { gap: 0; padding: 0; }
.molde .mo-bhdr .mo-band { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--layout-page-margin); background: var(--bg-brand); color: var(--text-on-brand); }
.molde .mo-bhdr .mo-band .mo-ltile { width: 72px; height: 72px; border: 0; }
.molde .mo-bhdr .mo-band .mo-inf b { font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); }
.molde .mo-bhdr .mo-band .mo-meta { color: var(--text-on-brand); }
.molde .mo-bhdr .mo-band .mo-btn { background: var(--bg-surface); }
.molde .mo-bhdr .mo-snav { display: flex; align-items: center; gap: 28px; padding: 14px var(--layout-page-margin); border-bottom: 1px solid var(--border-default); }
.molde .mo-bhdr .mo-snav a { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); text-decoration: none; }
.molde .mo-bhdr .mo-snav a.is-on { color: var(--text-brand); }
.molde .mo-bhdr .mo-snav .mo-prs { margin-left: auto; display: flex; gap: var(--space-2); }
.molde [data-device="mobile"].mo-bhdr .mo-id, .molde [data-device="mobile"].mo-bhdr .mo-band { flex-direction: column; align-items: flex-start; padding-left: 0; }
.molde [data-device="mobile"].mo-bhdr .mo-perks { padding-left: 0; }
.molde [data-device="mobile"].mo-bhdr .mo-band { padding: var(--space-4); }
.molde [data-device="mobile"].mo-bhdr .mo-snav { overflow-x: auto; }
.molde [data-device="mobile"].mo-bhdr[data-style="b"] { height: 420px; }
.molde [data-device="mobile"].mo-bhdr .mo-cap { left: var(--space-4); right: var(--space-4); bottom: var(--space-8); }

/* ---------- Steps ---------- */
.molde .mo-steps { gap: var(--space-8); padding-block: var(--space-16); }
.molde .mo-steps > h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-steps .mo-sgr { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.molde .mo-steps .mo-st { display: flex; flex-direction: column; gap: var(--space-3); }
.molde .mo-steps .mo-mk { display: flex; align-items: center; }
.molde .mo-steps .mo-mk b { width: 40px; height: 40px; flex: none; border-radius: 20px; display: grid; place-items: center; background: var(--action-primary); color: var(--action-on-primary); font: var(--font-label-weight) var(--type-label-lg)/1 var(--font-body); }
.molde .mo-steps .mo-mk i { flex: 1; height: 2px; margin-left: var(--space-3); background: var(--border-default); }
.molde .mo-steps .mo-st > span { display: flex; flex-direction: column; gap: var(--space-1); }
.molde .mo-steps .mo-st strong { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-steps .mo-st strong .mo-icon { font-size: 20px; color: var(--icon-brand); }
.molde .mo-steps .mo-st small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde [data-device="mobile"].mo-steps .mo-sgr { grid-template-columns: 1fr; }
.molde [data-device="mobile"].mo-steps .mo-mk i { display: none; }

/* ---------- Comparison ---------- */
.molde .mo-comp { align-items: center; gap: var(--space-8); padding-block: var(--space-16); }
.molde .mo-comp > h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-comp table { width: 880px; max-width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; font: 400 var(--type-body-md)/1.45 var(--font-body); }
.molde .mo-comp th, .molde .mo-comp td { height: 48px; padding: 0 var(--space-4); text-align: center; color: var(--text-primary); }
.molde .mo-comp th { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-comp th:first-child, .molde .mo-comp td:first-child { text-align: left; width: 478px; }
.molde .mo-comp td { border-top: 1px solid var(--border-default); }
.molde .mo-comp .is-us { background: var(--bg-subtle); color: var(--text-brand); }
.molde .mo-comp td .mo-icon { font-size: 22px; }
.molde .mo-comp td.is-us .mo-icon { color: var(--feedback-success); }
.molde .mo-comp td:last-child .mo-icon { color: var(--icon-secondary); }

/* ---------- Form Regret / Order Tracking (centered card) ---------- */
.molde .mo-cardsec { align-items: center; padding-block: var(--space-12); }
.molde .mo-fcard { display: flex; flex-direction: column; gap: var(--space-4); width: 640px; max-width: 100%; padding: 28px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-fcard > h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-fcard > p { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-fcard > small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-fcard .mo-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.molde .mo-fcard .mo-field { width: 100%; }
.molde .mo-fcard > .mo-btn { width: 100%; }
.molde .mo-fcard.is-wide { width: 880px; }
.molde .mo-fcard .mo-oh { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.molde .mo-fcard .mo-oh b { display: block; font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-fcard .mo-oh small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-tl { display: flex; flex-direction: column; }
.molde .mo-tl .mo-ts { display: flex; gap: 14px; }
.molde .mo-tl .mo-ts > i { display: flex; flex-direction: column; align-items: center; width: 20px; flex: none; }
.molde .mo-tl .mo-ts > i::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--feedback-success); }
.molde .mo-tl .mo-ts > i::after { content: ""; flex: 1; width: 2px; background: var(--feedback-success); }
.molde .mo-tl .mo-ts.is-todo > i::before { background: var(--bg-surface); border: 2px solid var(--border-strong); width: 10px; height: 10px; }
.molde .mo-tl .mo-ts:last-child > i::after { display: none; }
.molde .mo-tl .mo-ts.is-now > i::after { background: var(--border-default); }
.molde .mo-tl .mo-ts > span { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-4); }
.molde .mo-tl .mo-ts b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-tl .mo-ts.is-todo b { color: var(--text-secondary); }
.molde .mo-tl .mo-ts small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-shipbox { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--bg-subtle); border-radius: var(--radius-field); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-shipbox .mo-icon { font-size: 20px; color: var(--icon-default); }
.molde .mo-fcard .mo-acts2 { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Order List / Order Detail ---------- */
.molde .mo-olist, .molde .mo-odet { display: flex; flex-direction: column; gap: 20px; width: 972px; max-width: 100%; }
.molde .mo-olist .mo-olh { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); }
.molde .mo-olist .mo-olh h2, .molde .mo-odet h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-ocard { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-ocard .mo-ot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.molde .mo-ocard .mo-ot b { display: block; font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-ocard small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-ocard .mo-ob { display: flex; align-items: center; gap: var(--space-3); }
.molde .mo-ocard .mo-ths { flex: 1; display: flex; gap: var(--space-2); }
.molde .mo-ocard .mo-ths i { width: 56px; height: 56px; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-field); color: var(--border-strong); }
.molde .mo-ocard .mo-ths .mo-icon { font-size: 28px; }
.molde .mo-ocard .mo-tot { display: flex; flex-direction: column; }
.molde .mo-ocard .mo-tot b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-ocard .mo-oa { display: flex; gap: var(--space-2); }
.molde .mo-odet .mo-odh { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.molde .mo-odet .mo-odh small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-oprog { display: flex; align-items: flex-start; }
.molde .mo-oprog .mo-op { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-primary); }
.molde .mo-oprog .mo-op::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--feedback-success); }
.molde .mo-oprog .mo-op.is-todo { color: var(--text-secondary); }
.molde .mo-oprog .mo-op.is-todo::before { width: 10px; height: 10px; background: var(--bg-surface); border: 2px solid var(--border-strong); }
.molde .mo-oprog > i { flex: 1; height: 2px; margin-top: 6px; background: var(--feedback-success); }
.molde .mo-oprog > i.is-todo { background: var(--border-default); }
.molde .mo-odet .mo-om { display: flex; gap: 20px; align-items: flex-start; }
.molde .mo-odet .mo-oitems { flex: 1; padding: var(--space-1) 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-odet .mo-oitems .mo-cartitem { width: 100%; }
.molde .mo-odet .mo-oitems .mo-cartitem:last-child { border-bottom: 0; }
.molde .mo-odet .mo-oaside { display: flex; flex-direction: column; gap: var(--space-4); width: 320px; flex: none; }
.molde .mo-odet .mo-obox { display: flex; flex-direction: column; gap: var(--space-2); padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-odet .mo-obox > b { font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-odet .mo-obox .mo-crow { display: flex; justify-content: space-between; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-odet .mo-obox .mo-crow b { font-weight: var(--font-label-weight); color: var(--text-primary); }
.molde .mo-odet .mo-obox small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-odet .mo-oacts { display: flex; flex-direction: column; gap: var(--space-2); }
.molde .mo-odet .mo-oacts .mo-btn { width: 100%; }
.molde [data-device="mobile"].mo-olist .mo-ob, .molde [data-device="mobile"].mo-odet .mo-om { flex-direction: column; align-items: stretch; }
.molde [data-device="mobile"].mo-odet .mo-oaside { width: 100%; }

/* ---------- Gift Card ---------- */
.molde .mo-gift { padding-block: var(--space-12); }
.molde .mo-gift .mo-gm { display: flex; gap: var(--space-16); align-items: flex-start; }
.molde .mo-gift .mo-gprev { display: flex; flex-direction: column; gap: var(--space-4); width: 520px; flex: none; }
.molde .mo-gift .mo-gcard { display: flex; flex-direction: column; justify-content: space-between; height: 320px; padding: var(--space-8); background: var(--bg-brand); color: var(--text-on-brand); border-radius: var(--radius-card); }
.molde .mo-gift .mo-gcard b { font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; }
.molde .mo-gift .mo-gcard small { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); opacity: .85; }
.molde .mo-gift .mo-designs { display: flex; gap: var(--space-2); }
.molde .mo-gift .mo-designs i { width: 56px; height: 36px; border-radius: 8px; background: var(--bg-brand); }
.molde .mo-gift .mo-designs i:nth-child(1) { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--border-brand); }
.molde .mo-gift .mo-designs i:nth-child(2) { background: var(--bg-accent); }
.molde .mo-gift .mo-designs i:nth-child(3) { background: var(--bg-inverse); }
.molde .mo-gift .mo-designs i:nth-child(4) { background: var(--bg-subtle); border: 1px solid var(--border-default); }
.molde .mo-gift .mo-gform { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.molde .mo-gift .mo-gform h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); letter-spacing: -0.01em; color: var(--text-primary); }
.molde .mo-gift .mo-gform p { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-gift .mo-gform > b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-gift .mo-gform .mo-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-gift .mo-gform .mo-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.molde .mo-gift .mo-gform .mo-field, .molde .mo-gift .mo-gform > .mo-btn { width: 100%; }
.molde [data-device="mobile"].mo-gift .mo-gm { flex-direction: column; gap: var(--space-6); }
.molde [data-device="mobile"].mo-gift .mo-gprev { width: 100%; }
.molde [data-device="mobile"].mo-gift .mo-gcard { height: 200px; }

/* ---------- Article ---------- */
.molde .mo-art2 { align-items: center; gap: var(--space-8); background: var(--bg-surface); }
.molde .mo-art2 .mo-ahd, .molde .mo-art2 .mo-abody { display: flex; flex-direction: column; gap: var(--space-3); width: 760px; max-width: 100%; }
.molde .mo-art2 .mo-ahd > small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-art2 .mo-ahd > span { font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-brand); }
.molde .mo-art2 .mo-ahd h1 { margin: 0; font: var(--font-heading-weight) var(--type-display)/1.05 var(--font-heading); letter-spacing: -0.02em; color: var(--text-primary); }
.molde .mo-art2 .mo-auth { display: flex; align-items: center; gap: 10px; font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-art2 .mo-ahero { width: 100%; height: 560px; display: grid; place-items: center; background: var(--bg-subtle); border-radius: var(--radius-card); color: var(--border-strong); }
.molde .mo-art2 .mo-ahero .mo-icon { font-size: 96px; }
.molde .mo-art2 .mo-abody { gap: var(--space-4); }
.molde .mo-art2 .mo-abody p { margin: 0; font: 400 var(--type-body-lg)/1.5 var(--font-body); color: var(--text-primary); }
.molde .mo-art2 .mo-abody h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-art2 .mo-tip { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--bg-subtle); border-radius: var(--radius-card); font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-primary); }
.molde .mo-art2 .mo-tip .mo-icon { font-size: 22px; color: var(--icon-brand); }
.molde .mo-art2 .mo-share { display: flex; align-items: center; gap: var(--space-3); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-art2 .mo-share .mo-icon { font-size: 20px; color: var(--icon-secondary); }
.molde [data-device="mobile"].mo-art2 .mo-ahero { height: 240px; }

/* ---------- Motion ----------
   Overlays enter from where they live: drawers slide from their side, modals and menus rise and
   fade, sticky bars drop in. Timing from the Motion tokens (per store style). */
@keyframes mo-slide-l { from { opacity: 0; transform: translateX(-24px); } }
@keyframes mo-drop { from { opacity: 0; transform: translateY(-100%); } }
@keyframes mo-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.molde .mo-drawer { animation: mo-slide-l var(--motion-slow) var(--ease-out); }
.molde .mo-modal { animation: mo-modal-in var(--motion-slow) var(--ease-out); }
.molde .mo-mega { animation: mo-pop var(--motion-slow) var(--ease-out); }
.molde .mo-sticky { animation: mo-drop var(--motion-slow) var(--ease-out); }
.molde .mo-nav a, .molde .mo-footer a, .molde .mo-mega a, .molde .mo-drawer a { transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .molde .mo-drawer, .molde .mo-modal, .molde .mo-mega, .molde .mo-sticky { animation-name: mo-fade; }
}
.molde .mo-footer .mo-partner.mo-partner-store .mo-logo .mo-art { width: auto !important; height: 22px !important; }
/* Editorial shelf on mobile: 2x2 grid like Figma (8px columns, 20px rows) */
.molde .mo-cprod[data-style="b"][data-device="mobile"] .mo-grid { gap: 20px 8px; }
/* Content sections take the page background (Figma: no fill). Cards keep theirs: Marketplace buy box,
   cart summary, and the Marketplace mobile filters sheet. */
.molde .mo-filters[data-style="c"][data-device="mobile"] { background: var(--bg-surface); }
/* the carousel banner keeps its illustration centered (its own Figma layout) */
.molde .mo-cbanner .mo-bn { justify-items: center; }
/* Arrows that live inside a scrolling track stick to its visible edge (instead of sitting after the last
   card, where the track clipped them). They overlay the cards and take no space in the row. */
/* (in-track sticky arrows replaced by the shared carousel pattern) */
/* testimonials: cards share the row height, arrows stay centered beside them */
.molde .mo-testi .mo-tr { align-items: stretch; }
.molde .mo-testi .mo-tr > .mo-arrow { align-self: center; }
.molde .mo-testi .mo-tcard > .mo-tauth { margin-top: auto; }
/* Shop the look (Marketplace) on mobile: the page margin is only 16px, so the arrows sit just inside it */
.molde .mo-stl[data-style="c"][data-device="mobile"] .mo-ltr > .mo-arrow.is-prev { left: calc(4px - var(--layout-page-margin)); }
.molde .mo-stl[data-style="c"][data-device="mobile"] .mo-ltr > .mo-arrow.is-next { right: calc(4px - var(--layout-page-margin)); }
/* Scrolling rows clip on every side (overflow-x forces overflow-y too). Give them breathing room so
   strokes, shadows and the hover lift of their items are never cut, and take it back with negative
   margins so nothing moves. (Hover-room rows keep their larger bottom room.) */
.molde :is(.mo-rail > .mo-tr, .mo-ccats .mo-tr, .mo-cfin .mo-tr, .mo-creels .mo-tr, .mo-cflash .mo-tr, .mo-cbrands .mo-tr, .mo-tr.is-content-row) { padding-top: 12px; margin-top: -12px; padding-bottom: 12px; margin-bottom: -12px; padding-inline: 8px; margin-inline: -8px; scroll-padding-inline: 8px; }
/* same breathing room for the other sideways scrollers (chips, sizes, banner cards, account and brand nav) */
.molde :is(.mo-sbs .mo-res, .mo-cbanner .mo-cards) { padding-block: 6px; margin-block: -6px; }
.molde .mo-drawer .mo-dchips { padding-top: 6px; margin-top: -6px; }
/* Marketplace buy box: shipping as one line (the calculator opens from its link) */
.molde .mo-buybox .mo-shipline { display: flex; align-items: flex-start; gap: var(--space-3); }
.molde .mo-buybox .mo-shipline > .mo-icon { font-size: 22px; color: var(--commerce-free-shipping); }
.molde .mo-buybox .mo-shipline > span { display: flex; flex-direction: column; gap: 2px; }
.molde .mo-buybox .mo-shipline b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--commerce-free-shipping); }
.molde .mo-buybox .mo-shipline small { display: inline-flex; align-items: center; gap: var(--space-1); font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
/* Mobile overflow fixes: section headers wrap (timer / links go below the title), Marketplace product shelf
   stacks its featured card, filters fit the page column */
.molde .mo-sec[data-device="mobile"] .mo-sh { flex-wrap: wrap; row-gap: var(--space-2); }
.molde .mo-cprod[data-device="mobile"] .mo-dbody { flex-direction: column; }
.molde .mo-cprod[data-device="mobile"] .mo-feat-card { width: 100%; }
.molde .mo-page .mo-filters[data-device="mobile"] { width: 100%; }
/* Categories fill the row on desktop: Esencial tiles stretch (min 128px), Marketplace circles spread evenly.
   With more categories than fit, items keep their minimum and the row scrolls as a carousel. */
.molde .mo-ccats[data-style="a"]:not([data-device="mobile"]) .mo-tr > .mo-ccat { flex: 1 0 128px; width: auto; }
.molde .mo-ccats[data-style="c"]:not([data-device="mobile"]) .mo-tr { justify-content: space-between; }
/* ---------- Lightbox (image viewer) ---------- */
.molde .mo-lbox { width: 1040px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-6) var(--space-6); background: var(--bg-surface); }
.molde .mo-lbox .mo-lbh { display: flex; align-items: center; gap: var(--space-2); }
.molde .mo-lbox .mo-lbh .mo-grow { flex: 1; }
.molde .mo-lbox .mo-lbc { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-lbox .mo-lbh .mo-icon { font-size: 24px; color: var(--icon-default); cursor: pointer; }
.molde .mo-lbox .mo-lbs { position: relative; }
.molde .mo-lbox .mo-lbimg { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--bg-subtle); border-radius: var(--radius-card); color: var(--border-strong); }
.molde .mo-lbox .mo-lbimg .mo-icon { font-size: 200px; }
.molde .mo-lbox .mo-lbs > .mo-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.molde .mo-lbox .mo-lbs > .mo-arrow.is-prev { left: var(--space-4); }
.molde .mo-lbox .mo-lbs > .mo-arrow.is-next { right: var(--space-4); }
.molde .mo-lbox .mo-lbt { display: flex; justify-content: center; gap: var(--space-2); }
.molde .mo-lbox .mo-lbthumb { width: 72px; height: 72px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-field); background: var(--bg-subtle); color: var(--border-strong); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out); }
.molde .mo-lbox .mo-lbthumb .mo-icon { font-size: 32px; }
.molde .mo-lbox .mo-lbthumb.is-on { border: 2px solid var(--border-brand); }
.molde .mo-lbox .mo-lbdots { display: flex; justify-content: center; gap: 6px; }
.molde .mo-lbox .mo-lbdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border-strong); }
.molde .mo-lbox .mo-lbdots i.is-on { width: 18px; background: var(--action-primary); }
.molde .mo-lbox[data-device="mobile"] { width: 375px; padding: var(--space-3) var(--space-4) var(--space-4); }
.molde .mo-lbox[data-device="mobile"] .mo-lbimg { aspect-ratio: 3 / 4; }
.molde .mo-lbox[data-device="mobile"] .mo-lbimg .mo-icon { font-size: 120px; }
.molde .mo-lbox[data-device="mobile"] .mo-lbs > .mo-arrow { display: none; }
/* ---------- Write a review ---------- */
.molde .mo-mrev { width: 560px; max-width: 100%; }
.molde .mo-mrev .mo-mb { display: flex; flex-direction: column; gap: var(--space-4); }
.molde .mo-mrev .mo-revprod .mo-cps { width: 100%; }
.molde .mo-mrev .mo-revprod .mo-cps .mo-ibtn { display: none; } /* reviewing, not buying: no add button (as in Figma) */
.molde .mo-mrev .mo-revstars { display: flex; align-items: center; gap: var(--space-1); }
.molde .mo-mrev .mo-revstar { padding: 2px; border: 0; background: none; cursor: pointer; color: var(--border-strong); transition: transform var(--motion-fast) var(--ease-out); }
.molde .mo-mrev .mo-revstar .mo-icon { font-size: 32px; }
.molde .mo-mrev .mo-revstar.is-on { color: var(--feedback-warning); }
.molde .mo-mrev .mo-revstar:active { transform: scale(var(--motion-press)); }
.molde .mo-mrev .mo-revstars > span { margin-left: var(--space-2); font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-mrev .mo-revtxt { display: flex; flex-direction: column; gap: var(--space-1); }
.molde .mo-mrev .mo-revtxt .mo-box { min-height: 112px; align-items: flex-start; }
.molde .mo-mrev .mo-revtxt .mo-val { color: var(--text-secondary); }
.molde .mo-mrev .mo-btn, .molde .mo-mrev .mo-field { width: 100%; }
.molde .mo-mrev .mo-revok { align-items: center; text-align: center; padding-block: var(--space-6); }
.molde .mo-mrev .mo-revok > .mo-icon { font-size: 56px; color: var(--feedback-success); }
.molde .mo-mrev .mo-revok b { font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); }
.molde .mo-mrev .mo-revok span:not(.mo-icon) { font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-mrev[data-device="mobile"] { width: 375px; }

/* ---------- Modal Location (delivery postal code) ---------- */
.molde .mo-mloc { width: 480px; max-width: 100%; }
.molde .mo-mloc .mo-mb { gap: var(--space-4); }
.molde .mo-mloc .mo-mlhelp { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-mloc .mo-field, .molde .mo-mloc .mo-btn { width: 100%; }
.molde .mo-mloc .mo-field .mo-box { cursor: text; }
.molde .mo-mloc .mo-link { align-self: flex-start; }
.molde .mo-mloc[data-device="mobile"] { width: 375px; }

/* ---------- Carousel Product Tabs (best sellers by category) ---------- */
.molde .mo-cptabs .mo-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-cptabs .mo-chip { cursor: pointer; }
.molde .mo-cptabs .mo-sh + .mo-chiprow { margin-top: calc(var(--space-2) * -1); }
.molde .mo-cptabs[data-style="b"] .mo-chiprow { justify-content: center; }
.molde .mo-cptabs[data-device="mobile"] .mo-chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--layout-page-margin) * -1); padding-inline: var(--layout-page-margin); }
.molde .mo-cptabs[data-device="mobile"] .mo-chiprow::-webkit-scrollbar { display: none; }
.molde .mo-cptabs[data-device="mobile"] .mo-chip { flex: none; }

/* ---------- Nav · sticky + State=Compact ---------- */
.molde .mo-page > .mo-nav { position: sticky; top: var(--mo-sticky-top, 0px); z-index: 40; transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
[data-mo-sticky="off"] .mo-page > .mo-nav, [data-mo-pin="transform"] .mo-page > .mo-nav { position: relative; }
[data-mo-sticky="off"] [data-mo-sticky="on"]:not([data-mo-pin="transform"]) .mo-page > .mo-nav { position: sticky; }
.molde .mo-nav .mo-main { transition: padding var(--motion-base) var(--ease-out); }
.molde .mo-nav .mo-logo .mo-art, .molde .mo-nav .mo-logoimg { transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out); }
.molde .mo-nav .mo-only-compact { display: none; }
.molde .mo-nav[data-state="compact"] { box-shadow: var(--elevation-3); }
.molde .mo-nav[data-state="compact"] .mo-only-compact { display: inline-flex; }
.molde .mo-nav[data-state="compact"] > .mo-promo,
.molde .mo-nav[data-state="compact"] > .mo-sub,
.molde .mo-nav[data-state="compact"] > .mo-msearch,
.molde .mo-nav[data-state="compact"] .mo-pays,
.molde .mo-nav[data-state="compact"] .mo-notif,
.molde .mo-nav[data-state="compact"][data-style="a"] .mo-main > .mo-search { display: none; }
.molde .mo-nav[data-state="compact"] .mo-main { padding-block: var(--space-2); border-bottom-color: transparent; }
/* Marketplace keeps its search field; with the payment logos gone the icons go back to the right edge */
.molde .mo-nav[data-state="compact"][data-style="c"] .mo-main > .mo-search { margin-right: auto; }
.molde .mo-nav[data-state="compact"][data-style="b"] .mo-main { padding-block: var(--space-3); }
.molde .mo-nav[data-state="compact"] .mo-logo .mo-art { width: 90px !important; height: 32px !important; }
.molde .mo-nav[data-state="compact"][data-style="b"][data-device="desktop"] .mo-logo .mo-art { width: 100px !important; height: 36px !important; }
.molde .mo-nav[data-state="compact"][data-device="mobile"] .mo-logo .mo-art { width: 78px !important; height: 28px !important; }
.molde .mo-nav[data-state="compact"] .mo-logoimg { height: 22px !important; }
.molde .mo-nav[data-state="compact"][data-device="mobile"] .mo-main { padding-block: 6px; }
/* mobile: hides while scrolling down, comes back on scroll up */
.molde .mo-nav[data-hidden] { transform: translateY(calc(-100% - 16px)); box-shadow: none; }
/* pinned inside a host with its own bars (preview): it also fades, so nothing shows through them */
[data-mo-pin="transform"] .mo-page > .mo-nav { transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out); }
[data-mo-pin="transform"] .mo-nav[data-hidden] { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .molde .mo-page > .mo-nav { transition: opacity var(--motion-fast) linear; }
  .molde .mo-nav[data-hidden] { transform: none; opacity: 0; visibility: hidden; }
}
/* @next */