/* SDG menu (docs/spec-menu.md). Computer: the bar with icons, panels as a layer over the page (they never push it),
   opening with a short slide and fade. Phone: the menu button and a drawer from the side with search, tabs (the ink
   under the active tab slides), rows with icons and levels that slide in. Colours and sizes come from the builder as
   custom properties (Render::css), the breakpoint too. Everything respects "reduce motion". */
.sdg-mm,.sdg-mmd{--sdg-mm-ease:cubic-bezier(.2,.8,.2,1);font-family:Montserrat,system-ui,-apple-system,sans-serif}
.sdg-mm *,.sdg-mm *::before,.sdg-mm *::after,.sdg-mmd *,.sdg-mmd *::before,.sdg-mmd *::after{box-sizing:border-box}
.sdg-mm ul,.sdg-mmd ul{list-style:none;margin:0;padding:0}
/* words for screen readers only, without relying on the theme to hide them */
.sdg-mm .screen-reader-text,.sdg-mmd .screen-reader-text{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}
.sdg-mm img.sdg-mm-ico,.sdg-mmd img.sdg-mm-ico{display:block;flex:none;object-fit:contain;max-width:none;height:auto;aspect-ratio:1}
.sdg-mm svg.sdg-mm-ico,.sdg-mmd svg.sdg-mm-ico{display:block;flex:none}
.sdg-mm-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 6px 3px;border-radius:3px;font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em;text-transform:none;white-space:nowrap;vertical-align:top}

/* ---------- the bar ---------- */
.sdg-mm{position:relative;display:flex;justify-content:center;width:100%}
/* always one row (David, 21 Oct 2026: "nechcem, nech je na dva riadky, ale radšej nech sa dá horizontálne scrollovať, na
   desktope klikom a potiahnutím"): the bar is as wide as its items and centred while they fit, and scrolls sideways when
   they do not (a trackpad or a finger natively, the mouse by dragging: tweaks' drag-to-scroll takes any sideways
   scroller). Its scrollbar is hidden; a soft fade and a round arrow show the side with more. The panels are fixed to the
   window, so the scroller never clips them. 4 px above and below keep the focus ring and the lifted icon inside it. */
.sdg-mm__bar{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:0 var(--sdg-mm-gap,30px);min-width:0;max-width:100%;margin:-4px 0;padding:4px 2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sdg-mm__bar::-webkit-scrollbar{display:none}
.sdg-mm__top{flex:none}
.sdg-mm::before,.sdg-mm::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:64px;pointer-events:none;opacity:0;transition:opacity .2s ease}
.sdg-mm::before{left:0;background:linear-gradient(90deg,var(--sdg-mm-fade,#000) 18%,transparent)}
.sdg-mm::after{right:0;background:linear-gradient(270deg,var(--sdg-mm-fade,#000) 18%,transparent)}
.sdg-mm.has-more-l::before,.sdg-mm.has-more-r::after{opacity:1}
.sdg-mm .sdg-mm__nudge,.sdg-mm .sdg-mm__nudge:hover,.sdg-mm .sdg-mm__nudge:focus{all:unset;box-sizing:border-box;position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 4px 14px rgba(0,0,0,.5);cursor:pointer;opacity:0;visibility:hidden;transform:scale(.85);transition:opacity .2s ease,transform .2s var(--sdg-mm-ease),visibility 0s linear .2s,background-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.sdg-mm .sdg-mm__nudge.is-prev{left:4px}
.sdg-mm .sdg-mm__nudge.is-next{right:4px}
.sdg-mm.has-more-l .sdg-mm__nudge.is-prev,.sdg-mm.has-more-r .sdg-mm__nudge.is-next{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s var(--sdg-mm-ease),visibility 0s,background-color .15s,color .15s}
.sdg-mm .sdg-mm__nudge:hover{background:#fff;color:#000}
.sdg-mm .sdg-mm__nudge:focus-visible{outline:2px solid var(--sdg-mm-hover,#e32c2b);outline-offset:2px}
.sdg-mm .sdg-mm__nudge svg{display:block;width:18px;height:18px}
@media (hover:none){.sdg-mm .sdg-mm__nudge,.sdg-mm .sdg-mm__nudge:hover,.sdg-mm .sdg-mm__nudge:focus{display:none}} /* a finger swipes the bar; the fade still shows there is more */
.sdg-mm__top{position:static;display:flex;align-items:center}
.sdg-mm__top.is-list{position:relative}
.sdg-mm .sdg-mm__link{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;color:var(--sdg-mm-color,#fff);text-decoration:none;font-size:var(--sdg-mm-size,19px);font-weight:var(--sdg-mm-weight,700);text-transform:var(--sdg-mm-case,uppercase);letter-spacing:.01em;line-height:1.1;white-space:nowrap;transition:color .18s ease}
.sdg-mm .sdg-mm__link .sdg-mm-ico{transition:transform .25s var(--sdg-mm-ease)}
.sdg-mm .sdg-mm__link .sdg-mm-badge{align-self:flex-start;margin-top:4px;margin-left:-4px}
.sdg-mm .sdg-mm__text{position:relative}
.sdg-mm .sdg-mm__text::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--sdg-mm-ease)}
.sdg-mm .sdg-mm__top:hover > .sdg-mm__link,.sdg-mm .sdg-mm__top.is-open > .sdg-mm__link,.sdg-mm .sdg-mm__link:focus-visible{color:var(--sdg-mm-hover,#e32c2b)}
.sdg-mm .sdg-mm__top:hover > .sdg-mm__link .sdg-mm-ico,.sdg-mm .sdg-mm__top.is-open > .sdg-mm__link .sdg-mm-ico{transform:translateY(-2px) scale(1.04)}
.sdg-mm .sdg-mm__top.is-open > .sdg-mm__link .sdg-mm__text::after,.sdg-mm .sdg-mm__top.is-current > .sdg-mm__link .sdg-mm__text::after,.sdg-mm .sdg-mm__link[aria-current] .sdg-mm__text::after{transform:scaleX(1)}
/* one line at a time: while a panel is open only its item is underlined, the section you are in waits (David, 15 Oct 2026) */
.sdg-mm:has(.sdg-mm__top.is-open) .sdg-mm__top.is-current:not(.is-open) > .sdg-mm__link .sdg-mm__text::after{transform:scaleX(0)}
.sdg-mm .sdg-mm__toggle,.sdg-mm .sdg-mm__toggle:hover,.sdg-mm .sdg-mm__toggle:focus{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:28px;min-height:44px;margin-left:2px;color:var(--sdg-mm-color,#fff);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sdg-mm .sdg-mm__toggle .sdg-mm-chev{transition:transform .25s var(--sdg-mm-ease)}
.sdg-mm .sdg-mm__top:hover > .sdg-mm__toggle,.sdg-mm .sdg-mm__top.is-open > .sdg-mm__toggle{color:var(--sdg-mm-hover,#e32c2b)}
.sdg-mm .sdg-mm__top.is-open > .sdg-mm__toggle .sdg-mm-chev{transform:rotate(180deg)}
.sdg-mm .sdg-mm__toggle:focus-visible,.sdg-mm .sdg-mm__link:focus-visible{outline:2px solid var(--sdg-mm-hover,#e32c2b);outline-offset:3px;border-radius:3px}
/* computers: words, icons and gaps follow the window width (never past the Look settings), so the seven items fit one
   row from 1 280 px up without scrolling (measured on the live site, whose Montserrat sets about 4 % wider than the
   staging's: at .9vw it scrolled by 32 px at 1 280, 21 Oct 2026). At the full size they need 1 652 px, and the header's box is narrower than
   the window, so the full size alone wrapped (15 Oct 2026 at 1 440 px; 21 Oct 2026 on David's screen at about 1 700 px,
   where this rule stopped at 1 679 px). Narrower than that, the bar scrolls. */
@media (min-width:1025px){
  .sdg-mm__bar{gap:0 min(var(--sdg-mm-gap,30px),1vw)}
  .sdg-mm .sdg-mm__link{gap:9px;font-size:min(var(--sdg-mm-size,19px),calc(4px + .85vw))}
  .sdg-mm .sdg-mm__link img.sdg-mm-ico,.sdg-mm .sdg-mm__link svg.sdg-mm-ico{width:max(26px,2.3vw);height:auto}
  .sdg-mm .sdg-mm__toggle,.sdg-mm .sdg-mm__toggle:hover,.sdg-mm .sdg-mm__toggle:focus{width:22px}
}
/* ---------- panels: full width under the bar (top set by the script), or a short list under the item ---------- */
.sdg-mm__panel{display:none;position:fixed;left:0;right:0;top:var(--sdg-mm-top,140px);z-index:99990;color:var(--sdg-mm-panel-fg,#fff);background:var(--sdg-mm-panel-bg,#000);border-top:1px solid var(--sdg-mm-panel-line,#2a2a2a);box-shadow:0 30px 60px rgba(0,0,0,.35);max-height:calc(100vh - var(--sdg-mm-top,140px) - 12px);max-height:calc(100dvh - var(--sdg-mm-top,140px) - 12px);overflow-y:auto;overscroll-behavior:contain;font-size:var(--sdg-mm-panel-size,16px);text-align:left;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .24s var(--sdg-mm-ease)}
.sdg-mm__top.is-list > .sdg-mm__panel{position:fixed;left:var(--sdg-mm-x,50%);right:auto;width:max-content;min-width:260px;max-width:420px;border-radius:0 0 12px 12px;transform:translate(-50%,-8px)} /* fixed like the others: the bar scrolls and would clip it */
.sdg-mm[data-effect="fade"] .sdg-mm__panel{transform:none}
.sdg-mm[data-effect="fade"] .sdg-mm__top.is-list > .sdg-mm__panel{transform:translateX(-50%)}
.sdg-mm__top.is-shown > .sdg-mm__panel{display:block}
.sdg-mm__top.is-open > .sdg-mm__panel{opacity:1;transform:none}
.sdg-mm__top.is-list.is-open > .sdg-mm__panel{transform:translateX(-50%)}
.sdg-mm[data-effect="none"] .sdg-mm__panel{transition:none}
.sdg-mm__in{max-width:var(--sdg-mm-panel-w,1360px);margin:0 auto;padding:24px 40px 26px}
.sdg-mm__fly{padding:14px 10px}
.sdg-mm__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 48px}
.sdg-mm__col{grid-column:span var(--span,1);min-width:0}
.sdg-mm__col > * + *{margin-top:22px}
.sdg-mm .sdg-mm__head{margin:0 0 10px;padding:0 0 9px;border-bottom:1px solid var(--sdg-mm-panel-line,#2a2a2a);font-size:16px;font-weight:700;line-height:1.3}
.sdg-mm .sdg-mm__head a{color:inherit;text-decoration:none}
.sdg-mm .sdg-mm__head a:hover{color:var(--sdg-mm-panel-hover,#e32c2b)}
.sdg-mm .sdg-mm__item{display:flex;align-items:center;gap:12px;min-height:44px;padding:1px 0;color:var(--sdg-mm-panel-fg,#fff);text-decoration:none;line-height:1.25;transition:color .15s ease,transform .2s var(--sdg-mm-ease)}
.sdg-mm .sdg-mm__item:hover,.sdg-mm .sdg-mm__item:focus-visible,.sdg-mm .sdg-mm__item[aria-current]{color:var(--sdg-mm-panel-hover,#e32c2b)}
.sdg-mm .sdg-mm__item:hover{transform:translateX(3px)}
.sdg-mm .sdg-mm__item.is-bold{font-weight:700}
.sdg-mm .sdg-mm__item .sdg-mm-badge{margin-left:4px}
.sdg-mm .sdg-mm__fly .sdg-mm__item{padding:3px 12px;border-radius:8px}
.sdg-mm .sdg-mm__fly .sdg-mm__item:hover{background:rgba(255,255,255,.06);transform:none}
.sdg-mm__sub{margin:0 0 6px;padding:0 0 0 calc(var(--sdg-mm-ico-w,34px) + 12px)} /* the kinds start under their item's name */
.sdg-mm__sub a{display:inline-flex;align-items:center;gap:10px;min-height:32px;color:var(--sdg-mm-panel-muted,#bdbdbd);font-size:14px;text-decoration:none;transition:color .15s ease}
.sdg-mm__sub .sdg-mm-ico{flex:none}
.sdg-mm__sub a:hover,.sdg-mm__sub a[aria-current]{color:var(--sdg-mm-panel-hover,#e32c2b)}
/* an icon whose picture carries its name under the drawing (David's labelled set): only the drawing, in the same square
   (its height and margins come with it from Icons::html) */
.sdg-mm-ico.is-named{object-fit:cover;object-position:50% 0}
/* an item with kinds: a small button opens them under it (the links are in the page either way, for Google too) */
.sdg-mm__list > li.has-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px}
.sdg-mm__list > li.has-sub > .sdg-mm__sub{grid-column:1/-1}
.sdg-mm.is-ready .sdg-mm__list > li.has-sub:not(.is-sub-open) > .sdg-mm__sub{display:none}
.sdg-mm.is-ready .sdg-mm__list > li.is-sub-open > .sdg-mm__sub{animation:sdg-mm-fade .22s ease both}
.sdg-mm .sdg-mm__more,.sdg-mm .sdg-mm__more:hover,.sdg-mm .sdg-mm__more:focus{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:var(--sdg-mm-panel-muted,#bdbdbd);cursor:pointer;transition:background-color .15s,color .15s}
.sdg-mm .sdg-mm__more:hover{background:rgba(255,255,255,.08);color:var(--sdg-mm-panel-fg,#fff)}
.sdg-mm .sdg-mm__more svg{transition:transform .2s var(--sdg-mm-ease)}
.sdg-mm .is-sub-open > .sdg-mm__more{color:var(--sdg-mm-panel-fg,#fff)}
.sdg-mm .is-sub-open > .sdg-mm__more svg{transform:rotate(180deg)}
.sdg-mm .sdg-mm__more:focus-visible{outline:2px solid var(--sdg-mm-panel-hover,#e32c2b);outline-offset:1px}
.sdg-mm__hr,.sdg-mmd__hr{border:0;border-top:1px solid var(--sdg-mm-panel-line,#2a2a2a);margin:14px 0}
/* tiles: a picture with its name under it, side by side (Clothing Patterns; David 14 Oct 2026: "a normal picture, next
   to each other at the bottom"). The picture fills a rounded square; a drawing with a transparent background stays whole. */
.sdg-mm__tiles,.sdg-mmd__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:18px 12px}
.sdg-mm .sdg-mm__tile,.sdg-mmd .sdg-mm__tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0;color:inherit;text-decoration:none;font-size:14px;font-weight:600;line-height:1.25;text-align:center;transition:color .15s ease}
.sdg-mm__tile .sdg-mm-ico:not(.is-named){width:84px;height:84px;border-radius:12px;object-fit:cover;transition:transform .2s var(--sdg-mm-ease),box-shadow .2s ease}
.sdg-mm .sdg-mm__tile:hover,.sdg-mm .sdg-mm__tile[aria-current]{color:var(--sdg-mm-panel-hover,#e32c2b)}
.sdg-mm .sdg-mm__tile:hover .sdg-mm-ico{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.35)}
/* a laptop screen (1280 × 800): the header takes ~280 px, so a panel keeps its rows a little tighter */
@media (max-height:860px) and (pointer:fine){.sdg-mm .sdg-mm__item{min-height:40px}.sdg-mm__tile .sdg-mm-ico:not(.is-named){width:68px;height:68px}}
.sdg-mm__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--sdg-mm-panel-line,#2a2a2a)}
.sdg-mm .sdg-mm__all,.sdg-mm .sdg-mm-row__all{display:inline-flex;align-items:center;gap:8px;color:var(--sdg-mm-panel-fg,#fff);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.sdg-mm .sdg-mm__all:hover,.sdg-mm .sdg-mm-row__all:hover{color:var(--sdg-mm-panel-hover,#e32c2b)}
.sdg-mm-arrow{transition:transform .2s var(--sdg-mm-ease)}
a:hover > .sdg-mm-arrow{transform:translateX(3px)}
.sdg-mm__panel :focus-visible{outline:2px solid var(--sdg-mm-panel-hover,#e32c2b);outline-offset:2px;border-radius:4px}

/* ---------- product row (drawn in the browser from the public product file) ---------- */
.sdg-mm-row{margin-top:4px}
.sdg-mm-row__head{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.sdg-mm-row__title{margin:0;font-size:18px;font-weight:700}
.sdg-mm-row__all{margin-left:auto;font-size:14px}
.sdg-mm-row__nav{display:flex;gap:8px}
.sdg-mm-row__btn,.sdg-mm-row__btn:hover,.sdg-mm-row__btn:focus{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#191919;cursor:pointer;transition:background-color .15s,color .15s,opacity .15s}
.sdg-mm-row__btn:hover{background:var(--sdg-mm-panel-hover,#e32c2b);color:#fff}
.sdg-mm-row__btn:disabled{opacity:.3;cursor:default;background:#fff;color:#191919}
.sdg-mm-row__strip{display:flex;gap:16px;min-height:262px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.sdg-mm-row__strip::-webkit-scrollbar{display:none}
.sdg-mm-card{position:relative;flex:0 0 180px;scroll-snap-align:start;color:inherit;text-decoration:none}
.sdg-mm-card__img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#f2f2f2;transition:transform .35s var(--sdg-mm-ease)}
.sdg-mm-card__pic{display:block;overflow:hidden;border-radius:12px}
.sdg-mm-card:hover .sdg-mm-card__img{transform:scale(1.04)}
.sdg-mm-card__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:10px 0 4px;font-size:14px;font-weight:600;line-height:1.3;min-height:2.6em}
.sdg-mm-card__price{font-size:14px;font-weight:700;color:#e32c2b}
.sdg-mm-card__price del{color:inherit;opacity:.55;font-weight:500;margin-right:6px}
.sdg-mm-card__price ins{text-decoration:none}
.sdg-mm-card__sale{position:absolute;top:8px;left:8px;padding:4px 9px;border-radius:999px;background:#fff;color:#191919;font-size:11px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.sdg-mm-row__strip[aria-busy="true"]::before{content:"";flex:0 0 100%;height:180px;border-radius:12px;background:linear-gradient(90deg,rgba(127,127,127,.12) 25%,rgba(127,127,127,.22) 50%,rgba(127,127,127,.12) 75%);background-size:300% 100%;animation:sdgMmShimmer 1.2s linear infinite}
@keyframes sdgMmShimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- spotlight: one product at a time (the panel's right column) ---------- */
.sdg-mm-spot{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.sdg-mm-spot__title{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sdg-mm-panel-muted,#bdbdbd)}
.sdg-mm-spot__stage{position:relative;overflow:hidden;border-radius:16px;touch-action:pan-y;min-height:340px}
@media (pointer:fine){.sdg-mm-spot__stage{cursor:grab}.sdg-mm-spot__stage.is-dragging{cursor:grabbing}}
.sdg-mm-spot__stage.is-dragging .sdg-mm-spot__slide{pointer-events:none} /* no hover zoom or button colour while it moves */
.sdg-mm-spot__stage[aria-busy="true"]{background:linear-gradient(90deg,rgba(127,127,127,.12) 25%,rgba(127,127,127,.22) 50%,rgba(127,127,127,.12) 75%);background-size:300% 100%;animation:sdgMmShimmer 1.2s linear infinite}
.sdg-mm-spot__track{display:flex;transition:transform .55s var(--sdg-mm-ease);will-change:transform}
.sdg-mm-spot__slide{flex:0 0 100%;display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;-webkit-user-drag:none;user-select:none}
.sdg-mm-spot__pic{position:relative;display:block;overflow:hidden;border-radius:16px;background:#fff;aspect-ratio:1}
.sdg-mm-spot__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sdg-mm-ease)}
.sdg-mm-spot__slide:hover .sdg-mm-spot__img{transform:scale(1.05)}
.sdg-mm-spot__badge{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:999px;background:#191919;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.sdg-mm-spot__badge.is-sale{background:#e32c2b}
.sdg-mm-spot__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:14px 0 8px;font-size:15px;font-weight:600;line-height:1.3;min-height:2.6em}
.sdg-mm-spot__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sdg-mm-spot__foot .sdg-mm-card__price{font-size:16px}
.sdg-mm-spot__go{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sdg-mm-panel-fg,#fff);color:var(--sdg-mm-panel-bg,#000);font-size:13px;font-weight:700;white-space:nowrap;transition:background-color .15s,color .15s}
.sdg-mm-spot__slide:hover .sdg-mm-spot__go{background:var(--sdg-mm-panel-hover,#e32c2b);color:#fff}
.sdg-mm-spot__slide:focus-visible{outline:none}
.sdg-mm-spot__slide:focus-visible .sdg-mm-spot__pic{outline:2px solid var(--sdg-mm-panel-hover,#e32c2b);outline-offset:2px}
.sdg-mm-spot__dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.sdg-mm-spot__dot,.sdg-mm-spot__dot:hover,.sdg-mm-spot__dot:focus{all:unset;box-sizing:border-box;width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.3;cursor:pointer;transition:width .25s var(--sdg-mm-ease),opacity .2s}
.sdg-mm-spot__dot[aria-current="true"]{width:22px;opacity:1}
.sdg-mm-spot__dot:focus-visible{outline:2px solid var(--sdg-mm-panel-hover,#e32c2b);outline-offset:2px}
.sdg-mm .sdg-mm-spot__all{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;color:var(--sdg-mm-panel-fg,#fff);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.sdg-mm .sdg-mm-spot__all:hover{color:var(--sdg-mm-panel-hover,#e32c2b)}
.sdg-mm__col:has(> .sdg-mm-spot){padding-left:28px;border-left:1px solid var(--sdg-mm-panel-line,#2a2a2a)}
/* a spotlight with more columns after it (a row of pattern pictures) keeps the right side from top to bottom, so the
   next row sits under the lists beside it and the panel stays low enough for a laptop screen */
.sdg-mm__col:has(> .sdg-mm-spot):not(:last-child){grid-row:span 2}

/* ---------- brands: letters and logos ---------- */
.sdg-mm-az{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px}
.sdg-mm-az button,.sdg-mm-az button:hover,.sdg-mm-az button:focus{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;border-radius:6px;font-size:13px;font-weight:600;color:inherit;opacity:.7;cursor:pointer;transition:background-color .15s,color .15s,opacity .15s}
.sdg-mm-az button:hover{opacity:1}
.sdg-mm-az button[aria-pressed="true"]{background:var(--sdg-mm-az-on-bg,#fff);color:var(--sdg-mm-az-on-fg,#000)}
.sdg-mm-az button:disabled{opacity:.2;cursor:default;background:none}
.sdg-mm-az button:focus-visible{outline:2px solid #e32c2b;outline-offset:1px}
.sdg-mm-brands__grid{display:grid;grid-template-columns:repeat(var(--cols,8),minmax(0,1fr));gap:12px}
.sdg-mm-brands__grid li[hidden]{display:none}
.sdg-mm-brands__grid.is-new li{animation:sdg-mm-fade .22s ease both}
@keyframes sdg-mm-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sdg-mm-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;border-radius:8px;overflow:hidden;background:#111;outline:1px solid rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:600;text-align:center;text-decoration:none;transition:outline-color .15s,transform .2s var(--sdg-mm-ease)}
.sdg-mm-logo:hover{outline:2px solid var(--sdg-mm-panel-hover,#e32c2b);transform:translateY(-2px)}
.sdg-mm-logo__img{display:block;width:100%;height:100%;object-fit:contain}

/* brand search: our name or the original brand */
.sdg-mm-bsearch{display:flex;align-items:center;gap:10px;height:46px;margin:0 0 12px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);transition:box-shadow .15s,background-color .15s}
.sdg-mm-bsearch:focus-within{background:rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.sdg-mm-bsearch input[type=search],.sdg-mm-bsearch input[type=search]:focus{all:unset;flex:1;min-width:0;height:46px;font-size:16px;color:#fff}
.sdg-mm-bsearch input::placeholder{color:rgba(255,255,255,.55)}
.sdg-mm .sdg-mm-bsearch{max-width:520px}
.sdg-mm-bsearch__none{margin:6px 0 0;font-size:14px;opacity:.7}
.sdg-mm-brands__grid li{position:relative}
.sdg-mm-logo__real{display:none;margin-top:6px;font-size:12px;font-weight:600;text-align:center;opacity:.75}
.sdg-mm-brands.is-searching .sdg-mm-logo__real{display:block}
.sdg-mm-brands.is-searching .sdg-mm-az{opacity:.45}

/* ---------- promo card ---------- */
.sdg-mm-promo{position:relative;display:block;overflow:hidden;border-radius:14px;color:#fff;text-decoration:none;background:#111;min-height:200px}
.sdg-mm-promo__img{display:block;width:100%;height:100%;min-height:200px;object-fit:cover;transition:transform .5s var(--sdg-mm-ease)}
.sdg-mm-promo:hover .sdg-mm-promo__img{transform:scale(1.04)}
.sdg-mm-promo__body{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:4px;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.sdg-mm-promo__body strong{font-size:18px}
.sdg-mm-promo__body em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- the phone menu button ---------- */
.sdg-mm__burger,.sdg-mm__burger:hover,.sdg-mm__burger:focus{all:unset;box-sizing:border-box;display:none;align-items:center;justify-content:center;width:48px;height:48px;color:var(--sdg-mm-color,#fff);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sdg-mm-burgerwrap{display:flex;justify-content:flex-end}

/* phones and tablets: the menu button on the left, where its drawer slides in from, the bag on the right, the logo in
   the middle (David, 16 Oct 2026). The header's own columns are put in this order by what they hold, in CSS, so nothing
   moves after the page has loaded; the header itself is not edited. */
@media (max-width:1024px){
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger){flex-wrap:nowrap!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column{flex:0 0 auto}
	/* the logo's column keeps the theme's padding (10 px): without it the header lost 16 px and the logo touched its edges */
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:not(:has(.elementor-widget-image)) > .elementor-widget-wrap{padding:0!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.sdg-mm__burger){order:-2;width:52px!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.sdg-mm__burger) > .elementor-widget-wrap{justify-content:flex-start}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.sdg-mm__burger) .elementor-widget{width:auto!important}
	body.sdg-mm-ph-left .sdg-mm-burgerwrap{justify-content:flex-start}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-search-form){order:-1;width:44px!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-search-form) > .elementor-widget-wrap{justify-content:center}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-image){order:0;flex:1 1 0%;width:auto!important;min-width:0}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-image) > .elementor-widget-wrap{justify-content:center}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-image) .elementor-widget-image{width:100%;text-align:center}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-image) .elementor-widget-image img{width:var(--sdg-mm-ph-logo,100%)!important;max-width:100%!important;height:auto!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-woocommerce-menu-cart){order:2;width:96px!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-woocommerce-menu-cart) > .elementor-widget-wrap{justify-content:flex-end;flex-wrap:nowrap;padding-right:0!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-woocommerce-menu-cart) .elementor-widget-woocommerce-menu-cart{width:auto!important}
	/* without the search (it is the first thing in the menu): the menu button alone on the left, as wide as the bag's side */
	body.sdg-mm-ph-nosearch .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-search-form){display:none!important}
	body.sdg-mm-ph-nosearch .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.sdg-mm__burger){width:96px!important}
}
/* small phones (iPhone SE, 320 px): narrower sides and less padding beside the logo, so it keeps the size it has in the
   theme's order (about 150 px) instead of 108 px; the dog of Dog Profiles sits closer to the bag (pack.css) */
@media (max-width:360px){
	body.sdg-mm-ph-nosearch .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.sdg-mm__burger),
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-woocommerce-menu-cart){width:80px!important}
	body.sdg-mm-ph-left:not(.sdg-mm-ph-nosearch) .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.sdg-mm__burger){width:44px!important}
	body.sdg-mm-ph-left:not(.sdg-mm-ph-nosearch) .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-search-form){width:36px!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-image) > .elementor-widget-wrap{padding:10px 4px!important}
	body.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.elementor-widget-woocommerce-menu-cart) > .elementor-widget-wrap{padding-right:4px!important}
}
.sdg-mm-burgerwrap .sdg-mm__burger{display:none}
.sdg-mm__bars{display:flex;flex-direction:column;gap:6px;width:32px}
.sdg-mm__bars i{display:block;height:4px;border-radius:2px;background:currentColor;transition:transform .2s var(--sdg-mm-ease)}
.sdg-mm__burger:hover .sdg-mm__bars i:nth-child(2){transform:translateX(4px)}
.sdg-mm__burger:focus-visible{outline:2px solid #e32c2b;outline-offset:2px;border-radius:6px}
/* one set of icons in the phone header (PhoneHeader.php prints the shapes and sizes): the menu button's lines, the bag and
   the search drawn over by a mask in one weight and size; their boxes and the bag's count stay Elementor's. Dog
   Profiles draws its dog the same way (--sdg-mm-hi-paw). */
@media (max-width:1024px){
	body.sdg-mm-hi .sdg-mm__bars{width:calc(var(--sdg-mm-hi-size,24px) * .84);gap:calc(var(--sdg-mm-hi-size,24px) / 4 - var(--sdg-mm-hi-w,2.4px))}
	body.sdg-mm-hi .sdg-mm__bars i{height:var(--sdg-mm-hi-w,2.4px);border-radius:var(--sdg-mm-hi-w,2.4px)}
	/* the lines start as far from the left edge as the bag ends from the right one */
	body.sdg-mm-hi.sdg-mm-ph-left .elementor-container:has(> .elementor-column .sdg-mm__burger) > .elementor-column:has(.sdg-mm__burger) > .elementor-widget-wrap{padding-left:3px!important}
	body.sdg-mm-hi .elementor-container:has(> .elementor-column .sdg-mm__burger) .elementor-menu-cart__toggle .elementor-button-icon svg{fill:transparent!important;background:var(--toggle-button-icon-color,currentColor);width:var(--sdg-mm-hi-size,24px)!important;height:var(--sdg-mm-hi-size,24px)!important;-webkit-mask:var(--sdg-mm-hi-cart) center/contain no-repeat;mask:var(--sdg-mm-hi-cart) center/contain no-repeat}
	body.sdg-mm-hi .elementor-container:has(> .elementor-column .sdg-mm__burger) .elementor-search-form__toggle svg{fill:transparent!important;background:var(--e-search-form-toggle-color,currentColor);width:var(--sdg-mm-hi-size,24px)!important;height:var(--sdg-mm-hi-size,24px)!important;-webkit-mask:var(--sdg-mm-hi-search) center/contain no-repeat;mask:var(--sdg-mm-hi-search) center/contain no-repeat}
	/* the header stays on top by the browser itself (PhoneHeader::print_sticky): what is above it scrolls away */
	html.sdg-ph-sticky .elementor-location-header{position:sticky;top:calc(0px - var(--sdg-ph-top,0px));z-index:99}
}
@media (min-width:601px) and (max-width:782px){html.sdg-ph-sticky body.admin-bar .elementor-location-header{top:calc(46px - var(--sdg-ph-top,0px))}}
@media (min-width:783px) and (max-width:1024px){html.sdg-ph-sticky body.admin-bar .elementor-location-header{top:calc(32px - var(--sdg-ph-top,0px))}}
/* computers: the shop menu's row stays on top (PhoneHeader::print_sticky), what is above it scrolls away */
@media (min-width:1025px){html.sdg-dh-sticky .elementor-location-header{position:sticky;top:calc(0px - var(--sdg-dh-top,0px));z-index:99}html.sdg-dh-sticky body.admin-bar .elementor-location-header{top:calc(32px - var(--sdg-dh-top,0px))}}

/* ---------- the drawer ---------- */
.sdg-mmd{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--sdg-mmd-fg,#191919);overflow:hidden;font-size:var(--sdg-mmd-size,16px)}
.sdg-mmd:not([open]){display:none}
.sdg-mmd::backdrop{background:rgba(0,0,0,0);transition:background-color .26s ease}
.sdg-mmd.is-in::backdrop{background:rgba(0,0,0,.45)}
.sdg-mmd__sheet{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;width:min(var(--sdg-mmd-w,420px),calc(100vw - 56px));height:100%;background:var(--sdg-mmd-bg,#fff);box-shadow:8px 0 40px rgba(0,0,0,.18);transform:translateX(-100%);transition:transform .3s var(--sdg-mm-ease);padding-bottom:env(safe-area-inset-bottom)}
.sdg-mmd[data-side="right"] .sdg-mmd__sheet{left:auto;right:0;transform:translateX(100%);box-shadow:-8px 0 40px rgba(0,0,0,.18)}
.sdg-mmd.is-in .sdg-mmd__sheet{transform:none}
.sdg-mmd.is-dragging .sdg-mmd__sheet{transition:none}
.sdg-mmd__head{display:flex;align-items:center;gap:8px;padding:10px 12px 8px calc(8px + env(safe-area-inset-left));flex:none}
.sdg-mmd .sdg-mmd__close,.sdg-mmd .sdg-mmd__close:hover,.sdg-mmd .sdg-mmd__close:focus{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;color:inherit;cursor:pointer;transition:background-color .15s}

.sdg-mmd__search{flex:1;display:flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 14px;border-radius:999px;background:#f2f2f2;color:#6d6d6d;transition:box-shadow .15s}
.sdg-mmd__search:focus-within{box-shadow:0 0 0 2px var(--sdg-mmd-accent,#191919)}
.sdg-mmd .sdg-mmd__search input[type=search]{all:unset;flex:1;min-width:0;height:44px;font-size:16px;color:var(--sdg-mmd-fg,#191919)}
.sdg-mmd__search input::placeholder{color:#8a8a8a}
.sdg-mmd__tabs{position:relative;display:flex;flex:none;gap:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none;padding:0 6px;border-bottom:1px solid #ececec;scroll-behavior:smooth} /* sideways only: a finger moving up or down on the tabs never moves them (David, 16 Oct 2026) */
.sdg-mmd__tabs::-webkit-scrollbar{display:none}
.sdg-mmd .sdg-mmd__tab,.sdg-mmd .sdg-mmd__tab:hover,.sdg-mmd .sdg-mmd__tab:focus{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;height:50px;padding:0 13px;font-size:15px;font-weight:600;color:#7a7a7a;white-space:nowrap;cursor:pointer;transition:color .2s ease;-webkit-tap-highlight-color:transparent}
.sdg-mmd .sdg-mmd__tab[aria-selected="true"]{color:var(--sdg-mmd-accent,#191919);font-weight:700}

.sdg-mmd .sdg-mmd__tab:focus-visible{outline:2px solid #e32c2b;outline-offset:-6px;border-radius:8px}
.sdg-mmd__ink{position:absolute;left:0;bottom:0;height:3px;width:var(--w,0);border-radius:3px 3px 0 0;background:var(--sdg-mmd-accent,#191919);transform:translateX(var(--x,0));transition:transform .3s var(--sdg-mm-ease),width .3s var(--sdg-mm-ease)}
.sdg-mmd__body{position:relative;flex:1;min-height:0;overflow:hidden}
.sdg-mmd__pane{position:absolute;inset:0;overflow:hidden}
.sdg-mmd__pane[hidden]{display:none}
.sdg-mmd__pane.is-enter{animation:sdgMmdFade .22s ease both}
@keyframes sdgMmdFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sdg-mmd__level{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 28px;background:var(--sdg-mmd-bg,#fff);transition:transform .3s var(--sdg-mm-ease),opacity .3s ease;-webkit-overflow-scrolling:touch}
.sdg-mmd__level[hidden]{display:none}
.sdg-mmd__level.is-right{transform:translateX(100%)}
.sdg-mmd__level.is-under{transform:translateX(-24%);opacity:.6}
.sdg-mmd .sdg-mmd__back,.sdg-mmd .sdg-mmd__back:hover,.sdg-mmd .sdg-mmd__back:focus{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;min-height:48px;padding:0 16px;font-size:14px;font-weight:600;color:#6d6d6d;cursor:pointer}

.sdg-mmd__title{margin:0;padding:2px 18px 8px;font-size:22px;font-weight:700;line-height:1.2}
.sdg-mmd .sdg-mmd__row,.sdg-mmd .sdg-mmd__row:hover,.sdg-mmd .sdg-mmd__row:focus{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:6px 16px 6px 18px;color:inherit;font-size:var(--sdg-mmd-size,16px);font-weight:500;line-height:1.25;cursor:pointer;text-decoration:none;transition:background-color .15s ease;-webkit-tap-highlight-color:transparent}
.sdg-mmd .sdg-mmd__row:active{background:var(--sdg-mmd-hover,#f6f3ef)}
.sdg-mmd .sdg-mmd__row[aria-current]{font-weight:700}
.sdg-mmd .sdg-mmd__row.is-all,.sdg-mmd .sdg-mmd__row.is-bold{font-weight:700}
.sdg-mmd .sdg-mmd__row:focus-visible{outline:2px solid #e32c2b;outline-offset:-3px;border-radius:8px}
.sdg-mmd__label{flex:1;min-width:0}
.sdg-mmd__chev{display:inline-flex;color:#9a9a9a}
.sdg-mmd__head + *{margin-top:0}
.sdg-mmd p.sdg-mmd__head{display:block;margin:14px 0 2px;padding:0 18px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.sdg-mmd p.sdg-mmd__head a{color:inherit;text-decoration:none}
.sdg-mmd__tiles{padding:10px 16px 14px;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}
.sdg-mmd .sdg-mm__tile{font-size:13px}
.sdg-mmd .sdg-mm__tile .sdg-mm-ico:not(.is-named){width:64px;height:64px}
.sdg-mmd .sdg-mm-row{padding:6px 0 4px}
.sdg-mmd .sdg-mm-row__head{padding:0 18px;margin-bottom:10px}
.sdg-mmd .sdg-mm-row__title{font-size:16px}
.sdg-mmd .sdg-mm-row__all{color:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.sdg-mmd .sdg-mm-row__strip{gap:12px;padding:0 18px 4px;scroll-padding-left:18px;min-height:228px}
.sdg-mmd .sdg-mm-card{flex-basis:148px}
.sdg-mmd .sdg-mm-row__strip[aria-busy="true"]::before{height:148px}
.sdg-mmd .sdg-mm-brands{padding:8px 14px}
.sdg-mmd .sdg-mm-az{--sdg-mm-az-on-bg:#191919;--sdg-mm-az-on-fg:#fff}
.sdg-mmd .sdg-mm-az{color:#191919}
.sdg-mmd .sdg-mm-brands__grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px}
.sdg-mmd .sdg-mm-logo{outline-color:rgba(0,0,0,.06)}
.sdg-mmd .sdg-mm-promo{margin:8px 14px}
.sdg-mmd__foot{display:flex;flex-wrap:wrap;justify-content:space-around;flex:none;border-top:1px solid #ececec;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.sdg-mmd__foot a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;color:#6d6d6d;font-size:14px;text-decoration:none}

html.sdg-mmd-open,html.sdg-mmd-open body{overflow:hidden}

/* a dark drawer (black like the panels, David 14 Oct 2026): lines, fields and muted texts follow its background */
.sdg-mmd[data-tone="dark"] .sdg-mmd__sheet{box-shadow:8px 0 40px rgba(0,0,0,.5)}
.sdg-mmd[data-tone="dark"] .sdg-mmd__search{background:#1a1a1a;color:#9a9a9a}
.sdg-mmd[data-tone="dark"] .sdg-mmd__search input::placeholder{color:#8a8a8a}
.sdg-mmd[data-tone="dark"] .sdg-mmd__tabs{border-bottom-color:#262626}
.sdg-mmd[data-tone="dark"] .sdg-mmd__tab{color:#9a9a9a}
.sdg-mmd[data-tone="dark"] .sdg-mmd__back{color:#a3a3a3}
.sdg-mmd[data-tone="dark"] .sdg-mmd__chev{color:#7a7a7a}
.sdg-mmd[data-tone="dark"] p.sdg-mmd__head{color:#8f8f8f}
.sdg-mmd[data-tone="dark"] .sdg-mmd__hr{border-top-color:#262626}
.sdg-mmd[data-tone="dark"] .sdg-mm-az{color:#fff;--sdg-mm-az-on-bg:#fff;--sdg-mm-az-on-fg:#000}
.sdg-mmd[data-tone="dark"] .sdg-mm-logo{outline-color:rgba(255,255,255,.1)}
.sdg-mmd[data-tone="dark"] .sdg-mmd__foot{border-top-color:#262626}
.sdg-mmd[data-tone="dark"] .sdg-mmd__foot a{color:#a3a3a3}
.sdg-mmd[data-tone="dark"] .sdg-mm-row__btn{background:#fff;color:#191919}
.sdg-mmd[data-tone="dark"] .sdg-mm-fit__chip{border-color:#3a3a3a}
.sdg-mmd[data-tone="dark"] .sdg-mm-fit__chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:#000}

.sdg-mmd[data-tone="light"] .sdg-mm-bsearch{background:#f2f2f2;color:#6d6d6d}
.sdg-mmd[data-tone="light"] .sdg-mm-bsearch:focus-within{box-shadow:0 0 0 2px #191919}
.sdg-mmd[data-tone="light"] .sdg-mm-bsearch input[type=search]{color:#191919}
.sdg-mmd[data-tone="light"] .sdg-mm-bsearch input::placeholder{color:#8a8a8a}
.sdg-mmd .sdg-mm-bsearch{margin:4px 0 12px}

/* ---------- Your dog (Fit) inside the menu ---------- */
.sdg-mm-fit{padding:12px 18px}
.sdg-mm .sdg-mm-fit{padding:0}
.sdg-mm-fit__title{margin:0 0 6px;font-size:16px;font-weight:700}
.sdg-mm-fit__hint{margin:0 0 12px;font-size:14px;line-height:1.45;opacity:.75}
.sdg-mm-fit__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.sdg-mm-fit__chip,.sdg-mm-fit__chip:hover,.sdg-mm-fit__chip:focus{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid #d7d7d7;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.sdg-mm-fit__chip:hover{border-color:currentColor}
.sdg-mm-fit__chip[aria-pressed="true"]{background:#191919;border-color:#191919;color:#fff}
.sdg-mm .sdg-mm-fit__chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:#000}
.sdg-mm-fit__chip.is-add{border-style:dashed;font-weight:500;opacity:.8}
.sdg-mm-fit__cta,.sdg-mm-fit__cta:hover,.sdg-mm-fit__cta:focus{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 18px;border-radius:999px;background:#cab29f;color:#191919;font-size:15px;font-weight:700;text-align:center;cursor:pointer;transition:background-color .15s}
.sdg-mm-fit__cta:hover{background:#a48878}
.sdg-mm-fit__links{display:flex;gap:16px;margin-top:10px;font-size:14px}
.sdg-mm-fit__links a,.sdg-mm-fit__links button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.sdg-mm-fit__chip:focus-visible,.sdg-mm-fit__cta:focus-visible,.sdg-mm-fit__links a:focus-visible,.sdg-mm-fit__links button:focus-visible{outline:2px solid #e32c2b;outline-offset:2px}

/* a date window: hidden until the script has checked it (the page is cached, the clock is the shopper's) */
.sdg-mm [data-from]:not(.is-on),.sdg-mm [data-to]:not(.is-on),.sdg-mmd [data-from]:not(.is-on),.sdg-mmd [data-to]:not(.is-on){display:none!important}

.sdg-mm-ribbon{position:fixed;left:12px;bottom:12px;z-index:100020;padding:8px 14px;border-radius:999px;background:#191919;color:#fff;font:600 13px/1.2 Montserrat,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .sdg-mm *,.sdg-mmd *,.sdg-mmd::backdrop{transition:none!important;animation:none!important}
}

/* a row without an icon in a list where the others have one: its text lines up with theirs */
.sdg-mm__list:has(> li > .sdg-mm__item .sdg-mm-ico) > li > .sdg-mm__item:not(:has(.sdg-mm-ico))::before{content:"";flex:none;width:var(--sdg-mm-ico-w,34px)}
.sdg-mmd__list:has(.sdg-mmd__row .sdg-mm-ico) > li > .sdg-mmd__row:not(:has(.sdg-mm-ico))::before{content:"";flex:none;width:var(--sdg-mmd-ico-w,32px)}
/* hover only where there is a mouse: on a phone a tapped row, tab or button kept its hover look after the tap */
@media (hover:hover){.sdg-mmd .sdg-mmd__row:hover{background:var(--sdg-mmd-hover,#f6f3ef)}.sdg-mmd .sdg-mmd__close:hover{background:var(--sdg-mmd-hover,#f6f3ef)}.sdg-mmd .sdg-mmd__tab:hover{color:var(--sdg-mmd-accent,#191919)}.sdg-mmd .sdg-mmd__back:hover{color:var(--sdg-mmd-fg,#191919)}.sdg-mmd__foot a:hover{color:var(--sdg-mmd-fg,#191919)}.sdg-mmd[data-tone="dark"] .sdg-mmd__close:hover{background:#1a1a1a}}
