/*
 * Local-only MOON v3 structural preview.
 * The adapter creates .moon-preview-shell; the legacy product row is hidden
 * only in this read-only preview. Production Twig/OCMOD is not touched here.
 */
:root {
  --moon-ink: #141414;
  --moon-muted: #777773;
  --moon-soft: #f4f4f1;
  --moon-line: #e7e7e3;
  --moon-line-strong: #d9d9d2;
  --moon-accent: #ef7f1a;
  --moon-accent-dark: #d96d0e;
  --moon-green: #2e8b44;
  --moon-radius: 14px;
  --moon-font: "Golos Text", "Montserrat", Arial, sans-serif;
}

html,
body {
  overflow-x: clip;
}

body.moon-preview-body {
  background: #fff;
  color: var(--moon-ink);
}

/*
 * The source theme downloads the complete 150 KB Font Awesome solid font for
 * a handful of simple product-page glyphs. On this preview the legacy icon
 * nodes are either hidden or replaced by the MOON controls, so remove their
 * font dependency altogether. Specific visible glyphs below are restored as
 * tiny inline SVG masks; no private-use Font Awesome character is left to
 * trigger the 150 KB request.
 */
body.moon-preview-body .fa,
body.moon-preview-body .fas,
body.moon-preview-body .far,
body.moon-preview-body .fab,
body.moon-preview-body [class^="fa-"],
body.moon-preview-body [class*=" fa-"] {
  font-family: var(--moon-font) !important;
}

body.moon-preview-body .fa::before,
body.moon-preview-body .fas::before,
body.moon-preview-body .far::before,
body.moon-preview-body .fab::before,
body.moon-preview-body [class^="fa-"]::before,
body.moon-preview-body [class*=" fa-"]::before {
  content: none !important;
}

body.moon-preview-body .fa-search {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='10'%20cy='10'%20r='6'%20fill='none'%20stroke='black'%20stroke-width='2'/%3E%3Cpath%20d='M15%2015l6%206'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-bars {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M3%205h18v2H3zm0%206h18v2H3zm0%206h18v2H3z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-heart {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='1.8'%20d='M12%2020.5S3%2015.2%203%208.7A4.7%204.7%200%200%201%2012%206a4.7%204.7%200%200%201%209%202.7c0%206.5-9%2011.8-9%2011.8z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-align-right {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='1.7'%20d='M4%205h16M8%2010h12M4%2015h16M8%2019h12'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-user,
body.moon-preview-body .fa-sign-in-alt,
body.moon-preview-body .fa-user-plus {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='7'%20r='3.2'%20fill='none'%20stroke='black'%20stroke-width='1.8'/%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20d='M5%2021c.7-4%203.1-6%207-6s6.3%202%207%206'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-times {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20d='M5%205l14%2014M19%205L5%2019'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-chevron-down {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M4.6%207.6%2012%2015l7.4-7.4%201.4%201.4-8.8%208.8L3.2%209z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-chevron-up {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='m3.2%2015%201.4%201.4L12%209l7.4%207.4%201.4-1.4L12%206.2z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-chevron-left {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='m14.8%203.2%201.4%201.4L9.8%2011l6.4%206.4-1.4%201.4L7%2011z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-chevron-right {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='m9.2%203.2-1.4%201.4%206.4%206.4-6.4%206.4%201.4%201.4L17%2011z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-phone,
body.moon-preview-body .fa-phone-alt {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M6.7%202.5c.5-.2%201.1%200%201.4.5l2.1%204.2c.2.5.1%201-.3%201.4L8.4%209.9a15.5%2015.5%200%200%200%205.7%205.7l1.3-1.5c.4-.4.9-.5%201.4-.3l4.2%202.1c.5.3.7.9.5%201.4l-1%203.5c-.2.7-.9%201.2-1.7%201.2C9.5%2022%202%2014.5%202%205.2c0-.8.5-1.5%201.2-1.7z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-envelope {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M3%204h18a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2zm0%202v.5l9%206.3%209-6.3V6l-9%206.3z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-map-marker {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M12%202a8%208%200%200%200-8%208c0%205.8%208%2012%208%2012s8-6.2%208-12a8%208%200%200%200-8-8zm0%2011a3%203%200%201%201%200-6%203%203%200%200%201%200%206z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-clock {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%202a8%208%200%201%201%200%2016%208%208%200%200%201%200-16zm-1%202h2v5.6l3.8%202.2-1%201.7-4.8-2.8z'/%3E%3C/svg%3E");
}

body.moon-preview-body .fa-check-circle {
  --moon-fa-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'%20fill='none'%20stroke='black'%20stroke-width='1.8'/%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='m7.5%2012%203%203%206-6'/%3E%3C/svg%3E");
}

/* This one legacy selector draws a submenu chevron on `li::after` rather
 * than on an `.fa-*` node, so the generic icon reset above cannot catch it.
 * Keep the drawer geometry but draw a CSS chevron; otherwise removing the
 * Font Awesome face would leave a tofu glyph when the menu is opened. */
body.moon-preview-body .menu__level-1-li.has-children::after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  background: none !important;
  font-family: var(--moon-font) !important;
}

body.moon-preview-body .fa-plus::before {
  content: "+" !important;
  font-family: var(--moon-font) !important;
}

body.moon-preview-body .fa-minus::before {
  content: "−" !important;
  font-family: var(--moon-font) !important;
}

body.moon-preview-body .fa-search::before,
body.moon-preview-body .fa-bars::before,
body.moon-preview-body .fa-heart::before,
body.moon-preview-body .fa-align-right::before,
body.moon-preview-body .fa-user::before,
body.moon-preview-body .fa-sign-in-alt::before,
body.moon-preview-body .fa-user-plus::before,
body.moon-preview-body .fa-times::before,
body.moon-preview-body .fa-chevron-down::before,
body.moon-preview-body .fa-chevron-up::before,
body.moon-preview-body .fa-chevron-left::before,
body.moon-preview-body .fa-chevron-right::before,
body.moon-preview-body .fa-phone::before,
body.moon-preview-body .fa-phone-alt::before,
body.moon-preview-body .fa-envelope::before,
body.moon-preview-body .fa-map-marker::before,
body.moon-preview-body .fa-clock::before,
body.moon-preview-body .fa-check-circle::before {
  content: "" !important;
  display: inline-block !important;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--moon-fa-mask) center / contain no-repeat;
  mask: var(--moon-fa-mask) center / contain no-repeat;
  font-family: inherit !important;
  vertical-align: -0.12em;
}

/* Replace the old theme modules with the reference sections mounted by the
   local adapter instead of showing a second journal/USP copy below the card. */
body.moon-preview-body .mnd-mag-shelf,
body.moon-preview-body .mnd-usp-premium,
body.moon-preview-body .mnd-global-usp {
  display: none !important;
}

/* The legacy internal-link cloud remains crawlable below the new card. Its
   wrapped mobile height is deterministic for this catalogue, so reserve it
   from the first style pass and prevent font/CSS arrival from producing a
   multi-screen CLS jump. The server adds the marker only on this exact
   product block; desktop keeps the natural compact height. */
@media (max-width: 680px) {
  body.moon-preview-body > main > .mnd-sections-container {
    min-height: max(1424px, calc(3828px - 615vw));
  }
}

/* The footer is several screens below the product card.  Its decorative
   illustration and payment sprite do not contribute to LCP, but the legacy
   stylesheet otherwise discovers both binary assets while the page is still
   above the fold.  The adapter adds `.moon-footer-ready` when the footer
   approaches the viewport and restores the exact native backgrounds then. */
body.moon-preview-body:not(.moon-footer-ready) footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 857px;
}
body.moon-preview-body:not(.moon-footer-ready) footer .subscribe::before,
body.moon-preview-body:not(.moon-footer-ready) footer .footer__payments-icon:not(img) {
  background-image: none !important;
}
body.moon-preview-body.moon-footer-ready footer .subscribe::before {
  background-image: url("/catalog/view/theme/unishop2/image/footer_image.webp") !important;
}
body.moon-preview-body.moon-footer-ready footer .footer__payments-icon:not(img) {
  background-image: url("/catalog/view/theme/unishop2/image/payment_icon_sprite.png") !important;
}

/* The previous OCMOD showcase is generated with Math.random() and is not a
   customer-review source. Keep it inert in the local preview, including the
   delayed mini-rating and modal that the legacy script may append later. */
body.moon-preview-body #mnd-premium-reviews,
body.moon-preview-body #mnd-review-modal,
body.moon-preview-body .mnd-mini-reviews-box,
body.moon-preview-body .mnd-rev-card {
  display: none !important;
}

/* Do not let the old Bootstrap card compete with the new DOM. It remains in
   the page for OpenCart's scripts and is not removed or mutated server-side. */
#product-product.moon-preview-root {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  font-family: var(--moon-font);
}

#product-product.moon-preview-root > .breadcrumb-h1,
#product-product.moon-preview-root > .row {
  display: none !important;
}

#product-product.moon-preview-root .mnd-viewers-live,
#product-product.moon-preview-root .mnd-sold-proof,
#product-product.moon-preview-root .mnd-reference-buybar,
/* The original tabs sit in the zero-sized legacy row.  Leaving the wrapper
   displayable lets late Font Awesome metrics trigger a tiny layout shift even
   though the new details tabs are already rendered by the shell. */
#product-product.moon-preview-root .product-page-tabs-wrap {
  display: none !important;
}

#product-product.moon-preview-root > .row,
#product-product.moon-preview-root > .breadcrumb-h1 {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

.moon-preview-shell {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 18px 48px 96px;
  box-sizing: border-box;
  color: var(--moon-ink);
  font-family: var(--moon-font);
}

.moon-preview-shell *,
.moon-preview-shell *::before,
.moon-preview-shell *::after {
  box-sizing: border-box;
}

.moon-crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  margin-bottom: 26px;
  overflow: hidden;
  color: #92928d;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.moon-crumbs a {
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
}

.moon-crumbs a:hover { color: var(--moon-ink); }
.moon-crumbs__sep { color: #c4c4be; }
.moon-crumbs__current { overflow: hidden; color: #4c4c48; text-overflow: ellipsis; }

.moon-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  grid-template-areas: "gallery panel" "details panel";
  grid-template-rows: auto auto;
  gap: 48px;
  align-items: start;
}
.moon-top > .moon-gallery { grid-area: gallery; min-width: 0; }
.moon-top > .moon-panel { grid-area: panel; }
.moon-top > .moon-details,
.moon-top > .moon-details-slot { grid-area: details; max-width: none; min-width: 0; }
.moon-main-col { min-width: 0; }
.moon-main-col .moon-details { max-width: none; }

.moon-gallery { min-width: 0; }

.moon-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--moon-radius);
  background: var(--moon-soft);
  /* Keep vertical page scrolling native while the hero owns horizontal
     touch gestures for the mobile photo carousel. */
  touch-action: pan-y;
}

.moon-stage__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--moon-soft);
  cursor: zoom-in;
  user-select: none;
  transition: transform .18s ease, filter .18s ease;
}
.moon-stage__image:active { transform: scale(.987); filter: brightness(.985); }

.moon-stage__image:focus-visible,
.moon-rating:focus-visible,
.moon-details__tab:focus-visible,
.moon-order-card:focus-visible {
  outline: 3px solid rgba(239, 127, 26, .38);
  outline-offset: 3px;
}

.moon-badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  color: #30302c;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 5px 14px rgba(25, 25, 22, .12);
}
.moon-stage__badges {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(78%, 390px);
}
.moon-stage__badges .moon-badge {
  position: static;
}
.moon-badge--accent {
  background: var(--moon-accent);
  border-color: var(--moon-accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(239, 127, 26, .24);
}
.moon-badge--accent::before {
  margin-right: 5px;
  color: currentColor;
  content: '✦';
  font-size: 11px;
}

.moon-stage__counter {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(20, 20, 20, .66);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: none;
}

.moon-stage__dots {
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.moon-stage__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cfcfcb;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.moon-stage__dot.is-active { background: var(--moon-ink); transform: scale(1.15); }

.moon-stage__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  transform: translateY(-50%);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--moon-ink);
  font-size: 29px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.moon-stage__arrow:hover { background: #fff; }
.moon-stage__arrow:active { transform: translateY(-50%) scale(.96); }
.moon-stage__arrow--prev { left: 16px; }
.moon-stage__arrow--next { right: 16px; }

.moon-thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #d8d8d4 transparent;
  margin-top: 12px;
}

.moon-thumb {
  flex: 1 1 0;
  max-width: 240px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--moon-line);
  border-radius: 9px;
  background: var(--moon-soft);
  cursor: pointer;
  opacity: .72;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.moon-thumb:hover { opacity: 1; transform: translateY(-1px); }
.moon-thumb.is-active { border: 2px solid var(--moon-accent); opacity: 1; }
.moon-thumb:active { transform: scale(.975); }
.moon-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.moon-thumbs::-webkit-scrollbar { height: 4px; }
.moon-thumbs::-webkit-scrollbar-track { background: transparent; }
.moon-thumbs::-webkit-scrollbar-thumb { background: #d8d8d4; border-radius: 99px; }

.moon-customer-gallery {
  margin-top: 35px;
  padding-top: 24px;
  border-top: 1px solid var(--moon-line);
}
.moon-customer-gallery__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.moon-customer-gallery__heading-wrap { min-width: 0; }
.moon-customer-gallery__head h2 {
  margin: 0;
  color: var(--moon-ink);
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.moon-customer-gallery__intro {
  max-width: 58ch;
  margin: 6px 0 0;
  color: #8a8a83;
  font-size: 12px;
  line-height: 1.5;
}
.moon-customer-gallery__count {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 6px 10px;
  border: 1px solid #eadfd4;
  border-radius: 999px;
  background: #fffaf5;
  color: var(--moon-accent-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.moon-customer-gallery__empty {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 680px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px dashed #e0d8ce;
  border-radius: 13px;
  background: linear-gradient(135deg, #fcfbf9, #fffaf5);
}
.moon-customer-gallery__empty-mark {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #eadfd4;
  border-radius: 12px;
  background: #fff;
  color: var(--moon-accent);
  font-size: 23px;
  line-height: 1;
}
.moon-customer-gallery__empty-copy { min-width: 0; }
.moon-customer-gallery__empty-copy strong {
  display: block;
  color: var(--moon-ink);
  font-size: 14px;
  font-weight: 720;
}
.moon-customer-gallery__empty-copy p {
  max-width: 58ch;
  margin: 5px 0 0;
  color: #77776f;
  font-size: 12px;
  line-height: 1.5;
}
.moon-customer-gallery__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
}
.moon-customer-gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(128px, 1fr);
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  padding: 4px 2px 9px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.moon-customer-gallery__track::-webkit-scrollbar { display: none; }
.moon-customer-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e2da;
  border-radius: 12px;
  background: #f4f3ef;
  cursor: zoom-in;
  scroll-snap-align: start;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.moon-customer-gallery__item::after {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(35, 35, 31, .62);
  color: #fff;
  content: '↗';
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
}
.moon-customer-gallery__item:hover,
.moon-customer-gallery__item:focus-visible {
  border-color: var(--moon-accent);
  box-shadow: 0 10px 26px rgba(180, 121, 65, .13);
  outline: none;
  transform: translateY(-2px);
}
.moon-customer-gallery__item:hover::after,
.moon-customer-gallery__item:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.moon-customer-gallery__item:active { transform: translateY(0) scale(.985); }
.moon-customer-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moon-customer-gallery__nav {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid #e7e1d8;
  border-radius: 50%;
  background: #fff;
  color: var(--moon-ink);
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(71, 53, 36, .07);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.moon-customer-gallery__nav:hover,
.moon-customer-gallery__nav:focus-visible {
  border-color: var(--moon-accent);
  background: #fff8f1;
  outline: none;
}
.moon-customer-gallery__nav:active { transform: scale(.95); }
.moon-customer-gallery__nav:disabled {
  cursor: default;
  opacity: .28;
  pointer-events: none;
}
.moon-customer-gallery__nav[hidden] { display: none; }

.moon-panel {
  /* Keep the full summary in normal flow. The current theme makes body and
     html separate scroll containers, which would make a sticky aside jump
     under the live header; production can enable sticky after the shell is
     moved into the final Twig grid. */
  position: static;
  min-width: 0;
  padding: 4px 0 0;
}

.moon-panel__head { margin-bottom: 15px; }
.moon-panel__heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }

.moon-eyebrow {
  margin: 0 0 11px;
  color: #979791;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.moon-title {
  max-width: 530px;
  margin: 0;
  color: var(--moon-ink);
  font-size: clamp(27px, 2.15vw, 36px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.moon-sku {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: max-content;
  padding: 3px 0;
  border: 0 !important;
  background: transparent !important;
  color: #9a9a94 !important;
  font: 500 12px/1.3 var(--moon-font);
  cursor: pointer;
}

.moon-sku:hover { color: var(--moon-ink) !important; }
.moon-sku__sep { color: #c3c3bd; }

.moon-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  margin: 12px 0 16px;
  color: #65655f;
  font-size: 13px;
  cursor: pointer;
}

.moon-rating__star { color: var(--moon-accent); font-size: 17px; }
.moon-rating strong { color: var(--moon-ink); }
.moon-rating__link { margin-left: 6px; color: #999992; font-size: 11px; }
.moon-rating:hover .moon-rating__link { color: var(--moon-accent); }
.moon-rating--demo {
  padding: 7px 10px;
  border: 1px solid #f0c996;
  border-radius: 9px;
  background: #fff9ef;
}
.moon-rating--demo .moon-rating__star,
.moon-rating--demo strong { color: #9a5b17; }
.moon-rating__demo {
  color: #9a5b17;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.moon-rating--empty {
  padding: 7px 10px;
  border: 1px dashed #d8d8d1;
  border-radius: 9px;
  background: #fafaf8;
  color: #77776f;
}
.moon-rating--empty .moon-rating__star,
.moon-rating--empty strong { color: #77776f; }
.moon-rating--empty:hover {
  border-color: var(--moon-accent);
  background: #fffaf5;
}

.moon-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  margin: 2px 0 13px;
  padding: 6px 9px;
  border: 1px solid rgba(239, 127, 26, .2);
  border-radius: 999px;
  background: rgba(239, 127, 26, .06);
  color: #6a665f;
  font-size: 10px;
  font-weight: 650;
}
.moon-social-proof .moon-icon {
  color: var(--moon-accent);
  font-size: 13px;
}

.moon-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 8px;
}

.moon-price {
  display: inline-block;
  color: var(--moon-ink);
  font-size: 33px;
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.moon-price-old {
  color: var(--moon-muted);
  font-size: 15px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: #9b9b95;
  font-variant-numeric: tabular-nums;
}

.moon-price-discount {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #fff1e5;
  color: var(--moon-accent-dark);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.moon-price__note { color: var(--moon-accent); font-size: 12px; font-weight: 700; }

.moon-availability {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 17px;
  color: var(--moon-green);
  font-size: 12px;
  font-weight: 650;
}

.moon-availability .moon-icon {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #e5f4e8;
  color: var(--moon-green);
  font-size: 11px;
}

.moon-facts {
  margin: 0 0 18px;
  padding: 13px 0;
  border-top: 1px solid var(--moon-line);
  border-bottom: 1px solid var(--moon-line);
}

.moon-fact {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 25px;
  color: #73736d;
  font-size: 12px;
  line-height: 1.35;
}

.moon-fact__label { max-width: 67%; }
.moon-fact__dots { flex: 1; min-width: 10px; border-bottom: 1px dotted #cfcfc8; transform: translateY(-3px); }
.moon-fact__value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--moon-ink);
  font-weight: 650;
  text-align: right;
}
.moon-fact__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(239, 127, 26, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .16s ease, text-decoration-color .16s ease;
}
.moon-fact__link:hover,
.moon-fact__link:focus-visible {
  color: var(--moon-accent-dark);
  text-decoration-color: currentColor;
}
.moon-info-trigger {
  display: inline-grid !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid #c8c8c0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #77776f !important;
  font: 700 11px/1 Arial, sans-serif !important;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.moon-info-trigger:hover,
.moon-info-trigger:focus-visible {
  border-color: var(--moon-accent) !important;
  background: #fff7ef !important;
  color: var(--moon-accent-dark) !important;
  outline: none;
  transform: translateY(-1px);
}

.moon-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
.moon-secondary-actions { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px; gap: 10px; margin-top: 10px; }
.moon-secondary-actions .moon-button { min-height: 46px; }
.moon-secondary-actions .moon-button--icon { padding: 0; font-size: 19px; font-weight: 400; }
.moon-preview-shell .moon-secondary-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) 46px 46px !important; gap: 8px !important; }

.moon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--moon-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--moon-ink);
  font: 700 12px/1.2 var(--moon-font);
  text-align: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

/* The live theme applies a borderless button reset after the local sheet is
   loaded. Keep the prototype controls visibly button-like without touching
   the source controls hidden underneath. */
.moon-preview-shell .moon-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--moon-line-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--moon-ink) !important;
  box-shadow: none;
}
.moon-preview-shell .moon-button--primary {
  border-color: var(--moon-accent) !important;
  background: var(--moon-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(239, 127, 26, .16) !important;
}
.moon-preview-shell .moon-button--secondary {
  border-color: var(--moon-accent) !important;
  color: var(--moon-accent-dark) !important;
}
.moon-preview-shell .moon-button--quiet {
  border-color: var(--moon-line) !important;
  color: #6f6f69 !important;
}

.moon-button:hover { transform: translateY(-1px); }
.moon-button:active { transform: translateY(1px) scale(.99); }
.moon-button:focus-visible { outline: 3px solid rgba(239, 127, 26, .28); outline-offset: 2px; }
.moon-button:disabled,
.moon-button[aria-disabled="true"] { opacity: .58; cursor: not-allowed; transform: none; }

.moon-button--primary {
  border-color: var(--moon-accent);
  background: var(--moon-accent);
  color: #fff;
  box-shadow: 0 7px 16px rgba(239, 127, 26, .16);
}

.moon-button--primary:hover { border-color: var(--moon-accent-dark); background: var(--moon-accent-dark); }
.moon-button--secondary { border-color: var(--moon-accent); color: var(--moon-accent-dark); }
.moon-button--secondary:hover { background: #fff7ef; }
.moon-button--quiet { min-height: 40px; color: #6f6f69; font-size: 12px; font-weight: 600; }

.moon-option { margin-top: 22px; }
.moon-option__heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.moon-option__label { color: var(--moon-ink); font-size: 12px; font-weight: 750; }
.moon-option__hint { color: #9a9a94; font-size: 11px; }

.moon-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.moon-swatches:not(.is-open) .moon-swatch:nth-child(n + 7) { display: none; }
.moon-swatch-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; align-items: start; }
.moon-preview-shell .moon-swatches:not(.is-open) .moon-swatch:nth-child(n + 7) { display: none !important; }
.moon-preview-shell .moon-swatches.is-open .moon-swatch { display: block !important; }
.moon-swatches-more {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border: 1px solid var(--moon-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--moon-muted) !important;
  font: 600 12px/1 var(--moon-font);
  cursor: pointer;
}
.moon-swatches-more:hover { border-color: var(--moon-ink) !important; color: var(--moon-ink) !important; }
.moon-preview-shell .moon-swatches-more { display: flex !important; min-height: 42px !important; padding: 0 12px !important; border: 1px solid var(--moon-line) !important; border-radius: 9px !important; background: #fff !important; }
.moon-preview-shell .moon-swatch-row .moon-swatches-more { width: 46px !important; min-height: 46px !important; margin-top: 0 !important; padding: 0 !important; }

.moon-swatch {
  display: block;
  overflow: hidden;
  aspect-ratio: 1.36;
  border: 1px solid var(--moon-line);
  border-radius: 7px;
  background: var(--moon-soft);
  transition: border-color .18s ease, transform .18s ease;
}

.moon-swatch:hover { border-color: var(--moon-accent); transform: translateY(-1px); }
.moon-swatch.is-active { border: 2px solid var(--moon-accent); }
.moon-swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }

.moon-order-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 19px;
  padding: 13px 14px;
  border: 1px solid #f0d2b8;
  border-radius: 11px;
  background: #fff8f1;
  color: #6a5141;
}

.moon-order-card > .moon-icon { color: var(--moon-accent); font-size: 18px; }
.moon-order-card__copy { display: grid; gap: 3px; flex: 1; }
.moon-order-card__copy strong { color: #4d3c31; font-size: 12px; }
.moon-order-card__copy span { color: #9b806b; font-size: 11px; }
.moon-order-card__arrow { color: var(--moon-accent); font-size: 20px; }
.moon-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.moon-size { display: grid; gap: 4px; min-width: 0; padding: 12px 13px 10px; border: 1px solid var(--moon-line); border-radius: 10px; color: var(--moon-ink); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.moon-size:hover { border-color: var(--moon-ink); transform: translateY(-1px); }
.moon-size.is-active { border-color: var(--moon-ink); box-shadow: inset 0 0 0 .6px var(--moon-ink); }
.moon-size strong { font-size: 13px; font-weight: 650; white-space: nowrap; }
.moon-size span { overflow: hidden; color: var(--moon-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.moon-preview-shell .moon-size-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
.moon-preview-shell .moon-size { display: grid !important; gap: 4px !important; border: 1px solid var(--moon-line) !important; border-radius: 10px !important; color: var(--moon-ink) !important; }

/* Self-contained image viewer for the MOON shell.  It is created only after
   the first click, is outside normal flow, and deliberately leaves body
   scrolling/overflow untouched.  The legacy UniShop viewer remains available
   to its hidden source DOM, but visible shell controls never invoke it. */
.moon-local-lightbox {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 20, 18, .88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
  overscroll-behavior: contain;
  touch-action: none;
}
.moon-local-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.moon-local-lightbox__frame {
  display: grid;
  max-width: min(96vw, 1440px);
  max-height: 94vh;
  place-items: center;
}
.moon-local-lightbox__image {
  display: block;
  width: auto;
  max-width: 96vw;
  height: auto;
  max-height: 94vh;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .42);
  object-fit: contain;
  user-select: none;
}
.moon-local-lightbox__close {
  position: absolute;
  z-index: 1;
  top: 16px;
  right: 18px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 400 31px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.moon-local-lightbox__close:hover,
.moon-local-lightbox__close:focus-visible {
  border-color: var(--moon-accent);
  background: var(--moon-accent);
  outline: none;
  transform: rotate(8deg);
}
@media (max-width: 680px) {
  .moon-local-lightbox { padding: 12px; }
  .moon-local-lightbox__image { max-width: 98vw; max-height: 90vh; border-radius: 8px; }
  .moon-local-lightbox__close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .moon-local-lightbox { transition: none; }
  .moon-local-lightbox__close { transition: none; }
}

/* Explanatory characteristic modal. It is inert until a user activates an
   info trigger, so it does not add work to the first viewport. */
.moon-info-modal {
  position: fixed;
  z-index: 2147483001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(24, 24, 22, .62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.moon-info-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.moon-info-modal__card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 620px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .26);
}
.moon-info-modal__content {
  display: grid;
  grid-template-columns: minmax(190px, .82fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: center;
}
.moon-info-modal__image {
  display: block;
  width: 100%;
  max-height: 390px;
  border-radius: 12px;
  background: #f8f8f5;
  object-fit: contain;
}
.moon-info-modal__image[hidden] { display: none; }
.moon-info-modal__copy { min-width: 0; }
.moon-info-modal__title {
  margin: 0 0 10px;
  padding-right: 28px;
  color: var(--moon-ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.moon-info-modal__text {
  margin: 0;
  color: #5e5e58;
  font-size: 14px;
  line-height: 1.65;
}
.moon-info-modal__close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  display: grid;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--moon-line-strong) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #6f6f69 !important;
  font: 400 26px/1 Arial, sans-serif !important;
  cursor: pointer;
}
.moon-info-modal__close:hover,
.moon-info-modal__close:focus-visible {
  border-color: var(--moon-accent) !important;
  background: #fff7ef !important;
  color: var(--moon-accent-dark) !important;
  outline: none;
}
@media (max-width: 680px) {
  .moon-info-modal { padding: 12px; }
  .moon-info-modal__card { padding: 19px; border-radius: 13px; }
  .moon-info-modal__content { grid-template-columns: 1fr; gap: 15px; }
  .moon-info-modal__image { max-height: 230px; }
  .moon-info-modal__title { font-size: 18px; }
  .moon-info-modal__text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .moon-info-modal { transition: none; }
  .moon-info-trigger { transition: none; }
}

.moon-construction { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.moon-chip { padding: 7px 10px; border: 1px solid var(--moon-line); border-radius: 999px; color: #686861; font-size: 11px; }

.moon-delivery {
  margin-top: 20px;
  padding: 14px 15px;
  border: 1px solid var(--moon-line);
  border-radius: 11px;
  background: #fbfbf9;
}

.moon-delivery__title { margin-bottom: 8px; color: var(--moon-ink); font-size: 12px; font-weight: 750; }
.moon-delivery__row { padding: 4px 0; color: #74746e; font-size: 11px; line-height: 1.45; }
.moon-delivery--flat { margin-top: 27px; padding: 0; border: 0; border-top: 1px solid var(--moon-line); border-radius: 0; background: transparent; }
.moon-delivery--flat .moon-delivery__title { padding-top: 12px; }
.moon-delivery--flat .moon-delivery__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--moon-line); }
.moon-delivery--flat .moon-delivery__row span { color: var(--moon-muted); }
.moon-delivery--flat .moon-delivery__row strong { color: var(--moon-ink); font-size: 11px; font-weight: 600; text-align: right; }
.moon-preview-shell .moon-delivery--flat .moon-delivery__row { display: flex !important; align-items: baseline !important; justify-content: space-between !important; }
.moon-trust { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 13px; color: #8c8c85; font-size: 10px; }

.moon-details {
  max-width: calc(100% - 548px);
  margin-top: 55px;
  padding-top: 26px;
  border-top: 1px solid var(--moon-line);
  /* Below the first product viewport this section can be laid out lazily.
     The intrinsic size keeps the scroll position stable while the browser
     skips work that cannot contribute to the initial paint. */
  content-visibility: auto;
  contain-intrinsic-size: 0 760px;
}

.moon-details__nav { display: flex; gap: 23px; margin-bottom: 24px; border-bottom: 1px solid var(--moon-line); overflow-x: auto; }
.moon-details__tab { position: relative; flex: 0 0 auto; padding: 0 0 14px; color: #8c8c85; font-size: 12px; font-weight: 700; text-decoration: none; }
.moon-details__tab:hover { color: var(--moon-ink); }
.moon-details__tab.is-active { color: var(--moon-ink); }
.moon-details__tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--moon-accent); content: ""; }

.moon-details__tab[aria-selected="false"] { color: #70706a; }

.moon-detail-card { margin-bottom: 58px; padding: 0; border: 0; border-radius: 0; background: transparent; scroll-margin-top: 110px; }
.moon-detail-card h2 { margin: 0 0 23px; color: var(--moon-ink); font-size: 31px; font-weight: 650; letter-spacing: -.035em; }
.moon-detail-card p { max-width: 840px; margin: 0; color: #555550; font-size: 15px; line-height: 1.65; }
#moon-description > p + p { margin-top: 15px; }
#moon-description > h2,
#moon-description > h3,
#moon-description > h4 { max-width: 840px; margin: 25px 0 11px; color: var(--moon-ink); font-size: 19px; line-height: 1.25; }
#moon-description > ul,
#moon-description > ol { max-width: 840px; margin: 13px 0 0; padding-left: 22px; color: #555550; font-size: 15px; line-height: 1.65; }
#moon-description li { margin: 4px 0; }
#moon-description a { color: var(--moon-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.moon-spec-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 34px; max-width: 900px; }
.moon-spec-group { min-width: 0; }
.moon-spec-group h3 { margin: 0 0 8px; color: var(--moon-ink); font-size: 15px; font-weight: 750; letter-spacing: -.015em; }
.moon-spec-group__facts { margin: 0; }
.moon-spec-group__facts .moon-fact { min-height: 29px; padding: 4px 0; border-bottom: 1px solid #f1f1ee; }
.moon-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 3px; }
.moon-spec-line { padding: 8px 0; border-bottom: 1px solid #f1f1ee; color: #676761; font-size: 12px; line-height: 1.4; }
.moon-detail-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.moon-detail-links a { color: var(--moon-accent-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.moon-fact-categories {
  max-width: 900px;
  margin-top: 25px;
  padding-top: 17px;
  border-top: 1px solid var(--moon-line);
}
.moon-fact-categories h3 {
  margin: 0 0 11px;
  color: var(--moon-ink);
  font-size: 13px;
  font-weight: 700;
}
.moon-fact-categories__intro {
  max-width: 62ch;
  margin: 0 0 15px;
  color: #85857e;
  font-size: 12px;
  line-height: 1.55;
}
.moon-fact-categories__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 18px;
}
.moon-fact-categories__group {
  min-width: 0;
}
.moon-fact-categories__group h4 {
  margin: 0 0 7px;
  color: #85857e;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.moon-fact-categories__list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 9px;
}
.moon-fact-categories__list a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #eadfd4;
  border-radius: 999px;
  background: #fffaf5;
  color: var(--moon-accent-dark);
  font-size: 11px;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.moon-fact-categories__list a:hover,
.moon-fact-categories__list a:focus-visible {
  border-color: var(--moon-accent);
  background: #fff2e5;
  outline: none;
  transform: translateY(-1px);
}

.moon-smart-picker {
  max-width: 900px;
  margin: 0 0 58px;
  padding: 25px 26px 27px;
  border: 1px solid #eee6dc;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(239,127,26,.1), transparent 38%),
    #fffaf5;
}
.moon-smart-picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.moon-smart-picker h2 {
  margin: 0 0 8px;
  font-size: 25px;
}
.moon-smart-picker__intro {
  max-width: 58ch;
  color: #77736c !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.moon-smart-picker__badge {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--moon-accent-dark);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.moon-smart-picker__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.moon-smart-picker__group {
  min-width: 0;
  padding: 14px;
  border: 1px solid #eee6dc;
  border-radius: 12px;
  background: rgba(255,255,255,.8);
}
.moon-smart-picker__group h3 {
  margin: 0 0 9px;
  color: var(--moon-ink);
  font-size: 12px;
  font-weight: 750;
}
.moon-smart-picker__group p {
  margin: 0 0 10px;
  color: #9a968f;
  font-size: 11px;
  line-height: 1.45;
}
.moon-smart-picker__links {
  display: grid;
  gap: 7px;
}
.moon-smart-picker__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--moon-accent-dark);
  font-size: 11px;
  line-height: 1.3;
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.moon-smart-picker__links a::after {
  flex: 0 0 auto;
  color: #c5a486;
  content: '→';
}
.moon-smart-picker__links a:hover,
.moon-smart-picker__links a:focus-visible {
  background: #fff1e1;
  outline: none;
  transform: translateX(2px);
}

.moon-faq {
  max-width: 900px;
  margin-bottom: 58px;
}
.moon-faq__list {
  display: grid;
  gap: 8px;
  max-width: 900px;
}
.moon-faq__item {
  border: 1px solid var(--moon-line);
  border-radius: 11px;
  background: #fff;
}
.moon-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 12px 15px;
  color: var(--moon-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.moon-faq__item summary::-webkit-details-marker { display: none; }
.moon-faq__item summary::after {
  color: var(--moon-accent);
  content: '+';
  font-size: 18px;
  font-weight: 400;
}
.moon-faq__item[open] summary::after { content: '−'; }
.moon-faq__answer {
  padding: 0 15px 14px;
  color: #5c5c56;
  font-size: 13px;
  line-height: 1.6;
}

/* Reviews: this presentation is fed exclusively by native
   .review-list__item rows. It has a compact editorial rhythm and does not
   reserve space for invented ratings, recommendation percentages or fake
   verification badges. */
.moon-reviews-body { max-width: 920px; }
.moon-review-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 13px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--moon-line);
  border-radius: 12px;
  background: #fbfbf9;
}
.moon-review-summary__score { color: var(--moon-ink); font-size: 25px; font-weight: 750; letter-spacing: -.03em; }
.moon-review-summary__stars,
.moon-review-stars { display: inline-flex; gap: 2px; color: #d6d6d0; font-size: 14px; line-height: 1; }
.moon-review-summary__stars .is-filled,
.moon-review-stars .is-filled { color: var(--moon-accent); }
.moon-review-summary__count { color: #5f5f59; font-size: 12px; font-weight: 650; }
.moon-review-summary__source { margin-left: auto; color: #999991; font-size: 11px; }
.moon-review-list { display: grid; gap: 14px; }
.moon-review {
  padding: 19px 20px;
  border: 1px solid var(--moon-line);
  border-radius: 13px;
  background: #fff;
}
.moon-review__header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.moon-review__avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #fff2e6; color: var(--moon-accent-dark); font-size: 15px; font-weight: 750; }
.moon-review__identity { display: grid; gap: 3px; min-width: 0; }
.moon-review__author { overflow: hidden; color: var(--moon-ink); font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.moon-review__verified { color: var(--moon-green); font-size: 10px; font-weight: 650; }
.moon-review__demo-label { color: #9a5b17; font-size: 10px; font-weight: 700; }
.moon-review__meta { display: grid; justify-items: end; gap: 5px; }
.moon-review__meta .moon-review-stars { font-size: 12px; }
.moon-review__date { color: #9a9a93; font-size: 11px; white-space: nowrap; }
.moon-review__body { display: grid; gap: 12px; margin: 16px 0 0 49px; }
.moon-review__part { padding-left: 12px; border-left: 2px solid #e7e7e2; }
.moon-review__part--plus { border-left-color: #8fbd9a; }
.moon-review__part--minus { border-left-color: #d7a29a; }
.moon-review__part strong,
.moon-review__reply strong { display: block; margin-bottom: 3px; color: #60605a; font-size: 11px; font-weight: 750; }
.moon-review__part p,
.moon-review__reply p { max-width: none; color: #565650; font-size: 13px; line-height: 1.55; }
.moon-review__text { max-width: none !important; color: #383834 !important; font-size: 14px !important; line-height: 1.6 !important; }
.moon-review__reply { padding: 11px 13px; border-radius: 9px; background: #fbfbf9; }
.moon-review__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.moon-review__photos img { display: block; width: 88px; height: 88px; border-radius: 8px; background: var(--moon-soft); object-fit: cover; }
.moon-review__votes { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0 49px; color: #92928a; font-size: 10px; }
.moon-review__votes span + span { color: #686861; }
.moon-review--demo { border-color: #f0c996; background: #fffaf3; }
.moon-review--demo .moon-review__avatar { background: #fff0d8; color: #9a5b17; }
.moon-review-demo-notice { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #f0c996; border-radius: 10px; background: #fff8eb; color: #7d5a2d; font-size: 11px; line-height: 1.5; }
.moon-review-demo-notice strong { color: #8c4d0a; font-size: 12px; }
.moon-review-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 20px; }
.moon-review-more,
.moon-review-write { min-height: 42px; padding: 0 17px; border-radius: 9px; font-size: 12px; }
.moon-review-more { border-color: var(--moon-line-strong); }
.moon-review-write { border-color: var(--moon-accent) !important; color: var(--moon-accent-dark) !important; }
.moon-review-progress { color: #888880; font-size: 11px; }
.moon-reviews-empty { display: grid; justify-items: start; gap: 9px; max-width: 660px; padding: 24px 25px; border: 1px dashed var(--moon-line-strong); border-radius: 13px; background: #fbfbf9; }
.moon-reviews-empty strong { color: var(--moon-ink); font-size: 15px; }
.moon-reviews-empty p { max-width: 620px; color: #66665f; font-size: 13px; line-height: 1.55; }
.moon-reviews-empty__hint { color: #999991; font-size: 11px; line-height: 1.45; }

.moon-mechanism__grid { display: grid; grid-template-columns: minmax(220px, .92fr) minmax(0, 1.08fr); gap: 28px; align-items: center; max-width: 900px; }
.moon-mechanism__media { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--moon-line); border-radius: 13px; background: #fbfbf9; cursor: zoom-in; }
.moon-mechanism__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.moon-mechanism__copy h3 { margin: 0 0 13px; color: var(--moon-ink); font-size: 17px; font-weight: 750; }
.moon-mechanism__copy > p { padding-left: 16px; border-left: 3px solid var(--moon-accent); }

.moon-delivery-detail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 0; max-width: 900px; }
.moon-delivery-detail__row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid #f1f1ee; color: var(--moon-muted); font-size: 12px; }
.moon-delivery-detail__row strong { color: var(--moon-ink); font-weight: 650; text-align: right; }
.moon-delivery-detail__note { grid-column: 1 / -1; margin-top: 18px !important; color: var(--moon-muted) !important; font-size: 12px !important; }

/* A single, touch-scrollable materials row; its pager also supports keyboard use. */
.moon-materials { min-width: 0; max-width: 100%; }
.moon-materials .moon-rail__head { gap: 16px; margin-bottom: 24px; }
.moon-materials.moon-detail-card .moon-rail__head h2 { margin: 0; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; }
.moon-materials .moon-material-grid { display: flex; gap: 20px; width: 100%; max-width: 100%; padding: 4px 4px 12px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; }
.moon-material-card { display: grid; flex: 0 0 clamp(340px, calc((100% - 20px) / 2), 560px); grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 20px; align-items: center; min-width: 0; max-width: 100%; padding: 20px; border: 1px solid #e8e6e0; border-radius: 16px; background: #fafaf8; scroll-snap-align: start; }
.moon-material-card--text-only { grid-template-columns: 1fr; }
.moon-material-card__media { display: block; min-width: 0; width: 100%; margin: 0; padding: 12px !important; appearance: none; border: 1px solid #e8e6e0 !important; border-radius: 12px !important; background: #fff !important; color: #57534d !important; font: inherit; cursor: zoom-in; }
.moon-material-card__media[hidden] { display: none; }
.moon-material-card__media:hover { border-color: var(--moon-accent) !important; }
.moon-material-card__media:focus-visible { outline: 3px solid var(--moon-accent); outline-offset: 3px; }
.moon-material-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 190px; object-fit: contain; }
.moon-material-card__zoom { display: block; margin-top: 12px; font-size: 14px; line-height: 1.4; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.moon-material-card__body { min-width: 0; overflow-wrap: anywhere; }
.moon-material-card__body h3 { margin: 0 0 12px; color: var(--moon-ink); font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
.moon-material-card__body p { margin: 0; color: #5e5b55; font-size: 16px; line-height: 1.6; }
.moon-material-card__body .moon-info-trigger { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; margin-left: 6px; font-size: 16px !important; }
@media (max-width: 680px) {
  .moon-materials.moon-detail-card { padding: 18px 0; }
  .moon-materials.moon-detail-card .moon-rail__head h2 { font-size: 26px; }
  .moon-materials .moon-material-grid { gap: 14px; }
  .moon-material-card { flex-basis: 88%; grid-template-columns: 1fr; gap: 16px; align-content: start; padding: 16px; }
  .moon-material-card__media img { height: 150px; }
  .moon-material-card__body h3 { font-size: 20px; }
  .moon-material-card__body .moon-info-trigger { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
}

.moon-rail {
  margin-top: 72px;
  scroll-margin-top: 110px;
  content-visibility: auto;
  contain-intrinsic-size: 0 380px;
}
.moon-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.moon-rail__head h2 { margin: 0; color: var(--moon-ink); font-size: 28px; font-weight: 650; letter-spacing: -.035em; }
.moon-rail__all { color: var(--moon-accent-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.moon-rail__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.moon-rail__track::-webkit-scrollbar { display: none; }
.moon-rail-card {
  display: block;
  flex: 1 0 264px;
  max-width: 360px;
  min-width: 0;
  padding-bottom: 10px;
  color: var(--moon-ink);
  text-decoration: none;
  border-radius: 12px;
  scroll-snap-align: start;
  transition: color .18s ease;
}
.moon-rail-card:hover,
.moon-rail-card:focus-visible {
  color: var(--moon-ink);
}
.moon-rail-card:focus-visible { outline: 3px solid rgba(239, 127, 26, .25); outline-offset: 3px; }
.moon-rail-card__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 11px; background: var(--moon-soft); }
.moon-rail-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .34s ease, opacity .2s ease; }
.moon-rail-card:hover .moon-rail-card__media img,
.moon-rail-card:focus-visible .moon-rail-card__media img { transform: scale(1.06); }
.moon-rail-card__name {
  display: -webkit-box;
  min-height: 38px;
  margin-top: 12px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.moon-rail-card__meta {
  display: flex;
  min-height: 17px;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 3px;
  color: var(--moon-muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.moon-rail-card__meta-size,
.moon-rail-card__meta-color { white-space: nowrap; }
.moon-rail-card__meta-size { font-variant-numeric: tabular-nums; }
.moon-rail-card__review { display: block; margin-top: 6px; color: var(--moon-muted); font-size: 10px; }
.moon-rail-card__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 7px 0 0; color: var(--moon-muted); font-size: 12px; line-height: 1.5; min-height: 54px; }
.moon-rail-card__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; color: var(--moon-ink); font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.moon-rail-card__rating-star { color: #d96d0e; font-size: 15px; }
.moon-rail-card__rating--empty { color: var(--moon-muted); }
.moon-rail-card__rating--empty .moon-rail-card__rating-star { color: #a7a7a0; }
.moon-rail-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0 9px;
  margin-top: 8px;
  color: var(--moon-ink);
  font-size: 15.5px;
  line-height: 1.25;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.moon-rail-card__price-current { white-space: nowrap; }
.moon-rail-card__price-old {
  display: inline-block;
  color: #92928b;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-thickness: 1.25px;
  text-decoration-color: #85857e;
}
.moon-rail-card__price-discount {
  color: var(--moon-accent-dark);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.moon-rail--colors .moon-rail-card__media {
  background: #f7f7f4;
}
.moon-rail--colors .moon-rail-card__media img {
  object-fit: cover;
}
.moon-color-card .moon-rail-card__name {
  min-height: 38px;
}

.moon-link-rail__intro {
  max-width: 680px;
  margin: -7px 0 20px;
  color: var(--moon-muted);
  font-size: 13px;
  line-height: 1.5;
}
.moon-link-rail__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.moon-link-card {
  position: relative;
  display: flex;
  min-height: 126px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  padding: 17px 37px 16px 17px;
  border: 1px solid #ecece8;
  border-radius: 14px;
  background: #fff;
  color: var(--moon-ink);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.moon-link-card:hover,
.moon-link-card:focus-visible {
  color: var(--moon-ink);
  border-color: rgba(239, 127, 26, .48);
  box-shadow: 0 10px 25px rgba(42, 42, 36, .07);
  transform: translateY(-2px);
}
.moon-link-card:focus-visible {
  outline: 3px solid rgba(239, 127, 26, .25);
  outline-offset: 3px;
}
.moon-link-card__eyebrow {
  color: var(--moon-accent-dark);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.moon-link-card__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.moon-link-card__value {
  color: var(--moon-muted);
  font-size: 11px;
  line-height: 1.35;
}
.moon-link-card__arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: var(--moon-accent);
  font-size: 18px;
  line-height: 1;
}

/* ============================================================
   REFERENCE EDITORIAL BLOCKS: JOURNAL / HONEST PRICE
   ============================================================ */
.moon-journal,
.moon-why {
  scroll-margin-top: 110px;
  /* Keep the editorial blocks on the reference palette even though the
     surrounding product adapter uses slightly warmer legacy tokens. */
  --moon-muted: #8c8c8c;
  --moon-line: #e7e7e5;
}

.moon-journal {
  margin-top: 100px;
  content-visibility: auto;
  contain-intrinsic-size: 0 470px;
}

.moon-journal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.moon-journal__head h2,
.moon-why h2 {
  margin: 0;
  color: var(--moon-ink);
  font-weight: 600;
  letter-spacing: -.02em;
}

.moon-journal__head h2 { font-size: 28px; }

.moon-journal__all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8c8c8c;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}

.moon-journal__all:hover,
.moon-journal__all:focus-visible { color: var(--moon-ink); }

.moon-journal__arrow {
  display: block;
  flex: none;
  transition: transform .2s ease;
}

.moon-journal__all:hover .moon-journal__arrow { transform: translateX(2px); }

.moon-journal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.moon-journal__card {
  display: block;
  min-width: 0;
  color: var(--moon-ink);
  text-decoration: none;
}

.moon-journal__card:focus-visible {
  outline: 2px solid var(--moon-ink);
  outline-offset: 4px;
  border-radius: 4px;
}

.moon-journal__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid #f1f1ef;
  border-radius: 12px;
  background: #fff;
}

.moon-journal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform .4s ease;
}

.moon-journal__card:hover .moon-journal__media img { transform: scale(1.13); }

.moon-journal__name {
  display: -webkit-box;
  min-height: 40.6px;
  margin-top: 12px;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.moon-journal__more {
  display: inline-block;
  margin-top: 7px;
  color: #8c8c8c;
  font-size: 12.5px;
  transition: color .15s ease;
}

.moon-journal__card:hover .moon-journal__more { color: var(--moon-ink); }

.moon-why {
  margin-top: 72px;
  content-visibility: auto;
  contain-intrinsic-size: 0 340px;
}

.moon-why h2 {
  margin-bottom: 24px;
  font-size: 31px;
}

.moon-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1100px;
  gap: 14px;
}

.moon-why__item {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--moon-line);
  border-radius: 12px;
}

.moon-why__item strong {
  display: block;
  margin-bottom: 7px;
  color: var(--moon-ink);
  font-size: 15px;
  font-weight: 600;
}

.moon-why__item p {
  margin: 0;
  color: #8c8c8c;
  font-size: 13.5px;
  line-height: 1.55;
}

.moon-why__foot {
  margin: 20px 0 0;
  color: var(--moon-ink);
  font-size: 14.5px;
}

.moon-why__foot strong { font-weight: 600; }

.moon-buybar { display: none; }
.moon-buybar[aria-hidden="true"] { visibility: hidden; pointer-events: none; }

/* Ensure the old local adapter's first-generation bar never appears next to
   this new one. */
.mnd-reference-buybar { display: none !important; }

@media (max-width: 1360px) {
  .moon-preview-shell { padding-right: 32px; padding-left: 32px; }
  .moon-top { grid-template-columns: minmax(0, 1fr) minmax(360px, 448px); gap: 40px; }
  .moon-details { max-width: calc(100% - 488px); }
}

@media (max-width: 1120px) {
  .moon-preview-shell { padding-right: 24px; padding-left: 24px; }
  .moon-top { grid-template-columns: minmax(0, 1fr) minmax(340px, 404px); gap: 32px; }
  .moon-details { max-width: calc(100% - 436px); }
}

@media (max-width: 1024px) {
  .moon-preview-shell { padding-top: 14px; padding-bottom: 105px; }
  .moon-top { display: block; }
  .moon-panel { position: static; margin-top: 30px; }
  .moon-title { max-width: 760px; }
  .moon-details { max-width: none; margin-top: 34px; }
  .moon-stage { aspect-ratio: 4 / 3; }
  /* Match the reference HTML: rails keep a 72px lead-in while content
     blocks use the tighter 56px rhythm on tablet and below. */
  .moon-journal { margin-top: 72px; }
  .moon-why { margin-top: 56px; }
  .moon-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moon-why__grid { grid-template-columns: 1fr; }
  .moon-buybar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1002;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--moon-line);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 24px rgba(20, 20, 20, .08);
    backdrop-filter: blur(12px);
  }
  .moon-buybar.is-visible { display: flex; }
  .moon-buybar__price {
    display: flex;
    min-width: 100px;
    align-items: baseline;
    gap: 6px;
    color: var(--moon-ink);
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  .moon-buybar__now { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .moon-buybar__old { color: var(--moon-muted); font-size: 11.5px; font-weight: 550; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
  .moon-buybar .moon-button { flex: 1; min-height: 46px; }
}

@media (max-width: 680px) {
  body::before { top: 5px; left: 5px; font-size: 9px; }
  .moon-preview-shell { padding: 10px 16px 99px; }
  .moon-crumbs { margin-bottom: 17px; font-size: 11px; }
  .moon-stage { border-radius: 11px; }
  .moon-stage__badges { top: 11px; left: 11px; gap: 5px; max-width: calc(100% - 22px); }
  .moon-badge { min-height: 25px; padding: 0 9px; font-size: 9px; }
  .moon-stage__arrow { display: none; }
  .moon-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    margin-top: 8px;
  }
  .moon-thumb {
    width: auto;
    max-width: none;
    min-width: 0;
    border-radius: 6px;
  }
  .moon-customer-gallery { margin-top: 27px; padding-top: 19px; }
  .moon-customer-gallery__head { gap: 10px; margin-bottom: 11px; }
  .moon-customer-gallery__head h2 { font-size: 18px; }
  .moon-customer-gallery__intro { margin-top: 5px; font-size: 11px; }
  .moon-customer-gallery__count { min-height: 24px; padding: 5px 8px; font-size: 10px; }
  .moon-customer-gallery__empty { min-height: 78px; padding: 13px 12px; gap: 10px; }
  .moon-customer-gallery__empty-mark { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 19px; }
  .moon-customer-gallery__empty-copy strong { font-size: 12px; }
  .moon-customer-gallery__empty-copy p { margin-top: 4px; font-size: 10px; }
  .moon-customer-gallery__row { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 6px; }
  .moon-customer-gallery__track { grid-auto-columns: 112px; gap: 9px; padding: 3px 1px 8px; }
  .moon-customer-gallery__track { touch-action: pan-x; }
  .moon-customer-gallery__item { border-radius: 9px; }
  .moon-customer-gallery__nav { width: 30px; height: 30px; font-size: 21px; }
  .moon-customer-gallery__item::after { right: 6px; bottom: 6px; width: 22px; height: 22px; font-size: 12px; }
  .moon-panel { margin-top: 24px; }
  .moon-eyebrow { margin-bottom: 8px; font-size: 9px; }
  .moon-title { font-size: 23px; line-height: 1.12; }
  .moon-sku { margin-top: 9px; font-size: 11px; }
  .moon-rating { margin: 12px 0 15px; font-size: 12px; }
  .moon-social-proof { margin-bottom: 13px; font-size: 10px; }
  .moon-price-row { gap: 8px 10px; }
  .moon-price { font-size: 30px; }
  .moon-price-old { font-size: 13px; }
  .moon-price-discount { min-height: 20px; padding: 3px 6px; font-size: 10px; }
  .moon-facts { padding: 11px 0; }
  .moon-fact { font-size: 11px; }
  .moon-actions { grid-template-columns: 1fr; }
  .moon-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .moon-swatch-row { grid-template-columns: minmax(0, 1fr) 42px; gap: 6px; }
  .moon-preview-shell .moon-swatch-row .moon-swatches-more { width: 42px !important; min-height: 42px !important; }
  .moon-swatch { border-radius: 6px; }
  .moon-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moon-panel__heading-row { align-items: flex-start; }
  .moon-details { margin-top: 30px; padding-top: 21px; }
  .moon-details__nav { gap: 17px; }
  .moon-detail-card { padding: 18px 15px; }
  .moon-detail-card h2 { font-size: 18px; }
  .moon-spec-groups { grid-template-columns: 1fr; gap: 24px; }
  .moon-spec-group h3 { font-size: 14px; }
  .moon-spec-grid { grid-template-columns: 1fr; }
  .moon-fact-categories__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 13px; }
  .moon-fact-categories__intro { font-size: 11px; }
  .moon-smart-picker { margin-bottom: 40px; padding: 20px 15px 21px; }
  .moon-smart-picker__head { display: grid; gap: 11px; margin-bottom: 14px; }
  .moon-smart-picker h2 { font-size: 21px; }
  .moon-smart-picker__groups { grid-template-columns: 1fr; gap: 9px; }
  .moon-smart-picker__group { padding: 12px; }
  .moon-smart-picker__group p { margin-bottom: 7px; }
  .moon-faq { margin-bottom: 40px; }
  .moon-faq__item summary { min-height: 45px; padding: 11px 12px; font-size: 12px; }
  .moon-faq__answer { padding: 0 12px 12px; font-size: 12px; }
  .moon-review-summary { align-items: flex-start; padding: 14px 15px; }
  .moon-review-summary__source { width: 100%; margin-left: 0; }
  .moon-review { padding: 16px 14px; }
  .moon-review__header { grid-template-columns: 34px minmax(0, 1fr); }
  .moon-review__avatar { width: 34px; height: 34px; }
  .moon-review__meta { grid-column: 2; grid-row: 2; display: flex; justify-items: flex-start; gap: 8px; }
  .moon-review__body,
  .moon-review__votes { margin-left: 0; }
  .moon-reviews-empty { padding: 20px 16px; }
  .moon-mechanism__grid, .moon-delivery-detail__grid { grid-template-columns: 1fr; }

  .moon-rail { margin-top: 46px; }
  .moon-rail__head h2 { font-size: 22px; }
  .moon-rail__track { gap: 12px; }
  .moon-rail-card { flex: 0 0 208px; max-width: none; }
  .moon-rail-card__name { font-size: 12px; }
  .moon-link-rail__track { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .moon-link-rail__track::-webkit-scrollbar { display: none; }
  .moon-link-card { flex: 0 0 210px; min-height: 118px; }
  .moon-buybar { padding-right: 12px; padding-left: 12px; }
  .moon-buybar__price { min-width: 88px; gap: 5px; }
  .moon-buybar__now { font-size: 15px; }
  .moon-buybar__old { font-size: 10.5px; }
}

/* The reference switches the editorial grid to one column at 640px. Keep
   the product card's 680px mobile tuning above, but apply these two sections
   at the exact reference breakpoint and preserve their 22×24px card inset. */
@media (max-width: 640px) {
  .moon-journal__head { align-items: flex-start; margin-bottom: 18px; }
  .moon-journal__head h2 { font-size: 21px; }
  .moon-journal__all { font-size: 12px; }
  .moon-journal__grid { grid-template-columns: 1fr; gap: 22px; }
  .moon-journal__name { min-height: 0; font-size: 14px; }
  .moon-why { margin-top: 56px; }
  .moon-why h2 { margin-bottom: 18px; font-size: 25px; }
  .moon-why__foot { font-size: 14px; }
}

/* A touch pointer can leave :hover latched after a tap. Keep the rail image
   at its resting scale on touch devices; keyboard focus still gets the clear
   focus ring without a persistent zoom. */
@media (hover: none) {
  .moon-rail-card:hover .moon-rail-card__media img { transform: none; }
}

/* The native theme's 47px feedback rail is fixed to the viewport edge. Give
   the editorial sections the same safe gutter as the reference at tablet /
   compact-desktop widths so its label never covers a heading or card text. */
@media (min-width: 681px) and (max-width: 1360px) {
  .moon-rail { margin-left: 24px; }
  .moon-journal,
  .moon-why { margin-left: 16px; margin-right: 16px; }
}

@media (min-width: 681px) and (max-width: 1120px) {
  .moon-journal,
  .moon-why { margin-left: 24px; margin-right: 24px; }
}

/* `content-visibility:auto` uses the section's contain-intrinsic-size while
   it is outside the prerender distance.  The old 470/340px placeholders were
   accurate on desktop, but at a narrow viewport the journal becomes a
   one-column list of four 3:2 cards and the why block wraps its copy.  Keep
   the empty slot and the hydrated section on the same measured curve so the
   queue can replace the marker without a later 800–1,100px layout jump.
   These are dimensions of the static reference blocks, not product data. */
@media (max-width: 640px) {
  body.moon-preview-body .moon-journal-slot:empty {
    min-height: calc(243.2vw + 311px);
  }
  body.moon-preview-body .moon-journal {
    contain-intrinsic-size: 0 calc(243.2vw + 311px);
  }
  body.moon-preview-body .moon-why-slot:empty {
    min-height: calc(914px - 55.7vw);
  }
  body.moon-preview-body .moon-why {
    contain-intrinsic-size: 0 calc(914px - 55.7vw);
  }
}

/* Between 641–680px the reference switches back to a two-column journal;
   fixed values measured at the 680px edge avoid reserving the much taller
   one-column mobile curve above. */
@media (min-width: 641px) and (max-width: 680px) {
  body.moon-preview-body .moon-journal-slot:empty { min-height: 650px; }
  body.moon-preview-body .moon-journal { contain-intrinsic-size: 0 650px; }
  body.moon-preview-body .moon-why-slot:empty { min-height: 590px; }
  body.moon-preview-body .moon-why { contain-intrinsic-size: 0 590px; }
}

/* The legacy mobile header/footer use Bootstrap's -10px row gutters.  In the
   390px preview those gutters extend the row by ~8px past the scrollbar
   viewport.  Scope the correction to the two legacy containers only; the
   MOON shell and its intentional horizontal rails keep their own geometry. */
@media (max-width: 680px) {
  body.moon-preview-body header .container > .row,
  body.moon-preview-body footer .container > .row {
    margin-right: 0;
    margin-left: 0;
  }
  body.moon-preview-body footer .footer__payments {
    margin-left: 0;
  }

  /* Keep the below-fold queue from changing document geometry while each
     section hydrates.  Slots are replaced (not emptied) by the adapter, so
     :empty releases these reservations automatically as soon as content is
     mounted.  Values mirror the measured final mobile sections. */
  body.moon-preview-body .moon-details-slot:empty { min-height: 3499px; }
  body.moon-preview-body .moon-buying-slot:empty,
  body.moon-preview-body .moon-color-slot:empty,
  body.moon-preview-body .moon-characteristic-slot:empty,
  body.moon-preview-body .moon-series-slot:empty,
  body.moon-preview-body .moon-similar-slot:empty { min-height: 380px; }
}

/* At 320–389px the one-column specification/review stack wraps several
   labels onto an extra line. Match that measured growth instead of allowing
   the details slot to be 300–440px too short on the smallest phones. The
   second curve bottoms out at the 3499px reservation used from 390px up. */
@media (max-width: 360px) {
  body.moon-preview-body .moon-details-slot:empty { min-height: calc(6704px - 864vw); }
}
@media (min-width: 361px) and (max-width: 389px) {
  body.moon-preview-body .moon-details-slot:empty { min-height: calc(4719px - 313vw); }
}

@media (prefers-reduced-motion: reduce) {
  .moon-preview-shell *,
  .moon-preview-shell *::before,
  .moon-preview-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .moon-rail-card:hover .moon-rail-card__media img,
  .moon-rail-card:focus-visible .moon-rail-card__media img { transform: none !important; }
}

/* The smart picker is a persistent left-side control, matching the
   reference layout.  Its links stay in the HTML for crawlability, while the
   panel itself opens only after an intentional click. */
.moon-smart-picker {
  position: fixed !important;
  top: 50%;
  left: 0;
  z-index: 1005;
  width: 0;
  height: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}
.moon-smart-picker__trigger {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 39px;
  min-height: 142px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0 13px 13px 0;
  background: var(--moon-accent);
  box-shadow: 8px 12px 26px rgba(239, 127, 26, .22);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: width .2s ease, background .2s ease, box-shadow .2s ease;
}
.moon-smart-picker__trigger:hover,
.moon-smart-picker__trigger:focus-visible {
  width: 45px;
  background: var(--moon-accent-dark);
  box-shadow: 10px 14px 30px rgba(239, 127, 26, .3);
  outline: none;
}
.moon-smart-picker__trigger:active { transform: translateY(-50%) scale(.98); }
.moon-smart-picker__trigger-icon {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.moon-smart-picker__trigger-label {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.moon-smart-picker__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
  padding: 0;
  border: 0;
  background: rgba(24, 24, 22, .16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.moon-smart-picker__panel {
  position: absolute;
  top: 50%;
  left: 15px;
  display: grid;
  width: min(376px, calc(100vw - 44px));
  max-height: min(78vh, 680px);
  gap: 18px;
  overflow-y: auto;
  padding: 22px 20px 24px;
  transform: translate(-112%, -50%);
  border: 1px solid #eadfd4;
  border-radius: 15px;
  background: #fffdfa;
  box-shadow: 16px 22px 48px rgba(41, 33, 25, .2);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .18s ease;
}
.moon-smart-picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 !important;
}
.moon-smart-picker__head h2 {
  margin: 0 0 6px;
  color: var(--moon-ink);
  font-size: 21px;
  letter-spacing: -.025em;
}
.moon-smart-picker__intro {
  max-width: 31ch;
  margin: 0 !important;
  color: var(--moon-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
.moon-smart-picker__close {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--moon-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--moon-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.moon-smart-picker__close:hover,
.moon-smart-picker__close:focus-visible {
  border-color: var(--moon-accent);
  background: #fff7ef;
  color: var(--moon-accent-dark);
  outline: none;
}
.moon-smart-picker__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}
.moon-smart-picker__group {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #eee6dc;
  border-radius: 11px;
  background: #fff;
}
.moon-smart-picker__group h3 {
  margin: 0 0 5px;
  color: var(--moon-ink);
  font-size: 13px;
  font-weight: 750;
}
.moon-smart-picker__group p {
  margin: 0 0 8px;
  color: var(--moon-muted);
  font-size: 11px;
  line-height: 1.4;
}
.moon-smart-picker__links { display: grid; gap: 3px; }
.moon-smart-picker__links a {
  display: flex;
  min-height: 31px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--moon-accent-dark);
  font-size: 11px;
  line-height: 1.3;
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.moon-smart-picker__links a::after {
  flex: 0 0 auto;
  color: #c5a486;
  content: '→';
}
.moon-smart-picker__links a:hover,
.moon-smart-picker__links a:focus-visible {
  background: #fff1e1;
  outline: none;
  transform: translateX(2px);
}
.moon-smart-picker.is-open .moon-smart-picker__panel {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}
.moon-smart-picker.is-open .moon-smart-picker__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Never surface local/demo labels in the customer-facing shell. Demo
   fixtures are ignored in the collector; these guards cover stale markup
   left by an older cached response. */
.moon-preview-shell .moon-rating__demo,
.moon-preview-shell .moon-review__demo-label,
.moon-preview-shell .moon-review-demo-notice,
.moon-preview-shell .moon-review--demo { display: none !important; }

/* Safety net for visitors with an old cached adapter: the duplicate custom
   picker must never be visible. The real left-side picker is #openPromo. */
#moon-smart-picker { display: none !important; }

.moon-delivery__note {
  margin: 0 0 9px;
  color: var(--moon-muted);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .moon-smart-picker__trigger {
    width: 34px;
    min-height: 128px;
    padding: 11px 6px;
  }
  .moon-smart-picker__trigger:hover,
  .moon-smart-picker__trigger:focus-visible { width: 39px; }
  .moon-smart-picker__trigger-label { font-size: 9px; }
  .moon-smart-picker__panel {
    left: 9px;
    width: calc(100vw - 43px);
    max-height: 72vh;
    padding: 18px 15px 19px;
    border-radius: 13px;
  }
  .moon-smart-picker__head h2 { font-size: 18px; }
  .moon-smart-picker__group { padding: 11px 12px; }
}

/* Smart-picker styles live in the shared mnd-smart-picker.css asset. */

.moon-native-review-form {
  position: relative;
  margin-top: 20px;
  padding: 22px;
  border: 1px solid #eee6dc;
  border-radius: 14px;
  background: #fffaf4;
  font-size: 14px;
  line-height: 1.6;
}
.moon-native-review-form[hidden] { display: none !important; }
.moon-native-review-form h3 { margin: 0 80px 16px 0; font-size: 18px; }
.moon-native-review-form__close {
  position: absolute;
  top: 19px;
  right: 18px;
  border: 0;
  background: transparent;
  color: var(--moon-muted);
  font-size: 12px;
  cursor: pointer;
}
.moon-native-review-form #form-review { margin: 0; }
.moon-native-review-form #form-review > b { font-weight: 500; }
.moon-native-review-form a { color: var(--moon-accent-dark); text-decoration: underline; }
.moon-native-review-form input, .moon-native-review-form textarea { max-width: 100%; }
@media (max-width: 680px) {
  .moon-rail, .moon-detail-card { scroll-margin-top: 140px; }
  body.moon-preview-body header.fixed { left: 0; right: 0; width: auto; }
}

/* Mechanism animation: intrinsic ratio, pause control and quiet caption. */
.moon-mechanism__animation { min-width:0; }
.moon-mechanism__animation img { display:block; width:100%; height:auto; aspect-ratio:32/21; border-radius:16px; background:#faf9f7; }
.moon-mechanism__toggle { margin:12px 0 0; padding:10px 16px; color:#37342f; background:#f4f2ef; border:1px solid #dedbd5; border-radius:8px; font:inherit; font-size:13px; cursor:pointer; }
.moon-mechanism__toggle:focus-visible { outline:3px solid #ef7f1a; outline-offset:3px; }
.moon-mechanism__caption { margin:10px 0 0!important; color:#75716b!important; font-size:12px!important; line-height:1.5!important; }
/* Structured product copy; scope typography to the description only. */
#moon-description > h2:first-child { margin:0 0 22px; font-size:31px; line-height:1.2; }
#moon-description p { max-width:74ch; margin:0 0 16px; font-size:16px; line-height:1.7; }
#moon-description h3, #moon-description h4 { max-width:74ch; margin:28px 0 12px; font-size:20px; line-height:1.35; font-weight:650; }
#moon-description ul, #moon-description ol { max-width:74ch; margin:10px 0 22px; padding-left:24px; font-size:16px; line-height:1.7; }
#moon-description li { margin:6px 0; }
#moon-description table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; margin:18px 0; font-size:14px; line-height:1.5; }
#moon-description th, #moon-description td { padding:10px 14px; border:1px solid #e5e1dc; text-align:left; }
#moon-description th { background:#faf8f5; font-weight:600; }
#moon-description dt { font-weight:600; margin-top:12px; }
#moon-description dd { margin:3px 0 14px; }
@media(max-width:680px) {
  #moon-description > h2:first-child { font-size:24px; }
  #moon-description h3, #moon-description h4 { font-size:18px; margin-top:24px; }
  #moon-description p, #moon-description ul, #moon-description ol { font-size:15px; line-height:1.65; }
}
/* Accessible controls for horizontal product collections; touch scrolling stays native. */
.moon-rail__head { align-items: center; flex-wrap: wrap; }
.moon-rail__head h2 { flex: 1 1 240px; }
.moon-rail__pager { display: flex; flex: 0 0 auto; gap: 8px; margin-left: auto; }
.moon-rail__pager[hidden] { display: none !important; }
/* Explicit states override UniShop's later borderless button reset. */
.moon-preview-shell .moon-rail__arrow {
  display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0 !important;
  appearance: none !important; border: 1px solid transparent !important; border-radius: 50% !important;
  background: var(--moon-accent) !important; color: #fff !important; box-shadow: none !important;
  font: inherit; font-size: 30px; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.moon-preview-shell .moon-rail__arrow:hover:not(:disabled) { background: var(--moon-accent-dark) !important; }
.moon-preview-shell .moon-rail__arrow:disabled {
  color: #aaa59e !important; background: transparent !important; border-color: transparent !important;
  box-shadow: none !important; opacity: 1 !important; cursor: default; transform: none;
}
.moon-preview-shell .moon-rail__arrow:focus-visible, .moon-rail__track:focus-visible { outline: 3px solid #bd5900; outline-offset: 3px; }
@media (max-width: 680px) {
  .moon-rail__head { gap: 12px; }
  .moon-rail__head h2 { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .moon-preview-shell .moon-rail__arrow { transition: none; } }
/* Native UniShop desktop product menu, enriched from the current card. */
@media (min-width: 993px) {
  body.moon-preview-body #fly-menu.mnd-sticky-ready { border-bottom: 1px solid #eeeae5; background: #fff; box-shadow: 0 4px 16px rgb(30 25 20 / 7%); }
  body.moon-preview-body #fly-menu.mnd-sticky-ready > .container { width: 100%; max-width: 1720px; padding: 0 32px; }
  body.moon-preview-body #fly-menu.mnd-sticky-ready .row { height: auto; min-height: 90px; margin: 0; }
  body.moon-preview-body #fly-menu .mnd-sticky-product-host { flex: 1 1 0%; min-width: 0; padding: 12px 0; overflow: visible; }
  .mnd-sticky-product { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; align-items: center; gap: 28px; width: 100%; min-width: 0; color: #242424; }
  .mnd-sticky-product__summary { display: flex; align-items: center; gap: 18px; min-width: 0; color: inherit; text-decoration: none; }
  .mnd-sticky-product__summary:hover { color: inherit; text-decoration: none; }
  .mnd-sticky-product__photo { display: block; flex: 0 0 88px; width: 88px; height: 64px; object-fit: contain; border-radius: 8px; background: #f7f6f3; }
  .mnd-sticky-product__photo[hidden], .mnd-sticky-product__old[hidden], .mnd-sticky-product__facts[hidden] { display: none; }
  .mnd-sticky-product__copy { display: block; min-width: 0; }
  .mnd-sticky-product__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.4; font-weight: 650; letter-spacing: -.015em; }
  .mnd-sticky-product__facts { display: flex; align-items: baseline; gap: 16px; margin-top: 7px; min-width: 0; overflow: hidden; font-size: 12px; line-height: 1.5; }
  .mnd-sticky-product__fact { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnd-sticky-product__fact strong { font-weight: 550; }
  .mnd-sticky-product__label { color: #74716e; }
  .mnd-sticky-product__prices { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; width: max-content; white-space: nowrap; line-height: 1.25; font-variant-numeric: tabular-nums; }
  .mnd-sticky-product__current { display: block; white-space: nowrap; font-size: 24px; font-weight: 750; letter-spacing: -.03em; }
  .mnd-sticky-product__old { display: block; white-space: nowrap; color: #87827d; font-size: 12px; }
  .mnd-sticky-product__cart { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; min-width: 146px; padding: 12px 22px; border: 0; border-radius: 9px; background: #f77b08; color: #fff; font: inherit; font-size: 14px; font-weight: 650; line-height: 1.4; white-space: nowrap; cursor: pointer; }
  .mnd-sticky-product__cart:hover:not(:disabled) { background: #df6900; }
  .mnd-sticky-product__cart:disabled { opacity: .6; cursor: default; }
  .mnd-sticky-product__summary:focus-visible, .mnd-sticky-product__cart:focus-visible { outline: 3px solid #aa4b00; outline-offset: 4px; }
  body.moon-preview-body.mnd-sticky-desktop .moon-buybar { display: none; }
}
@media (min-width: 993px) and (max-width: 1200px) {
  body.moon-preview-body #fly-menu.mnd-sticky-ready > .container { padding: 0 24px; }
  .mnd-sticky-product { gap: 20px; }
  .mnd-sticky-product__summary { gap: 12px; }
  .mnd-sticky-product__photo { flex-basis: 72px; width: 72px; height: 54px; }
  .mnd-sticky-product__name { font-size: 14px; }
  .mnd-sticky-product__facts { gap: 10px; font-size: 11px; }
  .mnd-sticky-product__fact:nth-child(n+3) { display: none; }
  .mnd-sticky-product__current { font-size: 21px; }
  .mnd-sticky-product__cart { min-width: 126px; }
}


/* Complete delivery terms and factual model comparison. */
.moon-delivery-detail__content { max-width: 100%; color: var(--moon-ink); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.moon-delivery-detail__content p { max-width: none; margin: 0 0 14px; color: inherit; font-size: inherit; line-height: inherit; }
.moon-delivery-detail__content h2, .moon-delivery-detail__content h3, .moon-delivery-detail__content h4 { margin: 22px 0 12px; font-size: 18px; letter-spacing: normal; }
.moon-delivery-detail__content ul, .moon-delivery-detail__content ol { padding-left: 23px; margin: 12px 0 18px; }
.moon-delivery-detail__content li + li { margin-top: 6px; }
.moon-content-table { max-width: 100%; min-width: 0; overflow-x: auto; margin: 16px 0 24px; -webkit-overflow-scrolling: touch; }
.moon-content-table:focus-visible { outline: 2px solid var(--moon-accent, #ef7f1a); outline-offset: 3px; }
.moon-content-table table { width: 100%; border-collapse: collapse; color: var(--moon-ink); font-size: 14px; line-height: 1.5; }
.moon-content-table th, .moon-content-table td { padding: 12px 14px; border: 1px solid var(--moon-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.moon-content-table th { font-weight: 650; background: var(--moon-soft, #f7f7f4); }
.moon-content-table caption { padding: 0 0 12px; color: var(--moon-muted); text-align: left; }
@media (max-width: 680px) {
  .moon-delivery-detail__content { font-size: 14px; }
  .moon-content-table th, .moon-content-table td { padding: 10px 12px; }



}

/* Visual comparison keeps each photograph, variant and price with its own SKU. */
.moon-comparison { min-width: 0; margin-top: 34px; }
.moon-comparison__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.moon-comparison .moon-comparison__intro { max-width: 780px; margin: 0; font-size: 16px; }
.moon-preview-shell .moon-comparison__differences { flex: 0 0 auto; min-height: 44px; padding: 10px 16px !important; border: 1px solid var(--moon-line-strong) !important; border-radius: 9px !important; background: #fff !important; color: var(--moon-ink) !important; font: inherit; font-size: 14px; cursor: pointer; }
.moon-preview-shell .moon-comparison__differences[aria-pressed="true"] { border-color: var(--moon-accent-dark) !important; background: #fff1e5 !important; color: #914309 !important; }
.moon-comparison .moon-comparison__notice { margin-bottom: 14px; font-size: 15px; }
.moon-comparison .moon-comparison__swipe { display: none; margin: 12px 0; font-size: 14px; color: #69655e; }
.moon-comparison [hidden] { display: none !important; }
.moon-comparison__scroll { border: 1px solid var(--moon-line); border-radius: 14px; scrollbar-width: thin; scrollbar-color: #b4aea5 #f5f3ef; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; }
.moon-comparison__scroll .moon-comparison__table { min-width: calc(144px + var(--moon-comparison-columns, 3) * 260px); border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16px; }
.moon-comparison__table th:first-child { width: 144px; }
.moon-comparison__scroll .moon-comparison__table th, .moon-comparison__scroll .moon-comparison__table td { padding: 16px; border: 0; border-right: 1px solid var(--moon-line); border-bottom: 1px solid var(--moon-line); }
.moon-comparison__scroll .moon-comparison__table tr > :last-child { border-right: 0; }
.moon-comparison__scroll .moon-comparison__table tfoot th, .moon-comparison__scroll .moon-comparison__table tfoot td { border-bottom: 0; }
.moon-comparison__scroll .moon-comparison__table thead th { background: #fff; }
.moon-comparison__scroll .moon-comparison__table tr > :first-child { position: sticky; left: 0; z-index: 1; background: #f7f6f3; }
.moon-comparison__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.moon-comparison__product { display: flex; flex-direction: column; gap: 12px; color: var(--moon-ink); text-decoration: none; }
.moon-preview-shell .moon-comparison__media { position: relative; display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 0; border-radius: 12px; background: #f7f6f3; overflow: hidden; }
.moon-preview-shell .moon-comparison__media img { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; max-height: none; min-height: 0; object-fit: contain; }
.moon-comparison__photo-missing { color: #6b675f; font-size: 14px; font-weight: 400; }
.moon-comparison__name { font-size: 18px; font-weight: 650; line-height: 1.4; }
.moon-comparison__variant { color: #6b675f; font-size: 14px; font-weight: 400; line-height: 1.5; }
.moon-comparison__product:hover .moon-comparison__name { color: var(--moon-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.moon-comparison__price { font-size: 22px; font-weight: 700; white-space: nowrap; }
.moon-preview-shell .moon-comparison__open { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 16px; border: 1px solid #d8d4cd; border-radius: 10px; color: var(--moon-ink); background: #f6f5f2; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: left; text-decoration: none; }
.moon-comparison__open-label { min-width: 0; }
.moon-comparison__open-arrow { flex: 0 0 auto; color: #a74c00; font-size: 23px; font-weight: 400; line-height: 1; }
.moon-preview-shell .moon-comparison__open:hover { color: var(--moon-ink); border-color: #ba5909; background: #fff2e6; }
.moon-comparison__product:focus-visible, .moon-comparison__open:focus-visible, .moon-comparison__differences:focus-visible { outline: 3px solid #bd5900; outline-offset: 3px; }
@media (max-width: 1100px) {
  .moon-comparison .moon-comparison__swipe { display: block; }
}
@media (max-width: 680px) {
  .moon-comparison { margin-top: 20px; }
  .moon-comparison__toolbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .moon-comparison__scroll .moon-comparison__table { min-width: calc(108px + var(--moon-comparison-columns, 3) * 248px); font-size: 14px; }
  .moon-comparison__table th:first-child { width: 108px; }
  .moon-comparison__scroll .moon-comparison__table th, .moon-comparison__scroll .moon-comparison__table td { padding: 12px; }
  .moon-preview-shell .moon-comparison__open { padding: 12px 14px; font-size: 14px; }
  .moon-comparison__name { font-size: 16px; }
  .moon-comparison__price { font-size: 20px; }
}
/* One fixed desktop header at a time; native mobile purchase controls stay separate. */
@media (min-width: 993px) {
  body.moon-preview-body #fly-menu.mnd-sticky-controlled {
    position: fixed !important; top: 0 !important; right: 0; bottom: auto !important; left: 0;
    width: 100%; margin-top: 0 !important; z-index: 1000 !important;
    transform: translateY(-110%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transition: opacity .15s ease, transform .15s ease;
  }
  body.moon-preview-body #fly-menu.mnd-sticky-controlled.mnd-sticky-visible {
    transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
  body.moon-preview-body.mnd-product-bar-active .mnd-sticky-site-header {
    transform: translateY(-110%) !important; visibility: hidden !important; pointer-events: none !important;
  }
  body.moon-preview-body #fly-menu.mnd-sticky-controlled .mnd-sticky-product-host { display: flex !important; width: 100%; }
  body.moon-preview-body #fly-menu.mnd-sticky-controlled .mnd-sticky-product__cart {
    border: 0 !important; border-radius: 9px !important; background: #f77b08 !important; color: #fff !important;
  }
  body.moon-preview-body #fly-menu.mnd-sticky-controlled .mnd-sticky-product__cart:hover:not(:disabled) { background: #df6900 !important; }
  body.moon-preview-body.mnd-product-bar-active .moon-detail-card,
  body.moon-preview-body.mnd-product-bar-active .moon-rail { scroll-margin-top: calc(var(--mnd-product-bar-height, 96px) + 16px); }
}
@media (min-width: 993px) and (prefers-reduced-motion: reduce) {
  body.moon-preview-body #fly-menu.mnd-sticky-controlled { transition: none; }
}
/* The site's header is above Bootstrap modals; suppress that layer while a dialog is open. */
@media (min-width: 993px) {
  body.moon-preview-body.modal-open .mnd-sticky-site-header { visibility: hidden !important; pointer-events: none !important; }
  body.moon-preview-body.modal-open #fly-menu.mnd-sticky-controlled { visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; }
}
/* Production mechanism instructions, next to the motion diagram. */
.moon-preview-shell .moon-mechanism__grid--illustrated {
  max-width: 1160px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.moon-preview-shell .moon-mechanism__illustration {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  max-width: 560px;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  color: var(--moon-ink) !important;
  background: #faf9f7 !important;
  border: 1px solid var(--moon-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.moon-preview-shell .moon-mechanism__illustration[hidden] { display: none !important; }
.moon-preview-shell .moon-mechanism__illustration img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.moon-preview-shell .moon-mechanism__zoom {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.moon-preview-shell .moon-mechanism__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.3;
}
.moon-preview-shell .moon-mechanism__info,
.moon-preview-shell [data-moon-mechanism-info] {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  flex-shrink: 0;
  font-size: 17px !important;
  line-height: 1 !important;
}
.moon-preview-shell .moon-mechanism__copy { min-width: 0; }
.moon-preview-shell .moon-mechanism__grid--illustrated .moon-mechanism__animation { margin-top: 24px; }
.moon-preview-shell .moon-mechanism__illustration:focus-visible,
.moon-preview-shell .moon-mechanism__info:focus-visible,
.moon-preview-shell [data-moon-mechanism-info]:focus-visible { outline: 3px solid var(--moon-accent); outline-offset: 4px; }
.moon-preview-shell .moon-mechanism__grid--without-illustration { grid-template-columns: minmax(0, 1fr); max-width: 700px; }
@media (max-width: 760px) {
  .moon-preview-shell .moon-mechanism__grid--illustrated { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .moon-preview-shell .moon-mechanism__illustration { max-width: 520px; margin-inline: auto; }
  .moon-preview-shell .moon-mechanism__info,
  .moon-preview-shell [data-moon-mechanism-info] { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
}