/* Ship-To homepage and first-order guide */
.mx { --mx-orange:#ff7435; --mx-cream:#fff4df; --mx-night:#222024; --mx-ink:#1f1b1a; --mx-line:#302b28; --mx-border:var(--shto-line); }
.mx-wrap { width:min(100%,1240px); margin-inline:auto; padding-inline:clamp(16px,3.2vw,46px); }
.mx h1,.mx h2,.mx h3 { text-wrap:balance }
.mx a:focus-visible { outline:3px solid #bd4605; outline-offset:4px }
.mx-kicker { display:block; margin:0 0 .5rem; color:var(--shto-act); font-size:.76rem; letter-spacing:.13em; font-weight:800; text-transform:uppercase }
.mx-jump { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-underline-offset:4px }
.mx-links { display:flex; flex-wrap:wrap; gap:0 1rem; align-items:center; margin-top:.3rem }
.mx-hero { color:#fff7ea; background:var(--mx-night); border-bottom:4px solid var(--mx-orange); overflow:hidden }
.mx-hero .mx-wrap { display:grid; grid-template-columns:1.22fr 1fr; align-items:center; gap:clamp(20px,4vw,66px); padding-block:clamp(26px,3vw,42px) }
.mx-hero h1 { color:inherit; max-width:12ch; margin:0 0 .55rem; font-size:clamp(2.65rem,5.3vw,4.75rem); letter-spacing:-.064em; line-height:.96; text-wrap:initial }
.mx-hero h1 span { color:#ff9862 }
.mx-hero .mx-kicker,.mx-hero .mx-jump { color:#ffc39e }
.mx-hero p { max-width:46ch; margin:0 0 1rem; color:#eee2d6; font-size:clamp(.98rem,1.4vw,1.15rem) }
.mx-hero .shto-search { margin:0; background:#fffaf3; border-color:#f4d8bf; color-scheme:light }
.mx-hero .shto-search input { color:#261e1b }
.mx-hero .shto-search button { background:#b33908; color:white }
.mx-label { position:relative; min-height:267px; padding:1rem 1.2rem; background:#ffb16f; color:var(--mx-ink); border:2px solid #160e0a; border-radius:18px; box-shadow:6px 6px 0 #ff7435; isolation:isolate }
.mx-label:before { position:absolute; content:""; z-index:-1; inset:0; border-radius:inherit; background:radial-gradient(#7e3c2b 1px,transparent 1.5px) 0 0 / 12px 12px; opacity:.28 }
.mx-label-head { display:flex; justify-content:space-between; gap:.7rem; padding-bottom:.35rem; border-bottom:1px solid; font:700 .75rem/1.2 var(--shto-mono); text-transform:uppercase; letter-spacing:.045em }
.mx-delivery { position:relative; display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; min-height:162px; text-align:center }
.mx-delivery:before { content:""; position:absolute; z-index:-1; left:10%; right:10%; top:50%; border-top:3px dashed #4b2d1f }
.mx-stop { justify-self:center; display:grid; place-items:center; width:47px; aspect-ratio:1; background:var(--mx-cream); border:2px solid var(--mx-ink); border-radius:50%; font-weight:800 }
.mx-parcel { width:clamp(95px,14vw,194px); height:auto; margin:auto; filter:drop-shadow(4px 6px 0 #cb6f3c); transform:rotate(-8deg) }
.mx-label-foot { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding-top:.55rem; border-top:1px solid; font-size:.79rem; font-weight:700 }
.mx-label-foot span:last-child { text-align:right }
.mx-block { padding-block:clamp(28px,4.5vw,65px); border-bottom:1px solid var(--mx-border) }
.mx-block h2,.mx-guide h2 { margin:0 0 .45rem; font-size:clamp(1.9rem,3.5vw,3rem); letter-spacing:-.035em }
.mx-block p { margin-bottom:.7rem }
.mx-section-top { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:.45rem 1.5rem; margin-bottom:1rem }
.mx-section-top p { margin:0; color:var(--shto-ink2) }
.mx-categories { padding-top:clamp(22px,2.6vw,35px); background:var(--shto-paper) }
.mx-shelves { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(8px,1vw,14px); list-style:none; padding:0; margin:0 }
.mx-shelves li { min-width:0 }
.mx-catalogue-link { display:flex; justify-content:center; margin-top:.9rem }
.mx-card { position:relative; display:grid; grid-template-rows:auto 1fr; align-items:center; justify-items:center; height:100%; min-height:120px; padding:.38rem .35rem .45rem; color:var(--mx-ink); background:#fff4dd; border:1.5px solid var(--mx-line); border-radius:12px; text-decoration:none; box-shadow:0 3px 0 var(--mx-line); transition:transform .18s ease,box-shadow .18s ease }
.mx-shelves li:nth-child(4n+2) .mx-card { background:#f7e6db }
.mx-shelves li:nth-child(4n+3) .mx-card { background:#deebf3 }
.mx-shelves li:nth-child(4n+4) .mx-card { background:#e2eddf }
.mx-card:after { position:absolute; content:"↗"; right:.37rem; top:.23rem; font-size:.82rem; line-height:1; font-weight:800 }
.mx-card .mx-icon { width:clamp(45px,5vw,65px); height:auto; overflow:visible; stroke:#26211e; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .24s cubic-bezier(.2,.7,.3,1.5); }
.mx-card-label { text-align:center; font-weight:800; font-size:clamp(.81rem,1.18vw,.97rem); line-height:1.22; overflow-wrap:anywhere }
.mx-card:is(:hover,:focus-visible) { color:var(--mx-ink); transform:translateY(-3px); box-shadow:0 6px 0 var(--mx-line); text-decoration:underline }
.mx-card:is(:hover,:focus-visible) .mx-icon { transform:translateY(-3px) rotate(-9deg) scale(1.09) }
.mx-card:active .mx-icon { transform:scale(.92) }
.mx-why { background:var(--shto-card) }
.mx-why .mx-wrap,.mx-guide-teaser .mx-wrap { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(17px,4vw,65px); align-items:start }
.mx-reasons { list-style:none; margin:0; padding:0; counter-reset:reason }
.mx-reasons li { display:grid; grid-template-columns:2.25rem 1fr; column-gap:.8rem; padding-block:.75rem; border-top:1px dashed var(--mx-border); counter-increment:reason }
.mx-reasons li:before { content:"0" counter(reason); grid-row:span 2; align-self:start; padding:.24rem .25rem; text-align:center; border:1px solid var(--mx-border); border-radius:5px; color:var(--shto-act); font-weight:700 }
.mx-reasons h3 { margin:0 0 .14rem }
.mx-reasons li p { margin:0; color:var(--shto-ink2) }
.mx-guide-teaser { background:#ffe3c9; color:var(--mx-ink) }
.mx-guide-teaser h2,.mx-guide-teaser .mx-kicker { color:var(--mx-ink) }
.mx-guide-teaser .mx-jump { color:#8b2e07 }
.mx-screen-link { position:relative; display:block; overflow:hidden; border:2px solid #30221d; border-radius:12px; box-shadow:5px 5px 0 #9b4b2b }
.mx-screen-link img { display:block; width:100%; height:auto }
.mx-screen-link b { position:absolute; bottom:.5rem; left:.5rem; display:inline-flex; gap:.45rem; align-items:center; padding:.45rem .7rem; background:#272025; color:#fff6e9; border-radius:5px }
.mx-guide { max-width:none }
.mx-guide-head { padding-block:clamp(26px,4vw,50px); background:var(--shto-slate-bg); border-bottom:1px solid var(--mx-border) }
.mx-guide-head h1 { max-width:21ch; font-size:clamp(2.1rem,4.8vw,4.1rem); line-height:.99; letter-spacing:-.045em }
.mx-guide-head p { max-width:60ch; margin:0 }
.mx-guide-head nav { display:flex; flex-wrap:wrap; gap:0 1rem; margin-top:.4rem }
.mx-guide-section { padding-block:clamp(28px,4vw,56px); scroll-margin-top:1rem; border-bottom:1px solid var(--mx-border) }
.mx-guide-video { display:grid; grid-template-columns:1fr minmax(0,1.9fr); align-items:start; gap:clamp(16px,4vw,52px) }
.mx-guide iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; border:0; border-radius:10px; background:#241c18 }
.mx-guide .mx-note { color:var(--shto-ink2); font-size:.95rem }
.mx-steps { list-style:none; padding:0; margin:1.25rem 0 0; counter-reset:guide-step }
.mx-steps li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.46fr); align-items:center; gap:clamp(15px,4vw,60px); margin:0; padding-block:clamp(20px,3.2vw,44px); border-top:1px solid var(--mx-border); counter-increment:guide-step; scroll-margin-top:1rem }
.mx-steps li h3 { font-size:clamp(1.25rem,2.5vw,1.85rem); letter-spacing:-.022em; margin:0 0 .55rem }
.mx-steps li h3:before { content:"0" counter(guide-step); display:inline-grid; place-items:center; min-width:2.2rem; min-height:2.1rem; margin-right:.6rem; padding:0 .4rem; color:#302017; background:#ffbc87; border:1px solid #ab602c; border-radius:6px; font-size:1rem; }
.mx-steps li p { max-width:54ch; margin:0 0 .5rem }
.mx-steps figure { margin:0; min-width:0 }
.mx-steps figure a { display:block; overflow:hidden; border:1px solid var(--mx-border); border-radius:8px; background:white }
.mx-steps img { display:block; width:100%; height:auto }
.mx-steps figcaption { padding-top:.32rem; color:var(--shto-ink2); font-size:.86rem }
.mx-guide .mx-follow { padding-block:1.2rem 2rem }
.mx-guide .mx-follow h2 { font-size:1.5rem }
@media (max-width:980px) {
 .mx-shelves { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (max-width:650px) {
 .mx-hero .mx-wrap,.mx-why .mx-wrap,.mx-guide-teaser .mx-wrap,.mx-guide-video,.mx-steps li { grid-template-columns:minmax(0,1fr) }
 .mx-label { display:none }
 .mx-hero .mx-wrap { padding-block:25px 20px }
 .mx-hero h1 { max-width:none }
 .mx-hero p { margin-bottom:.75rem }
 .mx-hero .shto-search { padding:5px }
 .mx-hero .shto-search input,.mx-hero .shto-search button { min-height:44px; padding-inline:10px; font-size:1rem }
 .mx-shelves { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:10px }
 .mx-card { grid-template-columns:48px minmax(0,1fr); grid-template-rows:1fr; padding:.23rem .75rem .23rem .25rem; min-height:56px; column-gap:.25rem; justify-items:start }
 .mx-card-label { text-align:left }
 .mx-card .mx-icon { width:46px }
 .mx-guide-video { gap:.8rem }
}
@media (max-width:450px) {
 body:has(.mx) .shto-top__in { padding-inline:14px; gap:9px }
 body:has(.mx) .shto-brand__name { max-width:138px; font-size:.72rem }
 body:has(.mx) .shto-menu { padding-inline:10px }
}
@media (max-width:360px) {
 body:has(.mx) .shto-top .brandmark img { width:96px }
 body:has(.mx) .shto-brand__name { max-width:108px }
 .mx-hero h1 { font-size:2.35rem }
 .mx-hero .mx-links { column-gap:.7rem }
}
@media (prefers-reduced-motion:reduce) {
 .mx-card,.mx-card .mx-icon { transition:none }
 .mx-card:is(:hover,:focus-visible),.mx-card:is(:hover,:focus-visible) .mx-icon,.mx-card:active .mx-icon { transform:none }
}

@media (min-width:1140px) and (max-width:1220px) {
 body:has(.mx) .shto-top__in { flex-wrap:wrap }
 .js body:has(.mx) .shto-menu { display:block }
 body:has(.mx) .shto-nav { width:100%; margin:0 }
 .js body:has(.mx) .shto-nav { display:none }
 .js body:has(.mx) .shto-nav.is-open { display:block }
 .js body:has(.mx) .shto-nav ul { flex-direction:column }
}

/* Give the first four shelves room for a horizontal label on wider screens. */
@media (min-width:981px) {
 .mx-shelves { grid-template-columns:repeat(12,minmax(0,1fr)) }
 .mx-shelves li { grid-column:span 2 }
 .mx-shelves li:nth-child(-n+4) { grid-column:span 3 }
 .mx-shelves li:nth-child(-n+4) .mx-card {
  grid-template-columns:68px minmax(0,1fr);
  grid-template-rows:1fr;
  justify-items:start;
  gap:.8rem;
  min-height:94px;
  padding:.55rem 1rem;
 }
 .mx-shelves li:nth-child(-n+4) .mx-card-label { font-size:1.05rem; text-align:left }
}