/* ==========================================================================
   Molde · Rubros
   Photos placed by molde/rubros.js (Figma: MadeOfImage + "Rubro" mode).
   The photo sits behind the slot's content; the slot's placeholder icon hides
   while a photo is shown. Scrims mirror MadeOfImage's Scrim / GridBanners' Text scrim.
   ========================================================================== */
.molde .rb-host { overflow: hidden; isolation: isolate; }
.molde .rb-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.molde .rb-host > .mo-icon { visibility: hidden; }
.molde .rb-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
.molde .rb-scrim[data-tone="dark-left"] { background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .18) 55%, rgb(0 0 0 / 0) 80%); }
.molde .rb-scrim[data-tone="dark-bottom"] { background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .55) 60%, rgb(0 0 0 / .75) 100%); }
.molde .rb-scrim[data-tone="light-left"] { background: linear-gradient(90deg, rgb(255 255 255 / .88) 0%, rgb(255 255 255 / .45) 50%, rgb(255 255 255 / 0) 75%); }
/* shop the look: hotspots a rubro's photo doesn't use stay hidden (the component sets display:grid) */
.molde .mo-hotspot[hidden] { display: none; }
/* the Marketplace slide is a solid brand panel without a photo: with one, keep the arrows and dots readable */
.molde .mo-hero .mo-slide.rb-host { background: var(--bg-inverse); }
/* hero slides with a photo (Molde.content.hero): a scrim between the photo and the copy, like the banners.
   Esencial / Marketplace darken from the left (desktop) or the bottom (mobile); Editorial's photo has no copy on it */
.molde .mo-hero[data-style="a"] .mo-hs:has(> img)::before, .molde .mo-hero[data-style="c"] .mo-hs:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .18) 55%, rgb(0 0 0 / 0) 80%); }
.molde .mo-hero[data-device="mobile"] .mo-hs:has(> img)::before { background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .55) 60%, rgb(0 0 0 / .75) 100%); }
.molde .mo-hero .mo-hs:has(> img) > .mo-hc { z-index: 2; }
/* Editorial category tiles with a photo: bottom gradient instead of the component's flat 25 % veil */
.molde .rb-scrim[data-tone="dark-base"] { background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .28) 62%, rgb(0 0 0 / .68) 100%); }
.molde .mo-ccat[data-style="b"].rb-host::after { display: none; }
.molde .mo-ccat[data-style="b"].rb-host .mo-cc { text-shadow: 0 1px 10px rgb(0 0 0 / .3); }
.molde .mo-ccat[data-style="b"].rb-host .mo-cc u { font-weight: 600; }
/* client packs: brand logo in place of the brand name (horizontal wordmarks), and above a brand guide's title */
.molde .rb-blogo { display: block; height: 10px; width: auto; max-width: 100%; }
.molde .mo-buybox .rb-blogo, .molde .mo-feat-card .rb-blogo { height: 12px; }
.molde .mo-brandtab .rb-btab { display: block; width: 26px; height: auto; }
.molde .rb-alogo { display: block; height: 16px; width: auto; max-width: 100%; margin-bottom: var(--space-3); }
/* section title with an icon: same format as the flash-sale title (MadeOfCarouselFlashSale) */
.molde h2.rb-h { display: inline-flex; align-items: center; gap: var(--space-2); }
/* --icon-accent (System token, DS) with fallbacks until it ships: the brand accent when it reads on white, else the primary */
.molde h2.rb-h > .mo-icon.rb-hicon.rb-hicon { font-size: 28px; color: var(--icon-accent, var(--brand-accent-strong, var(--brand-primary))); }
.molde .rb-scrim[data-tone="dark-corner"] { background: linear-gradient(135deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .3) 40%, rgb(0 0 0 / 0) 70%); }
/* banners with a photo: light copy over the dark scrim, larger on desktop so it reads as a headline */
.molde .mo-bn.rb-host .mo-bscrim { display: none; }
.molde .mo-bn.rb-host .mo-bt b, .molde .mo-hero .mo-ban.rb-host b { color: #fff; }
.molde .mo-bn.rb-host .mo-bt small, .molde .mo-hero .mo-ban.rb-host.rb-host span { color: rgb(255 255 255 / .88); }
.molde .mo-bn.rb-host .mo-bt { text-shadow: 0 1px 12px rgb(0 0 0 / .25); }
.molde .mo-gban:not([data-device="mobile"]) .mo-bn.rb-host .mo-bt { gap: 6px; }
.molde .mo-gban:not([data-device="mobile"]) .mo-bn.rb-host .mo-bt b { font-size: var(--type-heading-xl); line-height: 1.15; letter-spacing: -0.015em; }
.molde .mo-gban:not([data-device="mobile"]) .mo-bn.rb-host .mo-bt small, .molde .mo-hero:not([data-device="mobile"]) .mo-ban.rb-host span { font-size: var(--type-body-md); }
.molde .rb-scrim[data-tone="dark-top"] { background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 40%); }
/* client packs: subscription modal with a photo and the store logo top-left */
.molde .mo-msub .mo-msimg.rb-host { position: relative; }
.molde .mo-msub .rb-mslogo { position: absolute; top: var(--space-6); left: var(--space-6); }