/* Uuden ilmeen kaupan kuori: header, haku, kategoriarivi, megavalikko. Tuotekortti on jaettu komponentti: components/product-card.css.
   Ladataan kaikissa kaupan näkymissä. Tokenit: tokens.css. WooCommercen omia tyylejä ei oleteta:
   kaikki ulkoasu määrätään tässä (luokat mt-shop-header, mt-search, mt-rail, mt-mega, mt-card). */

/* Jaetut pienet osat */
.mt-crumbs{padding-block:1.25rem 0;font-size:var(--mt-fs-sm);color:var(--mt-muted)}
.mt-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0;padding:0;list-style:none}
.mt-crumbs li{display:inline-flex;align-items:center;gap:.5rem}
.mt-crumbs a{display:inline-flex;align-items:center;min-block-size:1.5rem;color:inherit;text-decoration:none}
.mt-crumbs a:hover{color:var(--mt-ink);text-decoration:underline}
.mt-crumbs [aria-current]{color:var(--mt-ink);font-weight:500}

/* Header */
.mt-shop-header.mt-header{position:relative;z-index:50;background:var(--mt-white);color:var(--mt-ink)}
.mt-shop-header.mt-header a{color:inherit;text-decoration:none}
.mt-shop-header__utility{display:none;background:var(--mt-navy);color:var(--mt-on-navy-soft);font-size:var(--mt-fs-sm)}
.mt-shop-header__utility-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-block-size:2.25rem}
.mt-shop-header__links{display:flex;gap:1.5rem;margin:0;padding:0;list-style:none}
.mt-shop-header__links a,.mt-shop-header__lang a{display:inline-flex;align-items:center;min-block-size:1.5rem}
.mt-shop-header__links a:hover,.mt-shop-header__lang a:hover{color:var(--mt-white);text-decoration:underline}
.mt-shop-header__lang{display:flex}
.mt-shop-header__lang a{justify-content:center;min-inline-size:1.5rem}
.mt-shop-header__lang a+a::before{content:"/";margin-inline:.25rem}
.mt-shop-header__lang a[aria-current]{color:var(--mt-white)}
.mt-shop-header__main{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo tools" "search search";align-items:center;gap:.75rem 1rem;padding-block:.875rem}
.mt-shop-header__logo{grid-area:logo;display:inline-flex;justify-self:start}
.mt-shop-header__logo{flex:none}
.mt-shop-header__logo img{display:block;inline-size:8rem;min-inline-size:6rem;block-size:auto}
.mt-shop-header__tools{grid-area:tools;display:flex;align-items:center;justify-self:end;gap:1rem}
.mt-shop-header__account{display:inline-flex;justify-content:center;min-inline-size:2.75rem;align-items:center;gap:.5rem;min-block-size:2.75rem;font:500 var(--mt-fs-md)/1.5 var(--mt-font-body)}
.mt-shop-header__account span{display:none;max-inline-size:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-shop-header__account:hover{color:var(--mt-coral-strong)}
.mt-shop-header .mt-shop-header__menu{display:inline-flex;align-items:center;gap:.5rem;min-block-size:2.75rem;padding:.5rem .875rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius-pill);background:none;color:var(--mt-ink)}
.mt-shop-header__menu .mt-icon{inline-size:1.25rem;block-size:1.25rem}

/* Mini-cart (WooCommercen lohko): vain kuvake ja määrä */
.mt-shop-header__cart{display:flex;align-items:center}
.mt-shop-header .mt-shop-header__cart .wc-block-mini-cart__button{display:inline-flex;align-items:center;justify-content:center;min-inline-size:2.75rem;min-block-size:2.75rem;padding:.25rem;border:0;border-radius:var(--mt-radius-pill);background:none;color:var(--mt-ink);cursor:pointer;gap:0}
.mt-shop-header__cart .wc-block-mini-cart__button:hover{background:var(--mt-mist);opacity:1}
.mt-shop-header__cart .wc-block-mini-cart__amount{display:none}
.mt-shop-header__cart .wc-block-mini-cart__quantity-badge{position:relative;display:inline-flex;align-items:center}
.mt-shop-header__cart .wc-block-mini-cart__icon{inline-size:1.375rem;block-size:1.375rem;fill:currentColor}
.mt-shop-header__cart .wc-block-mini-cart__badge{position:absolute;inset-block-start:-.625rem;inset-inline-end:-.75rem;display:inline-grid;place-items:center;min-inline-size:1.125rem;block-size:1.125rem;padding-inline:.25rem;border-radius:var(--mt-radius-pill);background-color:var(--mt-coral-strong)!important;color:var(--mt-white)!important;font:500 var(--mt-fs-2xs)/1 var(--mt-font-body)}
/* Mini-cart-lohko asettaa merkin värit inline-tyylillä (state.badgeBackgroundColor) ja näyttää sen myös tyhjällä korilla: väri ohitetaan ja tyhjä merkki piilotetaan */
.mt-shop-header__cart .wc-block-mini-cart__badge[hidden]{display:none}

/* Haku */
.mt-search{grid-area:search;position:relative;min-inline-size:0;display:flex;align-items:center;gap:.5rem;min-block-size:2.875rem;padding-inline:1.125rem .25rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius-pill);background:var(--mt-white)}
.mt-search:focus-within{border-color:var(--mt-navy)}
.mt-search__scope{position:relative;display:inline-flex;align-items:center;gap:.25rem;padding-inline-end:.75rem;border-inline-end:.0625rem solid var(--mt-line)}
.mt-search__scope select{appearance:none;max-inline-size:6.5rem;min-block-size:2.5rem;padding:0 .25rem 0 0;border:0;background:none;color:var(--mt-ink);font:500 var(--mt-fs-md)/1.5 var(--mt-font-body);cursor:pointer}
.mt-search__scope .mt-icon{pointer-events:none}
/* Valitsimen kohdistus: ei selaimen suorakulmiota, vaan koko hakukentän kehys kuten tekstikentässä. */
.mt-search .mt-search__scope select:focus,.mt-search .mt-search__scope select:focus-visible{outline:0;box-shadow:none}
.mt-search:has(.mt-search__scope select:focus-visible){outline:.1875rem solid var(--mt-coral);outline-offset:.1875rem}
.mt-search__scope:hover select,.mt-search__scope select:open{color:var(--mt-coral-strong)}
.mt-search__scope:has(select:open) .mt-icon{transform:rotate(180deg)}
.mt-search__scope .mt-icon{transition:transform var(--mt-transition)}
/* Avattava lista sivuston tyylillä selaimissa, jotka tukevat muokattavaa selectiä; muissa selaimen oma lista. */
@supports (appearance:base-select){
  .mt-search__scope select,.mt-search__scope select::picker(select){appearance:base-select}
  .mt-search__scope select{display:inline-flex;align-items:center}
  .mt-search__scope select::picker-icon{display:none}
  .mt-search__scope select::picker(select){min-inline-size:13rem;margin-block-start:.75rem;padding:.375rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius);background:var(--mt-white);box-shadow:var(--mt-shadow);opacity:0;translate:0 -.25rem;transition:opacity var(--mt-transition),translate var(--mt-transition),display var(--mt-transition) allow-discrete,overlay var(--mt-transition) allow-discrete}
  .mt-search__scope select:open::picker(select){opacity:1;translate:0 0}
  @starting-style{.mt-search__scope select:open::picker(select){opacity:0;translate:0 -.25rem}}
  .mt-search__scope option{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:2.5rem;padding:.5rem .75rem;border-radius:var(--mt-radius-sm);color:var(--mt-ink);font:400 var(--mt-fs-md)/1.4 var(--mt-font-body);cursor:pointer}
  .mt-search__scope option:hover,.mt-search__scope option:focus-visible{background:var(--mt-blush);color:var(--mt-coral-strong);outline:0}
  .mt-search__scope option:checked{background:var(--mt-mist);font-weight:500}
  .mt-search__scope option::checkmark{order:2;content:"";inline-size:.4rem;block-size:.7rem;margin-inline-end:.25rem;border:solid var(--mt-coral-strong);border-width:0 .125rem .125rem 0;rotate:45deg}
  .mt-search__scope option:not(:checked)::checkmark{display:none}
}
/* Oma osastolista (shop.js): sama ulkoasu kaikissa selaimissa. Ilman JavaScriptiä ja kosketuslaitteilla selaimen oma select. */
.mt-search__scope--custom select{display:none}
.mt-search__scope--custom{position:relative}
.mt-scope__button{appearance:none;max-inline-size:8rem;min-block-size:2.5rem;padding:0 .25rem 0 0;border:0;background:none;color:var(--mt-ink);font:500 var(--mt-fs-md)/1.5 var(--mt-font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.mt-shop-header .mt-search .mt-scope__button:not(:disabled){padding:0 .25rem 0 0;border:0;border-radius:0;background:none;color:var(--mt-ink)}
.mt-shop-header .mt-search__scope:hover .mt-scope__button:not(:disabled),.mt-shop-header .mt-search__scope.is-open .mt-scope__button:not(:disabled){background:none;color:var(--mt-coral-strong)}
.mt-search .mt-scope__button:focus,.mt-search .mt-scope__button:focus-visible{outline:0;box-shadow:none}
.mt-search:has(.mt-scope__button:focus-visible),.mt-search:has(.mt-scope__list:focus-visible){outline:.1875rem solid var(--mt-coral);outline-offset:.1875rem}
.mt-search__scope.is-open .mt-icon{transform:rotate(180deg)}
.mt-scope__list{position:absolute;inset-block-start:calc(100% + .75rem);inset-inline-start:-1.125rem;z-index:60;min-inline-size:13rem;margin:0;padding:.375rem;border:.0625rem solid var(--mt-line);border-radius:var(--mt-radius);background:var(--mt-white);box-shadow:var(--mt-shadow);list-style:none}
.mt-scope__list:focus{outline:0}
.mt-scope__option{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:2.5rem;padding:.5rem .75rem;border-radius:var(--mt-radius-sm);color:var(--mt-ink);font:400 var(--mt-fs-md)/1.4 var(--mt-font-body);cursor:pointer}
.mt-scope__option.is-active{background:var(--mt-blush);color:var(--mt-coral-strong)}
.mt-scope__option[aria-selected=true]{font-weight:500}
.mt-scope__option[aria-selected=true]:not(.is-active){background:var(--mt-mist)}
.mt-scope__option[aria-selected=true]::after{content:"";inline-size:.4rem;block-size:.7rem;margin-inline-end:.25rem;border:solid var(--mt-coral-strong);border-width:0 .125rem .125rem 0;rotate:45deg}
@media (prefers-reduced-motion:reduce){.mt-search__scope select::picker(select),.mt-search__scope .mt-icon{transition:none}}
.mt-search__input{flex:1;min-inline-size:0;min-block-size:2.5rem;padding:0;border:0;border-radius:0;background:none;color:var(--mt-ink);font:400 var(--mt-fs-md)/1.5 var(--mt-font-body)}
.mt-search__input::placeholder{color:var(--mt-muted);opacity:1}
.mt-search .mt-search__input:focus,.mt-search .mt-search__input:focus-visible{outline:0;box-shadow:none;border:0}
.mt-search:has(.mt-search__input:focus-visible){outline:.1875rem solid var(--mt-coral);outline-offset:.1875rem}
.mt-shop-header .mt-search .mt-search__submit:not(:disabled){display:inline-grid;place-items:center;flex:none;inline-size:2.5rem;block-size:2.5rem;padding:0;border:0;border-radius:50%;background:none;color:var(--mt-ink);cursor:pointer}
.mt-shop-header .mt-search .mt-search__submit:not(:disabled):hover{background:var(--mt-mist);color:var(--mt-ink)}
.mt-shop-scrim{position:fixed;inset:0;z-index:40;background:color-mix(in oklch,var(--mt-navy) 25%,transparent)}
.mt-shop-scrim[hidden]{display:none}

/* Kategoriarivi */
.mt-rail{display:none;border-block-start:.0625rem solid var(--mt-line);border-block-end:.0625rem solid var(--mt-line)}
.mt-shop-header:has(.mt-shop-header__menu[aria-expanded=true]) .mt-rail{display:block}
.mt-rail__list{display:grid;margin:0 auto;padding:.5rem 0 1rem;list-style:none}
.mt-rail__item{position:relative;display:flex;flex-wrap:wrap;align-items:center}
.mt-rail__link{display:flex;flex:1;align-items:center;gap:.875rem;min-block-size:3rem;font:500 var(--mt-fs-base)/1.3 var(--mt-font-body);color:var(--mt-ink)}
.mt-rail__icon{display:inline-grid;place-items:center;flex:none;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;background:var(--mt-blush);color:var(--mt-coral-strong);transition:background-color var(--mt-transition),color var(--mt-transition)}
.mt-rail__link:hover .mt-rail__icon,.mt-rail__link[aria-current] .mt-rail__icon,.mt-rail__item--outlet .mt-rail__icon{background:var(--mt-coral-strong);color:var(--mt-white)}
.mt-rail__item--outlet .mt-rail__link{color:var(--mt-coral-strong)}
.mt-rail .mt-rail__toggle{display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;padding:0;border:0;border-radius:50%;background:none;color:var(--mt-ink);cursor:pointer}
.mt-rail__toggle .mt-icon{transition:transform var(--mt-transition)}
.mt-rail__toggle[aria-expanded=true] .mt-icon{transform:rotate(180deg)}

/* Megavalikko: mobiilissa haitari, työpöydällä koko leveyden paneeli */
.mt-mega{display:none;inline-size:100%;padding:.25rem 0 .75rem 3.5rem}
.mt-rail__toggle[aria-expanded=true]+.mt-mega{display:block}
.mt-mega__inner{display:block}
.mt-mega__col--brands,.mt-mega__col--promo,.mt-mega__bar{display:none}
.mt-mega__label{margin:0 0 .25rem;font:500 var(--mt-fs-2xs)/1.3 var(--mt-font-display);letter-spacing:var(--mt-tracking-caps);text-transform:uppercase;color:var(--mt-muted)}
.mt-mega__list{display:grid;gap:.25rem;margin:0;padding:0;list-style:none}
.mt-mega__list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:2.75rem;padding:.5rem .875rem;border-radius:var(--mt-radius-sm);font:400 var(--mt-fs-base)/1.4 var(--mt-font-body);color:var(--mt-ink)}
.mt-mega__list a .mt-icon{opacity:0;color:var(--mt-coral-strong)}
.mt-mega__list a:hover,.mt-mega__list a:focus-visible{background:var(--mt-blush);color:var(--mt-coral-strong);font-weight:500}
.mt-mega__list a:hover .mt-icon,.mt-mega__list a:focus-visible .mt-icon{opacity:1}

@media (max-width:39.99rem){.mt-shop-header__menu span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.mt-shop-header .mt-shop-header__menu{padding-inline:.75rem}.mt-shop-header__tools{gap:.25rem}}
@media (min-width:40rem){.mt-shop-header__account span{display:inline}}
@media (min-width:68rem){
  .mt-shop-header__utility{display:block}
  .mt-shop-header__main{grid-template-columns:1fr minmax(0,35rem) 1fr;grid-template-areas:"logo search tools";gap:1.5rem;padding-block:1.3125rem}
  .mt-shop-header .mt-shop-header__menu{display:none}
  .mt-search{min-block-size:2.875rem}
  .mt-suggest{inset-inline:-2.125rem}
  .mt-suggest__hint{display:flex}
  .mt-rail{display:block;position:static;padding-block:.5rem .75rem}
  .mt-rail__list{display:flex;justify-content:space-between;gap:.5rem;padding:0;overflow:visible}
  .mt-rail__item{position:static;display:block;flex:0 1 auto;min-inline-size:6rem}
  .mt-rail__link{flex-direction:column;gap:.5rem;min-block-size:0;font-size:var(--mt-fs-sm);text-align:center}
  .mt-rail__icon{inline-size:3rem;block-size:3rem}
  .mt-rail__label{font-weight:500}
  /* Tabulaattoriteitse: vaihtopainike on näkyvissä vain kohdistettuna */
  .mt-rail__toggle{position:absolute;inset-block-start:0;inset-inline-end:0;inline-size:1.5rem;block-size:1.5rem;opacity:0}
  .mt-rail__toggle:focus-visible{opacity:1;background:var(--mt-white)}
  .mt-mega{position:absolute;inset-inline:0;inset-block-start:100%;z-index:55;padding:0;border-block-start:.0625rem solid var(--mt-line);background:var(--mt-white);box-shadow:var(--mt-shadow)}
  .mt-mega__inner{display:grid;grid-template-columns:20rem 15rem minmax(0,1fr);gap:3rem;padding-block:2rem}
  .mt-mega__col--brands,.mt-mega__col--promo{display:block}
  .mt-mega__col--promo{display:flex;flex-direction:column;gap:1rem}
  .mt-mega__label{margin-block-end:.5rem;padding-inline:.875rem}
  .mt-shop-header .mt-mega__tile{position:relative;display:flex;align-items:flex-end;min-block-size:13.75rem;padding:1.5rem;border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white);overflow:hidden}
  .mt-mega__tile img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
  .mt-mega__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in oklch,var(--mt-navy) 85%,transparent),var(--mt-navy-0) 70%)}
  .mt-mega__tile-copy{position:relative;z-index:1;display:grid;gap:.5rem}
  .mt-mega__tile .mt-eyebrow{color:var(--mt-coral-on-navy)}
  /* Valikon yleinen linkkiväri on tumma: laatan teksti pysyy valkoisena tummalla pohjalla myös hoverissa. */
.mt-header .mt-mega .mt-mega__tile,.mt-header .mt-mega .mt-mega__tile:hover,.mt-header .mt-mega .mt-mega__tile:focus-visible{color:var(--mt-white)}
.mt-mega__tile-title{font:400 var(--mt-fs-h3)/1.15 var(--mt-font-display);letter-spacing:-.03125rem}
  .mt-mega .mt-experts--compact{display:flex;align-items:center;gap:.875rem;padding:1rem;border:0;border-radius:var(--mt-radius);background:var(--mt-mist)}
  .mt-mega .mt-experts--compact .mt-experts__faces{display:flex;flex:none;margin:0;padding:0;list-style:none}
  .mt-mega .mt-experts--compact .mt-experts__faces li+li{margin-inline-start:-.75rem}
  .mt-mega .mt-experts--compact .mt-experts__faces img{display:block;inline-size:2.5rem;block-size:2.5rem;border:.125rem solid var(--mt-mist);border-radius:50%;object-fit:cover}
  .mt-mega .mt-experts--compact .mt-experts__copy{display:grid}
  .mt-mega .mt-experts--compact .mt-experts__title{font:500 var(--mt-fs-base)/1.4 var(--mt-font-body)}
  .mt-mega .mt-experts--compact .mt-experts__names{display:none}
  .mt-mega .mt-experts--compact .mt-experts__phone{font-size:var(--mt-fs-sm);color:var(--mt-text)}
  .mt-mega .mt-experts--compact .mt-experts__phone:hover{color:var(--mt-coral-strong)}
  .mt-mega .mt-experts--compact .mt-experts__links{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
  .mt-mega .mt-experts--compact .mt-experts__contact{font-size:var(--mt-fs-sm);color:var(--mt-navy);text-decoration:underline;text-underline-offset:.2em}
  .mt-mega .mt-experts--compact .mt-experts__contact:hover{color:var(--mt-coral-strong)}
  .mt-mega__bar{display:block;border-block-start:.0625rem solid var(--mt-line)}
  .mt-mega__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
  .mt-mega__quick{display:flex;gap:1.75rem;margin:0;padding:0;list-style:none}
  .mt-mega__quick a{display:inline-flex;align-items:center;min-block-size:1.5rem;font:500 var(--mt-fs-md)/1.5 var(--mt-font-body);color:var(--mt-navy)}
  .mt-mega__quick a:hover{color:var(--mt-coral-strong)}
  .mt-rail__item--mega:hover>.mt-mega,.mt-rail__toggle[aria-expanded=true]+.mt-mega{display:block}
  .mt-rail__item--mega[data-dismissed]>.mt-mega{display:none}
}

/* Ostoskorin tilailmoitus (shop.js): live-alue, näkyy vain kun sisältöä on. */
.mt-cart-status{position:fixed;inset-block-end:var(--mt-space-md);inset-inline-end:var(--mt-space-md);z-index:60;display:none;align-items:center;flex-wrap:wrap;gap:var(--mt-space-xs) var(--mt-space-sm);max-inline-size:min(24rem,calc(100vw - 2rem));padding:var(--mt-space-sm) var(--mt-space-md);border-radius:var(--mt-radius);background:var(--mt-navy);color:var(--mt-white);box-shadow:var(--mt-shadow);font:500 var(--mt-fs-sm)/1.4 var(--mt-font-body)}
.mt-cart-status[data-open]{display:flex}
.mt-cart-status__link{color:var(--mt-white);font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.mt-cart-status--error{outline:.125rem solid var(--mt-white);outline-offset:-.25rem}