/* Max24 — Mänguväljak. A sunny playground: the page is the sky (with drifting clouds), the owner's
   teddy and rocket stand on green grass at the top and bottom of every page, toys stand on white
   display tiles. Sky blue is the only action colour, grass green the ground, sun yellow the small
   moments, red the sale price.
   The first part is the user's demo stylesheet with every class prefixed mx- (generated by
   max24/scripts/css-convert.py from the demo's assets/css/style.css); the platform layer follows. */
:root {
  --mx-primary: #1A64D6;          /* sky blue, the only action colour: white on it 5.47:1, on the page 4.76:1 */
  --mx-primary-deep: #1350B0;
  --mx-navy: #0B1F4D;
  --mx-ink: #0B1F4D;
  --mx-muted: #4A5878;         /* on the page 6.17:1 */
  --mx-white: #FFFFFF;
  --mx-sale: #C8202A;           /* sale price: on the page 4.94:1, white on it 5.68:1 */
  --mx-sun: #FFC940;
  --mx-green: #1F7A45;         /* deep grass: promo, stock, success, gift band; white on it 5.35:1, on the page 4.65:1 */
  --mx-pine: #1F7A45;
  --mx-grass: #4CAF68;          /* the grass: the owner's art and the footer body; navy on it 5.80:1 */
  --mx-sky: #EEF4FE;           /* the top bar */
  --mx-page: #E6F0FE;          /* the sky the page sits in */
  --mx-tile: #FFFFFF;          /* display tiles: products, sidebar, info, age tiles */
  --mx-shelf: #F5F9FF;    /* the shelf a toy stands on inside its tile */
  --mx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mx-r-sm: 8px;       /* small surfaces */
  --mx-r: 12px;         /* inputs, controls (buttons are pills) */
  --mx-r-lg: 20px;      /* tiles, bands, photos */
  --mx-radius: 20px;
  --mx-bar-h: 76px;     /* sticky bar height: the sidebar and mega-menu sit under it */
  --mx-gap: 24px;
  --mx-font-display: "Fredoka", "Onest", system-ui, sans-serif;
  --mx-logo-face: "Bricolage Grotesque", "Onest", system-ui, sans-serif;   /* the wordmark keeps its own face */
  --mx-font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mx-shadow: 0 12px 28px -18px rgba(11, 31, 77, .32);
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  position: relative; margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip;
  background: var(--mx-page); color: var(--mx-ink);
  font: 400 16px/1.55 var(--mx-font-body);
}
/* The sky: two fields of flat clouds in the open sky of the left column and the side margins (never behind the product
   grid, where they would show through the gaps as fragments), the far field smaller and slower. Desktop only. */
body::before, body::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: repeat; background-position: 50% 0;
}
body::before { background-image: url("img/art/clouds-far.svg"); background-size: 1440px auto; opacity: .75; animation: cloud-drift 90s ease-in-out infinite alternate; }
body::after { top: 120px; background-image: url("img/art/clouds-near.svg"); background-size: 1440px auto; animation: cloud-drift 60s ease-in-out infinite alternate-reverse; }
@keyframes cloud-drift { from { transform: translateX(-28px); } to { transform: translateX(28px); } }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--mx-font-display); font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.mx-icon { flex: none; }
[hidden] { display: none !important; }
.mx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--mx-primary); outline-offset: 2px; }
[id] { scroll-margin-top: 96px; }

.mx-wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: 24px; }

.mx-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--mx-r-sm); background: var(--mx-navy); color: var(--mx-white); font-weight: 600; }
.mx-skip:focus { top: 12px; }

/* ---------- buttons + links ---------- */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--mx-primary); color: var(--mx-white); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s;
}
.mx-btn:hover { background: var(--mx-primary-deep); }
.mx-btn:active { transform: translateY(1px); }
.mx-btn-light { background: var(--mx-white); color: var(--mx-navy); }
.mx-btn-light:hover { background: var(--mx-white); color: var(--mx-primary); }
.mx-btn-light .mx-icon { transition: transform .2s; }
.mx-btn-light:hover .mx-icon { transform: translateX(4px); }
.mx-round {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--mx-white); color: var(--mx-navy); box-shadow: var(--mx-shadow); transition: color .2s, transform .2s;
}
.mx-round:hover { color: var(--mx-primary); transform: scale(1.06); }
.mx-round:disabled { opacity: .35; cursor: default; transform: none; }
.mx-more { display: inline-flex; align-items: center; gap: 8px; color: var(--mx-primary); font-weight: 600; text-decoration: none; }
.mx-more .mx-icon { transition: transform .2s; }
.mx-more:hover .mx-icon { transform: translateX(4px); }

/* ---------- display surfaces: a toy stands on its shelf inside a white tile; category icons in one colour ---------- */
.mx-shelf { background: var(--mx-shelf); border-radius: 14px; }
.mx-cat-icon { display: inline-flex; flex: none; color: var(--mx-primary); }   /* icon only, no box (owner) */

/* ---------- the season: the owner's star-and-two-dots motif in sun yellow on the coloured bands ---------- */
.mx-sky { position: absolute; z-index: 1; width: 52px; height: 48px; color: var(--mx-sun); pointer-events: none; }
.mx-sky i { position: absolute; display: block; }
.mx-sky-star { left: 0; top: 0; transform-origin: 50% 55%; animation: twinkle 5.2s ease-in-out infinite; }
.mx-sky-star .mx-icon { display: block; width: 30px; height: 30px; fill: currentColor; }
.mx-sky-dot { border-radius: 50%; background: currentColor; opacity: .8; }
.mx-sky-dot:nth-child(2) { left: 3px; top: 37px; width: 8px; height: 8px; }
.mx-sky-dot:nth-child(3) { left: 40px; top: 30px; width: 6px; height: 6px; }
@keyframes twinkle { 0%, 100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.06) rotate(10deg); } }
.season-joulud .mx-logo-24 { background: var(--mx-pine); }

/* ---------- logo ---------- */
.mx-logo { display: inline-flex; align-items: center; text-decoration: none; font-family: var(--mx-logo-face); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.mx-logo-max { color: var(--mx-navy); }
.mx-logo-24 {
  display: inline-block; margin-left: .1em; padding: .12em .24em .16em; border-radius: min(.12em, 8px);
  background: var(--mx-primary); color: var(--mx-white); transform: rotate(-6deg); transition: transform .3s;
}
.mx-logo:hover .mx-logo-24 { transform: rotate(4deg); }

/* ---------- top bar + sticky bar ---------- */
/* Owner's art: a teddy on a wave (left) and a rocket with blocks (right), sized to the row height.
   The row's content is padded clear of them: 184 px from each viewport edge, less the wrap's own margin. */
.mx-topbar {   /* the owner's teddy and rocket on green grass with sun-yellow stars, on the sky */
  background:
    url("img/art/header-left.webp") left top / auto 100% no-repeat,
    url("img/art/header-right.webp") right top / auto 100% no-repeat,
    var(--mx-sky);
}
.mx-topbar-in { display: flex; align-items: center; gap: 32px; min-height: 88px; padding-inline: max(24px, calc(184px - max(0px, (100vw - 1360px) / 2))); }
.mx-toplinks { display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.mx-toplinks a { text-decoration: none; color: var(--mx-muted); }
.mx-toplinks a:hover { color: var(--mx-primary); }
.mx-toplinks .mx-toplink-camp { color: var(--mx-sale); font-weight: 700; }
.mx-topfacts { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--mx-muted); }
.mx-topfacts li { display: flex; align-items: center; gap: 8px; }
.mx-topfacts .mx-icon { color: var(--mx-primary); }
.mx-topfacts a { text-decoration: none; }
.mx-topfacts a:hover { color: var(--mx-primary); }
.mx-ship { flex-wrap: nowrap; white-space: nowrap; }   /* one line: the topbar height sets the photo seam */
.mx-ship-bar { display: block; width: 110px; height: 6px; border-radius: 3px; background: #E4E6EB; overflow: hidden; }
.mx-ship-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--mx-sun); transition: width .7s var(--mx-spring); }
.mx-ship.is-free .mx-ship-text { color: var(--mx-green); font-weight: 600; }
.mx-ship.is-free .mx-ship-bar i { background: var(--mx-green); }
.mx-topfacts:has(.mx-ship-bar:not([hidden])) .mx-topfact-mail { display: none; }   /* the e-mail is also in the footer */

.mx-bar { position: sticky; top: 0; z-index: 40; background: var(--mx-white); box-shadow: 0 10px 24px -20px rgba(11, 31, 77, .45); }
.mx-bar-in { display: grid; grid-template-columns: 280px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-block: 12px; }
.mx-cat-btn {
  display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 18px; border-radius: 999px;
  background: var(--mx-primary); color: var(--mx-white); font-weight: 600; text-decoration: none; transition: background-color .2s;
}
.mx-cat-btn:hover { background: var(--mx-primary-deep); }
.mx-cat-btn .mx-icon:last-child { margin-left: auto; transition: transform .25s; }
.mx-cat-btn[aria-expanded="true"] { background: var(--mx-navy); }
.mx-cat-btn[aria-expanded="true"] .mx-icon:last-child { transform: rotate(180deg); }
.mx-search { display: flex; min-width: 0; }
.mx-search input {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px 0 22px; border: 2px solid var(--mx-primary); border-right: 0;
  border-radius: 999px 0 0 999px; background: var(--mx-white); outline: none;
}
.mx-search input::placeholder { color: #6B7794; }
.mx-search input:focus { box-shadow: inset 0 0 0 1px var(--mx-primary); }
.mx-search button { width: 60px; border: 0; border-radius: 0 999px 999px 0; background: var(--mx-primary); color: var(--mx-white); display: grid; place-items: center; }
.mx-search button:hover { background: var(--mx-primary-deep); }
.mx-tools { display: flex; align-items: center; gap: 4px; }
.mx-tool {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 46px; height: 46px; padding: 0 12px;
  border-radius: var(--mx-r); color: var(--mx-navy); text-decoration: none; transition: color .2s;
}
.mx-tool:hover { color: var(--mx-primary); }
.mx-tool-n {
  position: absolute; top: 2px; left: 26px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--mx-sun); color: var(--mx-navy); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.mx-tool-n.mx-bump { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.35); } }
.mx-tool-sum { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- mega-menu under the bar (desktop) ---------- */
.mx-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--mx-white); box-shadow: 0 40px 60px -30px rgba(11, 31, 77, .5); }
.mx-mega.is-open { animation: mega-in .22s ease; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } }
.mx-mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; padding-block: 32px 40px; max-height: calc(100vh - var(--mx-bar-h) - 24px); overflow-y: auto; }
.mx-mega-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.mx-mega-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 17px; font-weight: 700; text-decoration: none; }
.mx-mega-title .mx-icon { transition: transform .3s var(--mx-spring); }
.mx-mega-title:hover { color: var(--mx-primary); }
.mx-mega-title:hover .mx-icon { transform: rotate(-8deg) scale(1.12); }
.mx-mega-n { font-size: 13px; font-weight: 500; color: var(--mx-muted); }
.mx-mega-cat ul { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; padding-left: 32px; }
.mx-mega-cat li a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 15px; color: var(--mx-muted); text-decoration: none; }
.mx-mega-cat li a span { font-size: 13px; }
.mx-mega-cat li a:hover { color: var(--mx-primary); }
.mx-mega-all { display: inline-flex; align-items: center; gap: 6px; padding-left: 32px; font-size: 14px; font-weight: 600; color: var(--mx-primary); text-decoration: none; }
.mx-mega-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.mx-mega-side { display: flex; flex-direction: column; gap: 12px; }
.mx-mega-camp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 20px 22px;
  border-radius: var(--mx-r-lg); background: var(--mx-primary); color: var(--mx-white); text-decoration: none;
}
.mx-mega-camp strong { font-family: var(--mx-font-display); font-size: 22px; font-weight: 800; line-height: 1.2; }
.mx-mega-camp span { font-size: 15px; }
.mx-mega-camp .mx-icon { grid-column: 2; grid-row: 1 / span 2; transition: transform .25s; }
.mx-mega-camp:hover .mx-icon { transform: translateX(4px); }
.mx-mega-camp-new { background: var(--mx-green); }
.mx-mega-every { display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; font-weight: 600; color: var(--mx-primary); text-decoration: none; }

/* ---------- shop layout: sticky catalogue beside the main column ---------- */
.mx-shop { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 20px; }
.mx-shop-main { min-width: 0; }
.mx-catalog {
  position: sticky; top: calc(var(--mx-bar-h) + 16px); max-height: calc(100vh - var(--mx-bar-h) - 32px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 10px 10px 16px;
  border-radius: var(--mx-r-lg); background: var(--mx-tile); box-shadow: var(--mx-shadow);   /* a display board, clear of the clouds */
}
.mx-catalog-head { display: none; }
.mx-catalog-list { display: flex; flex-direction: column; gap: 2px; }
.mx-catalog-link {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 999px;
  text-decoration: none; font-weight: 500; transition: color .15s, background-color .15s;
}
.mx-catalog-link .mx-icon { transition: transform .3s var(--mx-spring); }
.mx-catalog-link .mx-cat-icon + span { flex: 1; }
.mx-catalog-n { font-size: 13px; color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.mx-catalog-link:hover { color: var(--mx-primary); }
.mx-catalog-link:hover .mx-icon { transform: rotate(-8deg) scale(1.12); }
.mx-catalog-link.is-active { background: var(--mx-primary); color: var(--mx-white); font-weight: 600; }
.mx-catalog-link.is-active .mx-icon, .mx-catalog-link.is-active .mx-catalog-n { color: var(--mx-white); }
.mx-catalog-subs { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 8px 46px; }
.mx-catalog-subs a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px 6px 0; font-size: 15px; text-decoration: none; }
.mx-catalog-subs a span, .mx-catalog-extra a span, .mx-filters a span { font-size: 13px; color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.mx-catalog-subs a:hover, .mx-catalog-extra a:hover, .mx-filters a:hover { color: var(--mx-primary); }
.mx-catalog-subs a.is-active, .mx-filters a.is-active { color: var(--mx-primary); font-weight: 700; }
.mx-filters a.is-active span { color: var(--mx-primary); }
.mx-catalog-extra { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.mx-catalog-extra a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px 9px 46px; border-radius: var(--mx-r); font-weight: 600; text-decoration: none; }
.mx-catalog-extra .is-sale { color: var(--mx-sale); }
.mx-filters { padding: 8px 12px 0; }
.mx-filters-title { margin: 18px 0 6px; font-family: var(--mx-font-display); font-size: 18px; font-weight: 700; line-height: 1.2; }
.mx-filters ul { display: flex; flex-direction: column; }
.mx-filters a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; text-decoration: none; }
.mx-filters .mx-filters-clear { display: inline-flex; justify-content: flex-start; align-items: center; gap: 6px; margin-top: 18px; color: var(--mx-sale); font-weight: 600; }
.mx-catalog-info { display: none; }

.mx-front { display: grid; gap: 20px var(--mx-gap); }
.mx-slider { position: relative; min-width: 0; }
.mx-slides {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--mx-r-lg);
}
.mx-slides::-webkit-scrollbar { display: none; }
.mx-slide {
  position: relative; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
  min-height: 420px; background: var(--mx-primary); color: var(--mx-white);
}
.mx-slide-grass { background: var(--mx-green); }
.mx-slide-sun { background: var(--mx-sun); color: var(--mx-navy); }   /* navy on sun 10.38:1 */
.mx-slide-sun .mx-btn-light { background: var(--mx-navy); color: var(--mx-white); }
.mx-slide-sun .mx-btn-light:hover { background: var(--mx-primary); color: var(--mx-white); }
.mx-slide-sun .mx-sky { color: var(--mx-white); }
.mx-slider:has(.mx-slide-sun.is-current) .mx-dots button { background-color: rgba(11, 31, 77, .3); }
.mx-slider:has(.mx-slide-sun.is-current) .mx-dots button[aria-current="true"] { background-color: var(--mx-navy); }
.mx-slider:has(.mx-slide-sun.is-current) .mx-dots button::after { background: var(--mx-white); }
.mx-sky-slide { top: 22px; left: calc(43% - 86px); }
.mx-slide-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 44px 40px 72px 48px; }
.mx-slide-title { font-size: clamp(32px, 3.2vw, 48px); font-weight: 800; }
.mx-slide-copy p { font-size: 17px; opacity: .92; max-width: 34ch; }
.mx-slide-media { display: block; overflow: hidden; }
.mx-slide-img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 42%; }
html.js .mx-slide.is-current .mx-slide-img { animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.09); } }
.mx-slider-ui { position: absolute; left: 48px; bottom: 22px; display: flex; align-items: center; gap: 14px; }
.mx-slider-ui .mx-round { width: 44px; height: 44px; box-shadow: none; }
.mx-dots { display: flex; gap: 8px; margin-inline: 4px; }
.mx-dots button { width: 10px; height: 10px; padding: 0; box-sizing: content-box; border: 17px solid transparent; background-clip: padding-box; margin: -17px -13px; border-radius: 22px; background-color: rgba(255, 255, 255, .45); transition: width .3s, background-color .3s; }
.mx-dots button { position: relative; }
.mx-dots button[aria-current="true"] { width: 30px; background-color: var(--mx-white); }
.mx-slider.is-auto .mx-dots button[aria-current="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; background: var(--mx-sun);
  transform-origin: left center; animation: dotfill var(--autoplay, 6.5s) linear;
}
.mx-slider.is-paused .mx-dots button::after { animation-play-state: paused; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* slide copy enters when its slide becomes current */
html.js .mx-slide:not(.is-current) .mx-slide-copy > * { opacity: 0; transform: translateY(14px); }
html.js .mx-slide .mx-slide-copy > * { transition: opacity .5s, transform .5s; }
html.js .mx-slide.is-current .mx-slide-copy > :nth-child(2) { transition-delay: .08s; }
html.js .mx-slide.is-current .mx-slide-copy > :nth-child(3) { transition-delay: .16s; }

.mx-promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-gap); }
.mx-promo {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 170px;
  border-radius: var(--mx-r-lg); overflow: hidden; background: var(--mx-navy); color: var(--mx-white); text-decoration: none;
}
/* the catalogue's own toys, loosely stacked; they spread when the tile is pointed at */
.mx-promo-toys { grid-column: 2; grid-row: 1; position: relative; min-height: 150px; }
.mx-promo-toys img {
  position: absolute; width: 58%; height: auto; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(3, 10, 30, .35)); transition: transform .55s var(--mx-spring);
}
.mx-promo-toys img:nth-child(1) { left: -2%; bottom: -4%; transform: rotate(-9deg); z-index: 2; }
.mx-promo-toys img:nth-child(2) { right: -4%; bottom: 2%; transform: rotate(8deg); z-index: 1; }
.mx-promo-toys img:nth-child(3) { left: 24%; top: -6%; width: 46%; transform: rotate(-2deg); z-index: 0; }
.mx-promo:hover .mx-promo-toys img:nth-child(1), .mx-promo:focus-visible .mx-promo-toys img:nth-child(1) { transform: translate(-8px, -6px) rotate(-16deg) scale(1.06); }
.mx-promo:hover .mx-promo-toys img:nth-child(2), .mx-promo:focus-visible .mx-promo-toys img:nth-child(2) { transform: translate(8px, -10px) rotate(14deg) scale(1.06); }
.mx-promo:hover .mx-promo-toys img:nth-child(3), .mx-promo:focus-visible .mx-promo-toys img:nth-child(3) { transform: translateY(-12px) rotate(4deg) scale(1.08); }
.mx-promo-text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px 28px; }
.mx-promo-text strong { font-family: var(--mx-font-display); font-size: 24px; font-weight: 700; line-height: 1.2; }
.mx-promo-text span { display: inline-flex; font-weight: 600; }
.mx-promo:hover .mx-promo-text span { text-decoration: underline; text-underline-offset: 4px; opacity: 1; }
.mx-promo-dark { background: var(--mx-primary); }
.mx-promo-green { background: var(--mx-green); }

/* ---------- product card + rail ---------- */
.mx-popular { padding-block: 64px 72px; }
.mx-rail-head { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.mx-rail-head h2 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.03em; }
.mx-rail-head .mx-more { margin-left: auto; }
.mx-rail-ui { display: flex; gap: 10px; margin-left: 16px; }
.mx-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--mx-gap)) / 4); gap: var(--mx-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 4px 26px; margin: -8px -4px -16px;   /* room for the tile shadows */
}
.mx-rail::-webkit-scrollbar { display: none; }
.mx-rail > * { scroll-snap-align: start; }

.mx-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.mx-card:not(.mx-deal) { padding: 10px 10px 14px; border-radius: var(--mx-r-lg); background: var(--mx-tile); box-shadow: var(--mx-shadow); }   /* a display tile */
.mx-card-media { display: block; aspect-ratio: 1; }
.mx-card-media.mx-shelf { padding: 9%; }   /* the toy stands on its shelf and lifts off it on hover */
.mx-card-media img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(11, 31, 77, .13));
  transition: transform .5s var(--mx-spring), filter .5s ease;
}
.mx-card:hover .mx-card-media img { transform: translateY(-10px) rotate(-3deg) scale(1.04); filter: drop-shadow(0 26px 20px rgba(11, 31, 77, .17)); }
.mx-card:nth-child(even):hover .mx-card-media img { transform: translateY(-10px) rotate(3deg) scale(1.04); }
.mx-card-badges { position: absolute; top: 20px; left: 20px; display: flex; gap: 6px; pointer-events: none; }
.mx-badge { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--mx-white); background: var(--mx-primary); }
.mx-badge-sale { background: var(--mx-sale); }
.mx-badge-new { background: var(--mx-sun); color: var(--mx-navy); }
.mx-card-wish {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--mx-white); color: var(--mx-navy); box-shadow: var(--mx-shadow); transition: color .2s, transform .2s;
}
.mx-card-wish:hover { color: var(--mx-sale); transform: scale(1.08); }
.mx-card-wish[aria-pressed="true"] { color: var(--mx-sale); }
.mx-card-wish[aria-pressed="true"] .mx-icon { fill: currentColor; }
.mx-card-wish.mx-pop .mx-icon { animation: pop .5s var(--mx-spring); }
@keyframes pop { 40% { transform: scale(1.5); } }
.mx-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding-top: 14px; }
.mx-card-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mx-muted); }
.mx-card-stock { display: inline-flex; align-items: center; gap: 4px; color: var(--mx-green); }
.mx-card-name { font-family: var(--mx-font-body); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.mx-card-name a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-card-name a:hover { color: var(--mx-primary); }
.mx-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; }
.mx-price-now { font-size: 21px; font-weight: 700; }
.mx-price.is-sale .mx-price-now { color: var(--mx-sale); }
.mx-price-was { color: var(--mx-muted); font-size: 14px; }
.mx-card-add { margin-top: 6px; }
.mx-btn-add { width: 100%; min-height: 46px; background: transparent; color: var(--mx-primary); box-shadow: inset 0 0 0 2px var(--mx-primary); }
.mx-btn-add:hover { background: var(--mx-primary); color: var(--mx-white); }
.mx-btn-add.is-added, .mx-btn-add.is-added:hover { background: var(--mx-navy); color: var(--mx-white); box-shadow: inset 0 0 0 2px var(--mx-navy); }

/* ---------- listing: title, toolbar, grid or list, pager ---------- */
.mx-listing { padding-block: 8px 72px; }
.mx-listing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 18px; }
.mx-listing-head h1, .mx-listing-head h2 { font-size: clamp(32px, 3.4vw, 50px); font-weight: 800; letter-spacing: -.03em; }
.mx-listing-head [tabindex="-1"]:focus { outline: none; }
.mx-listing-count { color: var(--mx-muted); font-weight: 600; }
.mx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 36px; }
.mx-tool-field { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--mx-muted); }
.mx-tool-field select {
  height: 44px; padding: 0 38px 0 14px; border: 2px solid var(--mx-primary); border-radius: var(--mx-r); appearance: none;
  background: var(--mx-white); color: var(--mx-navy); font-size: 15px; font-weight: 600; cursor: pointer;
}
.mx-tool-field .mx-icon { position: absolute; right: 12px; color: var(--mx-primary); pointer-events: none; }
.mx-view-toggle { display: flex; gap: 6px; margin-left: auto; }
.mx-view-toggle a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--mx-navy); }
.mx-view-toggle a:hover { color: var(--mx-primary); }
.mx-view-toggle a.is-active { background: var(--mx-primary); color: var(--mx-white); }
.mx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px var(--mx-gap); }
.mx-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.mx-grid.is-list .mx-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: center; }
.mx-grid.is-list .mx-card-body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 190px; grid-template-areas: "meta price add" "name price add";
  align-items: center; gap: 4px 28px; padding-top: 0;
}
.mx-grid.is-list .mx-card-meta { grid-area: meta; justify-content: flex-start; gap: 16px; }
.mx-grid.is-list .mx-card-name { grid-area: name; font-size: 18px; }
.mx-grid.is-list .mx-price { grid-area: price; margin-top: 0; }
.mx-grid.is-list .mx-card-add { grid-area: add; margin-top: 0; }
.mx-grid.is-list .mx-card-wish { right: auto; left: 128px; }
.mx-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 56px; }
.mx-pager a, .mx-pager span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.mx-pager a:hover { color: var(--mx-primary); }
.mx-pager .mx-pager-cur { background: var(--mx-primary); color: var(--mx-white); }
.mx-pager .mx-pager-gap { color: var(--mx-muted); }
.mx-listing-note { margin-top: 32px; font-size: 13px; color: var(--mx-muted); }
.mx-listing-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 40px 0; font-size: 18px; }

.mx-camp-head { padding: 8px 0 28px; }
.mx-camp-head h1 { font-size: clamp(40px, 5vw, 76px); font-weight: 800; letter-spacing: -.035em; }
.mx-camp-head p { margin-top: 8px; font-size: 18px; color: var(--mx-muted); }
.mx-camps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-gap); margin-bottom: 64px; }
.mx-camp {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40%; min-height: 190px; height: 100%;
  border-radius: var(--mx-r-lg); overflow: hidden; background: var(--mx-primary); color: var(--mx-white); text-decoration: none;
}
.mx-camp:focus-visible { outline: 3px solid var(--mx-navy); outline-offset: 3px; }
.mx-camp-text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 26px; }
.mx-camp-text strong { font-family: var(--mx-font-display); font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.mx-camp-text span { font-weight: 600; }
.mx-camp:hover .mx-camp-text strong { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mx-camp > .mx-icon { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; width: 96px; height: 96px; transition: transform .5s var(--mx-spring); }
.mx-camp:hover > .mx-icon { transform: rotate(-8deg) scale(1.1); }
.mx-camp-new { background: var(--mx-green); }
.mx-camp-ship { background: var(--mx-sun); color: var(--mx-navy); }
.mx-camp-games { background: var(--mx-primary); }
.mx-camp:hover .mx-promo-toys img:nth-child(1) { transform: translate(-8px, -6px) rotate(-16deg) scale(1.06); }
.mx-camp:hover .mx-promo-toys img:nth-child(2) { transform: translate(8px, -10px) rotate(14deg) scale(1.06); }
.mx-camp:hover .mx-promo-toys img:nth-child(3) { transform: translateY(-12px) rotate(4deg) scale(1.08); }

/* ---------- gift ideas: one white tile per age on the deep-grass band, budget chips in sun yellow ---------- */
.mx-gifts { position: relative; padding: 56px 48px 52px; border-radius: var(--mx-r-lg); background: var(--mx-pine); color: var(--mx-white); }
.mx-gifts :focus-visible { outline-color: var(--mx-sun); }
.mx-gifts h2 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.03em; max-width: 15ch; margin-bottom: 32px; }
.mx-sky-gifts { top: 26px; right: 36px; }
.mx-ages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mx-age {
  display: grid; grid-template-columns: minmax(0, 1fr) 44%; align-items: center; gap: 8px; height: 100%; min-height: 156px;
  padding: 18px 10px 18px 22px; border-radius: var(--mx-r-lg); background: var(--mx-tile); color: var(--mx-navy); text-decoration: none;
  box-shadow: 0 10px 20px -16px rgba(0, 0, 0, .5);
}
.mx-age-n { display: block; font-family: var(--mx-font-display); font-size: clamp(36px, 3.4vw, 50px); font-weight: 800; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.mx-age-unit { display: block; margin-top: 4px; font-weight: 700; }
.mx-age-meta { display: block; margin-top: 10px; font-size: 14px; color: var(--mx-muted); }
.mx-age-toy {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transform: rotate(-6deg);
  filter: drop-shadow(0 12px 12px rgba(11, 31, 77, .16)); transition: transform .5s var(--mx-spring);
}
.mx-age:hover .mx-age-toy, .mx-age:focus-visible .mx-age-toy { transform: translateY(-10px) rotate(5deg) scale(1.08); }
.mx-age:hover .mx-age-unit { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mx-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; }
.mx-budget-title { font-weight: 700; }
.mx-budget ul { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-budget a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--mx-sun); color: var(--mx-navy); font-weight: 700; text-decoration: none; transition: background-color .2s, transform .2s var(--mx-spring);
}
.mx-budget a span { font-weight: 600; font-size: 14px; }
.mx-budget a:hover { background: var(--mx-white); transform: translateY(-2px); }

/* ---------- sale shelf: toys standing on the sky-blue band ---------- */
.mx-deals { position: relative; margin-bottom: 72px; background: var(--mx-primary); color: var(--mx-white); padding: 56px 48px 64px; border-radius: var(--mx-r-lg); overflow: hidden; }
.mx-sky-deals { top: 18px; right: 40px; }
.mx-deals-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
/* the band opens like a shop sign: name, the deepest cut in sun yellow, the count, the way in */
.mx-deals-side { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.mx-deals-side h2 { font-size: clamp(44px, 6vw, 88px); font-weight: 800; letter-spacing: -.035em; }
.mx-deals-lead { font-family: var(--mx-font-display); font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1.2; color: var(--mx-sun); }

.mx-deals-side .mx-more { margin-left: auto; color: var(--mx-white); }
.mx-deals-side .mx-more:focus-visible, .mx-deal :focus-visible { outline-color: var(--mx-white); }
.mx-deals-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--mx-gap); }
.mx-deal { color: var(--mx-white); }
.mx-deal .mx-card-wish { top: 10px; right: 10px; }   /* sale cards have no tile padding */
.mx-deal .mx-card-media img { filter: drop-shadow(0 16px 16px rgba(3, 10, 30, .38)); }
.mx-deal:hover .mx-card-media img { filter: drop-shadow(0 30px 22px rgba(3, 10, 30, .42)); }
.mx-deal-sticker {
  position: absolute; top: 2%; left: -2%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%; background: var(--mx-sun); color: var(--mx-navy); pointer-events: none;
  transform: rotate(-10deg); box-shadow: 0 10px 20px -10px rgba(3, 10, 30, .6); transition: transform .5s var(--mx-spring);
}
.mx-deal:hover .mx-deal-sticker { transform: rotate(6deg) scale(1.08); }
.mx-deal-pct { font-size: 13px; font-weight: 700; line-height: 1.2; }
.mx-deal-price { font-family: var(--mx-font-display); font-size: 17px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.mx-deal .mx-card-name { margin-top: 14px; }
.mx-deal .mx-card-name a:hover { color: var(--mx-sun); }
.mx-deal-was { margin: 4px 0 14px; font-size: 14px; }
.mx-deal .mx-card-add { margin-top: auto; }
.mx-deal .mx-btn-add { background: var(--mx-white); color: var(--mx-navy); box-shadow: none; }
.mx-deal .mx-btn-add:hover { background: var(--mx-sun); color: var(--mx-navy); }

/* ---------- advice: the lead article is its photograph ---------- */
.mx-advice { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; padding-block: 80px; align-items: center; }

/* Clouds that peek from behind the coloured bands. Each sits in the empty gap above its band and tucks behind it,
   so it never meets text or the gaps between tiles. */
.mx-gifts::before, .mx-advice::after, .mx-info::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: center / contain no-repeat;
}
.mx-gifts::before { top: -46px; right: 64px; width: 216px; height: 90px; background-image: url("img/art/cloud-a.svg"); }
.mx-advice::after { bottom: -34px; left: 4%; width: 240px; height: 72px; background-image: url("img/art/cloud-c.svg"); }
.mx-info::before { top: -38px; right: 12%; width: 150px; height: 75px; background-image: url("img/art/cloud-b.svg"); }
.mx-advice-lead { position: relative; display: block; border-radius: var(--mx-r-lg); overflow: hidden; color: var(--mx-white); text-decoration: none; }
.mx-advice-lead img { width: 100%; aspect-ratio: 16 / 11; height: auto; object-fit: cover; transition: transform .9s ease; }
.mx-advice-lead:hover img { transform: scale(1.04); }
/* photographic scrim at the foot of the photo, for the title's legibility only */
.mx-advice-lead-copy {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 120px 36px 32px;
  background: linear-gradient(to top, rgba(11, 31, 77, .92) 0%, rgba(11, 31, 77, .6) 55%, rgba(11, 31, 77, 0) 100%);
}
.mx-advice-lead-title { font-family: var(--mx-font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.02em; }
.mx-advice-lead-text { opacity: .9; max-width: 56ch; }
.mx-advice-lead:hover .mx-advice-lead-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mx-advice-side h2 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 32px; }
.mx-advice-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
.mx-advice-list a { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; align-items: center; text-decoration: none; }
.mx-advice-list img { width: 140px; height: 104px; object-fit: cover; border-radius: var(--mx-r-lg); transition: transform .5s var(--mx-spring); }
.mx-advice-list a:hover img { transform: rotate(-2deg) scale(1.04); }
.mx-advice-list span { font-family: var(--mx-font-display); font-weight: 700; font-size: 21px; line-height: 1.25; }
.mx-advice-list a:hover span { color: var(--mx-primary); }

/* ---------- delivery, returns, payment: heading column + fact rows on a white card ---------- */
.mx-info { position: relative; margin-bottom: 72px; padding: 56px 48px 64px; border-radius: var(--mx-r-lg); background: var(--mx-tile); box-shadow: var(--mx-shadow); }
.mx-info-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; align-items: start; }
.mx-info h2 { position: sticky; top: 112px; font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.03em; max-width: 13ch; }
.mx-facts { display: flex; flex-direction: column; gap: 40px; }
.mx-fact { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); grid-template-areas: "big label" "big text"; column-gap: 32px; align-items: start; }
.mx-fact dt { grid-area: label; font-size: 18px; font-weight: 700; }
.mx-fact-big { grid-area: big; font-family: var(--mx-font-display); font-weight: 800; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.2; letter-spacing: -.03em; color: var(--mx-green); }
.mx-fact-text { grid-area: text; margin-top: 6px; color: var(--mx-muted); max-width: 42ch; }
.mx-info-faq { margin-top: 56px; }
.mx-info-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0;
  font-size: 19px; font-weight: 600; cursor: pointer; list-style: none;
}
.mx-info-faq summary::-webkit-details-marker { display: none; }
.mx-info-faq summary .mx-icon { color: var(--mx-green); transition: transform .3s var(--mx-spring); }
.mx-info-faq details[open] summary .mx-icon { transform: rotate(45deg); }
.mx-info-faq summary:hover { color: var(--mx-primary); }
.mx-info-faq details p { padding: 0 48px 22px 0; color: var(--mx-muted); max-width: 70ch; }

/* ---------- footer: the grass ---------- */
/* The owner's scene closes the page: sun-yellow stars in the sky (transparent, so the page and its clouds flow in),
   the teddy and the rocket on the grass, and below it the footer body in the grass's own green.
   On that green: navy for all text (5.80:1); white would be 2.75:1. */
.mx-foot { color: var(--mx-navy); overflow-x: clip; }
.mx-foot-body { background: var(--mx-grass); padding-top: 40px; }
.mx-foot-body :focus-visible { outline-color: var(--mx-navy); }
.mx-foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.mx-foot-news-title { color: var(--mx-navy); font-size: clamp(30px, 3vw, 46px); font-weight: 800; letter-spacing: -.03em; max-width: 16ch; margin-bottom: 26px; }
.mx-news-row { display: flex; gap: 10px; max-width: 560px; }
.mx-news-row input { flex: 1; min-width: 0; height: 54px; padding: 0 18px 0 22px; border: 0; border-radius: 999px; background: var(--mx-white); color: var(--mx-navy); outline: none; }
.mx-news-row input:focus { box-shadow: 0 0 0 3px var(--mx-navy); }
.mx-news-row .mx-btn { min-height: 54px; background: var(--mx-navy); color: var(--mx-white); }
.mx-news-row .mx-btn:hover { background: var(--mx-white); color: var(--mx-navy); }
.mx-foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.mx-foot-links h2 { font-family: var(--mx-font-body); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--mx-navy); margin-bottom: 14px; }
.mx-foot-links ul { display: flex; flex-direction: column; gap: 10px; }
.mx-foot-links a { color: var(--mx-navy); text-decoration: none; overflow-wrap: anywhere; }
.mx-foot-links a:hover { color: var(--mx-navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mx-foot-legal { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-block: 22px 30px; font-size: 13px; color: var(--mx-navy); }
.mx-foot-legal::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: rgba(11, 31, 77, .22); }
.mx-footer-credit { display: inline-flex; flex-direction: column; align-items: flex-end; margin-left: auto; line-height: 1.2; text-align: right; text-decoration: none; }
.mx-footer-credit-name {
  font-family: var(--mx-font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%) 150% 0 / 200% 100% no-repeat,
    linear-gradient(90deg, var(--mx-navy), #173683);   /* both ends ≥3.39:1 on the wave blue; white only in the hover glimmer */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mx-footer-credit:hover .mx-footer-credit-name { animation: glimmer 1.1s ease; }
@keyframes glimmer { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
.mx-footer-credit-sub { font-size: 12px; letter-spacing: .04em; color: var(--mx-navy); }
/* the owner's footer art: stars, a teddy and a rocket on the grass that closes the page */
.mx-foot-art {   /* -2px: no hairline seam into the body; two clouds drift in the sky behind the art */
  aspect-ratio: 2103 / 616; margin-bottom: -2px;
  background:
    url("img/art/footer-band.webp") center bottom / 100% auto no-repeat,
    url("img/art/cloud-c.svg") 36% 30% / 15% auto no-repeat,
    url("img/art/cloud-b.svg") 66% 10% / 9% auto no-repeat;
}

/* ---------- motion helpers (classes added by main.js only) ---------- */
.mx-fly { position: fixed; z-index: 95; width: 120px; height: 120px; object-fit: contain; pointer-events: none; }
html.js .mx-rv:not(.is-in) { opacity: 0; transform: translateY(22px); }
/* only the arrival animates; hiding happens before first paint of the section, without a fade-out */
html.js .mx-rv.is-in { transition: opacity .6s ease, transform .7s var(--mx-spring); transition-delay: var(--d, 0s); }

/* ---------- toast ---------- */
.mx-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translateX(-50%);
  padding: 12px 20px; border-radius: var(--mx-r); background: var(--mx-navy); color: var(--mx-white); font-weight: 600;
  box-shadow: var(--mx-shadow); pointer-events: none;
}

/* ================= inner pages ================= */
.mx-page { padding-block: 24px 88px; }
.mx-page-narrow { max-width: 880px; }
.mx-page-title { font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.03em; margin: 8px 0 14px; }
.mx-page-lead { font-size: 18px; color: var(--mx-muted); max-width: 62ch; margin-bottom: 24px; }
.mx-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--mx-muted); }
.mx-crumbs li:not(:last-child)::after { content: "/"; margin: 0 10px; color: #A8B1C6; }
.mx-crumbs a { text-decoration: none; }
.mx-crumbs a:hover { color: var(--mx-primary); text-decoration: underline; text-underline-offset: 3px; }
.mx-crumbs [aria-current] { color: var(--mx-navy); font-weight: 600; }
.mx-note { font-size: 14px; color: var(--mx-muted); }
.mx-note-bar, .mx-placeholder-block { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 28px; font-size: 14px; color: var(--mx-muted); }
.mx-note-bar .mx-icon, .mx-placeholder-block .mx-icon { color: var(--mx-primary); margin-top: 2px; }
.mx-placeholder { color: var(--mx-sale); font-style: italic; }
.mx-btn-quiet { background: transparent; color: var(--mx-primary); box-shadow: inset 0 0 0 2px var(--mx-primary); }
.mx-btn-quiet:hover { background: var(--mx-primary); color: var(--mx-white); }
.mx-btn-lg { min-height: 54px; padding: 0 28px; font-size: 17px; }
.mx-btn-block { width: 100%; }
.mx-empty-state { padding: 32px 0 16px; font-size: 18px; }
.mx-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.mx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* notices (after a POST) */
.mx-notices { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.mx-notice { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--mx-r); font-weight: 600; background: var(--mx-navy); color: var(--mx-white); }
.mx-notice-success { background: var(--mx-green); }
.mx-notice-error { background: var(--mx-sale); }
.mx-notice a { margin-left: auto; color: var(--mx-white); text-underline-offset: 3px; white-space: nowrap; }

/* forms */
.mx-form { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.mx-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.mx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.mx-field label, .mx-field legend { font-weight: 600; font-size: 15px; }
.mx-field small { font-weight: 400; color: var(--mx-muted); }
.mx-field input, .mx-field textarea, .mx-field select, .mx-locker select, .mx-locker-filter {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid #9AA6C0; border-radius: var(--mx-r);
  background: var(--mx-white); color: var(--mx-navy); font-size: 16px;
}
.mx-field textarea { min-height: 120px; resize: vertical; }
.mx-field input:focus, .mx-field textarea:focus, .mx-field select:focus, .mx-locker select:focus, .mx-locker-filter:focus { outline: none; border-color: var(--mx-primary); box-shadow: 0 0 0 3px rgba(23, 71, 201, .2); }
[aria-invalid="true"] { border-color: var(--mx-sale) !important; }
.mx-field-error { color: var(--mx-sale); font-size: 14px; font-weight: 600; }
.mx-select { position: relative; }
.mx-select select { appearance: none; padding-right: 42px; }
.mx-select .mx-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mx-primary); pointer-events: none; }
.mx-error-summary { padding: 18px 22px; margin-bottom: 24px; border-radius: var(--mx-r); background: var(--mx-sale); color: var(--mx-white); }
.mx-error-summary h2 { font-family: var(--mx-font-body); font-size: 17px; letter-spacing: 0; }
.mx-error-summary ul { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mx-error-summary a { color: var(--mx-white); text-underline-offset: 3px; }
.mx-error-summary:focus { outline: 3px solid var(--mx-navy); outline-offset: 3px; }
.mx-check-field { display: flex; gap: 12px; align-items: flex-start; }
.mx-check-field input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--mx-primary); }

/* qty stepper */
.mx-qty { display: inline-flex; align-items: stretch; height: 48px; border: 2px solid #9AA6C0; border-radius: var(--mx-r); overflow: hidden; background: var(--mx-white); }
.mx-qty button { width: 44px; border: 0; background: var(--mx-white); color: var(--mx-navy); display: grid; place-items: center; }
.mx-qty button:hover { color: var(--mx-primary); }
.mx-qty input { width: 52px; border: 0; text-align: center; font-weight: 700; font-size: 16px; color: var(--mx-navy); -moz-appearance: textfield; }
.mx-qty input::-webkit-outer-spin-button, .mx-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mx-qty:focus-within { border-color: var(--mx-primary); }

/* product page */
.mx-pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 16px; }
.mx-pdp-media { position: relative; margin: 0; }
.mx-pdp-media.mx-shelf { padding: 7%; background: var(--mx-tile); box-shadow: var(--mx-shadow); border-radius: var(--mx-r-lg); }
.mx-pdp-media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(11, 31, 77, .14)); }
.mx-pdp-title { font-size: clamp(30px, 3vw, 44px); font-weight: 800; letter-spacing: -.025em; }
.mx-pdp-meta { margin: 10px 0 18px; color: var(--mx-muted); font-weight: 600; }
.mx-pdp-meta a { color: var(--mx-primary); text-underline-offset: 3px; }
.mx-price-lg .mx-price-now { font-size: 36px; font-family: var(--mx-font-display); font-weight: 800; }
.mx-price-lg .mx-price-was { font-size: 18px; }
.mx-pdp-stock { display: flex; align-items: center; gap: 8px; margin: 12px 0 24px; color: var(--mx-green); font-weight: 600; }
.mx-pdp-buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.mx-pdp-buy .mx-btn-add-solid { flex: 1; min-width: 200px; }
.mx-btn-add-solid.is-added { background: var(--mx-navy); }
.mx-pdp-note { margin: 8px 0; }
.mx-pdp-wish { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 18px; font-weight: 600; }
.mx-pdp-wish .mx-card-wish { position: static; box-shadow: none; outline: 2px solid #D5DBE8; outline-offset: -2px; }
.mx-pdp-facts { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.mx-pdp-facts li { display: flex; gap: 12px; align-items: center; }
.mx-pdp-facts .mx-icon { color: var(--mx-primary); }
.mx-pdp-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 72px; }
.mx-pdp-details h2, .mx-related h2, .mx-order-layout h2, .mx-prose h2, .mx-contact-form h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; margin-bottom: 14px; }
.mx-pdp-details p { margin-bottom: 12px; }
.mx-related { margin-top: 72px; }

/* tables with a column rhythm (W30: no boxes) */
.mx-spec { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.mx-spec th, .mx-spec td { padding: 12px 0; text-align: left; vertical-align: top; }
.mx-spec tr + tr th, .mx-spec tr + tr td, .mx-spec tbody tr th, .mx-spec tbody tr td { box-shadow: inset 0 1px 0 rgba(11, 31, 77, .1); }
.mx-spec th { width: 42%; padding-right: 20px; font-weight: 600; color: var(--mx-muted); }
.mx-spec-cols th { width: auto; color: var(--mx-navy); }
.mx-spec-cols thead th { color: var(--mx-muted); font-size: 14px; box-shadow: none; }
.mx-spec td:last-child { text-align: right; }
.mx-spec-cols td:last-child { text-align: right; }
.mx-spec-total th, .mx-spec-total td { font-weight: 800; font-size: 19px; color: var(--mx-navy); }

/* cart */
.mx-cart-layout, .mx-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; margin-top: 12px; }
.mx-cart-table { width: 100%; border-collapse: collapse; }
.mx-cart-table thead th { padding: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--mx-muted); text-align: left; }
.mx-cart-table td, .mx-cart-table tbody th { padding: 18px 12px 18px 0; vertical-align: middle; text-align: left; box-shadow: inset 0 1px 0 rgba(11, 31, 77, .1); }
.mx-cart-item { display: flex; align-items: center; gap: 16px; font-weight: 400; }
.mx-cart-thumb { display: block; flex: none; width: 88px; height: 88px; padding: 8px; }
.mx-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mx-cart-name { font-weight: 700; text-decoration: none; }
.mx-cart-name:hover { color: var(--mx-primary); }
.mx-cart-item small { display: block; color: var(--mx-muted); margin-top: 2px; }
.mx-cart-total { font-weight: 700; white-space: nowrap; }
.mx-cart-remove { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--mx-r); background: none; color: var(--mx-muted); }
.mx-cart-remove:hover { color: var(--mx-sale); }
.mx-cart-update { margin-top: 20px; }
html.js .mx-cart-update { display: none; }
.mx-summary { position: sticky; top: calc(var(--mx-bar-h) + 20px); display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--mx-r-lg); background: var(--mx-navy); color: var(--mx-white); }
.mx-summary h2 { font-size: 24px; font-weight: 800; }
.mx-summary .mx-note, .mx-summary .mx-note a { color: rgba(255, 255, 255, .78); }
.mx-summary a:not(.mx-btn) { color: var(--mx-white); }
.mx-summary :focus-visible { outline-color: var(--mx-sun); }
.mx-totals { display: flex; flex-direction: column; gap: 8px; }
.mx-totals div { display: flex; justify-content: space-between; gap: 16px; }
.mx-totals dt { opacity: .85; }
.mx-totals dd { font-weight: 600; }
.mx-totals-grand { padding-top: 10px; margin-top: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); font-size: 20px; }
.mx-totals-grand dt, .mx-totals-grand dd { font-weight: 800; opacity: 1; }
.mx-free-note { display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.mx-meter { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.mx-meter i { display: block; height: 100%; width: var(--p, 0%); background: var(--mx-sun); }
.mx-summary .mx-btn { background: var(--mx-sun); color: var(--mx-navy); }
.mx-summary .mx-btn:hover { background: var(--mx-white); }

/* checkout */
.mx-checkout-fields { display: flex; flex-direction: column; gap: 36px; }
.mx-co-block { border: 0; padding: 0; margin: 0; min-width: 0; }
.mx-co-block legend, .mx-pay legend { font-family: var(--mx-font-display); font-size: 24px; font-weight: 800; margin-bottom: 16px; padding: 0; }
.mx-choice-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mx-choice { border-radius: var(--mx-r); background: var(--mx-tile); box-shadow: inset 0 0 0 2px #C9D1E3; }
.mx-choice.is-on { box-shadow: inset 0 0 0 2px var(--mx-primary); }
.mx-choice-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; min-height: 56px; }
.mx-choice-head input { width: 20px; height: 20px; accent-color: var(--mx-primary); flex: none; }
.mx-choice-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.mx-choice-price { margin-left: auto; font-weight: 700; }
.mx-locker { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px 48px; }
.mx-locker label { font-weight: 600; font-size: 14px; }
html.js .mx-choice:not(.is-on) .mx-locker { display: none; }
.mx-checkout-summary { color: var(--mx-white); }
.mx-review { display: flex; flex-direction: column; gap: 12px; }
.mx-review li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; }
.mx-review img { width: 56px; height: 56px; object-fit: contain; background: var(--mx-shelf); border-radius: var(--mx-r); }
.mx-pay { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mx-pay legend { font-size: 20px; color: var(--mx-white); }
.mx-pay-option { flex-wrap: wrap; border-radius: var(--mx-r); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); }
.mx-pay-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--mx-sun); }
.mx-pay-note { flex-basis: 100%; padding-left: 32px; font-size: 14px; opacity: .8; }
.mx-checkout-summary .mx-field-error { color: #FFB4B8; }
.mx-checkout-summary .mx-check-field a { color: var(--mx-white); }

/* order + withdrawal */
.mx-order-strip { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 24px 28px; margin-bottom: 40px; border-radius: var(--mx-r-lg); background: var(--mx-green); color: var(--mx-white); }
.mx-order-strip dt { font-size: 14px; }
.mx-order-strip dd { font-family: var(--mx-font-display); font-size: 22px; font-weight: 800; }
.mx-order-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; margin-bottom: 40px; }
.mx-order-layout h2 + p, .mx-order-address { margin-bottom: 16px; }
.mx-order-address { font-style: normal; line-height: 1.7; }
.mx-withdraw-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--mx-navy); color: var(--mx-white); font-weight: 600; font-size: 14px; text-decoration: none; }
.mx-withdraw-btn:hover { background: var(--mx-white); color: var(--mx-navy); }
.mx-withdraw-btn-light { background: var(--mx-primary); }
.mx-withdraw-btn-light:hover { background: var(--mx-primary-deep); color: var(--mx-white); }

/* prose + advice */
.mx-prose { max-width: 70ch; }
.mx-prose p, .mx-prose ul, .mx-prose ol { margin-bottom: 16px; }
.mx-prose h2 { margin-top: 36px; }
.mx-prose ul, .mx-prose ol { padding-left: 22px; }
.mx-prose ul { list-style: disc; }
.mx-prose ol { list-style: decimal; }
.mx-prose li { margin-bottom: 6px; }
.mx-prose a { color: var(--mx-primary); text-underline-offset: 3px; }
.mx-articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.mx-articles-small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mx-article-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.mx-article-card img { width: 100%; aspect-ratio: 16 / 11; height: auto; object-fit: cover; border-radius: var(--mx-r-lg); transition: transform .5s var(--mx-spring); }
.mx-article-card:hover img { transform: rotate(-1deg) scale(1.02); }
.mx-article-card-title { font-family: var(--mx-font-display); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.mx-articles-small .mx-article-card-title { font-size: 19px; }
.mx-article-card:hover .mx-article-card-title { color: var(--mx-primary); }
.mx-article-card-text { color: var(--mx-muted); }
.mx-article { max-width: 880px; }
.mx-article-img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--mx-r-lg); margin: 8px 0 32px; }

/* about + contact */
.mx-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.mx-about-cats { display: flex; flex-direction: column; gap: 2px; padding-top: 72px; }
.mx-about-cats a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--mx-r); font-weight: 600; text-decoration: none; }
.mx-about-cats a .mx-cat-icon + span { flex: 1; }
.mx-about-cats .mx-icon { transition: transform .3s var(--mx-spring); }
.mx-about-cats a:hover { background: var(--mx-primary); color: var(--mx-white); }
.mx-about-cats a:hover .mx-icon, .mx-about-cats a:hover .mx-catalog-n { color: var(--mx-white); }
.mx-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.mx-contact-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.mx-contact-list dt { font-size: 14px; color: var(--mx-muted); font-weight: 600; }
.mx-contact-list dd { font-size: 18px; font-weight: 600; }
.mx-contact-list a { color: var(--mx-primary); text-underline-offset: 3px; }
.mx-contact-form { padding-top: 16px; }
.mx-search-lg { max-width: 560px; margin: 8px 0 24px; }

/* footer: the withdrawal button sits in the legal row on the wave blue */
.mx-foot-legal .mx-withdraw-btn { margin-left: auto; }
.mx-foot-legal .mx-footer-credit { margin-left: 24px; }

/* ================= responsive ================= */
@media (max-width: 1279px) {
  .mx-topfacts li:not(.mx-ship) { display: none; }
  .mx-promo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .mx-promo-text { padding: 20px; }
  .mx-promo-text strong { font-size: 20px; }
  .mx-slide-copy { padding: 36px 28px 72px 32px; }
  .mx-slider-ui { left: 32px; }
  .mx-rail { grid-auto-columns: calc((100% - 2 * var(--mx-gap)) / 3); }
  .mx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-mega-in { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
  .mx-mega-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-deals, .mx-info, .mx-gifts { padding: 48px 36px 56px; }
  .mx-advice { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mx-camps { grid-template-columns: minmax(0, 1fr); }
  .mx-info-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 48px; }
}

/* below 1440 the logo row cannot hold every link between the corner art pieces;
   these two are also in the footer and the drawer */
@media (max-width: 1439px) {
  .mx-toplinks a:nth-child(3), .mx-toplinks a:nth-child(4) { display: none; }
}

/* sidebar + main between 1024 and 1199: the sale shelf needs room per toy */
@media (max-width: 1199px) {
  .mx-deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .mx-ages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  body::before, body::after { display: none; }
  .mx-ages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-toplinks, .mx-topfacts { display: none; }
  .mx-topbar { background: url("img/art/header-right.webp") right top / auto 100% no-repeat, var(--mx-sky); }   /* the logo takes the left corner */
  .mx-topbar-in { min-height: 64px; padding-inline: 24px; }
  .mx-bar-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .mx-cat-btn { padding: 0 16px; }
  .mx-mega { display: none !important; }
  .mx-shop { grid-template-columns: minmax(0, 1fr); }
  .mx-catalog { position: static; max-height: none; overflow: visible; }

  /* The catalogue becomes a drawer only when JS can open it; without JS it stays in the flow. */
  html.js .mx-catalog {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(360px, 88vw); overflow-y: auto;
    padding: 16px 16px 32px; background: var(--mx-white); box-shadow: 0 0 60px rgba(11, 31, 77, .3);
    transform: translateX(-104%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
  }
  html.js .mx-catalog.is-open { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
  html.js .mx-catalog-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
  .mx-catalog-title { font-family: var(--mx-font-display); font-weight: 700; font-size: 24px; line-height: 1.2; }
  .mx-catalog-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--mx-r); background: none; color: var(--mx-navy); }
  .mx-catalog-close:hover { color: var(--mx-primary); }
  html.js .mx-catalog-info { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding: 18px 12px 0; box-shadow: 0 -1px 0 rgba(11, 31, 77, .12); }
  .mx-catalog-info a { display: block; padding: 8px 0; color: var(--mx-muted); text-decoration: none; }
  .mx-drawer-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(11, 31, 77, .5); }

  .mx-slide { min-height: 380px; }
  .mx-rail { grid-auto-columns: calc((100% - 2 * var(--mx-gap)) / 3); }
  .mx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .mx-advice { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 72px; }
  .mx-info-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mx-info h2 { position: static; max-width: 20ch; }
  .mx-foot-top { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mx-pdp, .mx-pdp-details, .mx-cart-layout, .mx-checkout, .mx-order-layout, .mx-about, .mx-contact { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mx-summary { position: static; }
  .mx-about-cats { padding-top: 0; }
  .mx-articles-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .mx-ages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .mx-wrap { padding-inline: 16px; }
  :root { --mx-gap: 16px; }
  .mx-foot-legal::before { left: 16px; right: 16px; }
  .mx-logo { font-size: 28px; }
  .mx-cat-btn { width: 52px; padding: 0; justify-content: center; }
  .mx-cat-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mx-cat-btn .mx-icon:last-child { display: none; }   /* phones open the drawer, not a dropdown */
  .mx-tool-wish, .mx-tool-user { display: none; }
  .mx-tool-sum { display: none; }
  .mx-search input { padding: 0 12px; }
  .mx-search button { width: 50px; }
  .mx-front { padding-top: 32px; }
  .mx-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px auto; min-height: 0; }
  .mx-slide-media { grid-row: 1; }
  .mx-slide-copy { grid-row: 2; padding: 24px 22px 76px; gap: 14px; }
  .mx-slide-copy p { font-size: 16px; }
  .mx-slider-ui { left: 22px; bottom: 20px; }
  .mx-promos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mx-promo { min-height: 132px; }
  .mx-promo-text { padding: 18px 20px; }
  .mx-promo-text strong { font-size: 20px; }

  .mx-popular { padding-block: 56px 64px; }
  .mx-rail { grid-auto-columns: 68%; }
  .mx-rail-head { flex-wrap: wrap; row-gap: 6px; margin-bottom: 18px; }
  .mx-rail-head h2 { flex: 1 1 100%; }
  .mx-rail-head .mx-more { margin-left: 0; }
  .mx-rail-ui { margin-left: auto; }
  .mx-deals { padding: 52px 20px 48px; margin-bottom: 56px; }
  .mx-sky { transform: scale(.78); transform-origin: top right; }
  .mx-sky-slide { display: none; }   /* phones: the photo sits on top of the copy, no room for garnish */
  .mx-sky-gifts { top: 12px; right: 14px; }
  .mx-sky-deals { top: 10px; right: 14px; }
  .mx-gifts { padding: 56px 20px 44px; }
  .mx-gifts h2 { margin-bottom: 24px; }
  .mx-ages { gap: 12px; }
  .mx-age { position: relative; grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 14px 14px 16px; }
  .mx-age-n { font-size: 34px; }
  .mx-age-toy { position: absolute; right: -8px; top: -14px; width: 54px; }   /* peeks out of the tile corner */
  .mx-budget { gap: 10px; }
  .mx-deals-side .mx-more { margin-left: 0; }
  .mx-deals-grid { gap: 36px 16px; }
  .mx-deal-sticker { width: 66px; height: 66px; }
  .mx-deal-pct { font-size: 12px; }
  .mx-deal-price { font-size: 14px; }
  .mx-advice { padding-block: 56px; }
  .mx-advice-lead img { aspect-ratio: 4 / 5; }
  .mx-advice-lead-copy { padding: 96px 20px 22px; }
  .mx-advice-list a { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .mx-advice-list img { width: 104px; height: 80px; }
  .mx-advice-list span { font-size: 18px; }
  .mx-info { padding: 40px 20px 48px; margin-bottom: 56px; }
  .mx-fact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "big" "label" "text"; }
  .mx-fact dt { margin-top: 4px; }
  .mx-info-faq { margin-top: 44px; }
  .mx-info-faq summary { font-size: 17px; }
  .mx-info-faq details p { padding-right: 0; }
  .mx-topbar { background: url("img/art/mobile-top.webp") left top / 100% auto no-repeat, var(--mx-sky); }
  .mx-card:not(.mx-deal) { padding: 8px 8px 12px; }
  .mx-card-badges { top: 16px; left: 16px; }
  .mx-card-wish { top: 14px; right: 14px; }
  .mx-topbar-in { min-height: calc(100vw * 244 / 1024); padding-left: 38vw; }
  .mx-foot-art { aspect-ratio: 1024 / 276; background-image: url("img/art/mobile-bottom.webp"); }
  .mx-gifts::before { top: -30px; right: 20px; width: 140px; height: 58px; }
  .mx-advice::after { bottom: -26px; left: 4%; width: 170px; height: 51px; }
  .mx-info::before { top: -28px; right: 10%; width: 110px; height: 55px; }
  .mx-foot-body { padding-top: 28px; }
  .mx-topbar-in { padding-right: 16px; }
  .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
  .mx-grid.is-list .mx-card { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .mx-grid.is-list .mx-card-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "name" "price" "add"; gap: 6px; }
  .mx-grid.is-list .mx-card-wish { left: 64px; top: 0; }
  .mx-toolbar { gap: 10px; margin-bottom: 28px; }
  .mx-tool-field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mx-view-toggle { margin-left: auto; }
  .mx-pager { margin-top: 40px; }
  .mx-pager-step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mx-camps { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 44px; }
  .mx-camp { min-height: 150px; grid-template-columns: minmax(0, 1fr) 34%; }
  .mx-camp-text { padding: 20px; }
  .mx-camp-text strong { font-size: 21px; }
  .mx-camp > .mx-icon { width: 72px; height: 72px; }
  .mx-news-row { flex-direction: column; }
  .mx-news-row input { flex: none; }
  .mx-field-grid, .mx-articles, .mx-articles-small { grid-template-columns: minmax(0, 1fr); }
  .mx-page { padding-block: 16px 64px; }
  .mx-cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mx-cart-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 16px 0; box-shadow: inset 0 1px 0 rgba(11, 31, 77, .1); }
  .mx-cart-table .mx-cart-total { justify-self: end; }
  .mx-cart-table td, .mx-cart-table tbody th { padding: 0; box-shadow: none; }
  .mx-cart-table tbody th { grid-column: 1 / -1; }
  .mx-cart-table td[data-label="Hind"] { display: none; }
  .mx-cart-thumb { width: 64px; height: 64px; padding: 6px; }
  .mx-summary { padding: 22px; }
  .mx-locker { padding-left: 16px; }
  .mx-order-strip { padding: 20px; gap: 12px 24px; }
  .mx-foot-legal .mx-withdraw-btn { margin-left: 0; }
  .mx-pdp-buy .mx-btn-add-solid { min-width: 0; }
  .mx-foot-links { gap: 20px; }
}

/* the narrowest phones: the age label and its toy share a ~130px tile */
@media (max-width: 359px) {
  .mx-age-n { font-size: 28px; }
  .mx-age-toy { width: 44px; right: -6px; top: -12px; }
  /* room for the whole search placeholder ("Otsi mänguasju") */
  .mx-bar-in { gap: 8px; }
  .mx-cat-btn { width: 46px; }
  .mx-search input { padding: 0 8px 0 10px; }
  .mx-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }   /* its reserved width clipped the placeholder */
  .mx-search button { width: 44px; }
  .mx-tool { min-width: 40px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important; }
  html.js .mx-slide:not(.is-current) .mx-slide-copy > * { opacity: 1; transform: none; }
  html.js .mx-slide.is-current .mx-slide-img { animation: none; }
  html.js .mx-rv:not(.is-in) { opacity: 1; transform: none; }
  .mx-sky-star { animation: none !important; }
  body::before, body::after { animation: none !important; }
}


/* =====================================================================================
   Platform layer — what the demo did not need: the block stack, the sticky header in a
   block wrapper, the platform's checkout pieces, the language switcher, cookie consent.
   ===================================================================================== */
:root { --mx-topbar-h: 88px; }

/* The header: on block pages the navbar block's wrapper is sticky (cms-frontend.css), on the shop
   views the <header> itself; either way it is pulled up by the topbar's height so the topbar (with
   the owner's art) scrolls away and the bar stays. */
main > .cms-block--mx-navbar, .mx-head-sticky { position: sticky; top: calc(var(--mx-topbar-h) * -1); z-index: 40; }
.mx-head { display: block; }
.mx-topbar-in { height: var(--mx-topbar-h); min-height: 0; }
.mx-bar { position: relative; top: auto; }
.mx-logo-img { display: block; height: 48px; width: auto; }
/* Language switcher (Blocks::langSwitcherHtml; cms-frontend.css is the base). Only drawn with 2+ public
   languages. A pill in the sticky bar: flag + code + chevron; phones keep the flag only (the code is the
   button's flag alt, the name "Keel/Language" its aria-label). main.js adds the keyboard and aria wiring. */
.mx-lang { display: flex; align-items: center; margin-right: 6px; }
.mx-lang .cms-lang-switch__btn {
  gap: 8px; min-height: 44px; padding: 0 12px 0 10px; border: 1.5px solid rgba(11, 31, 77, .16); border-radius: 999px;
  background: var(--mx-white); color: var(--mx-navy); font: 700 14px/1 var(--mx-font-body); letter-spacing: .02em;
  transition: border-color .2s, color .2s, background-color .2s;
}
.mx-lang .cms-lang-switch__btn:hover { border-color: var(--mx-primary); color: var(--mx-primary); }
.mx-lang .cms-lang-switch.open .cms-lang-switch__btn { border-color: var(--mx-primary); background: var(--mx-sky); color: var(--mx-navy); }
.mx-lang .cms-lang-switch__btn svg { width: 14px; height: 14px; opacity: 1; }
.mx-lang .cms-lang-switch img { width: 22px !important; height: 16px !important; border-radius: 3px !important; box-shadow: 0 0 0 1px rgba(11, 31, 77, .14); }
.mx-lang .cms-lang-switch__panel {
  top: calc(100% + 10px); min-width: 216px; padding: 6px; gap: 2px; border: 1px solid rgba(11, 31, 77, .1); border-radius: var(--mx-r);
  background: var(--mx-white); color: var(--mx-navy); box-shadow: 0 22px 44px -18px rgba(11, 31, 77, .42);
  transform: translateY(-6px) scale(.98); transform-origin: top right;
}
.mx-lang .cms-lang-switch.open .cms-lang-switch__panel { transform: none; transition: opacity .18s ease, transform .18s ease; }   /* visible at once: the keyboard moves focus into it */
.mx-lang .cms-lang-switch__item {
  gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--mx-r-sm);
  color: var(--mx-navy); font: 500 15px/1.2 var(--mx-font-body); text-decoration: none;
}
.mx-lang .cms-lang-switch__item::after {   /* the code, for anyone who reads "FI" faster than a flag */
  content: attr(hreflang); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mx-muted);
}
.mx-lang .cms-lang-switch__item:hover, .mx-lang .cms-lang-switch__item:focus-visible { background: var(--mx-sky); color: var(--mx-primary-deep); }
.mx-lang .cms-lang-switch__item:focus-visible { outline: 2px solid var(--mx-primary); outline-offset: -2px; }
.mx-lang .cms-lang-switch__item.active { background: none; font-weight: 700; }
.mx-lang .cms-lang-switch__item.active:hover, .mx-lang .cms-lang-switch__item.active:focus-visible { background: var(--mx-sky); }
.mx-lang .cms-lang-switch__item.active::after { display: none; }
.mx-lang .cms-lang-switch__item svg { width: 16px; height: 16px; color: var(--mx-primary); }
/* not translated yet: the link leads to that language's home page — muted, still AA (the platform's .6 opacity is not) */
.mx-lang .cms-lang-switch__item.is-unavailable { opacity: 1 !important; color: var(--mx-muted); }
.mx-lang .cms-lang-switch__item.is-unavailable img { opacity: .7; }
/* without JS the list opens on focus */
html:not(.js) .mx-lang .cms-lang-switch:focus-within .cms-lang-switch__panel { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 719px) {
  .mx-lang { margin-right: 0; }
  .mx-lang .cms-lang-switch__btn { gap: 0; width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; }
  .mx-lang .cms-lang-switch__btn > span, .mx-lang .cms-lang-switch__btn > svg { display: none; }
  .mx-lang .cms-lang-switch__panel { right: -50px; }   /* under the bar's right edge, clear of the screen edge */
  .mx-bar-in:has(.mx-lang) .mx-search input { text-overflow: ellipsis; }
}
@media (min-width: 360px) and (max-width: 719px) {   /* the button's 40px (+ gap) come out of the bar's gaps and the search box first */
  .mx-bar-in:has(.mx-lang) { gap: 8px; }
  .mx-bar-in:has(.mx-lang) .mx-search input { padding: 0 4px 0 12px; }
  .mx-bar-in:has(.mx-lang) .mx-search button { width: 46px; }
}

/* Block pages: content blocks without a wrap of their own get the page width. */
:where(main.mx-main > .cms-block:not(.cms-block--mx-navbar):not(.cms-block--mx-footer):not(.cms-block--mx-catalog):not(:has(> .mx-wrap))) {
  width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: 24px;
}
.mx-front { padding-top: 20px; }
.mx-camp-page { padding-top: 8px; }

/* Homepage (and any page with the catalogue block): the sticky catalogue board beside the blocks.
   Every block is a grid item; the board spans the content rows. */
@media (min-width: 1024px) {
  body:not(.cms-edit-mode) main.mx-main:has(> .cms-block--mx-catalog) {
    display: grid; align-content: start;
    grid-template-columns: [full-start] minmax(24px, 1fr) [side-start] 280px [side-end] 24px [content-start] minmax(0, 1008px) [content-end] minmax(24px, 1fr) [full-end];
  }
  body:not(.cms-edit-mode) main.mx-main:has(> .cms-block--mx-catalog) > .cms-block { grid-column: content; min-width: 0; width: auto; max-width: none; margin: 0; padding-inline: 0; }
  body:not(.cms-edit-mode) main.mx-main:has(> .cms-block--mx-catalog) > .cms-block--mx-navbar,
  body:not(.cms-edit-mode) main.mx-main:has(> .cms-block--mx-catalog) > .cms-block--mx-footer { grid-column: full; }
  body:not(.cms-edit-mode) main.mx-main:has(> .cms-block--mx-catalog) > .cms-block--mx-catalog { grid-column: side; grid-row: 2 / span 40; padding-top: 20px; }
  body:not(.cms-edit-mode) main.mx-main:has(> .cms-block--mx-catalog) > .cms-block:not(.cms-block--mx-navbar):not(.cms-block--mx-footer) .mx-wrap { max-width: none; padding-inline: 0; }
}

/* Cards: stock states, the add-to-cart form, a link in place of the button. */
.mx-card-stock.mx-stock-low { color: #9A5B00; }
.mx-card-stock.mx-stock-out { color: var(--mx-sale); }
.mx-card-stock.mx-stock-pre { color: #9A3412; }
.mx-card-stock.mx-stock-in { color: var(--mx-green); }
.mx-card-link { margin-top: 6px; }
.mx-btn:disabled { opacity: .55; cursor: default; }
.mx-promo-blue { background: var(--mx-primary); }
.mx-promo-navy { background: var(--mx-navy); }
.mx-camp-blue { background: var(--mx-primary); }
.mx-camp-green { background: var(--mx-green); }
.mx-camp-sun { background: var(--mx-sun); color: var(--mx-navy); }
.mx-camp-navy { background: var(--mx-navy); }
.mx-listing-block { padding-top: 0; }

/* Product page extras: gallery, variants, stock lines. */
.mx-pdp-media .mx-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.mx-pdp-media .mx-gallery-prev { left: 12px; }
.mx-pdp-media .mx-gallery-next { right: 12px; }
.mx-thumbs { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1; }
.mx-thumb { width: 80px; height: 80px; padding: 6px; border: 0; border-radius: var(--mx-r); background: var(--mx-tile); box-shadow: inset 0 0 0 2px #D5DBE8; }
.mx-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mx-thumb.is-active { box-shadow: inset 0 0 0 2px var(--mx-primary); }
.mx-pdp-info { grid-column: 2; grid-row: 1 / span 2; }
.mx-pdp-short { margin: -8px 0 18px; color: var(--mx-muted); }
.mx-variants { margin: 6px 0 18px; }
.mx-variants-label { font-weight: 700; margin-bottom: 8px; }
.mx-variant-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-variant { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mx-tile); box-shadow: inset 0 0 0 2px #C9D1E3; font-weight: 600; color: var(--mx-navy); }
.mx-variant:hover { box-shadow: inset 0 0 0 2px var(--mx-primary); }
.mx-variant.is-active { background: var(--mx-primary); color: var(--mx-white); box-shadow: none; }
.mx-variant:disabled { opacity: .45; cursor: not-allowed; }
.mx-stock-out { color: var(--mx-sale); }
.mx-stock-low { color: #9A5B00; }
.mx-stock-pre { color: #9A3412; }
.mx-pdp-stock .mx-stock-out, .mx-pdp-stock .mx-stock-pre, .mx-pdp-stock .mx-stock-low { font-weight: 700; }
.mx-spec-h { margin-top: 28px; }

/* Checkout pieces from the platform's flow. */
.mx-field-full { grid-column: 1 / -1; }
.mx-custtype { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; }
.mx-custtype .mx-check-field, label.mx-check-field { align-items: center; cursor: pointer; }
.mx-business { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.mx-country { max-width: 320px; margin-bottom: 16px; }
.mx-choice-logo { height: 26px; width: auto; max-width: 72px; object-fit: contain; }
.mx-choice-desc { padding: 0 16px 14px 48px; margin-top: -6px; font-size: 14px; color: var(--mx-muted); }
.mx-pickup { position: relative; }
.mx-pickup-input { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid #9AA6C0; border-radius: var(--mx-r); background: var(--mx-white); color: var(--mx-navy); font-size: 16px; }
.mx-pickup-input:focus { outline: none; border-color: var(--mx-primary); box-shadow: 0 0 0 3px rgba(23, 71, 201, .2); }
.mx-pickup.is-chosen .mx-pickup-input { border-color: var(--mx-green); font-weight: 600; }
.mx-pickup-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 320px; overflow-y: auto; border-radius: var(--mx-r); background: var(--mx-white); box-shadow: 0 18px 40px -16px rgba(11, 31, 77, .45); }
.mx-pickup-group { padding: 10px 14px 4px; font-size: 13px; font-weight: 700; color: var(--mx-muted); }
.mx-pickup-opt { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; cursor: pointer; }
.mx-pickup-opt small { color: var(--mx-muted); font-size: 13px; }
.mx-pickup-opt:hover, .mx-pickup-opt.is-active { background: var(--mx-sky); }
.mx-pickup-opt.is-selected { color: var(--mx-primary); font-weight: 700; }
.mx-pickup-empty { padding: 14px; color: var(--mx-muted); }
.mx-pickup-count { margin-top: 6px; font-size: 13px; color: var(--mx-muted); }
.mx-ac { position: relative; }
.mx-ac-list { position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 20; max-height: 300px; overflow-y: auto; border-radius: var(--mx-r); background: var(--mx-white); box-shadow: 0 18px 40px -16px rgba(11, 31, 77, .45); }
.mx-ac-list li { display: flex; flex-direction: column; padding: 9px 14px; cursor: pointer; }
.mx-ac-list li.is-active, .mx-ac-list li:hover { background: var(--mx-sky); }
.mx-ac-main { font-weight: 600; }
.mx-ac-sub { font-size: 13px; color: var(--mx-muted); }
.mx-ac-hint { font-size: 13px; color: var(--mx-muted); }
.mx-coupon { display: flex; flex-direction: column; gap: 6px; }
.mx-coupon label { font-size: 14px; font-weight: 600; }
.mx-coupon-row { display: flex; gap: 8px; }
.mx-coupon-row input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--mx-r); background: var(--mx-white); color: var(--mx-navy); text-transform: uppercase; }
.mx-coupon-msg { font-size: 14px; }
.mx-coupon-msg.is-error { color: #FFB4B8; }
.mx-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.mx-summary .mx-btn-sm { background: var(--mx-sun); color: var(--mx-navy); }
.mx-pay-option.is-on { box-shadow: inset 0 0 0 2px var(--mx-sun); }
.mx-pay-group { margin: 6px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: .85; }
.mx-banks { margin: 4px 0 8px; }
.mx-bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mx-bank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 8px; border: 0; border-radius: var(--mx-r); background: var(--mx-white); color: var(--mx-navy); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 2px transparent; }
.mx-bank img { max-height: 28px; max-width: 100%; object-fit: contain; }
.mx-bank.is-on, .mx-bank:hover { box-shadow: inset 0 0 0 2px var(--mx-sun); }
.mx-step-pay { max-width: 720px; display: flex; flex-direction: column; gap: 18px; }
.mx-step-pay .mx-bank { box-shadow: inset 0 0 0 2px #C9D1E3; }
.mx-checkout-summary .mx-check-field { font-size: 15px; }
.mx-checkout-summary .mx-check-field input { accent-color: var(--mx-sun); }
.mx-review small { opacity: .8; }
.mx-checkout-summary .mx-note a { color: var(--mx-white); }

/* Forms posted by script: the line under the button. */
.mx-form-msg, .mx-news-msg { font-weight: 600; min-height: 1.2em; }
.mx-form-msg.is-ok { color: var(--mx-green); }
.mx-form-msg.is-err { color: var(--mx-sale); }
.mx-news-msg { margin-top: 12px; color: var(--mx-navy); }
.mx-receipt { display: flex; flex-direction: column; gap: 14px; }
.mx-receipt h2:not(.mx-page-title) { font-size: clamp(22px, 2vw, 28px); font-weight: 800; }

/* Cookie consent. */
.mx-cc {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  max-width: 760px; margin-inline: auto; padding: 16px 20px; border-radius: var(--mx-r-lg); background: var(--mx-navy); color: var(--mx-white);
  box-shadow: 0 20px 50px -20px rgba(11, 31, 77, .6);
}
.mx-cc[hidden] { display: none !important; }
.mx-cc-text { flex: 1 1 320px; font-size: 15px; }
.mx-cc-text a { color: var(--mx-sun); }
.mx-cc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-cc .mx-btn-quiet { color: var(--mx-white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.mx-cc .mx-btn:not(.mx-btn-quiet) { background: var(--mx-sun); color: var(--mx-navy); }
html.mx-cc-on .mx-toast { bottom: 120px; }

/* Rich text written in the editor. */
.mx-prose img { border-radius: var(--mx-r-lg); }
.mx-prose table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.mx-prose th, .mx-prose td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 rgba(11, 31, 77, .1); }
.mx-prose th { color: var(--mx-muted); font-weight: 600; }
.mx-note p { margin-bottom: 8px; }

@media (max-width: 1023px) {
  :root { --mx-topbar-h: 64px; }
  .mx-pdp-info { grid-column: auto; grid-row: auto; }
  .mx-thumbs { grid-column: auto; }
}
@media (max-width: 719px) {
  :root { --mx-topbar-h: calc(100vw * 244 / 1024); }
  :where(main.mx-main > .cms-block:not(.cms-block--mx-navbar):not(.cms-block--mx-footer):not(.cms-block--mx-catalog):not(:has(> .mx-wrap))) { padding-inline: 16px; }
  .mx-front { padding-top: 32px; }
  .mx-choice-desc { padding-left: 16px; }
  .mx-cc { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; }
  .mx-tool-user { display: none; }
}
.mx-checkout-summary #summaryItems { display: flex; flex-direction: column; gap: 18px; }
/* Hooks the markup names for scripts and tests; layout comes from their parents. */
.mx-cart-lines, .mx-order-lines, .mx-main-shop, .mx-contact-info, .mx-about-copy, .mx-info-body, .mx-age-text, .mx-tool-cart, .mx-topfact-phone { min-width: 0; }
.mx-body-shop { min-height: 100vh; }
.cf-turnstile { margin-top: 12px; }

/* Gift card box in the navy order summary: the shared red is too dark here. */
.mx-giftcard .cms-gc .gc-err { color: #ffb4b4; }
.mx-giftcard .cms-gc { margin: 4px 0 0; }

/* Platform blocks on shop pages (reviews under a product; "Sobib juurde" on the cart, ShopExtras):
   full content width like the rest of the page, not a shrunken column in the middle. */
.mx-extras { margin-top: 72px; }
.mx-main .cms-extras { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: 24px; box-sizing: border-box; align-self: stretch; }
.mx-main .cmsx-section { border-top: 0; padding-top: 0; margin: 72px 0 40px; }
.mx-main .cmsx-section h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; margin-bottom: 14px; }
.mx-main .cmsx-cards ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .mx-main .cmsx-cards ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.mx-main .cmsx-cards img, .mx-main .cmsx-noimg { border-radius: var(--mx-r-sm, 12px); background: var(--mx-white); object-fit: contain; }