/* ==========================================================================
   MANGORIVO — REFERENCE LOOK
   Built to design/light_theme.png and design/dark_theme.png.

   This sheet is loaded AFTER style.css and wins on source order, so almost
   nothing here needs raised specificity or !important. It owns the homepage,
   the product card, the header bar and the footer; style.css keeps everything
   else.

   Namespacing: new components are prefixed `mg-r`. Where a reference rule has
   to beat an existing one on the SAME selector, the prefix `body.mg` adds the
   smallest winning increment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   R0. TOKENS
   The reference ground is a warm off-white, not pure white, and its dark
   ground is a mid forest green rather than the near-black style.css uses.
   Both are set here so the rest of the sheet can read one name.
   -------------------------------------------------------------------------- */

:root {
  --mgr-ground: #fffbf4;        /* page behind every section        */
  --mgr-hero: #fdf0dd;          /* hero band                        */
  --mgr-hero-2: #fff7ec;        /* hero band, copy side             */
  /* Was #f7f6f2, a cool grey: measured against the board it read +5 R-B where
     the board's own stage is a neutral white on a warm ground. Warmed to sit
     with the page instead of fighting it. */
  --mgr-stage: #fdfaf4;         /* product image stage inside a card */
  --mgr-card: #ffffff;
  --mgr-hairline: #eceade;
  --mgr-band: #fdeedd;          /* newsletter band                  */
  --mgr-promo-green: #e4efe2;
  --mgr-promo-warm: #fdeacd;
  --mgr-foot: #ffffff;

  --mgr-maxw: 1307px;
  --mgr-gut: clamp(1rem, 3.2vw, 2rem);

  /* Sampled from the board's eight category tiles. The previous set opened on
     #eaf0f6, a blue -- nothing on the board is blue, and it was the one cold
     thing in the row. Overall the page measured +20.4 R-B against the board's
     +26.2; these and --mgr-stage close most of that gap, and the photography
     in the promo and collection rows closes the rest. */
  --mgr-t1: #eef6f2;
  --mgr-t2: #fdf6ec;
  --mgr-t3: #fdf4e9;
  --mgr-t4: #f7f5eb;
  --mgr-t5: #fdf3ec;
  --mgr-t6: #fdf1eb;
  --mgr-t7: #f0f2e9;
  --mgr-t8: #fef4e7;

  --mgr-r-tile: 22px;
  --mgr-r-card: 18px;
  --mgr-r-band: clamp(28px, 4vw, 56px);
}

:root[data-theme="dark"] {
  --mgr-ground: #0d2a20;
  --mgr-hero: #123123;
  --mgr-hero-2: #0f2c1f;
  --mgr-stage: #16392c;
  --mgr-card: #11301f;
  --mgr-hairline: #24543d;
  --mgr-band: #14382a;
  --mgr-promo-green: #17402e;
  --mgr-promo-warm: #3a2d1b;
  --mgr-foot: #0a2219;

  --mgr-t1: #16321f;
  --mgr-t2: #2c2f22;
  --mgr-t3: #33291f;
  --mgr-t4: #1e3a2a;
  --mgr-t5: #33272a;
  --mgr-t6: #322428;
  --mgr-t7: #233524;
  --mgr-t8: #352b1d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mgr-ground: #0d2a20;
    --mgr-hero: #123123;
    --mgr-hero-2: #0f2c1f;
    --mgr-stage: #16392c;
    --mgr-card: #11301f;
    --mgr-hairline: #24543d;
    --mgr-band: #14382a;
    --mgr-promo-green: #17402e;
    --mgr-promo-warm: #3a2d1b;
    --mgr-foot: #0a2219;
  }
}

/* --------------------------------------------------------------------------
   R1. PAGE FRAME
   -------------------------------------------------------------------------- */

body.mg,
body.mg .site,
body.mg .site-container,
body.mg #wrapper {
  background: var(--mgr-ground);
}

body.mg .mg-wrap {
  width: 100%;
  max-width: var(--mgr-maxw);
  margin-inline: auto;
  padding-inline: var(--mgr-gut);
}

body.mg .mg-main.mg-ref {
  background: var(--mgr-ground);
  padding-bottom: 0;
}

/* Section rhythm. The reference separates rows with space, not rules or
   panels, so the panel chrome the old homepage used is removed outright.
   The figures are measured off the board, scaled to a 1440 viewport: 40px
   from a section's last row to the next heading, 32px below the hero. The
   previous clamp ran to 84px and was the main reason this page came out more
   than twice the board's height. */
.mg-ref .mg-rsec {
  margin-top: clamp(1.75rem, 2.9vw, 2.6rem);
}
.mg-ref .mg-rhero + .mg-rsec {
  margin-top: clamp(1.5rem, 2.2vw, 2rem);
}
.mg-ref .mg-rsec--tight {
  margin-top: clamp(1.5rem, 2.4vw, 2.1rem);
}
.mg-ref .mg-panel {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* The marquee strip under the header has no counterpart in the reference and
   is the first thing the eye lands on. It is suppressed rather than deleted,
   so turning it back on is one line. */
body.mg .mg-ticker {
  display: none;
}

/* --------------------------------------------------------------------------
   R2. HEADER
   Logo, centred nav, pill search, icon cluster — all already in the markup;
   this is the reference's proportions and the pill search field.
   -------------------------------------------------------------------------- */

body.mg .site-header-wrap,
body.mg .site-header-row {
  background: var(--mgr-card);
}

/* The page frame above paints every .site-container cream. In the header that is
   the centred column around the row, so on wide windows its 24px gutters showed
   as cream strips beside the white bar. The header's own surface shows through. */
body.mg .site-header-wrap .site-container {
  background: transparent;
}

body.mg #main-header .site-header-row-container-inner {
  border-bottom: 1px solid var(--mgr-hairline);
}

body.mg .mg-hsearch {
  flex: 0 1 380px;
}

body.mg .mg-hsearch input[type="search"] {
  height: 46px;
  border-radius: var(--mg-r-pill);
  border: 1px solid var(--mgr-hairline);
  background: var(--mgr-ground);
  padding-inline: 2.85rem 1rem;
  font-size: 0.95rem;
}

body.mg .mg-hsearch input[type="search"]:focus-visible {
  outline: 2px solid var(--mg-orange);
  outline-offset: 1px;
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   R3. HERO
   A full-bleed warm band with a large rounded bottom edge, copy left, scene
   right. The old hero was an inset card the width of the content column,
   which is the single biggest reason the page read as the previous design.
   -------------------------------------------------------------------------- */

.mg-ref .mg-rhero {
  position: relative;
  background: linear-gradient(104deg, var(--mgr-hero-2) 0%, var(--mgr-hero-2) 34%, var(--mgr-hero) 74%);
  border-end-start-radius: var(--mgr-r-band);
  border-end-end-radius: var(--mgr-r-band);
  overflow: clip;
}

/* The board puts the copy over the left of the band and lets the scene fill
   the rest to the viewport edge, so the inner row is one column, not two. */
.mg-ref .mg-rhero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(320px, 27.5vw, 430px);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.9rem, 5vw, 4rem);
}

.mg-ref .mg-rhero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 40%;
}

/* Every inline arrow in this sheet. Without a base size the SVG inherits the
   font box and renders at the eyebrow's full line height. */
.mg-ref .mg-ra {
  flex: none;
  width: 16px;
  height: 16px;
}

.mg-ref .mg-rhero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: var(--mg-r-pill);
  background: rgba(255, 130, 21, 0.14);
  color: var(--mg-orange-dk);
  font-family: var(--mg-font-label, inherit);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:root[data-theme="dark"] .mg-ref .mg-rhero__eyebrow,
.mg-ref .mg-rhero__eyebrow {
  color: var(--mg-orange-dk);
}

.mg-ref .mg-rhero__title {
  margin: 0;
  color: var(--mg-head);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mg-ref .mg-rhero__accent {
  color: var(--mg-orange);
}

.mg-ref .mg-rhero__lead {
  margin: 0;
  max-width: 36ch;
  color: var(--mg-text-2);
  font-size: clamp(0.88rem, 0.95vw, 0.98rem);
  line-height: 1.55;
}

/* Social proof. Four product photographs stand in for the reference's four
   avatars; the figure beside them is the published catalogue count. */
.mg-ref .mg-rproof {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.35rem;
}

.mg-ref .mg-rproof__faces {
  display: inline-flex;
}

.mg-ref .mg-rproof__faces img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mgr-card);
  border: 2px solid var(--mgr-card);
  box-shadow: var(--mg-shadow-1);
}

.mg-ref .mg-rproof__faces img + img {
  margin-inline-start: -12px;
}

.mg-ref .mg-rproof__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.88rem;
  line-height: 1.3;
}

.mg-ref .mg-rproof__text strong {
  color: var(--mg-text);
  font-weight: 700;
}

.mg-ref .mg-rproof__sub {
  color: var(--mg-text-2);
  font-size: 0.82rem;
}

.mg-ref .mg-rproof .mg-stars svg {
  width: 13px;
  height: 13px;
}

/* Fallback path: a configured slide photograph still renders inside the row. */
.mg-ref .mg-rhero__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.mg-ref .mg-rhero__media:not(.mg-rhero__media--scene) img,
.mg-ref .mg-rhero__media:not(.mg-rhero__media--scene) picture {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(300px, 40vw, 520px);
  object-fit: contain;
}

/* The scene fills the band and bleeds off the right edge of the viewport.
   65% of the viewport matches the proportion on the board.

   `cover` with `object-position: left center` is the specific combination that
   works here. The render carries its own alpha fade on the left, so cropping
   from that side would cut the fade away and end the scene on a hard vertical
   seam; anchoring left means any crop is taken off the right, which is the
   edge that is supposed to run off screen anyway. `contain` was the earlier
   attempt and was wrong for the opposite reason -- it letterboxed the art
   inside a taller band and showed a hard horizontal edge along its top. */
.mg-ref .mg-rhero__media--scene {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  width: 65%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.mg-ref .mg-rhero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: left center;
}

/* The toggle, not the OS, decides which scene shows -- see
   mangorivo_hero_art(). */
.mg-ref .mg-rhero__art--dark { display: none; }
:root[data-theme="dark"] .mg-ref .mg-rhero__art--light { display: none; }
:root[data-theme="dark"] .mg-ref .mg-rhero__art--dark { display: block; }

/* --------------------------------------------------------------------------
   R4. SECTION HEAD
   Title and a one-line subtitle on the left, a quiet "see all" on the right.
   -------------------------------------------------------------------------- */

.mg-ref .mg-rhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(0.6rem, 1.1vw, 0.95rem);
}

.mg-ref .mg-rhead__t {
  margin: 0;
  color: var(--mg-head);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.mg-ref .mg-rhead__s {
  margin: 0.2rem 0 0;
  color: var(--mg-text-2);
  font-size: 0.82rem;
}

.mg-ref .mg-rhead__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  color: var(--mg-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mg-ref .mg-rhead__more:hover {
  color: var(--mg-orange-dk);
}

.mg-ref .mg-rhead__more .mg-ra,
.mg-ref .mg-rbtn .mg-ra {
  width: 16px;
  height: 16px;
  transition: transform var(--mg-t-micro) var(--mg-ease);
}

.mg-ref .mg-rhead__more:hover .mg-ra,
.mg-ref .mg-rbtn:hover .mg-ra {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   R5. BUTTONS
   -------------------------------------------------------------------------- */

.mg-ref .mg-rbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  border: 0;
  border-radius: var(--mg-r-pill);
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--mg-t-micro) var(--mg-ease),
              box-shadow var(--mg-t-micro) var(--mg-ease),
              background-color var(--mg-t-micro) var(--mg-ease);
}

.mg-ref .mg-rbtn--lg {
  padding: 0.95rem 1.9rem;
  font-size: 1rem;
}

.mg-ref .mg-rbtn--accent {
  background: var(--mg-orange);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(255, 130, 21, 0.9);
}

.mg-ref .mg-rbtn--accent:hover {
  background: var(--mg-orange-dk);
  transform: translateY(-1px);
}

.mg-ref .mg-rbtn--green {
  background: #17503c;
  color: #fff;
}

.mg-ref .mg-rbtn--green:hover {
  background: #0f3a2a;
  transform: translateY(-1px);
}

.mg-ref .mg-rbtn:focus-visible {
  outline: 2px solid var(--mg-orange-dk);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   R6. CATEGORY TILES
   Equal squares, each on its own pastel tint, art large, label inside the
   tile at the bottom. The old tiles put a small image above an outside label.
   -------------------------------------------------------------------------- */

/* auto-fit rather than a fixed eight, so the row stays full-width whether the
   shop has six categories or forty. */
.mg-ref .mg-rcats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: clamp(0.4rem, 1.1vw, 1rem);
}

.mg-ref .mg-rcat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  aspect-ratio: 1 / 1;
  padding: 0.9rem 0.5rem 0.95rem;
  border-radius: var(--mgr-r-tile);
  background: var(--tint, var(--mgr-t2));
  color: var(--mg-text);
  text-decoration: none;
  transition: transform var(--mg-t-ui) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease);
}

:root[data-theme="dark"] .mg-ref .mg-rcat,
:root:not([data-theme="light"]) .mg-ref .mg-rcat {
  border: 1px solid var(--mgr-hairline);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mg-ref .mg-rcat {
    border: 0;
  }
}

.mg-ref .mg-rcat:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-2);
}

.mg-ref .mg-rcat__art {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.mg-ref .mg-rcat__art img {
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 82%;
  object-fit: contain;
  transition: transform var(--mg-t-breathe) var(--mg-ease);
}

.mg-ref .mg-rcat:hover .mg-rcat__art img {
  transform: scale(1.07);
}

.mg-ref .mg-rcat__label {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.mg-ref .mg-rcat__dots {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle 3.5px at 16px 50%, currentColor 100%, transparent 0),
    radial-gradient(circle 3.5px at 27px 50%, currentColor 100%, transparent 0),
    radial-gradient(circle 3.5px at 38px 50%, currentColor 100%, transparent 0),
    rgba(255, 130, 21, 0.14);
  color: var(--mg-orange-dk);
}

/* --------------------------------------------------------------------------
   R7. PRODUCT GRID AND CARD
   Six across on a desktop, as the reference has. The card is image stage,
   title, rating, price, then a full-width orange action — no hover overlay,
   which is unreachable on a phone anyway.
   -------------------------------------------------------------------------- */

.mg-ref .mg-rgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.4rem, 0.6vw, 0.5rem);
  align-items: stretch;
}

.mg-ref .mg-rgrid .mg-card,
body.mg .mg-card:not(.mg-card--compact) {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--mgr-card);
  border: 1px solid var(--mgr-hairline);
  border-radius: var(--mgr-r-card);
  box-shadow: none;
  padding: 0;
  transition: transform var(--mg-t-ui) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease),
              border-color var(--mg-t-ui) var(--mg-ease);
}

body.mg .mg-card:not(.mg-card--compact):hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-3);
  border-color: transparent;
}

body.mg .mg-card:not(.mg-card--compact)__media {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  padding: 0.85rem;
  background: var(--mgr-stage);
  border-radius: 0;
  overflow: hidden;
}

body.mg .mg-card:not(.mg-card--compact)__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--mg-t-breathe) var(--mg-ease);
}

body.mg .mg-card:not(.mg-card--compact):hover .mg-card__media img {
  transform: scale(1.05);
}

body.mg .mg-card:not(.mg-card--compact)__badge {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-start: 0.6rem;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: var(--mg-r-pill);
  background: var(--mg-orange);
  color: #fff;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

body.mg .mg-card:not(.mg-card--compact)__badge--new {
  background: #2f7d51;
}

body.mg .mg-card:not(.mg-card--compact)__fav {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--mg-text);
  cursor: pointer;
  opacity: 1;
  transform: none;
}

:root[data-theme="dark"] body.mg .mg-card:not(.mg-card--compact)__fav {
  background: rgba(10, 41, 33, 0.8);
}

body.mg .mg-card:not(.mg-card--compact)__fav svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

body.mg .mg-card:not(.mg-card--compact)__fav[aria-pressed="true"] svg {
  fill: var(--mg-orange);
  stroke: var(--mg-orange);
}

body.mg .mg-card:not(.mg-card--compact)__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 0.8rem 0.3rem;
}

body.mg .mg-card:not(.mg-card--compact)__title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.32;
}

body.mg .mg-card:not(.mg-card--compact)__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--mg-text);
  text-decoration: none;
}

body.mg .mg-card:not(.mg-card--compact)__rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--mg-text-2);
}

body.mg .mg-card:not(.mg-card--compact)__rating svg {
  width: 12px;
  height: 12px;
  fill: var(--mg-orange);
}

body.mg .mg-card:not(.mg-card--compact)__rating svg .off,
body.mg .mg-card:not(.mg-card--compact)__rating svg path.off {
  fill: var(--mgr-hairline);
}

body.mg .mg-card:not(.mg-card--compact)__price {
  margin: auto 0 0;
  color: var(--mg-head);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

body.mg .mg-card:not(.mg-card--compact)__price del {
  margin-inline-start: 0.35rem;
  color: var(--mg-text-2);
  font-size: 0.82rem;
  font-weight: 500;
}

body.mg .mg-card:not(.mg-card--compact)__price ins {
  text-decoration: none;
}

/* The VAT and shipping notice is required beside the price under PAngV, so it
   stays — but at a size and weight that reads as a footnote instead of
   competing with the price, which is what it was doing. */
body.mg .mg-card:not(.mg-card--compact)__price .woocommerce-Price-taxLabel,
body.mg .mg-card:not(.mg-card--compact)__price small,
body.mg .mg-card:not(.mg-card--compact)__price .wc-gzd-additional-info {
  display: block;
  margin-top: 0.15rem;
  color: var(--mg-text-2);
  font-size: 0.64rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

body.mg .mg-card:not(.mg-card--compact)__quick {
  position: static;
  display: block;
  padding: 0.55rem 0.8rem 0.8rem;
  background: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.mg .mg-card:not(.mg-card--compact)__quick .mg-btn,
body.mg .mg-card:not(.mg-card--compact)__quick .mg-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 38px;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--mg-r-pill);
  background: var(--mg-orange);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

body.mg .mg-card:not(.mg-card--compact)__quick .mg-btn:hover {
  background: var(--mg-orange-dk);
}

/* --------------------------------------------------------------------------
   R8. PROMO PAIR
   Copy on a flat tint at the left, photograph bleeding off the right edge
   under a gradient that hands one into the other.
   -------------------------------------------------------------------------- */

.mg-ref .mg-rpromos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.mg-ref .mg-rpromo {
  position: relative;
  /* A floor, not a fixed height: aspect-ratio with overflow:hidden cannot
     grow, so it clipped long German copy at both ends. */
  min-height: clamp(150px, 15vw, 215px);
  display: flex;
  border-radius: var(--mgr-r-tile);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}

.mg-ref .mg-rpromo--green {
  background: var(--mgr-promo-green);
}

.mg-ref .mg-rpromo--warm {
  background: var(--mgr-promo-warm);
}

/* The board's own photograph, cut from the reference and filling the right of
   the panel exactly as it does there. */
.mg-ref .mg-rpromo__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 48%;
  z-index: 0;
  display: block;
}

.mg-ref .mg-rpromo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--mg-t-breathe) var(--mg-ease);
}

.mg-ref .mg-rpromo__img--dark { display: none; }
:root[data-theme="dark"] .mg-ref .mg-rpromo__img--light { display: none; }
:root[data-theme="dark"] .mg-ref .mg-rpromo__img--dark { display: block; }

.mg-ref .mg-rpromo:hover .mg-rpromo__media img {
  transform: scale(1.04);
}

/* Hands the photograph into the tint rather than ending it on a seam. */
.mg-ref .mg-rpromo__media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -2px;
  z-index: 1;
  background: linear-gradient(90deg,
    var(--mgr-tintfade, var(--mgr-promo-green)) 0%,
    rgba(255, 255, 255, 0) 22%);
}

.mg-ref .mg-rpromo--green .mg-rpromo__media::after {
  --mgr-tintfade: var(--mgr-promo-green);
}

.mg-ref .mg-rpromo--warm .mg-rpromo__media::after {
  --mgr-tintfade: var(--mgr-promo-warm);
}

.mg-ref .mg-rpromo__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  align-self: stretch;
  width: min(60%, 24rem);
  padding: clamp(1.1rem, 2.4vw, 2rem);
  justify-content: center;
}

.mg-ref .mg-rpromo__t {
  color: var(--mg-head);
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mg-ref .mg-rpromo__s {
  color: var(--mg-text-2);
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  line-height: 1.45;
}

.mg-ref .mg-rpromo .mg-rbtn {
  margin-top: 0.3rem;
}

/* --------------------------------------------------------------------------
   R9. TRUST ROW
   Four claims, each a thin orange ring around an outline icon, separated by
   hairlines. No surrounding box — the reference sets this straight on the
   page ground.
   -------------------------------------------------------------------------- */

.mg-ref .mg-rtrust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

/*
 * min-width:0 is load-bearing. A grid item keeps min-width:auto even inside a
 * minmax(0,1fr) track, so its min-content width -- here a single unbreakable
 * German compound such as "Deutschlandweit" -- can push the whole item past
 * its column and across the divider into the next one.
 */
.mg-ref .mg-rtrust__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.5rem clamp(0.6rem, 1.6vw, 1.5rem);
}

.mg-ref .mg-rtrust__item + .mg-rtrust__item {
  border-inline-start: 1px solid var(--mgr-hairline);
}

.mg-ref .mg-rtrust__ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(255, 130, 21, 0.45);
  border-radius: 50%;
  color: var(--mg-orange);
}

.mg-ref .mg-rtrust__ring svg {
  width: 22px;
  height: 22px;
}

.mg-ref .mg-rtrust__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  /* The document is lang="de", so the browser's German patterns break
     compounds at legal points rather than mid-syllable. break-word is the
     fallback for anything it has no pattern for. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.mg-ref .mg-rtrust__text strong {
  color: var(--mg-text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.mg-ref .mg-rtrust__text span {
  color: var(--mg-text-2);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   R10. COLLECTION TILES
   Photograph behind, copy top-left over a gradient scrim, a round arrow at
   the bottom-left corner.
   -------------------------------------------------------------------------- */

.mg-ref .mg-rcolls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(0.4rem, 0.6vw, 0.55rem);
}

.mg-ref .mg-rcoll {
  position: relative;
  display: block;
  aspect-ratio: 1.4 / 1;
  border-radius: var(--mgr-r-card);
  overflow: hidden;
  background: var(--tint, var(--mgr-stage));
  text-decoration: none;
  isolation: isolate;
}

/* The board's photograph occupies the right of the tile and the copy keeps the
   tinted left, which is how the board reads once its baked-in label is cut
   away. See mangorivo_collection_tile_art(). */
.mg-ref .mg-rcoll__art {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: 56%;
  display: block;
}

.mg-ref .mg-rcoll__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--tint, var(--mg-tint-2)) 0%, rgba(255, 255, 255, 0) 30%);
}

.mg-ref .mg-rcoll__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mg-t-breathe) var(--mg-ease);
}

.mg-ref .mg-rcoll__img--dark { display: none; }
:root[data-theme="dark"] .mg-ref .mg-rcoll__img--light { display: none; }
:root[data-theme="dark"] .mg-ref .mg-rcoll__img--dark { display: block; }

.mg-ref .mg-rcoll:hover .mg-rcoll__art img {
  transform: scale(1.06);
}

.mg-ref .mg-rcoll__copy {
  max-width: 52%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.75rem 0;
}

.mg-ref .mg-rcoll__t {
  color: var(--mg-head);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}

.mg-ref .mg-rcoll__s {
  color: var(--mg-text-2);
  font-size: 0.78rem;
}

.mg-ref .mg-rcoll__go {
  position: absolute;
  z-index: 1;
  inset-block-end: 0.85rem;
  inset-inline-start: 0.9rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mgr-card);
  color: var(--mg-text);
  box-shadow: var(--mg-shadow-2);
  transition: transform var(--mg-t-ui) var(--mg-ease);
}

.mg-ref .mg-rcoll:hover .mg-rcoll__go {
  transform: translateX(3px);
}

.mg-ref .mg-rcoll__go .mg-ra {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   R11. NEWSLETTER BAND
   Full-bleed warm band, mark and copy left, a single pill holding the field
   and its button on the right.
   -------------------------------------------------------------------------- */

/* The board sets this as a rounded cream panel inset from the page edges, with
   soft shapes and foliage spilling past it on both sides -- not the flat
   edge-to-edge strip this was. The foliage is image work and is pending; the
   panel geometry is not, and is what makes the band read as designed. */
.mg-ref .mg-rnews {
  margin-top: clamp(2rem, 3.4vw, 3rem);
  padding-inline: var(--mgr-gut);
}

.mg-ref .mg-rnews__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.75rem);
  max-width: var(--mgr-maxw);
  margin-inline: auto;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.4vw, 2rem);
  background: var(--mgr-band);
  border-radius: var(--mgr-r-tile);
}

.mg-ref .mg-rnews__mark {
  flex: none;
  display: grid;
  place-items: center;
}

.mg-ref .mg-rnews__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.mg-ref .mg-rnews__t {
  margin: 0;
  color: var(--mg-head);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.mg-ref .mg-rnews__s {
  margin: 0.2rem 0 0;
  color: var(--mg-text-2);
  font-size: 0.82rem;
}

.mg-ref .mg-rnews__form {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 390px;
  padding: 4px;
  border-radius: var(--mg-r-pill);
  background: var(--mgr-card);
  box-shadow: var(--mg-shadow-1);
}

.mg-ref .mg-rnews__icon {
  position: absolute;
  inset-inline-start: 1.05rem;
  width: 19px;
  height: 19px;
  color: var(--mg-text-2);
  pointer-events: none;
}

.mg-ref .mg-rnews__form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding-inline: 2.65rem 0.75rem;
  border: 0;
  background: none;
  color: var(--mg-text);
  font-family: inherit;
  font-size: 0.92rem;
}

.mg-ref .mg-rnews__form input[type="email"]:focus {
  outline: none;
}

.mg-ref .mg-rnews__form:focus-within {
  outline: 2px solid var(--mg-orange);
  outline-offset: 2px;
}

.mg-ref .mg-rnews__form .mg-rbtn {
  flex: none;
  height: 42px;
}

/* --------------------------------------------------------------------------
   R12. FOOTER
   Kadence's own footer renders one line of attribution; this replaces it.
   -------------------------------------------------------------------------- */

body.mg .site-footer,
body.mg #colophon {
  display: none;
}

body.mg .mg-foot {
  background: var(--mgr-foot);
  border-top: 1px solid var(--mgr-hairline);
  margin-top: 0;
}

/* Five cells on the board: brand, three link columns, closing mark -- with
   hairlines between the brand and the columns, and before the mark. */
body.mg .mg-foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr);
  gap: clamp(1rem, 2.4vw, 2.4rem);
  padding-block: clamp(1.75rem, 3.2vw, 2.5rem);
}

body.mg .mg-foot__inner > .mg-foot__col:first-of-type,
body.mg .mg-foot__sign {
  border-inline-start: 1px solid var(--mgr-hairline);
  padding-inline-start: clamp(1rem, 2.4vw, 2.4rem);
}

body.mg .mg-foot__sign {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

body.mg .mg-foot__sign p {
  margin: 0;
  max-width: 11ch;
  color: #8a5a3c;
  font-family: var(--mg-font-display, inherit);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  transform: rotate(-4deg);
  transform-origin: left top;
}

:root[data-theme="dark"] body.mg .mg-foot__sign p {
  color: var(--mg-orange-dk);
}

body.mg .mg-foot__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mg-head);
  text-decoration: none;
}

body.mg .mg-foot__word {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.mg .mg-foot__tag {
  margin: 0.6rem 0 0;
  max-width: 28ch;
  color: var(--mg-text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

body.mg .mg-foot__h {
  margin: 0 0 0.6rem;
  color: var(--mg-head);
  font-size: 0.86rem;
  font-weight: 700;
}

body.mg .mg-foot__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

body.mg .mg-foot__col a {
  color: var(--mg-text-2);
  font-size: 0.88rem;
  text-decoration: none;
}

body.mg .mg-foot__col a:hover {
  color: var(--mg-orange-dk);
}

body.mg .mg-foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem 1.1rem;
  border-top: 1px solid var(--mgr-hairline);
}

body.mg .mg-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  order: 3;
}

body.mg .mg-foot__legal a {
  color: var(--mg-text-2);
  font-size: 0.8rem;
  text-decoration: none;
}

body.mg .mg-foot__legal a:hover {
  color: var(--mg-orange-dk);
}

body.mg .mg-foot__note {
  flex: 1 1 100%;
  order: 4;
}

body.mg .mg-foot__base p {
  margin: 0;
  color: var(--mg-text-2);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   R13. RESPONSIVE
   Column counts step down by available space. The phone keeps two product
   columns, which is what a shop grid is read at on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .mg-ref .mg-rgrid,
  .mg-ref .mg-rcolls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mg-ref .mg-rcats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mg-ref .mg-rhero__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
    min-height: 0;
  }
  .mg-ref .mg-rhero__media {
    order: -1;
  }
  /* A bare vh ceiling is wrong whenever the viewport is not a phone screen --
     an embedded frame, a print preview, a very tall window -- so it is capped
     in pixels as well. */
  .mg-ref .mg-rhero__media img {
    max-height: min(42vh, 340px);
  }
  .mg-ref .mg-rpromos {
    grid-template-columns: minmax(0, 1fr);
  }
  .mg-ref .mg-rpromo {
    min-height: 0;
  }
  .mg-ref .mg-rtrust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
  }
  .mg-ref .mg-rtrust__item:nth-child(odd) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  body.mg .mg-foot__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.mg .mg-foot__inner > .mg-foot__col:first-of-type,
  body.mg .mg-foot__sign {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  body.mg .mg-foot__sign {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .mg-ref .mg-rgrid,
  .mg-ref .mg-rcolls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mg-ref .mg-rcats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mg-ref .mg-rnews__inner {
    flex-wrap: wrap;
  }
  .mg-ref .mg-rnews__form {
    flex: 1 1 100%;
  }
}

@media (max-width: 560px) {
  .mg-ref .mg-rgrid,
  .mg-ref .mg-rcolls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mg-ref .mg-rcats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Copy and photograph have to add up to 100% here or the lead runs under the
     product. The panel also gets taller so three short lines still fit. */
  .mg-ref .mg-rpromo {
    min-height: 0;
  }
  .mg-ref .mg-rpromo__copy {
    width: 62%;
    padding-inline: 1rem;
  }
  .mg-ref .mg-rpromo__media {
    width: 38%;
  }
  .mg-ref .mg-rpromo .mg-rbtn {
    padding-inline: 0.9rem;
    font-size: 0.8rem;
  }
  .mg-ref .mg-rhead {
    align-items: flex-start;
  }
  .mg-ref .mg-rproof__faces img {
    width: 34px;
    height: 34px;
  }
  body.mg .mg-card:not(.mg-card--compact) .mg-card__quick .mg-btn {
    font-size: 0.76rem;
    padding-inline: 0.35rem;
  }
  body.mg .mg-foot__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Social marks in the footer brand column, as on the board. */
body.mg .mg-foot__social {
  display: flex;
  gap: 0.9rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

body.mg .mg-foot__social a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--mg-text);
  transition: color var(--mg-t-micro) var(--mg-ease);
}

body.mg .mg-foot__social a:hover {
  color: var(--mg-orange-dk);
}

body.mg .mg-foot__social svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   R14. HEADER SAVED-ITEMS ICON
   The board puts it between the account and the cart, with the same orange
   count pill the cart carries.
   -------------------------------------------------------------------------- */

body.mg .mg-wish-icon {
  position: relative;
}

body.mg .mg-wish-count {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--mg-r-pill);
  background: var(--mg-orange);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

body.mg .mg-wish-count.is-zero {
  display: none;
}

/* Below the width where the inline search fits, the header is already tight;
   saved items stay reachable from the account page and the bottom bar. */
@media (max-width: 860px) {
  body.mg .mg-wish-icon {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   R15. PLACEHOLDERS FOR THE ART THAT IS STILL BEING GENERATED
   The promo and collection photography was briefed to Codex (see
   design/CODEX-ASSET-BRIEF-2.md). Until it lands these rows render as flat
   tinted panels rather than as upscaled crops of the design mock, which is
   what they were and which looked soft at every size.
   -------------------------------------------------------------------------- */

.mg-ref .mg-rpromo:not(:has(.mg-rpromo__img)) .mg-rpromo__copy {
  width: min(80%, 32rem);
}

.mg-ref .mg-rcoll:not(:has(.mg-rcoll__img)) .mg-rcoll__copy {
  max-width: 86%;
}

/* --------------------------------------------------------------------------
   R16. HEADER FIT
   The board's nav is five items; this one is five plus a Categories trigger,
   and it also carries a theme toggle and a language switcher the board has
   no equivalent for. At 1440 that pushed the search field and the icons onto
   a second row. Tightening the nav and the field keeps it to one line without
   dropping anything.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  body.mg .mg-hsearch {
    flex: 0 1 300px;
    min-width: 180px;
  }

  body.mg #main-header .header-navigation ul.menu > li > a {
    padding-inline: 0.6rem;
    font-size: 0.92rem;
  }

  /*
   * One search affordance, not two: the icon button is a duplicate of the
   * inline field once that field is on screen.
   *
   * style.css already tries this at line 5277, and has never worked. Its
   * selector ends in `.mg-iconbtn--search` and scores (0,5,1); the
   * `display:flex` it is trying to beat ends in `.mg-iconbtn` but also matches
   * `body` and so scores (0,5,2). Equal class count, more elements, so the
   * flex wins no matter the order. Matching on the attribute as well takes
   * this to (0,6,2).
   */
  body.mg .header-navigation li.menu-item.mg-actions .mg-iconbtn[data-mg-search] {
    display: none;
  }
}

@media (min-width: 1100px) and (max-width: 1340px) {
  /* The flag and code are the first thing that can go: the switcher is still
     reachable from the footer and the drawer. */
  body.mg .mg-lang {
    display: none;
  }
}

/* ==========================================================================
   R17. PAGE ORNAMENTS
   The kit ships eleven vector ornaments under assets/shared/svg/. They are
   what the board scatters down the left and right edges and around the
   newsletter, and the page reads flat and cold without them.

   They are drawn as CSS backgrounds on pseudo-elements rather than as markup:
   nothing here is content, none of it should reach the accessibility tree, and
   SVG stays sharp at any size -- which the raster crops never were.

   Every one is pointer-events:none and inside an overflow-clipped parent, so
   none of them can create a horizontal scrollbar.
   ========================================================================== */

.mg-ref .mg-orn,
.mg-ref .mg-rhero::before,
.mg-ref .mg-rhero::after,
.mg-ref .mg-rnews::before,
.mg-ref .mg-rnews::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ---- hero: leaves and the orange curve entering from the left ---- */

.mg-ref .mg-rhero::before {
  inset-block-start: 46%;
  inset-inline-start: -4.5%;
  width: clamp(66px, 7vw, 104px);
  aspect-ratio: 360 / 290;
  background-image: url("../img/orn/floating-leaves.svg");
  opacity: 0.5;
}

.mg-ref .mg-rhero::after {
  inset-block-end: 12%;
  inset-inline-start: -4%;
  width: clamp(110px, 15vw, 225px);
  aspect-ratio: 390 / 130;
  background-image: url("../img/orn/orange-curve.svg");
  opacity: 0.3;
}

:root[data-theme="dark"] .mg-ref .mg-rhero::before {
  background-image: url("../img/orn/dark-shadow-leaves.svg");
  aspect-ratio: 370 / 320;
}

/* ---- newsletter: a warm blob and foliage past both ends of the panel ---- */

.mg-ref .mg-rnews {
  position: relative;
  overflow: clip;
}

.mg-ref .mg-rnews::before {
  inset-block: -12% auto;
  inset-inline-start: -3%;
  width: clamp(150px, 18vw, 290px);
  aspect-ratio: 380 / 250;
  background-image: url("../img/orn/warm-blob.svg");
  opacity: 0.5;
}

.mg-ref .mg-rnews::after {
  inset-block-end: -8%;
  inset-inline-end: -2%;
  width: clamp(110px, 13vw, 200px);
  aspect-ratio: 360 / 290;
  background-image: url("../img/orn/floating-leaves.svg");
  transform: scaleX(-1);
  opacity: 0.5;
}

:root[data-theme="dark"] .mg-ref .mg-rnews::before {
  background-image: url("../img/orn/dark-corner-glow.svg");
  aspect-ratio: 580 / 300;
  opacity: 1;
}

:root[data-theme="dark"] .mg-ref .mg-rnews::after {
  background-image: url("../img/orn/dark-shadow-leaves.svg");
  aspect-ratio: 370 / 320;
}

/* The panel has to sit above both of them. */
.mg-ref .mg-rnews__inner {
  position: relative;
  z-index: 1;
}

/* ---- footer: the board closes the page with leaves in the bottom corner --- */

body.mg .mg-foot {
  position: relative;
  overflow: clip;
}

body.mg .mg-foot::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: clamp(130px, 17vw, 265px);
  aspect-ratio: 510 / 230;
  background: url("../img/orn/bottom-corner-leaves.svg") no-repeat left bottom / contain;
  opacity: 0.14;
  pointer-events: none;
}

:root[data-theme="dark"] body.mg .mg-foot::before {
  background-image: url("../img/orn/dark-shadow-leaves.svg");
  aspect-ratio: 370 / 320;
  opacity: 0.45;
}

body.mg .mg-foot__inner,
body.mg .mg-foot__base {
  position: relative;
  z-index: 1;
}

/* The ornaments are scenery. Below the phone breakpoint they compete with the
   content for a 390px-wide column, so the big ones stand down. */
@media (max-width: 700px) {
  .mg-ref .mg-rhero::after,
  .mg-ref .mg-rnews::after,
  body.mg .mg-foot::before {
    display: none;
  }
  .mg-ref .mg-rhero::before {
    width: 74px;
    inset-block-start: 6%;
    opacity: 0.7;
  }
}

/* ==========================================================================
   R18. HERO AND HEADER ON A PHONE
   Two defects, both from desktop rules leaking down:

     1. .mg-rhero__copy keeps max-width:40% below 900px, so on a 390px screen
        the headline had about 140px to work in and broke onto four lines.
     2. The scene stays absolutely positioned at 65% width pinned to the band's
        bottom-right, where it overlapped the social-proof row and showed as a
        letterboxed strip.
   ========================================================================== */

@media (max-width: 900px) {
  .mg-ref .mg-rhero__copy {
    max-width: 100%;
  }

  /* The scene becomes an ordinary block. It is the first child of the band, so
     taking it out of the positioned flow puts it above the copy, which is also
     where it should be: the picture sets the tone, the copy answers it. */
  .mg-ref .mg-rhero__media--scene {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1900 / 820;
  }

  .mg-ref .mg-rhero__art {
    object-fit: cover;
    object-position: center;
  }

  .mg-ref .mg-rhero__art {
    object-position: center bottom;
  }

  .mg-ref .mg-rhero__inner {
    min-height: 0;
    padding-block: clamp(0.9rem, 3vw, 1.4rem) clamp(1.5rem, 5vw, 2.25rem);
  }

  .mg-ref .mg-rhero__title {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }

  .mg-ref .mg-rhero__lead {
    max-width: 46ch;
  }

  .mg-ref .mg-rhero__eyebrow {
    font-size: 0.62rem;
    padding: 0.42rem 0.8rem;
  }
}

/* The saved-items count pill is shared with the desktop header; the mobile bar
   needs it visible again at the width where the desktop one is hidden. */
@media (max-width: 860px) {
  body.mg .mg-mobilebar .mg-wish-icon {
    display: inline-flex;
  }
}

body.mg .mg-mobilebar .mg-iconbtn {
  position: relative;
}

body.mg .mg-mobilebar .mg-cart-count,
body.mg .mg-mobilebar .mg-wish-count {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--mg-r-pill);
  background: var(--mg-orange);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

body.mg .mg-mobilebar .mg-cart-count.is-zero,
body.mg .mg-mobilebar .mg-wish-count.is-zero {
  display: none;
}

/*
 * The mobile bar carries seven controls and at 390px that was squeezing the
 * wordmark to "Mangori…".
 *
 * An earlier pass solved it by hiding the language pill below 520px and the
 * theme toggle below 420px, on the assumption that both were also in the
 * drawer. They are not: each is rendered exactly twice, once in the desktop
 * cluster and once here, so hiding them left a phone with no way to change
 * theme or language at all. Room is made from the chrome instead -- smaller
 * controls, then the wordmark -- and every control stays.
 */
@media (max-width: 520px) {
  body.mg .mg-mobilebar .mg-iconbtn,
  body.mg .mg-mobilebar .mg-lang__btn {
    width: 34px;
    height: 34px;
  }

  body.mg .mg-mobilebar .mg-lang__btn {
    width: auto;
    padding-inline: 0.3rem;
    gap: 0.2rem;
  }

  body.mg .mg-mobilebar .mg-lang__code {
    font-size: 0.68rem;
  }
}

/*
 * Last resort. The wordmark is clipped rather than removed, so the home link
 * keeps its accessible name -- display:none here would leave a link whose only
 * content is an aria-hidden SVG, i.e. no name at all.
 */
@media (max-width: 560px) {
  body.mg .mg-brand__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* With account, saved items and cart added, the wordmark was being ellipsised
   to "Mangori…". Dropping it a couple of steps buys back the room without
   losing the name, which a logo mark alone would. */
@media (max-width: 460px) {
  body.mg .mg-brand__word {
    font-size: 0.98rem;
    letter-spacing: -0.03em;
  }
}

/* ==========================================================================
   R19. HERO CAROUSEL
   A scroll-snap track, not a transform slider. Swipe, momentum, scrollbar
   paging and the reduced-motion case are then the browser's own behaviour,
   and with JavaScript off the thing is still a usable horizontal scroller
   rather than a stack of seven heroes or a single frozen one.
   ========================================================================== */

/*
 * The band must have no padding of its own, or the scene -- which is pinned to
 * the slide -- cannot reach its edges and shows a hard horizontal seam top and
 * bottom. An inherited 20px top padding and the room reserved for the dots
 * were doing exactly that. The dots overlay the slide instead, and the copy
 * column carries the bottom space that keeps clear of them.
 */
.mg-ref .mg-rhero {
  position: relative;
  padding-block: 0;
}

.mg-ref .mg-rhero__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* The slides are the scroll items; the band's rounded bottom clips them. */
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

.mg-ref .mg-rhero__track::-webkit-scrollbar {
  display: none;
}

.mg-ref .mg-rhero__track:focus-visible {
  outline: 2px solid var(--mg-orange-dk);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .mg-ref .mg-rhero__track {
    scroll-behavior: auto;
  }
}

.mg-ref .mg-rhero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ---- the controls row, sitting under the copy inside the band ---- */

.mg-ref .mg-rhero__ui {
  position: absolute;
  inset-block-end: clamp(0.7rem, 1.4vw, 1.1rem);
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.mg-ref .mg-rhero__dots,
.mg-ref .mg-rhero__arrows {
  pointer-events: auto;
}

.mg-ref .mg-rhero__dots {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Sized from the kit's own discovery-dots.svg: a larger filled orange marker
   for the current slide, smaller muted ones either side. */
/* The button itself is the 24px target (WCAG 2.5.8: a pseudo-element does not
   count, the measured box is the element's own); the visible dot is ::before. */
.mg-ref .mg-rhero__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mg-ref .mg-rhero__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9c6b2;
  transform: translate(-50%, -50%);
  transition: width var(--mg-t-ui) var(--mg-ease),
              background-color var(--mg-t-ui) var(--mg-ease);
}

.mg-ref .mg-rhero__dot[aria-selected="true"]::before {
  width: 26px;
  border-radius: var(--mg-r-pill);
  background: var(--mg-orange);
}

.mg-ref .mg-rhero__dot:hover::before {
  background: var(--mg-orange-lt);
}

.mg-ref .mg-rhero__dot:focus-visible {
  outline: 2px solid var(--mg-orange-dk);
  outline-offset: 3px;
}

.mg-ref .mg-rhero__arrows {
  display: flex;
  gap: 0.4rem;
}

.mg-ref .mg-rhero__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--mgr-hairline);
  border-radius: 50%;
  background: var(--mgr-card);
  color: var(--mg-text);
  cursor: pointer;
  transition: background-color var(--mg-t-micro) var(--mg-ease),
              transform var(--mg-t-micro) var(--mg-ease);
}

.mg-ref .mg-rhero__nav:hover {
  background: var(--mg-orange);
  border-color: transparent;
  color: #fff;
}

.mg-ref .mg-rhero__nav:focus-visible {
  outline: 2px solid var(--mg-orange-dk);
  outline-offset: 2px;
}

.mg-ref .mg-rhero__nav svg {
  width: 16px;
  height: 16px;
}

/* Ornaments are background. They sit under the track -- which is transparent,
   so they still show through the cream -- rather than over it. At z-index 1
   they were level with the copy column and crossed it. */
.mg-ref .mg-rhero::before,
.mg-ref .mg-rhero::after {
  z-index: 0;
}

.mg-ref .mg-rhero__track {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  /* On a phone the arrows are redundant -- the track is swipeable, and 36px
     buttons at the band's edge compete with the thumb that is doing the
     swiping. The dots stay: they are what says how many there are. */
  .mg-ref .mg-rhero__arrows {
    display: none;
  }

  .mg-ref .mg-rhero__ui {
    justify-content: center;
    /* The dot buttons are 24px tall now (9px dot inside), so the row is
       bottom-anchored 7.5px lower to keep the dots where they were. */
    inset-block-end: calc(clamp(0.7rem, 1.4vw, 1.1rem) - 7.5px);
  }
}

/* Two columns stop being enough room for a 46px ring plus two lines of German
   somewhere around a small phone; below that each claim gets the full width. */
@media (max-width: 460px) {
  .mg-ref .mg-rtrust {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.65rem;
  }
  .mg-ref .mg-rtrust__item {
    border-inline-start: 0;
    padding-inline: 0;
  }
  .mg-ref .mg-rtrust__ring {
    width: 40px;
    height: 40px;
  }
  .mg-ref .mg-rtrust__ring svg {
    width: 19px;
    height: 19px;
  }
}

/* ==========================================================================
   R20. PROMO CARD COPY AT NARROW WIDTHS
   The copy column is 62% of a phone-width card, about 210px, and the button
   inside it was wrapping onto two lines and being clipped. It stays on one
   line, and the headline steps down so the card grows by a line rather than
   cutting one off.
   ========================================================================== */

/* The label may wrap. An earlier pass forced it onto one line, which left the
   pill at the column's width while its text ran past both ends. The card now
   grows with its content, so a two-line pill costs nothing and can never
   overflow, however large the reader's text size is. */
.mg-ref .mg-rpromo .mg-rbtn {
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  text-align: center;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .mg-ref .mg-rpromo__copy {
    width: 66%;
  }
  .mg-ref .mg-rpromo__media {
    width: 34%;
  }
  .mg-ref .mg-rpromo__t {
    font-size: clamp(1rem, 5.2vw, 1.25rem);
  }
  .mg-ref .mg-rpromo__s {
    font-size: 0.8rem;
  }
  .mg-ref .mg-rpromo__copy {
    gap: 0.45rem;
    padding-block: 1rem;
  }
  .mg-ref .mg-rpromo .mg-rbtn {
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
  }
}

/* --------------------------------------------------------------------------
   R21. GUIDES (RATGEBER)
   Mangorivo recommends, it does not sell: no cart, no account, no wishlist
   page, and German only, so those header controls are removed rather than left
   as links to nothing. They return together with a shop or an English site.
   -------------------------------------------------------------------------- */
body.mg .mg-cart-icon,
body.mg .mg-wish-icon,
body.mg .mg-lang {
  display: none !important;
}

/* Topic tiles carry a line icon instead of a photograph. */
.mg-ref .mg-rcat__art--icon {
  display: grid;
  place-items: center;
  color: #17503c;
}

:root[data-theme="dark"] .mg-ref .mg-rcat__art--icon,
:root[data-theme="dark"] .mg-ref .mg-gcard__art {
  color: #bfe0c9;
}

.mg-ref .mg-rcat__art--icon svg {
  width: 46px;
  height: 46px;
}

/* Guide cards */
.mg-ref .mg-ggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}

.mg-ref .mg-ggrid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.mg-ref .mg-gcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--mgr-card);
  border: 1px solid var(--mgr-hairline);
  border-radius: var(--mgr-r-card);
  color: var(--mg-text);
  text-decoration: none;
  transition: transform var(--mg-t-micro) var(--mg-ease),
              box-shadow var(--mg-t-micro) var(--mg-ease);
}

.mg-ref .mg-gcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(23, 80, 60, 0.45);
}

.mg-ref .mg-gcard__art {
  display: grid;
  place-items: center;
  height: clamp(84px, 9vw, 112px);
  background: var(--tint, var(--mgr-t8));
  color: #17503c;
}

.mg-ref .mg-gcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.15rem;
}

.mg-ref .mg-gcard__kicker {
  color: var(--mg-text-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mg-ref .mg-gcard__title {
  color: var(--mg-head);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  hyphens: auto;
}

.mg-ref .mg-gcard__excerpt {
  color: var(--mg-text-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mg-ref .mg-gcard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--mg-accent-ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.mg-ref .mg-gcard__more .mg-ra {
  width: 15px;
  height: 15px;
}

/* Overview and topic headers */
.mg-ref .mg-ghead {
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}

.mg-ref .mg-ghead__crumb {
  margin: 0 0 0.5rem;
  color: var(--mg-text-2);
  font-size: 0.85rem;
}

.mg-ref .mg-ghead__crumb a {
  color: inherit;
  text-decoration: none;
}

.mg-ref .mg-ghead__crumb a:hover {
  color: var(--mg-orange-dk);
}

.mg-ref .mg-ghead__t {
  margin: 0;
  color: var(--mg-head);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mg-ref .mg-ghead__s {
  max-width: 46rem;
  margin: 0.6rem 0 0;
  color: var(--mg-text-2);
  font-size: 1.02rem;
  line-height: 1.55;
}

.mg-ref .mg-gtopics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.mg-ref .mg-gtopic {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0.95rem;
  background: var(--mgr-card);
  border: 1px solid var(--mgr-hairline);
  border-radius: var(--mg-r-pill);
  color: var(--mg-text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.mg-ref .mg-gtopic:hover,
.mg-ref .mg-gtopic.is-active {
  background: #17503c;
  border-color: #17503c;
  color: #fff;
}

.mg-ref .navigation.pagination {
  margin-top: 1.6rem;
}

.mg-ref .navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mg-ref .navigation.pagination .page-numbers {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--mgr-hairline);
  border-radius: var(--mg-r-pill);
  color: var(--mg-text);
  text-decoration: none;
}

.mg-ref .navigation.pagination .page-numbers.current {
  background: #17503c;
  border-color: #17503c;
  color: #fff;
}

/* A guide */
.mg-ref .mg-article__head,
.mg-ref .mg-article__body {
  max-width: 46rem;
  margin-inline: auto;
}

.mg-ref .mg-article__t {
  margin: 0;
  color: var(--mg-head);
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: auto;
}

.mg-ref .mg-article__lead {
  margin: 0.8rem 0 0;
  color: var(--mg-text);
  font-size: 1.15rem;
  line-height: 1.55;
}

.mg-ref .mg-article__meta {
  margin: 1rem 0 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--mgr-hairline);
  color: var(--mg-text-2);
  font-size: 0.85rem;
}

.mg-ref .mg-article__ad {
  color: var(--mg-orange-dk);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mg-ref .mg-article__body {
  margin-top: 1.4rem;
  color: var(--mg-text);
  font-size: 1.05rem;
  line-height: 1.75;
  hyphens: auto;
}

.mg-ref .mg-article__body h2 {
  margin: 2.2rem 0 0.6rem;
  color: var(--mg-head);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.mg-ref .mg-article__body h3 {
  margin: 1.6rem 0 0.4rem;
  color: var(--mg-head);
  font-size: 1.15rem;
  font-weight: 800;
}

.mg-ref .mg-article__body p,
.mg-ref .mg-article__body ul,
.mg-ref .mg-article__body ol {
  margin: 0 0 1.1rem;
}

.mg-ref .mg-article__body ul,
.mg-ref .mg-article__body ol {
  padding-left: 1.3rem;
}

.mg-ref .mg-article__body li {
  margin-bottom: 0.4rem;
}

.mg-ref .mg-article__body a {
  color: var(--mg-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mg-ref .mg-article__body table {
  width: 100%;
  margin: 0 0 1.3rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.mg-ref .mg-article__body th,
.mg-ref .mg-article__body td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--mgr-hairline);
  text-align: left;
  vertical-align: top;
}

.mg-ref .mg-article__body th {
  color: var(--mg-head);
  font-weight: 700;
}

.mg-ref .mg-note {
  margin-top: 2.4rem;
  padding: 1.1rem 1.25rem;
  background: var(--mgr-band);
  border-radius: var(--mgr-r-card);
  font-size: 0.92rem;
  line-height: 1.6;
}

.mg-ref .mg-note strong {
  color: var(--mg-head);
}

.mg-ref .mg-note p {
  margin: 0.4rem 0 0;
}

body.mg .mg-iconbtn[aria-label="Mein Konto"] {
  display: none !important;
}

@media (min-width: 900px) {
  .mg-ref .mg-ggrid--home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Illustrated covers: transparent renders on a softly lit tint. */
.mg-ref .mg-gcard__art {
  position: relative;
  height: clamp(150px, 15vw, 205px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 62%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%),
    var(--tint, var(--mgr-t8));
}

:root[data-theme="dark"] .mg-ref .mg-gcard__art {
  background:
    radial-gradient(ellipse 70% 60% at 50% 62%, rgba(255, 214, 160, 0.16), rgba(255, 214, 160, 0) 70%),
    var(--tint, var(--mgr-t8));
}

.mg-ref .mg-gcard__art {
  overflow: hidden;
}

.mg-ref .mg-gcard__img {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0.55rem 0.8rem 0.35rem;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.5s var(--mg-ease);
}

.mg-ref .mg-gcard:hover .mg-gcard__img {
  transform: scale(1.05);
}

.mg-ref .mg-rcat__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mg-ref .mg-article__cover {
  position: relative;
  max-width: 46rem;
  height: clamp(190px, 28vw, 300px);
  margin: 1.4rem auto 0;
  overflow: hidden;
  border-radius: var(--mgr-r-tile);
  background:
    radial-gradient(ellipse 60% 70% at 50% 65%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%),
    var(--tint, var(--mgr-t8));
}

:root[data-theme="dark"] .mg-ref .mg-article__cover {
  background:
    radial-gradient(ellipse 60% 70% at 50% 65%, rgba(255, 214, 160, 0.16), rgba(255, 214, 160, 0) 70%),
    var(--tint, var(--mgr-t8));
}

.mg-ref .mg-article__coverimg {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0.8rem 1rem 0.5rem;
  object-fit: contain;
  object-position: center bottom;
}

/* Soft ornament behind the overview and topic headers. */
.mg-ref .mg-ghead {
  position: relative;
  isolation: isolate;
}

.mg-ref .mg-ghead::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1.5rem;
  right: -1rem;
  width: min(34vw, 360px);
  aspect-ratio: 1;
  background: url("../img/orn/floating-leaves.svg") right top / contain no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

/* Cover renders inside the promo cards keep a margin from the card edge. */
.mg-ref .mg-rpromo__media .mg-rpromo__img {
  box-sizing: border-box;
  padding: 0.6rem 1rem 0.6rem 0;
  object-fit: contain;
  object-position: right center;
}

.mg-ref .mg-gtopics--species {
  margin-top: 1rem;
}

.mg-ref .mg-gtopics--species + .mg-gtopics {
  margin-top: 0.5rem;
}

/* Recommended product box inside a guide ([mg_produkt]). */
.mg-ref .mg-product {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1.4rem 0;
  padding: 1rem 1.1rem;
  background: var(--mgr-card);
  border: 1px solid var(--mgr-hairline);
  border-radius: var(--mgr-r-card);
  hyphens: none;
}

.mg-ref .mg-product__img {
  flex: none;
  width: clamp(88px, 22%, 150px);
  background: var(--mgr-stage);
  border-radius: 12px;
  overflow: hidden;
}

.mg-ref .mg-product__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.mg-ref .mg-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  align-items: flex-start;
}

.mg-ref .mg-product__tag {
  color: var(--mg-orange-dk);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mg-ref .mg-product__name {
  color: var(--mg-head);
  font-size: 1.08rem;
  line-height: 1.3;
}

.mg-ref .mg-product__specs {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.mg-ref .mg-product__specs li {
  margin: 0;
}

.mg-ref .mg-product__note,
.mg-ref .mg-product__fine {
  color: var(--mg-text-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.mg-ref .mg-article__body a.mg-rbtn {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 560px) {
  .mg-ref .mg-product {
    flex-direction: column;
  }
  .mg-ref .mg-product__img {
    width: 100%;
    max-width: 180px;
  }
}