/* Home slider, look "showcase" (Vitrin, Kardo 24 October; src/Site/Builder/Components/HomeSlider): a light stage, the picture
   beside the text and a floating tab bar. Product shots are transparent files, so nothing depends on blend modes (a blend
   inside a moving box only starts once the motion ends, which showed the shot's white background for a moment).
   hero-slider.js sets data-mbh-live and plays the slides; without it the first slide stays and the bar is hidden. */
.mb-hero{--mbh-red:var(--red,#d51f2d);--mbh-red-deep:#b3141f;--mbh-ink:var(--ink,#17212c);--mbh-muted:#5c6670;--mbh-ease:cubic-bezier(.22,.7,.18,1);--mbh-time:7s;
  position:relative;overflow:hidden;background:radial-gradient(120% 90% at 28% 42%,#fff 0,#f2f5f8 52%,#e4e9ee 100%);color:var(--mbh-ink)}
.mb-hero__stage{position:relative;height:clamp(600px,80vh,740px)}
/* Safe area: the picture row ends above the tab bar (bar 76px + 30px from the bottom + 24px air), and minmax(0,1fr) keeps a tall
   or square picture from growing the row past it (Kardo 25 October: the cabinet shot ran under the bar). */
.mb-hero__slide{position:absolute;inset:0;width:min(1280px,89%);margin:0 auto;padding:28px 0 130px;display:grid;grid-template-columns:7fr 5fr;grid-template-rows:minmax(0,1fr);align-items:center;gap:4%;visibility:hidden}
.mb-hero__slide.is-active,.mb-hero__slide.is-leaving{visibility:visible}
.mb-hero__media{position:relative;height:82%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(9%) scale(.94);transition:opacity .9s var(--mbh-ease),transform 1.1s var(--mbh-ease)}
.mb-hero__media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -28px rgba(16,36,58,.45)}
.mb-hero__slide--product .mb-hero__media img{width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:0;box-shadow:none}
.mb-hero__copy{opacity:0;transform:translateY(18px);transition:opacity .8s var(--mbh-ease) .15s,transform .9s var(--mbh-ease) .15s}
.mb-hero__slide.is-active .mb-hero__media,.mb-hero__slide.is-active .mb-hero__copy{opacity:1;transform:none}
.mb-hero__slide.is-leaving .mb-hero__media{opacity:0;transform:translateX(-7%) scale(.9);transition-duration:.7s}
.mb-hero__slide.is-leaving .mb-hero__copy{opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .4s}
.mb-hero__eyebrow{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mbh-red)}
.mb-hero__title{margin:0 0 18px;font-size:clamp(34px,4.1vw,58px);line-height:1.06;letter-spacing:-.022em;font-weight:700;color:var(--mbh-ink)}
.mb-hero .mb-hero__title span{display:block;font-weight:300;color:inherit}
.mb-hero__text{margin:0 0 30px;max-width:30em;font-size:18px;line-height:1.6;color:var(--mbh-muted)}
.mb-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.mb-hero__button{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;background:var(--mbh-red);color:#fff;font-weight:700;font-size:16px;text-decoration:none;transition:background .25s}
.mb-hero__button:hover,.mb-hero__button:focus-visible{background:var(--mbh-red-deep);color:#fff}
.mb-hero__link{display:inline-flex;align-items:center;gap:8px;color:var(--mbh-red);font-weight:700;font-size:17px;text-decoration:none}
.mb-hero__button svg,.mb-hero__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--mbh-ease)}
.mb-hero__link svg{width:16px;height:16px}
.mb-hero__button:hover svg,.mb-hero__link:hover svg{transform:translateX(4px)}
.mb-hero :focus-visible{outline:3px solid var(--mbh-red);outline-offset:3px}

.mb-hero__nav{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:min(780px,92%);height:76px;display:none;grid-template-columns:52px 1fr 52px;align-items:center;
  border-radius:20px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 40px -22px rgba(16,36,58,.35),inset 0 0 0 1px rgba(255,255,255,.8)}
.mb-hero[data-mbh-live] .mb-hero__nav{display:grid}
.mb-hero__nav button{margin:0;padding:0;border:0;background:none;color:var(--mbh-ink);font:inherit;cursor:pointer}
.mb-hero__arrow{height:100%;display:grid;place-items:center}
.mb-hero__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mb-hero__tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:100%}
.mb-hero__tab{position:relative;padding:0 14px !important;text-align:left;font-size:15px !important;font-weight:600;color:#7a838c !important}
.mb-hero__tab[aria-pressed=true]{color:var(--mbh-ink) !important;font-weight:700}
.mb-hero__tab i{position:absolute;left:14px;right:14px;top:14px;height:3px;border-radius:3px;background:#dfe3e7;overflow:hidden}
.mb-hero__tab i::after{content:"";position:absolute;inset:0;background:var(--mbh-red);transform:scaleX(0);transform-origin:left}
.mb-hero__tab[aria-pressed=true] i::after{animation:mb-hero-fill var(--mbh-time) linear forwards}
.mb-hero.is-paused .mb-hero__tab[aria-pressed=true] i::after{animation-play-state:paused}
.mb-hero[data-mbh-still] .mb-hero__tab[aria-pressed=true] i::after{animation:none;transform:scaleX(1)}
@keyframes mb-hero-fill{to{transform:scaleX(1)}}

@media (max-width:900px){
  /* Short enough that the tab bar shows above the phone's bottom bar of quick buttons on a common 844 px screen. */
  .mb-hero__stage{height:auto;min-height:700px}
  .mb-hero__slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:16px;padding:32px 0 100px;text-align:center}
  .mb-hero__copy{order:-1}
  .mb-hero__eyebrow{margin-bottom:12px}
  .mb-hero__title{margin-bottom:12px}
  .mb-hero__text{margin:0 auto 18px;font-size:17px}
  .mb-hero__actions{justify-content:center;gap:10px 22px}
  .mb-hero__media{height:210px;transform:translateY(20px) scale(.96)}
  .mb-hero__slide.is-leaving .mb-hero__media{transform:scale(.92)}
  .mb-hero__nav{grid-template-columns:48px 1fr 48px;height:60px;bottom:22px}
  .mb-hero__tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mb-hero__tab{padding:0 6px !important}
  .mb-hero__tab i{top:28px;left:6px;right:6px}
}
@media (prefers-reduced-motion:reduce){
  .mb-hero__media,.mb-hero__copy,.mb-hero__slide.is-leaving .mb-hero__media,.mb-hero__slide.is-leaving .mb-hero__copy{transition:none}
  .mb-hero__tab[aria-pressed=true] i::after{animation:none;transform:scaleX(1)}
}