.mt-shop-banners{padding-block:var(--mt-space-lg) 0}
.mt-shop-banners__empty{margin:0;padding:var(--mt-space-md);border:.0625rem dashed var(--mt-field);border-radius:var(--mt-radius);color:var(--mt-muted)}
.mt-shop-banners__grid{display:grid;gap:1.25rem}
.mt-shop-banner{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-block-size:16rem;padding:var(--mt-space-lg);overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white)}
.mt-shop-banner--coral{background:var(--mt-coral-strong)}
.mt-shop-banner--blush{background:var(--mt-blush);color:var(--mt-ink)}
.mt-shop-banner__media{position:absolute;inset:0}
.mt-shop-banner__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.mt-shop-banner--image::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,color-mix(in oklch,var(--mt-navy) 88%,transparent),color-mix(in oklch,var(--mt-navy) 25%,transparent) 75%)}
.mt-shop-banner__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.625rem;max-inline-size:36rem}
.mt-shop-banner__copy>*{margin:0}
.mt-shop-banner__tag{padding:.375rem .625rem;border-radius:.1875rem;background:var(--mt-coral-strong);color:var(--mt-white);font:500 var(--mt-fs-2xs)/1.2 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase}
.mt-shop-banner--coral .mt-shop-banner__tag{background:color-mix(in oklch,var(--mt-white) 20%,transparent)}
.mt-shop-banner--coral .mt-eyebrow{color:var(--mt-white)}
.mt-shop-banner__title{font:400 var(--mt-fs-h3)/1.15 var(--mt-font-display);letter-spacing:-.03125rem;text-wrap:balance}
.mt-shop-banner--hero .mt-shop-banner__title,.mt-shop-banner--full .mt-shop-banner__title{font-size:var(--mt-fs-h1);line-height:1.1}
.mt-shop-banner--half .mt-shop-banner__title{font-size:var(--mt-fs-h2)}
.mt-shop-banner__text{font-size:var(--mt-fs-lg);line-height:1.5;color:var(--mt-on-navy-soft)}
.mt-shop-banner--blush .mt-shop-banner__text{color:var(--mt-text)}
.mt-shop-banner__action{padding-block-start:.5rem}
.mt-shop-banner__link{display:inline-flex;align-items:center;gap:.5rem;min-block-size:1.5rem;padding-block:.25rem .3125rem;border-block-end:.0625rem solid currentColor;color:inherit;font:500 var(--mt-fs-xs)/1.2 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;text-decoration:none;box-sizing:content-box}
.mt-shop-banner__link:hover{color:var(--mt-coral)}
.mt-shop-banner--blush .mt-shop-banner__link:hover{color:var(--mt-coral-strong)}
@container (min-width:48rem){
  .mt-shop-banners__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense}
  .mt-shop-banner--hero{grid-column:span 8;grid-row:span 2;min-block-size:30rem;padding:3rem}
  .mt-shop-banner--full{grid-column:1/-1;min-block-size:27.5rem;padding:3rem}
  .mt-shop-banner--half{grid-column:span 6;min-block-size:20rem}
  .mt-shop-banner--third{grid-column:span 4;min-block-size:14.375rem}
  .mt-shop-banner--hero~.mt-shop-banner--third{grid-column:span 4}
}

/* Pääbannerien karuselli: scroll-snap-raita, painikkeet lisää script.js */
.mt-shop-banners__carousel{position:relative;min-inline-size:0}
.mt-shop-banners__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;margin:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--mt-radius);list-style:none;overscroll-behavior-x:contain}
.mt-shop-banners__track::-webkit-scrollbar{display:none}
.mt-shop-banners__track:focus-visible{outline:.125rem solid var(--mt-navy);outline-offset:.125rem}
.mt-shop-banners__slide{min-inline-size:0;scroll-snap-align:start}
.mt-shop-banners__slide .mt-shop-banner{grid-column:auto;grid-row:auto;block-size:100%;min-block-size:30rem}
.mt-shop-banners__controls{position:absolute;inset-block-end:1.5rem;inset-inline-end:1.5rem;z-index:3;display:flex;gap:.5rem}
.mt-shop-banners__controls[hidden]{display:none}
.mt-shop-banners__step{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;padding:0;border:0;border-radius:var(--mt-radius-pill);background:var(--mt-white);color:var(--mt-ink);cursor:pointer;transition:background-color var(--mt-transition)}
.mt-shop-banners__step:hover{background:var(--mt-blush)}
.mt-shop-banners__step:focus-visible{outline:.125rem solid var(--mt-white);outline-offset:.125rem}
@media (prefers-reduced-motion:reduce){.mt-shop-banners__track{scroll-behavior:auto}.mt-shop-banners__step{transition:none}}

/* Edut-rivi bannerien alla (Pen: Edut): sama lähde kuin tuotesivun luottamusrivit */
.mt-shop-banners__benefits{margin-block-start:1.25rem}
.mt-benefit-list--row{display:grid;margin:0;padding:0;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius);list-style:none;overflow:hidden}
.mt-benefit-list--row li{display:flex;align-items:center;gap:.875rem;min-block-size:3.5rem;padding:1.25rem 1.5rem;border-block-end:.0625rem solid var(--mt-line);font:500 var(--mt-fs-md)/1.4 var(--mt-font-body);color:var(--mt-ink)}
.mt-benefit-list--row li:last-child{border-block-end:0}
.mt-benefit-list--row .mt-icon{flex:none;color:var(--mt-coral-strong)}
.mt-benefit-list--row a{display:inline-flex;align-items:center;min-block-size:1.5rem;color:inherit;text-decoration:none}
.mt-benefit-list--row a:hover{text-decoration:underline;text-underline-offset:.2em}
@container (min-width:48rem){
  .mt-shop-banners__carousel{grid-column:span 8;grid-row:span 2}
  .mt-shop-banners__slide .mt-shop-banner{min-block-size:30rem}
  .mt-benefit-list--row{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
  .mt-benefit-list--row li{border-block-end:0;border-inline-end:.0625rem solid var(--mt-line)}
  .mt-benefit-list--row li:last-child{border-inline-end:0}
}