/** Shopify CDN: Minification failed

Line 2931:0 Unexpected "}"

**/
/* ==========================================================================
   MARKET LINE — storefront design system
   Loaded after Minimog's CSS from snippets/style-tags.liquid.
   Tokens (--ml-*) come from snippets/ml-design-tokens.liquid (Theme Editor).

   1. Base + primitives
   2. Market Line sections
   3. Minimog component skin (scoped under .ml-theme)
   4. Motion + reduced motion

   Mobile first. Breakpoints: 480 / 768 / 1024 / 1280 / 2560.
   ========================================================================== */

/* 1. BASE ---------------------------------------------------------------- */
:root {
  --ml-ease: cubic-bezier(.2, .75, .25, 1);
  --ml-ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ml-gutter: 14px;
  --ml-tap: 44px;
  --ml-header-h: 64px;
  font-synthesis: none;
}

@media (min-width: 768px) {
  :root { --ml-gutter: 20px; }
}

@media (min-width: 1024px) {
  :root { --ml-header-h: 74px; }
}

/* Very large displays: widen the canvas a little, never scale type up. */
@media (min-width: 2560px) {
  :root { --ml-content-width: 1440px; }
}

.ml-theme {
  background-color: var(--ml-bg);
  color: var(--ml-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.ml-theme ::selection {
  background: rgba(var(--ml-accent-rgb), .28);
  color: var(--ml-text);
}

/* Minimog's chunk.css ships `:focus { outline: none !important }`, which silently removed every
   keyboard focus ring in the store. :focus-visible only matches keyboard focus, so mouse users see
   no change. */
.ml-theme :focus-visible {
  outline: 2px solid var(--ml-focus) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

.ml-skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--ml-accent);
  color: var(--ml-on-accent);
  font-weight: 700;
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform .2s var(--ml-ease);
}

.ml-skip:focus { transform: none; }

/* Primitives */
.ml-container {
  width: min(100% - (var(--ml-gutter) * 2), var(--ml-container-max, var(--ml-content-width)));
  margin-inline: auto;
}

.ml-section {
  position: relative;
  padding-block: var(--ml-pt-m, var(--ml-section-gap-mobile)) var(--ml-pb-m, var(--ml-section-gap-mobile));
  font-size: var(--ml-b-m, 15px);
  --ml-card-bg: var(--ml-surface);
  --ml-card-bg-hover: var(--ml-surface-2);
}

@media (min-width: 768px) {
  .ml-section {
    padding-block: var(--ml-pt-d, var(--ml-section-gap-desktop)) var(--ml-pb-d, var(--ml-section-gap-desktop));
    font-size: var(--ml-b-d, 15px);
  }
}

.ml-scheme--base { background: var(--ml-bg); }
.ml-scheme--surface { background: var(--ml-surface); border-block: 1px solid var(--ml-border); --ml-card-bg: var(--ml-surface-2); --ml-card-bg-hover: var(--ml-surface-3); }
.ml-scheme--surface-2 { background: color-mix(in srgb, var(--ml-surface) 55%, var(--ml-bg)); border-block: 1px solid rgba(var(--ml-text-rgb), .05); }
.ml-scheme--elevated { background: var(--ml-surface-3); border-block: 1px solid var(--ml-border); --ml-card-bg: var(--ml-surface-2); --ml-card-bg-hover: var(--ml-surface); }
.ml-scheme--accent { background: rgba(var(--ml-accent-rgb), .07); border-block: 1px solid rgba(var(--ml-accent-rgb), .16); }

.ml-micro {
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
  color: var(--ml-muted);
}

.ml-micro--accent { color: var(--ml-accent); }

.ml-icon { width: 20px; height: 20px; flex: none; }

.ml-btn {
  min-height: 50px;
  padding: 0 18px;
  border-radius: var(--ml-radius-small);
  border: 1px solid var(--ml-border);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s var(--ml-ease), background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ml-btn .ml-icon { width: 18px; height: 18px; transition: transform .2s var(--ml-ease); }
.ml-btn:hover .ml-icon { transform: translateX(3px); }
.ml-btn:active { transform: translateY(1px) scale(.985); }
.ml-btn[disabled], .ml-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.ml-btn--primary { background: var(--ml-accent); color: var(--ml-on-accent); border-color: transparent; }
.ml-btn--primary:hover { background: var(--ml-accent-hover); color: var(--ml-on-accent); transform: translateY(-2px); }
.ml-btn--ghost { background: var(--ml-surface); color: var(--ml-text); }
.ml-btn--ghost:hover { background: var(--ml-surface-2); border-color: var(--ml-border-strong); color: var(--ml-text); }

@media (min-width: 768px) {
  .ml-btn { min-height: 48px; }
}

.ml-text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--ml-tap);
  color: var(--ml-text);
  opacity: .82;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .2s ease, color .2s ease;
}

.ml-text-link .ml-icon { width: 16px; height: 16px; transition: transform .2s var(--ml-ease); }
.ml-text-link:hover { opacity: 1; color: var(--ml-text); }
.ml-text-link:hover .ml-icon { transform: translateX(3px); }

@media (min-width: 768px) {
  .ml-text-link { min-height: 0; }
}

.ml-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--ml-ink);
  color: var(--ml-accent-on-ink);
  border: 1px solid var(--ml-ink-border);
  box-shadow: 0 1px 2px rgba(var(--ml-shadow-rgb), .08);
}

.ml-stars { color: var(--ml-star); letter-spacing: .08em; font-size: 13px; line-height: 1; }
.ml-stars__empty { opacity: .25; }

.ml-rte { color: var(--ml-muted); line-height: 1.65; }
.ml-rte p { margin: 0 0 .8em; }
.ml-rte p:last-child { margin-bottom: 0; }
.ml-rte a { color: var(--ml-text); text-decoration: underline; text-underline-offset: 3px; }
.ml-rte ul, .ml-rte ol { padding-left: 1.2em; margin: 0 0 .8em; list-style: revert; }
.ml-rte img { border-radius: var(--ml-radius-small); height: auto; }

.ml-editor-note {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--ml-border-strong);
  border-radius: var(--ml-radius-small);
  color: var(--ml-muted);
  font-size: 14px;
}

@media (max-width: 767px) { .ml-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .ml-hide-desktop { display: none !important; } }

/* Grid */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(var(--ml-cols-m, 2), minmax(0, 1fr));
  gap: var(--ml-gap-m, 10px);
}

@media (min-width: 768px) {
  .ml-grid {
    grid-template-columns: repeat(min(var(--ml-cols-d, 4), 3), minmax(0, 1fr));
    gap: var(--ml-gap-d, 16px);
  }
}

@media (min-width: 1024px) {
  .ml-grid { grid-template-columns: repeat(var(--ml-cols-d, 4), minmax(0, 1fr)); }
}

/* Section head */
.ml-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 14px;
  text-align: var(--ml-align-m, left);
}

.ml-section-head__copy { width: 100%; min-width: 0; }

.ml-theme .ml-section-head__title {
  font-family: var(--ml-font-heading);
  font-size: var(--ml-h-m, 32px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 8px 0;
  color: var(--ml-heading);
  text-wrap: pretty;
}

.ml-section-head__desc { color: var(--ml-muted); max-width: 640px; line-height: 1.5; }
.ml-section-head__desc p { margin: 0; }

.ml-section-head[style*="center"], .ml-section [style*="--ml-align-m:center"] .ml-section-head__desc { margin-inline: auto; }

@media (min-width: 768px) {
  .ml-section-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 18px;
    text-align: var(--ml-align-d, left);
  }

  .ml-theme .ml-section-head__title { font-size: clamp(var(--ml-h-m, 32px), 3.1vw, var(--ml-h-d, 46px)); }
  .ml-section-head--compact { margin-bottom: 16px; }
}

/* Media */
.ml-media { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ml-media picture { display: contents; }

.ml-media__img, .ml-media__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-position: var(--ml-pos-m, center center);
  transition: transform .45s var(--ml-ease);
}

.ml-media__placeholder { fill: rgba(0, 0, 0, .18); background: var(--ml-media-bg); }
.ml-media--m-cover .ml-media__img { object-fit: cover; }
.ml-media--m-contain .ml-media__img { object-fit: contain; mix-blend-mode: multiply; }
.ml-media--m-natural { height: auto; }
.ml-media--m-natural .ml-media__img { height: auto; object-fit: contain; }
.ml-media__img.is-broken { visibility: hidden; }

@media (min-width: 768px) {
  .ml-media__img, .ml-media__placeholder { object-position: var(--ml-pos-d, center center); }
  .ml-media--d-cover .ml-media__img { object-fit: cover; height: 100%; }
  .ml-media--d-contain .ml-media__img { object-fit: contain; height: 100%; mix-blend-mode: multiply; }
  .ml-media--d-cover .ml-media__img { mix-blend-mode: normal; }
  .ml-media--d-natural { height: auto; }
  .ml-media--d-natural .ml-media__img { height: auto; object-fit: contain; }
}

/* Blurred backdrop: a soft copy of the image fills the frame, the image floats on top as its own tile */
/* Explicit minmax(0, 1fr) tracks make the cell a definite size, so the image's max-height: 100% can resolve. */
.ml-media--backdrop { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; isolation: isolate; box-sizing: border-box; background: var(--ml-surface-2); }

.ml-media__backdrop {
  position: absolute;
  inset: -14%;
  z-index: 0;
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: cover;
  filter: blur(22px) saturate(1.3) brightness(.62);
  transform: translateZ(0);
  pointer-events: none;
}

.ml-media--backdrop::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(var(--ml-bg-rgb), .08), rgba(var(--ml-bg-rgb), .34)); pointer-events: none; }

.ml-media--backdrop .ml-media__img {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .14);
}

.ml-media--backdrop.ml-media--m-cover .ml-media__img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }

@media (min-width: 768px) {
  .ml-media--backdrop.ml-media--d-contain .ml-media__img { width: auto; height: auto; max-width: 100%; max-height: 100%; mix-blend-mode: normal; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .14); }
  .ml-media--backdrop.ml-media--d-cover .ml-media__img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}

/* Spotlight (pointer: fine only — coordinates are written by market-link.js) */
.ml-spotlight-layer { display: none; }

@media (hover: hover) and (pointer: fine) {
  [data-ml-spotlight] > .ml-spotlight-layer {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--ml-accent-rgb), .1), transparent 42%);
    opacity: 0;
    transition: opacity .25s ease;
  }

  [data-ml-spotlight]:hover > .ml-spotlight-layer { opacity: 1; }
}

/* 2. SECTIONS ------------------------------------------------------------ */

/* Marquee */
.ml-marquee {
  height: var(--ml-marquee-h-m, 36px);
  display: flex;
  align-items: center;
  overflow: hidden;
  --ml-marquee-fill: var(--ml-marquee-bg, var(--color-topbar-background, #070809));
  background: var(--ml-marquee-fill);
  color: var(--ml-marquee-color, var(--color-topbar-text, #c7cdca));
  border-bottom: 1px solid var(--ml-border);
  position: relative;
}

/* Edge fades are painted in the bar's own colour. (Masking the whole bar let the page show through
   at the corners, which only looked right on a dark page.) */
.ml-marquee::before, .ml-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: min(6%, 72px); pointer-events: none; }
.ml-marquee::before { left: 0; background: linear-gradient(90deg, var(--ml-marquee-fill), transparent); }
.ml-marquee::after { right: 0; background: linear-gradient(270deg, var(--ml-marquee-fill), transparent); }

.ml-marquee__track {
  display: flex;
  width: max-content;
  animation: ml-marquee var(--ml-marquee-duration, 60s) linear infinite;
  will-change: transform;
}

.ml-marquee__group { display: flex; align-items: center; flex-shrink: 0; }

.ml-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding-inline: 20px;
}

.ml-marquee__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ml-text-rgb), .3); }
.ml-marquee__item .ml-icon { width: 14px; height: 14px; color: var(--ml-accent); }
.ml-marquee__sep { flex: none; font-style: normal; font-size: 11px; color: var(--ml-accent); opacity: .8; }
.ml-marquee__sep--dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ml-accent); }

@keyframes ml-marquee { to { transform: translate3d(-50%, 0, 0); } }

@media (hover: hover) and (pointer: fine) {
  .ml-marquee--pausable:hover .ml-marquee__track { animation-play-state: paused; }
}

.ml-marquee:focus-within .ml-marquee__track { animation-play-state: paused; }

@media (min-width: 768px) {
  .ml-marquee { height: var(--ml-marquee-h-d, 38px); }
  .ml-marquee__item { font-size: 13px; padding-inline: 30px; }
}

/* Hero */
.ml-hero__grid { display: grid; gap: 20px; align-items: stretch; }
.ml-hero--m-media-first .ml-hero__showcase { order: -1; }
.ml-hero__copy { min-width: 0; padding-block: 10px 4px; text-align: var(--ml-align-m, left); }

.ml-theme .ml-hero__title {
  font-family: var(--ml-font-heading);
  font-size: clamp(38px, 13.5vw, var(--ml-h-m, 50px));
  line-height: .98;
  letter-spacing: -.035em;
  margin: 12px 0 18px;
  color: var(--ml-heading);
}

.ml-hero__title span { color: rgba(var(--ml-text-rgb), .56); }

.ml-hero__body {
  font-size: var(--ml-b-m, 16px);
  line-height: 1.55;
  color: rgba(var(--ml-text-rgb), .7);
  max-width: 580px;
  margin: 0 0 22px;
}

.ml-hero__body p { margin: 0; }
.ml-hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }

.ml-hero__search {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  max-width: 590px;
  padding: 6px 6px 6px 14px;
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: calc(var(--ml-radius-small) + 3px);
  color: var(--ml-muted);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ml-hero__search:focus-within {
  border-color: rgba(var(--ml-accent-rgb), .45);
  box-shadow: 0 0 0 4px rgba(var(--ml-accent-rgb), .08);
}

.ml-theme .ml-hero__search input[type="search"] {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ml-text);
  font-size: 16px;
}

.ml-hero__search input::placeholder { color: var(--ml-subtle); }

.ml-hero__search button {
  display: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: calc(var(--ml-radius-small) - 2px);
  background: var(--ml-surface-3);
  color: var(--ml-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease;
}

.ml-hero__search button:hover { background: rgba(var(--ml-text-rgb), .16); }

.ml-hero__meta {
  /* A wrapping row, not a 2-column grid: a fixed half-width column is narrower than
     "International shipping", which made that item wrap while its neighbour did not. */
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ml-hero__meta li { display: flex; align-items: center; gap: 7px; color: rgba(var(--ml-text-rgb), .58); font-size: 13px; line-height: 1.3; min-width: 0; }
.ml-hero__meta .ml-icon { width: 16px; height: 16px; }

.ml-hero__showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: var(--ml-mh-m, 480px);
  padding: 14px;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-r-m, 18px);
  background: linear-gradient(150deg, var(--ml-surface-2), var(--ml-surface));
}

.ml-hero__showcase-head { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 42px; }
.ml-hero__showcase-head > div { display: flex; flex-direction: column; gap: 2px; }
.ml-hero__showcase-head strong { font-size: 18px; line-height: 1.2; }
.ml-hero__showcase-head a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ml-tap); font-size: 13px; font-weight: 600; color: rgba(var(--ml-text-rgb), .78); }
.ml-hero__showcase-head a:hover { color: var(--ml-text); }
.ml-hero__showcase-head a .ml-icon { width: 16px; height: 16px; transition: transform .2s var(--ml-ease); }
.ml-hero__showcase-head a:hover .ml-icon { transform: translateX(3px); }

.ml-hero__showcase-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); /* phones: the main card gets a portrait share, so a product photo is not cut to a strip */
  gap: 10px;
  min-height: 0;
}

.ml-hero__card {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 0;
  border-radius: 15px;
  background: var(--ml-media-bg);
  color: #0b0c0d;
}

.ml-hero__card--main { grid-column: 1 / -1; }
.ml-hero__showcase--1 .ml-hero__card--main { grid-row: 1 / -1; }
.ml-hero__showcase--2 .ml-hero__card--mini { grid-column: 1 / -1; }
.ml-hero__card .ml-media { position: absolute; inset: 0; }
.ml-hero__card .ml-media--m-contain .ml-media__img { padding: 6px 6px 40px; }
.ml-hero__card:hover .ml-media__img { transform: scale(1.035); }

.ml-hero__card-info {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  /* liquid glass: a translucent pane that blurs and slightly brightens what is behind it, with a
     thin top highlight and a soft edge. The tint follows the colour mode through --ml-ink. */
  border: 1px solid rgba(255, 255, 255, .28);
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04)), color-mix(in srgb, var(--ml-ink) 46%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .05), 0 8px 24px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .7));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  color: var(--ml-on-ink);
}
@supports not (backdrop-filter: blur(1px)) {
  .ml-hero__card-info { background: color-mix(in srgb, var(--ml-ink) 90%, transparent); }
}

.ml-hero__card-info span { font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .12em; color: var(--ml-muted-on-ink); }
.ml-hero__card-info strong { font-size: 13px; line-height: 1.25; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-hero__card--main .ml-hero__card-info strong { font-size: 15px; }
.ml-hero__card-info b { font-size: 14px; color: var(--ml-accent-on-ink); font-variant-numeric: tabular-nums; }

@media (min-width: 480px) {
  .ml-hero__actions { display: flex; flex-wrap: wrap; }
  .ml-hero__search button { display: block; }
  .ml-hero__meta { gap: 10px 18px; }
}

@media (min-width: 768px) {
  .ml-hero__copy { text-align: var(--ml-align-d, left); }
  .ml-hero__body { font-size: var(--ml-b-d, 18px); line-height: 1.62; margin-bottom: 28px; }
  .ml-hero__search { margin-top: 28px; }
  .ml-hero__showcase { min-height: var(--ml-mh-d, 530px); padding: 20px; border-radius: var(--ml-r-d, 24px); }
  .ml-hero__showcase-grid { gap: 12px; }
  .ml-hero__card-info { left: 12px; right: 12px; bottom: 12px; padding: 12px; }
  .ml-theme .ml-hero__title { font-size: clamp(var(--ml-h-m, 50px), 6vw, var(--ml-h-d, 88px)); line-height: .94; letter-spacing: -.04em; margin: 18px 0 24px; }
}

@media (min-width: 1024px) {
  .ml-hero__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 26px; }
  .ml-hero--d-copy-right .ml-hero__copy { order: 2; }
  .ml-hero--d-stacked.ml-hero__grid, .ml-hero--solo.ml-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ml-hero--m-media-first .ml-hero__showcase { order: 0; }
  .ml-hero__copy { align-self: center; padding: 40px 8px 40px 0; }
  .ml-hero__showcase-grid { grid-template-columns: 1.45fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .ml-hero__card--main { grid-column: 1; grid-row: 1 / 3; }
  .ml-hero__showcase--1 .ml-hero__card--main { grid-column: 1 / -1; }
  .ml-hero__showcase--2 .ml-hero__card--mini { grid-column: 2; grid-row: 1 / 3; }
  .ml-hero__card .ml-media--d-contain .ml-media__img { padding: 10px 10px 56px; }
}

/* Trust */
.ml-trust--rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ml-border);
  border-radius: 14px;
  background: var(--ml-card-bg);
}

/* Cells draw their own right/bottom hairlines; the container's overflow trims the outer ones. */
/* Mobile: the icon sits ABOVE the copy. Beside it, a half-width cell left ~129px for a title and
   "International shipping" needs ~140px, so only that cell wrapped and looked out of line. Stacked,
   every cell has the same structure: icon, one-line title, description, all top-aligned. */
.ml-trust--rail .ml-trust__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 3px;
  align-content: start;
  justify-items: start;
  min-width: 0;
  padding: 14px 12px;
  margin: 0 -1px -1px 0;
  border-right: 1px solid var(--ml-border);
  border-bottom: 1px solid var(--ml-border);
}

.ml-trust--rail .ml-trust__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ml-trust--rail .ml-icon { width: 20px; height: 20px; margin-bottom: 5px; color: var(--ml-accent); }
.ml-trust__item b { font-size: 13px; line-height: 1.3; text-wrap: pretty; }
.ml-trust__item span { font-size: 12px; line-height: 1.4; color: var(--ml-muted); text-wrap: pretty; }

/* Robust against ANY title length: each cell spans three shared row tracks (icon / title / text) of
   the rail, so if one title wraps, its neighbour's description still starts on the same line.
   Without subgrid support the cells simply size independently, as before. */
@supports (grid-template-rows: subgrid) {
  @media (max-width: 767px) {
    .ml-trust--rail .ml-trust__item { grid-row: span 3; grid-template-rows: subgrid; row-gap: 3px; align-content: stretch; }
    .ml-trust--rail .ml-trust__item b { align-self: start; }
    .ml-trust--rail .ml-trust__item b:last-child { grid-row: span 2; }
  }
}

@media (max-width: 339px) {
  .ml-trust--rail { grid-template-columns: minmax(0, 1fr); }
}

.ml-trust--cards { display: grid; gap: 10px; }

.ml-trust--cards .ml-trust__item {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  background: var(--ml-card-bg);
  display: grid;
  gap: 6px;
}

.ml-trust--cards .ml-icon { width: 24px; height: 24px; color: var(--ml-accent); margin-bottom: 10px; }
.ml-trust--cards .ml-trust__item b { font-size: 17px; }
.ml-trust--cards .ml-trust__item span { font-size: 14px; }

@media (min-width: 768px) {
  .ml-trust--rail { border-radius: var(--ml-radius); }
  .ml-trust--rail .ml-trust__item { grid-row: auto; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; row-gap: 2px; align-content: center; align-items: center; justify-items: stretch; min-height: 78px; padding: 18px 20px; }
  .ml-trust--rail .ml-icon { grid-row: 1 / 3; margin-bottom: 0; }
  .ml-trust--rail .ml-trust__item b:last-child { grid-row: 1 / 3; }
  .ml-trust__item b { font-size: 14px; }
  .ml-trust__item span { font-size: 13px; }
  .ml-trust--cards { grid-template-columns: repeat(min(var(--ml-trust-count, 3), 3), minmax(0, 1fr)); gap: 14px; }
  .ml-trust--cards .ml-trust__item { padding: 24px; }
}

@media (min-width: 1024px) {
  .ml-trust--rail { grid-template-columns: repeat(var(--ml-trust-count, 4), minmax(0, 1fr)); }
}

/* Category cards */
.ml-category-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--ml-mh-m, 132px) 1fr;
  min-width: 0;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-r-m, 14px);
  background: var(--ml-card-bg);
  color: var(--ml-text);
  transition: transform .25s var(--ml-ease), border-color .25s ease, background-color .25s ease;
}

.ml-category-card__media { position: relative; overflow: hidden; background: var(--ml-media-bg); }
.ml-category-card__media .ml-media--m-contain .ml-media__img { padding: var(--ml-cat-pad-m, 6px); }
.ml-category-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.ml-category-card__copy { position: relative; z-index: 2; padding: 11px 12px 13px; min-width: 0; }
/* only the last line of copy keeps clear of the arrow; the title runs the full width */
.ml-category-card__copy > :last-child { padding-right: 24px; }
.ml-category-card__copy .ml-micro { font-size: 11px; }
.ml-theme .ml-category-card h3 { font-family: var(--ml-font-body); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: 4px 0; color: var(--ml-heading); }
.ml-category-card p { font-size: 12.5px; line-height: 1.35; color: var(--ml-muted); margin: 0; }
.ml-category-card__tags { display: none; }
.ml-category-card__arrow { position: absolute; z-index: 2; right: 12px; bottom: 14px; width: 16px; height: 16px; color: var(--ml-muted); transition: transform .2s var(--ml-ease), color .2s ease; }

.ml-category-card__media--blurred { background: var(--ml-surface-2); }
.ml-category-card__media--blurred .ml-media--backdrop { padding: calc(var(--ml-cat-pad-m, 6px) + 6px); }
.ml-category-card__media--blurred .ml-media--backdrop .ml-media__img { padding: 0; }
.ml-category-card__media--blurred .ml-media--backdrop.ml-media--m-cover { padding: 0; }

@media (min-width: 768px) {
  .ml-category-card__media--blurred .ml-media--backdrop { padding: calc(var(--ml-cat-pad-d, 8px) + 8px); }
  .ml-category-card__media--blurred .ml-media--backdrop.ml-media--d-cover { padding: 0; }
  .ml-category-card__media--blurred .ml-media--backdrop.ml-media--d-contain .ml-media__img { padding: 0; }
}

a.ml-category-card:hover { color: var(--ml-text); border-color: rgba(var(--ml-accent-rgb), .25); background: var(--ml-card-bg-hover); }
a.ml-category-card:hover .ml-media__img { transform: scale(1.04); }
a.ml-category-card:hover .ml-category-card__arrow { transform: translateX(3px); color: var(--ml-accent); }

/* Side layout: copy left, fixed square tile right. One tile shape for packshots and lifestyle photos alike. */
.ml-category-grid--side .ml-category-card {
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr) var(--ml-cat-thumb-m, 88px);
  grid-template-areas: "copy media" "arrow media";
  column-gap: 14px;
  align-items: center;
  padding: 12px 12px 12px 16px;
}

.ml-category-grid--side .ml-category-card__media { grid-area: media; width: var(--ml-cat-thumb-m, 88px); aspect-ratio: 1; border-radius: calc(var(--ml-radius-small) + 1px); }
.ml-category-grid--side .ml-category-card__media .ml-media__img { mix-blend-mode: multiply; }
.ml-category-grid--side .ml-category-card__copy { grid-area: copy; align-self: end; padding: 0; }
.ml-category-grid--side .ml-category-card__arrow { grid-area: arrow; position: static; align-self: start; margin-top: 8px; }
.ml-category-grid--side .ml-category-card__tags { display: none; }

@media (min-width: 768px) {
  .ml-category-grid--side .ml-category-card { grid-template-columns: minmax(0, 1fr) var(--ml-cat-thumb-d, 116px); column-gap: 18px; padding: 14px 14px 14px 20px; }
  .ml-category-grid--side .ml-category-card__media { width: var(--ml-cat-thumb-d, 116px); }
  .ml-category-grid--side .ml-category-card__arrow { margin-top: 12px; }
}

@media (max-width: 339px) {
  .ml-category-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 768px) {
  .ml-category-card { grid-template-rows: var(--ml-mh-d, 154px) 1fr; border-radius: var(--ml-r-d, 16px); }
  .ml-category-card__media .ml-media--d-contain .ml-media__img { padding: var(--ml-cat-pad-d, 8px); }
  .ml-category-card__media .ml-media--d-cover .ml-media__img { padding: 0; }
  .ml-category-card__copy { padding: 14px 16px 16px; }
  .ml-category-card__copy > :last-child { padding-right: 28px; }
  /* scales with the column width so a six-across row keeps every department name on one line */
  .ml-theme .ml-category-card h3 { font-size: 15px; }
  .ml-category-card p { font-size: 14px; }
  .ml-category-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ml-category-card__tags span { font-size: 11px; line-height: 1; color: var(--ml-muted); border: 1px solid var(--ml-border); padding: 5px 7px; border-radius: 999px; }
  .ml-category-card__arrow { right: 17px; bottom: 18px; width: 18px; height: 18px; }
  a.ml-category-card:hover { transform: translateY(-4px); }
}

/* Product grids (wrapper only — the card itself is Minimog's, skinned in part 3) */
.ml-card { position: relative; min-width: 0; border-radius: calc(var(--ml-radius) - 1px); }
.ml-card__chip { position: absolute; top: 10px; left: 10px; z-index: 12; pointer-events: none; }
.ml-card--placeholder { display: grid; gap: 6px; }
.ml-card__placeholder-media { aspect-ratio: 1 / 1.02; border-radius: calc(var(--ml-radius) - 1px); overflow: hidden; border: 1px solid var(--ml-border); margin-bottom: 6px; }
.ml-card__placeholder-vendor { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ml-subtle); font-weight: 800; }
.ml-card__placeholder-title { font-size: 14px; color: var(--ml-muted); }
.ml-card__placeholder-price { font-size: 15px; font-weight: 700; }

.ml-product-grid { row-gap: calc(var(--ml-gap-m, 8px) + 8px); }
/* Block box with a minimum height so Minimog's IntersectionObserver can see the empty element and fetch it. */
.ml-recommendations { display: block; min-height: 1px; }
.ml-products:not(:has(.ml-card)):has(> .ml-recommendations) { padding-block: 0; border: 0; }

@media (min-width: 768px) {
  .ml-product-grid { row-gap: calc(var(--ml-gap-d, 16px) + 6px); }
}

@media (max-width: 767px) {
  .ml-product-grid--carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--ml-gutter) * -1);
    padding-inline: var(--ml-gutter);
    scroll-padding-inline: var(--ml-gutter); /* the first snap point is the gutter, not the screen edge */
  }

  .ml-product-grid--carousel > .ml-card { flex: 0 0 46%; scroll-snap-align: start; }
}

.ml-cards--no-wishlist .sf-wishlist__button,
.ml-cards--no-wishlist .sf__tooltip-wishlist,
.ml-cards--no-quickadd .sf__pcard-quick-add,
.ml-cards--no-quickadd .sf__pcard-action-atc,
.ml-cards--no-rating .sf-pcard__reviews,
.ml-cards--no-sale .f-price__badges,
.ml-cards--no-sale .sf__pcard-tags { display: none !important; }

/* Brands */
.ml-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--ml-mh-m, 78px);
  padding: 15px;
  border: 1px solid var(--ml-border);
  border-radius: calc(var(--ml-radius) - 1px);
  background: var(--ml-card-bg);
  color: var(--ml-text);
  transition: border-color .2s ease, transform .2s var(--ml-ease), background-color .2s ease;
}

.ml-brand__name { position: relative; z-index: 2; font-family: var(--ml-font-heading); font-size: 15px; line-height: 1.15; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.ml-brand__logo { position: relative; z-index: 2; max-height: 34px; width: auto; max-width: 70%; object-fit: contain; }
.ml-brands--invert .ml-brand__logo { filter: brightness(0) invert(1); opacity: .86; }
.ml-brand .ml-icon { position: relative; z-index: 2; width: 17px; height: 17px; color: var(--ml-subtle); transition: transform .2s var(--ml-ease), color .2s ease; }
a.ml-brand:hover { color: var(--ml-text); background: var(--ml-card-bg-hover); border-color: rgba(var(--ml-accent-rgb), .22); }
a.ml-brand:hover .ml-icon { transform: translateX(3px); color: var(--ml-accent); }

@media (min-width: 768px) {
  .ml-brand { min-height: var(--ml-mh-d, 94px); padding: 18px; }
  .ml-brand__name { font-size: 15px; }
  a.ml-brand:hover { transform: translateY(-3px); }
}

/* Shortcuts */
.ml-browse { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--ml-border); border-radius: calc(var(--ml-radius) + 2px); background: var(--ml-card-bg); }
.ml-browse__links { display: grid; border-top: 1px solid var(--ml-border); }

.ml-shortcut {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  min-height: 60px;
  color: var(--ml-text);
  transition: background-color .2s ease, border-color .2s ease;
}

.ml-shortcut span { font-weight: 700; font-size: 15px; line-height: 1.3; }
.ml-shortcut small { grid-column: 1; font-size: 13px; color: var(--ml-muted); }
.ml-shortcut .ml-icon { grid-column: 2; grid-row: 1 / 3; width: 17px; height: 17px; color: var(--ml-muted); transition: transform .2s var(--ml-ease), color .2s ease; }
.ml-shortcut:hover { color: var(--ml-text); }
.ml-shortcut:hover .ml-icon { transform: translateX(3px); color: var(--ml-accent); }
.ml-shortcut--static { opacity: .6; }

.ml-browse .ml-shortcut { padding: 14px 4px; border-bottom: 1px solid var(--ml-border); }
.ml-browse .ml-shortcut:hover { background: var(--ml-card-bg-hover); }

.ml-quick-grid .ml-shortcut { overflow: hidden; align-content: center; min-height: 84px; padding: 14px; border: 1px solid var(--ml-border); border-radius: calc(var(--ml-radius) - 2px); background: var(--ml-card-bg); }
.ml-quick-grid .ml-shortcut > * { position: relative; z-index: 2; }
.ml-quick-grid .ml-shortcut:hover { border-color: rgba(var(--ml-accent-rgb), .22); background: var(--ml-card-bg-hover); }

@media (min-width: 768px) {
  .ml-browse { grid-template-columns: .8fr 1.2fr; gap: 40px; padding: 34px; align-items: center; }
  .ml-browse__links { grid-template-columns: 1fr 1fr; border-top: 0; }
  .ml-browse .ml-shortcut { padding: 18px; }
  .ml-browse .ml-shortcut:nth-child(odd) { border-right: 1px solid var(--ml-border); }
  .ml-quick-grid .ml-shortcut { min-height: 110px; padding: 18px; }
  .ml-quick-grid .ml-shortcut span { font-size: 17px; }
}

/* Testimonials + reviews */
.ml-rating-lockup { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ml-rating-lockup > strong { font-family: var(--ml-font-heading); font-size: 36px; line-height: 1; }
.ml-rating-lockup > span { display: flex; flex-direction: column; gap: 4px; }
.ml-rating-lockup small { color: var(--ml-subtle); font-size: 12px; }
.ml-rating-lockup--app:empty { display: none; }

.ml-testimonial, .ml-review {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--ml-border);
  border-radius: calc(var(--ml-radius) - 1px);
  background: var(--ml-card-bg);
  transition: transform .25s var(--ml-ease), border-color .25s ease, background-color .25s ease;
}

.ml-testimonial > *, .ml-review > * { position: relative; z-index: 2; }
.ml-testimonial > .ml-spotlight-layer { position: absolute; z-index: 1; }
.ml-testimonial p, .ml-review p { font-size: 15px; line-height: 1.55; color: rgba(var(--ml-text-rgb), .88); margin: 16px 0 20px; }
.ml-testimonial footer { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.ml-testimonial footer div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-testimonial footer b { font-size: 13px; }
.ml-testimonial footer span, .ml-review__meta { font-size: 12px; line-height: 1.4; color: var(--ml-subtle); }
.ml-testimonial__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ml-review p { margin: 12px 0; }
.ml-review__meta { margin-top: auto; }
.ml-testimonial-grid__app, .ml-reviews__app { grid-column: 1 / -1; min-width: 0; }
/* Phones: eight stacked quotes made the page a very long scroll. They become one swipeable row that
   snaps card by card and bleeds to the screen edge, so the next card peeks in as the cue to swipe. */
@media (max-width: 767px) {
  .ml-testimonials .ml-testimonial-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: -16px; padding: 2px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .ml-testimonials .ml-testimonial-grid::-webkit-scrollbar { display: none; }
  .ml-testimonials .ml-testimonial-grid > .ml-testimonial { flex: 0 0 84%; scroll-snap-align: start; }
  .ml-testimonials .ml-testimonial-grid > .ml-testimonial-grid__app { flex: 0 0 100%; }
}

@media (min-width: 768px) {
  .ml-rating-lockup > strong { font-size: 42px; }
  .ml-rating-lockup--divided { padding-left: 28px; border-left: 1px solid var(--ml-border); }
  .ml-testimonial { min-height: 198px; padding: 20px; }
  .ml-testimonial:hover { transform: translateY(-3px); border-color: rgba(var(--ml-accent-rgb), .22); background: var(--ml-card-bg-hover); }
  .ml-review { min-height: 170px; padding: 20px; }
  .ml-testimonial-grid, .ml-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ml-testimonial-grid, .ml-review-grid { grid-template-columns: repeat(var(--ml-cols-d, 4), minmax(0, 1fr)); }
}

/* FAQ + accordion */
.ml-faq__layout { display: grid; gap: 16px; align-items: start; }
.ml-faq__intro { text-align: var(--ml-align-m, left); }
.ml-faq__intro .ml-text-link { margin-top: 12px; }

.ml-accordion { border-top: 1px solid var(--ml-border); }
.ml-accordion__item { border-bottom: 1px solid var(--ml-border); }
.ml-theme .ml-accordion__heading { margin: 0; font: inherit; letter-spacing: 0; }

.ml-accordion__btn {
  width: 100%;
  min-height: 60px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ml-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-family: var(--ml-font-body);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease;
}

.ml-accordion__btn:hover { color: var(--ml-accent); }
.ml-accordion__btn .ml-icon { width: 17px; height: 17px; transition: transform .25s var(--ml-ease); }
.ml-accordion__item.is-open .ml-accordion__btn .ml-icon { transform: rotate(45deg); }

.ml-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ml-ease); }
.ml-accordion__panel[hidden] { display: none; }
.ml-accordion__item.is-open .ml-accordion__panel { grid-template-rows: 1fr; }
.ml-accordion__content { overflow: hidden; min-height: 0; font-size: 14px; }
.ml-accordion__item.is-open .ml-accordion__content { padding-bottom: 18px; }

@media (min-width: 1024px) {
  .ml-faq__layout { grid-template-columns: .8fr 1.2fr; gap: 54px; }
  .ml-faq__intro { text-align: var(--ml-align-d, left); position: sticky; top: calc(var(--ml-header-h) + 24px); }
  body:has(.scroll-down .header__wrapper) .ml-faq__intro { top: 24px; }
  .ml-accordion__btn { font-size: 16px; min-height: 64px; }
}

/* Page header */
.ml-page-header__inner { display: flex; flex-direction: column; gap: 10px; text-align: var(--ml-align-m, left); }
.ml-page-header__copy { min-width: 0; }

.ml-theme .ml-page-header__title {
  font-family: var(--ml-font-heading);
  font-size: clamp(32px, 11vw, var(--ml-h-m, 44px));
  line-height: 1;
  letter-spacing: -.03em;
  margin: 10px 0;
  color: var(--ml-heading);
  overflow-wrap: anywhere;
}

.ml-page-header__desc { font-size: var(--ml-b-m, 15px); max-width: 640px; }
.ml-page-header__count { font-size: 13px; color: var(--ml-muted); white-space: nowrap; }
.ml-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ml-subtle); font-size: 12px; margin-bottom: 12px; }
.ml-breadcrumbs a:hover { color: var(--ml-text); }

@media (min-width: 768px) {
  .ml-page-header__inner { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: var(--ml-align-d, left); }
  .ml-theme .ml-page-header__title { font-size: clamp(var(--ml-h-m, 44px), 6vw, var(--ml-h-d, 76px)); line-height: .97; letter-spacing: -.035em; margin: 12px 0; }
  .ml-page-header__desc { font-size: var(--ml-b-d, 17px); }
  .ml-page-header__count { padding-bottom: 14px; }
}

/* 3. MINIMOG COMPONENT SKIN ---------------------------------------------- */
/* Minimog stays the commerce engine; these rules only restyle its markup.  */

/* Tailwind light-theme utilities used inside Minimog markup */
.ml-theme .bg-white { background-color: var(--ml-surface); }
.ml-theme .text-black { color: var(--ml-text); }
.ml-theme .text-color-secondary, .ml-theme .text-color-subtext { color: var(--ml-muted); }
.ml-theme .border-color-border, .ml-theme .border-black { border-color: var(--ml-border); }
.ml-theme .hover\:text-color-secondary:hover { color: var(--ml-accent); }
.ml-theme hr { border-color: var(--ml-border); }
.ml-theme .prose, .ml-theme .prose p, .ml-theme .prose li, .ml-theme .prose strong, .ml-theme .prose h1, .ml-theme .prose h2, .ml-theme .prose h3, .ml-theme .prose h4 { color: inherit; }
.ml-theme .prose { color: var(--ml-muted); max-width: none; }
.ml-theme .prose a { color: var(--ml-text); }

.ml-theme h1, .ml-theme h2, .ml-theme h3, .ml-theme h4, .ml-theme .h1, .ml-theme .h2, .ml-theme .h3, .ml-theme .h4 { letter-spacing: -.03em; }
.ml-theme main > .shopify-section:first-child .container,
.ml-theme main { min-width: 0; }
.ml-theme .container, .ml-theme .container-fluid { padding-inline: var(--ml-gutter); }
.ml-theme .container { max-width: calc(var(--ml-content-width) + (var(--ml-gutter) * 2)); }

/* Buttons */
.ml-theme .sf__btn {
  min-height: 48px;
  border-radius: var(--ml-radius-small);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .16s var(--ml-ease), background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ml-theme .sf__btn:active { transform: translateY(1px) scale(.985); }
.ml-theme .sf__btn.sf__btn-primary, .ml-theme a.sf__btn.sf__btn-primary, .ml-theme button.sf__btn.sf__btn-primary { background: var(--ml-accent); border-color: transparent; color: var(--ml-on-accent); }
.ml-theme .sf__btn.sf__btn-primary:hover { background: var(--ml-accent-hover); color: var(--ml-on-accent); box-shadow: none; }
.ml-theme .sf__btn.sf__btn-secondary, .ml-theme .sf__btn.sf__btn-white { background: var(--ml-surface); border: 1px solid var(--ml-border); color: var(--ml-text); }
/* Minimog sets the secondary hover/focus text color with !important (theme.css + chunk.css), so this has to match it.
   Without it every secondary button turns to the dark "button hover text" color on a dark surface. */
.ml-theme .sf__btn.sf__btn-secondary:hover, .ml-theme .sf__btn.sf__btn-secondary:focus,
.ml-theme .sf__btn.sf__btn-white:hover, .ml-theme .sf__btn.sf__btn-white:focus { background: var(--ml-surface-2); border-color: var(--ml-border-strong); color: var(--ml-text) !important; box-shadow: none; }
.ml-theme .sf__btn.sf__btn-secondary:hover svg, .ml-theme .sf__btn.sf__btn-white:hover svg { color: inherit; }
.ml-theme .sf__btn[disabled], .ml-theme .sf__btn.disabled { opacity: .5; cursor: not-allowed; }
.ml-theme .sf__btn-link { color: var(--ml-text); }

/* Form fields */
.ml-theme input[type="text"], .ml-theme input[type="email"], .ml-theme input[type="password"], .ml-theme input[type="tel"],
.ml-theme input[type="number"], .ml-theme input[type="search"], .ml-theme textarea, .ml-theme select, .ml-theme .form-control {
  background-color: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  color: var(--ml-text);
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ml-theme input::placeholder, .ml-theme textarea::placeholder { color: var(--ml-subtle); }
.ml-theme input:focus, .ml-theme textarea:focus, .ml-theme select:focus { border-color: rgba(var(--ml-accent-rgb), .45); box-shadow: 0 0 0 4px rgba(var(--ml-accent-rgb), .08); outline: 0; }
.ml-theme input:disabled, .ml-theme textarea:disabled, .ml-theme select:disabled { opacity: .5; cursor: not-allowed; }
.ml-theme input:user-invalid, .ml-theme textarea:user-invalid { border-color: var(--ml-sale); }
.ml-theme select { background-image: var(--ml-select-arrow); }
.ml-theme input[type="checkbox"], .ml-theme input[type="radio"] { accent-color: var(--ml-accent); }

/* Tooltips */
.ml-theme .sf__tooltip-content { border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px var(--ml-border-strong), 0 8px 24px rgba(var(--ml-shadow-rgb), var(--ml-shadow-strength)); }

/* ---- Header ---- */
.ml-theme .sf-header header, .ml-theme .sf-header .sf-header__desktop, .ml-theme .sf-header .sf-header__mobile {
  background-color: rgba(var(--ml-header-bg-rgb), .88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ml-border);
  color: var(--color-header-text);
}

.ml-theme .sf-header.sf-mega-active header { color: var(--color-header-text); }
.ml-theme .scroll-up .header__wrapper { background: transparent; box-shadow: none; }
.ml-theme .header__wrapper { transition: transform .32s var(--ml-ease), background-color .2s ease; }
.ml-theme .sf-header__mobile { min-height: 64px; gap: 4px; }
.ml-theme .sf-menu-logo-bar { min-height: 74px; }
.ml-theme .sf-header .sf-logo { padding-inline: 1rem; }

.ml-logo-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ml-font-heading);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ml-text);
  white-space: nowrap;
}

.ml-logo-text strong { font-weight: 600; }
.ml-logo-text:hover { color: var(--ml-text); }
.ml-brand-mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; flex: none; }
.ml-brand-mark b { width: 8px; height: 8px; border-radius: 2px; background: var(--ml-text); }
.ml-brand-mark b:nth-child(2), .ml-brand-mark b:nth-child(3) { background: var(--ml-accent); }
.ml-theme .sf-logo--mobile .ml-logo-text { justify-content: center; width: 100%; }

@media (min-width: 1024px) {
  .ml-logo-text { font-size: 20px; }
}

/* nav */
.ml-theme .sf-nav .sf__menu-item-level1, .ml-theme .sf-menu-wrapper__desktop .sf-menu-item-parent > a { font-size: 14px; font-weight: 600; color: rgba(var(--ml-text-rgb), .74); transition: color .18s ease; }
.ml-theme .sf-nav .sf__menu-item-level1:hover, .ml-theme .sf-menu-item--active > a, .ml-theme .sf-menu-item-parent:hover > a, .ml-theme .sf-menu-item-parent > a[aria-current="page"] { color: var(--ml-text); }
.ml-theme .sf-nav .sf__menu-item-level1:after, .ml-theme .sf-nav .sf__menu-item-level1:before { background-color: var(--ml-accent); }
.ml-theme .sf-header__desktop .sf-menu-item-parent > a::after, .ml-theme .sf-header__desktop nav a::after, .ml-theme .sf-header__desktop a.block::after { background-color: var(--ml-accent); }
.ml-theme .sf-header__dropdown-bg, .ml-theme .sf-menu__dropdown, .ml-theme .sf-menu__submenu, .ml-theme .sf-menu__desktop-sub-menu {
  background-color: var(--ml-surface);
  color: var(--ml-text);
}
.ml-theme .sf-menu__dropdown, .ml-theme .sf-menu__desktop-sub-menu .sf-menu__inner { border: 1px solid var(--ml-border); border-radius: 0 0 var(--ml-radius) var(--ml-radius); box-shadow: 0 30px 80px rgba(var(--ml-shadow-rgb), var(--ml-shadow-strength)); }
.ml-theme .sf-sub-menu__link, .ml-theme .sf__sub-menu-link1, .ml-theme .sf__sub-menu-link2 { color: rgba(var(--ml-text-rgb), .74); font-size: 14px; }
.ml-theme .sf-sub-menu__link:hover, .ml-theme .sf__sub-menu-link1:hover, .ml-theme .sf__sub-menu-link2:hover { color: var(--ml-text); }
.ml-theme .sf-menu-submenu__title { color: var(--ml-text); }

/* header actions */
.ml-theme .sf-header .ml-header-icon,
.ml-theme .sf-header .cart-icon,
.ml-theme .sf-header a[href*="wishlist"],
.ml-theme .sf-header .sf-menu-button,
.ml-theme .sf-header m-search-popup:not(.ml-search-trigger-wrap) {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: 4px;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-small);
  color: var(--ml-text);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .16s ease;
}

.ml-theme .sf-header .sf-menu-button { flex: 0 0 42px; width: 42px; margin-left: -6px; justify-content: center; }
.ml-theme .sf-header__mobile > .sf-menu-button { margin-right: auto; }
.ml-theme .sf-header__mobile-right { gap: 0; }

@media (hover: hover) {
  .ml-theme .sf-header .ml-header-icon:hover,
  .ml-theme .sf-header .cart-icon:hover,
  .ml-theme .sf-header a[href*="wishlist"]:hover,
  .ml-theme .sf-header .sf-menu-button:hover,
  .ml-theme .sf-header m-search-popup:not(.ml-search-trigger-wrap):hover { background: var(--ml-surface-2); border-color: var(--ml-border); }
}

.ml-theme .sf-header .cart-icon:active, .ml-theme .sf-header .ml-header-icon:active { transform: translateY(1px) scale(.985); }
.ml-theme .sf-header .ml-icon { width: 20px; height: 20px; display: block; }

.ml-theme .sf-cart-count, .ml-theme .sf-wishlist-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--ml-accent);
  color: var(--ml-on-accent);
  font-size: 11px;
  line-height: 18px;
  font-weight: 800;
  text-align: center;
}

.ml-theme .sf-wishlist-count:empty { display: none; }

.ml-search-trigger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-small);
  background: transparent;
  color: var(--ml-text);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .16s ease;
}

.ml-search-trigger:active { transform: translateY(1px) scale(.985); }
.ml-theme .ml-search-trigger-wrap { border: 0; padding: 0; margin-right: 4px; }

@media (min-width: 1024px) {
  .ml-search-trigger--full {
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    width: auto;
    min-width: 206px;
    padding: 0 10px 0 12px;
    border-color: var(--ml-border);
    color: rgba(var(--ml-text-rgb), .68);
    text-align: left;
  }

  .ml-search-trigger--full:hover { border-color: var(--ml-border-strong); background: var(--ml-surface); }
  .ml-search-trigger__label { font-size: 13px; white-space: nowrap; }
  .ml-search-trigger__kbd { font-family: inherit; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--ml-border); background: var(--ml-bg); color: var(--ml-subtle); white-space: nowrap; }
}

@media (max-width: 1279px) {
  .ml-search-trigger--full { min-width: 0; }
  .ml-search-trigger__kbd { display: none; }
}

/* ---- Mobile navigation drawer ---- */
.ml-theme .sf-menu-wrapper-mobile .sf-menu__content { background: color-mix(in srgb, var(--ml-surface) 60%, var(--ml-bg)); color: var(--ml-text); border-right: 1px solid var(--ml-border); width: min(390px, 92vw); transition: transform .34s var(--ml-ease-spring); }
.ml-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--ml-border); }
.ml-nav-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--ml-radius-small); background: transparent; color: var(--ml-text); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.ml-nav-close:hover { background: var(--ml-surface-2); border-color: var(--ml-border); }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links { padding: 4px 8px 8px; }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-content { justify-content: flex-start; min-height: 100%; }
.ml-theme .sf-menu-wrapper-mobile .sf-menu__content > .flex { min-height: 100%; }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li { border-bottom: 1px solid var(--ml-border); }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li > a { display: flex; align-items: center; min-height: 56px; padding: 0 12px; font-size: 17px; font-weight: 700; color: var(--ml-text); }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li ul a { display: flex; align-items: center; min-height: 44px; padding: 0 12px 0 28px; font-size: 15px; color: rgba(var(--ml-text-rgb), .78); }
.ml-theme .sf-menu-wrapper-mobile .mega-menu-customer { margin-top: auto; padding-top: 24px; }
.ml-theme .sf-menu-wrapper-mobile .mega-menu-customer > div { margin-bottom: 16px; }
.ml-theme .sf-menu-wrapper-mobile .btn-logout { border-color: var(--ml-border); }
.ml-theme .sf-menu-wrapper-mobile .sf-link { border-bottom: 1px solid var(--ml-border); }
.ml-theme .sf-menu-wrapper-mobile .sf-link > a { min-height: 56px; font-size: 17px; font-weight: 700; color: var(--ml-text); }
.ml-theme .sf-menu-wrapper-mobile .sf__toggle-submenu-mb { min-width: 48px; min-height: 56px; color: var(--ml-muted); }
.ml-theme .sf-menu-wrapper-mobile .sf-sub-links { background: color-mix(in srgb, var(--ml-surface) 60%, var(--ml-bg)); }
.ml-theme .sf-menu-wrapper-mobile .back { min-height: 52px; color: var(--ml-muted); font-size: 14px; }
.ml-theme .sf-menu-wrapper-mobile .sf-sub-links .sf-link > a { font-size: 16px; font-weight: 600; }

/* ---- Search popup (Minimog predictive search, command-palette styling) ---- */
.ml-theme [data-search-popup] { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ml-theme [data-search-popup] .search-container { background: color-mix(in srgb, var(--ml-surface) 70%, var(--ml-bg)); color: var(--ml-text); }
.ml-theme [data-search-popup] .sf-logo, .ml-theme [data-search-popup] .m-search-wrapper > .flex > .w-1\/6 { display: none !important; }
.ml-theme [data-search-popup] .m-search-wrapper > .flex > div { width: 100%; }
.ml-theme [data-search-popup] .f-price, .ml-theme [data-search-popup] .f-price__sale { gap: 2px 8px; align-items: baseline; }
.ml-theme [data-search-popup] s.f-price-item { margin-left: 0; font-size: 13px; color: var(--ml-subtle); }
.ml-theme [data-search-popup] .m-search-form { margin-inline: 0; border: 1px solid var(--ml-border); border-radius: calc(var(--ml-radius-small) + 3px); background: var(--ml-bg); }
.ml-theme [data-search-popup] .m-search-form:focus-within { border-color: rgba(var(--ml-accent-rgb), .45); box-shadow: 0 0 0 4px rgba(var(--ml-accent-rgb), .08); }
.ml-theme [data-search-popup] .m-search-form input[type="search"] { height: 52px; padding-left: 16px; background: transparent; border: 0; box-shadow: none; font-size: 17px; }
.ml-theme [data-search-popup] .m-search-form button, .ml-theme [data-search-popup] [data-clear-search] { color: var(--ml-muted); top: 4px; }
.ml-theme [data-search-popup] [data-popular-searches] span, .ml-theme [data-search-popup] [data-search-count] { color: var(--ml-muted); font-size: 14px; }
.ml-theme [data-search-popup] [data-search-count] .text-black { color: var(--ml-text); }
.ml-theme [data-search-popup] [data-ps-item] { padding: 7px 10px; border: 1px solid var(--ml-border); border-radius: 9px; font-size: 12px; color: rgba(var(--ml-text-rgb), .74); text-decoration: none; margin: 0 8px 8px 0; }
.ml-theme [data-popular-searches]:has([data-ps-item]:only-child:empty), .ml-theme [data-popular-searches]:not(:has([data-ps-item])) { display: none; }
.ml-theme .m-search-item > a > div:first-child { border-radius: 12px; overflow: hidden; background: var(--ml-media-bg); border: 1px solid var(--ml-border); }
.ml-theme .m-search-item img { object-fit: contain; }
.ml-theme .m-search-item p { font-size: 14px; line-height: 1.35; color: var(--ml-text); }

@media (min-width: 768px) {
  .ml-theme [data-search-popup] .search-container {
    width: min(960px, calc(100% - 32px));
    margin: 84px auto 0;
    padding: 18px;
    border: 1px solid var(--ml-border-strong);
    border-radius: calc(var(--ml-radius) + 2px);
    box-shadow: 0 30px 100px rgba(var(--ml-shadow-rgb), var(--ml-shadow-strength));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .ml-theme [data-search-popup] .m-search-wrapper { padding: 0; max-width: none; }
  .ml-theme [data-search-popup] .m-search-wrapper > .flex > div { width: 100%; }
  .ml-theme [data-search-popup] [data-popular-searches] { justify-content: flex-start; }
  .ml-theme [data-search-popup] [data-search-items-wrapper] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Product card (Minimog .sf__pcard) ---- */
.ml-theme .sf__pcard { display: flex; flex-direction: column; height: 100%; }
.ml-theme .sf__pcard .background-color-expand { display: none; }

.ml-theme .sf__pcard .sf__image-box {
  border: 1px solid var(--ml-border);
  border-radius: calc(var(--ml-radius) - 1px);
  background: var(--ml-media-bg);
  transition: transform .25s var(--ml-ease), border-color .25s ease, box-shadow .25s ease;
}

.ml-theme .sf__pcard .sf__image-box [style*="--aspect-ratio"] { --aspect-ratio: .98 !important; }
.ml-theme .sf__pcard .sf-image:after { background-color: rgba(0, 0, 0, .06); }
.ml-theme .sf__pcard .sf-image img { mix-blend-mode: multiply; object-fit: var(--ml-card-fit, contain); padding: var(--ml-card-pad, 4%); transition: transform .45s var(--ml-ease); }
.ml-theme .sf__pcard .sf__placeholder-svg { background: var(--ml-media-bg); fill: rgba(0, 0, 0, .18); }

/* wishlist / quick view: top-right, always reachable on touch */
.ml-theme .sf__pcard .sf__pcard-image .sf__pcard-action {
  display: block;
  position: absolute;
  inset: 10px 10px auto auto;
  width: auto;
  opacity: 1;
  transform: none;
  z-index: 11;
}

.ml-theme .sf__pcard .sf__pcard-group-action { display: flex; flex-direction: column; gap: 6px; }

.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon {
  position: relative;
  width: 38px;
  height: 38px;
  margin: 0 !important;
  border: 1px solid var(--ml-ink-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ml-ink) 92%, transparent);
  color: var(--ml-on-ink);
  box-shadow: 0 1px 2px rgba(var(--ml-shadow-rgb), .08);
  transition: opacity .2s ease, transform .2s var(--ml-ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon svg { width: 17px !important; height: 17px !important; }
.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon:hover { background: var(--ml-ink); border-color: rgba(var(--ml-accent-rgb), .5); color: var(--ml-accent-on-ink); }
/* saved: accent fill, so state reads at a glance in either mode */
.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon.added-to-wishlist { background: var(--ml-accent); border-color: transparent; color: var(--ml-on-accent); }
.ml-theme .sf__pcard .sf-wishlist__button.added-to-wishlist svg { fill: currentColor; }

/* Minimog's hover tooltips are positioned outside the button; inside a rounded, clipped card they
   get cut off and cover the neighbouring icon. The icons are self-explanatory, so the label is kept
   for assistive tech only. */
.ml-theme .sf__pcard .sf__pcard-action .sf__tooltip-content {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  visibility: visible;
  transform: none;
}

.ml-theme .sf__pcard .sf__pcard-action .sf__tooltip-content::before,
.ml-theme .sf__pcard .sf__pcard-action .sf__tooltip-content::after,
.ml-theme .sf__pcard .sf__pcard-action .sf__tooltip-item::before,
.ml-theme .sf__pcard .sf__pcard-action .sf__tooltip-item::after { display: none !important; }

.ml-theme .sf__pcard .sf__pcard-action .sf-pqv__button { display: none; }

@media (hover: hover) and (pointer: fine) {
  .ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon { opacity: 0; transform: translateY(-4px); }
  .ml-theme .sf__pcard:hover .sf__pcard-action .sf__btn-icon,
  .ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon:focus-visible,
  .ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon.added-to-wishlist { opacity: 1; transform: none; }
  .ml-theme .sf__pcard .sf__pcard-action .sf-pqv__button { display: grid; }
  .ml-theme .sf__pcard:hover .sf__image-box { transform: translateY(-4px); border-color: rgba(var(--ml-accent-rgb), .22); box-shadow: 0 16px 40px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .5)); }
  .ml-theme .sf__pcard:hover .sf-image img { transform: scale(1.04); }
}

.ml-theme .sf__pcard:focus-within .sf__image-box { border-color: rgba(var(--ml-accent-rgb), .3); }

/* badges */
.ml-theme .sf__pcard .sf__pcard-tags { top: 10px; left: 10px; z-index: 10; }
.ml-theme .prod__tag { border-radius: 8px; font-size: 11px; font-weight: 800; line-height: 1; padding: 6px 8px; background: var(--ml-ink); color: var(--ml-accent-on-ink); border: 1px solid var(--ml-ink-border); }
.ml-theme .prod__tag--soldout { background: var(--ml-ink); color: var(--ml-muted-on-ink); border-color: var(--ml-ink-border); top: 10px; left: 10px; }
.ml-theme .ml-card__chip ~ .sf__pcard .sf__pcard-tags, .ml-theme .ml-card__chip ~ .sf__pcard .prod__tag--soldout { top: 40px; }

/* copy */
.ml-theme .sf__pcard .sf__pcard-content { flex: 1; display: flex; flex-direction: column; }
.ml-theme .sf__pcard .sf__pcard-content > div:first-child { margin-top: 10px; }
.ml-theme .sf__pcard .sf__pcard-vendor { font-size: 11px; line-height: 1.2; letter-spacing: .1em; font-weight: 800; color: var(--product-type-color); margin-bottom: 5px; }
.ml-theme .sf__pcard h3 { font-family: var(--ml-font-body); letter-spacing: 0; }
.ml-theme .sf__pcard .sf__pcard-name { font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 2.7em; margin-bottom: 7px; color: var(--product-title-color); transition: color .2s ease; }
.ml-theme .sf__pcard .sf__pcard-name:hover { color: var(--ml-accent); }
.ml-theme .sf__pcard .sf__pcard-price { font-size: 15px; font-variant-numeric: tabular-nums; }
.ml-theme .sf__pcard .f-price, .ml-theme .sf__pcard .f-price__sale { gap: 2px 8px; align-items: baseline; }
.ml-theme .sf__pcard .f-price-item--regular, .ml-theme .sf__pcard .f-price-item--sale, .ml-theme .sf__pcard .prod__price { font-weight: 700; color: var(--ml-text); }
.ml-theme .sf__pcard s.f-price-item, .ml-theme .prod__compare_price { margin-left: 0; font-size: 13px; font-weight: 500; color: var(--ml-subtle); }
.ml-theme .sf__pcard .f-price__badges { margin: 0; }
.ml-theme .sf__pcard .f-badge--sale { margin: 0; padding: 0; border: 0; background: none; font-size: 11px; font-weight: 800; color: var(--ml-sale); }
.ml-theme .sf-pcard__reviews { padding-bottom: 6px; font-size: 13px; }

/* quick add */
/* Quick add is pinned to the bottom of the card. Cards in a row share a height, so every button in
   a row lands on the same line - the thing that matters most in a two-column mobile grid. The cost
   is a little air above the button on a card that is shorter than its neighbour, so the rules below
   keep that difference small (compact swatches, tight price rows) rather than un-pinning again. */
.ml-theme .sf__pcard .sf__pcard-action-atc { margin-top: auto; padding-top: 10px; justify-content: stretch; }
.ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add { width: 100%; }

.ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add .sf__btn {
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  padding: 0 10px;
  border-radius: calc(var(--ml-radius-small) - 1px);
  background: color-mix(in srgb, var(--ml-surface) 80%, var(--ml-bg));
  border: 1px solid var(--ml-border);
  color: var(--ml-text);
  font-size: 13px;
  font-weight: 700;
}

.ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add .sf__btn:hover,
.ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add .sf__btn:focus-visible { background: var(--ml-surface-3); border-color: rgba(var(--ml-accent-rgb), .35); }
.ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add .sf__btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Always visible, desktop included. Hiding it until hover kept its 54px reserved under every card,
   which read as a dead band between the last row and the next section. */

@media (min-width: 768px) {
  .ml-theme .sf__pcard .sf__pcard-name { font-size: 15px; }
}

/* swatches on cards */
/* Minimog prints an empty <pcard-swatch> for products without variants; its margin would still open a gap. */
.ml-theme .sf__pcard .pcard-variant-option { margin-top: 6px; }
/* Minimog's tooltip wrapper adds an 8px bottom margin under every swatch; on a card that is just
   extra height that pushes this card's button away from its neighbour's. */
.ml-theme .sf__pcard .pcard-variant-option .sf__tooltip-item { margin-bottom: 0; }

/* Mobile cards are ~140-180px wide: price + compare price + "-74%" cannot share a line, so the
   discount used to wrap and make sale cards one line taller than the card beside them. Here it
   becomes a chip on the image corner instead, which keeps every price row to a single line.
   (.sf__pcard-content is position: relative and starts at the image's bottom edge.) */
@media (max-width: 767px) {
  .ml-theme .sf__pcard .sf__pcard-content .f-price__badges { position: absolute; left: 8px; top: -34px; z-index: 11; margin: 0; pointer-events: none; }

  .ml-theme .sf__pcard .sf__pcard-content .f-badge--sale {
    display: inline-flex;
    align-items: center;
    padding: 6px 7px;
    border: 1px solid var(--ml-ink-border);
    border-radius: 8px;
    background: var(--ml-ink);
    color: var(--ml-sale);
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(var(--ml-shadow-rgb), .08);
  }

  .ml-theme .sf__pcard .f-price, .ml-theme .sf__pcard .f-price__sale { gap: 2px 6px; }
  .ml-theme .sf__pcard s.f-price-item, .ml-theme .sf__pcard .prod__compare_price { font-size: 12px; }
}
.ml-theme .sf__pcard .pcard-variant-option:not(:has(*)) { display: none; }

/* Minimog grids that host product cards (collection, search, recently viewed) */
.ml-theme .sf__product-listing > div { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; margin-top: 16px; }
.ml-theme .sf__product-listing .sf__col-item { width: auto; max-width: none; padding: 0; }
.ml-theme .sf__product-listing.sf__col-1 > div { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
  .ml-theme .sf__product-listing > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
  .ml-theme .sf__product-listing.sf__col-2 > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ml-theme .sf__product-listing.sf__col-4 > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ml-theme .sf__product-listing.sf__col-5 > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 2560px) {
  .ml-theme .sf__product-listing.sf__col-4 > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Collection page ---- */
.ml-theme .sf__collection-toolbar { position: static; top: auto; background: transparent; border-block: 1px solid var(--ml-border); padding: 0; margin: 0; }
.ml-theme [data-ml-sticky-toolbar="true"] .sf__collection-toolbar { position: sticky; top: 0; z-index: 11; background: rgba(var(--ml-bg-rgb), .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ml-theme .sf__toolbar-wrapper { min-height: 60px; display: flex; align-items: center; gap: 8px; padding-block: 8px; }

.ml-theme .sf__sidebar-open, .ml-theme .sf__sortmb-icon {
  min-height: 44px;
  padding: 0 14px;
  margin-right: 8px;
  border: 1px solid var(--ml-border);
  border-radius: calc(var(--ml-radius-small) - 1px);
  color: var(--ml-text);
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease;
}

.ml-theme .sf__sidebar-open:hover, .ml-theme .sf__sortmb-icon:hover { background: var(--ml-surface-3); border-color: var(--ml-border-strong); }
.ml-theme [data-toolbar-sorting] { margin-left: auto; }
.ml-theme [data-toolbar-sorting] .sf__custom-select, .ml-theme [data-toolbar-sorting] select { min-height: 44px; border-radius: calc(var(--ml-radius-small) - 1px); font-size: 13px; font-weight: 600; }
.ml-theme .sf__custom-select .select-selected { min-height: 44px; padding: 0 12px 0 14px; gap: 10px; background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: calc(var(--ml-radius-small) - 1px); color: var(--ml-text); font-size: 14px; font-weight: 600; transition: border-color .2s ease; }
.ml-theme .sf__custom-select .select-selected:hover, .ml-theme .sf__custom-select .select-selected.select-arrow-active { border-color: var(--ml-border-strong); }
.ml-theme .sf__custom-select .select-selected .select-arrow { color: var(--ml-muted); padding-left: 0; }
.ml-theme .sf__custom-select .select-items { padding: 6px; background: var(--ml-surface); border: 1px solid var(--ml-border-strong); border-radius: var(--ml-radius-small); color: var(--ml-text); box-shadow: 0 20px 60px rgba(var(--ml-shadow-rgb), var(--ml-shadow-strength)); overflow: hidden; }
/* Minimog hardcodes these options as rgba(0,0,0,.3): pale in light mode, invisible in dark. */
.ml-theme .sf__custom-select .select-items div { min-height: 40px; display: flex; align-items: center; padding: 8px 10px; border-radius: calc(var(--ml-radius-small) - 4px); color: var(--ml-text); font-size: 14px; font-weight: 500; }
.ml-theme .sf__custom-select .select-items div:hover { background: var(--ml-surface-2); color: var(--ml-text); }
.ml-theme .sf__custom-select .select-items div.same-as-selected { background: var(--ml-surface-2); color: var(--ml-text); font-weight: 700; }
.ml-theme .sf__gridColumn-view button { color: var(--ml-subtle); }
.ml-theme .sf__gridColumn-view button.active, .ml-theme .sf__gridColumn-view button:hover { color: var(--ml-text); }

/* filter drawer */
.ml-theme .sf__collection-container .sf__sidebar .sf__sidebar-content, .ml-theme .sf__collection-container.sidebar__fixed .sf__sidebar .sf__sidebar-content {
  width: min(405px, 92vw); background: color-mix(in srgb, var(--ml-surface) 60%, var(--ml-bg)); color: var(--ml-text); border-right: 1px solid var(--ml-border); }
.ml-theme .sf__sidebar .sf__accordion-item, .ml-theme .sf__filter-wrapper { border-color: var(--ml-border); }
.ml-theme .sf__sidebar .sf__accordion-button { min-height: 52px; font-size: 15px; font-weight: 700; color: var(--ml-text); }
.ml-theme .sf__sidebar label, .ml-theme .sf__sidebar .sf__list-row a { min-height: 40px; font-size: 14px; color: rgba(var(--ml-text-rgb), .8); }
.ml-theme .sf__sidebar-close { min-width: 44px; min-height: 44px; color: var(--ml-text); }
.ml-theme .sf__option-filter li.active label, .ml-theme .sf__option-filter li.active a, .ml-theme .sf__option-filter input:checked + span { color: var(--ml-accent); }
.ml-theme .sf-facets-price { --color: var(--ml-accent); }
.ml-theme .sf-facets-price .sf-facets-price__range-group { background: linear-gradient(90deg, var(--ml-surface-3) var(--from), var(--ml-accent) var(--from), var(--ml-accent) var(--to), var(--ml-surface-3) var(--to)); }
.ml-theme .sf-facets-price .sf-facets-price__range::-webkit-slider-runnable-track { background: transparent; }
.ml-theme .sf-facets-price .sf-facets-price__range::-webkit-slider-thumb { box-shadow: 0 0 0 14px var(--ml-accent) inset, 0 0 0 2px var(--ml-bg); }
.ml-theme .sf-facets-price .sf-facets-price__range::-moz-range-thumb { box-shadow: 0 0 0 14px var(--ml-accent) inset, 0 0 0 2px var(--ml-bg); }
.ml-theme .sf__sidebar h3 { font-family: var(--ml-font-heading); font-size: 26px; letter-spacing: -.02em; }
.ml-theme .sf__sidebar h4, .ml-theme .sf__sidebar .widget-filter > h4 { font-family: var(--ml-font-body); font-size: 15px !important; font-weight: 700; letter-spacing: 0; color: var(--ml-text); }
.ml-theme .sf__sidebar .widget-filter { margin-bottom: 0; padding-block: 16px; border-top: 1px solid var(--ml-border); }
.ml-theme .sf-facets-price__field { background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small); }
.ml-theme .sf-facets-price__field input { border: 0; background: transparent; box-shadow: none; }

.ml-filter-actions { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ml-border); background: color-mix(in srgb, var(--ml-surface) 60%, var(--ml-bg)); }

@media (min-width: 1280px) {
  .ml-theme .sf__sidebar:not([data-type="fixed"]) .ml-filter-actions { display: none; }
}

/* active facets */
.ml-theme .sf__active-filters a, .ml-theme .sf-active-facets a, .ml-theme [data-active-filters] a, .ml-theme .active-facets a {
  border: 1px solid var(--ml-border);
  border-radius: 9px;
  background: var(--ml-surface-3);
  color: var(--ml-text);
  font-size: 13px;
}

/* pagination */
.ml-theme .sf-pagination { gap: 6px; flex-wrap: wrap; }
.ml-theme .sf-pagination a { display: grid; place-items: center; width: 100%; height: 100%; }
.ml-theme .sf-pagination .ml-icon { width: 18px; height: 18px; }
.ml-icon--flip { transform: scaleX(-1); }
.ml-theme .sf-pagination > span, .ml-theme .sf-pagination > span:not(.deco) { width: 44px; height: 44px; margin: 0; border: 1px solid transparent; border-radius: calc(var(--ml-radius-small) - 1px); color: rgba(var(--ml-text-rgb), .74); font-weight: 700; font-size: 14px; transition: background-color .2s ease, border-color .2s ease; }
.ml-theme .sf-pagination > span:not(.deco):hover { background-color: var(--ml-surface); border-color: var(--ml-border); color: var(--ml-text); }
.ml-theme .sf-pagination > span:not(.deco).current { background-color: var(--ml-surface-3); border-color: var(--ml-border-strong); color: var(--ml-text); }
.ml-theme .empty-collection { color: var(--ml-muted); }

/* sort sheet (mobile): see "Collection toolbar and sort sheet" near the end of this file */

/* ---- Product page ---- */
.ml-theme .product-template { margin-top: 0; margin-bottom: 0; padding-block: 18px 12px; }
.ml-theme .sf-prod__container { gap: 0; }
.ml-theme .sf-breadcrumb, .ml-theme .sf-breadcrumb a, .ml-theme .bread-crumb__item { font-size: 12px; color: var(--ml-subtle); }
.ml-theme .sf-breadcrumb a:hover { color: var(--ml-text); }
.ml-theme .main-product__block-breadcrumb .container { padding: 0; }
.ml-theme .main-product__block-breadcrumb .sf-breadcrumb { padding: 0 0 14px; margin: 0; background: none; }

.ml-theme .sf-prod-media__wrapper .sf-prod-media, .ml-theme .sf-prod-media-item, .ml-theme .product-mb__media .swiper-slide, .ml-theme .sf-product-media__mobile .sf-prod-media-item {
  background: var(--ml-media-bg);
  border-radius: calc(var(--ml-radius) + 2px);
  overflow: hidden;
}

.ml-theme .sf-prod-media img, .ml-theme .sf-prod-media-item img { object-fit: contain; }
.ml-theme .sf-prod-media.media-image img, .ml-theme .scd-item__image img, .ml-theme .m-search-item img { mix-blend-mode: multiply; }
.ml-theme .prod__sticky-atc .add-to-cart { background: var(--ml-accent); border-color: transparent; color: var(--ml-on-accent); min-height: 46px; }
.ml-theme .prod__sticky-atc img { border-radius: 8px; background: var(--ml-media-bg); }
body.template-product.ml-theme #scroll-to-top-button, body.template-product.ml-theme .scroll-to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
  /* the sticky add-to-cart bar covers the bottom 76px; the footer clears it and drops its own
     back-to-top allowance because that button is hidden here (the bar would sit on top of it) */
  body.template-product.ml-theme .sf-footer { padding-bottom: 76px; }
  body.template-product.ml-theme #scroll-to-top-button, body.template-product.ml-theme .scroll-to-top { display: none !important; }
  body.template-product.ml-theme .ml-footer-bottom { padding-bottom: 18px; }
}
.ml-theme .product-mb__media { padding-inline: 0 !important; }
.ml-theme .sf-media-nav .swiper-slide, .ml-theme .nav-swiper-container .swiper-slide { border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small); overflow: hidden; background: var(--ml-media-bg); opacity: 1; cursor: pointer; transition: border-color .2s ease; }
.ml-theme .sf-media-nav .swiper-slide-thumb-active, .ml-theme .nav-swiper-container .swiper-slide-thumb-active { border-color: var(--ml-accent); }
.ml-theme .sf-prod-media__zoom-in, .ml-theme .product-mb__atwl, .ml-theme .sf-slider__controls button, .ml-theme .swiper-button-control { background: color-mix(in srgb, var(--ml-ink) 92%, transparent); color: var(--ml-on-ink); border: 1px solid var(--ml-ink-border); border-radius: 10px; box-shadow: none; }
.ml-theme .swiper-pagination-bullet { background: var(--ml-text); }
/* PDP image controls: one column in the top-right corner, 10px in. Wishlist first, zoom under it.
   Minimog put the zoom at right:-56px/top:20px and only faded it in on hover, on top of the heart. */
.ml-theme .sf-prod-media-item .zoom-in { right: 10px !important; top: 58px !important; left: auto !important; transform: none !important; }
.ml-theme .sf-prod-media-item:hover .zoom-in, .ml-theme .sf-preview__wrapper:hover .zoom-in { opacity: 1; }
.ml-theme .product-mb__atwl { position: absolute; right: 10px; top: 10px; z-index: 12; margin: 0; }
.ml-theme .sf-prod-media__zoom-in, .ml-theme .product-mb__atwl { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }

.ml-theme .main-product__blocks { display: flex; flex-direction: column; }
.ml-theme .main-product__block { margin: 0; padding: 0; }
.ml-theme .main-product__block + .main-product__block { margin-top: 14px; }
.ml-theme .main-product__block:empty { display: none; }
.ml-pdp-vendor { display: inline-block; }
a.ml-pdp-vendor:hover { color: var(--ml-accent-hover); }
.ml-theme .main-product__block-title { margin-top: 8px !important; }

.ml-theme .prod__title h1, .ml-theme .prod__title h2 {
  font-family: var(--ml-font-heading);
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.ml-theme .main-product .f-price, .ml-theme .main-product .f-price__sale { gap: 4px 10px; align-items: center; }
.ml-theme .main-product .f-price-item--regular, .ml-theme .main-product .f-price-item--sale { font-size: 24px; font-weight: 700; color: var(--ml-text); font-variant-numeric: tabular-nums; }
.ml-theme .main-product s.f-price-item { font-size: 15px; font-weight: 500; color: var(--ml-subtle); margin-left: 0; }
.ml-theme .main-product .f-badge--sale { margin: 0; padding: 0; border: 0; background: none; color: var(--ml-sale); font-size: 12px; font-weight: 800; }
.ml-theme .main-product__block-tax { font-size: 12px; color: var(--ml-subtle); margin-top: 4px; }
.ml-pdp-lead { font-size: 16px; line-height: 1.65; color: rgba(var(--ml-text-rgb), .66); }

/* options */
.ml-theme .prod__option-label, .ml-theme .form__label { font-size: 13px; font-weight: 700; color: var(--ml-text); }
.ml-theme .prod__option-label span, .ml-theme .prod__option-label .selected-value { color: var(--ml-muted); font-weight: 500; }

.ml-theme .product-option-item {
  min-height: 44px;
  border: 1px solid var(--ml-border);
  border-radius: calc(var(--ml-radius-small) - 1px);
  background: transparent;
  color: var(--ml-text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.ml-theme .product-option-item:hover { border-color: var(--ml-border-strong); background: var(--ml-surface); }
.ml-theme .sf-po__option-button.active .product-option-item, .ml-theme .product-option-item.active, .ml-theme input:checked + .product-option-item, .ml-theme .sf-po__option-button[data-selected="true"] .product-option-item { border-color: var(--ml-accent); background: rgba(var(--ml-accent-rgb), .08); color: var(--ml-text); box-shadow: none; }
.ml-theme .product-option-item[data-option-type="color"] { min-height: 0; border-radius: 50%; }
/* colour value the palette cannot name and no variant image: show initials instead of a blank dot */
.ml-theme .product-option-item[data-ml-swatch]:not([data-ml-swatch=""]) { position: relative; background: var(--ml-surface-2, var(--ml-surface)); }
.ml-theme .product-option-item[data-ml-swatch]:not([data-ml-swatch=""])::after { content: attr(data-ml-swatch); position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--ml-text); }
.ml-theme .prod__option--color .product-option-item, .ml-theme .sf__pcard .product-option-item[data-option-type="color"] { border-color: var(--ml-border-strong); box-shadow: inset 0 0 0 2px var(--ml-bg); }
.ml-theme .sf-po__option-button.sf_variant-disabled .product-option-item, .ml-theme .product-option-item.disabled, .ml-theme .sf-po__option-button.sold-out .product-option-item { opacity: .42; text-decoration: line-through; }

/* quantity + buy buttons */
.ml-theme .quantity-input, .ml-theme .product-form__quantity .quantity-input {
  min-height: 48px;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  background: transparent;
  color: var(--ml-text);
  overflow: hidden;
}

.ml-theme .quantity-input button, .ml-theme .quantity-input__button { min-width: 40px; min-height: 46px; color: var(--ml-text); background: transparent; }
.ml-theme .quantity-input button:hover { background: var(--ml-surface-2); }
.ml-theme .quantity-input input { border: 0; background: transparent; box-shadow: none; font-weight: 700; color: var(--ml-text); }
.ml-theme .main-product .add-to-cart { min-height: 50px; }
.ml-theme .main-product .add-to-cart.sf__btn-secondary, .ml-theme .main-product .add-to-cart.sf__btn-primary, .ml-theme .main-product .product-form__actions .add-to-cart { background: var(--ml-accent); border-color: transparent; color: var(--ml-on-accent); }
/* These are mint buttons that happen to carry Minimog's secondary class: keep dark text on hover/focus. */
.ml-theme .main-product .add-to-cart:hover, .ml-theme .main-product .add-to-cart:focus,
.ml-theme .prod__sticky-atc .add-to-cart:hover, .ml-theme .prod__sticky-atc .add-to-cart:focus { background: var(--ml-accent-hover); border-color: transparent; color: var(--ml-on-accent) !important; }
.ml-theme .shopify-payment-button__button { border-radius: var(--ml-radius-small) !important; min-height: 50px; overflow: hidden; }
.ml-theme .shopify-payment-button__button--unbranded { background: var(--ml-surface-3) !important; color: var(--ml-text) !important; border: 1px solid var(--ml-border-strong) !important; font-weight: 700; }
.ml-theme .shopify-payment-button__button--unbranded:hover:not([disabled]) { background: var(--ml-surface-2) !important; }
.ml-theme .shopify-payment-button__more-options { color: var(--ml-muted); font-size: 13px; }
.ml-theme .prod__form-error, .ml-theme .product-form__error-message-wrapper { color: var(--ml-sale); font-size: 13px; }

.ml-assurance { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--ml-border); border-radius: calc(var(--ml-radius) - 2px); background: var(--ml-surface); }
.ml-assurance__row { display: flex; gap: 11px; align-items: center; }
.ml-assurance__row .ml-icon { color: var(--ml-accent); }
.ml-assurance__row span { display: flex; flex-direction: column; min-width: 0; }
.ml-assurance__row b { font-size: 13px; line-height: 1.35; }
.ml-assurance__row small { font-size: 12.5px; color: var(--ml-muted); }
/* rows tied to a policy or page are links: same row, plus a quiet chevron */
a.ml-assurance__row--link { color: inherit; text-decoration: none; margin: -6px -8px; padding: 6px 8px; border-radius: 10px; transition: background-color .2s ease; }
a.ml-assurance__row--link:hover, a.ml-assurance__row--link:focus-visible { background: var(--ml-surface-3); }
.ml-assurance__row > span { flex: 1; }
.ml-assurance__go { width: 16px; height: 16px; color: var(--ml-subtle) !important; transition: transform .2s var(--ml-ease); }
a.ml-assurance__row--link:hover .ml-assurance__go { transform: translateX(2px); }
/* availability: text is kept current by Minimog's variant picker through [data-availability] */
.ml-assurance__row--stock { gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--ml-border); }
.ml-assurance__row > .ml-stock__dot { flex: 0 0 8px; width: 8px; height: 8px; margin: 0 6px; border-radius: 50%; background: var(--ml-accent); box-shadow: 0 0 0 4px rgba(var(--ml-accent-rgb), .14); }
.ml-assurance__row--stock:has(.prod__availability--outofstock) .ml-stock__dot { background: var(--ml-subtle); box-shadow: 0 0 0 4px rgba(var(--ml-text-rgb), .08); }
.ml-theme .ml-stock.prod__availability { color: var(--ml-text); font-size: 13px; }
.ml-theme .ml-stock.prod__availability--outofstock { color: var(--ml-subtle); }
.ml-assurance__pay { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ml-border); }
.ml-pay-icon { width: 34px; height: 22px; border-radius: 4px; }
/* search: no results */
.ml-noresults { display: grid; justify-items: center; gap: 18px; padding: 36px 0 56px; text-align: center; }
.ml-noresults__hint { margin: 0; max-width: 46ch; color: var(--ml-muted); font-size: 15px; }
.ml-noresults__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 720px; }
.ml-noresults__links a { display: block; padding: 9px 14px; border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small); background: var(--ml-surface); color: var(--ml-text); font-size: 14px; font-weight: 600; transition: border-color .2s ease, background-color .2s ease; }
.ml-noresults__links a:hover, .ml-noresults__links a:focus-visible { border-color: var(--ml-border-strong); background: var(--ml-surface-3); }
/* in-page anchors clear the sticky header */
.ml-anchor { display: block; position: relative; top: calc(-1 * var(--ml-header-h) - 16px); visibility: hidden; }
/* mobile drawer: customer care links under the navigation */
.ml-nav-care { display: grid; gap: 2px; margin: 10px 16px 0; padding-top: 12px; border-top: 1px solid var(--ml-border); }
.ml-nav-care a { padding: 9px 0; font-size: 14px; color: var(--ml-muted); }
.ml-nav-care a:hover { color: var(--ml-text); }
.ml-nav-care:empty { display: none; }

/* collapsible tabs inside the info column */
.ml-theme .main-product__block-collapsible_tab + .main-product__block-collapsible_tab { margin-top: 0; }
.ml-theme .main-product__block-collapsible_tab .sf__accordion-item, .ml-theme .main-product .sf__accordion-item { border-color: var(--ml-border); }
.ml-theme .main-product .sf__accordion-button { min-height: 58px; padding-block: 0; font-size: 14px; font-weight: 700; color: var(--ml-text); }
.ml-theme .main-product .sf__accordion-content { color: var(--ml-muted); font-size: 14px; line-height: 1.65; }
.ml-theme .main-product .sf__accordion-content .ml-rte { padding-bottom: 16px; }

/* sticky add to cart */
.ml-theme .prod__sticky-atc {
  background: rgba(var(--ml-bg-rgb), .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--ml-border);
  color: var(--ml-text);
  box-shadow: none;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 768px) {
  .ml-theme .product-template { padding-block: 28px 18px; }
  .ml-theme .sf-prod__container > div:first-child { padding-right: 24px; }
  .ml-theme .sf-prod__container > div:last-child { padding-left: 24px; }
  .ml-theme .prod__title h1, .ml-theme .prod__title h2 { font-size: clamp(32px, 3.1vw, 44px); }
}

@media (min-width: 1024px) {
  .ml-theme .sf-prod__container > div:first-child { width: 55%; padding-right: 29px; }
  .ml-theme .sf-prod__container > div:last-child { width: 45%; padding-left: 29px; }
  /* The sticky header slides away on scroll down (.scroll-down on its section) and returns on scroll
     up. The gallery only clears the header while the header is actually on screen; otherwise its
     offset left a ~100px empty band above the image. */
  .ml-theme .sf-product-media__desktop { position: sticky; top: calc(var(--ml-header-h) + 24px); transition: top .3s var(--ml-ease); }
  body:has(.scroll-down .header__wrapper) .sf-product-media__desktop { top: 24px; }
}

/* Minimog product sections (recently viewed etc.) */
.ml-theme .sf-product__section { margin: 0; padding-block: var(--ml-section-gap-mobile); }
.ml-theme .sf-product__section .section-my, .ml-theme .sf-product__section .section-py { margin-block: 0; padding-block: 0; }
.ml-theme .section__heading, .ml-theme .sf-product__section-heading { font-family: var(--ml-font-heading); font-size: clamp(26px, 3.1vw, 40px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 16px; text-align: left; }
.ml-theme .section__header { margin-bottom: 0; text-align: left; }

@media (min-width: 768px) {
  .ml-theme .sf-product__section { padding-block: var(--ml-section-gap-desktop); }
}

/* ---- Cart drawer ---- */
/* Minimog animates --tw-bg-opacity on these scrims; only the colour is re-pointed (warm in light, black in dark). */
.ml-theme .scd__wrapper, .ml-theme [data-search-popup], .ml-theme .sf-menu-wrapper-mobile, .ml-theme .sf-header__overlay,
.ml-theme .sf__collection-container .sf__sidebar { background-color: rgb(var(--ml-scrim-rgb) / var(--tw-bg-opacity, .5)); }
.ml-theme .scd__wrapper { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* The page behind an open cart drawer must not scroll (Minimog locks it for the menu, not the cart).
   The gutter stays reserved so hiding the scrollbar does not nudge the layout sideways. */
/* only where scrollbars take up room; phones use overlay scrollbars and need no gutter */
@media (hover: hover) and (pointer: fine) { html { scrollbar-gutter: stable; } }
html:has(.scd__wrapper:not(.hidden)) { overflow: hidden; }
.ml-theme .scd__content { background: color-mix(in srgb, var(--ml-surface) 60%, var(--ml-bg)); color: var(--ml-text); border-left: 1px solid var(--ml-border); width: min(430px, 100%); transition: transform .34s var(--ml-ease-spring); }
.ml-theme .scd__close { top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--ml-radius-small); color: var(--ml-text); z-index: 5; }
.ml-theme .scd__close:hover { background: var(--ml-surface-2); }
.ml-theme .scd__header { margin-inline: 22px; padding-block: 20px 16px; border-bottom: 1px solid var(--ml-border); }
.ml-theme .scd__header h3 { font-family: var(--ml-font-body); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.ml-theme .scd__body { padding-inline: 22px; }
.ml-theme .scd-item { padding-block: 14px; border-bottom: 1px solid var(--ml-border); margin: 0; }
.ml-theme .scd-item__image { width: 76px; flex: none; margin-right: 12px; border-radius: 10px; overflow: hidden; background: var(--ml-media-bg); }
.ml-theme .scd-item__image img { width: 100%; height: 100%; object-fit: contain; }
.ml-theme .scd-item__info > a { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ml-text); }
.ml-theme .scd-item__variant, .ml-theme .scd-item__variant-option { font-size: 12.5px; color: var(--ml-muted); }
.ml-theme .scd-item__prices { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ml-theme .scd-item__original-price.text-color-sale-price, .ml-theme del.scd-item__original-price { color: var(--ml-subtle); font-weight: 500; }
.ml-theme .scd-item__quantity { border: 1px solid var(--ml-border); border-radius: 9px; background: transparent; overflow: hidden; }
.ml-theme .scd-item__btn { min-width: 36px; min-height: 36px; color: var(--ml-text); }
.ml-theme .scd-item__btn:hover { background: var(--ml-surface-2); }
.ml-theme .scd-item__qty_input { border: 0; background: transparent; box-shadow: none; font-size: 14px; font-weight: 700; color: var(--ml-text); }
.ml-theme .scd-item__remove { color: var(--ml-muted); font-size: 13px; min-height: 36px; }
.ml-theme .scd-item__remove:hover { color: var(--ml-sale); }
.ml-theme .scd-empty-msg { padding: 32px 0; color: var(--ml-muted); }
.ml-theme .scd__footer { padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ml-border); background: transparent; box-shadow: none; }
.ml-theme .scd__summary { border: 0; padding-top: 0; }
.ml-theme .scd__subtotal { font-size: 16px; }
.ml-theme .scd__footer-actions, .ml-theme .scd__addon-actions { border-color: var(--ml-border); }
.ml-theme .scd__addon, .ml-theme .scd__addon-content { background: color-mix(in srgb, var(--ml-surface) 60%, var(--ml-bg)); color: var(--ml-text); }
.ml-theme .scd__footer a.underline { font-size: 13px; color: var(--ml-muted); min-height: 36px; display: inline-flex; align-items: center; }
.ml-theme .scd__overlay { background: rgba(var(--ml-bg-rgb), .7); }
.ml-cart-assurance { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 12px; color: var(--ml-muted); font-size: 12px; }
.ml-cart-assurance span { display: inline-flex; align-items: center; gap: 5px; }
.ml-cart-assurance .ml-icon { width: 14px; height: 14px; }

/* ---- Footer ---- */
.ml-theme .sf-footer { border-top: 1px solid var(--ml-border); font-size: 14px; overflow-x: clip; }
.ml-theme .sf-footer .sf__custom-select .select-items { left: auto; right: 0; max-width: calc(100vw - (var(--ml-gutter) * 2)); }
html { overflow-x: clip; }
.ml-theme .sf-footer .sf__footer-block-title, .ml-theme .sf-footer h3, .ml-theme .sf-footer h4 { font-family: var(--ml-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--color-footer-text); }
.ml-theme .sf-footer a { font-size: 13px; transition: color .2s ease; }
.ml-theme .sf-footer .sf__footer-block-custom_text .sf__footer-block-title { font-family: var(--ml-font-heading); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.ml-theme .sf-footer .sf__footer-block-content, .ml-theme .sf-footer p { color: var(--color-footer-subtext); }
.ml-theme .sf-footer__bottom, .ml-theme .sf-footer .sf__footer-bottom { border-top: 1px solid var(--ml-border); font-size: 12px; }
.ml-theme .sf-footer .sf__accordion-item { border-color: var(--ml-border); }

/* ---- Misc ---- */
.ml-theme #scroll-to-top-button, .ml-theme .scroll-to-top { background: var(--ml-surface-3); color: var(--ml-text); border: 1px solid var(--ml-border-strong); border-radius: var(--ml-radius-small); box-shadow: none; }
.ml-theme .sf-modal__content, .ml-theme .sf-modal .sf-modal__content { background: color-mix(in srgb, var(--ml-surface) 70%, var(--ml-bg)); color: var(--ml-text); border: 1px solid var(--ml-border-strong); border-radius: calc(var(--ml-radius) + 2px); }
.ml-theme .sf-modal__close { color: var(--ml-text); }
.ml-theme .sf-notification, .ml-theme .notification { border-radius: var(--ml-radius-small); font-size: 13px; font-weight: 700; }
.ml-theme .sf__custom_scroll::-webkit-scrollbar-thumb { background: var(--ml-surface-3); }
.ml-theme .spr-container, .ml-theme .jdgm-widget { color: var(--ml-text); }

/* ---- Light / dark toggle ---- */
.ml-mode-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: 4px;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-small);
  background: transparent;
  color: var(--ml-text);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .16s ease;
}

.ml-mode-toggle:active { transform: translateY(1px) scale(.985); }
.ml-mode-toggle__icon { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .25s ease, transform .35s var(--ml-ease-spring); }
.ml-mode-toggle .ml-icon { width: 20px; height: 20px; }
/* light mode shows the moon (tap for dark); dark mode shows the sun */
.ml-mode-toggle__icon--sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-ml-theme="dark"] .ml-mode-toggle__icon--sun { opacity: 1; transform: none; }
html[data-ml-theme="dark"] .ml-mode-toggle__icon--moon { opacity: 0; transform: rotate(60deg) scale(.6); }
.ml-mode-toggle--drawer { margin-left: auto; }

@media (hover: hover) {
  .ml-mode-toggle:hover { background: var(--ml-surface-2); border-color: var(--ml-border); }
}

@media (max-width: 359px) {
  .ml-mode-toggle--header-mobile { display: none; } /* still available in the navigation drawer */
}

/* Mode switch. Animating colour on every element (the first version) ran thousands of transitions
   at once and dropped frames. Instead: transitions are switched OFF while the palette swaps, and the
   browser cross-fades one composited snapshot of the page (View Transitions). Browsers without it
   simply switch instantly. */
html.ml-theme-switching *, html.ml-theme-switching *::before, html.ml-theme-switching *::after { transition: none !important; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- Custom select (market-link.js upgrades native <select> elements to this) ---- */
.ml-select { position: relative; display: inline-block; min-width: 0; max-width: 100%; vertical-align: middle; }
.ml-select--block { display: block; width: 100%; }
/* Inside form rows the control is a field, not an inline chip. */
.ml-theme .form-group .ml-select, .ml-theme .form-group > .ml-select, .ml-theme form .ml-select:only-of-type { display: block; width: 100%; }
.ml-theme .form-group > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }

/* The real select stays in the DOM for forms, Minimog's listeners and no-JS; it is only hidden visually. */
.ml-select > select { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; pointer-events: none; }

.ml-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--ml-border);
  border-radius: calc(var(--ml-radius-small) - 1px);
  background: var(--ml-surface);
  color: var(--ml-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.ml-select__button:hover { border-color: var(--ml-border-strong); }
.ml-select.is-open .ml-select__button, .ml-select__button:focus-visible { border-color: rgba(var(--ml-accent-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--ml-accent-rgb), .1); outline: 0; }
.ml-select__button[disabled] { opacity: .5; cursor: not-allowed; }
.ml-select.is-empty { min-width: 120px; }
.ml-select.is-empty .ml-select__button { cursor: progress; }
.ml-select.is-empty .ml-select__value::before { content: ""; display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: var(--ml-surface-3); vertical-align: middle; }
.ml-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-select__button .ml-icon { width: 16px; height: 16px; color: var(--ml-muted); transition: transform .2s var(--ml-ease); }
.ml-select.is-open .ml-select__button .ml-icon { transform: rotate(180deg); }

.ml-select__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-width: min(360px, calc(100vw - 28px));
  max-height: min(320px, 50vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-small);
  background: var(--ml-surface);
  box-shadow: 0 20px 60px rgba(var(--ml-shadow-rgb), var(--ml-shadow-strength));
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .2s var(--ml-ease);
}

.ml-select__list[hidden] { display: none; }
.ml-select.is-open .ml-select__list { opacity: 1; transform: none; }
.ml-select--up .ml-select__list { top: auto; bottom: calc(100% + 6px); }
.ml-select--right .ml-select__list { left: auto; right: 0; }

.ml-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: calc(var(--ml-radius-small) - 4px);
  color: var(--ml-text);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.ml-select__option.is-active { background: var(--ml-surface-2); }
.ml-select__option[aria-selected="true"] { font-weight: 700; }
.ml-select__option[aria-selected="true"]::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ml-accent); }
.ml-select__option[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.ml-select__group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-subtle); }

@media (max-width: 767px) {
  .ml-select__option { min-height: 44px; font-size: 15px; }
}

/* ---- Cookie banner ----
   Minimog's banner ships with a fixed white/black look (a solid black "Allow" button). It follows
   the Market Line tokens instead, so it is light in light mode and dark in dark mode. */
.ml-theme .m-cookie-banner {
  max-width: min(420px, calc(100vw - (var(--ml-gutter) * 2)));
  padding: 16px;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius);
  background: var(--ml-surface);
  color: var(--ml-text);
  box-shadow: 0 20px 60px rgba(var(--ml-shadow-rgb), var(--ml-shadow-strength));
  font-size: 14px;
  line-height: 1.5;
}

.ml-theme .m-cookie-banner__message { color: rgba(var(--ml-text-rgb), .82); }
.ml-theme .m-cookie-banner__learn-more { color: var(--ml-text); text-decoration: underline; text-underline-offset: 3px; }
.ml-theme .m-cookie-banner__buttons { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

.ml-theme .m-cookie-banner .cookie-action--accept,
.ml-theme .m-cookie-banner .cookie-action--decline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ml-tap);
  padding: 0 16px;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-small);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .16s var(--ml-ease);
}

/* Minimog's own light/dark banner themes set the button colours; ours follow the accent tokens in both modes */
.ml-theme .m-cookie-banner .cookie-action--accept { flex: 1; background: var(--ml-accent) !important; border-color: transparent !important; color: var(--ml-on-accent) !important; }
.ml-theme .m-cookie-banner .cookie-action--accept:hover { background: var(--ml-accent-hover) !important; color: var(--ml-on-accent) !important; }
.ml-theme .m-cookie-banner .cookie-action--decline { color: var(--ml-text) !important; }
.ml-theme .m-cookie-banner .cookie-action--decline { background: transparent; color: var(--ml-text); }
.ml-theme .m-cookie-banner .cookie-action--decline:hover { background: var(--ml-surface-2); border-color: var(--ml-border-strong); }
.ml-theme .m-cookie-banner .cookie-action--accept:active, .ml-theme .m-cookie-banner .cookie-action--decline:active { transform: translateY(1px) scale(.985); }

/* ---- Product compare ----
   Flow: a Compare control saves the product (browser storage) -> the header icon / "View comparison"
   link opens the compare page -> that page lays the saved products out side by side. */
.ml-theme .sf-prod-compare__button.in-prod-page, .ml-compare-view { min-height: var(--ml-tap); color: var(--ml-text); font-size: 14px; font-weight: 600; transition: color .2s ease; }
.ml-theme .sf-prod-compare__button.in-prod-page .ml-icon { width: 18px; height: 18px; }
/* the sibling actions in that row (Ask a question, Share) share one type size */
.ml-theme .prod__form-buttons > a { min-height: var(--ml-tap); font-size: 14px; font-weight: 600; color: var(--ml-text); }
.ml-theme .prod__form-buttons > a:hover { color: var(--ml-accent); }
.ml-theme .prod__form-buttons > a svg { width: 18px; height: 18px; }
.ml-theme .sf-prod-compare__button.in-prod-page:hover, .ml-compare-view:hover { color: var(--ml-accent); }
.ml-theme .sf-prod-compare__button.in-prod-page.added-to-compare { color: var(--ml-accent); }
/* the way to the comparison only appears once something has been added */
.ml-compare-view { display: none; gap: 7px; }
.ml-theme .sf-prod-compare__button.added-to-compare ~ .ml-compare-view, .ml-compare-view.is-active { display: inline-flex; }
.ml-compare-view .ml-icon { width: 16px; height: 16px; transition: transform .2s var(--ml-ease); }
.ml-compare-view:hover .ml-icon { transform: translateX(3px); }
.ml-compare-view .ml-compare-count { position: static; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--ml-accent); color: var(--ml-on-accent); font-size: 11px; line-height: 18px; font-weight: 800; text-align: center; }
.ml-theme .sf-header .ml-header-compare .ml-compare-count[hidden] { display: none; }

/* Compare page: every column shares one structure so rows line up across products. Images come in
   any shape, so they sit in a fixed square frame instead of setting the column's height. */
.ml-theme .sf-prod-compare__container { margin-block: var(--ml-section-gap-desktop); padding-inline: var(--ml-gutter); max-width: calc(var(--ml-content-width) + (var(--ml-gutter) * 2)); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; align-items: stretch; }
.ml-theme .sf-prod-compare { display: flex; flex-direction: column; height: 100%; }
.ml-theme .sf-prod-compare > form { display: flex; flex-direction: column; flex: 1; }
.ml-theme .sf-prod-compare .sf__pcard-image { aspect-ratio: 1; border: 1px solid var(--ml-border); border-radius: calc(var(--ml-radius) - 1px); background: var(--ml-media-bg); }
.ml-theme .sf-prod-compare .sf__pcard-image > div:first-child, .ml-theme .sf-prod-compare .sf__pcard-image .sf-image { position: absolute; inset: 0; height: 100%; }
.ml-theme .sf-prod-compare .sf__pcard-image .sf-image::before { display: none; }
.ml-theme .sf-prod-compare .sf__pcard-image img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6%; object-fit: contain; mix-blend-mode: multiply; }
.ml-theme .sf-prod-compare .sf__pcard-content { flex: 1; display: flex; flex-direction: column; }
.ml-theme .sf-prod-compare .sf__pcard-content > div:first-child { flex: 0 0 auto; }
.ml-theme .sf-prod-compare .sf__pcard-content a.font-medium { min-height: 2.7em; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ml-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-theme .sf-prod-compare .sf__pcard-content p.uppercase { min-height: 1.2em; font-size: 11px; letter-spacing: .1em; font-weight: 800; color: var(--ml-subtle); }
.ml-theme .sf-prod-compare .add-to-cart { width: 100%; margin-block: 12px; }
.ml-theme .sf-prod-compare .border-b { border-color: var(--ml-border); padding-block: 14px; font-size: 14px; }
.ml-theme .sf-prod-compare .text-color-info { color: var(--ml-muted); }
.ml-theme .sf-prod-compare .text-color-success { color: var(--ml-accent); }
.ml-theme .sf-prod-compare .text-color-warning { color: var(--ml-sale); }
/* Minimog hardcodes this as a white circle with a black icon; make it follow the mode like the other
   controls that sit on product imagery. */
.ml-theme .sf-prod-compare .sf-prod-compare__remove { opacity: 1; width: 38px; height: 38px; border: 1px solid var(--ml-ink-border); border-radius: 10px; background: color-mix(in srgb, var(--ml-ink) 92%, transparent); color: var(--ml-on-ink); box-shadow: 0 1px 2px rgba(var(--ml-shadow-rgb), .08); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ml-theme .sf-prod-compare .sf-prod-compare__remove:hover { background: var(--ml-ink); border-color: var(--ml-sale); color: var(--ml-sale); }
.ml-theme .sf-prod-compare .sf-prod-compare__remove svg { width: 16px; height: 16px; }
.ml-theme .sf-prod-compare .sf-prod-compare__remove .sf__tooltip-content { display: none; }
.ml-theme .sf-prod-compare .sf__pcard-image > div:last-child { opacity: 1; right: 10px; top: 10px; }
.ml-theme .sf-prod-compare__no_products h3 { font-family: var(--ml-font-body); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ml-muted); }
.ml-theme .sf-prod-compare__no_products a { color: var(--ml-text); border-color: var(--ml-border-strong); font-weight: 700; }

@media (min-width: 768px) {
  .ml-theme .sf-prod-compare__container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .ml-theme .sf-prod-compare .sf__pcard-content a.font-medium { font-size: 15px; }
}

@media (min-width: 1024px) {
  .ml-theme .sf-prod-compare__container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Drawers (mobile menu + cart) ----
   Same Minimog markup hooks and behaviour; this layer is layout and finish only. */

/* mobile menu */
.ml-theme .sf-menu-wrapper-mobile .sf-menu-content { gap: 0; }
.ml-nav-search {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); min-height: 48px; margin: 4px 16px 10px;
  padding: 0 14px; border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small);
  background: var(--ml-surface); color: var(--ml-subtle); font-size: 15px; text-align: left;
  transition: border-color .2s ease, background-color .2s ease;
}
.ml-nav-search:hover, .ml-nav-search:focus-visible { border-color: var(--ml-border-strong); color: var(--ml-text); }
.ml-nav-search .ml-icon { width: 18px; height: 18px; flex: none; }

.ml-theme .sf-menu-wrapper-mobile .sf-menu-links { padding: 0 16px; }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li,
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > .sf-link { border-bottom: 1px solid var(--ml-border); }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li:last-child { border-bottom: 0; }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li > a,
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > .sf-link > a {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 54px; padding: 0 2px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ml-text);
  transition: color .2s ease, padding-left .25s var(--ml-ease);
}
/* every row ends in the same chevron, whether or not it opens a sub-menu (drawn, not a text glyph) */
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li > a::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: 12px; background: currentColor; opacity: .38;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ml-ease), opacity .2s ease;
}
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li:has(> .sf__toggle-submenu-mb) > a::after { display: none; }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links > li > a:hover::after { transform: translateX(3px); opacity: .7; }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links a[aria-current="page"] { color: var(--ml-accent); }
.ml-theme .sf-menu-wrapper-mobile .sf-menu-links a[aria-current="page"]::after { opacity: .9; }

.ml-nav-group { margin: 22px 16px 0; padding-top: 20px; border-top: 1px solid var(--ml-border); }
.ml-nav-group__title { display: block; margin: 0 0 12px; }
.ml-nav-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ml-nav-tile {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 7px 10px 7px 7px;
  border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small); background: var(--ml-surface); color: var(--ml-text);
  transition: border-color .2s ease, background-color .2s ease, transform .25s var(--ml-ease);
}
.ml-nav-tile:hover, .ml-nav-tile:focus-visible { border-color: var(--ml-border-strong); background: var(--ml-surface-3); }
.ml-nav-tile:active { transform: scale(.985); }
.ml-nav-tile__media { flex: none; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--ml-media-bg); }
.ml-nav-tile__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
html[data-ml-theme="dark"] .ml-nav-tile__media img { mix-blend-mode: normal; }
.ml-nav-tile__name { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.ml-nav-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--ml-text); }
.ml-nav-all .ml-icon { width: 16px; height: 16px; transition: transform .25s var(--ml-ease); }
.ml-nav-all:hover .ml-icon { transform: translateX(3px); }

.ml-nav-utility { display: grid; gap: 2px; margin: 22px 16px 0; padding: 16px 0 28px; border-top: 1px solid var(--ml-border); }
/* the header styles every wishlist link inside it as a 42px icon button; this one is a text row */
.ml-theme .sf-header .ml-nav-utility a.ml-nav-utility__link { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: auto; height: auto; min-height: 46px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 15px; font-weight: 600; color: var(--ml-text); }
.ml-theme .sf-header .ml-nav-utility__link .ml-icon { width: 19px !important; height: 19px !important; margin: 0 !important; color: var(--ml-muted); flex: none; }
.ml-nav-utility__link .sf-wishlist-count { position: static; margin-left: -4px; }
.ml-nav-utility .ml-nav-care { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--ml-border); }
.ml-nav-utility .ml-nav-care a { padding: 6px 0; font-size: 13px; }
.ml-theme .sf-menu-wrapper-mobile .mega-menu-customer { margin-top: 0; }

/* staggered entrance for the drawer's blocks while it is open (skipped for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .ml-motion .sf-menu-wrapper-mobile:not(.hidden) .ml-nav-search,
  .ml-motion .sf-menu-wrapper-mobile:not(.hidden) .sf-menu-links > li,
  .ml-motion .sf-menu-wrapper-mobile:not(.hidden) .ml-nav-group,
  .ml-motion .sf-menu-wrapper-mobile:not(.hidden) .ml-nav-utility { animation: ml-drawer-in .5s var(--ml-ease) both; }
  .ml-motion .sf-menu-wrapper-mobile .sf-menu-links > li:nth-child(1) { animation-delay: .04s; }
  .ml-motion .sf-menu-wrapper-mobile .sf-menu-links > li:nth-child(2) { animation-delay: .07s; }
  .ml-motion .sf-menu-wrapper-mobile .sf-menu-links > li:nth-child(3) { animation-delay: .10s; }
  .ml-motion .sf-menu-wrapper-mobile .sf-menu-links > li:nth-child(4) { animation-delay: .13s; }
  .ml-motion .sf-menu-wrapper-mobile .sf-menu-links > li:nth-child(5) { animation-delay: .16s; }
  .ml-motion .sf-menu-wrapper-mobile .sf-menu-links > li:nth-child(n+6) { animation-delay: .19s; }
  .ml-motion .sf-menu-wrapper-mobile .ml-nav-group { animation-delay: .22s; }
  .ml-motion .sf-menu-wrapper-mobile .ml-nav-utility { animation-delay: .27s; }
}
@keyframes ml-drawer-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* cart drawer */
.ml-theme .scd__close { color: var(--ml-text); }
.ml-theme .scd__close .ml-icon { width: 20px; height: 20px; }
.ml-theme .scd__header .ml-bag-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--ml-font-heading, inherit); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ml-bag-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: rgba(var(--ml-accent-rgb), .12); color: var(--ml-accent); font-family: var(--ml-font-body, inherit); font-size: 13px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ml-bag-count[hidden] { display: none; }

/* line item. Product titles here are long, so the title gets the full width and the price moves to
   the bottom row: [title ........ remove] / options / [stepper ........ price]. The wrapper around
   the stepper and remove button is flattened with display: contents so both can sit on the grid. */
.ml-theme .scd-item { padding-block: 16px; }
.ml-theme .scd-item__image { width: 84px; border: 1px solid var(--ml-border); }
.ml-theme .scd-item__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; column-gap: 10px; align-content: start; flex: 1; min-width: 0; }
.ml-theme .scd-item__info > a { grid-column: 1; grid-row: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ml-theme .scd-item__info > .scd-item__variant { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
.ml-theme .scd-item__info > .scd-item__discounts { grid-column: 1 / -1; grid-row: 3; }
.ml-theme .scd-item__info > div:last-child { display: contents; }
.ml-theme .scd-item__quantity { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 12px; }
.ml-theme .scd-item__prices { grid-column: 2; grid-row: 4; align-self: center; margin-top: 12px; text-align: right; white-space: nowrap; }
.ml-theme .scd-item__prices .cart-drawer__discounted-prices { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 1px; }
.ml-theme .scd-item__prices del { font-size: 12px; font-weight: 500; }
.ml-theme .scd-item__remove { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin: -8px -8px 0 0 !important; }
.ml-theme .scd-item__btn { display: grid; place-items: center; min-width: 38px; min-height: 38px; }
.ml-theme .scd-item__btn .ml-icon, .ml-theme .scd-item__remove .ml-icon { pointer-events: none; }
.ml-theme .scd-item__btn .ml-icon { width: 15px; height: 15px; }
.ml-theme .scd-item__remove { display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0; border-radius: 9px; color: var(--ml-subtle); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.ml-theme .scd-item__remove .ml-icon { width: 18px; height: 18px; }
.ml-theme .scd-item__remove:hover, .ml-theme .scd-item__remove:focus-visible { background: rgba(var(--ml-sale-rgb, 180, 60, 40), .08); color: var(--ml-sale); }

.ml-bag-empty { display: grid; justify-items: center; gap: 12px; padding: 56px 0 !important; text-align: center; }
.ml-bag-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ml-surface-3); color: var(--ml-muted); }
.ml-bag-empty__icon .ml-icon { width: 24px; height: 24px; }
.ml-bag-empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ml-text); }

.ml-theme .scd__subtotal { align-items: baseline; font-size: 15px; }
.ml-theme .scd__subtotal-price { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ml-theme .scd__checkout { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; font-size: 15px; font-weight: 700; }
.ml-bag-checkout__arrow { width: 18px; height: 18px; transition: transform .25s var(--ml-ease); }
.ml-theme .scd__checkout:hover .ml-bag-checkout__arrow { transform: translateX(3px); }
.ml-theme .scd__checkout.loading .ml-bag-checkout__arrow, .ml-theme .scd__checkout[aria-busy="true"] .ml-bag-checkout__arrow { display: none; }
.ml-bag-viewcart { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ml-muted); border-bottom: 1px solid var(--ml-border-strong); padding-bottom: 1px; transition: color .2s ease, border-color .2s ease; }
.ml-bag-viewcart:hover { color: var(--ml-text); border-color: var(--ml-text); }

/* ---- Homepage V2: dense merchandising ----
   Rails share one recipe: a flex row that snaps card by card, bleeds to the screen edge so the
   next card peeks in, and hides its scrollbar. Nothing here changes the cards themselves. */
.ml-rail-m, .ml-product-grid--rail {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ml-rail-m::-webkit-scrollbar, .ml-product-grid--rail::-webkit-scrollbar { display: none; }

@media (max-width: 767px) {
  .ml-category-grid--m-rail, .ml-brand-grid--m-rail, .ml-tile-grid--m-rail, .ml-deal-grid--m-rail {
    display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--ml-gutter) * -1); padding-inline: var(--ml-gutter); scroll-padding-inline: var(--ml-gutter);
    /* room for the hover lift and the spotlight edge, so the rail never scrolls up and down inside itself */
    padding-block: 8px; margin-block: -8px; align-items: stretch;
  }
  .ml-category-grid--m-rail::-webkit-scrollbar, .ml-brand-grid--m-rail::-webkit-scrollbar, .ml-tile-grid--m-rail::-webkit-scrollbar, .ml-deal-grid--m-rail::-webkit-scrollbar { display: none; }
  .ml-category-grid--m-rail > * { flex: 0 0 68%; scroll-snap-align: start; }
  .ml-brand-grid--m-rail > * { flex: 0 0 38%; scroll-snap-align: start; }
  .ml-tile-grid--m-rail > * { flex: 0 0 62%; scroll-snap-align: start; }
  .ml-deal-grid--m-rail > * { flex: 0 0 66%; scroll-snap-align: start; }
}

/* product row: same card, laid out sideways; card width follows the desktop column count */
.ml-product-grid--rail {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--ml-gap-m, 10px);
  margin-inline: calc(var(--ml-gutter) * -1); padding-inline: var(--ml-gutter); padding-bottom: 6px; scroll-padding-inline: var(--ml-gutter);
}
.ml-product-grid--rail > .ml-card { flex: 0 0 46%; scroll-snap-align: start; }
@media (min-width: 768px) {
  .ml-product-grid--rail { gap: var(--ml-gap-d, 16px); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .ml-product-grid--rail > .ml-card { flex-basis: calc((100% - (var(--ml-gap-d, 16px) * 2)) / 3); }
}
@media (min-width: 1024px) {
  .ml-product-grid--rail > .ml-card { flex-basis: calc((100% - (var(--ml-gap-d, 16px) * (var(--ml-cols-d, 4) - 1))) / var(--ml-cols-d, 4)); }
}

/* product grid + side banner */
/* phones: a plain block, so the rail inside can bleed to both screen edges like every other rail */
.ml-product-row { display: block; }
.ml-product-row > .ml-promo { margin-top: 18px; }
.ml-product-row > .ml-product-grid { min-width: 0; }
@media (min-width: 1024px) {
  .ml-product-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ml-gap-d, 16px); align-items: stretch; }
  .ml-product-row > .ml-promo { margin-top: 0; }
  .ml-product-row--banner-start { grid-template-columns: 300px minmax(0, 1fr); }
  .ml-product-row--banner-start > .ml-promo { order: -1; }
}
.ml-promo {
  position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 220px; overflow: hidden;
  border: 1px solid var(--ml-border); border-radius: var(--ml-radius); background: var(--ml-media-bg); color: var(--ml-text);
  transition: border-color .2s ease, transform .3s var(--ml-ease);
}
.ml-promo:hover { border-color: rgba(var(--ml-accent-rgb), .3); }
a.ml-promo:hover { transform: translateY(-3px); }
.ml-promo__media { display: block; min-height: 150px; overflow: hidden; }
.ml-promo__img { width: 100%; height: 100%; object-fit: contain; padding: 14%; mix-blend-mode: multiply; transition: transform .5s var(--ml-ease); }
html[data-ml-theme="dark"] .ml-promo__img { mix-blend-mode: normal; }
a.ml-promo:hover .ml-promo__img { transform: scale(1.04); }
/* uploaded photo: edge to edge, no tint */
.ml-promo--photo .ml-promo__img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.ml-promo__copy { display: grid; gap: 4px; padding: 16px 18px 18px; background: var(--ml-surface); border-top: 1px solid var(--ml-border); }
.ml-promo__title { font-family: var(--ml-font-heading); font-size: 22px; line-height: 1.1; letter-spacing: -.025em; }
.ml-promo__text { font-size: 13.5px; color: var(--ml-muted); line-height: 1.45; }
.ml-promo__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ml-accent); }
.ml-promo__cta .ml-icon { width: 16px; height: 16px; transition: transform .25s var(--ml-ease); }
a.ml-promo:hover .ml-promo__cta .ml-icon { transform: translateX(3px); }
/* phones: a compact side-by-side card under the row instead of a tall poster */
@media (max-width: 1023px) {
  .ml-promo { grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .ml-promo__media { position: relative; min-height: 130px; height: auto; }
  .ml-promo__img { position: absolute; inset: 0; padding: 10%; }
  .ml-promo__copy { border-top: 0; border-left: 1px solid var(--ml-border); padding: 14px 16px; }
  .ml-promo__title { font-size: 19px; }
}
@media (min-width: 1024px) { .ml-promo { min-height: 100%; } .ml-promo__media { min-height: 0; } }

/* popular category tiles: thumbnail + name */
.ml-tile-grid { list-style: none; margin: 0; padding: 0; }
.ml-tile {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 7px 10px 7px 7px;
  border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small); background: var(--ml-surface); color: var(--ml-text);
  transition: border-color .2s ease, background-color .2s ease, transform .25s var(--ml-ease);
}
a.ml-tile:hover, a.ml-tile:focus-visible { border-color: rgba(var(--ml-accent-rgb), .3); background: var(--ml-card-bg-hover, var(--ml-surface-3)); }
a.ml-tile:hover { transform: translateY(-2px); }
.ml-tile__media { flex: none; width: var(--ml-tile-thumb, 44px); height: var(--ml-tile-thumb, 44px); border-radius: 9px; overflow: hidden; background: var(--ml-media-bg); }
.ml-tile__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
html[data-ml-theme="dark"] .ml-tile__img { mix-blend-mode: normal; }
.ml-tile__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.ml-tile__go { width: 15px; height: 15px; flex: none; color: var(--ml-subtle); opacity: .7; transition: transform .25s var(--ml-ease); }
a.ml-tile:hover .ml-tile__go { transform: translateX(2px); color: var(--ml-accent); opacity: 1; }
.ml-tile--static { opacity: .6; }

/* deals: copy column + image cards */
/* Shortcuts, card style: an ordinary section (heading row, then a grid of glass link cards).
   No panel behind it; the cards are the same material as the category tiles. */
.ml-deals { display: block; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ml-deals__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 14px; }
.ml-deals__copy .ml-section-head__title { margin: 6px 0 4px; }
.ml-deals__copy .ml-section-head__desc { max-width: 560px; }
@media (min-width: 768px) {
  .ml-deals__copy { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; align-items: end; margin-bottom: 18px; }
  .ml-deals__copy .ml-micro { grid-column: 1; }
  .ml-deals__copy .ml-section-head__title { grid-column: 1; grid-row: 2; margin: 4px 0 0; }
  .ml-deals__copy .ml-section-head__desc { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 6px; }
}
.ml-deal-grid { gap: 10px; }
.ml-deal-grid .ml-shortcut.ml-deal {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 3px; min-height: 108px; padding: 16px 52px 16px 16px; overflow: hidden;
  border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small); background: var(--ml-surface); color: var(--ml-text);
  transition: border-color .2s ease, transform .3s var(--ml-ease), box-shadow .3s var(--ml-ease);
}
.ml-deal-grid .ml-deal > * { grid-column: 1; grid-row: auto; }
.ml-deal-grid .ml-deal > .ml-deal__media { grid-row: 1; margin: -16px -52px 10px -16px; display: block; height: 96px; overflow: hidden; background: var(--ml-surface-2); }
.ml-deal-grid .ml-deal:has(.ml-deal__media) { align-content: start; }
.ml-deal__img { width: 100%; height: 100%; object-fit: cover; padding: 0; transition: transform .45s var(--ml-ease); }
.ml-deal:hover .ml-deal__img { transform: scale(1.05); }
.ml-deal-grid .ml-deal > span:not(.ml-deal__media) { padding: 0; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.ml-deal-grid .ml-deal > small { padding: 0; font-size: 13px; line-height: 1.4; color: var(--ml-muted); }
.ml-deal-grid .ml-deal > .ml-icon { position: absolute; right: 12px; top: 50%; margin-top: -15px; width: 30px; height: 30px; padding: 7px; border-radius: 50%; border: 1px solid var(--ml-border); color: var(--ml-subtle); transition: transform .3s var(--ml-ease), color .2s ease, border-color .2s ease, background-color .2s ease; }
.ml-deal-grid .ml-deal:has(.ml-deal__media) > .ml-icon { top: auto; bottom: 14px; margin-top: 0; }
.ml-deal-grid .ml-deal:hover { border-color: rgba(var(--ml-accent-rgb), .3); transform: translateY(-3px); }
.ml-deal-grid .ml-deal:hover > .ml-icon { transform: translateX(2px); color: var(--ml-on-accent); background: var(--ml-accent); border-color: transparent; }
.ml-deal-grid .ml-deal > .ml-spotlight-layer { position: absolute; inset: 0; }

/* ---- Contact page ---- */
.ml-contact__grid { display: grid; gap: 28px; }
.ml-contact__side { min-width: 0; }
.ml-contact__page-copy { margin-top: 14px; color: var(--ml-muted); }
.ml-contact__rows { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.ml-contact__row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ml-border); border-radius: var(--ml-radius-small);
  background: var(--ml-surface); color: var(--ml-text); transition: border-color .2s ease, background-color .2s ease, transform .25s var(--ml-ease);
}
.ml-contact__row > .ml-icon { flex: none; width: 20px; height: 20px; color: var(--ml-accent); }
.ml-contact__row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-contact__row b { font-size: 14px; line-height: 1.3; }
.ml-contact__row small { font-size: 13px; line-height: 1.4; color: var(--ml-muted); overflow-wrap: anywhere; }
.ml-contact__go { width: 16px !important; height: 16px !important; color: var(--ml-subtle) !important; transition: transform .25s var(--ml-ease); }
a.ml-contact__row:hover, a.ml-contact__row:focus-visible { border-color: rgba(var(--ml-accent-rgb), .3); background: var(--ml-card-bg-hover, var(--ml-surface-3)); }
a.ml-contact__row:hover .ml-contact__go { transform: translateX(3px); color: var(--ml-accent) !important; }

.ml-contact__form-wrap { border: 1px solid var(--ml-border); border-radius: var(--ml-radius); background: var(--ml-surface); padding: 18px; }
.ml-contact__form { display: grid; gap: 16px; }
.ml-field { display: grid; gap: 6px; min-width: 0; }
.ml-field label { font-size: 13px; font-weight: 700; color: var(--ml-text); }
.ml-field label span { font-weight: 500; color: var(--ml-subtle); }
.ml-theme .ml-field input, .ml-theme .ml-field textarea, .ml-theme .ml-field select {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ml-border-strong); border-radius: var(--ml-radius-small);
  background: var(--ml-bg); color: var(--ml-text); font: inherit; font-size: 15px; line-height: 1.4; box-shadow: none;
}
.ml-theme .ml-field textarea { min-height: 150px; resize: vertical; }
.ml-theme .ml-field input:focus, .ml-theme .ml-field textarea:focus { outline: 0; border-color: rgba(var(--ml-accent-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--ml-accent-rgb), .12); }
.ml-theme .ml-field input[aria-invalid="true"] { border-color: var(--ml-sale); }
.ml-field-row { display: grid; gap: 16px; }
.ml-contact__actions { display: grid; gap: 10px; }
.ml-contact__actions .ml-btn { width: 100%; }
.ml-contact__actions small { font-size: 12.5px; color: var(--ml-subtle); }
.ml-contact__success, .ml-contact__error { display: grid; gap: 6px; padding: 18px; border-radius: var(--ml-radius-small); }
.ml-contact__success { justify-items: center; text-align: center; padding: 40px 18px; }
.ml-contact__success-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(var(--ml-accent-rgb), .12); color: var(--ml-accent); margin-bottom: 6px; }
.ml-contact__success strong { font-family: var(--ml-font-heading); font-size: 24px; letter-spacing: -.02em; }
.ml-contact__success p { margin: 0 0 8px; color: var(--ml-muted); }
.ml-contact__error { border: 1px solid rgba(180, 60, 40, .35); background: rgba(180, 60, 40, .06); color: var(--ml-text); }
.ml-contact__error ul { margin: 0; padding-left: 18px; color: var(--ml-muted); font-size: 14px; }
@media (min-width: 640px) {
  .ml-field-row { grid-template-columns: 1fr 1fr; }
  .ml-contact__actions { grid-template-columns: auto 1fr; align-items: center; }
  .ml-contact__actions .ml-btn { width: auto; }
}
@media (min-width: 1024px) {
  .ml-contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
  .ml-contact__form-wrap { padding: 28px; }
  .ml-contact__side { position: sticky; top: calc(var(--ml-header-h) + 24px); }
  body:has(.scroll-down .header__wrapper) .ml-contact__side { top: 24px; }
}

/* ---- Wishlist page ---- (behaviour: Minimog's Wishlist class; see sections/page-wishlist.liquid) */
.ml-wishlist { padding-block: 24px var(--ml-section-gap-mobile); }
.ml-wishlist__head { margin-bottom: 20px; }
.ml-wishlist__note { margin: 8px 0 0; color: var(--ml-subtle); font-size: 14px; }
.ml-wishlist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; margin: 0; padding: 0; }
.ml-wishlist__grid.sf-wishlist__container { transition: opacity .25s ease; }
.ml-wishlist .sf-wishlist__wrapper { display: flex; flex-direction: column; min-width: 0; }
.ml-wishlist .sf-wishlist__wrapper.hidden { display: none; }
.ml-wishlist .sf-wishlist__wrapper > .sf__pcard { flex: 1; }
/* placeholders show only while the saved products are still being fetched */
.ml-wishlist__skeleton:has(~ .sf-wishlist__container.opacity-100),
.ml-wishlist__skeleton:has(~ .sf-wishlist__no_products:not(.hidden)),
html:not(.ml-skeletons) .ml-wishlist__skeleton { display: none; }
.ml-wishlist .sf-wishlist__container:not(.opacity-100) { display: none; }
.ml-wishlist .sf-wishlist__remove {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  background: var(--ml-surface); border: 1px solid var(--ml-border); color: var(--ml-text);
}
/* One remove control per saved card: Minimog's X (it only showed it on phones), in the corner the
   heart normally uses. The card's own heart is hidden here so two controls never stack. */
.ml-wishlist .sf-wishlist__wrapper > div:last-child { display: block !important; right: 10px; top: 10px; z-index: 12; }
.ml-wishlist .sf__pcard .sf-wishlist__button,
.ml-wishlist .sf__pcard .sf__pcard-group-action .sf-wishlist__remove { display: none !important; }
.ml-wishlist .sf-wishlist__remove:hover { border-color: var(--ml-border-strong); background: var(--ml-surface-3); }
.ml-wishlist .sf-wishlist__remove svg { width: 16px; height: 16px; }

.ml-wishlist__empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 16px; border: 1px dashed var(--ml-border-strong); border-radius: var(--ml-radius); background: var(--ml-surface); }
.ml-wishlist__empty.hidden { display: none; }
.ml-wishlist__empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(var(--ml-accent-rgb), .1); color: var(--ml-accent); }
.ml-wishlist__empty-title { margin: 6px 0 0; font-size: 22px; }
.ml-wishlist__empty-text { margin: 0 0 8px; color: var(--ml-subtle); max-width: 36ch; }
.ml-nav-wishlist .ml-icon { width: 20px; height: 20px; }

@media (min-width: 768px) {
  .ml-wishlist { padding-block: 32px var(--ml-section-gap-desktop); }
  .ml-wishlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
}
@media (min-width: 1024px) { .ml-wishlist__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Skeletons ----
   Every skeleton here is tied to a real loading state, never to a timer:
     images            Minimog's [data-image-loading] (removed on the img load event) / .ml-media.is-loaded
     fetched cards     placeholder markup that the fetch's owner swaps for the real cards
     collection reload body.al-loading-bar.loading, which Minimog holds for the duration of the request
   The sweep is a transformed pseudo-element, so it stays on the compositor. */
.ml-skel, .ml-skel-host {
  position: relative;
  overflow: hidden;
  background: var(--ml-skel-base, var(--ml-surface-3));
  border-radius: 6px;
}

.ml-skel::after, .ml-skel-host::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--ml-skel-shine, rgba(var(--ml-bg-rgb), .6)), transparent);
  animation: ml-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ml-shimmer { to { transform: translateX(100%); } }

/* placeholder card */
.ml-card--skeleton { display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ml-skel--media { aspect-ratio: .98; border-radius: calc(var(--ml-radius) - 1px); margin-bottom: 4px; }
.ml-skel--line { height: 12px; width: 92%; }
.ml-skel--xs { width: 34%; height: 9px; }
.ml-skel--md { width: 68%; }
.ml-skel--sm { width: 40%; height: 14px; margin-top: 2px; }
.ml-skel--button { height: 44px; margin-top: 4px; border-radius: calc(var(--ml-radius-small) - 1px); }
.ml-skel-title { height: 30px; width: min(280px, 60%); margin-bottom: 16px; border-radius: 8px; }

/* images rendered by Minimog's <responsive-image>: it owns data-image-loading and drops it on load */
.ml-theme [data-image-loading] { overflow: hidden; background: var(--ml-skel-media, color-mix(in srgb, var(--ml-media-bg) 90%, #000)); }

.ml-theme [data-image-loading]::after {
  z-index: 2;
  inset: 0;
  width: auto;
  height: auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: ml-shimmer 1.5s ease-in-out infinite;
}

.ml-theme [data-image-loading] img { opacity: 0; }
.ml-theme .sf-image img, .ml-theme responsive-image img { transition: opacity .35s ease, transform .45s var(--ml-ease); }

/* Product gallery before Minimog's slider script has run. Minimog holds the main slider at opacity 0
   and the thumbnail strip at .opacity-0 until Swiper initialises, which on a slow connection left a
   page-tall blank where the gallery belongs while the product text was already there. The slides are
   already laid out one per view by the theme's critical CSS, so the first image can simply be shown;
   the thumbnail column is painted as placeholder tiles until the real strip appears. */
.ml-theme media-gallery .sf-preview__wrapper .swiper-container:not(.swiper-container-initialized) { opacity: 1 !important; overflow: hidden; }
.ml-theme media-gallery .sf-preview__wrapper { border-radius: var(--ml-radius); background: var(--ml-media-bg); }
.ml-skeletons media-gallery[data-layout="layout-6"] .sf-media-nav:has(.nav-swiper-container:not(.swiper-container-initialized)) {
  position: relative;
  overflow: hidden;
  min-width: 70px;
  background: repeating-linear-gradient(to bottom, var(--ml-skel-media, color-mix(in srgb, var(--ml-media-bg) 90%, #000)) 0 70px, transparent 70px 80px) 0 0 / 70px 100% no-repeat;
}
.ml-skeletons media-gallery[data-layout="layout-6"] .sf-media-nav:has(.nav-swiper-container:not(.swiper-container-initialized))::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: ml-shimmer 1.5s ease-in-out infinite;
}

/* images in Market Line media frames: .is-loaded is set from the img load/error event */
.ml-skeletons .ml-media:not(.is-loaded) { background: var(--ml-skel-media, color-mix(in srgb, var(--ml-media-bg) 90%, #000)); }

.ml-skeletons .ml-media:not(.is-loaded)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: ml-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

.ml-skeletons .ml-media:not(.is-loaded) .ml-media__img { opacity: 0; }
.ml-skeletons .ml-media__img { transition: opacity .35s ease, transform .45s var(--ml-ease); }
.ml-skeletons .ml-media__backdrop { transition: opacity .35s ease; }
.ml-skeletons .ml-media:not(.is-loaded) .ml-media__backdrop { opacity: 0; }

/* collection filter / sort / page change: the current cards become their own skeletons for as long
   as Minimog keeps its request open */
/* The same treatment covers a card whose main image has not arrived yet: the whole card stays a
   skeleton (text bars, no wishlist / quick view icons, no swatches) and appears in one step when the
   image's load or error event clears [data-image-loading]. Gated on .ml-skeletons, which only the
   head script sets, so a page without JS never hides a card. */
body.al-loading-bar.loading .sf__product-listing .sf__pcard,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) { pointer-events: none; }
/* Minimog holds loaded images at opacity 1 with a `forwards` animation, which outranks a plain
   opacity declaration, so the animation has to be cancelled for the image to step aside. */
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf-image img,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf-image img { animation: none; opacity: 0; transition: opacity .2s ease; }
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-action,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-action,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-tags,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-tags,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .prod__tag,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .prod__tag,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .pcard-variant-option,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .pcard-variant-option { visibility: hidden; }

body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__image-box,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__image-box,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-vendor,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-vendor,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-name,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-name,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-price,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-price,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-quick-add .sf__btn,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-quick-add .sf__btn {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: var(--ml-surface-3) !important;
  border-color: transparent !important;
  border-radius: 6px;
  box-shadow: none;
}

body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__image-box,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__image-box { border-radius: calc(var(--ml-radius) - 1px); }
/* Bars are PAINTED inside the unchanged boxes (background layers), never resized: forcing heights
   here shrank the grid ~70px and made everything below it jump on each reload. */
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-vendor,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-vendor {
  background: linear-gradient(var(--ml-surface-3), var(--ml-surface-3)) 0 50% / 34% 9px no-repeat !important;
  border-radius: 0;
}
/* title: two text-line bars instead of one slab (same box, so nothing shifts) */
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-name,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-name {
  background:
    linear-gradient(var(--ml-surface-3), var(--ml-surface-3)) 0 3px / 92% 12px no-repeat,
    linear-gradient(var(--ml-surface-3), var(--ml-surface-3)) 0 23px / 66% 12px no-repeat !important;
  border-radius: 0;
}
/* price: one bar at the top of the block, whatever the real prices wrapped to */
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-price,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-price {
  background: linear-gradient(var(--ml-surface-3), var(--ml-surface-3)) 0 4px / 42% 14px no-repeat !important;
  border-radius: 0;
}
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-price *,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-price *,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-quick-add .sf__btn *,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-quick-add .sf__btn * { visibility: hidden; }

body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__image-box::after,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__image-box::after,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-name::after,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-name::after,
body.al-loading-bar.loading .sf__product-listing .sf__pcard .sf__pcard-price::after,
.ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) .sf__pcard-price::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(var(--ml-bg-rgb), .6), transparent);
  animation: ml-shimmer 1.5s ease-in-out infinite;
}

/* sections whose cards are fetched after render */
.ml-skel-section { padding-block: var(--ml-section-gap-mobile); }
.ml-theme predictive-search[data-ml-loading] [data-predictive-search] > :not(.ml-skel-grid) { display: none; }
.ml-skel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 16px; }

@media (min-width: 768px) {
  .ml-skel-section { padding-block: var(--ml-section-gap-desktop); }
  .ml-skel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-skel::after, .ml-skel-host::after, .ml-theme [data-image-loading]::after,
  .ml-skeletons .ml-media:not(.is-loaded)::before,
  body.al-loading-bar.loading .sf__product-listing .sf__pcard ::after,
  .ml-skeletons .sf__pcard:has(.spc__main-img [data-image-loading]) ::after { animation: none; transform: none; opacity: 0; }
}

/* ---- Liquid glass ----
   Core surface treatment of the store: any layer that floats over content (the sticky header, the
   drawers, the search panel, badges on imagery, floating buttons, tooltips, menus) is a translucent
   pane that blurs and slightly saturates what is behind it, with a thin top highlight and a soft edge.
   Flat cards on the page background stay opaque: glass only reads as glass when something moves
   behind it. Two tints, one per colour mode; neither is an inversion of the other. */
:root {
  --ml-glass-blur: 18px;
  --ml-glass-tint: 255, 255, 255;
  --ml-glass-alpha: .58;
  --ml-glass-alpha-panel: .86; /* panels that carry reading text: denser, so the page behind never competes */
  --ml-glass-border: rgba(255, 255, 255, .55);
  --ml-glass-edge: rgba(20, 24, 22, .10);
  --ml-glass-highlight: rgba(255, 255, 255, .7);
  --ml-glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06));
  --ml-glass-shadow: 0 10px 30px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .8));
}
html[data-ml-theme="dark"] {
  --ml-glass-tint: 22, 26, 25;
  --ml-glass-alpha: .55;
  --ml-glass-alpha-panel: .84;
  --ml-glass-border: rgba(255, 255, 255, .13);
  --ml-glass-edge: rgba(0, 0, 0, .35);
  --ml-glass-highlight: rgba(255, 255, 255, .16);
  --ml-glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015));
  --ml-glass-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.ml-glass,
.ml-theme .stuck .header__wrapper, .ml-theme .scroll-up .header__wrapper,
.ml-theme .sf-modal__content,
.ml-theme .scd__content,
.ml-theme .sf-menu-wrapper-mobile .sf-menu__content,
.ml-theme [data-search-popup] .search-container,
.ml-theme .prod__sticky-atc,
.ml-theme #scroll-to-top-button, .ml-theme .scroll-to-top,
.ml-select__list,
.ml-theme .m-cookie-banner,
.ml-theme .sf__collection-container .sf__sidebar[data-type="fixed"] .sf__sidebar-content,
.ml-theme .sf-pqv__wrapper .sf-pqv__content,
.ml-hero__card-info,
.ml-chip, .ml-theme .prod__tag, .ml-theme .sf__pcard .f-price__badges .f-price__badge,
.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon,
.ml-theme .sf__tooltip-content,
.ml-nav-search {
  background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), var(--ml-glass-alpha));
  border: 1px solid var(--ml-glass-border);
  box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 1px var(--ml-glass-edge), var(--ml-glass-shadow);
  -webkit-backdrop-filter: blur(var(--ml-glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--ml-glass-blur)) saturate(1.5);
  color: var(--ml-text);
}
@supports not (backdrop-filter: blur(1px)) {
  .ml-glass, .ml-theme .stuck .header__wrapper, .ml-theme .sf-modal__content, .ml-theme .scd__content, .ml-theme .sf-menu-wrapper-mobile .sf-menu__content, .ml-theme [data-search-popup] .search-container, .ml-theme .prod__sticky-atc, .ml-theme .m-cookie-banner, .ml-select__list, .ml-hero__card-info { background: rgba(var(--ml-glass-tint), .96); }
}

/* full-height panels: no outer shadow ring, edge on the open side only */
.ml-theme .scd__content, .ml-theme .sf-menu-wrapper-mobile .sf-menu__content, .ml-theme [data-search-popup] .search-container,
.ml-theme .sf-modal__content, .ml-theme .m-cookie-banner, .ml-select__list,
.ml-theme .sf__collection-container .sf__sidebar[data-type="fixed"] .sf__sidebar-content { --ml-glass-alpha: var(--ml-glass-alpha-panel); }
.ml-theme .stuck .header__wrapper, .ml-theme .scroll-up .header__wrapper { border-width: 0 0 1px; border-radius: 0; box-shadow: inset 0 -1px 0 var(--ml-glass-edge); }
.ml-theme .sf-modal__content { border-radius: var(--ml-radius); }
.ml-theme .scd__content { border-width: 0 0 0 1px; border-radius: 0; box-shadow: -20px 0 60px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .9)); }
.ml-theme .sf-menu-wrapper-mobile .sf-menu__content { border-width: 0 1px 0 0; border-radius: 0; box-shadow: 20px 0 60px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .9)); }
.ml-theme .sf__collection-container .sf__sidebar[data-type="fixed"] .sf__sidebar-content { border-width: 0 1px 0 0; border-radius: 0; box-shadow: none; }
.ml-theme .prod__sticky-atc { border-width: 1px 0 0; border-radius: 0; box-shadow: 0 -10px 30px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .5)); }
.ml-theme .m-cookie-banner { border-radius: var(--ml-radius); }
.ml-theme [data-search-popup] .search-container { border-radius: var(--ml-radius); }
.ml-select__list { border-radius: var(--ml-radius-small); }
.ml-theme #scroll-to-top-button, .ml-theme .scroll-to-top { border-radius: var(--ml-radius-small); }

/* small pieces on imagery: lighter blur so the picture still shows through */
.ml-chip, .ml-theme .prod__tag, .ml-theme .sf__pcard .f-price__badges .f-price__badge, .ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon, .ml-theme .sf__tooltip-content {
  --ml-glass-blur: 12px;
  box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 2px 10px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .5));
}
/* phones and touch devices: the small pieces keep the tint but skip the blur (dozens per screen) */
@media (max-width: 1023px), (hover: none) {
  .ml-chip, .ml-theme .prod__tag, .ml-theme .sf__pcard .f-price__badges .f-price__badge, .ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon, .ml-theme .sf__tooltip-content, .ml-nav-search, .ml-select__list { -webkit-backdrop-filter: none; backdrop-filter: none; --ml-glass-alpha: .8; }
}
.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon:hover { background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), .85); color: var(--ml-accent); }
.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon.added-to-wishlist { background: var(--ml-accent); border-color: transparent; color: var(--ml-on-accent); box-shadow: none; }
.ml-theme .prod__tag--soldout { color: var(--ml-muted); }
.ml-theme .sf__pcard .f-price__badges .f-price__badge { color: var(--ml-sale); }

/* the hero picks panel itself is glass over the page, its captions glass over the photos */
.ml-hero__showcase { background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), calc(var(--ml-glass-alpha) * .7)); border-color: var(--ml-glass-border); box-shadow: inset 0 1px 0 var(--ml-glass-highlight), var(--ml-glass-shadow); -webkit-backdrop-filter: blur(var(--ml-glass-blur)); backdrop-filter: blur(var(--ml-glass-blur)); }



/* ---- Liquid glass as the material of the store ----
   Two parts make glass read everywhere, not only over photos:
   1. an ambient layer behind the page: two soft, slow tints in the accent family, fixed to the
      viewport, so every translucent surface has colour and light to refract.
   2. the glass material on every card, tile, panel, field and button that sits on the page.
   Small repeated surfaces (tiles, cards, chips) get the tint + highlight everywhere but only blur on
   desktop pointer devices; blurring dozens of cards at once is what makes phones stutter. */
.ml-theme body { position: relative; isolation: isolate; }
.ml-theme body::before {
  content: ""; position: fixed; inset: -10% -10% -10% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 12% 8%, rgba(var(--ml-accent-rgb), .16), transparent 70%),
    radial-gradient(38% 34% at 88% 22%, rgba(var(--ml-accent-rgb), .10), transparent 70%),
    radial-gradient(46% 40% at 60% 96%, rgba(var(--ml-accent-rgb), .12), transparent 70%);
  filter: blur(40px);
}
html[data-ml-theme="dark"] .ml-theme body::before {
  background:
    radial-gradient(42% 38% at 12% 8%, rgba(var(--ml-accent-rgb), .13), transparent 70%),
    radial-gradient(38% 34% at 88% 22%, rgba(var(--ml-accent-rgb), .07), transparent 70%),
    radial-gradient(46% 40% at 60% 96%, rgba(var(--ml-accent-rgb), .09), transparent 70%);
}

/* surfaces on the page: panels and cards that hold content */
.ml-glass-surface,
.ml-category-card, .ml-tile, .ml-brand, .ml-deal-grid .ml-shortcut.ml-deal, .ml-quick-grid .ml-shortcut,
.ml-testimonial, .ml-review, .ml-trust--rail, .ml-trust--cards .ml-trust__item, .ml-browse,
.ml-promo, .ml-assurance, .ml-contact__row, .ml-contact__form-wrap, .ml-wishlist__empty, .ml-bag-empty__icon,
.ml-noresults__links a, .ml-nav-tile, .ml-faq .ml-accordion__item, .ml-hero__showcase,
.ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add .sf__btn,
.ml-btn--ghost, .ml-hero__search, .ml-theme [data-search-popup] .m-search-form, .ml-theme .ml-field input, .ml-theme .ml-field textarea, .ml-theme .ml-field select, .ml-select__button,
.ml-theme .prod__sticky-atc .sf__custom-select, .ml-theme .quantity-input, .ml-theme .scd-item__quantity, .ml-theme .scd-item__image,
.ml-theme .sf-product-media__desktop .sf-preview__wrapper, .ml-theme .sf__collection-toolbar .sf__sidebar-open, .ml-theme .sf__collection-toolbar .sf__sortmb-icon {
  background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), var(--ml-glass-alpha-panel));
  border-color: var(--ml-glass-border);
  box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 1px var(--ml-glass-edge);
}
/* the ones that should feel like solid glass tiles get the outer shadow too */
.ml-category-card, .ml-testimonial, .ml-review, .ml-promo, .ml-browse, .ml-contact__form-wrap, .ml-hero__showcase, .ml-trust--rail, .ml-trust--cards .ml-trust__item { box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 1px var(--ml-glass-edge), var(--ml-glass-shadow); }
/* fields: a clearer pane, so typed text sits on something calm */
.ml-theme .ml-field input, .ml-theme .ml-field textarea, .ml-theme .ml-field select, .ml-hero__search, .ml-theme [data-search-popup] .m-search-form, .ml-select__button { --ml-glass-alpha-panel: .7; }
.ml-theme .ml-field input:focus, .ml-theme .ml-field textarea:focus, .ml-hero__search:focus-within { border-color: rgba(var(--ml-accent-rgb), .6); box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 4px rgba(var(--ml-accent-rgb), .12); }
/* hover: the pane brightens instead of changing colour */
a.ml-category-card:hover, a.ml-tile:hover, a.ml-brand:hover, .ml-deal-grid .ml-deal:hover, .ml-quick-grid .ml-shortcut:hover, a.ml-contact__row:hover, .ml-noresults__links a:hover, .ml-nav-tile:hover, .ml-btn--ghost:hover,
.ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add .sf__btn:hover {
  background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), calc(var(--ml-glass-alpha-panel) + .1));
  border-color: rgba(var(--ml-accent-rgb), .35);
}
.ml-trust--rail .ml-trust__item { border-right-color: var(--ml-glass-edge); border-bottom-color: var(--ml-glass-edge); }
.ml-faq .ml-accordion__item { border-radius: var(--ml-radius-small); padding-inline: 14px; margin-bottom: 8px; border: 1px solid var(--ml-glass-border); }
.ml-faq .ml-accordion__item .ml-accordion__btn { padding-inline: 0; }

/* blur: on every surface for pointer devices from 1024px, otherwise only on the few large panels */
.ml-hero__showcase, .ml-promo, .ml-browse, .ml-contact__form-wrap, .ml-trust--rail, .ml-assurance, .ml-wishlist__empty {
  -webkit-backdrop-filter: blur(var(--ml-glass-blur)) saturate(1.5); backdrop-filter: blur(var(--ml-glass-blur)) saturate(1.5);
}
@media (min-width: 1024px) and (hover: hover) {
  .ml-category-card, .ml-tile, .ml-brand, .ml-deal-grid .ml-deal, .ml-quick-grid .ml-shortcut, .ml-testimonial, .ml-review, .ml-trust--cards .ml-trust__item, .ml-contact__row, .ml-noresults__links a, .ml-faq .ml-accordion__item,
  .ml-theme .sf__pcard-style-4 .sf__pcard-content .sf__pcard-quick-add .sf__btn, .ml-btn--ghost, .ml-hero__search, .ml-theme .ml-field input, .ml-theme .ml-field textarea, .ml-select__button {
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  }
}
/* the footer is the one solid ground the page ends on */
.ml-theme .sf-footer { position: relative; z-index: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ml-theme body::before { animation: ml-ambient 28s ease-in-out infinite alternate; }
  @keyframes ml-ambient { to { transform: translate3d(2%, -1.5%, 0) scale(1.04); } }
}

/* 4. MOTION -------------------------------------------------------------- */
.ml-motion [data-ml-animate] [data-ml-reveal] { opacity: 0; transform: translateY(12px); }

.ml-motion [data-ml-animate] [data-ml-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--ml-ease) var(--ml-reveal-delay, 0ms), transform .45s var(--ml-ease) var(--ml-reveal-delay, 0ms);
}

.ml-marquee.is-paused .ml-marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ml-marquee__track { animation: none; }
  .ml-marquee { overflow-x: auto; scrollbar-width: none; }

  .ml-theme *, .ml-theme *::before, .ml-theme *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-ml-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- Collection toolbar and sort sheet ----
   Minimog paints .sf__toolbar-wrapper white and turns it into a fixed bar once the page scrolls;
   both showed up as a white slab on the dark theme. The wrapper stays in flow and transparent
   (the theme's own sticky option on the section handles pinning), and on phones the Filter and
   Sort buttons sit at the two ends of the row. */
.ml-theme .sf__collection-toolbar .sf__toolbar-wrapper,
.ml-theme .sf__collection-toolbar .sf__toolbar-wrapper.sf__toolbar-sticky,
.ml-theme .sf__collection-toolbar .sf__toolbar-wrapper.sf__toolbar-sticky.sf__header-sticky-on {
  position: static !important; transform: none !important; background: transparent !important; box-shadow: none !important;
  border-top: 0; padding-inline: 0; margin: 0;
}
.ml-theme .sf__collection-toolbar { padding-inline: 0; }

/* Minimog gives #MainContent 5rem of bottom padding on every page, on top of the last section's own
   padding, which left a hole above the footer. Sections carry their spacing; the page keeps a little. */
/* #MainContent bottom padding: see "No hole above the footer" near the end of this file */
.ml-theme .sf__toolbar-wrapper .sf__toggle-filter { display: flex; align-items: center; gap: 10px; }
.ml-theme .sf__sidebar-open, .ml-theme .sf__sortmb-icon { margin-right: 0; }
@media (max-width: 767px) {
  .ml-theme .sf__toolbar-wrapper .sf__toggle-filter { width: 100%; justify-content: space-between; }
  .ml-theme .sf__toolbar-wrapper .sf__toggle-filter > button { min-width: 0; }
  .ml-theme .sf__toolbar-wrapper .sf__toggle-filter .sf__sortmb-icon span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
}

/* the sort sheet: Minimog's wrapper is the full-screen scrim (it animates --tw-bg-opacity itself)
   and .sf__sortmb-list is the sheet that slides up from the bottom. Earlier rules styled the scrim
   as if it were the sheet. */
.ml-theme .sf__sortmb-wrapper {
  background-color: rgba(var(--ml-scrim-rgb), var(--tw-bg-opacity, 0)); color: var(--ml-text);
  border: 0; border-radius: 0; padding: 0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ml-theme .sf__sortmb-wrapper .sf__sortmb-list {
  max-height: min(82vh, 640px); padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; border: 1px solid var(--ml-glass-border); border-bottom: 0;
  background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), var(--ml-glass-alpha-panel));
  box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 -20px 60px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(var(--ml-glass-blur)) saturate(1.5); backdrop-filter: blur(var(--ml-glass-blur)) saturate(1.5);
}
.ml-theme .sf__sortmb-list::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: rgba(var(--ml-text-rgb), .22); }
.ml-theme .sf__sortmb-list .sf__sortmb-label { display: block; margin: 0 0 8px; padding: 0 10px; font-family: var(--ml-font-heading); font-size: 20px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--ml-text); }
.ml-theme .sf__sortmb-list .sf__hidden-sortmb {
  top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer; color: var(--ml-text);
  background: rgba(var(--ml-text-rgb), .06); border: 1px solid var(--ml-glass-border);
}
.ml-theme .sf__sortmb-list .sf__hidden-sortmb svg { width: 14px; height: 14px; }
.ml-theme .sf__sortmb-list ul { display: grid; gap: 2px; }
.ml-theme .sf__sortmb-list ul li {
  position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 44px 0 12px; border-radius: 12px;
  font-size: 15px; line-height: 1.3; font-weight: 500; color: rgba(var(--ml-text-rgb), .82); text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.ml-theme .sf__sortmb-list ul li:hover, .ml-theme .sf__sortmb-list ul li:active { background: rgba(var(--ml-text-rgb), .06); color: var(--ml-text); }
.ml-theme .sf__sortmb-list ul li.active { color: var(--ml-text); font-weight: 700; text-decoration: none; background: rgba(var(--ml-accent-rgb), .12); }
.ml-theme .sf__sortmb-list ul li.active::after { content: ""; position: absolute; right: 18px; top: 50%; width: 6px; height: 11px; margin-top: -8px; border: solid var(--ml-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---- Focus rings on fields ----
   Text inputs match :focus-visible on every focus, mouse included, so the global keyboard ring drew
   a second rectangle inside the search bar and the form fields, which already show their own
   border and halo. The wrapper's ring stays; the inner one goes. */
.ml-theme input:focus-visible, .ml-theme textarea:focus-visible, .ml-theme select:focus-visible,
.ml-theme [data-search-popup] .m-search-form input:focus-visible, .ml-hero__search input:focus-visible { outline: none !important; }
.ml-theme [data-search-popup] .m-search-form { overflow: hidden; }
.ml-theme [data-search-popup] .m-search-form:focus-within { border-color: rgba(var(--ml-accent-rgb), .6); box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 4px rgba(var(--ml-accent-rgb), .12); }

/* PDP thumbnails: no green outline square on the strip; the chosen thumb shows through its border
   and keyboard focus draws an inset ring that follows the rounded corners. */
.ml-theme .sf-media-nav .swiper-slide:focus, .ml-theme .sf-media-nav .swiper-slide:focus-visible,
.ml-theme .sf-media-nav .swiper-slide *:focus-visible, .ml-theme .nav-swiper-container:focus-visible, .ml-theme .sf-media-nav .swiper-slide img:focus-visible { outline: none !important; }
.ml-theme .sf-media-nav .swiper-slide:focus-visible { box-shadow: inset 0 0 0 2px var(--ml-focus); }
.ml-theme .sf-media-nav .swiper-slide:not(.swiper-slide-thumb-active):hover { border-color: var(--ml-border-strong); }
.ml-theme .sf-media-nav .swiper-slide-thumb-active { box-shadow: inset 0 0 0 1px var(--ml-accent); }

/* ---- Footer: the same material as the rest of the store ---- */
.ml-theme .sf-footer { background: transparent; color: var(--ml-text); }
.ml-theme .sf-footer .sf__footer-block-title, .ml-theme .sf-footer h3, .ml-theme .sf-footer h4 { color: var(--ml-text); }
.ml-theme .sf-footer .sf__footer-block-content, .ml-theme .sf-footer p { color: var(--ml-muted); }
.ml-theme .sf-footer a { color: rgba(var(--ml-text-rgb), .74); }
.ml-theme .sf-footer a:hover { color: var(--ml-text); }
.ml-theme .sf-footer .sf__footer-block-custom_text .sf__footer-block-title { font-size: 22px; }
.ml-theme .sf-footer .sf__accordion-button { color: var(--ml-text); }
/* chevron drawn in CSS: the theme's is a black image, lost in dark mode */
.ml-theme .sf-footer .sf__accordion-button::after {
  width: 8px; height: 8px; top: 50%; right: 4px; margin-top: -6px; background: none; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); opacity: .6; transition: transform .25s var(--ml-ease), margin .25s var(--ml-ease);
}
.ml-theme .sf-footer .sf__accordion-item.open .sf__accordion-button::after { transform: rotate(225deg); margin-top: -2px; }

/* bottom bar: payment marks and the legal line */
.ml-theme .sf-footer .sf__footer-bottom { background: transparent; color: var(--ml-muted); margin-top: 0; padding-bottom: 0; }
.ml-theme .sf-footer .sf__footer-bottom-inner { display: block; padding: 0; }
.ml-footer-bottom { display: grid; gap: 14px; padding: 20px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ml-border); text-align: center; }
.ml-footer-bottom__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.ml-footer-bottom__label { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ml-subtle); }
.ml-payments__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ml-payments__list li { margin: 0; display: flex; }
.ml-payments__list svg { width: 38px; height: 24px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(var(--ml-text-rgb), .1); background: #fff; }
.ml-footer-bottom__legal { display: grid; gap: 3px; font-size: 12px; line-height: 1.5; color: var(--ml-subtle); }
.ml-footer-bottom__copy { color: rgba(var(--ml-text-rgb), .74); }
.ml-footer-bottom__tm { font-size: 11.5px; }
@media (min-width: 1024px) {
  .ml-footer-bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: center; text-align: left; padding-block: 18px 22px; }
  .ml-footer-bottom__pay { order: 2; justify-content: flex-end; }
  .ml-footer-bottom__legal { order: 1; }
  .ml-payments__list { justify-content: flex-start; }
}

/* phones and tablets: brand block on top, then each link group as a glass row that opens */
@media (max-width: 1023px) {
  .ml-theme .sf-footer { padding-top: 26px; }
  .ml-theme .sf-footer .sf__footer-middle .sf-footer__block { width: 100%; padding: 0; }
  .ml-theme .sf-footer .sf-footer__accordion { display: grid; gap: 8px; margin: 0; }
  .ml-theme .sf-footer .sf-footer__block-inner { padding: 0; }
  .ml-theme .sf-footer .sf__footer-block-custom_text { margin-bottom: 14px; }
  .ml-theme .sf-footer .sf__footer-block-custom_text .sf__accordion-button { padding: 0; margin: 0 0 6px; pointer-events: none; }
  .ml-theme .sf-footer .sf__footer-block-custom_text .sf__accordion-button::after { display: none; }
  .ml-theme .sf-footer .sf__footer-block-custom_text .sf__accordion-content { max-height: none !important; opacity: 1 !important; }
  .ml-theme .sf-footer .sf__footer-block-custom_text .sf__footer-block-content > div { padding-bottom: 0; }
  .ml-theme .sf-footer .sf__footer-block-custom_text p { font-size: 14px; line-height: 1.5; }
  .ml-theme .sf-footer .sf__footer-block-ml_links, .ml-theme .sf-footer .sf__footer-block-menu, .ml-theme .sf-footer .sf__footer-block-html, .ml-theme .sf-footer .sf__footer-block-our_store {
    border: 1px solid var(--ml-glass-border); border-radius: var(--ml-radius-small);
    background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), var(--ml-glass-alpha-panel));
    box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 1px var(--ml-glass-edge);
  }
  .ml-theme .sf-footer .sf__footer-block-ml_links .sf__accordion-button, .ml-theme .sf-footer .sf__footer-block-menu .sf__accordion-button, .ml-theme .sf-footer .sf__footer-block-html .sf__accordion-button, .ml-theme .sf-footer .sf__footer-block-our_store .sf__accordion-button {
    display: flex; align-items: center; min-height: 52px; margin: 0; padding: 0 44px 0 16px; font-size: 15px; font-weight: 700;
  }
  .ml-theme .sf-footer .sf__accordion-button::after { right: 16px; }
  .ml-theme .sf-footer .sf__footer-block-ml_links .sf__footer-block-content, .ml-theme .sf-footer .sf__footer-block-menu .sf__footer-block-content { padding: 0 16px; }
  .ml-theme .sf-footer .sf__footer-block-ml_links .sf__footer-block-content > div, .ml-theme .sf-footer .sf__footer-block-menu .sf__footer-block-content > div { padding: 2px 0 10px; border-top: 1px solid var(--ml-glass-edge); }
  .ml-theme .sf-footer .sf__footer-block-content li { line-height: 1.3; }
  .ml-theme .sf-footer .sf__footer-block-content li a { display: flex; align-items: center; min-height: 42px; font-size: 14px; }
  .ml-theme .sf-footer .sf__footer-bottom { margin-top: 22px; }
  /* the floating back-to-top button sits over the bottom-right corner once the page is fully scrolled */
  .ml-footer-bottom { border-top-color: var(--ml-border); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ---- Product page: quantity, buy row, sticky bar, dots, heart ----
   Quantity is a compact 50px stepper on the same row as Add to cart, on every width, and
   "Buy it now" spans the row underneath. No label: the stepper explains itself. */
.ml-theme .prod__option-label__quantity, .ml-theme [data-quantity-input-wrapper] > .prod__option-label { display: none !important; }
.ml-theme .product-form__actions > .flex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.ml-theme .product-form__actions > .flex > * { grid-column: 1 / -1; margin: 0 !important; }
.ml-theme .product-form__actions [data-quantity-input-wrapper] { grid-column: 1; width: auto; }
.ml-theme .product-form__actions .add-to-cart { grid-column: 2; width: 100%; }
.ml-theme .product-form__actions .quantity-input, .ml-theme .prod__sticky-atc .quantity-input { width: 122px; height: 50px; min-height: 50px; }
.ml-theme .quantity-input button, .ml-theme .quantity-input__button { min-width: 38px; width: 38px; min-height: 100%; height: 100%; }
.ml-theme .quantity-input input { width: 100%; min-width: 0; padding: 0; font-size: 15px; }
.ml-theme .prod__dynamic_checkout { grid-column: 1 / -1; }

/* sticky bar: one solid strip of glass with a stronger call to action */
.ml-theme .prod__sticky-atc { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(var(--ml-accent-rgb), .35); box-shadow: 0 -12px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(var(--ml-accent-rgb), .25); }
.ml-theme .prod__sticky-atc sticky-atc { gap: 14px; }
.ml-theme .prod__sticky-atc sticky-atc > div:first-child { flex: 1 1 auto; min-width: 0; }
.ml-theme .prod__sticky-atc .psa__info { min-width: 0; display: grid; gap: 2px; align-content: center; }
.ml-theme .prod__sticky-atc .psa__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ml-theme .prod__sticky-atc .ml-sticky-price { display: flex; gap: 8px; align-items: baseline; font-size: 14px; font-weight: 700; color: var(--ml-text); }
.ml-theme .prod__sticky-atc .ml-sticky-price s { font-weight: 500; color: var(--ml-subtle); font-size: 12px; }
.ml-theme .prod__sticky-atc .ml-sticky-price .f-price__badges, .ml-theme .prod__sticky-atc .ml-sticky-price .f-price__badge { display: none; }
.ml-theme .prod__sticky-atc .spc__main-img { width: 52px; height: 52px; padding: 0; border-radius: 10px; overflow: hidden; background: var(--ml-media-bg); border: 1px solid var(--ml-border); }
.ml-theme .prod__sticky-atc .spc__main-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ml-theme .prod__sticky-atc .psa__form-controls { gap: 10px; }
.ml-theme .prod__sticky-atc .quantity-input { margin: 0 !important; }
.ml-theme .prod__sticky-atc .add-to-cart { min-height: 50px; padding-inline: 26px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 20px rgba(var(--ml-accent-rgb), .28); }
.ml-theme .prod__sticky-atc .sticky-atc-form { gap: 10px; align-items: center; }
/* the icon inside the sticky button is only used on phones */
.ml-atc-icon { display: none; }
@media (max-width: 767px) {
  /* phones: picture and name on the left, one square add-to-cart icon button on the right */
  .ml-theme .prod__sticky-atc sticky-atc { gap: 12px; }
  .ml-theme .prod__sticky-atc sticky-atc > div:first-child { display: flex !important; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; padding: 0; }
  .ml-theme .prod__sticky-atc .spc__main-img { display: flex !important; width: 46px; min-width: 46px; height: 46px; flex: none; }
  .ml-theme .prod__sticky-atc .spc__main-img > *, .ml-theme .prod__sticky-atc .spc__main-img img { width: 100%; height: 100%; object-fit: cover; }
  .ml-theme .prod__sticky-atc .psa__info { margin: 0; min-width: 0; }
  .ml-theme .prod__sticky-atc .psa__title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  .ml-theme .prod__sticky-atc .ml-sticky-price { font-size: 13px; }
  .ml-theme .prod__sticky-atc .psa__form-controls { flex: none; width: auto; }
  .ml-theme .prod__sticky-atc .sticky-atc-form { width: auto; }
  .ml-theme .prod__sticky-atc .quantity-input, .ml-theme .prod__sticky-atc .sf-product-variant-option-dropdown { display: none !important; }
  .ml-theme .prod__sticky-atc .add-to-cart--icon { flex: none; width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 14px; display: grid; place-items: center; }
  .ml-theme .prod__sticky-atc .add-to-cart--icon .atc-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ml-theme .prod__sticky-atc .add-to-cart--icon .ml-atc-icon { display: grid; place-items: center; }
  .ml-theme .prod__sticky-atc .add-to-cart--icon .ml-atc-icon svg { width: 22px; height: 22px; }
}
}

/* gallery dots: small pills in the accent colour, the current one stretched */
.ml-theme .swiper-pagination-bullet { width: 7px; height: 7px; margin: 0 4px; border: 0 !important; border-radius: 4px; background: rgba(var(--ml-text-rgb), .28) !important; opacity: 1; box-shadow: none; transition: width .3s var(--ml-ease), background-color .25s ease; }
.ml-theme .swiper-pagination-bullet::after, .ml-theme .swiper-pagination-bullet::before { display: none; }
.ml-theme .swiper-pagination-bullet:hover { background: rgba(var(--ml-text-rgb), .5); }
.ml-theme .swiper-pagination-bullet-active, .ml-theme .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 22px; border: 0 !important; background: var(--ml-accent) !important; }
.ml-theme .swiper-pagination { display: flex; justify-content: center; align-items: center; margin-top: 10px; }

/* the heart beside the title: a glass button, no tooltip bubble (the label stays for screen readers) */
.ml-theme .prod__title .sf-wishlist__button {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ml-text);
  background: var(--ml-glass-sheen), rgba(var(--ml-glass-tint), var(--ml-glass-alpha-panel)); border: 1px solid var(--ml-glass-border);
  box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 1px var(--ml-glass-edge);
  transition: transform .25s var(--ml-ease-spring), border-color .2s ease, color .2s ease, background-color .2s ease;
}
.ml-theme .prod__title .sf-wishlist__button .sf__tooltip-content { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0; }
.ml-theme .prod__title .sf-wishlist__button::before, .ml-theme .prod__title .sf-wishlist__button::after { display: none !important; }
.ml-theme .prod__title .sf-wishlist__button:hover { transform: translateY(-2px) scale(1.06); border-color: rgba(var(--ml-accent-rgb), .55); color: var(--ml-accent); }
.ml-theme .prod__title .sf-wishlist__button:active { transform: scale(.94); }
.ml-theme .prod__title .sf-wishlist__button.added-to-wishlist { background: var(--ml-accent); border-color: transparent; color: var(--ml-on-accent); }
.ml-theme .prod__title .sf-wishlist__button.added-to-wishlist svg { fill: currentColor; animation: ml-pop .45s var(--ml-ease-spring); }
.ml-theme .prod__title .sf-wishlist__button svg { width: 20px; height: 20px; transition: transform .25s var(--ml-ease-spring); }
.ml-theme .prod__title .sf-wishlist__button:hover svg { transform: scale(1.12); }
@keyframes ml-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---- Product page spacing ---- */
.ml-theme .main-product .actions-block { margin-top: 0; padding: 4px 0 0; border-bottom: 0; }
.ml-theme .prod__form-buttons { gap: 4px 22px; }
.ml-theme .prod__form-buttons > a { margin-right: 0 !important; }
.ml-theme .main-product__block-addons { margin-top: 0 !important; }
.ml-theme .main-product__block-addons .actions-block > div { padding-bottom: 0; }
.ml-theme .main-product .sf__accordion-content .ml-rte li { margin: 2px 0; }
.ml-theme .main-product .sf__accordion-content .ml-rte ul { margin-bottom: .6em; }
.ml-theme .main-product .sf__accordion-content .ml-rte h3, .ml-theme .main-product .sf__accordion-content .ml-rte h4 { margin: 14px 0 6px; font-size: 16px; }
.ml-section-head { gap: 2px; margin-bottom: 12px; }
.ml-section-head .ml-text-link { margin-top: 4px; }
@media (min-width: 768px) { .ml-section-head { gap: 18px; margin-bottom: 18px; } .ml-section-head .ml-text-link { margin-top: 0; } }

/* ---- No hole above the footer. Sections keep their own rhythm; the page adds nothing, and the
   last section on a page gives up most of its bottom padding because the footer carries its own. */
.ml-theme #MainContent { padding-bottom: 0 !important; }
.ml-theme #MainContent > .shopify-section:last-child .ml-section, .ml-theme #MainContent > .shopify-section:last-child > section:last-child { padding-bottom: 10px; }
.ml-theme .sf-footer .sf__footer-middle .sf-footer__block { padding-top: 48px; padding-bottom: 36px; }
@media (min-width: 768px) { .ml-theme #MainContent > .shopify-section:last-child .ml-section, .ml-theme #MainContent > .shopify-section:last-child > section:last-child { padding-bottom: 18px; } }
@media (max-width: 1023px) { .ml-theme .sf-footer { padding-top: 22px; } .ml-theme .sf-footer .sf__footer-middle .sf-footer__block { padding: 0; } }

/* ---- Scrollbars in the store's own colours ---- */
html { scrollbar-color: rgba(var(--ml-text-rgb, 21, 24, 26), .28) transparent; }
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(var(--ml-text-rgb, 21, 24, 26), .24); border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ml-accent-rgb), .75); background-clip: padding-box; }
  ::-webkit-scrollbar-corner { background: transparent; }
  .ml-theme .sf__custom_scroll::-webkit-scrollbar-thumb { background: rgba(var(--ml-text-rgb), .24); background-clip: padding-box; }
}

/* ---- Spotlight on cards ----
   market-link.js tags the cards below with .ml-spot and writes the pointer position into --mx/--my.
   The glow is a pseudo-element behind the content but above the card's own glass, so text stays
   crisp. Pointer devices only; on touch nothing is added. */
@media (hover: hover) and (pointer: fine) {
  .ml-spot { position: relative; isolation: isolate; }
  .ml-spot::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--ml-accent-rgb), .18), transparent 46%);
    opacity: 0; transition: opacity .35s ease;
  }
  .ml-spot:hover::after { opacity: 1; }
  html[data-ml-theme="dark"] .ml-spot::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--ml-accent-rgb), .13), transparent 46%); }
  /* a matching edge highlight: the border catches the light nearest the pointer */
  .ml-spot::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; padding: 1px;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--ml-accent-rgb), .7), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease;
  }
  .ml-spot:hover::before { opacity: 1; }
}

/* ---- Motion and interaction ----
   One easing family, short durations, and every effect answers a real pointer or key. */
@media (hover: hover) and (pointer: fine) {
  /* cards lift toward the pointer */
  .ml-spot { transition: transform .35s var(--ml-ease), box-shadow .35s var(--ml-ease), border-color .25s ease, background-color .25s ease; }
  a.ml-spot:hover, .ml-spot:has(> a:only-child):hover, .ml-testimonial.ml-spot:hover, .ml-review.ml-spot:hover, .ml-trust__item.ml-spot:hover, .ml-faq .ml-accordion__item.ml-spot:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--ml-glass-highlight), 0 0 0 1px var(--ml-glass-edge), 0 18px 40px rgba(var(--ml-shadow-rgb), calc(var(--ml-shadow-strength) * .9)); }
  .ml-spot:active { transform: translateY(0) scale(.99); transition-duration: .12s; }
  /* pictures ease in a touch */
  .ml-tile__media img, .ml-category-card__media img, .ml-promo img, .ml-deal img, .ml-brand img, .sf__pcard .sf__image-box img { transition: transform .6s var(--ml-ease); }
  .ml-tile:hover .ml-tile__media img, .ml-deal:hover img, .ml-promo:hover img { transform: scale(1.05); }
  .sf__pcard:hover .sf__image-box img { transform: scale(1.04); }
  .ml-brand:hover img { transform: scale(1.06); }
  /* links underline from the left */
  .ml-theme .sf-footer .sf__footer-block-content a, .ml-theme .sf-menu__content .sf-menu-item > a, .ml-text-link { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ml-ease), color .2s ease; }
  .ml-theme .sf-footer .sf__footer-block-content a:hover, .ml-theme .sf-menu__content .sf-menu-item > a:hover, .ml-text-link:hover { background-size: 100% 1px; }
  .ml-text-link .ml-icon { transition: transform .25s var(--ml-ease); }
  .ml-text-link:hover .ml-icon { transform: translateX(4px); }
}
/* buttons: a light sweep on hover, a firm press */
.ml-btn, .ml-theme .sf__btn:not(.btn-scroll-top), .ml-theme .add-to-cart, .ml-theme .shopify-payment-button__button { position: relative; overflow: hidden; transition: transform .2s var(--ml-ease), box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.ml-btn::after, .ml-theme .add-to-cart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ml-ease); pointer-events: none; }
.ml-btn:hover::after, .ml-theme .add-to-cart:hover::after { transform: translateX(120%); }
.ml-btn:hover, .ml-theme .add-to-cart:hover { transform: translateY(-1px); }
.ml-btn:active, .ml-theme .sf__btn:active, .ml-theme .add-to-cart:active { transform: translateY(1px) scale(.98); }
/* ripple written by market-link.js on press */
.ml-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%); transform: translate(-50%, -50%) scale(0); animation: ml-ripple .6s var(--ml-ease) forwards; z-index: 1; }
html[data-ml-theme="dark"] .ml-ripple { background: radial-gradient(circle, rgba(var(--ml-accent-rgb), .35), rgba(var(--ml-accent-rgb), 0) 70%); }
.ml-btn--primary .ml-ripple, .ml-theme .add-to-cart .ml-ripple { background: radial-gradient(circle, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 70%); }
@keyframes ml-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
/* small pieces: icon buttons, chips, tiles, stepper */
.ml-theme .sf__btn-icon, .ml-header-icon, .ml-chip, .ml-theme .quantity-input button, .ml-select__button, .ml-theme .sf__sidebar-open, .ml-theme .sf__sortmb-icon { transition: transform .2s var(--ml-ease-spring), background-color .2s ease, border-color .2s ease, color .2s ease; }
.ml-theme .sf__btn-icon:active, .ml-header-icon:active, .ml-chip:active, .ml-theme .quantity-input button:active, .ml-theme .sf__sidebar-open:active, .ml-theme .sf__sortmb-icon:active { transform: scale(.92); }
.ml-theme .sf__pcard .sf__pcard-action .sf__btn-icon.added-to-wishlist svg { animation: ml-pop .45s var(--ml-ease-spring); }
/* accordions: the row tints while open, the plus turns into a cross (already), the panel eases */
.ml-accordion__item { transition: background-color .25s ease, border-color .25s ease; }
.ml-accordion__item.is-open { border-color: rgba(var(--ml-accent-rgb), .3); }
.ml-theme .main-product .sf__accordion-button, .ml-theme .sf__sidebar .sf__accordion-button, .ml-theme .sf-footer .sf__accordion-button { transition: color .2s ease; }
.ml-theme .main-product .sf__accordion-button:hover, .ml-theme .sf-footer .sf__accordion-button:hover { color: var(--ml-accent); }
/* keyboard focus draws in rather than snapping */
@keyframes ml-focus-in { from { outline-offset: 8px; outline-color: transparent; } }
.ml-theme :focus-visible { animation: ml-focus-in .25s var(--ml-ease); }
/* drawers, sheets and the search panel slide with the store's easing */
.ml-theme .scd__content, .ml-theme .sf-menu-wrapper-mobile .sf-menu__content, .ml-theme .sf__sortmb-list, .ml-theme .sf__sidebar-content { transition-timing-function: var(--ml-ease) !important; transition-duration: .38s !important; }
/* the stepper's number nudges when it changes */
.ml-theme .quantity-input input { transition: transform .15s var(--ml-ease-spring); }
.ml-theme .quantity-input.is-bumped input { transform: scale(1.18); }
@media (prefers-reduced-motion: reduce) {
  .ml-spot::after, .ml-spot::before, .ml-btn::after, .ml-theme .add-to-cart::after, .ml-ripple { display: none !important; }
  .ml-spot, .ml-btn, .ml-theme .sf__btn, .ml-theme .add-to-cart, .ml-theme .sf__btn-icon, .ml-header-icon, .ml-chip { transition: none !important; transform: none !important; }
  .ml-theme :focus-visible { animation: none; }
}

/* ---- Phone gallery: every slide a square, a gutter between slides, controls in one column ----
   Minimog sizes each slide by its own photo, so a tall earphone shot and a wide mount shot came out
   as different boxes. The slide is now a square with the photo contained inside, on white (the
   product photos are on white anyway). The gap between slides is padding inside each slide, so
   Swiper's maths are untouched. The heart and the zoom share the same right inset. */
@media (max-width: 767px) {
  .ml-theme .product-mb__media { padding-inline: 0 !important; margin-inline: -5px; }
  .ml-theme .sf-product-media__mobile .swiper-slide.sf-prod-media-item { padding: 0 5px; background: none; border-radius: 0; overflow: visible; height: auto; }
  .ml-theme .sf-product-media__mobile .swiper-slide.sf-prod-media-item > .sf-prod-media,
  .ml-theme .sf-product-media__mobile .swiper-slide.sf-prod-media-item > .deferred-media,
  .ml-theme .sf-product-media__mobile .swiper-slide.sf-prod-media-item > div { border-radius: calc(var(--ml-radius) + 2px); overflow: hidden; background: #fff; }
  .ml-theme .sf-product-media__mobile .swiper-slide .sf-image, .ml-theme .sf-product-media__mobile .swiper-slide responsive-image { --aspect-ratio: 1 !important; aspect-ratio: 1; display: block; position: relative; width: 100%; }
  .ml-theme .sf-product-media__mobile .swiper-slide .sf-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0; mix-blend-mode: normal; }
  /* nothing behind the gallery: no cream strip in the gutter, no plate around the pictures */
  .ml-theme .sf-product-media__mobile .sf-preview__wrapper, .ml-theme .sf-product-media__mobile media-gallery .sf-preview__wrapper, .ml-theme .sf-product-media__mobile .product-mb__media, .ml-theme .sf-product-media__mobile .sf-pis__wrapper { background: transparent !important; }
  .ml-theme .sf-product-media__mobile .swiper-slide.sf-prod-media-item > .deferred-media, .ml-theme .sf-product-media__mobile .swiper-slide.sf-prod-media-item > div:not(.sf-prod-media) { background: transparent; }
  /* the slide has 5px of gutter on each side, so 15px from the slide edge is 10px from the picture */
  .ml-theme .sf-product-media__mobile .sf-prod-media-item .zoom-in { right: 15px !important; top: 58px !important; bottom: auto !important; height: 40px; }
  .ml-theme .sf-product-media__mobile .product-mb__atwl { right: 15px; top: 10px; }
  .ml-theme .sf-product-media__mobile .swiper-pagination { margin-top: 12px; }
}

/* ---- Footer wordmark: the header logo again, linking home ---- */
.ml-theme .sf-footer .ml-footer-logo { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font-family: var(--ml-font-heading); font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ml-text); cursor: pointer; pointer-events: auto !important; }
.ml-theme .sf-footer .ml-footer-logo::after { display: none !important; }
.ml-theme .sf-footer .ml-footer-logo .ml-brand-mark { grid-template-columns: repeat(2, 9px); }
.ml-theme .sf-footer .ml-footer-logo .ml-brand-mark b { width: 9px; height: 9px; transition: transform .3s var(--ml-ease-spring); }
.ml-theme .sf-footer .ml-footer-logo:hover .ml-brand-mark b:nth-child(2), .ml-theme .sf-footer .ml-footer-logo:hover .ml-brand-mark b:nth-child(3) { transform: scale(1.15); }
.ml-theme .sf-footer .ml-footer-logo:hover { color: var(--ml-text); background: none; }
.ml-footer-logo__img { display: block; }
.ml-footer-logo__img img { display: block; width: 100%; height: auto; }

/* ---- Footer brand text: a short paragraph or two, sized to read comfortably ---- */
.ml-theme .sf-footer .sf__footer-block-custom_text .sf__footer-block-content { max-width: 360px; }
.ml-theme .sf-footer .sf__footer-block-custom_text p { font-size: 14px; line-height: 1.6; color: var(--ml-muted); margin: 0 0 10px; text-wrap: pretty; }
.ml-theme .sf-footer .sf__footer-block-custom_text p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) { .ml-theme .sf-footer .sf__footer-block-custom_text .sf__footer-block-content { max-width: 100%; } }

/* the back-to-top button is fixed; it must never take part in the page flow (it once pushed every
   page down by its own height when a button rule gave it position: relative) */
.ml-theme #scroll-to-top-button, .ml-theme .btn-scroll-top { position: fixed !important; }

/* ---- 404 page in the store's own colours ---- */
.ml-theme .sf-page404 { background: transparent !important; color: var(--ml-text); padding: 72px 16px; gap: 6px; min-height: 0; }
.ml-theme .sf-page404 .sf-title { font-family: var(--ml-font-heading); font-size: clamp(32px, 5vw, 56px); color: var(--ml-heading) !important; letter-spacing: -.03em; }
.ml-theme .sf-page404 p:not(.sf-title) { font-size: clamp(16px, 2vw, 22px); font-weight: 400; color: var(--ml-muted) !important; margin-bottom: 22px; max-width: 520px; text-align: center; }
.ml-theme .sf-page404 svg { color: var(--ml-accent); }
.ml-theme .sf-page404 .sf__btn { background: var(--ml-accent); color: var(--ml-on-accent); border-color: transparent; border-radius: var(--ml-radius-small); min-height: 48px; padding-inline: 24px; }
@media (min-width: 1024px) { .ml-theme .sf-page404 { padding: 110px 16px; } }

/* ---- Bottom of Minimog's own templates: their wrappers carried 60 to 96px of margin that collapsed
   out of main and sat as a hole above the footer ---- */
.ml-theme .sf__collection-container, .ml-theme .sf__collection-container.sidebar__leftColumn { margin-bottom: 0 !important; }
.ml-theme .sf__collection-container .sf__product-listing { margin-bottom: 0; }
.ml-theme.template-search #MainContent .container.pb-12, .ml-theme.template-search #MainContent .pb-12 { padding-bottom: 18px !important; }
.ml-theme.template-search #MainContent .my-16 { margin-block: 28px 18px !important; }
.ml-theme.template-blog #MainContent section, .ml-theme.template-article #MainContent section.pb-10, .ml-theme.template-blog #MainContent .xl\:pb-24, .ml-theme.template-article #MainContent .xl\:pb-24 { padding-bottom: 24px !important; }
.ml-theme #MainContent > .shopify-section:last-child .container.pb-12 { padding-bottom: 18px; }