/* Uuden ilmeen kaupan listausnäkymät: kategoria, merkki, suodatettu listaus ja hakutulokset.
   Kaupan etusivun lohkoilla on omat style.css-tiedostonsa. */

.mt-shop{padding-block-end:var(--mt-space-section)}
.mt-shop-title{padding-block:var(--mt-space-lg) 0}
.mt-shop-title h1,.mt-search-head__title{margin:0;font:400 var(--mt-fs-h1)/1.1 var(--mt-font-display);letter-spacing:-.03125rem}

/* Kategorian hero */
.mt-cat-hero{padding-block:var(--mt-space-sm) 0}
.mt-cat-hero__layout{display:grid;overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white)}
.mt-cat-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem;padding:var(--mt-space-xl) var(--mt-space-lg)}
.mt-cat-hero__title{margin:0;font:400 calc(var(--mt-fs-h1) * 1.35)/1.1 var(--mt-font-display);letter-spacing:-.0625rem;overflow-wrap:anywhere}
.mt-cat-hero__lead{max-inline-size:34.5rem;margin:0;font-size:var(--mt-fs-xl);line-height:1.5;color:var(--mt-on-navy-soft)}
.mt-cat-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin:0;padding-block-start:.375rem}
.mt-cat-hero__media{position:relative;min-block-size:14rem;background:var(--mt-mist)}
.mt-cat-hero__media img{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;object-fit:cover}
@container (min-width:52rem){
  .mt-cat-hero__layout{grid-template-columns:minmax(0,664fr) minmax(0,600fr);min-block-size:23.75rem}
  .mt-cat-hero__layout--plain{grid-template-columns:1fr}
  .mt-cat-hero__copy{justify-content:center;padding-inline:3.5rem}
}

/* Alakategoriat */
.mt-subcats{padding-block:var(--mt-space-md) 0}
/* Alakategoriat (T16): yhden rivin pillit, desktopilla rivittyvät, mobiilissa pyyhkäistävä rivi ilman JS:ää */
.mt-subcats__list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.mt-subcat{display:inline-flex;align-items:center;gap:.5rem;min-block-size:2.75rem;padding:.5rem 1.125rem .5rem .875rem;border-radius:var(--mt-radius-pill);background:var(--mt-mist);color:var(--mt-ink);white-space:nowrap;text-decoration:none;transition:background-color var(--mt-transition)}
.mt-subcat .mt-icon{flex:none;color:var(--mt-coral-strong)}
.mt-subcat:hover{background:var(--mt-blush)}
.mt-subcat__name{font:500 var(--mt-fs-md)/1.2 var(--mt-font-body)}
@media (max-width:47.99rem){
  .mt-subcats__list{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--mt-pad);margin-inline:calc(-1 * var(--mt-pad));padding:.125rem var(--mt-pad);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
  .mt-subcats__list::-webkit-scrollbar{display:none}
  .mt-subcats__list>li{flex:none;scroll-snap-align:start}
}

/* Kategorian kampanjapaikka (Pen: Kategorian kampanjabanneri): kuva vasemmalla, yläotsake, otsikko ja painike */
.mt-campaign{padding-block:var(--mt-space-md) 0}
.mt-campaign__box{display:grid;overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-blush)}
.mt-campaign__media{position:relative;min-block-size:8rem;background:var(--mt-mist)}
.mt-campaign__media img{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;object-fit:cover}
.mt-campaign__copy,.mt-campaign .mt-btn{margin:1.25rem 1.5rem}
.mt-campaign__copy{display:flex;flex-direction:column;gap:.375rem}
.mt-campaign__copy>*{margin:0}
.mt-campaign__title{font:400 var(--mt-fs-h4)/1.3 var(--mt-font-display);color:var(--mt-ink)}
.mt-campaign .mt-btn{justify-self:start}
@container (min-width:48rem){
  .mt-campaign__box{grid-template-columns:minmax(0,16.25rem) minmax(0,1fr) auto;align-items:center;min-block-size:8rem}
  .mt-campaign__box:not(:has(.mt-campaign__media)){grid-template-columns:minmax(0,1fr) auto}
  .mt-campaign__media{align-self:stretch}
  .mt-campaign__copy{margin-inline:2rem}
  .mt-campaign .mt-btn{margin-inline:0 2rem}
}

/* Listaus */
.mt-listing{padding-block:var(--mt-space-lg) 0}
.mt-listing__layout{display:grid;gap:var(--mt-space-md)}
@container (min-width:56rem){
  .mt-listing__layout{grid-template-columns:16.5rem minmax(0,1fr);gap:var(--mt-space-lg);align-items:start}
  .mt-filters .mt-filters__summary{display:none}
  .mt-filters .mt-filters__body{padding-block-start:0}
}
.mt-listing .mt-grid{grid-auto-flow:dense}
.mt-filters{padding:1.25rem;border-radius:var(--mt-radius);background:var(--mt-mist);font-size:var(--mt-fs-md)}
.mt-filters__summary{display:flex;align-items:center;gap:.5rem;min-block-size:1.5rem;font:500 var(--mt-fs-xs)/1.3 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;cursor:pointer;list-style:none}
.mt-filters__summary::-webkit-details-marker{display:none}
.mt-filters__more{margin-block-start:.25rem}
.mt-filters__more-summary{display:inline-flex;align-items:center;min-block-size:1.75rem;color:var(--mt-navy);font:500 var(--mt-fs-md)/1.4 var(--mt-font-body);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.mt-filters__more[open] .mt-filters__more-summary{margin-block-end:.5rem}
.mt-filters__more-list{display:grid;gap:.625rem}
.mt-filters__body{display:grid;gap:1.5rem;padding-block-start:1.25rem}
.mt-filters__group{display:grid;gap:.625rem;min-inline-size:0;margin:0;padding:0;border:0}
.mt-filters__group legend{margin-block-end:.75rem;padding:0;font:500 var(--mt-fs-xs)/1.3 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;color:var(--mt-ink)}
.mt-check{display:flex;align-items:center;gap:.625rem;min-block-size:1.75rem;cursor:pointer}
.mt-check input{flex:none;inline-size:1.5rem;block-size:1.5rem;margin:0;accent-color:var(--mt-navy)}
.mt-filters__price{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mt-filters__price input{inline-size:100%;min-block-size:2.5rem;padding:.5rem .75rem;border:.0625rem solid var(--mt-field);border-radius:var(--mt-radius-sm);background:var(--mt-white);color:var(--mt-ink);font:inherit}
.mt-filters__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.mt-filters .mt-filters__actions .mt-btn.mt-btn--dark:not(:disabled){min-block-size:2.75rem;background:var(--mt-navy);color:var(--mt-white)}
.mt-filters .mt-filters__actions .mt-btn.mt-btn--dark:not(:disabled):hover{background:var(--mt-ink)}
.mt-filters__reset{display:inline-flex;align-items:center;min-block-size:1.5rem;color:var(--mt-navy);text-underline-offset:.2em}

.mt-toolbar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem 1rem;margin-block-end:var(--mt-space-md)}
.mt-toolbar__results{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem}
.mt-toolbar__count{margin:0;font:500 var(--mt-fs-xs)/1.3 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;color:var(--mt-muted)}
.mt-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.mt-chip{display:inline-flex;align-items:center;gap:.375rem;min-block-size:1.75rem;padding:.25rem .625rem;border-radius:var(--mt-radius-pill);background:var(--mt-blush);color:var(--mt-ink);font:500 var(--mt-fs-sm)/1.3 var(--mt-font-body);text-decoration:none}
.mt-chip:hover{background:var(--mt-mist)}
.mt-sort{position:relative;display:inline-flex;align-items:center}
.mt-sort select{appearance:none;min-block-size:2.75rem;padding:.5rem 2.5rem .5rem 1rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius-pill);background:var(--mt-white);color:var(--mt-ink);font:400 var(--mt-fs-md)/1.5 var(--mt-font-body);cursor:pointer}
.mt-sort .mt-icon{position:absolute;inset-inline-end:1rem;pointer-events:none}

.mt-pager{margin-block-start:var(--mt-space-xl)}
.mt-pager ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0;padding:0;list-style:none}
.mt-pager .page-numbers{display:inline-grid;place-items:center;min-inline-size:2.5rem;min-block-size:2.5rem;padding:0 .5rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius-pill);color:var(--mt-ink);font:500 var(--mt-fs-md)/1 var(--mt-font-body);text-decoration:none}
.mt-pager a.page-numbers:hover{border-color:var(--mt-navy)}
.mt-pager .page-numbers.is-current{border-color:var(--mt-navy);background:var(--mt-navy);color:var(--mt-white)}
.mt-pager .page-numbers.dots{border-color:transparent}

.mt-empty{padding:var(--mt-space-lg);border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius)}
.mt-empty h2{margin:0 0 .5rem;font:400 var(--mt-fs-h2)/1.15 var(--mt-font-display)}
.mt-empty p{margin:0 0 1rem;color:var(--mt-text)}
.mt-empty--box{display:grid;gap:var(--mt-space-md);padding:var(--mt-space-lg)}
.mt-empty__copy>*{margin-block:.5rem 0}
.mt-empty__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
@container (min-width:48rem){.mt-empty--box{grid-template-columns:1fr auto;align-items:center}}

/* Nostokortti listauksessa (Pen: Tuotenosto listauksessa, 2 saraketta) */
.mt-feature{display:grid;grid-column:1/-1;overflow:hidden;min-inline-size:0;margin:0;padding:0;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white);list-style:none}
.mt-feature__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.875rem;padding:1.75rem}
.mt-feature__copy>*{margin:0}
.mt-feature__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-feature__title{font:400 var(--mt-fs-h4)/1.25 var(--mt-font-display);color:var(--mt-white)}
.mt-feature__text{max-inline-size:22rem;color:var(--mt-on-navy-soft)}
.mt-feature__price{font-size:var(--mt-fs-md);color:var(--mt-on-navy-soft)}
.mt-feature__price small,.mt-feature__price .mediatrade-price-pair__gross{color:var(--mt-on-navy-muted)}
.mt-feature__price del{color:var(--mt-on-navy-muted)}
.mt-feature__price ins{text-decoration:none}
.mt-feature__media{display:grid;place-items:center;min-block-size:14rem;padding:1.5rem;background:var(--mt-mist)}
.mt-feature__media img{inline-size:100%;max-inline-size:13rem;block-size:auto;max-block-size:12.5rem;margin:0;object-fit:contain;mix-blend-mode:multiply}
@container (min-width:56rem){
  .mt-feature{grid-column:span 2;grid-template-columns:minmax(0,377fr) minmax(0,260fr)}
}

/* Kategorian nostot: kuva + tekstilaatikko, vuorotellen laidasta laitaan */
.mt-highlights{display:grid;gap:var(--mt-space-md);padding-block:var(--mt-space-section) 0}
.mt-highlight{display:grid;overflow:hidden;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white)}
.mt-highlight__media{min-block-size:14rem;background:var(--mt-mist)}
.mt-highlight__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.mt-highlight__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.875rem;padding:var(--mt-space-lg)}
.mt-highlight__copy>*{margin:0}
.mt-highlight__title{font:400 var(--mt-fs-h3)/1.2 var(--mt-font-display);color:var(--mt-white);overflow-wrap:anywhere}
.mt-highlight__text{display:grid;gap:.75rem;color:var(--mt-on-navy-soft)}
.mt-highlight__text>*{margin:0}
.mt-highlight__contact{font-weight:500;color:var(--mt-white)}
.mt-highlight__contact a{display:inline-flex;align-items:center;min-block-size:1.5rem;color:var(--mt-white);text-underline-offset:.2em}
@container (min-width:56rem){
  .mt-highlight{grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-block-size:22rem}
  .mt-highlight--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .mt-highlight--flip .mt-highlight__media{order:2}
  .mt-highlight--text,.mt-highlight--text.mt-highlight--flip{grid-template-columns:1fr;min-block-size:0}
  .mt-highlight__media{position:relative}
  .mt-highlight__media img{position:absolute;inset:0}
  .mt-highlight__copy{padding:var(--mt-space-xl)}
}

/* Kategorian artikkelit */
.mt-articles__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem 1.5rem}
.mt-articles__head>h2{margin:0}
.mt-articles__cards{display:grid;gap:var(--mt-space-md);margin:var(--mt-space-md) 0 0;padding:0;list-style:none}
@container (min-width:48rem){.mt-articles__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mt-space-lg) 1.5rem}}

/* Pitkä kuvaus ja asiantuntija */
.mt-cat-about{margin-block-start:var(--mt-space-section);padding-block:var(--mt-space-section-lg);background:var(--mt-blush)}
.mt-cat-about__layout{display:grid;gap:var(--mt-space-lg)}
.mt-cat-about__media img{display:block;inline-size:100%;block-size:auto;aspect-ratio:520/440;object-fit:cover;border-radius:var(--mt-radius)}
.mt-cat-about__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem}
.mt-cat-about__copy>*{margin:0}
@container (min-width:56rem){
  .mt-cat-about__layout{grid-template-columns:minmax(0,520fr) minmax(0,680fr);gap:4rem;align-items:center}
  .mt-cat-about__layout--plain{grid-template-columns:1fr}
}
.mt-expert{padding-block:var(--mt-space-section) 0}

/* Haku */
.mt-search-head{padding-block:var(--mt-space-lg) 0}
.mt-search-head__title{margin-block:.5rem;font-size:calc(var(--mt-fs-h1) * 1);overflow-wrap:anywhere}
.mt-search-head__summary{margin:0;font-size:var(--mt-fs-lg);color:var(--mt-muted)}
.mt-brandtile{padding-block:var(--mt-space-md) 0}
.mt-brandtile__box{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;padding:1.25rem 1.75rem;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white)}
.mt-brandtile__box>.mt-icon{color:var(--mt-coral)}
.mt-brandtile__copy{flex:1;min-inline-size:12rem}
.mt-brandtile__copy h2{margin:0;font:400 var(--mt-fs-h3)/1.15 var(--mt-font-display)}
.mt-brandtile__copy p{margin:.125rem 0 0;font-size:var(--mt-fs-md);color:var(--mt-on-navy-muted)}
.mt-brandtile .mt-pills{margin-block-start:.75rem}
.mt-tabs{padding-block:var(--mt-space-md) 0}
.mt-tabs ul{display:flex;flex-wrap:wrap;gap:0 2rem;margin:0;padding:0;border-block-end:.0625rem solid var(--mt-line);list-style:none}
.mt-tabs a{display:inline-flex;align-items:center;min-block-size:2.75rem;margin-block-end:-.0625rem;border-block-end:.125rem solid transparent;color:var(--mt-muted);font:500 var(--mt-fs-xs)/1.3 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;text-decoration:none}
.mt-tabs a:hover{color:var(--mt-ink)}
.mt-tabs a[aria-current]{border-color:var(--mt-coral-strong);color:var(--mt-ink)}
.mt-results{padding-block:var(--mt-space-md) 0}
.mt-quick{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.mt-quick__pill{display:inline-flex;align-items:center;min-block-size:2.375rem;padding:.5rem .875rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius-pill);color:var(--mt-ink);font:500 var(--mt-fs-md)/1.3 var(--mt-font-body);text-decoration:none}
.mt-quick__pill.is-on{border-color:var(--mt-navy);background:var(--mt-blush)}
.mt-quick__pill:hover{border-color:var(--mt-navy)}
.mt-articles{padding-block:var(--mt-space-section) 0}
.mt-articles__list{display:grid;gap:1.25rem 1.5rem;margin:var(--mt-space-md) 0 0;padding:0;list-style:none}
@container (min-width:56rem){.mt-articles__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mt-article{display:flex;gap:1rem;align-items:center}
.mt-article__media{flex:none;inline-size:7.5rem;aspect-ratio:10/7;overflow:hidden;border-radius:.375rem;background:var(--mt-mist)}
.mt-article__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.mt-article__copy{display:flex;flex-direction:column;gap:.25rem;min-inline-size:0}
.mt-article__meta{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-article__link{display:inline-block;min-block-size:1.5rem;font:500 var(--mt-fs-base)/1.35 var(--mt-font-body);color:var(--mt-ink);text-decoration:none;overflow-wrap:anywhere}
.mt-article__link:hover{color:var(--mt-coral-strong);text-decoration:underline}