/* Gerado por mxd-design-system/build-css.sh. Não edite aqui: edite tokens.css, project/components/bundle.css ou theme.css. */
/* MXD Conceito — tokens.css (gerado de tokens.json) */
:root {
  /* color */
  --black: #0e0e0e;
  --black-raised: #1c1c1c;
  --on-black: #ffffff;
  --on-black-muted: #b3b3b3;
  --line-on-black: #333333;
  --surface: #ffffff;
  --surface-sunken: #f5f5f5;
  --line: #e5e5e5;
  --line-strong: #8a8a8a;
  --ink: #0e0e0e;
  --text: #313131;
  --muted: #666666;
  --pix: #007a3d;
  --pix-bright: #009e4f;
  --pix-tint: #e8f5ee;
  --danger: #b3261e;
  /* shadow */
  --shadow-pop: 0 8px 24px rgba(14, 14, 14, 0.12);
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  /* radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-pill: 999px;
  /* layout */
  --container: 1280px;
  --gutter: 16px;
  --font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  /* v2: tipografia condensada, movimento e textura */
  --stretch-tight: 62%;
  --stretch-semi: 88%;
  --display-xl: clamp(56px, 11vw, 168px);
  --display-lg: clamp(40px, 6.4vw, 96px);
  --display-md: clamp(32px, 4vw, 56px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: .35s;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mxd-t-display-xl { font-family: var(--font-sans); font-size: var(--display-xl); line-height: .86; font-weight: 900; font-stretch: var(--stretch-tight); text-transform: uppercase }
.mxd-t-display-lg { font-family: var(--font-sans); font-size: var(--display-lg); line-height: .86; font-weight: 900; font-stretch: var(--stretch-tight); text-transform: uppercase }
.mxd-t-display { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
.mxd-t-h1 { font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; }
.mxd-t-h2 { font-family: var(--font-sans); font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -0.01em; }
.mxd-t-h3 { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 800; }
.mxd-t-body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.mxd-t-body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.mxd-t-card-name { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.mxd-t-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; }
.mxd-t-button { font-family: var(--font-sans); font-size: 14px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; }
.mxd-t-price { font-family: var(--font-sans); font-size: 22px; line-height: 24px; font-weight: 800; }
.mxd-t-price-lg { font-family: var(--font-sans); font-size: 32px; line-height: 36px; font-weight: 800; }
/* MXD Conceito — bundle.css
   Folha única de componentes. Depende só das variáveis de tokens.css.
   Sem JS obrigatório: carrosséis usam scroll-snap, sanfonas usam <details>. */

/* ---------- base ---------- */
.mxd, .mxd *, .mxd *::before, .mxd *::after { box-sizing: border-box }
.mxd { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
:where(.mxd a) { color: inherit }
:where(.mxd img) { display: block; max-width: 100%; height: auto }
.mxd :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.mxd .mxd-on-black :focus-visible, .mxd.mxd-on-black :focus-visible { outline-color: var(--on-black) }
.mxd-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter) }
.mxd-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.mxd-icon--sm { width: 16px; height: 16px }
.mxd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.mxd-label { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase }
/* poço de imagem: reserva o espaço antes da foto chegar (CLS zero) */
.mxd-ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background: var(--surface-sunken); color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase }
.mxd-ph > img { width: 100%; height: 100%; object-fit: cover }

/* ---------- Button ---------- */
.mxd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font: 700 14px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s }
.mxd-btn:hover { background: var(--surface); color: var(--ink) }
.mxd-btn--ghost { background: transparent; color: var(--ink) }
.mxd-btn--ghost:hover { background: var(--ink); color: var(--surface) }
.mxd-btn--inverse { background: var(--on-black); border-color: var(--on-black); color: var(--black) }
.mxd-btn--inverse:hover { background: transparent; color: var(--on-black) }
.mxd-btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 12px }
.mxd-btn--block { display: flex; width: 100% }
.mxd-btn[disabled], .mxd-btn[aria-disabled="true"] { background: var(--surface-sunken); border-color: var(--line); color: var(--muted); cursor: not-allowed }
.mxd-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px }

/* ---------- Badge ---------- */
.mxd-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap }
.mxd-badge--outline { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.mxd-badge--pix { background: var(--pix-tint); color: var(--pix) }

/* ---------- Rating ---------- */
.mxd-rating { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--muted) }
.mxd-rating__stars { --rate: 5; font-size: 14px; letter-spacing: 1px; background: linear-gradient(90deg, var(--ink) calc(var(--rate) / 5 * 100%), var(--line-strong) 0); -webkit-background-clip: text; background-clip: text; color: transparent }

/* ---------- Price ---------- */
.mxd-price { display: grid; gap: var(--space-1); font-variant-numeric: tabular-nums }
.mxd-price__pix { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) }
.mxd-price__pix strong { font-weight: 800; font-size: 22px; line-height: 24px; color: var(--ink) }
.mxd-price__list { font-size: 13px; line-height: 18px; color: var(--muted) }
.mxd-price__list s { margin-right: var(--space-1) }
.mxd-price__list b { color: var(--text); font-weight: 700 }
.mxd-price__inst { font-size: 13px; line-height: 18px; color: var(--muted) }
.mxd-price__inst b { color: var(--text) }
.mxd-price--lg .mxd-price__pix strong { font-size: 32px; line-height: 36px }
.mxd-price--lg .mxd-price__list, .mxd-price--lg .mxd-price__inst { font-size: 15px; line-height: 22px }

/* ---------- ProductCard ---------- */
.mxd-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; background: var(--surface) }
.mxd-card__media { position: relative; display: block; overflow: hidden; background: var(--surface-sunken); aspect-ratio: 1 / 1 }
.mxd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s }
.mxd-card__media img + img { position: absolute; inset: 0; opacity: 0 }
@media (hover: hover) { .mxd-card:hover .mxd-card__media img + img { opacity: 1 } }
.mxd-card__flags { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1) }
.mxd-card__fav { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer }
.mxd-card__fav[aria-pressed="true"] .mxd-icon { fill: currentColor }
.mxd-card__body { display: grid; gap: var(--space-2); flex: 1; align-content: start }
.mxd-card__name { margin: 0; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px }
.mxd-card__name a { text-decoration: none }
.mxd-card__name a::after { content: ""; position: absolute; inset: 0 }
.mxd-card .mxd-btn, .mxd-card__fav { position: relative; z-index: 2 }
.mxd-card__fav { position: absolute }
.mxd-card--soldout .mxd-card__media img, .mxd-card--soldout .mxd-ph { opacity: .45 }

/* ---------- ProductShelf ---------- */
.mxd-shelf { display: grid; gap: var(--space-4); content-visibility: auto; contain-intrinsic-size: auto 560px }
.mxd-shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4) }
.mxd-shelf__title { margin: 0; font-weight: 800; font-size: 22px; line-height: 26px; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink) }
.mxd-shelf__sub { margin: 0; color: var(--muted); font-size: 15px }
.mxd-shelf__more { margin-left: auto; font-size: 13px }
.mxd-shelf__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--space-4)) / 5); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-1) }
.mxd-shelf__track::-webkit-scrollbar { display: none }
.mxd-shelf__track > * { scroll-snap-align: start }
.mxd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-4) }
@media (max-width: 1023px) { .mxd-shelf__track { grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3.2) } .mxd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 639px) { .mxd-shelf__track { grid-auto-columns: calc((100% - var(--space-3)) / 2.15); gap: var(--space-3) } .mxd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3) } }

/* ---------- Header ---------- */
.mxd-header { background: var(--black); color: var(--on-black) }
.mxd-header__row { display: flex; align-items: center; gap: var(--space-6); min-height: 72px }
.mxd-header__logo { flex: none; font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; text-decoration: none }
.mxd-header__logo img { height: 48px; width: auto }
.mxd-search { position: relative; flex: 1; min-width: 0 }
.mxd-search input { width: 100%; height: 44px; padding: 0 48px 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font-sans) }
.mxd-search input::placeholder { color: var(--muted) }
.mxd-search button { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer }
.mxd-header__actions { display: flex; align-items: center; gap: var(--space-4); flex: none }
.mxd-header__action { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-1); border: 0; background: none; color: var(--on-black); font: 400 13px/16px var(--font-sans); text-decoration: none; text-align: left; cursor: pointer }
.mxd-header__action b { display: block; font-weight: 700 }
.mxd-header__action small { color: var(--on-black-muted); font-size: 12px }
.mxd-header__count { position: absolute; top: 0; left: 16px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--on-black); color: var(--black); font-weight: 700; font-size: 11px; line-height: 18px; text-align: center }
.mxd-header__burger { display: none }
/* Central de atendimento: popover no hover/foco (desktop). Conteúdo vem de /partial/components/sac.
   O padding-top do pop é a "ponte" entre o link e o cartão, para o mouse não perder o hover. */
.mxd-help { position: relative }
.mxd-help__pop { position: absolute; top: 100%; right: 0; z-index: 60; width: 320px; padding-top: var(--space-2); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear .18s }
.mxd-help__pop > * { padding: var(--space-6); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop) }
.mxd-help__pop::before { content: ""; position: absolute; top: 2px; right: 56px; width: 12px; height: 12px; background: var(--surface); transform: rotate(45deg) }
@media (hover: hover) and (min-width: 900px) {
  .mxd-help:is(:hover, :focus-within) .mxd-help__pop { visibility: visible; opacity: 1; transform: none; transition-delay: 0s }
}
.mxd-help__loading { margin: 0; color: var(--muted); font-size: 13px }
.mxd-help__body { display: grid; gap: var(--space-4) }
.mxd-help__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.mxd-help__item { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none }
.mxd-help__item > svg { flex: none; width: 24px; height: 24px }
.mxd-help__item span { display: grid; min-width: 0 }
.mxd-help__item small { color: var(--muted); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase }
.mxd-help__item b { overflow-wrap: anywhere; font-weight: 700; font-size: 15px; line-height: 20px }
.mxd-help__item:hover b { text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 899px) {
  .mxd-header__row { flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); min-height: 0 }
  .mxd-header__burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--on-black) }
  .mxd-header__logo { margin-right: auto }
  .mxd-header__action span { display: none }
  .mxd-search { order: 9; flex-basis: 100% }
}

/* ---------- NavMenu ---------- */
.mxd-nav { position: relative; background: var(--black); border-top: 1px solid var(--line-on-black); color: var(--on-black) }
.mxd-nav__list { display: flex; align-items: stretch; gap: var(--space-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none }
.mxd-nav__link { display: flex; align-items: center; gap: var(--space-1); min-height: 48px; padding: 0 var(--space-3); color: var(--on-black); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent }
.mxd-nav__link:hover, .mxd-nav__link[aria-expanded="true"], .mxd-nav__link[aria-current="page"] { border-bottom-color: var(--on-black) }
.mxd-nav__panel { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop) }
.mxd-nav__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6); padding-block: var(--space-6) }
.mxd-nav__cols h3 { margin: 0 0 var(--space-2); color: var(--ink) }
.mxd-nav__cols ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none }
.mxd-nav__cols a { text-decoration: none }
.mxd-nav__cols a:hover { text-decoration: underline }

/* ---------- HeroBanner ---------- */
.mxd-hero { position: relative; background: var(--surface-sunken) }
.mxd-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none }
.mxd-hero__track::-webkit-scrollbar { display: none }
.mxd-hero__slide { flex: 0 0 100%; text-decoration: none; scroll-snap-align: start; aspect-ratio: 1920 / 560 }
.mxd-hero__slide .mxd-ph, .mxd-hero__slide img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover }
.mxd-hero__dots { position: absolute; left: 0; right: 0; bottom: var(--space-3); display: flex; justify-content: center; gap: var(--space-2) }
.mxd-hero__dots a { width: 24px; height: 4px; background: var(--line-strong) }
.mxd-hero__dots a[aria-current="true"] { background: var(--ink) }
@media (max-width: 639px) { .mxd-hero__slide { aspect-ratio: 4 / 5 } }

/* ---------- VideoBlock ---------- */
.mxd-video { display: grid; gap: var(--space-4) }
.mxd-video__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--black); color: var(--on-black); cursor: pointer; overflow: hidden }
.mxd-video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: .8 }
.mxd-video__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--on-black); color: var(--black) }
.mxd-video__play .mxd-icon { fill: currentColor; stroke: none }
.mxd-video__cap { position: absolute; left: var(--space-4); bottom: var(--space-4); font-size: 13px; color: var(--on-black) }

/* ---------- Input ---------- */
.mxd-field { display: grid; gap: var(--space-1) }
.mxd-field > label { color: var(--ink) }
.mxd-input, .mxd-select { width: 100%; height: 48px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font-sans) }
.mxd-input::placeholder { color: var(--muted) }
.mxd-input:focus, .mxd-select:focus { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 0 }
.mxd-field--error .mxd-input { border-color: var(--danger) }
.mxd-field__msg { font-size: 13px; line-height: 18px; color: var(--muted) }
.mxd-field--error .mxd-field__msg { color: var(--danger) }
.mxd-inline { display: flex; gap: var(--space-2) }
.mxd-inline > .mxd-input { flex: 1; min-width: 0 }
.mxd-check { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer }
.mxd-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink) }
.mxd-check small { color: var(--muted); font-size: 13px }

/* ---------- Newsletter ---------- */
.mxd-news { background: var(--black); color: var(--on-black); padding-block: var(--space-8) }
.mxd-news__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8) }
.mxd-news__text { flex: 1 1 280px }
.mxd-news__text p { margin: 0; color: var(--on-black-muted) }
.mxd-news form { flex: 1 1 320px }
.mxd-news .mxd-input { border-color: var(--on-black) }

/* ---------- Footer ---------- */
.mxd-footer { background: var(--black); color: var(--on-black-muted); font-size: 14px; line-height: 20px }
.mxd-footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--space-8); padding-block: var(--space-12) var(--space-8) }
.mxd-footer h3 { margin: 0 0 var(--space-3); color: var(--on-black) }
.mxd-footer ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none }
.mxd-footer a { text-decoration: none }
.mxd-footer a:hover { color: var(--on-black); text-decoration: underline }
.mxd-footer b { color: var(--on-black) }
.mxd-footer__social { display: flex; gap: var(--space-2); margin-bottom: var(--space-6) }
.mxd-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-on-black); border-radius: var(--radius-sm); color: var(--on-black) }
.mxd-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block: var(--space-4); border-top: 1px solid var(--line-on-black); font-size: 12px; line-height: 16px }
@media (max-width: 899px) { .mxd-footer__cols { grid-template-columns: 1fr 1fr } }
@media (max-width: 539px) { .mxd-footer__cols { grid-template-columns: 1fr } }

/* ---------- WhatsAppFab ---------- */
.mxd-fab { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: var(--space-2); height: 56px; padding: 0 var(--space-4); border: 2px solid var(--on-black); border-radius: var(--radius-pill); background: var(--black); color: var(--on-black); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-pop) }
.mxd-fab--static { position: static }

/* ---------- Breadcrumb ---------- */
.mxd-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; color: var(--muted) }
.mxd-crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong) }
.mxd-crumbs a { text-decoration: none }
.mxd-crumbs a:hover { text-decoration: underline }
.mxd-crumbs [aria-current] { color: var(--ink) }

/* ---------- SizeSelector ---------- */
.mxd-sizes { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0 }
.mxd-sizes legend { display: flex; justify-content: space-between; width: 100%; padding: 0; margin-bottom: var(--space-2); color: var(--ink) }
.mxd-sizes__list { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.mxd-size { position: relative }
.mxd-size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.mxd-size span { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px }
.mxd-size input:hover + span { border-color: var(--ink) }
.mxd-size input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface) }
.mxd-size input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px }
.mxd-size--off span { border-style: dashed; color: var(--muted); font-weight: 400; text-decoration: line-through }
.mxd-notify { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface-sunken) }
.mxd-notify p { margin: 0; font-size: 13px; line-height: 18px }

/* ---------- QuantityStepper ---------- */
.mxd-qty { display: inline-flex; align-items: stretch; height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden }
.mxd-qty button { width: 44px; border: 0; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer }
.mxd-qty button:hover { background: var(--surface-sunken) }
.mxd-qty input { width: 48px; border: 0; border-inline: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: center; font: 700 16px/1 var(--font-sans); -moz-appearance: textfield }
.mxd-qty input::-webkit-outer-spin-button, .mxd-qty input::-webkit-inner-spin-button { -webkit-appearance: none }

/* ---------- ShippingCalc ---------- */
.mxd-ship { display: grid; gap: var(--space-3) }
.mxd-ship__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.mxd-ship__list li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums }
.mxd-ship__list b { color: var(--ink) }
.mxd-ship__list span { color: var(--muted) }

/* ---------- Accordion (parcelas, descrição, filtros) ---------- */
.mxd-acc { border-top: 1px solid var(--line) }
.mxd-acc:last-of-type { border-bottom: 1px solid var(--line) }
.mxd-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 52px; color: var(--ink); cursor: pointer; list-style: none }
.mxd-acc > summary::-webkit-details-marker { display: none }
.mxd-acc > summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1 }
.mxd-acc[open] > summary::after { content: "–" }
.mxd-acc__body { padding-bottom: var(--space-4) }
.mxd-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.mxd-table td { padding: var(--space-2) 0; border-top: 1px solid var(--line) }
.mxd-table td:last-child { text-align: right; color: var(--muted) }

/* ---------- ProductGallery ---------- */
.mxd-gallery { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3) }
.mxd-gallery__thumbs { display: grid; gap: var(--space-2); align-content: start; margin: 0; padding: 0; list-style: none }
.mxd-gallery__thumb { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: var(--surface-sunken); cursor: pointer }
.mxd-gallery__thumb[aria-current="true"] { border: 2px solid var(--ink) }
.mxd-gallery__thumb .mxd-icon { position: absolute; inset: 0; margin: auto; color: var(--ink); fill: currentColor; stroke: none }
.mxd-gallery__main { position: relative }
.mxd-gallery__main .mxd-card__flags { top: var(--space-3); left: var(--space-3) }
@media (max-width: 639px) { .mxd-gallery { grid-template-columns: 1fr } .mxd-gallery__thumbs { order: 2; grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto } }

/* ---------- BuyBox ---------- */
.mxd-buybox { display: grid; gap: var(--space-6); min-width: 0 }
.mxd-buybox__title { margin: 0; font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: -.02em; color: var(--ink); text-wrap: balance }
.mxd-buybox__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 13px; color: var(--muted) }
.mxd-buybox__cta { display: flex; gap: var(--space-2) }
.mxd-buybox__cta .mxd-btn { flex: 1 }
.mxd-buybox__fav { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer }
.mxd-pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); align-items: start }
@media (max-width: 899px) { .mxd-pdp { grid-template-columns: 1fr; gap: var(--space-6) } }
/* barra fixa de compra no mobile */
.mxd-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line) }
.mxd-buybar .mxd-btn { flex: 1 }
.mxd-buybar--static { position: static }

/* ---------- Reviews ---------- */
.mxd-reviews { display: grid; gap: var(--space-6) }
.mxd-reviews__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) }
.mxd-reviews__score { font-weight: 800; font-size: 40px; line-height: 44px; color: var(--ink) }
.mxd-review { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--line) }
.mxd-review p { margin: 0 }
.mxd-review small { color: var(--muted); font-size: 13px }

/* ---------- Listing: toolbar, filtros, paginação ---------- */
.mxd-listing { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); align-items: start }
@media (max-width: 899px) { .mxd-listing { grid-template-columns: 1fr } .mxd-listing > .mxd-filters { display: none } }
.mxd-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-block: 1px solid var(--line) }
.mxd-toolbar__title { margin: 0; font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink) }
.mxd-toolbar__count { color: var(--muted); font-size: 13px }
.mxd-toolbar__ctrl { display: flex; align-items: center; gap: var(--space-2) }
.mxd-toolbar .mxd-select { width: auto; height: 40px; font-size: 14px }
.mxd-filters { display: grid }
.mxd-filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4) }
.mxd-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-3); border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer }
.mxd-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none }
.mxd-pages a, .mxd-pages span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none }
.mxd-pages a:hover { border-color: var(--ink) }
.mxd-pages [aria-current="page"] { background: var(--ink); color: var(--surface) }
.mxd-pages [aria-disabled="true"] { color: var(--muted) }

/* ---------- MiniCart ---------- */
.mxd-cart { display: flex; flex-direction: column; width: 100%; max-width: 400px; background: var(--surface); box-shadow: var(--shadow-pop) }
.mxd-cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink) }
.mxd-cart__head h2 { margin: 0; font-weight: 800; font-size: 16px; line-height: 20px; text-transform: uppercase }
.mxd-cart__head button { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px; border: 0; background: none; color: var(--ink); cursor: pointer }
.mxd-cart__items { display: grid; margin: 0; padding: 0 var(--space-4); list-style: none }
.mxd-cart__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--line) }
.mxd-cart__item p { margin: 0; font-size: 14px; line-height: 20px }
.mxd-cart__item small { color: var(--muted); font-size: 13px }
.mxd-cart__line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2) }
.mxd-cart__line b { color: var(--ink); font-variant-numeric: tabular-nums }
.mxd-cart .mxd-qty { height: 36px }
.mxd-cart .mxd-qty button { width: 36px }
.mxd-cart .mxd-qty input { width: 36px; font-size: 14px }
.mxd-cart__foot { display: grid; gap: var(--space-3); padding: var(--space-4) }
.mxd-cart__total { display: flex; justify-content: space-between; color: var(--ink); font-weight: 800; font-size: 16px }
.mxd-cart__note { margin: 0; font-size: 13px; color: var(--pix) }

/* ==========================================================================
   v2 — "Fábrica de rua": tipografia condensada, fitas, seções pretas com grão
   ========================================================================== */

/* ---------- Display + eyebrow ---------- */
.mxd-display { margin: 0; font-weight: 900; font-stretch: var(--stretch-tight); font-size: var(--display-lg); line-height: .86; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink) }
.mxd-display--xl { font-size: var(--display-xl) }
.mxd-display--md { font-size: var(--display-md) }
.mxd-outline { color: transparent; -webkit-text-stroke: 1.5px var(--ink) }
.mxd-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.mxd-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor }

/* ---------- Seção preta com grão ---------- */
.mxd-dark { position: relative; isolation: isolate; background: var(--black); color: var(--on-black) }
.mxd-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); pointer-events: none }
.mxd-dark .mxd-display, .mxd-dark .mxd-card__name, .mxd-dark .mxd-price__pix strong { color: var(--on-black) }
.mxd-dark .mxd-outline { -webkit-text-stroke-color: var(--on-black) }
.mxd-dark .mxd-eyebrow, .mxd-dark .mxd-price__list, .mxd-dark .mxd-price__inst, .mxd-dark .mxd-rating { color: var(--on-black-muted) }
.mxd-dark .mxd-price__list b, .mxd-dark .mxd-price__inst b { color: var(--on-black) }
.mxd-dark .mxd-card { background: transparent }
.mxd-dark .mxd-card__media { background: var(--black-raised) }
.mxd-dark .mxd-rating__stars { background: linear-gradient(90deg, var(--on-black) calc(var(--rate) / 5 * 100%), var(--line-on-black) 0); -webkit-background-clip: text; background-clip: text }
.mxd-dark .mxd-btn { background: var(--on-black); border-color: var(--on-black); color: var(--black) }
.mxd-dark .mxd-btn:hover { background: transparent; color: var(--on-black) }
.mxd-dark .mxd-btn--ghost { background: transparent; color: var(--on-black) }
.mxd-dark .mxd-badge--pix { background: var(--pix-bright); color: var(--on-black) }
.mxd-dark :focus-visible { outline-color: var(--on-black) }

/* ---------- Tape (fita corrida; substitui a AnnouncementBar) ---------- */
.mxd-tape { overflow: hidden; background: var(--black); color: var(--on-black); border-block: 1px solid var(--line-on-black) }
.mxd-tape--light { background: var(--surface); color: var(--ink); border-color: var(--ink) }
.mxd-tape--tilt { transform: rotate(-2deg) scale(1.02); margin-block: var(--space-6) }
.mxd-tape a { color: inherit }
.mxd-tape__run { display: flex; width: max-content; animation: mxd-run 32s linear infinite }
.mxd-tape:hover .mxd-tape__run, .mxd-tape:focus-within .mxd-tape__run { animation-play-state: paused }
.mxd-tape__run ul { display: flex; align-items: center; gap: var(--space-8); margin: 0; padding: var(--space-3) var(--space-4); list-style: none }
.mxd-tape__run li { display: flex; align-items: center; gap: var(--space-8); white-space: nowrap; font-weight: 800; font-stretch: var(--stretch-tight); font-size: 20px; line-height: 1; letter-spacing: .04em; text-transform: uppercase }
.mxd-tape__run li::after { content: "✦"; font-size: 14px; color: var(--pix-bright) }
.mxd-tape--announce { min-height: 33px }
.mxd-tape--announce .mxd-tape__run li { font-size: 13px; font-stretch: 100%; font-weight: 700; letter-spacing: .1em }
.mxd-tape--announce .mxd-tape__run ul { padding-block: var(--space-2) }
@keyframes mxd-run { to { transform: translateX(-50%) } }

/* ---------- Header / NavMenu v2 ---------- */
@media (min-width: 900px) { .mxd-header__row { gap: var(--space-8) } }
.mxd-header__logo img { height: 52px }
.mxd-header .mxd-search input { border-radius: var(--radius-pill); background: var(--black-raised); color: var(--on-black); padding-left: var(--space-6); box-shadow: inset 0 0 0 1px var(--line-on-black); transition: box-shadow .2s, background-color .2s }
.mxd-header .mxd-search input::placeholder { color: var(--on-black-muted) }
.mxd-header .mxd-search input:focus { outline: none; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--on-black) }
.mxd-header .mxd-search button { right: var(--space-1); color: var(--on-black) }
.mxd-header .mxd-search input:focus ~ button { color: var(--ink) }
.mxd-header__count { background: var(--pix-bright); color: var(--on-black) }
.mxd-nav__list { justify-content: center; gap: var(--space-2) }
.mxd-nav__link { position: relative; border-bottom: 0; font-stretch: var(--stretch-semi) }
.mxd-nav__link::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 10px; height: 2px; background: var(--on-black); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out) }
.mxd-nav__link:hover::after, .mxd-nav__link[aria-current="page"]::after, .mxd-nav__link[aria-expanded="true"]::after { transform: scaleX(1) }
.mxd-nav__link--hot { margin-block: var(--space-2); min-height: 32px; border-radius: var(--radius-sm); background: var(--on-black); color: var(--black) }
.mxd-nav__link--hot::after { display: none }
@media (max-width: 1100px) { .mxd-nav__list { justify-content: flex-start } }

/* ---------- Botão redondo, "ver tudo" e seta que desliza ---------- */
.mxd-round { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid currentColor; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, transform var(--dur) var(--ease-out) }
.mxd-round:hover { background: var(--ink); color: var(--surface) }
.mxd-round[disabled] { opacity: .3; cursor: default; background: transparent; color: var(--ink) }
.mxd-dark .mxd-round { color: var(--on-black) }
.mxd-dark .mxd-round:hover { background: var(--on-black); color: var(--black) }
.mxd-more { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: inherit; text-decoration: none; white-space: nowrap }
.mxd-more .mxd-icon, .mxd-btn .mxd-icon { transition: transform var(--dur) var(--ease-out) }
.mxd-more:hover .mxd-icon, .mxd-btn:hover .mxd-icon { transform: translateX(4px) }

/* ---------- HeroBanner v2: contador, barra e setas ---------- */
.mxd-hero__ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) max(var(--gutter), (100% - var(--container)) / 2 + var(--gutter)); pointer-events: none }
.mxd-hero__count { font-weight: 800; font-stretch: var(--stretch-tight); font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums }
.mxd-hero__count span { color: var(--muted) }
.mxd-hero__bar { flex: 1; max-width: 240px; height: 2px; background: var(--line-strong) }
.mxd-hero__bar i { display: block; height: 100%; background: var(--ink); transition: width var(--dur) var(--ease-out) }
.mxd-hero__arrows { display: flex; gap: var(--space-2); margin-left: auto; pointer-events: auto }
.mxd-hero__arrows .mxd-round { background: var(--surface) }
.mxd-hero__arrows .mxd-round:hover { background: var(--ink) }
@media (max-width: 639px) { .mxd-hero__ui { padding-block: var(--space-3) } .mxd-hero__arrows .mxd-round { width: 40px; height: 40px } }

/* ---------- Stamp (selo giratório) ---------- */
.mxd-stamp { position: relative; flex: none; display: grid; place-items: center; width: 112px; height: 112px; border-radius: var(--radius-pill); background: var(--black); color: var(--on-black); box-shadow: var(--shadow-pop) }
.mxd-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: mxd-spin 18s linear infinite }
.mxd-stamp text { font: 800 10px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; fill: currentColor }
.mxd-stamp b { font-weight: 900; font-stretch: var(--stretch-tight); font-size: 28px; line-height: 1; letter-spacing: -.02em }
@keyframes mxd-spin { to { transform: rotate(1turn) } }

/* ---------- BenefitsBar v2 (régua preta) ---------- */
.mxd-benefits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 auto; padding: 0; list-style: none }
.mxd-benefit { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-6) var(--space-4); border-left: 1px solid var(--line-on-black); transition: background-color .2s }
.mxd-benefit:first-child { border-left: 0 }
.mxd-benefit:hover { background: var(--black-raised) }
.mxd-benefit .mxd-icon { grid-row: span 2; width: 32px; height: 32px }
.mxd-benefit b, .mxd-benefit a { align-self: end; font-weight: 900; font-stretch: var(--stretch-tight); font-size: 20px; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--on-black); text-decoration: none }
.mxd-benefit a::after { content: ""; position: absolute; inset: 0 }
.mxd-benefit small { align-self: start; color: var(--on-black-muted); font-size: 13px; line-height: 18px; white-space: nowrap }
.mxd-benefit--pix .mxd-icon, .mxd-benefit--pix b, .mxd-benefit--pix a { color: var(--pix-bright) }
@media (max-width: 899px) { .mxd-benefits { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none } .mxd-benefit { scroll-snap-align: start } }

/* ---------- Seção e cabeçalho de seção ---------- */
.mxd-section { padding-block: var(--space-12) }
@media (min-width: 1024px) { .mxd-section { padding-block: var(--space-16) } }
.mxd-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-8) }
.mxd-head__title { display: grid; gap: var(--space-3) }
.mxd-head__title sup { margin-left: var(--space-2); font-size: .32em; vertical-align: top; color: var(--muted); -webkit-text-stroke: 0 }
.mxd-head__aside { display: flex; align-items: center; gap: var(--space-4) }
.mxd-head__aside p { max-width: 28ch; margin: 0; color: var(--muted) }
.mxd-dark .mxd-head__aside p, .mxd-dark .mxd-head__title sup { color: var(--on-black-muted) }
@media (max-width: 899px) { .mxd-head { grid-template-columns: 1fr } .mxd-head__aside p, .mxd-head__aside .mxd-round { display: none } }

/* ---------- ProductCard v2 ---------- */
.mxd-card__media img { transition: opacity .3s, transform .6s var(--ease-out) }
@media (hover: hover) { .mxd-card:hover .mxd-card__media img { transform: scale(1.04) } }
.mxd-shelf__track { counter-reset: mxd-card }
.mxd-shelf__track > .mxd-card { counter-increment: mxd-card }
.mxd-shelf__track > .mxd-card .mxd-card__media::after { content: counter(mxd-card, decimal-leading-zero); position: absolute; right: var(--space-3); bottom: var(--space-2); z-index: 1; font-weight: 900; font-stretch: var(--stretch-tight); font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none; transition: opacity .2s }
.mxd-card__quick { position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); z-index: 3; display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease-out) }
.mxd-card__quick p { margin: 0; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink) }
.mxd-card__quick div { display: flex; flex-wrap: wrap; gap: var(--space-1) }
.mxd-card__quick button { flex: 1 0 36px; height: 36px; padding: 0 var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 700 13px var(--font-sans); cursor: pointer }
.mxd-card__quick button:hover { background: var(--ink); border-color: var(--ink); color: var(--surface) }
.mxd-card__quick button[disabled] { border-style: dashed; color: var(--muted); text-decoration: line-through; cursor: not-allowed; background: var(--surface) }
@media (hover: hover) {
  .mxd-card:hover .mxd-card__quick, .mxd-card:focus-within .mxd-card__quick { opacity: 1; transform: none }
  .mxd-card:hover .mxd-card__media::after, .mxd-card:focus-within .mxd-card__media::after { opacity: 0 }
}
@media (hover: none) { .mxd-card__quick { display: none } }
.mxd-card .mxd-card__flags .mxd-badge:not(.mxd-badge--outline):not(.mxd-badge--pix) { height: 28px; font-stretch: var(--stretch-tight); font-size: 15px; font-weight: 900; clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)) }
.mxd-card .mxd-price__pix strong { font-stretch: var(--stretch-semi) }

/* ---------- ProductShelf v2: 4 por tela, setas e progresso ---------- */
.mxd-shelf__track { grid-auto-columns: calc((100% - 3 * var(--space-6)) / 4); gap: var(--space-6) }
@media (max-width: 1023px) { .mxd-shelf__track { grid-auto-columns: calc((100% - 2 * var(--space-4)) / 2.6); gap: var(--space-4) } }
@media (max-width: 639px) { .mxd-shelf__track { grid-auto-columns: 72%; gap: var(--space-3) } }
.mxd-progress { height: 2px; margin-top: var(--space-6); background: var(--line) }
.mxd-progress i { display: block; width: 25%; height: 100%; background: var(--ink); transition: transform .15s linear }
.mxd-dark .mxd-progress { background: var(--line-on-black) }
.mxd-dark .mxd-progress i { background: var(--on-black) }

/* ---------- FeatureShelf: produto herói + grade ---------- */
.mxd-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6) }
.mxd-feature { align-items: start }
.mxd-feature__hero { position: sticky; top: calc(var(--space-16) * 2 + var(--space-2)); display: block; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--black-raised); color: var(--on-black) }
.mxd-feature__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out) }
.mxd-feature__hero:hover img { transform: scale(1.04) }
.mxd-feature__hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-8) var(--space-6) var(--space-6); background: linear-gradient(transparent, color-mix(in srgb, var(--black) 85%, transparent)) }
.mxd-feature__hero .mxd-display { color: var(--on-black) }
.mxd-feature__hero .mxd-eyebrow { color: var(--on-black-muted) }
.mxd-feature__hero .mxd-price__pix strong { color: var(--on-black) }
.mxd-feature__hero a::after { content: ""; position: absolute; inset: 0 }
.mxd-feature__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4) }
@media (max-width: 899px) { .mxd-feature { grid-template-columns: 1fr } .mxd-feature__hero { position: relative; top: 0 } }

/* ---------- CategoryTiles v2 (editoriais) ---------- */
.mxd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) }
.mxd-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--black); color: var(--on-black); text-decoration: none }
.mxd-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .8s var(--ease-out), opacity .3s }
.mxd-tile:hover img { transform: scale(1.06); opacity: 1 }
.mxd-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--black) 80%, transparent)) }
.mxd-tile__no { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--black); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .16em }
.mxd-tile__name { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: var(--space-2) }
.mxd-tile__name b { font-weight: 900; font-stretch: var(--stretch-tight); font-size: clamp(28px, 3.2vw, 44px); line-height: .9; text-transform: uppercase }
.mxd-tile .mxd-round { flex: none; width: 40px; height: 40px; color: var(--on-black) }
.mxd-tile:hover .mxd-round { background: var(--on-black); color: var(--black); transform: rotate(-45deg) }
@media (max-width: 899px) { .mxd-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none } .mxd-tile { scroll-snap-align: start } }

/* ---------- Manifesto ---------- */
.mxd-manifesto__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-12) }
.mxd-manifesto__title { font-stretch: var(--stretch-semi); font-size: clamp(44px, 8.5vw, 128px); line-height: .9; letter-spacing: -.02em }
.mxd-manifesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-12); align-items: center }
.mxd-manifesto__text { max-width: 46ch; margin: 0; color: var(--on-black-muted); font-size: 18px; line-height: 28px }
.mxd-manifesto__more { margin: var(--space-8) 0 0 }
.mxd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-8) 0 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--line-on-black); list-style: none }
.mxd-stats b { display: block; margin-bottom: var(--space-1); font-weight: 900; font-stretch: var(--stretch-semi); font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--on-black) }
.mxd-stats span { color: var(--on-black-muted); font-size: 13px }
@media (max-width: 899px) { .mxd-manifesto { grid-template-columns: 1fr; gap: var(--space-8) } }

/* ---------- Newsletter v2 ---------- */
.mxd-news { padding-block: var(--space-12) }
.mxd-news__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: end }
.mxd-news .mxd-display { color: var(--on-black); font-size: clamp(36px, 5.2vw, 72px); white-space: nowrap }
.mxd-news .mxd-input { height: 56px; border: 0; border-bottom: 2px solid var(--on-black); border-radius: 0; background: transparent; color: var(--on-black); font-size: 18px; padding-inline: 0 }
.mxd-news .mxd-input::placeholder { color: var(--on-black-muted) }
.mxd-news .mxd-input:focus { outline: none; border-bottom-color: var(--pix-bright) }
@media (max-width: 899px) { .mxd-news__row { grid-template-columns: 1fr } }

/* ---------- Footer v2: assinatura ao fundo ---------- */

/* Créditos: plataforma e desenvolvimento */
.mxd-footer__company { display: grid; gap: var(--space-1) }
.mxd-footer__credits { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6) }
.mxd-footer__credit { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: 12px; color: var(--on-black-muted) }
.mxd-footer__credit a { display: flex; align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-on-black); border-radius: var(--radius-sm); background: var(--black-raised); transition: border-color .2s }
.mxd-footer__credit a:hover { border-color: var(--on-black-muted) }
.mxd-footer__credit img { height: 16px; width: auto; filter: brightness(0) invert(1); opacity: .7; transition: opacity .2s }
.mxd-footer__credit a:hover img { opacity: 1 }
@media (max-width: 899px) { .mxd-footer__legal { flex-direction: column; align-items: flex-start } }

@media (prefers-reduced-motion: reduce) {
  .mxd-tape__run, .mxd-stamp svg { animation: none }
  .mxd * { transition: none !important; scroll-behavior: auto !important }
}

/* Bandeiras de pagamento */
.mxd-footer .mxd-footer__brands { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none }
.mxd-footer__brands img { display: block; width: 48px; height: 30px; border-radius: var(--radius-sm) }
.mxd-footer__brand { display: inline-flex; align-items: center; gap: var(--space-1); height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap }
.mxd-footer__brand--pix { color: var(--pix) }

/* ---------- Listagem v2 (categoria, marca, busca) ---------- */
.mxd-listing-head { padding-block: var(--space-6) var(--space-12) }
.mxd-listing-head__title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8) }
.mxd-listing-head__title > p { flex-basis: 100% }
.mxd-listing-head__title sup { margin-left: var(--space-2); font-size: .32em; vertical-align: top; color: var(--on-black-muted); -webkit-text-stroke: 0 }
.mxd-listing-head__brand { height: 56px; width: auto; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface) }
.mxd-dark .mxd-crumbs { color: var(--on-black-muted) }
.mxd-dark .mxd-crumbs li + li::before { color: var(--line-on-black) }
.mxd-dark .mxd-crumbs [aria-current] { color: var(--on-black) }
@media (max-width: 639px) {
  .mxd-crumbs li:not(:nth-last-child(2)) { display: none }
  .mxd-crumbs li:nth-last-child(2)::before { content: "‹"; margin-right: var(--space-1) }
}
.mxd-listing { padding-block: var(--space-8) var(--space-16) }
.mxd-listing__main { display: grid; align-content: start; gap: var(--space-6); min-width: 0 }
.mxd-toolbar { padding-block: 0 var(--space-3); border-top: 0 }
.mxd-toolbar__ctrl .mxd-btn .mxd-icon { width: 16px; height: 16px }
@media (min-width: 900px) { .mxd-toolbar__filter { display: none } }
.mxd-filters__chips { align-items: center; margin: 0 }
.mxd-chip { text-decoration: none }
.mxd-chip:hover { background: var(--ink); color: var(--surface) }
.mxd-filters__clear { font-size: 13px }
.mxd-swatch { flex: none; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--swatch, var(--line)); box-shadow: inset 0 0 0 1px var(--line-strong) }
.mxd-check small { margin-left: auto }
.mxd-check--off { opacity: .45; cursor: not-allowed }
.mxd-acc__body.mxd-sizes__list { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.mxd-filters .mxd-acc:first-child { border-top: 0 }
.mxd-pagination { margin-top: var(--space-8) }
.mxd-pages a, .mxd-pages span { gap: var(--space-1) }

/* FilterPanel: o mesmo <dialog> é coluna fixa no desktop e gaveta no celular */
dialog.mxd-filterbox { width: 100% }
.mxd-filterbox__foot { flex: none; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface) }
@media (min-width: 900px) {
  dialog.mxd-filterbox { position: static; z-index: auto; display: block; width: auto; min-width: 0; height: auto; max-height: none; margin: 0; padding: 0; overflow: visible; background: transparent; box-shadow: none }
  dialog.mxd-filterbox .mxd-drawer__head, .mxd-filterbox__foot { display: none }
  dialog.mxd-filterbox .mxd-drawer__body { padding: 0; overflow: visible }
}

/* Lista vazia e texto da categoria */
.mxd-empty { display: grid; justify-items: start; gap: var(--space-4); padding-block: var(--space-16) }
.mxd-empty p { margin: 0; max-width: 46ch }
.mxd-about { padding-block: var(--space-12); border-top: 1px solid var(--line) }
.mxd-about__text { max-width: 65ch; margin-top: var(--space-4); color: var(--text) }
.mxd-about__text :where(p, ul) { margin: 0 0 var(--space-3) }

/* Sugestões da busca no header */
.mxd-suggest { display: grid; gap: var(--space-6); padding-inline: var(--space-4) }
.mxd-suggest__group { display: grid; gap: var(--space-2) }
.mxd-suggest .mxd-label { margin: 0; color: var(--muted) }
.mxd-suggest ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none }
.mxd-suggest__terms a { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; color: var(--ink); text-decoration: none }
.mxd-suggest__terms a:hover { text-decoration: underline }
.mxd-suggest__terms .mxd-icon { color: var(--muted) }
.mxd-suggest__products a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-1); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px }
.mxd-suggest__products a:hover { background: var(--surface-sunken) }
.mxd-suggest__products img { width: 56px; height: 56px; object-fit: cover; background: var(--surface-sunken) }
.mxd-suggest__products span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.mxd-suggest__products b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap }
.mxd-suggest__all { justify-self: start; margin-top: var(--space-2) }
.mxd-suggest__empty { margin: 0; padding: var(--space-6) var(--space-4); color: var(--muted) }
.mxd-listing--full { grid-template-columns: minmax(0, 1fr) }

/* FilterPanel: grupos longos (ex.: Cor) rolam por dentro */
.mxd-filters .mxd-acc__body:not(.mxd-sizes__list) { display: grid; gap: var(--space-1) }
.mxd-filters__more { display: grid; gap: var(--space-1) }
.mxd-filters__more > summary { order: 2; margin-top: var(--space-1); color: var(--ink); font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none }
.mxd-filters__more > summary::-webkit-details-marker { display: none }
.mxd-filters__more-close, .mxd-filters__more[open] .mxd-filters__more-open { display: none }
.mxd-filters__more[open] .mxd-filters__more-close { display: inline }
.mxd-filters .mxd-check { min-width: 0 }
.mxd-filters .mxd-check > span:not(.mxd-swatch) { min-width: 0; overflow-wrap: anywhere }

/* ---------- NavMenu v2: barra preta, "Categorias" em selo branco + mega menu ---------- */
.mxd-nav .mxd-nav__link--hot, .mxd-nav .mxd-nav__link--all { margin-block: var(--space-2); min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--on-black); color: var(--black) }
.mxd-nav .mxd-nav__link--all { gap: var(--space-2); margin-right: var(--space-2) }
.mxd-nav__link--hot::after, .mxd-nav__link--all::after { display: none }
.mxd-nav__item.is-open > .mxd-nav__link--all, .mxd-nav__item:has(:focus-visible) > .mxd-nav__link--all { background: var(--surface-sunken) }
.mxd-nav__panel { border-top: 1px solid var(--line) }

.mxd-mega { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: var(--space-8); min-height: 440px; padding-block: var(--space-8) }
.mxd-mega--single { grid-template-columns: minmax(0, 1fr) 280px; min-height: 0 }
.mxd-mega__list { grid-column: 1; display: grid; align-content: start; gap: 2px; margin: 0; padding: 0 var(--space-4) 0 0; border-right: 1px solid var(--line); list-style: none }
.mxd-mega__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background-color .15s, color .15s }
.mxd-mega__link .mxd-icon { opacity: .4 }
.mxd-mega__item.is-active > .mxd-mega__link, .mxd-mega__item:focus-within > .mxd-mega__link, .mxd-mega__list:not(:has(.is-active)):not(:focus-within) > .mxd-mega__item:first-child > .mxd-mega__link { background: var(--ink); color: var(--surface) }
.mxd-mega__item.is-active > .mxd-mega__link .mxd-icon, .mxd-mega__item:focus-within > .mxd-mega__link .mxd-icon { opacity: 1 }
.mxd-mega__item:not(.is-active) > .mxd-mega__link:hover { background: var(--surface-sunken) }
.mxd-mega .mxd-mega__item > .mxd-mega__pane { position: absolute; top: var(--space-8); bottom: var(--space-8); left: calc(var(--gutter) + 220px + var(--space-8)); right: calc(var(--gutter) + 280px + var(--space-8)); display: none; overflow-y: auto; scrollbar-width: none }
.mxd-mega__item.is-active > .mxd-mega__pane, .mxd-mega__list:not(:has(.is-active)):not(:focus-within) > .mxd-mega__item:first-child > .mxd-mega__pane { display: block }
.mxd-mega__list:focus-within > .mxd-mega__item:not(:focus-within) > .mxd-mega__pane { display: none }
.mxd-mega__item:focus-within > .mxd-mega__pane { display: block }
.mxd-mega__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink) }
.mxd-mega__head > div { display: grid; gap: var(--space-2) }
.mxd-mega__title { font-size: clamp(32px, 3.2vw, 48px); color: var(--ink) }
.mxd-mega__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none }
.mxd-mega__tile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: 14px; line-height: 18px; text-decoration: none; transition: border-color .15s, background-color .15s }
.mxd-mega__tile .mxd-icon { flex: none; color: var(--muted); transition: transform var(--dur) var(--ease-out), color .15s }
.mxd-mega__tile:hover, .mxd-mega__tile[aria-current="page"] { border-color: var(--ink); background: var(--surface-sunken); font-weight: 700 }
.mxd-mega__tile:hover .mxd-icon { color: var(--ink); transform: translateX(4px) }
.mxd-mega__sub { display: grid; gap: 2px; margin: var(--space-1) 0 0; padding: 0 0 0 var(--space-3); list-style: none }
.mxd-mega__sub a { color: var(--muted); font-size: 13px; text-decoration: none }
.mxd-mega__sub a:hover { color: var(--ink); text-decoration: underline }
.mxd-mega__promo { grid-column: -2; display: grid; align-content: end; justify-items: start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-sm); overflow: hidden }
.mxd-mega__promo-title { font-size: clamp(32px, 3vw, 44px); color: var(--on-black) }
.mxd-mega__promo-text { margin: 0; color: var(--on-black-muted); font-size: 14px; line-height: 20px }

/* ==========================================================================
   Página de produto v2
   ========================================================================== */
.mxd-pdp-top { padding-block: var(--space-4) var(--space-12) }
.mxd-pdp-top .mxd-breadcrumb { margin-bottom: var(--space-4) }
@media (min-width: 900px) { .mxd-buybox { position: sticky; top: calc(var(--space-16) * 2 + var(--space-4)); align-self: start } }

/* ProductGallery */
.mxd-gallery__thumbs { align-self: start }
.mxd-gallery__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover }
.mxd-gallery__main { position: relative; overflow: hidden; background: var(--surface-sunken) }
.mxd-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none }
.mxd-gallery__track::-webkit-scrollbar { display: none }
.mxd-gallery__slide { flex: 0 0 100%; aspect-ratio: 1 / 1; margin: 0; padding: 0; border: 0; background: none; scroll-snap-align: start; cursor: zoom-in }
.mxd-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover }
.mxd-gallery__slide--video { display: grid; place-items: center; background: var(--black); cursor: default }
.mxd-gallery__count { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums }
.mxd-zoom { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--surface) }
.mxd-zoom::backdrop { background: var(--surface) }
.mxd-zoom__track { display: grid; justify-items: center; gap: var(--space-2); height: 100%; overflow-y: auto; padding-block: var(--space-4) }
.mxd-zoom__track img { width: min(100%, 1200px); height: auto; background: var(--surface-sunken) }
.mxd-zoom__close { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); cursor: pointer }
html:has(.mxd-zoom[open]) { overflow: hidden }

/* BuyBox */
.mxd-buybox__head { display: grid; gap: var(--space-2) }
.mxd-buybox__head .mxd-eyebrow { text-decoration: none }
.mxd-buybox__title { font-stretch: var(--stretch-semi) }
.mxd-buybox__meta .mxd-rating { text-decoration: none }
.mxd-buybox__stock { color: var(--pix); font-weight: 700 }
.mxd-buybox__stock--off { color: var(--danger) }
.mxd-buybox__summary { display: grid; gap: var(--space-6); transition: opacity .2s }
.mxd-buybox__summary.htmx-request { opacity: .5; pointer-events: none }
.mxd-buybox__loading { display: none }
.mxd-buybox__price { display: grid; justify-items: start; gap: var(--space-3); padding-block: var(--space-4); border-block: 1px solid var(--line) }
.mxd-buybox__installments { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer }
.mxd-sizes legend { align-items: baseline; gap: var(--space-4) }
.mxd-sizes legend b { font-weight: 800 }
.mxd-sizes__chart { font-size: 13px; letter-spacing: 0; text-transform: none }
.mxd-sizes__error { margin: 0; color: var(--danger); font-size: 13px; font-weight: 700 }
.mxd-sizes.is-error .mxd-size span { border-color: var(--danger) }
.mxd-size--swatch span { min-width: 48px; padding: 0 }
.mxd-size--swatch .mxd-swatch { width: 28px; height: 28px; background: var(--swatch) }
.mxd-size.opacity-30 { opacity: .3 }
.mxd-buybox__buy { display: grid; gap: var(--space-3) }
.mxd-buybox__progressive { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--pix-tint); color: var(--pix); font-weight: 700; font-size: 13px; line-height: 18px }
.mxd-buybox__acc .mxd-acc:last-child { border-bottom: 1px solid var(--line) }
.mxd-buybox__note { margin: 0 0 var(--space-2); color: var(--muted); font-size: 14px }
.mxd-notify form { display: grid; gap: var(--space-2) }
.mxd-notify__ok { display: flex; align-items: center; gap: var(--space-2); color: var(--pix); font-weight: 700 }
.mxd-ship__help { justify-self: start; text-decoration: underline; text-underline-offset: 3px }
.mxd-ship__result:empty { display: none }
.mxd-ship__list small { grid-column: 1 / -1; color: var(--muted); font-size: 13px }
.mxd-payments__name { display: inline-flex; align-items: center; gap: var(--space-2) }

/* Barra fixa de compra (só no celular, quando o botão principal sai da tela) */
.mxd-buybar { display: none; box-shadow: var(--shadow-pop) }
@media (max-width: 899px) { .mxd-buybar:not([hidden]) { display: flex } }
.mxd-buybar__price { display: grid; line-height: 1.1 }
.mxd-buybar__price b { color: var(--ink); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums }
.mxd-buybar__price span { color: var(--pix); font-weight: 700; font-size: 12px }

/* Descrição e avaliações */
.mxd-pdp-info { display: grid; gap: var(--space-16); padding-block: var(--space-12) var(--space-16); border-top: 1px solid var(--line) }
.mxd-pdp-section__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6) }
.mxd-pdp-desc { width: 100%; max-width: 65ch; margin-inline: auto }
.mxd-pdp-desc .mxd-pdp-section__head { justify-items: center; text-align: center }
.mxd-pdp-desc__text { max-width: 65ch; margin-inline: auto; font-size: 15px; line-height: 24px }
.mxd-pdp-desc__text img { display: block; margin-inline: auto }
.mxd-pdp-desc__text :where(p, ul, ol) { margin: 0 0 var(--space-4) }
.mxd-pdp-desc__text :where(ul) { padding-left: var(--space-6); list-style: disc }
.mxd-pdp-desc__text :where(ol) { padding-left: var(--space-6); list-style: decimal }
.mxd-pdp-desc__text img { max-width: 100%; height: auto }
.mxd-reviews__sum { display: grid; grid-template-columns: auto auto minmax(0, 320px); justify-content: start; align-items: center; gap: var(--space-4) var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line) }
.mxd-reviews__score { font-stretch: var(--stretch-tight); font-size: 72px; line-height: 1 }
.mxd-reviews__meta { display: grid; gap: var(--space-1) }
.mxd-reviews__bars { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none }
.mxd-reviews__bars li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--muted) }
.mxd-reviews__bars i { height: 4px; background: linear-gradient(90deg, var(--ink) var(--bar, 0%), var(--line) 0) }
.mxd-reviews__list { display: grid }
.mxd-review__title { color: var(--ink); font-weight: 700 }
.mxd-review__photos { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; padding: 0; list-style: none }
.mxd-review__photos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm) }
.mxd-review__reply { margin-top: var(--space-2); padding: var(--space-3); border-left: 2px solid var(--ink); background: var(--surface-sunken); font-size: 14px }
.mxd-review__reply p { margin: var(--space-1) 0 0 }
#product-reviews__pagination { margin-top: var(--space-4) }
.mxd-reviews__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); background: var(--surface-sunken) }
.mxd-reviews__empty p { margin: 0; max-width: 52ch }
@media (max-width: 639px) { .mxd-reviews__sum { grid-template-columns: auto minmax(0, 1fr) } .mxd-reviews__bars { grid-column: 1 / -1 } }

/* ---------- Compre junto ("Compre pagando menos") ---------- */
.mxd-bt { display: block; padding: var(--space-8); border-radius: var(--radius-sm); overflow: hidden }
.mxd-bt__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line-on-black) }
.mxd-bt__head > div { display: grid; gap: var(--space-3) }
.mxd-bt__off { display: grid; justify-items: end; margin: 0; line-height: 1 }
.mxd-bt__off b { color: var(--pix-bright); font-weight: 900; font-stretch: var(--stretch-tight); font-size: clamp(48px, 6vw, 80px) }
.mxd-bt__off span { color: var(--on-black-muted); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase }
.mxd-bt__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-8); align-items: stretch }
.mxd-bt__items { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: var(--space-8); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none }
.mxd-bt__items::-webkit-scrollbar { display: none }
.mxd-bt__items > li { position: relative }
.mxd-bt__items > li + li::before { content: "+"; position: absolute; top: 30%; left: calc(var(--space-8) / -2); z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-left: -16px; border-radius: var(--radius-pill); background: var(--on-black); color: var(--black); font-weight: 900; font-size: 20px; line-height: 1 }
.mxd-bt__item { display: grid; gap: var(--space-3); align-content: start; transition: opacity .2s, filter .2s }
.mxd-bt__item:has(input[name="check_selected_sku"]:not(:checked)) { opacity: .45; filter: grayscale(1) }
.mxd-bt__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface) }
.mxd-bt__media img { width: 100%; height: 100%; object-fit: cover }
.mxd-bt__tag { position: absolute; top: var(--space-2); left: var(--space-2) }
.mxd-bt__check { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer }
.mxd-bt__check input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer }
.mxd-bt__check > span[aria-hidden] { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--surface); color: transparent; transition: background-color .15s, color .15s }
.mxd-bt__check input:checked + span { background: var(--ink); color: var(--surface) }
.mxd-bt__check input:focus-visible + span { outline: 2px solid var(--on-black); outline-offset: 2px }
.mxd-bt__check--fixed { display: none }
.mxd-bt__info { display: grid; gap: var(--space-2) }
.mxd-bt__name { color: var(--on-black); font-size: 14px; line-height: 20px; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.mxd-bt__name:hover { text-decoration: underline }
.mxd-bt__opts { display: flex; flex-wrap: wrap; gap: var(--space-1) }
.mxd-bt .mxd-size--sm span { min-width: 36px; height: 36px; padding: 0 var(--space-2); font-size: 13px; background: transparent; border-color: var(--line-on-black); color: var(--on-black) }
.mxd-bt .mxd-size--sm input:checked + span { background: var(--on-black); border-color: var(--on-black); color: var(--black) }
.mxd-bt .mxd-size--sm input:hover + span { border-color: var(--on-black) }
.mxd-bt__item-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; font-variant-numeric: tabular-nums }
.mxd-bt__item-price s { color: var(--on-black-muted); font-size: 13px }
.mxd-bt__item-price b { color: var(--on-black); font-weight: 800; font-size: 16px }
.mxd-bt__sum { display: grid; align-content: center; justify-items: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink) }
.mxd-bt__sum .mxd-label { margin: 0; color: var(--muted) }
.mxd-bt__sum s { color: var(--muted); font-size: 14px }
.mxd-bt__price { font-weight: 900; font-stretch: var(--stretch-tight); font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums }
.mxd-bt__sum .mxd-badge--pix { background: var(--pix-tint); color: var(--pix) }
.mxd-bt .mxd-bt__buy { margin-top: var(--space-3); background: var(--ink); border-color: var(--ink); color: var(--surface) }
.mxd-bt .mxd-bt__buy:hover { background: var(--surface); color: var(--ink) }
.mxd-bt__buy.btn-disabled, .mxd-bt__buy.htmx-request { opacity: .4; pointer-events: none }
.mxd-bt.htmx-request, .mxd-bt__form.htmx-request { opacity: .7 }
@media (max-width: 899px) {
  .mxd-bt { padding: var(--space-6) var(--space-4); margin-inline: calc(var(--gutter) * -1); border-radius: 0 }
  .mxd-bt__body { grid-template-columns: 1fr }
  .mxd-bt__items { grid-auto-columns: 62% }
  .mxd-bt__off { justify-items: start }
}
.mxd-bt__hint { display: none; margin: var(--space-2) 0 0; color: var(--danger); font-weight: 700; font-size: 13px; line-height: 18px }
.mxd-bt__sum:has(.btn-disabled) .mxd-bt__hint { display: block }
.mxd-bt .mxd-size--off span { border-style: dashed; color: var(--on-black-muted); font-weight: 400; text-decoration: line-through }
.mxd-bt .mxd-size--off.mxd-size--swatch span { opacity: .35; text-decoration: none }

/* ==========================================================================
   Carrinho v2 (gaveta + página)
   ========================================================================== */
.mxd-drawer > .mxd-cart { flex: 1; min-height: 0; max-width: none; box-shadow: none }
.mxd-cart { position: relative }
.mxd-cart__grid { display: flex; flex: 1; flex-direction: column; min-height: 0 }
.mxd-cart__body { flex: 1; min-height: 0; overflow-y: auto }
.mxd-cart__list-head, .mxd-cart__summary-title, .mxd-cart__continue, .mxd-cart__trust { display: none }
.mxd-cart__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--line) }
.mxd-cart__thumb img { display: block; width: 72px; height: 72px; object-fit: cover; background: var(--surface-sunken) }
.mxd-cart__info { display: grid; align-content: start; gap: 2px; min-width: 0 }
.mxd-cart__name { margin: 0; font-size: 14px; line-height: 20px }
.mxd-cart__name a { color: var(--ink); text-decoration: none }
.mxd-cart__name a:hover { text-decoration: underline }
.mxd-cart__info small { color: var(--muted); font-size: 13px }
.mxd-cart__info small b { color: var(--text); font-weight: 700 }
.mxd-cart__item--gift { background: var(--pix-tint) }
.mxd-cart__line { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) }
.mxd-cart__price { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums }
.mxd-cart__remove { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer }
.mxd-cart__remove span { display: none }
.mxd-cart__remove:hover { color: var(--danger) }
.mxd-cart form.htmx-request, .mxd-cart button.htmx-request { opacity: .5 }
.mxd-cart__alerts { display: grid; gap: var(--space-2) }
.mxd-cart__tool > summary { justify-content: flex-start; gap: var(--space-2) }
.mxd-cart__tool > summary::after { margin-left: auto }
.mxd-cart__totals { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0 }
.mxd-cart__totals dt, .mxd-cart__totals dd { margin: 0 }
.mxd-cart__row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums }
.mxd-cart__row--pix { color: var(--pix); font-weight: 700 }
.mxd-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums }
.mxd-cart__total dd { font-weight: 900; font-stretch: var(--stretch-tight); font-size: 32px; line-height: 1 }
.mxd-cart__note { margin: 0; color: var(--muted); font-size: 12px; line-height: 16px }
.mxd-cart__empty { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-12) var(--space-4) }
.mxd-cart__empty-text { margin: 0; color: var(--muted) }
.mxd-cart__skeleton { display: grid; gap: var(--space-4); padding: var(--space-4) }
.mxd-cart__skeleton span { display: block; height: 72px; background: var(--surface-sunken) }

/* Avisos: frete grátis, desconto progressivo, brinde */
.mxd-cart-alert { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: 13px; line-height: 18px; color: var(--text) }
.mxd-cart-alert p { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 }
.mxd-cart-alert p .mxd-icon { flex: none; margin-top: 1px }
.mxd-cart-alert b { color: var(--ink) }
.mxd-cart-alert a { color: var(--ink); font-weight: 700 }
.mxd-cart-alert__bar { display: block; height: 4px; border-radius: var(--radius-pill); background: var(--line) }
.mxd-cart-alert__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .4s var(--ease-out) }
.mxd-cart-alert--ok { background: var(--pix-tint); color: var(--pix) }
.mxd-cart-alert--ok .mxd-cart-alert__bar i { background: var(--pix) }
/* Desconto progressivo: card preto, próximo degrau em destaque e barra com os degraus marcados */
.mxd-pd { position: relative; display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--black); color: var(--on-black); overflow: hidden }
.mxd-pd::after { content: ""; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border: 1px dashed var(--line-on-black); border-radius: var(--radius-pill); pointer-events: none }
.mxd-pd__head { display: grid; gap: var(--space-1) }
.mxd-pd__eyebrow { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--on-black-muted); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase }
.mxd-pd__title { margin: 0; font-weight: 900; font-stretch: var(--stretch-tight); font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--on-black) }
.mxd-pd__title span { color: var(--on-black-muted); font-weight: 400 }
.mxd-pd__title em { display: inline-block; padding: 2px var(--space-2) 0; font-style: normal; background: var(--pix-bright); color: var(--on-black); clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)) }
.mxd-pd__track { display: grid; gap: var(--space-2); padding-top: var(--space-2) }
.mxd-pd__bar { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--black-raised); box-shadow: inset 0 0 0 1px var(--line-on-black) }
.mxd-pd__bar i { position: absolute; inset: 0 auto 0 0; width: var(--pd-progress, 0%); border-radius: inherit; background: var(--pix-bright); transition: width .5s var(--ease-out) }
.mxd-pd__steps { display: grid; grid-template-columns: repeat(var(--pd-n, 3), minmax(0, 1fr)); margin: -14px 0 0; padding: 0; list-style: none }
.mxd-pd__steps li { position: relative; display: grid; justify-items: end; gap: 2px; padding-top: 18px; text-align: right; color: var(--on-black-muted) }
.mxd-pd__steps li::before { content: ""; position: absolute; top: -4px; right: -1px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--black) }
.mxd-pd__steps li:last-child::before { right: 0 }
.mxd-pd__steps b { font-weight: 900; font-stretch: var(--stretch-tight); font-size: 20px; line-height: 1; color: inherit }
.mxd-pd__steps small { font-size: 11px; line-height: 14px }
.mxd-pd__steps .is-done { color: var(--on-black) }
.mxd-pd__steps .is-done::before { border-color: var(--pix-bright); background: var(--pix-bright) }
.mxd-pd__steps .is-next { color: var(--on-black) }
.mxd-pd__steps .is-next::before { border-color: var(--on-black); box-shadow: 0 0 0 4px rgba(255, 255, 255, .15) }
.mxd-pd__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; border-radius: var(--radius-sm); background: var(--on-black); color: var(--black); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color .2s }
.mxd-pd__cta:hover { background: var(--pix-tint) }
.mxd-pd.is-maxed .mxd-pd__title em { background: var(--pix-bright) }
@media (prefers-reduced-motion: reduce) { .mxd-pd__bar i { transition: none } }

/* Cupom */
.mxd-coupon { display: grid; gap: var(--space-2) }
.mxd-coupon__applied { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--pix); border-radius: var(--radius-sm); background: var(--pix-tint); color: var(--pix); font-size: 14px }
.mxd-coupon__applied b { letter-spacing: .06em }
.mxd-coupon__applied .mxd-link { margin-left: auto; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer }
.mxd-coupon input { text-transform: uppercase }

/* Página de carrinho */
.mxd-cart-head { padding-block: var(--space-8) var(--space-12) }
.mxd-cart-head__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6) }
.mxd-cart-head__row > div { display: grid; gap: var(--space-3) }
.mxd-cart-head sup { margin-left: var(--space-2); font-size: .32em; vertical-align: top; color: var(--on-black-muted) }
.mxd-cart-head sup:not(:empty)::before { content: "(" }
.mxd-cart-head sup:not(:empty)::after { content: ")" }
.mxd-steps { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-black-muted) }
.mxd-steps li { display: flex; align-items: center; gap: var(--space-2) }
.mxd-steps li + li::before { content: ""; width: 24px; height: 1px; margin-right: var(--space-1); background: var(--line-on-black) }
.mxd-steps b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-on-black); border-radius: var(--radius-pill) }
.mxd-steps [aria-current] { color: var(--on-black) }
.mxd-steps [aria-current] b { border-color: var(--on-black); background: var(--on-black); color: var(--black) }
.mxd-cartpage { padding-block: var(--space-8) var(--space-12) }
.mxd-cartpage .mxd-cart { max-width: none; box-shadow: none; background: transparent }
.mxd-cartpage [data-mxd-cart-link] { display: none }
.mxd-cartpage .mxd-cart__body { overflow: visible }
.mxd-cartpage .mxd-cart__continue { display: inline-flex; margin-top: var(--space-6) }
.mxd-cartpage .mxd-cart__foot { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border-radius: var(--radius-sm); background: var(--surface-sunken) }
.mxd-cartpage .mxd-cart__summary-title { display: block; margin: 0; color: var(--ink); font-weight: 900; font-stretch: var(--stretch-tight); font-size: 28px; line-height: 1; text-transform: uppercase }
.mxd-cartpage .mxd-cart-alert { background: var(--surface) }
.mxd-cartpage .mxd-cart-alert--ok { background: var(--pix-tint) }
.mxd-cartpage .mxd-cart__tool { border-color: var(--line-strong) }
.mxd-cartpage .mxd-cart__checkout { min-height: 56px; font-size: 15px }
.mxd-cartpage .mxd-cart__trust { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: 13px }
.mxd-cartpage .mxd-cart__trust li { display: flex; align-items: center; gap: var(--space-2) }
.mxd-cartpage .mxd-cart__empty { justify-items: center; padding-block: var(--space-16); text-align: center }
@media (min-width: 900px) {
  /* .mxd-cart e .mxd-cart__grid somem do layout: itens, resumo e upsell viram células da mesma grade */
  .mxd-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; gap: 0 var(--space-12); align-items: start }
  .mxd-cartpage .mxd-cart, .mxd-cartpage .mxd-cart__grid { display: contents }
  .mxd-cartpage .mxd-cart__body { grid-column: 1; grid-row: 1 }
  .mxd-cartpage .mxd-cart__foot { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--space-16) * 2 + var(--space-4)) }
  .mxd-cartpage .mxd-cart__empty, .mxd-cartpage .mxd-cart__skeleton { grid-column: 1 / -1 }
  .mxd-cartpage .mxd-cart__empty ~ .mxd-upsell, .mxd-cartpage .mxd-cart__skeleton ~ .mxd-upsell { grid-column: 1 / -1 }
  .mxd-cartpage .mxd-upsell { grid-column: 1; grid-row: 2 }
  .mxd-cartpage .mxd-cart__list-head { display: grid; grid-template-columns: minmax(0, 1fr) 140px 120px; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--ink); color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase }
  .mxd-cartpage .mxd-cart__list-head span:last-child { text-align: right }
  .mxd-cartpage .mxd-cart__items { padding: 0 }
  .mxd-cartpage .mxd-cart__item { grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-6); padding-block: var(--space-6) }
  .mxd-cartpage .mxd-cart__thumb img { width: 120px; height: 120px }
  .mxd-cartpage .mxd-cart__name { font-size: 16px; line-height: 22px; font-weight: 700 }
  .mxd-cartpage .mxd-cart__line { grid-column: 3; display: grid; grid-template-columns: 140px 120px; grid-template-rows: auto auto; align-items: center; gap: var(--space-2) var(--space-4) }
  .mxd-cartpage .mxd-cart__price { text-align: right; font-size: 18px }
  .mxd-cartpage .mxd-cart__remove { grid-column: 1; justify-self: start }
  .mxd-cartpage .mxd-cart__remove span { display: inline }
  .mxd-cartpage .mxd-qty { height: 44px }
}
@media (max-width: 899px) {
  .mxd-cart-head__row { align-items: start }
  .mxd-cartpage .mxd-cart__foot { margin-top: var(--space-6) }
  /* no celular o upsell entra entre os itens e o resumo */
  .mxd-cartpage { display: flex; flex-direction: column }
  .mxd-cartpage .mxd-cart, .mxd-cartpage .mxd-cart__grid { display: contents }
  .mxd-cartpage .mxd-cart__foot { order: 2 }
}
/* Upsell "Leve também": fila compacta colada nos itens, em caixa com borda tracejada */
.mxd-upsell { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm) }
.mxd-upsell__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4) }
.mxd-upsell__head > div { display: grid; gap: var(--space-1) }
.mxd-upsell__title { margin: 0; color: var(--ink); font-weight: 900; font-stretch: var(--stretch-tight); font-size: 28px; line-height: 1; text-transform: uppercase }
.mxd-upsell__text { margin: 0; color: var(--muted); font-size: 13px; line-height: 18px }
.mxd-upsell__arrows { display: flex; gap: var(--space-2) }
.mxd-upsell .mxd-round { width: 40px; height: 40px }
.mxd-upsell .mxd-shelf__track { grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4); gap: var(--space-4) }
.mxd-upsell .mxd-shelf__track > .mxd-card .mxd-card__media::after { font-size: 28px }
.mxd-upsell .mxd-card__name { font-size: 13px; line-height: 18px; min-height: 36px }
.mxd-upsell .mxd-card__fav { width: 32px; height: 32px }
.mxd-upsell .mxd-card__quick { padding: var(--space-2) }
.mxd-upsell .mxd-card__quick button { flex-basis: 30px; height: 30px; font-size: 12px }
.mxd-upsell .mxd-card[hidden] { display: none }
@media (max-width: 1023px) { .mxd-upsell .mxd-shelf__track { grid-auto-columns: calc((100% - 2 * var(--space-3)) / 2.6); gap: var(--space-3) } }
@media (max-width: 639px) {
  .mxd-upsell { margin-inline: calc(var(--gutter) * -1); padding: var(--space-4) var(--gutter); border-inline: 0; border-radius: 0 }
  .mxd-upsell__arrows { display: none }
  .mxd-upsell__title { font-size: 24px }
  .mxd-upsell .mxd-shelf__track { grid-auto-columns: 42%; gap: var(--space-3) }
}
/* MiniCart na gaveta: itens primeiro, a gaveta rola inteira; frete e cupom ficam na página do carrinho */
.mxd-drawer > .mxd-cart { overflow-y: auto }
.mxd-drawer .mxd-cart__body { flex: none; overflow: visible }
.mxd-drawer .mxd-cart__tool, .mxd-drawer .mxd-cart__note { display: none }
.mxd-drawer .mxd-cart__foot { position: sticky; bottom: 0; border-top: 1px solid var(--line); background: var(--surface) }
.mxd-drawer .mxd-cart__alerts { order: -1 }

/* Faixas pretas de página (listagem e carrinho): título menor e faixa mais baixa que os títulos de seção da home */
.mxd-listing-head, .mxd-cart-head { padding-block: var(--space-6) var(--space-8) }
.mxd-listing-head__title { margin-top: var(--space-4); gap: var(--space-2) var(--space-4) }
.mxd-listing-head .mxd-display, .mxd-cart-head .mxd-display { font-size: clamp(32px, 3.6vw, 52px); line-height: .95 }
.mxd-listing-head__title sup, .mxd-cart-head sup { margin-left: var(--space-2); font-size: 16px; font-stretch: 100%; font-weight: 700; letter-spacing: 0; vertical-align: super }
.mxd-cart-head__row > div { gap: var(--space-2) }
@media (max-width: 639px) {
  .mxd-listing-head, .mxd-cart-head { padding-block: var(--space-4) var(--space-6) }
  .mxd-listing-head .mxd-display, .mxd-cart-head .mxd-display { font-size: 32px }
}
button.mxd-nav__link { border: 0; font-family: inherit; cursor: pointer }
/* ---------- Tema: extensões do renderizador ----------
   Classes que o bundle não cobre e que o tema precisa (gavetas, painel do menu,
   resultados da busca, carrinho). Só tokens; nada literal. */

.mxd-icon--ph { fill: currentColor; stroke: none }
body:has(.mxd) { background: var(--surface) }

/* Newsletter: estados no lugar do formulário */
.mxd-news__msg { margin: 0; font-weight: 700 }
.mxd-news__msg[hidden] { display: none }
.mxd-news form > .mxd-label { color: var(--on-black-muted) }

/* Header: fixo no desktop; no celular a busca ocupa altura demais */
@media (min-width: 900px) { header.mxd { position: sticky; top: 0; z-index: 30 } }
/* Nada pode arrastar a página para os lados no celular: trava no html e no body (o Safari do iPhone
   ignora só no body) e no main, onde a fita inclinada da home vaza alguns pixels com a rotação */
html:has(.mxd), body:has(.mxd), main.mxd { overflow-x: clip }
.mxd-help__pop { max-width: calc(100vw - 2 * var(--gutter)) }

/* Header */
.mxd-header__logo { color: var(--on-black) }
.mxd-header__logo img { width: auto }
.mxd-header__burger { cursor: pointer }
@media (min-width: 900px) { .mxd-header__action > span { display: block } }
.mxd-header__count:empty { display: none }
.mxd-search__panel { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 50; display: none; max-height: 70vh; overflow-y: auto; padding-block: var(--space-4); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop) }
.mxd-search:focus-within .mxd-search__panel:not(:empty) { display: block }

/* NavMenu: painel abre no hover e no foco, sem JS */
.mxd-nav__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; display: none }
.mxd-nav__item.is-open > .mxd-nav__panel, .mxd-nav__item:has(:focus-visible) > .mxd-nav__panel { display: block }
html:not(.mxd-js) .mxd-nav__item:hover > .mxd-nav__panel { display: block }
.mxd-nav__item.is-open > .mxd-nav__link::after, .mxd-nav__item:has(:focus-visible) > .mxd-nav__link::after { transform: scaleX(1) }
.mxd-nav__cols a[aria-current="page"] { font-weight: 700 }
@media (max-width: 899px) { .mxd-nav { display: none } }

/* Gaveta (menu do celular e mini carrinho): <dialog> nativo */
.mxd-drawer { position: fixed; inset: 0 auto 0 0; width: min(100%, 400px); max-width: 100%; height: 100%; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden }
.mxd-drawer--end { inset: 0 0 0 auto }
.mxd-drawer[open] { display: flex; flex-direction: column }
.mxd-drawer::backdrop { background: color-mix(in srgb, var(--black) 50%, transparent) }
html:has(.mxd-drawer[open]) { overflow: hidden }
.mxd-drawer__head { display: flex; flex: none; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink) }
.mxd-drawer__head h2 { margin: 0; font-weight: 800; font-size: 16px; line-height: 20px; text-transform: uppercase }
.mxd-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; margin: calc(var(--space-3) * -1); border: 0; background: none; color: var(--ink); cursor: pointer }
.mxd-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-4) var(--space-6) }

/* Árvore de categorias na gaveta */
.mxd-tree { margin: 0; padding: 0; list-style: none }
.mxd-tree ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none }
.mxd-tree ul ul { padding: var(--space-2) 0 0 var(--space-4) }
.mxd-tree a { text-decoration: none }
.mxd-tree__link { display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--line); color: var(--ink) }
.mxd-tree > li:last-child > .mxd-tree__link { border-bottom: 1px solid var(--line) }
.mxd-tree__group { margin-top: var(--space-6); color: var(--muted) }

/* Footer */
.mxd-footer .mxd-footer__stamps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6) }
.mxd-footer__stamps img { height: 32px; width: auto; padding: var(--space-1); border-radius: var(--radius-sm); background: var(--surface) }
.mxd-footer__social + h3 { margin-top: var(--space-2) }


/* WhatsAppFab: acima da barra fixa de compra no produto */
body:has(.mxd-buybar:not(.mxd-buybar--static):not([hidden])) .mxd-fab { bottom: calc(var(--space-16) + var(--space-6) + env(safe-area-inset-bottom, 0px)) }


/* HeroBanner */
.mxd-hero__slide picture { display: block; height: 100% }

/* ProductCard: esqueleto enquanto a vitrine carrega */
.mxd-card--skeleton .mxd-card__media { background: var(--surface-sunken) }
.mxd-card--skeleton > span { display: block; height: calc(var(--space-16) * 3); background: var(--surface-sunken) }

/* Banners de vitrine */
.mxd-banners { display: grid; gap: var(--space-4) }
.mxd-banners img { width: 100% }

/* Home: espaço entre blocos claros que não usam .mxd-section */
.mxd-home__group { display: contents }
.mxd-home .mxd-banners { padding-block: var(--space-12) }
.mxd-home .mxd-tape--tilt { margin-block: var(--space-12) }

/* VideoBlock */
.mxd-video__main { max-width: calc(var(--container) * .75) }
.mxd-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.mxd-videos { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3); gap: var(--space-4); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none }
.mxd-videos::-webkit-scrollbar { display: none }
.mxd-videos > li { scroll-snap-align: start }
@media (max-width: 639px) { .mxd-videos { grid-auto-columns: 80%; gap: var(--space-3) } }

/* Vitrine: esqueleto sem número; seções fora da tela não custam layout */
.mxd-card--skeleton .mxd-card__media::after { content: none }
.mxd-home .mxd-section { content-visibility: auto; contain-intrinsic-size: auto 760px }
.mxd-news__text p { margin-top: var(--space-4) }

/* Etapas do carrinho no celular: só os números; o nome aparece apenas na etapa atual (antes vazava 95px da tela) */
@media (max-width: 639px) {
  .mxd-steps { gap: var(--space-1) }
  .mxd-steps li { font-size: 0; gap: 0 }
  .mxd-steps li + li::before { width: 16px; margin-inline: var(--space-1) }
  .mxd-steps b { font-size: 12px }
  .mxd-steps [aria-current] { gap: var(--space-2); font-size: 12px }
}

/* Oferta relâmpago: faixa preta com cronômetro em cima da vitrine */
.mxd-flash__bar { padding-block: var(--space-4); background: var(--black); border-top: 1px solid var(--line-on-black) }
.mxd-flash__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6) }
.mxd-flash__label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); background: var(--danger); color: #fff; font-weight: 900; font-stretch: var(--stretch-tight); font-size: 22px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)) }
.mxd-flash__label .mxd-icon { width: 22px; height: 22px; animation: mxd-flash-blink 1.2s steps(2, jump-none) infinite }
.mxd-flash__clock { display: flex; align-items: center; gap: var(--space-3) }
.mxd-flash__ends { color: var(--on-black-muted); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase }
.mxd-flash__units { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none }
.mxd-flash__units li { display: grid; justify-items: center; min-width: 54px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); background: var(--black-raised); box-shadow: inset 0 0 0 1px var(--line-on-black) }
.mxd-flash__units li[hidden] { display: none }
.mxd-flash__units b { color: var(--on-black); font-weight: 900; font-stretch: var(--stretch-tight); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums }
.mxd-flash__units small { color: var(--on-black-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase }
.mxd-flash .mxd-section { padding-top: var(--space-8) }
@keyframes mxd-flash-blink { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .mxd-flash__label .mxd-icon { animation: none } }
@media (max-width: 639px) {
  .mxd-flash__row { justify-content: center }
  .mxd-flash__label { font-size: 18px }
  .mxd-flash__ends { display: none }
  .mxd-flash__units li { min-width: 48px }
  .mxd-flash__units b { font-size: 26px }
}