.mt-product-row[hidden]{display:none}
.mt-product-row__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1.5rem;margin-block-end:var(--mt-space-md)}
.mt-product-row__head>div>*{margin:0}
.mt-product-row__head .mt-eyebrow{margin-block-end:.375rem}
.mt-product-row__empty{margin:0;padding:var(--mt-space-md);border:.0625rem dashed var(--mt-field);border-radius:var(--mt-radius);color:var(--mt-muted)}
.mt-product-row__layout{display:grid;gap:var(--mt-space-md) 1.25rem}
.mt-product-row__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:2rem 1.25rem;margin:0;padding:0;list-style:none}
.mt-product-row__lead{position:relative;display:flex;align-items:flex-end;min-block-size:18rem;padding:1.75rem;overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white)}
.mt-product-row__lead-media{position:absolute;inset:0}
.mt-product-row__lead-media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.mt-product-row__lead-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in oklch,var(--mt-navy) 88%,transparent),color-mix(in oklch,var(--mt-navy) 20%,transparent) 80%)}
.mt-product-row__lead-copy{position:relative;z-index:1;display:grid;justify-items:start;gap:.75rem}
.mt-product-row__lead-copy>*{margin:0}
.mt-product-row__lead-copy h3{font:400 var(--mt-fs-h3)/1.2 var(--mt-font-display);letter-spacing:-.03125rem;text-wrap:balance}
@container (min-width:56rem){
  .mt-product-row__layout--lead{grid-template-columns:minmax(0,1fr) minmax(0,3fr);align-items:stretch}
  .mt-product-row__layout--lead.mt-product-row__layout--end{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
  .mt-product-row__layout--end .mt-product-row__lead{order:2}
  .mt-product-row__layout--lead .mt-product-row__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mt-product-row__lead{min-block-size:0}
}

/* Iso nosto (layout=spotlight): yksi tuote isona, navy-pinta ja tuotekuva vaalealla pohjalla */
.mt-spotlight{display:grid;overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white)}
.mt-spotlight__copy{display:grid;align-content:center;justify-items:start;gap:1.25rem;padding:var(--mt-space-lg)}
.mt-spotlight__copy>*{margin:0}
.mt-spotlight__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-spotlight__title{font:400 var(--mt-fs-h2-lg)/1.2 var(--mt-font-display);letter-spacing:-.03125rem;text-wrap:balance;overflow-wrap:anywhere}
.mt-spotlight__title a{color:inherit;text-decoration:none}
.mt-spotlight__title a:hover{color:var(--mt-coral)}
.mt-spotlight__bullets{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.mt-spotlight__bullets li{display:flex;gap:.625rem;font-size:var(--mt-fs-base);line-height:1.5;color:var(--mt-on-navy-soft)}
.mt-spotlight__bullets .mt-icon{flex:none;margin-block-start:.25rem;color:var(--mt-coral)}
.mt-spotlight__price{font:400 var(--mt-fs-h3)/1.2 var(--mt-font-display);color:var(--mt-white)}
.mt-spotlight__price small,.mt-spotlight__price .mediatrade-price-pair__gross{font:400 var(--mt-fs-sm)/1.5 var(--mt-font-body);color:var(--mt-on-navy-muted)}
.mt-spotlight__price del{color:var(--mt-on-navy-muted)}
.mt-spotlight__price ins{text-decoration:none}
.mt-spotlight__price .mediatrade-price-pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:.125rem .75rem}
.mt-spotlight__price .mediatrade-price-on-request{font:500 var(--mt-fs-base)/1.35 var(--mt-font-body)}
.mt-spotlight__stock{display:flex;align-items:center;gap:.4375rem;font-size:var(--mt-fs-sm);color:var(--mt-on-navy-soft)}
.mt-spotlight__stock--ok .mt-card__dot{background:var(--mt-success);box-shadow:none}
.mt-spotlight__stock--wait .mt-card__dot{background:var(--mt-warning);box-shadow:none}
.mt-spotlight__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.mt-spotlight .mt-card__action .button:not(:disabled){display:inline-flex;align-items:center;justify-content:center;min-block-size:3rem;padding:.75rem 1.625rem;border:0;border-radius:var(--mt-radius-pill);background:var(--mt-coral-strong);color:var(--mt-white);font:500 var(--mt-fs-xs)/1.2 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;text-decoration:none;cursor:pointer}
.mt-spotlight .mt-card__action .button:not(:disabled):hover{background:var(--mt-coral-deep);color:var(--mt-white)}
.mt-spotlight .mt-card__action .added_to_cart{color:var(--mt-white)}
.mt-spotlight__media{display:grid;place-items:center;min-block-size:18rem;padding:var(--mt-space-lg);background:var(--mt-mist)}
.mt-spotlight__media img{inline-size:100%;max-inline-size:23.75rem;block-size:auto;max-block-size:21.25rem;margin:0;object-fit:contain;mix-blend-mode:multiply}
@container (min-width:48rem){
  .mt-spotlight{grid-template-columns:minmax(0,5fr) minmax(0,4fr);min-block-size:27.5rem}
  .mt-spotlight__copy{padding:var(--mt-space-lg) 3.5rem}
}

/* Artikkelin tuotenosto (Pen: Tuotenosto artikkelissa): rivi tekstin lomassa, ei osion omaa väliä eikä leveyttä. */
.mt-section.mt-product-row--mention{padding-block:0;margin-block:1.75rem}
.mt-product-row--mention .mt-wrap{inline-size:auto;margin-inline:0}
.mt-mention{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;padding:1.25rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius);background:var(--mt-white)}
.mt-mention__copy{flex:1 1 16rem;display:grid;gap:.1875rem;min-inline-size:0}
.mt-mention p{margin:0}
.mt-mention__label{font:500 var(--mt-fs-2xs)/1.3 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;color:var(--mt-coral-strong)}
.mt-mention__name{font:500 var(--mt-fs-lg)/1.5 var(--mt-font-body);color:var(--mt-ink)}
.mt-mention__more{font:400 var(--mt-fs-md)/1.5 var(--mt-font-body);color:var(--mt-muted)}
.mt-mention__more a{display:inline-block;min-block-size:1.5rem;color:inherit;text-underline-offset:.1875rem}
.mt-mention__more a:hover{color:var(--mt-navy)}
.mt-mention .mt-btn{flex:none}