/* ==========================================================================
   MOTARD / RaoTheme — design system
   Palette derived from the previous Flatsome configuration:
     primary #7a9c59 (olive), header #5f8423 (deep olive), text #0a0a0a
   ========================================================================== */

:root {
  /* Brand */
  --mg-olive:        #7a9c59;
  --mg-olive-deep:   #5f8423;
  --mg-olive-dark:   #44601a;
  --mg-olive-soft:   #eef2e7;
  --mg-sand:         #d9cdb4;

  /* Neutrals — warm charcoal, reads as gear not as office software */
  --mg-ink:          #0a0a0a;
  --mg-ink-2:        #1c1d19;
  --mg-ink-3:        #3a3c36;
  --mg-muted:        #6b6e66;
  --mg-line:         #dcded6;
  --mg-bg:           #ffffff;
  --mg-bg-alt:       #f6f6f2;

  /* Semantic */
  --mg-sale:         #b3321f;
  --mg-ok:           #2f7d32;
  --mg-focus:        #1e73be;

  /* Type */
  --mg-font: "Barlow", "Barlow Condensed", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mg-font-head: "Barlow Condensed", "Barlow", Impact, system-ui, sans-serif;

  /* Space + shape */
  --mg-gutter: 1.25rem;
  --mg-max: 1280px;
  --mg-radius: 3px;
  --mg-radius-lg: 8px;
  --mg-shadow: 0 1px 2px rgba(10,10,10,.06), 0 8px 24px rgba(10,10,10,.06);
  --mg-shadow-lift: 0 2px 4px rgba(10,10,10,.08), 0 16px 40px rgba(10,10,10,.12);
  --mg-header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mg-bg);
  color: var(--mg-ink);
  font-family: var(--mg-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mg-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mg-olive-deep); }
:where(h1,h2,h3,h4,h5) {
  font-family: var(--mg-font-head);
  line-height: 1.1;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p  { margin: 0 0 1rem; }

:focus-visible { outline: 3px solid var(--mg-focus); outline-offset: 2px; }

.mg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--mg-dark); color: #fff; padding: .75rem 1.25rem;
}
.mg-skip:focus { left: 0; }
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap;
}

/* ---------- layout ---------- */
.mg-wrap { width: 100%; max-width: var(--mg-max); margin-inline: auto; padding-inline: var(--mg-gutter); }
.mg-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mg-section--alt { background: var(--mg-bg-alt); }
.mg-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }

.mg-eyebrow {
  font-family: var(--mg-font-head);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--mg-olive-deep);
  margin: 0 0 .5rem;
}
.mg-section__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mg-section__head--center { text-align: center; max-width: 54ch; margin-inline: auto; }
.mg-section__head h2 { text-transform: uppercase; }
.mg-section__head p { color: var(--mg-muted); margin: 0; }

/* ---------- buttons ---------- */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mg-font-head);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  font-size: 1rem; line-height: 1;
  padding: .95rem 1.75rem;
  border: 2px solid var(--mg-dark);
  border-radius: var(--mg-radius);
  background: var(--mg-dark); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.mg-btn:hover { background: var(--mg-olive-deep); border-color: var(--mg-olive-deep); color: #fff; transform: translateY(-1px); }
.mg-btn--olive { background: var(--mg-olive-deep); border-color: var(--mg-olive-deep); }
.mg-btn--olive:hover { background: var(--mg-dark); border-color: var(--mg-dark); }
.mg-btn--ghost { background: transparent; color: var(--mg-ink); }
.mg-btn--ghost:hover { background: var(--mg-dark); color: #fff; }
.mg-btn--light { background: #fff; color: var(--mg-on-accent); border-color: #fff; }
.mg-btn--light:hover { background: var(--mg-olive-deep); border-color: var(--mg-olive-deep); color: #fff; }
.mg-btn--block { width: 100%; }
.mg-btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.mg-btn[disabled], .mg-btn.disabled { opacity: .5; pointer-events: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.mg-topbar {
  background: var(--mg-dark); color: #e8e8e3;
  font-size: .8125rem; letter-spacing: .04em;
}
.mg-topbar .mg-wrap { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 36px; text-align: center; }
.mg-topbar strong { color: var(--mg-sand); }

.mg-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--mg-olive-deep);
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.mg-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--mg-header-h);
}
.mg-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
/*
 * Both the fallback text brand and WordPress's custom-logo markup are
 * constrained here. the_custom_logo() renders its own <a class="custom-logo-link">
 * outside .mg-brand, so it needs its own rule or a tall source image
 * (this site's is 500x500) would stretch the header.
 */
.mg-brand img,
.custom-logo-link img.custom-logo {
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.custom-logo-link {
  display: flex; align-items: center; flex: 0 0 auto;
  margin-right: auto; line-height: 0;
}
@media (max-width: 991px) {
  .mg-brand img, .custom-logo-link img.custom-logo { max-height: 42px; }
}
.mg-brand__text {
  font-family: var(--mg-font-head); font-weight: 700; font-size: 1.6rem;
  text-transform: uppercase; letter-spacing: .06em; color: #fff;
}
.mg-brand__tag { display: block; font-size: .625rem; letter-spacing: .22em; color: rgba(255,255,255,.75); font-family: var(--mg-font); font-weight: 500; }

/* primary nav */
.mg-nav { margin-left: auto; }
.mg-nav ul { list-style: none; display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; }
.mg-nav li { position: relative; }
.mg-nav a {
  display: block; padding: .6rem .85rem;
  color: #fff; text-decoration: none;
  font-family: var(--mg-font-head); text-transform: uppercase;
  font-size: .95rem; font-weight: 600; letter-spacing: .06em;
  border-radius: var(--mg-radius);
  transition: background .15s ease, color .15s ease;
}
.mg-nav a:hover, .mg-nav .current-menu-item > a, .mg-nav .current_page_item > a {
  background: rgba(0,0,0,.22); color: #fff;
}
/* dropdowns */
.mg-nav ul ul {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--mg-surface); flex-direction: column; align-items: stretch; gap: 0;
  border: 1px solid var(--mg-line); box-shadow: var(--mg-shadow);
  padding: .35rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.mg-nav li:hover > ul, .mg-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.mg-nav ul ul a { color: var(--mg-ink); }
.mg-nav ul ul a:hover { background: var(--mg-olive-soft); color: var(--mg-olive-dark); }

/* header actions */
.mg-actions { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.mg-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: transparent;
  color: #fff; cursor: pointer; border-radius: var(--mg-radius);
  position: relative; text-decoration: none;
  transition: background .15s ease;
}
.mg-iconbtn:hover { background: rgba(0,0,0,.22); color: #fff; }
.mg-iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mg-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--mg-sale); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 18px;
  text-align: center; border-radius: 999px;
}
.mg-burger { display: none; }

/* search drawer */
.mg-search {
  display: none; background: var(--mg-surface); border-bottom: 1px solid var(--mg-line);
  padding-block: 1rem;
}
.mg-search.is-open { display: block; }
.mg-search form { display: flex; gap: .5rem; max-width: 720px; margin-inline: auto; }
.mg-search input[type="search"] {
  flex: 1; padding: .85rem 1rem; font-size: 1rem;
  border: 2px solid var(--mg-line); border-radius: var(--mg-radius);
  font-family: var(--mg-font);
}
.mg-search input[type="search"]:focus { border-color: var(--mg-olive-deep); outline: none; }

/* mobile drawer */
.mg-drawer {
  position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px);
  background: var(--mg-surface); z-index: 120; padding: 1.25rem;
  transform: translateX(-100%); transition: transform .25s ease;
  overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;
}
.mg-drawer.is-open { transform: translateX(0); }
.mg-drawer ul { list-style: none; margin: 0; padding: 0; }
.mg-drawer a {
  display: block; padding: .8rem .25rem; text-decoration: none;
  border-bottom: 1px solid var(--mg-line);
  font-family: var(--mg-font-head); text-transform: uppercase;
  font-weight: 600; letter-spacing: .05em;
}
.mg-drawer ul ul a { padding-left: 1.25rem; font-size: .9rem; color: var(--mg-muted); }
.mg-overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,.5);
  z-index: 110; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.mg-overlay.is-open { opacity: 1; visibility: visible; }
.mg-drawer__close { align-self: flex-end; }

@media (max-width: 991px) {
  .mg-nav { display: none; }
  .mg-burger { display: inline-flex; }
  .mg-brand { margin-right: auto; }
  :root { --mg-header-h: 64px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.mg-hero { position: relative; background: var(--mg-ink-2); color: #fff; overflow: hidden; }
.mg-hero__slide {
  position: relative; min-height: clamp(420px, 62vh, 720px);
  display: grid; align-items: center;
  background-size: cover; background-position: center 30%;
}
.mg-hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.76) 0%, rgba(10,10,10,.45) 45%, rgba(10,10,10,.15) 100%);
}
.mg-hero__inner { position: relative; z-index: 2; max-width: 46rem; padding-block: 3rem; }
.mg-hero h1 { color: #fff; margin-bottom: .75rem; text-wrap: balance; }
.mg-hero h1 em { color: var(--mg-olive); font-style: normal; }
.mg-hero p { font-size: clamp(1rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.88); max-width: 42ch; }
.mg-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.mg-hero__slides > .mg-hero__slide { display: none; }
.mg-hero__slides > .mg-hero__slide.is-active { display: grid; }
.mg-hero__dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; }
.mg-hero__dots button {
  width: 32px; height: 4px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.4); border-radius: 2px;
}
.mg-hero__dots button[aria-selected="true"] { background: var(--mg-olive); }

/* trust strip */
.mg-trust { background: var(--mg-dark); color: #fff; }
.mg-trust ul {
  list-style: none; margin: 0; padding: 1rem 0; display: grid; gap: .75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.mg-trust li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.mg-trust svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: var(--mg-olive); fill: none; stroke-width: 1.8; }
.mg-trust strong { display: block; font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
.mg-trust span { color: rgba(255,255,255,.65); font-size: .8rem; }

/* ==========================================================================
   Product cards / loop
   ========================================================================== */
ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
ul.products li.product {
  position: relative; display: flex; flex-direction: column;
  background: var(--mg-surface); border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
ul.products li.product:hover { box-shadow: var(--mg-shadow-lift); transform: translateY(-3px); border-color: var(--mg-olive); }
.mg-card__media { position: relative; display: block; aspect-ratio: 1/1; background: var(--mg-bg-alt); overflow: hidden; }
.mg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
ul.products li.product:hover .mg-card__media img { transform: scale(1.04); }
.mg-card__body { display: flex; flex-direction: column; gap: .4rem; padding: .9rem 1rem 1.1rem; flex: 1; }
.mg-card__cat { font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em; color: var(--mg-muted); }
.mg-card__title { font-family: var(--mg-font-head); font-size: 1.05rem; line-height: 1.25; margin: 0; }
.mg-card__title a { text-decoration: none; }
.mg-card__title a:hover { color: var(--mg-olive-deep); }
.mg-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
.mg-card__badges { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }

.mg-badge {
  font-family: var(--mg-font-head); text-transform: uppercase;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  padding: .25rem .5rem; border-radius: 2px; color: #fff; background: var(--mg-dark);
}
.mg-badge--sale { background: var(--mg-sale); }
.mg-badge--new  { background: var(--mg-olive-deep); }
.mg-badge--out  { background: var(--mg-muted); }

.price { font-family: var(--mg-font-head); font-size: 1.2rem; font-weight: 700; color: var(--mg-ink); display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.price del { color: var(--mg-muted); font-weight: 500; font-size: .95rem; text-decoration: line-through; }
.price ins { text-decoration: none; color: var(--mg-sale); }
.mg-save { font-family: var(--mg-font); font-size: .75rem; color: var(--mg-ok); font-weight: 600; letter-spacing: .02em; }

.mg-stars { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--mg-muted); }
.mg-stars__icons { color: #d8a024; letter-spacing: .05em; }

/* loop add-to-cart */
ul.products .button, ul.products .added_to_cart {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; padding: .7rem 1rem;
  font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; font-size: .875rem; line-height: 1;
  background: var(--mg-dark); color: #fff; border: 2px solid var(--mg-dark);
  border-radius: var(--mg-radius); text-decoration: none; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
ul.products .button:hover, ul.products .added_to_cart:hover { background: var(--mg-olive-deep); border-color: var(--mg-olive-deep); color: #fff; }
ul.products .button.loading { opacity: .6; pointer-events: none; }
ul.products .added_to_cart { margin-top: .4rem; background: transparent; color: var(--mg-ink); }

/* ==========================================================================
   Shop archive
   ========================================================================== */
.mg-pagehead { background: var(--mg-ink-2); color: #fff; padding-block: clamp(2rem, 5vw, 3.25rem); }
.mg-pagehead h1 { color: #fff; margin: 0; }
.mg-pagehead p { color: rgba(255,255,255,.7); margin: .5rem 0 0; max-width: 60ch; }
.mg-breadcrumb { font-size: .8125rem; color: rgba(255,255,255,.6); margin-bottom: .6rem; }
.mg-breadcrumb a { color: rgba(255,255,255,.85); }

.mg-shop { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 260px 1fr; align-items: start; }
@media (max-width: 991px) { .mg-shop { grid-template-columns: 1fr; } }

.mg-sidebar { position: sticky; top: calc(var(--mg-header-h) + 1rem); display: grid; gap: 1.5rem; }
@media (max-width: 991px) { .mg-sidebar { position: static; } }
.mg-widget { border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); padding: 1rem 1.1rem; }
.mg-widget h3, .mg-widget .widget-title {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 2px solid var(--mg-olive);
}
.mg-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mg-widget li a { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .25rem; text-decoration: none; font-size: .925rem; border-radius: var(--mg-radius); }
.mg-widget li a:hover { background: var(--mg-olive-soft); color: var(--mg-olive-dark); }
.mg-widget .count { color: var(--mg-muted); font-size: .8rem; }
.mg-widget li.current-cat > a { color: var(--mg-olive-dark); font-weight: 700; }

.mg-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--mg-line);
}
.woocommerce-result-count { margin: 0; color: var(--mg-muted); font-size: .875rem; }
.woocommerce-ordering { margin-left: auto; }
.woocommerce-ordering select, .mg-shop select {
  padding: .55rem .75rem; border: 2px solid var(--mg-line); border-radius: var(--mg-radius);
  font-family: var(--mg-font); font-size: .9rem; background: var(--mg-surface); cursor: pointer;
}
.woocommerce-ordering select:focus { border-color: var(--mg-olive-deep); outline: none; }

.woocommerce-pagination { margin-top: 2.5rem; }
.woocommerce-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; justify-content: center; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .6rem;
  border: 1px solid var(--mg-line); border-radius: var(--mg-radius);
  text-decoration: none; font-weight: 600;
}
.woocommerce-pagination a:hover { border-color: var(--mg-olive); background: var(--mg-olive-soft); }
.woocommerce-pagination .current { background: var(--mg-dark); color: #fff; border-color: var(--mg-dark); }

/* ==========================================================================
   Single product
   ========================================================================== */
.mg-product { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
@media (max-width: 860px) { .mg-product { grid-template-columns: 1fr; } }

.mg-gallery { display: grid; gap: .75rem; position: sticky; top: calc(var(--mg-header-h) + 1rem); }
@media (max-width: 860px) { .mg-gallery { position: static; } }
.mg-gallery__main { position: relative; border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); overflow: hidden; background: var(--mg-bg-alt); aspect-ratio: 1/1; }
.mg-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.mg-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; }
.mg-gallery__thumbs button {
  padding: 0; border: 2px solid var(--mg-line); border-radius: var(--mg-radius);
  background: var(--mg-bg-alt); cursor: pointer; overflow: hidden; aspect-ratio: 1/1;
}
.mg-gallery__thumbs button[aria-current="true"] { border-color: var(--mg-olive-deep); }
.mg-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.mg-summary > * + * { margin-top: 1rem; }
.mg-summary h1 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); text-transform: none; letter-spacing: 0; line-height: 1.2; }
.mg-summary .price { font-size: 1.75rem; }
.mg-sku { font-size: .8125rem; color: var(--mg-muted); letter-spacing: .04em; }
.mg-stock { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; }
.mg-stock--in { color: var(--mg-ok); }
.mg-stock--out { color: var(--mg-sale); }
.mg-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.mg-shortdesc { color: var(--mg-ink-3); }
.mg-shortdesc ul { padding-left: 1.1rem; }

/* quantity + cart form */
.quantity { display: inline-flex; align-items: stretch; border: 2px solid var(--mg-line); border-radius: var(--mg-radius); overflow: hidden; }
.quantity input[type="number"] {
  width: 64px; border: 0; text-align: center; font-family: var(--mg-font-head);
  font-size: 1.05rem; font-weight: 700; padding: .7rem .25rem; -moz-appearance: textfield;
}
.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity input:focus { outline: none; }
.mg-qty-btn { width: 40px; border: 0; background: var(--mg-bg-alt); cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--mg-ink); }
.mg-qty-btn:hover { background: var(--mg-olive-soft); }

form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin: 1.25rem 0; }
form.cart .single_add_to_cart_button {
  flex: 1 1 220px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.75rem; border: 2px solid var(--mg-olive-deep);
  background: var(--mg-olive-deep); color: #fff; cursor: pointer;
  font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; font-size: 1.05rem; border-radius: var(--mg-radius);
  transition: background .18s ease, border-color .18s ease;
}
form.cart .single_add_to_cart_button:hover { background: var(--mg-dark); border-color: var(--mg-dark); }
form.cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* variations */
.variations { width: 100%; border-collapse: collapse; }
.variations th, .variations td { text-align: left; padding: .35rem 0; vertical-align: middle; }
.variations label { font-family: var(--mg-font-head); text-transform: uppercase; font-size: .9rem; letter-spacing: .06em; }
.variations select { width: 100%; padding: .7rem .75rem; border: 2px solid var(--mg-line); border-radius: var(--mg-radius); font-family: var(--mg-font); }
.reset_variations { font-size: .8rem; color: var(--mg-muted); }
.woocommerce-variation-price { margin: .5rem 0; }

/* usp list under cart */
.mg-usp { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--mg-line); display: grid; gap: .6rem; }
.mg-usp li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--mg-ink-3); }
.mg-usp svg { width: 20px; height: 20px; flex: 0 0 auto; stroke: var(--mg-olive-deep); fill: none; stroke-width: 1.8; margin-top: .1rem; }

/* tabs */
.woocommerce-tabs { margin-top: clamp(2rem, 5vw, 3.5rem); }
.wc-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.5rem; padding: 0; border-bottom: 2px solid var(--mg-line); }
.wc-tabs li a {
  display: block; padding: .8rem 1.25rem; text-decoration: none;
  font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--mg-muted); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.wc-tabs li.active a, .wc-tabs li a:hover { color: var(--mg-ink); border-bottom-color: var(--mg-olive); }
.woocommerce-Tabs-panel h2 { font-size: 1.25rem; }

/* sticky mobile add-to-cart bar */
.mg-stickybar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  background: var(--mg-surface); border-top: 1px solid var(--mg-line);
  box-shadow: 0 -4px 20px rgba(10,10,10,.1);
  padding: .65rem var(--mg-gutter);
  display: none; align-items: center; gap: .75rem;
  transform: translateY(100%); transition: transform .25s ease;
}
.mg-stickybar.is-visible { transform: translateY(0); }
.mg-stickybar__info { flex: 1; min-width: 0; }
.mg-stickybar__title { font-family: var(--mg-font-head); font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-stickybar__price { font-size: .9rem; color: var(--mg-olive-dark); font-weight: 700; }
.mg-stickybar .mg-btn { flex: 0 0 auto; }
@media (max-width: 860px) { .mg-stickybar { display: flex; } }

/* ==========================================================================
   Home sections
   ========================================================================== */
/* category tiles */
.mg-cats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mg-cat {
  position: relative; display: flex; align-items: flex-end;
  min-height: 220px; padding: 1.1rem; overflow: hidden;
  border-radius: var(--mg-radius-lg); text-decoration: none; color: #fff;
  background: var(--mg-ink-2) center/cover no-repeat;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mg-cat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.05) 30%, rgba(10,10,10,.82) 100%);
  transition: background .2s ease;
}
.mg-cat:hover { transform: translateY(-3px); box-shadow: var(--mg-shadow-lift); color: #fff; }
.mg-cat:hover::after { background: linear-gradient(180deg, rgba(68,96,26,.25) 20%, rgba(10,10,10,.85) 100%); }
.mg-cat__label { position: relative; z-index: 2; }
.mg-cat__label strong { display: block; font-family: var(--mg-font-head); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .05em; }
.mg-cat__label span { font-size: .8rem; color: rgba(255,255,255,.75); }

/* story / about split */
.mg-story { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
@media (max-width: 860px) { .mg-story { grid-template-columns: 1fr; } }
.mg-story__media { border-radius: var(--mg-radius-lg); overflow: hidden; background: var(--mg-bg-alt); aspect-ratio: 4/3; }
.mg-story__media img { width: 100%; height: 100%; object-fit: cover; }
.mg-story__body h2 { text-transform: uppercase; }
.mg-story__body p { color: var(--mg-ink-3); }

/* testimonials */
.mg-quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mg-quote {
  background: var(--mg-surface); border: 1px solid var(--mg-line); border-left: 4px solid var(--mg-olive);
  border-radius: var(--mg-radius-lg); padding: 1.4rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.mg-quote h3 { font-size: 1.05rem; margin: 0; }
.mg-quote blockquote { margin: 0; color: var(--mg-ink-3); font-size: .95rem; }
.mg-quote figcaption { margin-top: auto; font-size: .8125rem; color: var(--mg-muted); font-style: normal; }
.mg-quote figcaption strong { display: block; color: var(--mg-ink); font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; }

/* newsletter / cta band */
.mg-band { background: var(--mg-olive-deep); color: #fff; }
.mg-band .mg-wrap { display: grid; gap: 1.25rem; grid-template-columns: 1fr auto; align-items: center; padding-block: clamp(2rem, 4vw, 3rem); }
@media (max-width: 760px) { .mg-band .mg-wrap { grid-template-columns: 1fr; } }
.mg-band h2 { color: #fff; margin: 0 0 .35rem; text-transform: uppercase; }
.mg-band p { margin: 0; color: rgba(255,255,255,.85); }

/* ==========================================================================
   Cart / checkout / account
   ========================================================================== */
.woocommerce-cart-form table, .shop_table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.5rem;
}
.shop_table th {
  text-align: left; padding: .75rem .6rem;
  font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .08em;
  font-size: .85rem; border-bottom: 2px solid var(--mg-dark);
}
.shop_table td { padding: .9rem .6rem; border-bottom: 1px solid var(--mg-line); vertical-align: middle; }
.shop_table img { width: 68px; border-radius: var(--mg-radius); }
.product-remove a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mg-bg-alt); color: var(--mg-muted); text-decoration: none; font-size: 1.1rem; line-height: 1;
}
.product-remove a:hover { background: var(--mg-sale); color: #fff; }

.cart-collaterals { display: grid; gap: 1.5rem; grid-template-columns: 1fr minmax(0, 380px); align-items: start; }
@media (max-width: 860px) { .cart-collaterals { grid-template-columns: 1fr; } }
.cart_totals, .mg-panel {
  border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); padding: 1.25rem;
  background: var(--mg-bg-alt);
}
.cart_totals h2, .mg-panel h2 { font-size: 1.15rem; text-transform: uppercase; margin-bottom: .75rem; }
.cart_totals table { width: 100%; }
.cart_totals th { font-weight: 600; text-align: left; padding: .5rem 0; border: 0; text-transform: none; font-family: var(--mg-font); letter-spacing: 0; font-size: .95rem; }
.cart_totals td { text-align: right; padding: .5rem 0; border: 0; }
.cart_totals .order-total th, .cart_totals .order-total td { border-top: 2px solid var(--mg-dark); font-size: 1.1rem; font-weight: 700; padding-top: .75rem; }
.wc-proceed-to-checkout { margin-top: 1rem; }
.wc-proceed-to-checkout .checkout-button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 1rem; text-decoration: none;
  background: var(--mg-olive-deep); color: #fff; border: 2px solid var(--mg-olive-deep);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 1.05rem;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--mg-dark); border-color: var(--mg-dark); color: #fff; }

.coupon { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.coupon input[type="text"] { flex: 1 1 160px; }

/* forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], select, textarea {
  width: 100%; padding: .75rem .85rem;
  border: 2px solid var(--mg-line); border-radius: var(--mg-radius);
  font-family: var(--mg-font); font-size: 1rem; background: var(--mg-surface); color: var(--mg-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--mg-olive-deep); outline: none; }
label { display: block; margin-bottom: .3rem; font-size: .9rem; font-weight: 600; }
.required { color: var(--mg-sale); }

.woocommerce form .form-row { margin-bottom: 1rem; }
/* (checkout is laid out in the Checkout section below) */

/* my account */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .15rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: .6rem .75rem; text-decoration: none; border-radius: var(--mg-radius); font-weight: 600; }
.woocommerce-MyAccount-navigation a:hover { background: var(--mg-olive-soft); color: var(--mg-olive-dark); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--mg-dark); color: #fff; }
@media (min-width: 861px) {
  .woocommerce-account .woocommerce { display: grid; gap: 2rem; grid-template-columns: 240px 1fr; align-items: start; }
}

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper > ul {
  list-style: none; margin: 0 0 1.25rem; padding: .9rem 1.1rem;
  border-left: 4px solid var(--mg-olive-deep); background: var(--mg-olive-soft);
  border-radius: var(--mg-radius); font-size: .95rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
}
.woocommerce-error { border-left-color: var(--mg-sale); background: #fdecea; }
.woocommerce-info { border-left-color: var(--mg-focus); background: #e9f2fb; }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
  margin-left: auto; padding: .5rem 1rem; text-decoration: none;
  background: var(--mg-dark); color: #fff; border-radius: var(--mg-radius);
  font-family: var(--mg-font-head); text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; font-weight: 700;
}

/* ==========================================================================
   Content pages, accordion, footer
   ========================================================================== */
.mg-entry { max-width: 72ch; }
.mg-entry--wide { max-width: none; }
.mg-entry h2 { margin-top: 2rem; }
.mg-entry img { border-radius: var(--mg-radius-lg); margin-block: 1.25rem; }
.mg-entry ul, .mg-entry ol { padding-left: 1.25rem; }
.mg-entry li { margin-bottom: .4rem; }
.mg-entry blockquote {
  margin: 1.5rem 0; padding: 1rem 1.25rem;
  border-left: 4px solid var(--mg-olive); background: var(--mg-bg-alt);
  border-radius: var(--mg-radius); color: var(--mg-ink-3);
}
.mg-gap { height: 2rem; }

.mg-accordion { border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); overflow: hidden; margin-bottom: 1.5rem; }
.mg-accordion details + details { border-top: 1px solid var(--mg-line); }
.mg-accordion summary {
  cursor: pointer; padding: 1rem 1.1rem; list-style: none;
  font-family: var(--mg-font-head); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background .15s ease;
}
.mg-accordion summary:hover { background: var(--mg-bg-alt); }
.mg-accordion summary::-webkit-details-marker { display: none; }
.mg-accordion summary::after { content: "+"; font-size: 1.4rem; color: var(--mg-olive-deep); line-height: 1; flex: 0 0 auto; }
.mg-accordion details[open] summary::after { content: "\2013"; }
.mg-accordion details[open] summary { background: var(--mg-olive-soft); }
.mg-accordion__body { padding: 0 1.1rem 1.1rem; color: var(--mg-ink-3); }

.mg-footer { background: var(--mg-dark); color: rgba(255,255,255,.72); padding-top: clamp(2.5rem, 5vw, 3.5rem); font-size: .925rem; }
.mg-footer__cols { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding-bottom: 2rem; }
.mg-footer h3 {
  color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 2px solid var(--mg-olive-deep);
}
.mg-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.mg-footer a:hover { color: #fff; }
.mg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mg-footer__brand p { max-width: 34ch; }
.mg-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  font-size: .8125rem; color: rgba(255,255,255,.5);
}
.mg-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* blog */
.mg-posts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mg-post { border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.mg-post__media { aspect-ratio: 16/9; background: var(--mg-bg-alt); }
.mg-post__media img { width: 100%; height: 100%; object-fit: cover; }
.mg-post__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mg-post__meta { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mg-muted); }
.mg-post h2 { font-size: 1.15rem; margin: 0; }

/* utility */
.mg-center { text-align: center; }
.mg-mt-0 { margin-top: 0; }
.mg-hide { display: none !important; }
@media print { .mg-header, .mg-footer, .mg-stickybar, .mg-topbar { display: none !important; } }

/* ---------- footer contact + social (matches live layout) ---------- */
.mg-footer__logo { margin-bottom: .9rem; }
.mg-footer__logo img.custom-logo { max-height: 64px; width: auto; }
.mg-footer__address {
  font-style: normal; line-height: 1.6; margin: 0 0 .75rem;
  color: rgba(255,255,255,.72);
}
.mg-footer__contact { display: grid; gap: .3rem; margin: 0 0 1rem; list-style: none; padding: 0; }
.mg-footer__contact a { text-decoration: none; }
.mg-footer__contact a:hover { text-decoration: underline; }

.mg-social { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.mg-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--mg-radius);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mg-social a:hover { background: var(--mg-olive-deep); color: #fff; transform: translateY(-2px); }

/* ---------- header cart subtotal ---------- */
.mg-cartlink { display: flex; align-items: center; gap: .5rem; width: auto; padding-inline: .6rem; }
.mg-cartlink .mg-cart-total {
  font-family: var(--mg-font-head); font-weight: 700; font-size: .9rem;
  color: #fff; white-space: nowrap;
}
@media (max-width: 575px) { .mg-cartlink .mg-cart-total { display: none; } }

/* ==========================================================================
   WooCommerce core stylesheet overrides
   --------------------------------------------------------------------------
   woocommerce-layout.css lays the catalog out with floats and percentage
   widths:

     .woocommerce ul.products li.product { float:left; width:22.05% }

   That selector is (0,2,2) and beats this theme's (0,1,2), so each card was
   sized to 22% of its CSS grid track instead of the row — roughly 87px wide,
   which squeezed titles to one word per line and clipped prices and buttons.

   The stylesheet is not dequeued, because woocommerce-smallscreen.css (which
   stacks the cart and account tables on narrow screens) is still wanted and
   layout.css carries other page scaffolding. These rules countermand only the
   float/width model, at matching or higher specificity.
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* [class*="columns-"] matches Woo's .columns-1 … .columns-6 overrides. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  width: auto;
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
}

/* The float clearfix pseudo-elements become stray grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}

/* Woo forces height:auto, which defeats object-fit in the card media box. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ==========================================================================
   Product imagery — show the whole product, never a crop
   --------------------------------------------------------------------------
   These are product-on-background shots of varying aspect ratio, so the media
   box keeps a square footprint for an even grid while the image is contained
   inside it. Woo's own 1:1 hard crop is disabled in inc/woocommerce.php.
   ========================================================================== */
.mg-card__media {
  background: var(--mg-surface);
  padding: .5rem;
}
.mg-card__media img,
.woocommerce ul.products li.product .mg-card__media img {
  object-fit: contain;
  object-position: center;
}
ul.products li.product:hover .mg-card__media img { transform: scale(1.03); }

.mg-gallery__main { background: var(--mg-well); padding: .75rem; }
.mg-gallery__main img { object-fit: contain; }
.mg-gallery__thumbs button { background: var(--mg-well); padding: 3px; }
.mg-gallery__thumbs img { object-fit: contain; }

/* Brand story image.
   Framed and cropped, which suits the photograph now set in the Customizer
   (Home page > Brand story image). If that setting is ever pointed back at a
   logo or other graphic, switch object-fit to `contain` and drop the
   aspect-ratio, or the artwork will be sliced at the edges. */
.mg-story__media {
  aspect-ratio: 4 / 3;
  background: var(--mg-bg-alt);
  border-radius: var(--mg-radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mg-story__media:empty { display: none; }

/* ==========================================================================
   Sidebar widgets — WooCommerce product search, price filter, categories
   ========================================================================== */

/* ---------- product search / generic search form ---------- */
.woocommerce-product-search,
.mg-searchform {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: stretch;
}
.woocommerce-product-search .search-field,
.woocommerce-product-search input[type="search"],
.mg-searchform input[type="search"] {
  min-width: 0;
  padding: .7rem .85rem;
  border: 2px solid var(--mg-line);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font);
  font-size: .95rem;
  background: var(--mg-surface);
}
.woocommerce-product-search .search-field::placeholder,
.mg-searchform input[type="search"]::placeholder { color: var(--mg-muted); }
.woocommerce-product-search .search-field:focus,
.mg-searchform input[type="search"]:focus { border-color: var(--mg-olive-deep); outline: none; }

.woocommerce-product-search button[type="submit"],
.mg-searchform button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.1rem;
  border: 2px solid var(--mg-dark);
  border-radius: var(--mg-radius);
  background: var(--mg-dark); color: #fff; cursor: pointer;
  font-family: var(--mg-font-head);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  font-size: .85rem; line-height: 1; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease;
}
.woocommerce-product-search button[type="submit"]:hover,
.mg-searchform button[type="submit"]:hover {
  background: var(--mg-olive-deep); border-color: var(--mg-olive-deep);
}

/* ---------- price filter ---------- */
.widget_price_filter .price_slider_amount {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  align-items: center;
}
.widget_price_filter .price_slider_amount input[type="text"] {
  width: 100%;
  padding: .55rem .6rem;
  border: 2px solid var(--mg-line);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font);
  font-size: .875rem;
  text-align: center;
}
.widget_price_filter .price_slider_amount input[type="text"]:focus { border-color: var(--mg-olive-deep); outline: none; }
.widget_price_filter .price_slider_amount .button {
  grid-column: 1 / -1;
  width: 100%;
  padding: .65rem 1rem;
  border: 2px solid var(--mg-dark);
  border-radius: var(--mg-radius);
  background: var(--mg-dark); color: #fff; cursor: pointer;
  font-family: var(--mg-font-head);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: .85rem;
  transition: background .18s ease, border-color .18s ease;
}
.widget_price_filter .price_slider_amount .button:hover { background: var(--mg-olive-deep); border-color: var(--mg-olive-deep); }
.widget_price_filter .price_label {
  grid-column: 1 / -1;
  font-size: .85rem; color: var(--mg-muted); text-align: center;
}
.widget_price_filter .clear { clear: both; }

/* The jQuery UI slider is styled in one place only - see "Price filter
   slider - brand palette" at the end of this file. An earlier block here
   also set the handle's transform, which survived the newer rules (they
   never declared transform) and lifted the handles off the track. */
.widget_price_filter .price_slider { position: relative; margin: .35rem .4rem 1.1rem; }

/* ---------- product categories ---------- */
.widget_product_categories ul.product-categories {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem;
}
.widget_product_categories ul.product-categories li { margin: 0; }
.widget_product_categories ul.product-categories a {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .45rem .25rem;
  text-decoration: none; font-size: .925rem;
  border-radius: var(--mg-radius);
}
.widget_product_categories ul.product-categories a:hover {
  background: var(--mg-olive-soft); color: var(--mg-olive-dark);
}
.widget_product_categories .count { color: var(--mg-muted); font-size: .8rem; }
.widget_product_categories .current-cat > a { color: var(--mg-olive-dark); font-weight: 700; }
.widget_product_categories ul.children { padding-left: .75rem; }

/* A widget with no title still needs its top rule to line up with the others */
.mg-widget > form:first-child { margin-top: 0; }

/* ==========================================================================
   Migrated (legacy builder) page content
   --------------------------------------------------------------------------
   The shims in inc/legacy-shortcodes.php emit layout-neutral wrappers; these
   rules give them rhythm without re-applying the page gutter.
   ========================================================================== */
.mg-legacy-section + .mg-legacy-section { margin-top: 2rem; }
.mg-legacy-row { display: flow-root; }
.mg-legacy-row + .mg-legacy-row { margin-top: 1.25rem; }
.mg-legacy-col > :first-child { margin-top: 0; }
.mg-legacy-col > :last-child { margin-bottom: 0; }
.mg-legacy-btn { margin: 1.5rem 0 0; }

/* The builder used [gap] generously; keep it but stop it stacking up. */
.mg-gap + .mg-gap { display: none; }
.mg-legacy-section > .mg-gap:first-child,
.entry-content > .mg-gap:first-child { display: none; }

/* Readable measure for body copy, but headings and media run full width. */
.mg-entry { max-width: none; }
.mg-entry .entry-content > p,
.mg-entry .entry-content > ul,
.mg-entry .entry-content > ol,
.mg-entry .mg-legacy-col > p,
.mg-entry .mg-legacy-col > ul,
.mg-entry .mg-legacy-col > ol {
  max-width: 76ch;
}
.mg-entry h2 { margin-top: 2.25rem; }
.mg-entry h2:first-child { margin-top: 0; }

/* Legacy inline text-align:center on headings looked like a stray indent
   once the content column narrowed; keep headings aligned with the copy. */
.mg-entry .entry-content h1[style*="center"],
.mg-entry .entry-content h2[style*="center"],
.mg-entry .entry-content h3[style*="center"] {
  text-align: left !important;
}

/* ---------- content page shell ---------- */
.mg-entry .entry-content > :first-child { margin-top: 0; }
.mg-page-lead {
  font-size: 1.0625rem;
  color: var(--mg-ink-3);
  max-width: 70ch;
}

/* ---------- contact: form + details side by side ---------- */
.mg-contact {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: start;
}
@media (max-width: 860px) { .mg-contact { grid-template-columns: 1fr; } }

.mg-contact__aside {
  background: var(--mg-bg-alt);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg);
  padding: 1.4rem;
  position: sticky;
  top: calc(var(--mg-header-h) + 1rem);
}
@media (max-width: 860px) { .mg-contact__aside { position: static; } }
.mg-contact__aside h2 { font-size: 1.15rem; text-transform: uppercase; margin-bottom: .75rem; }
.mg-contact__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .9rem; }
.mg-contact__list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.mg-contact__list svg { width: 20px; height: 20px; flex: 0 0 auto; stroke: var(--mg-olive-deep); fill: none; stroke-width: 1.8; margin-top: .15rem; }
.mg-contact__list a { text-decoration: none; }
.mg-contact__list a:hover { text-decoration: underline; }
.mg-contact__list strong { display: block; font-family: var(--mg-font-head); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.mg-contact__hours { font-size: .9rem; color: var(--mg-ink-3); }
.mg-contact__hours dt { font-weight: 700; }
.mg-contact__hours dd { margin: 0 0 .4rem; }

/* WPForms inside the themed shell */
.wpforms-container { margin: 0 !important; }
.wpforms-form .wpforms-field { padding: 0 0 1rem !important; }
.wpforms-form .wpforms-field-label { font-size: .9rem !important; font-weight: 600 !important; }
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea,
.wpforms-form select {
  border: 2px solid var(--mg-line) !important;
  border-radius: var(--mg-radius) !important;
  padding: .75rem .85rem !important;
  font-family: var(--mg-font) !important;
  max-width: none !important;
}
.wpforms-form input:focus, .wpforms-form textarea:focus, .wpforms-form select:focus {
  border-color: var(--mg-olive-deep) !important;
  box-shadow: none !important;
}
.wpforms-form button[type="submit"] {
  background: var(--mg-dark) !important;
  border: 2px solid var(--mg-dark) !important;
  color: #fff !important;
  font-family: var(--mg-font-head) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  padding: .9rem 1.75rem !important;
  border-radius: var(--mg-radius) !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.wpforms-form button[type="submit"]:hover {
  background: var(--mg-olive-deep) !important;
  border-color: var(--mg-olive-deep) !important;
}

/* ---------- FAQ page ---------- */
.mg-entry h3 { margin-top: 2rem; }
.mg-entry .mg-accordion { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   Collapse legacy wrappers that no longer hold anything.
   Removing the duplicate page title can leave a [section] containing only a
   [gap], which still occupied its own band of white space. :has() lets the
   wrapper disappear when there is nothing substantive inside it.
   -------------------------------------------------------------------------- */
.mg-legacy-section:not(:has(h1, h2, h3, h4, h5, h6, p, ul, ol, table, img,
  form, iframe, blockquote, details, a, .mg-accordion, .mg-legacy-btn)) {
  display: none;
}

/* A spacer at the top of a column duplicates the wrapper's own spacing. */
.mg-legacy-col > .mg-gap:first-child,
.mg-legacy-row > .mg-gap:first-child,
.entry-content > .mg-gap:first-child {
  display: none;
}

/* First real block in the content should sit tight under the page header. */
.mg-entry .entry-content > .mg-legacy-section:first-child { margin-top: 0; }
.mg-entry .entry-content > .mg-legacy-section:first-child > .mg-legacy-row:first-child > .mg-legacy-col:first-child > :first-child { margin-top: 0; }

/* Fallback for browsers without :has(): keep the empty band small rather
   than full height. */
@supports not selector(:has(*)) {
  .mg-gap { height: .5rem !important; }
}

/* --------------------------------------------------------------------------
   Footer bottom bar — the legal menu runs inline.
   .mg-footer ul is a vertical grid for the link columns above; wp_nav_menu
   puts its <ul> inside a <nav>, so that grid was stacking Terms / Privacy /
   Cookies instead of laying them out in a row.
   -------------------------------------------------------------------------- */
.mg-footer__bottom nav { display: contents; }
.mg-footer__bottom ul,
.mg-footer__bottom .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mg-footer__bottom li { margin: 0; }
.mg-footer__bottom a { white-space: nowrap; }

@media (max-width: 575px) {
  .mg-footer__bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .mg-footer__bottom ul { gap: .4rem .9rem; }
}

/* ==========================================================================
   WooCommerce core CSS — layout de-conflicting (consolidated)
   --------------------------------------------------------------------------
   woocommerce-layout.css predates CSS grid and positions everything with
   floats and percentage widths, using selectors like
   `.woocommerce .cart-collaterals .cart_totals` (0,2,1) that outrank plain
   component classes. This theme lays those same regions out with flex/grid,
   so each float rule has to be countered at matching specificity.

   Everything here is a neutralisation of a core rule, not new design: the
   visual styling lives with its component further up this file. Grouped in
   one place so the next conflict is easy to find.

   Button styling is NOT countered here — the theme adds the
   .woocommerce-block-theme-has-button-styles body class (see
   inc/woocommerce.php), which is Woo's own opt-out.
   ========================================================================== */

/* ---------- pagination: drop the joined-cell border box ---------- */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
  text-align: center;
  margin-top: 2.5rem;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  white-space: normal;
  border: 0;
  margin: 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
  float: none;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .7rem;
  margin: 0;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  background: var(--mg-surface);
  color: var(--mg-ink);
  font-family: var(--mg-font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce-page nav.woocommerce-pagination ul li a:hover,
.woocommerce-page nav.woocommerce-pagination ul li a:focus {
  background: var(--mg-olive-soft);
  border-color: var(--mg-olive);
  color: var(--mg-olive-dark);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
  background: var(--mg-dark);
  border-color: var(--mg-dark);
  color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li .next,
.woocommerce nav.woocommerce-pagination ul li .prev {
  font-size: 1.15rem;
}

/* ---------- catalog toolbar: result count + ordering ---------- */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  float: none;
  margin: 0 0 0 auto;
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  float: none;
  margin: 0;
}

/* ---------- cart: totals panel sits in the theme grid ---------- */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
  width: auto;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  float: none;
  width: auto;
}
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
  float: none;
  width: auto;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  padding: .9rem .6rem;
  line-height: 1.5;
}
.woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
}

/* ---------- account: navigation beside content, not floated ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

/* ---------- single product: quantity + add-to-cart in a flex row ---------- */
.woocommerce div.product form.cart div.quantity {
  float: none;
  margin: 0;
}
.woocommerce div.product form.cart .button {
  float: none;
  vertical-align: baseline;
}
.woocommerce div.product form.cart {
  margin-bottom: 1.25rem;
}
.woocommerce .quantity .qty {
  width: 64px;
  text-align: center;
}

/* ---------- notices: the theme lays these out with flex ---------- */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-error .button {
  float: none;
  margin-left: auto;
}
.woocommerce-error::before, .woocommerce-error::after,
.woocommerce-info::before, .woocommerce-info::after,
.woocommerce-message::before, .woocommerce-message::after {
  content: none;
  display: none;
}

/* ---------- two-column form sets (checkout, addresses) ---------- */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
  float: none;
  width: auto;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
  width: auto;
  float: none;
}
.woocommerce form .form-row {
  display: block;
  padding: 0;
  margin: 0 0 1rem;
}

/* ---------- sale flash: theme draws its own badge on cards ---------- */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  display: none;
}
.woocommerce div.product span.onsale {
  display: inline-block;
  position: static;
  margin: 0 0 .5rem;
  padding: .25rem .6rem;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  border-radius: 2px;
  background: var(--mg-sale);
  color: #fff;
  font-family: var(--mg-font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- star rating keeps Woo's icon font, recoloured ---------- */
.woocommerce .star-rating { color: #d8a024; }
.woocommerce ul.products li.product .star-rating { margin: 0 0 .25rem; font-size: .9em; }
.woocommerce .woocommerce-product-rating { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.woocommerce .woocommerce-product-rating .woocommerce-review-link { color: var(--mg-muted); font-size: .875rem; }

/* ---------- misc float clears that break grid children ---------- */
.woocommerce .woocommerce-breadcrumb { margin: 0; padding: 0; }
.woocommerce .woocommerce-breadcrumb::before,
.woocommerce .woocommerce-breadcrumb::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .8rem 1.25rem; font-weight: 700; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--mg-ink); }

/* Woo floats the single-product images/summary columns. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none;
  width: auto;
  margin-bottom: 0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--mg-ink); }

/* ==========================================================================
   Generic WooCommerce buttons
   --------------------------------------------------------------------------
   With Woo's own button CSS opted out (see the body class in
   inc/woocommerce.php), the theme owns every .button WooCommerce renders —
   Update cart, Apply coupon, Continue shopping, View order, Pay, and the
   account screens. Specific buttons (add to cart, checkout, place order) keep
   their own stronger styling elsewhere in this file.
   ========================================================================== */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type="submit"].button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 1.35rem;
  border: 2px solid var(--mg-dark);
  border-radius: var(--mg-radius);
  background: var(--mg-dark);
  color: #fff;
  cursor: pointer;
  font-family: var(--mg-font-head);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--mg-olive-deep);
  border-color: var(--mg-olive-deep);
  color: #fff;
}
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce button.button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Secondary weight for the quieter cart actions. */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"],
.woocommerce button[name="apply_coupon"] {
  background: transparent;
  color: var(--mg-ink);
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce input[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover {
  background: var(--mg-dark);
  color: #fff;
}
.woocommerce button[name="update_cart"]:disabled {
  border-color: var(--mg-line);
  color: var(--mg-muted);
}

/* (cart actions row is laid out in the Cart page section below) */

/* Loading state Woo toggles during AJAX. */
.woocommerce .button.loading { opacity: .6; pointer-events: none; }

/* ==========================================================================
   Cart page
   --------------------------------------------------------------------------
   The cart table has two empty header cells (remove, thumbnail). With no
   widths declared the browser's auto table algorithm handed them a large
   share of the row and crushed everything else to the right, so each column
   is sized explicitly here. Widths are reset again below 768px, where
   woocommerce-smallscreen.css stacks each cell into a block.
   ========================================================================== */

.woocommerce-cart .mg-cart { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.woocommerce table.cart,
.woocommerce-page table.cart {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.woocommerce table.cart thead th {
  text-align: left;
  padding: .75rem .6rem;
  border-bottom: 2px solid var(--mg-dark);
  font-family: var(--mg-font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.woocommerce table.cart tbody td {
  padding: 1rem .6rem;
  border-bottom: 1px solid var(--mg-line);
  vertical-align: middle;
}

/* ---- column widths ---- */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove { width: 48px; padding-inline: 0; text-align: center; }

.woocommerce table.cart th.product-thumbnail,
.woocommerce table.cart td.product-thumbnail { width: 104px; }

.woocommerce table.cart th.product-price,
.woocommerce table.cart td.product-price { width: 130px; text-align: right; white-space: nowrap; }

.woocommerce table.cart th.product-quantity,
.woocommerce table.cart td.product-quantity { width: 150px; }

.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal { width: 140px; text-align: right; white-space: nowrap; }

.woocommerce table.cart td.product-subtotal { font-family: var(--mg-font-head); font-size: 1.05rem; font-weight: 700; }

/* ---- cells ---- */
.woocommerce table.cart td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  padding: 4px;
}
.woocommerce table.cart td.product-name a {
  font-family: var(--mg-font-head);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  display: inline-block;
}
.woocommerce table.cart td.product-name a:hover { color: var(--mg-olive-deep); }
.woocommerce table.cart td.product-name .variation,
.woocommerce table.cart td.product-name dl.variation {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: var(--mg-muted);
}
.woocommerce table.cart td.product-name .variation dt,
.woocommerce table.cart td.product-name .variation dd { display: inline; margin: 0; }

.woocommerce table.cart td.product-remove a.remove,
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mg-bg-alt);
  color: var(--mg-muted) !important;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.woocommerce table.cart td.product-remove a.remove:hover,
.woocommerce a.remove:hover {
  background: var(--mg-sale);
  color: #fff !important;
}

.woocommerce table.cart td.product-quantity .quantity { display: inline-flex; }

/* ---- actions row: coupon left, update right ----
   The cell MUST stay display:table-cell. Giving a <td> display:flex (or
   block) pulls it out of the table formatting context, and its colspan="6"
   is discarded with it: the browser wraps the contents in an anonymous cell
   that occupies column 1 only — the 48px remove column — which stacked the
   coupon field and both buttons into a narrow strip. Floats inside the cell
   give the same left/right split while keeping the colspan intact. */
.woocommerce table.cart td.actions,
.woocommerce-cart table.cart td.actions {
  display: table-cell;
  padding: 1.1rem .6rem;
  border-bottom: 0;
  text-align: left;
  vertical-align: middle;
}
/* Contain the floated children. */
.woocommerce table.cart td.actions::after {
  content: "";
  display: block;
  clear: both;
}
.woocommerce table.cart td.actions .coupon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  float: left;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.woocommerce table.cart td.actions .coupon label { display: none; }
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon #coupon_code {
  flex: 0 1 260px;
  width: 260px;
  min-width: 0;
  padding: .75rem .85rem;
  border: 2px solid var(--mg-line);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font);
  font-size: .95rem;
}
.woocommerce table.cart td.actions .coupon .input-text:focus { border-color: var(--mg-olive-deep); outline: none; }
.woocommerce table.cart td.actions > button[name="update_cart"],
.woocommerce table.cart td.actions > input[name="update_cart"] {
  float: right;
  margin: 0;
}

/* ==========================================================================
   Collaterals: totals panel beside cross-sells
   ========================================================================== */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  width: auto;
}
.woocommerce .cart-collaterals .cross-sells { grid-column: 1; width: auto; float: none; }
.woocommerce .cart-collaterals .cart_totals { grid-column: 2; width: auto; float: none; }

.woocommerce .cart-collaterals .cross-sells > h2 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
/* Keep cross-sell cards a sensible size inside the narrower column. */
.woocommerce .cart-collaterals .cross-sells ul.products {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.woocommerce .cart_totals {
  background: var(--mg-bg-alt);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg);
  padding: 1.35rem;
  position: sticky;
  top: calc(var(--mg-header-h) + 1rem);
}
.woocommerce .cart_totals h2 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--mg-olive);
}
.woocommerce .cart_totals table,
.woocommerce .cart_totals table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table.shop_table th {
  width: auto;
  padding: .55rem 0;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
  text-align: left;
  font-family: var(--mg-font);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.woocommerce .cart_totals table td,
.woocommerce .cart_totals table.shop_table td {
  padding: .55rem 0;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  text-align: right;
  white-space: nowrap;
}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
  border-bottom: 0;
  border-top: 2px solid var(--mg-dark);
  padding-top: .85rem;
  font-family: var(--mg-font-head);
  font-size: 1.2rem;
  font-weight: 700;
}
.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .shipping-calculator-button { font-size: .85rem; color: var(--mg-muted); }
.woocommerce .wc-proceed-to-checkout { margin-top: 1.1rem; padding: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 1rem;
  font-size: 1.05rem;
  background: var(--mg-olive-deep);
  border-color: var(--mg-olive-deep);
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--mg-dark);
  border-color: var(--mg-dark);
}

/* Empty cart */
.cart-empty.woocommerce-info { font-size: 1.05rem; }
.return-to-shop { margin-top: 1rem; }

/* ==========================================================================
   Narrow screens — woocommerce-smallscreen.css turns each cell into a block,
   so the fixed column widths above must be released or the stacked rows
   inherit them and collapse.
   ========================================================================== */
@media (max-width: 768px) {
  .woocommerce table.cart th.product-remove,
  .woocommerce table.cart td.product-remove,
  .woocommerce table.cart th.product-thumbnail,
  .woocommerce table.cart td.product-thumbnail,
  .woocommerce table.cart th.product-price,
  .woocommerce table.cart td.product-price,
  .woocommerce table.cart th.product-quantity,
  .woocommerce table.cart td.product-quantity,
  .woocommerce table.cart th.product-subtotal,
  .woocommerce table.cart td.product-subtotal {
    width: auto;
    text-align: right;
  }
  .woocommerce table.cart td.product-thumbnail { text-align: left; }
  .woocommerce table.cart td.product-thumbnail img { width: 96px; height: 96px; }
  .woocommerce table.cart td.product-remove { text-align: right; }

  .woocommerce table.cart td.actions { display: block; text-align: left; }
  .woocommerce table.cart td.actions .coupon {
    display: flex;
    float: none;
    width: 100%;
    max-width: none;
    margin-bottom: .6rem;
  }
  .woocommerce table.cart td.actions .coupon .input-text,
  .woocommerce table.cart td.actions .coupon #coupon_code { flex: 1 1 auto; width: auto; }
  .woocommerce table.cart td.actions > button[name="update_cart"],
  .woocommerce table.cart td.actions > input[name="update_cart"] { float: none; width: 100%; }

  .woocommerce .cart-collaterals,
  .woocommerce-page .cart-collaterals { grid-template-columns: 1fr; }
  .woocommerce .cart-collaterals .cross-sells,
  .woocommerce .cart-collaterals .cart_totals { grid-column: 1; }
  .woocommerce .cart_totals { position: static; }
}

/* ==========================================================================
   Kill WooCommerce's float clearfixes
   --------------------------------------------------------------------------
   Woo adds `::before { content:" "; display:table }` + `::after { clear:both }`
   to 27 containers to contain floats. Harmless under float layout, but in a
   grid or flex container each pseudo-element becomes a real item and takes a
   cell: on .col2-set that pushed "Billing details" out of column 1 and into
   column 2, leaving the left half blank. Nothing here clears floats any more,
   so they are all switched off in one place rather than discovered one
   container at a time.
   ========================================================================== */
.woocommerce .col2-set::before,        .woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,   .woocommerce-page .col2-set::after,
.woocommerce .cart-collaterals::before,.woocommerce .cart-collaterals::after,
.woocommerce .cart::before,            .woocommerce .cart::after,
.woocommerce .buttons::before,         .woocommerce .buttons::after,
.woocommerce .order_details::before,   .woocommerce .order_details::after,
.woocommerce .payment_methods::before, .woocommerce .payment_methods::after,
.woocommerce .form-row::before,        .woocommerce .form-row::after,
.woocommerce .tabs::before,            .woocommerce .tabs::after,
.woocommerce .thumbnails::before,      .woocommerce .thumbnails::after,
.woocommerce .page-numbers::before,    .woocommerce .page-numbers::after,
.woocommerce .wc-proceed-to-checkout::before, .woocommerce .wc-proceed-to-checkout::after,
.woocommerce .woocommerce-billing-fields::before,  .woocommerce .woocommerce-billing-fields::after,
.woocommerce .woocommerce-shipping-fields::before, .woocommerce .woocommerce-shipping-fields::after,
.woocommerce .woocommerce-product-rating::before,  .woocommerce .woocommerce-product-rating::after,
.woocommerce .woocommerce-breadcrumb::before,      .woocommerce .woocommerce-breadcrumb::after,
.woocommerce .shipping_calculator::before,         .woocommerce .shipping_calculator::after {
  content: none;
  display: none;
}

/* ==========================================================================
   Checkout
   --------------------------------------------------------------------------
   Two columns on desktop: customer details on the left, a sticky order
   summary and payment panel on the right, so the pay button stays reachable
   without scrolling past the whole form.
   ========================================================================== */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
/* Everything defaults to the left column; only .mg-checkout__summary sits
   right, spanning every row so it can start at the top and stay sticky
   however tall the form gets. The catch-all keeps order notes, notice groups
   and anything a plugin injects out of the summary column. */
.woocommerce-checkout form.checkout > * { grid-column: 1; min-width: 0; }
.woocommerce-checkout form.checkout > .mg-checkout__summary {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: calc(var(--mg-header-h) + 1rem);
}
.woocommerce-checkout .mg-checkout__summary > #order_review_heading { margin: 0 0 1rem; }

@media (max-width: 900px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout > *,
  .woocommerce-checkout form.checkout > .mg-checkout__summary {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* Billing / shipping stack within the left column. */
.woocommerce-checkout .col2-set,
.woocommerce .col2-set,
.woocommerce-page .col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  width: 100%;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { grid-column: 1; float: none; width: auto; }
.woocommerce-checkout .col2-set .col-2:empty { display: none; }

.woocommerce-checkout h3 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--mg-olive);
}
.woocommerce-checkout #order_review_heading {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Field grid: two-up for the paired rows. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
.woocommerce-checkout .form-row { grid-column: 1 / -1; margin: 0 0 1rem; padding: 0; }
.woocommerce-checkout .form-row-first { grid-column: 1; }
.woocommerce-checkout .form-row-last { grid-column: 2; }
@media (max-width: 575px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { grid-column: 1; }
}
.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: .3rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.woocommerce-checkout .form-row .optional { color: var(--mg-muted); font-weight: 400; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  min-height: 46px;
  padding: .7rem .85rem;
  border: 2px solid var(--mg-line);
  border-radius: var(--mg-radius);
  background: var(--mg-surface);
  font-family: var(--mg-font);
  font-size: .95rem;
  line-height: 1.4;
}
.woocommerce-checkout .form-row textarea { min-height: 96px; resize: vertical; }
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus { border-color: var(--mg-olive-deep); outline: none; }
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select { border-color: var(--mg-sale); }
.woocommerce-checkout .form-row.woocommerce-validated input.input-text { border-color: var(--mg-ok); }

/* select2 (country / state) matched to the native fields. */
.woocommerce-checkout .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--mg-ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }

/* ---------- order review panel ---------- */
.woocommerce-checkout #order_review {
  background: var(--mg-bg-alt);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg);
  padding: 1.35rem;
}

.woocommerce-checkout table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0 0 1rem;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
  vertical-align: top;
}
.woocommerce-checkout table.shop_table thead th {
  font-family: var(--mg-font-head);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--mg-dark);
}
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th.product-total,
.woocommerce-checkout table.shop_table tfoot td { text-align: right; white-space: nowrap; }
.woocommerce-checkout table.shop_table td.product-name {
  font-size: .9rem;
  line-height: 1.4;
  padding-right: .75rem;
}
.woocommerce-checkout table.shop_table .product-quantity { font-weight: 700; color: var(--mg-muted); }
.woocommerce-checkout table.shop_table tfoot th {
  font-family: var(--mg-font);
  font-size: .95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
}
.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  border-bottom: 0;
  border-top: 2px solid var(--mg-dark);
  padding-top: .8rem;
  font-family: var(--mg-font-head);
  font-size: 1.2rem;
  font-weight: 700;
}

/* ---------- payment ---------- */
.woocommerce-checkout #payment {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--mg-line);
  border-radius: 0;
  padding: 1rem 0 0;
  margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
  border: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0;
  padding: .75rem .9rem;
  background: var(--mg-surface);
  border: 2px solid var(--mg-line);
  border-radius: var(--mg-radius);
  list-style: none;
  transition: border-color .18s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--mg-olive-deep); }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { margin-right: .5rem; accent-color: var(--mg-olive-deep); }
.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline;
  font-family: var(--mg-font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
  position: relative;
  margin: .7rem 0 0;
  padding: .75rem .9rem;
  background: var(--mg-olive-soft);
  border-radius: var(--mg-radius);
  color: var(--mg-ink-3);
  font-size: .875rem;
  line-height: 1.5;
}
.woocommerce-checkout #payment div.payment_box::before { content: none; display: none; }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
  font-size: .8125rem;
  color: var(--mg-muted);
  margin-bottom: .75rem;
}
.woocommerce-checkout #payment .form-row.place-order { margin: 0; padding: 0; }
.woocommerce-checkout #place_order {
  width: 100%;
  margin: 0;
  padding: 1rem;
  background: var(--mg-olive-deep);
  border: 2px solid var(--mg-olive-deep);
  border-radius: var(--mg-radius);
  color: #fff;
  cursor: pointer;
  font-family: var(--mg-font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.woocommerce-checkout #place_order:hover { background: var(--mg-dark); border-color: var(--mg-dark); }

/* ---------- coupon toggle ---------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 1.25rem; }
.woocommerce-checkout form.checkout_coupon {
  margin: 0 0 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg);
  background: var(--mg-bg-alt);
  /* A coupon code is a handful of characters. Sizing the field to the content
     rather than to 1fr keeps it from stretching the full page width. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.woocommerce-checkout form.checkout_coupon p { margin: 0; }
/* Some WooCommerce versions precede the fields with an instruction
   paragraph; it gets its own full-width line. Scoped with :not(.form-row) so
   it cannot match the field rows themselves — p:first-of-type would have
   matched .form-row-first and stretched the input back to full width. */
.woocommerce-checkout form.checkout_coupon > p:not(.form-row) {
  flex: 1 1 100%;
  margin-bottom: .2rem;
  font-size: .9rem;
  color: var(--mg-ink-3);
}
/* Core emits a <br> between the screen-reader label and the input. */
.woocommerce-checkout form.checkout_coupon .form-row br { display: none; }
.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last {
  grid-column: auto;
  width: auto;
  flex: 0 0 auto;
  padding: 0;
}
.woocommerce-checkout form.checkout_coupon .input-text {
  width: 300px;
  max-width: 100%;
  padding: .7rem .85rem;
  border: 2px solid var(--mg-line);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font);
  font-size: .95rem;
}
.woocommerce-checkout form.checkout_coupon .input-text:focus { border-color: var(--mg-olive-deep); outline: none; }
.woocommerce-checkout form.checkout_coupon .clear { display: none; }

@media (max-width: 480px) {
  .woocommerce-checkout form.checkout_coupon .form-row-first,
  .woocommerce-checkout form.checkout_coupon .form-row-last { flex: 1 1 100%; }
  .woocommerce-checkout form.checkout_coupon .input-text { width: 100%; }
  .woocommerce-checkout form.checkout_coupon button { width: 100%; }
}

/* Order received / thank-you page */
.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--mg-bg-alt);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg);
}
.woocommerce-order .woocommerce-order-overview li {
  border: 0;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mg-muted);
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: .25rem;
  font-family: var(--mg-font-head);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mg-ink);
}

/* ==========================================================================
   404 and search-results pages
   ========================================================================== */
.mg-404 {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
  align-items: start;
}
@media (max-width: 860px) { .mg-404 { grid-template-columns: 1fr; } }
.mg-404 h2 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.mg-404__search .mg-searchform { max-width: 520px; }
.mg-404__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.mg-404__help {
  background: var(--mg-bg-alt);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg);
  padding: 1.35rem;
}
.mg-404__help a { text-decoration: none; font-weight: 600; }
.mg-404__help a:hover { color: var(--mg-olive-deep); text-decoration: underline; }

/* category chips, shared by 404 and the empty-search state */
.mg-chiprow { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.mg-chip {
  display: inline-flex;
  align-items: center;
  padding: .45rem .9rem;
  border: 1px solid var(--mg-line);
  border-radius: 999px;
  background: var(--mg-surface);
  color: var(--mg-ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mg-chip:hover { background: var(--mg-olive-soft); border-color: var(--mg-olive); color: var(--mg-olive-dark); }

.mg-results .mg-section__head { margin-bottom: 1.25rem; }
.mg-results .mg-section__head h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.mg-noresults { max-width: 70ch; }
.mg-noresults .mg-searchform { max-width: 520px; margin-block: 1.25rem; }
.mg-noresults h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 2rem; }

/* ==========================================================================
   REDESIGN LAYER
   --------------------------------------------------------------------------
   Appended last, so these supersede the earlier single-row header rules on
   equal specificity. Covers the centred-logo header, the new home page
   sections and the restructured footer.
   ========================================================================== */

/* ---------- announcement bar now carries a phone link ---------- */
.mg-topbar .mg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 36px;
  text-align: center;
}
.mg-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  white-space: nowrap;
}
.mg-topbar__phone:hover { color: #fff; }
.mg-topbar__phone svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
@media (max-width: 767px) {
  .mg-topbar__phone { display: none; }
}

/* ---------- two-row header, brand centred ---------- */
.mg-header__top { border-bottom: 1px solid rgba(0,0,0,.12); }
.mg-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 84px;
}
.mg-header__brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-header__inner .mg-burger { grid-column: 1; justify-self: start; }
.mg-header__inner .mg-actions { grid-column: 3; justify-self: end; }

.mg-header__brand img.custom-logo,
.mg-header__brand .mg-brand img { max-height: 58px; width: auto; }
.mg-header__brand .custom-logo-link { margin: 0; }

.mg-header__nav { background: rgba(0,0,0,.14); }
.mg-header__nav .mg-wrap { display: flex; justify-content: center; }
.mg-header__nav .mg-nav { margin: 0; }
.mg-header__nav .mg-nav ul { justify-content: center; }
.mg-header__nav .mg-nav > ul > li > a { padding: .85rem 1.1rem; }

/* The burger only exists below the nav breakpoint. */
.mg-burger { display: none; }
@media (max-width: 991px) {
  .mg-header__nav { display: none; }
  .mg-burger { display: inline-flex; }
  .mg-header__inner { min-height: 64px; }
  .mg-header__brand img.custom-logo { max-height: 42px; }
  .mg-actions__account { display: none; }
}

/* ---------- hero quick links ---------- */
.mg-hero__quick {
  position: relative;
  z-index: 3;
  background: rgba(10,10,10,.82);
  border-top: 1px solid rgba(255,255,255,.1);
}
.mg-hero__quick .mg-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.mg-hero__quick a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  justify-content: center;
  padding: .9rem 1.25rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--mg-font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,.12);
  transition: background .18s ease, color .18s ease;
}
.mg-hero__quick a:last-child { border-right: 0; }
.mg-hero__quick a:hover { background: var(--mg-olive-deep); color: #fff; }
.mg-hero__quick svg { stroke: var(--mg-olive); fill: none; stroke-width: 2.2; }
.mg-hero__quick a:hover svg { stroke: #fff; }
@media (max-width: 575px) {
  .mg-hero__quick a { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* ---------- positioning block ---------- */
.mg-intro__inner { max-width: 58ch; margin-inline: auto; text-align: center; }
.mg-intro__inner h2 { text-transform: uppercase; }
.mg-intro__inner p:last-child { color: var(--mg-ink-3); font-size: 1.0625rem; margin: 0; }

/* ---------- two large category tiles ---------- */
.mg-section--flush { padding-top: 0; }
.mg-split { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .mg-split { grid-template-columns: 1fr; } }

.mg-split__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(280px, 34vw, 420px);
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border-radius: var(--mg-radius-lg);
  background: var(--mg-ink-2) center/cover no-repeat;
  color: #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mg-split__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.1) 25%, rgba(10,10,10,.85) 100%);
  transition: background .25s ease;
}
.mg-split__tile:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-lift); color: #fff; }
.mg-split__tile:hover::after { background: linear-gradient(180deg, rgba(68,96,26,.3) 15%, rgba(10,10,10,.88) 100%); }
.mg-split__body { position: relative; z-index: 2; display: grid; gap: .3rem; }
.mg-split__count { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.mg-split__title {
  font-family: var(--mg-font-head);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.mg-split__link {
  margin-top: .5rem;
  font-family: var(--mg-font-head);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--mg-olive);
  padding-bottom: 2px;
  justify-self: start;
}

/* ---------- spotlight ---------- */
.mg-spotlight {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 860px) { .mg-spotlight { grid-template-columns: 1fr; } }

.mg-spotlight__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--mg-radius-lg);
  overflow: hidden;
  background: var(--mg-bg-alt);
}
.mg-spotlight__media img { width: 100%; height: 100%; object-fit: cover; }
.mg-spotlight__body h2 { text-transform: uppercase; }
.mg-spotlight__body p { color: var(--mg-ink-3); }
.mg-spotlight__cta { margin: 1.5rem 0 0; }

/* Flip puts the image second on desktop, but keeps source order on mobile. */
@media (min-width: 861px) {
  .mg-spotlight--flip .mg-spotlight__media { order: 2; }
  .mg-spotlight--flip .mg-spotlight__body { order: 1; }
}

.mg-ticks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.mg-ticks li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--mg-ink-3); }
.mg-ticks svg { flex: 0 0 auto; margin-top: .2rem; stroke: var(--mg-olive-deep); fill: none; stroke-width: 2.4; }

/* ---------- guarantee band ---------- */
.mg-guarantee { background: var(--mg-olive-deep); color: #fff; }
.mg-guarantee__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
@media (max-width: 860px) { .mg-guarantee__inner { grid-template-columns: 1fr; } }
.mg-guarantee h2 { color: #fff; text-transform: uppercase; margin: 0 0 .5rem; }
.mg-guarantee p { color: rgba(255,255,255,.85); margin: 0; max-width: 60ch; }
.mg-guarantee__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.mg-btn--onolive { background: transparent; border-color: rgba(255,255,255,.65); color: #fff; }
.mg-btn--onolive:hover { background: var(--mg-dark); border-color: var(--mg-dark); color: #fff; }

/* ---------- explore tiles ---------- */
.mg-explore { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .mg-explore { grid-template-columns: 1fr; } }

.mg-explore__tile {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-lg);
  background: var(--mg-surface);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mg-explore__tile:hover { border-color: var(--mg-olive); box-shadow: var(--mg-shadow); transform: translateY(-2px); }
.mg-explore__media { border-radius: var(--mg-radius); overflow: hidden; aspect-ratio: 1/1; background: var(--mg-bg-alt); }
.mg-explore__media img { width: 100%; height: 100%; object-fit: cover; }
.mg-explore__body { display: grid; gap: .3rem; }
.mg-explore__label {
  font-family: var(--mg-font-head);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mg-ink);
}
.mg-explore__text { font-size: .9rem; color: var(--mg-muted); }
.mg-explore__link {
  margin-top: .35rem;
  font-family: var(--mg-font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mg-olive-dark);
}
@media (max-width: 420px) {
  .mg-explore__tile { grid-template-columns: 1fr; }
  .mg-explore__media { aspect-ratio: 16/9; }
}

/* ---------- footer additions ---------- */
.mg-footer__blurb { max-width: 34ch; margin-bottom: 1rem; }
.mg-footer__support .mg-footer__cta {
  display: inline-flex;
  margin-bottom: 1rem;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.mg-footer__support .mg-footer__cta:hover { background: var(--mg-olive-deep); border-color: var(--mg-olive-deep); color: #fff; }
.mg-footer__support .mg-footer__address { margin-top: 1rem; font-size: .875rem; }

.mg-totop {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  padding: .4rem .85rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--mg-radius);
  background: transparent;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-family: var(--mg-font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mg-totop:hover { background: var(--mg-olive-deep); border-color: var(--mg-olive-deep); color: #fff; }
@media (max-width: 575px) { .mg-totop { margin-left: 0; } }

/* ==========================================================================
   HEADER v2 — brand left, nav inline right, light utility strip above
   --------------------------------------------------------------------------
   Appended last so these supersede the centred-logo rules earlier in this
   file on equal specificity. The masthead is the near-black ink tone with
   olive used for hover and the active item, which keeps the tactical look of
   the brand while giving the nav more contrast than the olive bar did.
   ========================================================================== */

/* ---------- utility strip ---------- */
.mg-utility {
  background: var(--mg-bg-alt);
  border-bottom: 1px solid var(--mg-line);
  font-size: .8125rem;
}
.mg-utility .mg-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 42px;
}
.mg-utility__locale {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--mg-ink-3);
  font-weight: 600;
  letter-spacing: .04em;
}
.mg-utility__locale svg { stroke: var(--mg-olive-deep); fill: none; stroke-width: 1.6; }

.mg-utility__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--mg-ink-3);
  text-decoration: none;
  font-family: var(--mg-font-head);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .18s ease;
}
.mg-utility__link:first-of-type { margin-left: auto; }
.mg-utility__link:hover { color: var(--mg-olive-dark); }
.mg-utility__link svg { stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Cart badge sits inline here rather than floating over an icon button. */
.mg-utility .mg-cartlink { position: relative; }
.mg-utility .mg-count {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--mg-sale);
  color: #fff;
  border-radius: 999px;
  font-family: var(--mg-font);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 18px;
}
.mg-utility .mg-cart-total { color: var(--mg-ink); font-size: .8125rem; }

@media (max-width: 991px) {
  .mg-utility { display: none; }
}

/* ---------- masthead ---------- */
.mg-header { background: var(--mg-dark); }
.mg-header__top { border-bottom: 0; }

.mg-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 78px;
  grid-template-columns: none;
}

.mg-header__brand {
  grid-column: auto;
  justify-content: flex-start;
  flex: 0 0 auto;
  margin-right: auto;
}
.mg-header__brand img.custom-logo,
.mg-header__brand .mg-brand img { max-height: 54px; width: auto; }

/* Nav sits to the right of the brand, before the icons. */
.mg-header .mg-nav { margin: 0; flex: 0 1 auto; }
.mg-header .mg-nav > ul { justify-content: flex-end; gap: .15rem; }
.mg-header .mg-nav > ul > li > a {
  padding: .7rem .95rem;
  font-size: 1rem;
  letter-spacing: .09em;
}
.mg-header .mg-nav a:hover,
.mg-header .mg-nav .current-menu-item > a,
.mg-header .mg-nav .current_page_item > a,
.mg-header .mg-nav .current-menu-parent > a {
  background: transparent;
  color: var(--mg-olive);
}
/* Underline marks the active branch instead of a filled block. */
.mg-header .mg-nav > ul > li > a { position: relative; }
.mg-header .mg-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .35rem;
  height: 2px;
  background: var(--mg-olive);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.mg-header .mg-nav > ul > li > a:hover::after,
.mg-header .mg-nav > ul > li.current-menu-item > a::after,
.mg-header .mg-nav > ul > li.current-menu-parent > a::after,
.mg-header .mg-nav > ul > li.current_page_item > a::after { transform: scaleX(1); }

.mg-header__inner .mg-actions {
  grid-column: auto;
  justify-self: auto;
  flex: 0 0 auto;
  margin-left: .25rem;
}
.mg-header .mg-iconbtn { color: #fff; }
.mg-header .mg-iconbtn:hover { background: rgba(255,255,255,.1); color: var(--mg-olive); }

/* The cart icon in the masthead is for narrow screens only — the utility
   strip carries it on desktop. */
.mg-actions__cart { display: none; }

/* Second-level menus drop from the dark bar. */
.mg-header .mg-nav ul ul { background: var(--mg-surface); border-color: var(--mg-line); }

@media (max-width: 991px) {
  .mg-header__inner { min-height: 62px; gap: .5rem; }
  .mg-header__brand { margin-right: auto; }
  .mg-header__brand img.custom-logo { max-height: 40px; }
  .mg-actions__cart { display: inline-flex; }
  .mg-header .mg-nav { display: none; }
}

/* The sticky offset used by product/cart/checkout panels follows the
   masthead height. */
:root { --mg-header-h: 78px; }
@media (max-width: 991px) { :root { --mg-header-h: 62px; } }

/* ==========================================================================
   Utility strip v2 — locale | announcement | account + cart
   --------------------------------------------------------------------------
   Three explicit columns rather than flex with auto margins: a 1fr / auto /
   1fr grid keeps the announcement optically centred in the viewport even
   though the locale and the account links differ in width.
   ========================================================================== */
.mg-utility .mg-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
}
.mg-utility__locale { grid-column: 1; justify-self: start; }

.mg-utility__announce {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  text-align: center;
  color: var(--mg-ink);
  font-family: var(--mg-font-head);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mg-utility__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
/* The old auto-margin rule no longer applies now the actions are wrapped. */
.mg-utility__link:first-of-type { margin-left: 0; }

/* ---------- narrow screens ----------
   The strip stays visible so the promo line is not lost on mobile; only the
   locale and the account links drop, because the drawer and the masthead
   cart already carry those. */
@media (max-width: 991px) {
  .mg-utility { display: block; }
  .mg-utility .mg-wrap { grid-template-columns: 1fr; min-height: 38px; }
  .mg-utility__locale,
  .mg-utility__actions { display: none; }
  .mg-utility__announce {
    grid-column: 1;
    justify-self: stretch;
    font-size: .8125rem;
    letter-spacing: .03em;
  }
}

/* ==========================================================================
   Hero v2 — let the photograph show
   --------------------------------------------------------------------------
   The previous scrim was a flat grey wash across the whole frame, which
   drained the image. It is now weighted to the left, where the headline sits,
   and clears by about 60% so the right-hand side of the photograph stays
   bright. A soft bottom fade seats the quick-link bar without greying the
   middle of the image.
   ========================================================================== */
.mg-hero__slide { background-position: center 42%; }

.mg-hero__slide::after {
  background:
    linear-gradient(
      90deg,
      rgba(8, 10, 6, .90) 0%,
      rgba(8, 10, 6, .78) 26%,
      rgba(8, 10, 6, .42) 48%,
      rgba(8, 10, 6, .10) 68%,
      rgba(8, 10, 6, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 10, 6, .28) 0%,
      rgba(8, 10, 6, 0) 22%,
      rgba(8, 10, 6, 0) 68%,
      rgba(8, 10, 6, .45) 100%
    );
}

/* On narrow screens the text sits over the middle of the frame, so the scrim
   has to cover rather than sweep. */
@media (max-width: 767px) {
  .mg-hero__slide::after {
    background: linear-gradient( 180deg, rgba(8,10,6,.62) 0%, rgba(8,10,6,.72) 55%, rgba(8,10,6,.88) 100% );
  }
}

/* Give the type more weight against the photograph. */
.mg-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.mg-hero__inner > p { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.mg-hero .mg-eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* ==========================================================================
   Hero quick links — olive, so it reads as its own band
   --------------------------------------------------------------------------
   It previously used a translucent near-black, which sat directly against the
   dark trust strip below and the two merged into one muddy block. Olive
   separates them and carries the brand colour that left the masthead.
   ========================================================================== */
.mg-hero__quick {
  background: var(--mg-olive-deep);
  border-top: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.mg-hero__quick a {
  border-right-color: rgba(255,255,255,.2);
  letter-spacing: .1em;
}
.mg-hero__quick a:hover { background: rgba(0,0,0,.28); }
.mg-hero__quick svg { stroke: rgba(255,255,255,.85); stroke-width: 2.4; transition: transform .18s ease; }
.mg-hero__quick a:hover svg { stroke: #fff; transform: translateX(3px); }

/* Trust strip keeps the ink tone but gains a hairline so the two bands never
   read as one. */
.mg-trust { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

/* --------------------------------------------------------------------------
   Slider dots belong to the image, not to the whole hero.
   They were absolutely positioned against .mg-hero, which includes the
   quick-link bar, so they landed on top of the centre category link. Anchoring
   them to .mg-hero__slides keeps them over the photograph.
   -------------------------------------------------------------------------- */
.mg-hero__slides { position: relative; }
.mg-hero__dots { bottom: 1.1rem; }
@media (max-width: 575px) { .mg-hero__dots { bottom: .75rem; } }

/* ==========================================================================
   BRAND PALETTE — the logo's own two colours
   --------------------------------------------------------------------------
   Sampled from the MOTARD mark: gold #FCCC0C (star + chevrons) and orange
   #F0840C (wordmark).

   Measured contrast decided where each may be used:

     gold on ink            12.99:1   excellent
     orange on ink           7.55:1   strong
     ink on gold fill       12.99:1   excellent
     ink on orange fill      7.55:1   strong
     gold on white           1.52:1   unusable as text
     orange on white         2.62:1   unusable as text
     WHITE on orange fill    2.62:1   unusable - orange fills take INK text

   So the brand colours carry the dark surfaces (masthead, hero, trust strip,
   footer) and appear as fills with ink text. On light backgrounds they are
   replaced by --mg-orange-deep (4.58:1 on white), which reads as the same
   hue family while staying legible. Olive is kept as the supporting tone
   because it ties to the product photography.
   ========================================================================== */
:root {
  --mg-gold:        #FCCC0C;
  --mg-gold-soft:   #FFF4CC;
  --mg-orange:      #F0840C;
  --mg-orange-deep: #B45F07;  /* text on light surfaces - 4.58:1 on white */
  --mg-orange-soft: #FDF0E0;
}

/* ---------- primary action: gold fill, ink text ---------- */
.mg-btn--gold {
  background: var(--mg-gold);
  border-color: var(--mg-gold);
  color: var(--mg-on-accent);
}
.mg-btn--gold:hover {
  background: var(--mg-orange);
  border-color: var(--mg-orange);
  color: var(--mg-on-accent);
}

/* WooCommerce money actions follow the same rule. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
ul.products .button,
.woocommerce ul.products li.product .button {
  background: var(--mg-gold);
  border-color: var(--mg-gold);
  color: var(--mg-on-accent);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
ul.products .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: var(--mg-orange);
  border-color: var(--mg-orange);
  color: var(--mg-on-accent);
}

/* ---------- dark surfaces take gold ---------- */
.mg-header .mg-nav a:hover,
.mg-header .mg-nav .current-menu-item > a,
.mg-header .mg-nav .current_page_item > a,
.mg-header .mg-nav .current-menu-parent > a { color: var(--mg-gold); }
.mg-header .mg-nav > ul > li > a::after { background: var(--mg-gold); }
.mg-header .mg-iconbtn:hover { color: var(--mg-gold); }

.mg-hero .mg-eyebrow { color: var(--mg-gold); }
.mg-hero h1 em { color: var(--mg-gold); }
.mg-hero__dots button[aria-selected="true"] { background: var(--mg-gold); }

.mg-trust svg { stroke: var(--mg-gold); }
.mg-trust strong { color: #fff; }

.mg-footer h3 { border-bottom-color: var(--mg-gold); }
.mg-footer__bottom a:hover { color: var(--mg-gold); }
.mg-social a:hover { background: var(--mg-orange); color: var(--mg-on-accent); }
.mg-totop:hover { background: var(--mg-gold); border-color: var(--mg-gold); color: var(--mg-on-accent); }

/* ---------- the category band is the brand signature ----------
   Gold with ink text: separates cleanly from the ink trust strip below and
   puts the logo's own colour straight under the hero. */
.mg-hero__quick { background: var(--mg-gold); box-shadow: none; }
.mg-hero__quick a { color: var(--mg-on-accent); border-right-color: rgba(10,10,10,.18); }
.mg-hero__quick a:hover { background: var(--mg-orange); color: var(--mg-on-accent); }
.mg-hero__quick svg { stroke: rgba(10,10,10,.6); }
.mg-hero__quick a:hover svg { stroke: var(--mg-ink); }

/* ---------- light surfaces use the deepened orange ---------- */
.mg-eyebrow { color: var(--mg-orange-deep); }
.mg-hero .mg-eyebrow { color: var(--mg-gold); }      /* re-assert over the above */
.mg-guarantee .mg-eyebrow { color: rgba(255,255,255,.78); }

a:hover { color: var(--mg-orange-deep); }
.mg-card__title a:hover { color: var(--mg-orange-deep); }
.mg-chip:hover { background: var(--mg-orange-soft); border-color: var(--mg-orange); color: var(--mg-orange-deep); }
.mg-explore__link { color: var(--mg-orange-deep); }
.mg-explore__tile:hover { border-color: var(--mg-orange); }
.mg-widget h3, .mg-widget .widget-title { border-bottom-color: var(--mg-gold); }
.mg-widget li a:hover { background: var(--mg-orange-soft); color: var(--mg-orange-deep); }
.widget_product_categories ul.product-categories a:hover { background: var(--mg-orange-soft); color: var(--mg-orange-deep); }

.mg-section__head h2 + p { color: var(--mg-muted); }
.mg-quote { border-left-color: var(--mg-gold); }
.mg-split__link { border-bottom-color: var(--mg-gold); }
.mg-ticks svg { stroke: var(--mg-orange-deep); }
.mg-spotlight__body .mg-eyebrow { color: var(--mg-orange-deep); }

/* Product card hover + badges */
ul.products li.product:hover { border-color: var(--mg-orange); }
.mg-badge--new { background: var(--mg-orange); color: var(--mg-on-accent); }

/* Pagination + focus */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce-pagination a:hover { background: var(--mg-orange-soft); border-color: var(--mg-orange); color: var(--mg-orange-deep); }

/* ==========================================================================
   The two full-width bands move off olive onto the brand palette
   --------------------------------------------------------------------------
   Guarantee band -> ink, so it reads with the masthead, trust strip and
   footer, with the gold eyebrow carrying the brand.
   Footer call-to-action -> gold, which both closes the page on the logo
   colour and keeps it from merging into the ink footer directly beneath it.

   Measured for this combination:
     white heading on ink      19.80:1
     gold eyebrow on ink       12.99:1
     ink heading on gold       12.99:1
     ink body 78% on gold       7.99:1
     white text on gold         1.52:1  <- never; gold takes ink text
   ========================================================================== */

/* ---------- guarantee band: ink ---------- */
.mg-guarantee { background: var(--mg-dark); }
.mg-guarantee h2 { color: #fff; }
.mg-guarantee p { color: rgba(255,255,255,.82); }
.mg-guarantee .mg-eyebrow { color: var(--mg-gold); }

.mg-btn--ondark { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.mg-btn--ondark:hover { background: var(--mg-gold); border-color: var(--mg-gold); color: var(--mg-on-accent); }

/* ---------- footer call-to-action: gold, ink type ---------- */
/* Also reset the inherited colour: the original olive rule set color:#fff,
   and white on gold is 1.52:1 - anything added to this band later would be
   invisible if only the h2 and p were corrected. */
.mg-band { background: var(--mg-gold); color: var(--mg-on-accent); }
.mg-band h2 { color: var(--mg-on-accent); }
.mg-band p { color: rgba(10,10,10,.78); }

/* A white button would all but vanish on gold; ink gives 12.99:1 separation. */
.mg-band .mg-btn,
.mg-band .mg-btn--light {
  background: var(--mg-dark);
  border-color: var(--mg-dark);
  color: #fff;
}
.mg-band .mg-btn:hover,
.mg-band .mg-btn--light:hover {
  background: var(--mg-surface);
  border-color: #fff;
  color: var(--mg-ink);
}

/* ==========================================================================
   Price filter slider — brand palette
   --------------------------------------------------------------------------
   WooCommerce hard-codes its own purple on the jQuery UI slider:

     .woocommerce .widget_price_filter .ui-slider .ui-slider-handle  #7f54b3
     .woocommerce .widget_price_filter .ui-slider .ui-slider-range   #7f54b3
     .woocommerce .widget_price_filter .price_slider_wrapper
                                       .ui-widget-content            #35224c

   Those sit at (0,3,2), so the theme's plain .widget_price_filter rules
   never applied. Matched here selector-for-selector: a light track, the
   selected range in brand gold, and ink handles with a white ring so they
   stay visible against the gold.
   ========================================================================== */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content,
.woocommerce-page .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: var(--mg-line);
  border-radius: 999px;
  border: 0;
}

.woocommerce .widget_price_filter .ui-slider-horizontal,
.woocommerce-page .widget_price_filter .ui-slider-horizontal {
  height: 6px;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-range {
  background-color: var(--mg-gold);
  border-radius: 999px;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle {
  width: 16px;
  height: 16px;
  top: -5px;
  margin-left: -8px;
  background-color: var(--mg-dark);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(10, 10, 10, .35);
  cursor: ew-resize;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:hover,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus {
  background-color: var(--mg-orange-deep);
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
  outline: 3px solid var(--mg-focus);
  outline-offset: 2px;
}

/* Woo floats the Filter button; the theme lays the row out with grid. */
.woocommerce .widget_price_filter .price_slider_amount .button,
.woocommerce-page .widget_price_filter .price_slider_amount .button {
  float: none;
  font-size: .85rem;
}
.woocommerce .widget_price_filter .price_slider_amount,
.woocommerce-page .widget_price_filter .price_slider_amount {
  text-align: left;
  line-height: 1.4;
  font-size: 1rem;
}
.woocommerce .widget_price_filter .price_slider { margin-bottom: 1.4rem; }

/* ==========================================================================
   Migrated builder columns become a real 12-column grid
   --------------------------------------------------------------------------
   The shim now publishes [col span="N"] as --mg-span, so pages authored as
   columns lay out as their author intended. About, for example, runs its
   story in two half-width columns; without this the two halves stacked into
   one narrow measure and left the right side of the page empty.

   The 76ch cap on paragraphs stays: inside a half-width column it is wider
   than the column so it has no effect, and on a full-width column it keeps
   the line length readable. It only bites where it is needed.
   ========================================================================== */
.mg-legacy-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}
.mg-legacy-row--wide { gap: clamp(1.75rem, 4vw, 3.5rem); }

.mg-legacy-col {
  grid-column: span var(--mg-span, 12);
  min-width: 0;
}
.mg-legacy-col > :first-child { margin-top: 0; }
.mg-legacy-col > :last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .mg-legacy-row { grid-template-columns: 1fr; }
  .mg-legacy-col { grid-column: 1; }
}

/* ==========================================================================
   Breadcrumbs: the colour depends on what is behind them
   --------------------------------------------------------------------------
   The original rule set white links unconditionally because breadcrumbs
   started life inside the dark page header. The single-product template puts
   the same markup on a white background, where white links were invisible.
   The white treatment is now scoped to the dark header, and the default is
   the light-background one.
   ========================================================================== */
.mg-breadcrumb {
  font-size: .8125rem;
  color: var(--mg-muted);
  margin-bottom: .6rem;
}
.mg-breadcrumb a {
  color: var(--mg-ink-3);
  text-decoration: none;
}
.mg-breadcrumb a:hover {
  color: var(--mg-orange-deep);
  text-decoration: underline;
}

/* On the dark page header, invert. */
.mg-pagehead .mg-breadcrumb { color: rgba(255,255,255,.65); }
.mg-pagehead .mg-breadcrumb a { color: rgba(255,255,255,.88); }
.mg-pagehead .mg-breadcrumb a:hover { color: #fff; }

/* ==========================================================================
   TACTICAL DARK THEME
   --------------------------------------------------------------------------
   Palette, type and surface treatments taken from the approved mockup
   (requirements/motard_gears_adventure_motorcycle_luggage_gear (3).html).

   The tokens are redefined here rather than at the top of the file so the
   whole re-skin is reviewable in one place and can be reverted by deleting
   this block. Layout - the WooCommerce float de-conflicting, the cart
   colspan, the checkout grid - is untouched; only colour and type change.

   Token semantics changed with this layer:
     --mg-ink        on-dark TEXT  (was the darkest surface)
     --mg-dark       the darkest SURFACE
     --mg-on-accent  text that sits on a gold/orange/white fill
   ========================================================================== */
:root {
  /* Reference palette */
  --mg-dark:        #141712;  /* page */
  --mg-surface:     #1D211A;  /* cards, panels, drawers */
  --mg-well:        #10130E;  /* image wells, deepest */
  --mg-olive:       #363E2B;
  --mg-olive-deep:  #2B3222;
  --mg-olive-dark:  #4A543B;
  --mg-khaki:       #B5A678;
  --mg-faded:       #D9C77E;
  --mg-orange:      #FF5500;
  --mg-orange-deep: #CC4400;
  --mg-yellow:      #FFB800;
  --mg-wordmark:    #F26522;
  --mg-line:        #353C2D;  /* borders */
  --mg-muted:       #A8B09E;  /* secondary text */

  /* Re-pointed semantics */
  --mg-ink:        #E8ECE4;   /* body text on dark */
  --mg-on-accent:  #141712;   /* text on orange / gold / white */
  --mg-ink-2:      #1D211A;
  --mg-ink-3:      #C9D0C0;
  --mg-bg:         #141712;
  --mg-bg-alt:     #1D211A;
  --mg-olive-soft: #262C1E;
  --mg-sand:       #D9C77E;
  --mg-gold:       #FFB800;
  --mg-gold-soft:  #2A2A18;
  --mg-orange-soft:#2A1C12;
  --mg-sale:       #FF5500;
  --mg-ok:         #9BBF6A;
  --mg-focus:      #FFB800;

  /* Type */
  --mg-font:       'Chakra Petch', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mg-font-head:  'Allerta Stencil', 'Stardos Stencil', 'Chakra Petch', sans-serif;
  --mg-font-mono:  'Share Tech Mono', ui-monospace, monospace;
  --mg-font-mark:  'Orbitron', 'Arial Black', sans-serif;

  --mg-radius:     2px;
  --mg-radius-lg:  3px;
  --mg-shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --mg-shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
}

/* ---------- page: rugged canvas + tactical grid ---------- */
body {
  background-color: var(--mg-dark);
  background-image:
    radial-gradient(rgba(54, 62, 43, .25) 1px, transparent 0),
    linear-gradient(to right, rgba(53, 60, 45, .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(53, 60, 45, .16) 1px, transparent 1px);
  background-size: 24px 24px, 64px 64px, 64px 64px;
  color: var(--mg-ink);
  font-family: var(--mg-font);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--mg-dark); }
::-webkit-scrollbar-thumb { background: var(--mg-olive); border-radius: 2px; border: 1px solid var(--mg-olive-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--mg-orange); }

/* ---------- type ---------- */
:where(h1, h2, h3, h4, h5) {
  font-family: var(--mg-font-head);
  font-weight: 400;
  letter-spacing: .08em;
  color: #fff;
}
h1, h2 { text-transform: uppercase; }

a { color: var(--mg-ink); }
a:hover { color: var(--mg-orange); }

/* Mil-spec technical labels and figures. */
.mil-spec,
.mg-eyebrow,
.price,
.woocommerce-Price-amount,
.mg-sku,
.mg-card__cat {
  font-family: var(--mg-font-mono);
  letter-spacing: .08em;
}
.mg-eyebrow { color: var(--mg-faded); text-transform: uppercase; }

/* Distressed broken-stencil command text in faded yellow. */
.mil-command-text {
  font-family: var(--mg-font-head);
  color: var(--mg-faded);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.85);
  -webkit-mask-image: repeating-linear-gradient(-25deg,
    rgba(0,0,0,.95) 0px, rgba(0,0,0,.95) 4px,
    rgba(0,0,0,.72) 5px, rgba(0,0,0,.95) 7px);
  mask-image: repeating-linear-gradient(-25deg,
    rgba(0,0,0,.95) 0px, rgba(0,0,0,.95) 4px,
    rgba(0,0,0,.72) 5px, rgba(0,0,0,.95) 7px);
}

/* Distressed registered wordmark. */
.motard-distressed {
  font-family: var(--mg-font-mark);
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--mg-wordmark);
  text-transform: uppercase;
  -webkit-mask-image: radial-gradient(circle at 20% 40%, rgba(0,0,0,.75) 1px, #000 2px),
                      radial-gradient(circle at 75% 65%, rgba(0,0,0,.7) 1px, #000 2px);
  mask-image: radial-gradient(circle at 20% 40%, rgba(0,0,0,.75) 1px, #000 2px),
              radial-gradient(circle at 75% 65%, rgba(0,0,0,.7) 1px, #000 2px);
}

/* Rugged surface texture for panels. */
.mil-rugged-panel,
.mg-section--alt,
ul.products li.product,
.mg-quote,
.mg-explore__tile,
.mg-widget,
.cart_totals,
.woocommerce-checkout #order_review {
  background-color: var(--mg-surface);
  background-image: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.015), rgba(255,255,255,.015) 2px,
    transparent 2px, transparent 8px);
}

/* Diagonal hazard stripe. */
.tactical-stripe {
  background: repeating-linear-gradient(45deg,
    var(--mg-orange), var(--mg-orange) 10px,
    var(--mg-dark) 10px, var(--mg-dark) 20px);
}

/* ---------- buttons ---------- */
.mg-btn {
  border-radius: var(--mg-radius);
  letter-spacing: .12em;
  font-family: var(--mg-font-mono);
  font-weight: 700;
}
.mg-btn--gold,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
ul.products .button,
.woocommerce ul.products li.product .button {
  background: var(--mg-orange);
  border-color: var(--mg-orange);
  color: var(--mg-on-accent);
}
.mg-btn--gold:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
ul.products .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: var(--mg-orange-deep);
  border-color: var(--mg-orange-deep);
  color: #fff;
}
.mg-btn--ghost {
  background: var(--mg-surface);
  border-color: var(--mg-line);
  color: var(--mg-faded);
}
.mg-btn--ghost:hover { background: var(--mg-olive); border-color: var(--mg-khaki); color: #fff; }

/* Generic Woo buttons sit on the card tone. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--mg-surface);
  border-color: var(--mg-line);
  color: var(--mg-ink);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--mg-olive);
  border-color: var(--mg-khaki);
  color: #fff;
}

/* ---------- forms on dark ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], select, textarea,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  background: var(--mg-well);
  border-color: var(--mg-line);
  color: var(--mg-ink);
}
input::placeholder, textarea::placeholder { color: var(--mg-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--mg-orange); }
label, .woocommerce-checkout .form-row label { color: var(--mg-khaki); }

/* ---------- cards + catalog ---------- */
ul.products li.product { border-color: var(--mg-line); }
ul.products li.product:hover { border-color: var(--mg-orange); box-shadow: var(--mg-shadow-lift); }
.mg-card__media { background: var(--mg-well); border-bottom: 1px solid var(--mg-line); }
.mg-card__cat { color: var(--mg-khaki); text-transform: uppercase; }
.mg-card__title { font-family: var(--mg-font); font-weight: 700; letter-spacing: .03em; }
.mg-card__title a { color: #fff; }
.mg-card__title a:hover { color: var(--mg-orange); }
.price { color: #fff; }
.price del { color: var(--mg-muted); }
.price ins { color: var(--mg-orange); }
.mg-save { color: var(--mg-yellow); font-family: var(--mg-font-mono); }
.mg-badge { font-family: var(--mg-font-mono); letter-spacing: .1em; }
.mg-badge--sale { background: var(--mg-orange); color: var(--mg-on-accent); }
.mg-badge--new { background: var(--mg-olive); color: var(--mg-yellow); border: 1px solid rgba(181,166,120,.4); }
.mg-badge--out { background: var(--mg-olive); color: var(--mg-khaki); }

/* ---------- tables, notices, misc ---------- */
.shop_table th, .woocommerce table.cart thead th { border-bottom-color: var(--mg-khaki); color: var(--mg-khaki); }
.shop_table td, .woocommerce table.cart tbody td { border-bottom-color: var(--mg-line); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--mg-surface);
  border-left-color: var(--mg-orange);
  color: var(--mg-ink);
}
.woocommerce-info { border-left-color: var(--mg-khaki); }
.woocommerce-error { border-left-color: var(--mg-orange); }
.mg-pagehead { background: var(--mg-well); border-bottom: 1px solid var(--mg-line); }
hr, .mg-toolbar, .mg-widget, .mg-accordion, .mg-accordion details + details { border-color: var(--mg-line); }
.mg-accordion summary { color: #fff; }
.mg-accordion details[open] summary { background: var(--mg-olive); }
.mg-accordion__body { color: var(--mg-ink-3); }
.mg-stock--in { color: var(--mg-ok); }
.mg-stock--out { color: var(--mg-orange); }
.mg-quote { border-left-color: var(--mg-orange); }
.mg-quote blockquote { color: var(--mg-ink-3); }
.mg-spotlight__body p, .mg-entry, .mg-entry p { color: var(--mg-ink-3); }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--mg-surface);
  border-color: var(--mg-line);
  color: var(--mg-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--mg-orange); border-color: var(--mg-orange); color: var(--mg-on-accent);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--mg-olive); border-color: var(--mg-khaki); color: #fff;
}

/* ==========================================================================
   Tactical header
   ========================================================================== */
.mg-topbar {
  background: var(--mg-well);
  border-bottom: 1px solid var(--mg-line);
  color: var(--mg-khaki);
}
.mg-topbar .mg-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; gap: 1rem;
}
.mg-topbar .mil-spec {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}

.mg-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(20, 23, 18, .95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mg-line);
  box-shadow: none;
}
.mg-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 92px;
}

/* ---------- emblem ---------- */
.mg-header__brand { flex: 0 0 auto; margin-right: auto; display: flex; align-items: center; }
.mg-emblem {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .15rem; text-decoration: none; line-height: 1;
}
.mg-emblem__svg { fill: var(--mg-yellow); transition: transform .2s ease; }
.mg-emblem:hover .mg-emblem__svg { transform: scale(1.05); }
.mg-emblem__mark { font-size: 1.45rem; line-height: 1; }
.mg-emblem__mark sup { font-size: .5em; vertical-align: super; }
.mg-header__brand img.custom-logo { max-height: 62px; width: auto; }

/* ---------- nav ---------- */
.mg-header .mg-nav > ul { gap: .25rem; justify-content: flex-end; }
.mg-header .mg-nav > ul > li > a {
  font-family: var(--mg-font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #D6DBD0;
  padding: .7rem .8rem;
}
.mg-header .mg-nav a:hover,
.mg-header .mg-nav .current-menu-item > a,
.mg-header .mg-nav .current-menu-parent > a,
.mg-header .mg-nav .current_page_item > a { color: var(--mg-orange); background: transparent; }
.mg-header .mg-nav > ul > li > a::after { background: var(--mg-orange); }
.mg-header .mg-nav ul ul {
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
}
.mg-header .mg-nav ul ul a { color: var(--mg-ink); font-family: var(--mg-font); letter-spacing: .04em; }
.mg-header .mg-nav ul ul a:hover { background: var(--mg-olive); color: var(--mg-orange); }

/* ---------- utility controls ---------- */
.mg-actions { gap: .5rem; }
.mg-header .mg-iconbtn { color: #D6DBD0; border-radius: var(--mg-radius); }
.mg-header .mg-iconbtn:hover { background: var(--mg-olive); color: var(--mg-orange); }

.mg-currency {
  display: inline-flex; align-items: center;
  padding: .45rem .7rem;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  color: var(--mg-khaki);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  white-space: nowrap;
}

.mg-loadout {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  color: #fff; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.mg-loadout:hover { background: var(--mg-olive); border-color: var(--mg-khaki); color: #fff; }
.mg-loadout svg { stroke: var(--mg-orange); fill: none; stroke-width: 1.9; }
.mg-loadout__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mg-loadout .mg-count {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--mg-orange); color: var(--mg-on-accent);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font-mono); font-size: .7rem; font-weight: 700; line-height: 19px;
}
.mg-loadout .mg-cart-total { color: var(--mg-khaki); font-family: var(--mg-font-mono); font-size: .76rem; }

@media (max-width: 991px) {
  .mg-header__inner { min-height: 70px; gap: .5rem; }
  .mg-header .mg-nav { display: none; }
  .mg-emblem__mark { font-size: 1.15rem; }
  .mg-header__brand img.custom-logo { max-height: 46px; }
  .mg-currency, .mg-loadout__label, .mg-loadout .mg-cart-total, .mg-actions__account { display: none; }
  .mg-loadout { padding: .5rem .6rem; }
}

/* ---------- search drawer + mobile drawer on dark ---------- */
.mg-search { background: var(--mg-surface); border-bottom: 1px solid var(--mg-line); }
.mg-search input[type="search"] { background: var(--mg-well); border-color: var(--mg-line); color: var(--mg-ink); }
.mg-drawer { background: var(--mg-surface); }
.mg-drawer a { color: var(--mg-ink); border-bottom-color: var(--mg-line); font-family: var(--mg-font-mono); letter-spacing: .12em; }
.mg-drawer a:hover { color: var(--mg-orange); }
.mg-drawer ul ul a { color: var(--mg-muted); }
.mg-drawer .mg-iconbtn { color: var(--mg-ink) !important; }

/* ==========================================================================
   Mil-spec stats bar + construction protocols
   ========================================================================== */
.mg-specbar {
  position: relative; z-index: 3;
  background: var(--mg-surface);
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}
.mg-specbar .mg-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding-block: 1.4rem;
  text-align: center;
}
@media (max-width: 700px) { .mg-specbar .mg-wrap { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mg-specbar__item { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.mg-specbar__figure {
  font-family: var(--mg-font-head);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1;
  color: var(--mg-orange);
  letter-spacing: .06em;
}
.mg-specbar__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mg-khaki);
}

.mg-engineering {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}
.mg-engineering__head { margin-bottom: 2rem; }
.mg-engineering__head .mg-eyebrow {
  display: block; font-size: .72rem; letter-spacing: .18em; margin-bottom: .4rem;
}
.mg-engineering__head h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.mg-engineering__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mg-spec {
  background: rgba(20, 23, 18, .9);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  padding: 1.5rem;
}
.mg-spec__ref {
  color: var(--mg-orange);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .6rem;
}
.mg-spec h3 {
  font-size: 1rem; text-transform: uppercase; color: #fff;
  margin: 0 0 .6rem; letter-spacing: .06em;
}
.mg-spec p { font-size: .76rem; line-height: 1.7; margin: 0; }

/* --------------------------------------------------------------------------
   Footer call-to-action band.
   The gold fill belonged to the previous light theme and reads as a flare
   against the tactical palette. Olive keeps it distinct from the ink footer
   directly beneath while staying inside the mockup's range; the action takes
   the brand orange.
   -------------------------------------------------------------------------- */
.mg-band {
  background: var(--mg-olive);
  color: var(--mg-ink);
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
  background-image: repeating-linear-gradient(-45deg,
    rgba(255,255,255,.015), rgba(255,255,255,.015) 2px,
    transparent 2px, transparent 8px);
}
.mg-band h2 { color: #fff; }
.mg-band p { color: var(--mg-khaki); }
.mg-band .mg-btn,
.mg-band .mg-btn--light {
  background: var(--mg-orange);
  border-color: var(--mg-orange);
  color: var(--mg-on-accent);
}
.mg-band .mg-btn:hover,
.mg-band .mg-btn--light:hover {
  background: var(--mg-orange-deep);
  border-color: var(--mg-orange-deep);
  color: #fff;
}

/* Footer on the tactical palette. */
.mg-footer { background: var(--mg-well); border-top: 1px solid var(--mg-line); color: var(--mg-muted); }
.mg-footer h3 { color: #fff; border-bottom-color: var(--mg-orange); font-size: .85rem; letter-spacing: .14em; }
.mg-footer a { color: var(--mg-muted); }
.mg-footer a:hover { color: var(--mg-orange); }
.mg-footer__bottom { border-top-color: var(--mg-line); color: var(--mg-muted); font-family: var(--mg-font-mono); }
.mg-footer__logo .mg-emblem__svg { fill: var(--mg-yellow); }
.mg-social a { background: var(--mg-surface); border: 1px solid var(--mg-line); color: var(--mg-khaki); }
.mg-social a:hover { background: var(--mg-orange); color: var(--mg-on-accent); }
.mg-totop { border-color: var(--mg-line); color: var(--mg-khaki); font-family: var(--mg-font-mono); }
.mg-totop:hover { background: var(--mg-orange); border-color: var(--mg-orange); color: var(--mg-on-accent); }
.mg-footer__support .mg-footer__cta { border-color: var(--mg-line); color: var(--mg-faded); background: var(--mg-surface); }
.mg-footer__support .mg-footer__cta:hover { background: var(--mg-orange); border-color: var(--mg-orange); color: var(--mg-on-accent); }

/* --------------------------------------------------------------------------
   WooCommerce form fields via its own custom properties.

   Woo styles every field with
     .woocommerce form .form-row .input-text { background: var(--wc-form-color-background, #fff) }
   at (0,3,2). The theme's input rule matched that specificity so inputs went
   dark, but the textarea selector was only (0,2,1) and lost - which is why
   the order-notes box stayed white on an otherwise dark checkout.

   Setting Woo's own variables is the supported fix and covers every field at
   once, rather than chasing each selector.
   -------------------------------------------------------------------------- */
:root {
  --wc-form-color-background: var(--mg-well);
  --wc-form-color-text: var(--mg-ink);
  --wc-form-border-color: var(--mg-line);
  --wc-form-border-width: 2px;
  --wc-form-border-radius: var(--mg-radius);
  --wc-content-bg: var(--mg-surface);
  --wc-subtext: var(--mg-muted);
}

/* Belt and braces for the textarea, matching Woo's specificity. */
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  background-color: var(--mg-well);
  color: var(--mg-ink);
  border-color: var(--mg-line);
}

/* ==========================================================================
   Hero v3 — the mockup's command block
   --------------------------------------------------------------------------
   The headline, standfirst and buttons no longer live inside the rotating
   slides. The slides are now background plates stacked behind one fixed
   content block, so the approved copy is on screen at all times and only the
   photograph changes. These rules sit after the originals deliberately: same
   specificity, later in the cascade, so the hero section can be reverted by
   deleting this block alone.
   ========================================================================== */
.mg-hero__frame {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(460px, 64vh, 720px);
}

/* Plates fill the frame; the frame, not the plate, sets the height. */
.mg-hero__slides { position: absolute; inset: 0; z-index: 0; }
.mg-hero__slide  { position: absolute; inset: 0; min-height: 0; display: block; }
.mg-hero__slides > .mg-hero__slide { display: none; }
.mg-hero__slides > .mg-hero__slide.is-active { display: block; }

.mg-hero__body { position: relative; z-index: 2; width: 100%; padding-block: 4rem; }
.mg-hero__inner { max-width: 56rem; padding-block: 0; }

/* Eyebrow chip: olive fill, khaki hairline, faded-yellow stencil. */
.mg-hero__tag {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .35rem .85rem;
  background: var(--mg-olive);
  border: 1px solid rgba(181, 166, 120, .4);
  border-radius: var(--mg-radius);
  color: var(--mg-faded);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: none;
}

.mg-hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: .06em;
  margin-bottom: 1.5rem;
  color: #fff;
  text-wrap: initial;   /* balance was breaking the two-line stencil rhythm */
}
.mg-hero__accent { color: var(--mg-orange); }

/* The standfirst is command text, so it keeps the stencil face, the faded
   yellow and the distress mask rather than the generic hero paragraph tone. */
.mg-hero__body p.mil-command-text {
  max-width: 38rem;
  margin-bottom: 0;
  font-size: clamp(.875rem, 1.25vw, 1rem);
  line-height: 1.75;
  color: var(--mg-faded);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85);
}

.mg-hero__cta { margin-top: 2rem; gap: 1rem; }
.mg-hero__cta .mg-btn {
  padding: 1rem 2rem;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mg-hero__cta .mg-btn svg { stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Stencil face, matching the mockup's .mil-stencil utility. */
.mil-stencil {
  font-family: var(--mg-font-head);
  font-weight: 400;
  letter-spacing: .08em;
}

@media (max-width: 575px) {
  .mg-hero__body { padding-block: 3rem; }
  .mg-hero__cta .mg-btn { padding: .875rem 1.25rem; flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Field-tested gear — the mockup's catalog grid
   --------------------------------------------------------------------------
   A hand-built grid of the eight registered models, independent of the
   WooCommerce loop, so it can stand in before the products exist in the
   store. Once a model carries a product_id the card renders the real
   photograph, price and add-to-cart; the styling is the same either way.
   ========================================================================== */
.mg-gear { padding-block: 5rem; }

.mg-gear__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--mg-line);
}
.mg-gear__titles .mg-eyebrow { display: block; font-size: .75rem; letter-spacing: .2em; margin: 0; }
.mg-gear__titles h2 {
  margin: .25rem 0 0;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  letter-spacing: .08em;
  color: #fff;
}

/* ---------- filters ---------- */
.mg-gear__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.mg-gear__filter {
  padding: .65rem 1rem;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  color: var(--mg-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mg-gear__filter:hover { background: var(--mg-olive); border-color: var(--mg-khaki); color: #fff; }
.mg-gear__filter.is-active {
  background: var(--mg-orange);
  border-color: var(--mg-orange);
  color: var(--mg-on-accent);
}

/* ---------- grid ---------- */
.mg-gear__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .mg-gear__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .mg-gear__grid { grid-template-columns: 1fr; } }

.mg-gear__card {
  display: flex;
  flex-direction: column;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.mg-gear__card:hover { border-color: var(--mg-orange); transform: translateY(-2px); }
.mg-gear__card[hidden] { display: none; }

/* ---------- media / photo slot ---------- */
.mg-gear__media {
  position: relative;
  height: 15rem;
  padding: 1rem;
  background: var(--mg-well);
  border-bottom: 1px solid var(--mg-line);
}
.mg-gear__shot { display: block; height: 100%; }
.mg-gear__shot img { width: 100%; height: 100%; object-fit: contain; }

.mg-gear__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 100%;
  padding: .75rem;
  border: 2px dashed var(--mg-olive);
  border-radius: var(--mg-radius);
  text-align: center;
  transition: border-color .25s ease;
}
.mg-gear__card:hover .mg-gear__slot { border-color: rgba(255, 85, 0, .7); }
.mg-gear__slot svg { stroke: rgba(181, 166, 120, .5); fill: none; stroke-width: 1.8; transition: stroke .25s ease; }
.mg-gear__card:hover .mg-gear__slot svg { stroke: var(--mg-orange); }
.mg-gear__slot-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #d6dbd0;
  line-height: 1.4;
}
.mg-gear__slot-note { font-size: .625rem; color: var(--mg-muted); letter-spacing: .08em; text-transform: uppercase; }

.mg-gear__badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .15rem .5rem;
  background: var(--mg-olive);
  border: 1px solid rgba(181, 166, 120, .4);
  border-radius: var(--mg-radius);
  color: var(--mg-yellow);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mg-gear__peek {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem;
  background: rgba(20, 23, 18, .95);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  color: #fff;
  transition: background .18s ease, color .18s ease;
}
.mg-gear__peek svg { stroke: currentColor; fill: none; stroke-width: 1.9; display: block; }
.mg-gear__peek:hover { background: var(--mg-orange); color: var(--mg-on-accent); border-color: var(--mg-orange); }

/* ---------- card body ---------- */
.mg-gear__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
}
.mg-gear__logo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 34px; margin-bottom: .65rem; }

.mg-gear__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
  font-size: .75rem;
  color: var(--mg-khaki);
  text-transform: uppercase;
}
.mg-gear__rating { display: inline-flex; align-items: center; gap: .3rem; color: var(--mg-yellow); font-weight: 700; }
.mg-gear__rating svg { fill: currentColor; stroke: none; }

.mg-gear__title {
  margin: 0 0 .5rem;
  font-family: var(--mg-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mg-gear__title a { color: #fff; text-decoration: none; }
.mg-gear__card:hover .mg-gear__title a { color: var(--mg-orange); }

/* Two lines, then clip — the descriptions vary in length and a ragged grid
   reads as broken rather than as variety. */
.mg-gear__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--mg-faded);
}

.mg-gear__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mg-line);
}
.mg-gear__price { font-size: 1.25rem; font-weight: 700; color: #fff; }
.mg-gear__price .woocommerce-Price-amount { color: #fff; }
.mg-gear__buy {
  flex: 0 0 auto;
  gap: .4rem;
  padding: .7rem 1rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mg-gear__buy svg { stroke: currentColor; fill: none; stroke-width: 2.4; }

.mg-gear__empty { margin-top: 2rem; text-align: center; color: var(--mg-muted); text-transform: uppercase; letter-spacing: .1em; }

/* ==========================================================================
   Registered model logotypes
   --------------------------------------------------------------------------
   Set in type rather than shipped as artwork, so they stay sharp at any size.
   Each is a faithful reading of the printed label, not a literal trace.
   ========================================================================== */
.mg-logo { display: inline-block; line-height: 1; white-space: nowrap; }

.mg-logo--bombardier {
  font-family: 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: #FFEA00;
  transform: skewX(-12deg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.mg-logo--blackcat { display: inline-flex; gap: 2px; transform: skewX(-12deg); }
.mg-logo__tile {
  display: inline-block;
  padding: .15rem .35rem;
  background: #4A4A4A;
  border: 1px solid rgba(0, 0, 0, .3);
  color: #fff;
  font-family: var(--mg-font);
  font-weight: 900;
  font-size: .8125rem;
  letter-spacing: .1em;
}
.mg-logo__tile.is-knockout { background: #fff; color: #4A4A4A; }

.mg-logo--sixdays {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6rem;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font-mark);
  font-weight: 900;
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: -.04em;
  transform: skewX(-12deg);
}
.mg-logo__six  { color: #fff; margin-right: 1px; }
.mg-logo__days { color: var(--mg-wordmark); }

.mg-logo--tank {
  padding: .1rem .7rem;
  background: #3E4623;
  border: 1px solid #5A6535;
  border-radius: var(--mg-radius);
  font-family: 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: .14em;
  color: #E2E2DC;
  transform: skewX(-12deg);
}

.mg-logo--bro {
  font-family: var(--mg-font-head);
  font-size: 1.75rem;
  letter-spacing: .18em;
  color: #C59326;
  text-shadow: 1px 1px 0 #000;
}

.mg-logo--waterman {
  padding: .1rem .7rem;
  background: #000;
  border: 1px solid rgba(0, 229, 223, .3);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font-mark);
  font-weight: 900;
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: #00E5DF;
  transform: skewX(-12deg);
}

.mg-logo--elite {
  padding: .1rem .7rem;
  background: #5E6318;
  border: 1px solid #7E8524;
  border-radius: var(--mg-radius);
  font-family: var(--mg-font-head);
  font-size: 1.375rem;
  letter-spacing: .12em;
  color: #F5F5F0;
  transform: skewX(-12deg);
}

@media (max-width: 575px) {
  .mg-gear { padding-block: 3.5rem; }
  .mg-gear__head { margin-bottom: 2rem; }
  .mg-gear__filters { width: 100%; }
  .mg-gear__filter { flex: 1 1 auto; }
}

/* Even trimmed, product names vary enough to stagger the row; two lines keeps
   the price rails aligned across the grid. */
.mg-gear__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

/* The announcement now carries two claims rather than one short line. At
   desktop it still sits on a single line; on a phone the wide mil-spec
   tracking pushed it to three, leaving a one-word orphan, so the tracking
   tightens where the width is scarce. */
@media (max-width: 575px) {
  .mg-topbar .mil-spec { font-size: .65rem; letter-spacing: .08em; line-height: 1.5; }
  .mg-topbar .mg-wrap { padding-block: .35rem; }
}

/* ==========================================================================
   Announcement bar — mockup styling
   --------------------------------------------------------------------------
   Olive field rather than the near-black well, light bold body copy, and the
   bracketed tag picked out in brand yellow. Matches the approved mockup's
   top bar; the tag span is produced by raotheme_announcement_html().
   ========================================================================== */
.mg-topbar {
  background: var(--mg-olive);
  border-bottom: 1px solid var(--mg-line);
  color: #E5E7EB;
}
.mg-topbar .mil-spec {
  font-weight: 700;
  color: #E5E7EB;
}
.mg-topbar__tag {
  margin-right: .5rem;
  color: var(--mg-yellow);
  font-weight: 700;
}

/* ==========================================================================
   Footer — mockup layout
   --------------------------------------------------------------------------
   Three columns: brand and mission, the luggage systems index, Command HQ.
   The old four-column version used auto-fit, which collapsed unpredictably
   once the column count changed, so the track count is explicit here.
   ========================================================================== */
.mg-footer {
  background: var(--mg-dark);
  border-top: 1px solid var(--mg-line);
  padding-top: 3.5rem;
}
.mg-footer__cols {
  grid-template-columns: 1.1fr 1.3fr .7fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--mg-line);
}
@media (max-width: 1100px) {
  .mg-footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
}
@media (max-width: 600px) {
  .mg-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
}

.mg-footer__pages a {
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
}
.mg-footer__pages a:hover { color: var(--mg-orange); }

/* ---------- brand ---------- */
.mg-footer__mark {
  display: inline-block;
  margin-bottom: .9rem;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.mg-footer__mark,
.mg-footer__mark:hover { color: var(--mg-wordmark); }
.mg-footer__reg { font-size: .55em; vertical-align: super; }

.mg-footer__mission {
  max-width: 34ch;
  margin: 0;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--mg-faded);
}

/* ---------- luggage systems ---------- */
.mg-footer__systems ul { gap: .55rem; }
.mg-footer__systems a {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.mg-footer__systems a:hover { color: var(--mg-orange); }

/* ---------- command HQ ---------- */
.mg-footer__email,
.mg-footer__phone {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mg-khaki);
}
.mg-footer__email a,
.mg-footer__phone a { color: var(--mg-khaki); text-decoration: none; }
.mg-footer__email a:hover,
.mg-footer__phone a:hover { color: var(--mg-orange); }

.mg-footer__dispatch {
  margin: 1rem 0 0;
  max-width: 32ch;
  font-size: .72rem;
  line-height: 1.7;
  color: var(--mg-faded);
}
.mg-footer__hq .mg-footer__address {
  margin-top: 1rem;
  font-size: .78rem;
  line-height: 1.6;
  font-style: normal;
  color: var(--mg-muted);
}

/* ---------- bottom bar ---------- */
.mg-footer__bottom {
  padding-block: 1.5rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Top menu — mockup nav
   --------------------------------------------------------------------------
   Three mono, wide-tracked items, orange on hover, as in the approved
   mockup. The mockup is a single page, so it needs no route to anything
   else; this store has Shop, Blog, FAQ, Contact and About to reach, so the
   menu button is no longer phone-only and the drawer carries the full menu
   at every width.
   ========================================================================== */
.mg-nav--tactical { margin-left: auto; }
.mg-nav--tactical ul { gap: 2rem; }
.mg-nav--tactical a {
  padding: 0;
  background: none;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #D1D5DB;
  transition: color .18s ease;
}
.mg-nav--tactical a:hover { background: none; color: var(--mg-orange); }

@media (max-width: 860px) {
  .mg-nav--tactical { display: none; }
}

/* The menu button is for phones only, as the mockup's header carries no
   such control. Above 860px the three tactical links are the whole header
   nav; the site's other pages are reached from the footer. */
.mg-burger { display: none; }
@media (max-width: 860px) {
  .mg-burger { display: inline-flex; }
}

/* The header is sticky and ~92px tall, so an in-page anchor would otherwise
   land with its heading tucked underneath it. scroll-padding-top offsets
   every anchor jump, including the nav's #engineering and #expedition. */
html { scroll-padding-top: 104px; }
@media (max-width: 860px) { html { scroll-padding-top: 88px; } }

/* A card whose product cannot be bought right now: muted button and a badge
   over the photo, so the state reads at a glance instead of only on click. */
.mg-gear__buy--out { color: var(--mg-muted); border-color: var(--mg-line); }
.mg-gear__buy--out:hover { background: var(--mg-olive); color: var(--mg-faded); }
.mg-gear__flag {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .15rem .5rem;
  background: rgba(20, 23, 18, .92);
  border: 1px solid var(--mg-khaki);
  border-radius: var(--mg-radius);
  color: var(--mg-khaki);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Linked cards show Woo's full price HTML: struck original, sale price, and
   the theme's Save badge. Stacked that is three lines and it pushes the card
   footer out of line with the button, so the original and the saving sit
   small beside the price that actually applies. */
.mg-gear__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .45rem;
  line-height: 1.3;
}
.mg-gear__price del {
  order: 2;
  font-size: .75rem;
  font-weight: 400;
  color: var(--mg-muted);
  text-decoration: line-through;
}
.mg-gear__price del .woocommerce-Price-amount { color: var(--mg-muted); }
.mg-gear__price ins {
  order: 1;
  background: none;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.mg-gear__price .mg-save {
  order: 3;
  flex: 0 0 auto;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--mg-orange);
  text-transform: uppercase;
}
/* Screen-reader-only phrasing Woo adds inside the price markup. */
.mg-gear__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   Brand lockup on small screens
   --------------------------------------------------------------------------
   The emblem is drawn at 56px via the SVG's width/height attributes, which do
   not respond to anything. Below 992px the header shrinks to ~70px while the
   stacked lockup stayed 73px tall, so it filled the bar edge to edge and the
   wordmark sat on the bottom border. Scaling the mark down is enough - the
   lockup keeps its stacked form, it just stops touching the frame.

   height:auto lets the 120x112 viewBox keep its own ratio rather than being
   pinned by the attribute.
   ========================================================================== */
@media (max-width: 991px) {
  .mg-emblem__svg { width: 40px; height: auto; }
  .mg-emblem__mark { font-size: 1.05rem; }
  .mg-emblem { gap: .2rem; }
}

@media (max-width: 575px) {
  .mg-emblem__svg { width: 34px; height: auto; }
  .mg-emblem__mark { font-size: .9rem; letter-spacing: .06em; }
}

/* ==========================================================================
   LIGHT SURFACE — the shopping funnel
   --------------------------------------------------------------------------
   Shop, category, product, cart, checkout and account render on a light
   palette; the brand pages stay dark. The whole switch is a token
   redefinition scoped to body.mg-light, so every component that reads its
   colour from a token follows automatically and no layout changes.

   The header, announcement bar, page head and footer stay dark deliberately.
   They are brand furniture rather than content, their type is already white,
   and keeping them fixed means the light area reads as a panel between two
   dark bands rather than as a different website.

   What does NOT come from a token is listed at the bottom: a handful of
   rules written with a hardcoded #fff back when every page was dark.
   ========================================================================== */
body.mg-light {
  /* Surfaces, lightest to deepest */
  --mg-dark:        #F6F6F2;   /* page */
  --mg-surface:     #FFFFFF;   /* cards, panels, tables */
  --mg-well:        #EFEFE9;   /* image wells, inset areas */
  --mg-bg:          #F6F6F2;
  --mg-bg-alt:      #FFFFFF;
  --mg-ink-2:       #FFFFFF;

  /* Text. --mg-ink is the body colour, so it inverts. */
  --mg-ink:         #1B1E17;
  --mg-ink-3:       #454B3D;
  --mg-muted:       #646B59;

  /* Lines */
  --mg-line:        #DCDDD4;

  /* Accents that need to earn their contrast on white.
     Gold at #FFB800 is 1.7:1 on white - fine as a fill, unreadable as text -
     so the text-bearing tokens darken while the fills stay bright. */
  --mg-faded:       #6A5C2B;   /* mil-command-text */
  --mg-khaki:       #6E6238;
  --mg-gold:        #8A6400;
  --mg-yellow:      #8A6400;
  --mg-sand:        #6A5C2B;
  --mg-gold-soft:   #FBF4DF;
  --mg-orange-soft: #FFF1E8;
  --mg-olive-soft:  #EFF1E8;

  /* Unchanged on purpose: --mg-orange, --mg-olive and --mg-on-accent are the
     brand marks and still work against a light page. */

  --mg-shadow:      0 1px 2px rgba(20, 23, 18, .06), 0 8px 24px rgba(20, 23, 18, .07);
  --mg-shadow-lift: 0 2px 4px rgba(20, 23, 18, .08), 0 16px 40px rgba(20, 23, 18, .12);

  /* WooCommerce styles its own form fields from these. Without them the
     inputs keep the dark checkout treatment on a white page. */
  --wc-form-color-background: #FFFFFF;
  --wc-form-color-text:       #1B1E17;
  --wc-form-border-color:     #C9CBC0;

  color: var(--mg-ink);
  background-color: var(--mg-dark);

  /* Same tactical grid, drawn in ink rather than light. */
  background-image:
    radial-gradient(rgba(54, 62, 43, .10) 1px, transparent 0),
    linear-gradient(to right, rgba(54, 62, 43, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(54, 62, 43, .055) 1px, transparent 1px);
}

/* ---------- brand furniture stays dark ---------- */
body.mg-light .mg-pagehead {
  background: #10130E;
  border-bottom-color: #353C2D;
}
body.mg-light .mg-footer {
  background: #10130E;
  border-top-color: #353C2D;
  color: #A8B09E;
}
body.mg-light .mg-footer h3 { color: #fff; }
body.mg-light .mg-footer a { color: #A8B09E; }
body.mg-light .mg-footer a:hover { color: var(--mg-orange); }
body.mg-light .mg-footer__mission,
body.mg-light .mg-footer__dispatch { color: #D9C77E; }
body.mg-light .mg-footer__email,
body.mg-light .mg-footer__phone,
body.mg-light .mg-footer__email a,
body.mg-light .mg-footer__phone a { color: #B5A678; }
body.mg-light .mg-footer__address { color: #A8B09E; }
body.mg-light .mg-footer__bottom { border-top-color: #353C2D; color: #A8B09E; }
body.mg-light .mg-band { color: #E8ECE4; }
body.mg-light .mg-band h2 { color: #fff; }

/* The panel texture was a white tint, which is invisible on white. */
body.mg-light .mil-rugged-panel,
body.mg-light .mg-section--alt,
body.mg-light ul.products li.product,
body.mg-light .mg-quote,
body.mg-light .mg-explore__tile,
body.mg-light .mg-widget,
body.mg-light .cart_totals,
body.mg-light .woocommerce-checkout #order_review {
  background-color: var(--mg-surface);
  background-image: repeating-linear-gradient(-45deg,
    rgba(27, 30, 23, .018), rgba(27, 30, 23, .018) 2px,
    transparent 2px, transparent 8px);
}

/* ---------- rules written with a literal #fff while everything was dark ----
   These do not follow a token, so each needs an explicit light value. */
body.mg-light :where(h1, h2, h3, h4, h5) { color: var(--mg-ink); }
body.mg-light .mg-card__title a           { color: var(--mg-ink); }
body.mg-light .price,
body.mg-light .woocommerce-Price-amount   { color: var(--mg-ink); }
body.mg-light .mg-accordion summary       { color: var(--mg-ink); }
body.mg-light .mg-stock--in               { color: #3F6B1F; }

/* ...but not inside the dark furniture, where white is still correct. */
body.mg-light .mg-pagehead :where(h1, h2, h3, h4, h5),
body.mg-light .mg-footer  :where(h1, h2, h3, h4, h5),
body.mg-light .mg-band    :where(h1, h2, h3, h4, h5) { color: #fff; }

/* Command text loses its drop shadow on light - it was there to lift pale
   type off a dark photograph and only muddies dark type on white. */
body.mg-light .mil-command-text { color: var(--mg-faded); text-shadow: none; }

/* Buttons: the generic Woo button sat on the dark card tone. */
body.mg-light .woocommerce .button,
body.mg-light .woocommerce a.button,
body.mg-light .woocommerce button.button,
body.mg-light .woocommerce input.button {
  background: var(--mg-surface);
  border-color: var(--mg-line);
  color: var(--mg-ink);
}
body.mg-light .mg-btn--ghost {
  background: var(--mg-surface);
  border-color: var(--mg-line);
  color: var(--mg-ink);
}
body.mg-light .mg-btn--light {
  background: var(--mg-ink);
  border-color: var(--mg-ink);
  color: #fff;
}

/* Scrollbar follows the page it belongs to. */
body.mg-light ::-webkit-scrollbar-track { background: var(--mg-well); }
body.mg-light ::-webkit-scrollbar-thumb { background: #C3C6B6; border-color: #B2B6A4; }
body.mg-light ::-webkit-scrollbar-thumb:hover { background: var(--mg-orange); }

/* --------------------------------------------------------------------------
   Light surface: the dark furniture, corrected
   --------------------------------------------------------------------------
   Found by measuring contrast on the rendered page rather than by eye. The
   header, announcement bar and footer stay dark on light views, but their
   components read the same tokens as the content, so each had quietly
   inherited a light value and gone invisible against its dark background.

   These rules come after the light token block on purpose, so they win.
   -------------------------------------------------------------------------- */

/* The cart chip took --mg-surface, which is now white, and kept its white
   label: a white chip with white text in the dark header. */
body.mg-light .mg-loadout {
  background: #1D211A;
  border-color: #353C2D;
  color: #fff;
}
body.mg-light .mg-loadout:hover { background: var(--mg-olive); border-color: #B5A678; }
body.mg-light .mg-loadout .mg-cart-total { color: #B5A678; }
body.mg-light .mg-count { background: var(--mg-orange); color: var(--mg-on-accent); }

/* Gold darkens on white so it can be read as text; on the olive bar it has to
   go back to the bright brand yellow. */
body.mg-light .mg-topbar { color: #E5E7EB; }
body.mg-light .mg-topbar .mil-spec { color: #E5E7EB; }
body.mg-light .mg-topbar__tag { color: #FFB800; }

/* Card badges sit on olive, not on the card. */
body.mg-light .mg-badge--new { background: var(--mg-olive); color: #FFB800; }
body.mg-light .mg-badge--out { background: var(--mg-olive); color: #D9C77E; }

/* The CTA band is olive on every view. */
body.mg-light .mg-band,
body.mg-light .mg-band p { color: #E8ECE4; }

/* The skip link is invisible until focused, and then it is a white-on-white
   box in the top corner. */
body.mg-light .mg-skip {
  background: #10130E;
  color: #fff;
  border: 1px solid #353C2D;
}

/* WooCommerce's product-search widget button inherits white text with no fill
   of its own. */
body.mg-light .woocommerce-product-search button,
body.mg-light .woocommerce-product-search button[type="submit"] {
  background: var(--mg-orange);
  border: 1px solid var(--mg-orange);
  color: var(--mg-on-accent);
}

/* --------------------------------------------------------------------------
   Footer command text.
   The generic .mil-command-text light rule is later in the cascade and at the
   same specificity, so it was overriding the footer's own colour and painting
   dark olive type onto the near-black footer. Raised above it here.
   -------------------------------------------------------------------------- */
body.mg-light .mg-footer .mil-command-text,
body.mg-light .mg-footer .mg-footer__mission,
body.mg-light .mg-footer .mg-footer__dispatch { color: #D9C77E; }
body.mg-light .mg-footer .mg-footer__systems a { color: #A8B09E; }
body.mg-light .mg-footer .mg-footer__systems a:hover { color: var(--mg-orange); }

/* The header cart total is a price, so the light price rule caught it and
   painted ink-dark type onto the dark chip in the header. */
body.mg-light .mg-loadout .woocommerce-Price-amount,
body.mg-light .mg-loadout .mg-cart-total { color: #B5A678; }

/* The drawer's generic link colour also hit the account button inside it, so
   the orange fill carried pale type at 2.68:1 instead of the dark-on-orange
   the button is designed for. Only visible with the mobile menu open, which
   is why it survived this long. */
.mg-drawer a.mg-btn--gold { color: var(--mg-on-accent); }
.mg-drawer a.mg-btn--gold:hover { color: #fff; }


/* ==========================================================================
   Cart and checkout — alignment and button sizing
   --------------------------------------------------------------------------
   Measured on the rendered page, not eyeballed. Three faults:

   1. The primary call to action had lost its fill. The light layer's generic
      `.woocommerce a.button` scores (0,3,2) and the tactical
      `.woocommerce .wc-proceed-to-checkout a.checkout-button` only (0,3,1),
      so Proceed to Checkout rendered as a white secondary - the most
      important control on the page styled as the least.

   2. The actions row ran at two heights (input 48px, buttons 42px), two type
      sizes (15.2px and 14.4px) and two widths for two adjacent buttons
      (168px and 159px).

   3. Update cart never floated right. The existing rule targets
      `td.actions > button[name="update_cart"]` as a DIRECT child, but
      WooCommerce wraps that button in a <p>, so the selector never matched
      and the button sat wherever it fell.

   The cell itself stays display:table-cell - see the note above the actions
   block for why giving a <td> display:flex discards its colspan.
   ========================================================================== */

/* ---------- primary actions keep the brand fill on the light surface ------ */
body.mg-light .woocommerce .wc-proceed-to-checkout a.checkout-button,
body.mg-light .woocommerce-checkout #place_order,
body.mg-light .woocommerce div.product form.cart .single_add_to_cart_button,
body.mg-light .woocommerce ul.products li.product .button,
body.mg-light .woocommerce a.button.alt,
body.mg-light .woocommerce button.button.alt,
body.mg-light .woocommerce input.button.alt {
  background: var(--mg-orange);
  border-color: var(--mg-orange);
  color: var(--mg-on-accent);
}
body.mg-light .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.mg-light .woocommerce-checkout #place_order:hover,
body.mg-light .woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.mg-light .woocommerce ul.products li.product .button:hover,
body.mg-light .woocommerce a.button.alt:hover,
body.mg-light .woocommerce button.button.alt:hover,
body.mg-light .woocommerce input.button.alt:hover {
  background: var(--mg-orange-deep);
  border-color: var(--mg-orange-deep);
  color: #fff;
}

/* ---------- actions row: float the wrapper Woo actually renders ---------- */
.woocommerce table.cart td.actions > p {
  margin: 0;
  padding: 0;
}
/* :has() lets the float land on the <p> that holds the button; the direct
   selector is kept as a fallback for the markup without the wrapper. */
.woocommerce table.cart td.actions > p:has(button[name="update_cart"]),
.woocommerce table.cart td.actions > p:has(input[name="update_cart"]) {
  float: right;
}

/* ---------- one height, one type size, matching widths ---------- */
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon #coupon_code,
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions button.button,
.woocommerce table.cart td.actions input.button {
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 1.25rem;
  font-size: .9rem;
  line-height: 1;
  box-sizing: border-box;
}
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon #coupon_code {
  flex: 0 1 16rem;
  width: 16rem;
  padding: 0 1rem;
}
/* A shared floor so the two buttons read as a pair rather than two
   accidents of their label lengths. */
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions button.button,
.woocommerce table.cart td.actions input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  white-space: nowrap;
}

/* Update cart is disabled until a quantity actually changes. Show that,
   rather than an enabled-looking button that ignores the click. */
.woocommerce table.cart td.actions button[name="update_cart"]:disabled,
.woocommerce table.cart td.actions input[name="update_cart"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Same 768px breakpoint the rest of the cart already uses - a 760px one here
   left an eight-pixel band where the two sets of rules disagreed. Each item
   becomes its own full-width row; stating flex-basis as well as width matters
   because these are flex items, where width alone loses to flex-basis auto. */
@media (max-width: 768px) {
  .woocommerce table.cart td.actions > p:has(button[name="update_cart"]),
  .woocommerce table.cart td.actions > p:has(input[name="update_cart"]) {
    float: none;
    width: 100%;
    margin-top: .6rem;
  }
  .woocommerce table.cart td.actions .coupon {
    flex-wrap: wrap;
    width: 100%;
    gap: .6rem;
  }
  .woocommerce table.cart td.actions .coupon .input-text,
  .woocommerce table.cart td.actions .coupon #coupon_code,
  .woocommerce table.cart td.actions .coupon .button,
  .woocommerce table.cart td.actions .coupon button.button,
  .woocommerce table.cart td.actions .coupon input.button {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  .woocommerce table.cart td.actions .button,
  .woocommerce table.cart td.actions button.button,
  .woocommerce table.cart td.actions input.button { width: 100%; min-width: 0; }
}

/* ---------- cart totals button fills its panel ---------- */
.woocommerce .cart_totals .wc-proceed-to-checkout { padding: 0; margin-top: 1.25rem; }
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 1.5rem;
  font-size: .95rem;
  line-height: 1;
}

/* ---------- checkout: one field height ----------
   Text inputs measured 48px and selects 46px, so every row pairing one of
   each sat two pixels out of line. */
.woocommerce-checkout .woocommerce-billing-fields .input-text,
.woocommerce-checkout .woocommerce-shipping-fields .input-text,
.woocommerce-checkout .woocommerce-additional-fields .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
}
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout textarea.input-text { height: auto; min-height: 7rem; }
.woocommerce-checkout .select2-container .select2-selection__rendered { line-height: 46px; }
.woocommerce-checkout .select2-container .select2-selection__arrow { height: 46px; }

.woocommerce-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 1.5rem;
  font-size: .95rem;
  line-height: 1;
}

/* ---------- notices: keep the button on the message's line ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
}
.woocommerce-message > a.button,
.woocommerce-info > a.button {
  margin-left: auto;
  height: 40px;
  min-width: 0;
  padding: 0 1.25rem;
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
}
@media (max-width: 760px) {
  .woocommerce-message > a.button,
  .woocommerce-info > a.button { margin-left: 0; width: 100%; justify-content: center; }
}

/* ==========================================================================
   Cart rows on narrow screens
   --------------------------------------------------------------------------
   woocommerce-smallscreen.css turns every cell into a block, floats a label
   into it via ::before and right-aligns the value. That reads well for a
   short value like a price, and badly for everything else:

     - a 100-character product name right-aligns over four lines with a
       ragged left edge
     - the quantity stepper drifts to the far edge, away from its label
     - the product thumbnail is display:none, so a shopper on a phone cannot
       see what is in their cart

   Short label/value pairs keep the stock treatment; the rest is corrected.
   ========================================================================== */
@media (max-width: 768px) {

  /* The thumbnail is the quickest way to confirm the right item is in the
     cart. Woo hides it; put it back above the name. */
  /* woocommerce-smallscreen.css sets text-align:right!important on every
     responsive cell, so these overrides have to carry !important too - it is
     the only thing that beats a vendor !important at equal specificity. */
  .woocommerce table.cart td.product-thumbnail {
    display: block;
    text-align: left !important;
    padding: .75rem .6rem .25rem;
  }
  .woocommerce table.cart td.product-thumbnail::before { content: none; }
  /* The cell's whitespace text nodes around the <a> form line boxes, which
     added 42px of dead space under an 80px image. Collapsing the cell's
     line-height removes them; the anchor carries its own height. */
  .woocommerce table.cart td.product-thumbnail { line-height: 0; font-size: 0; }
  .woocommerce table.cart td.product-thumbnail a { display: block; width: 80px; }
  .woocommerce table.cart td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    /* The cart image rule further up carries margin:20px 0, which escaped the
       anchor and left 21px of dead space above and below the thumbnail. */
    margin: 0;
  }

  /* The name does not need labelling - it is plainly the product - and it
     needs the full width to wrap against a straight left edge. */
  .woocommerce table.cart td.product-name {
    text-align: left !important;
    padding-top: 0;
  }
  .woocommerce table.cart td.product-name::before { content: none; }
  .woocommerce table.cart td.product-name a { font-size: .95rem; line-height: 1.45; }

  /* Keep the stepper next to its own label rather than at the far edge. */
  .woocommerce table.cart td.product-quantity { text-align: left !important; }
  .woocommerce table.cart td.product-quantity::before {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: .6rem;
  }
  .woocommerce table.cart td.product-quantity .quantity,
  .woocommerce table.cart td.product-quantity .mg-qty { vertical-align: middle; }

  /* Price and subtotal keep label-left / value-right: both are short, and the
     right edge makes the figures line up with each other. */
  .woocommerce table.cart td.product-price,
  .woocommerce table.cart td.product-subtotal { text-align: right !important; }

  /* ---- the row as a two-column grid ----
     Thumbnail and name are sibling cells, so the only way to sit them side
     by side is to lay the row out. Grid rather than a float: a float would
     also pull Price, Quantity and Subtotal up beside the image, and each
     would then need clearing.

     Scoped to tr.cart_item, which leaves the actions row - the one carrying
     colspan="6" - out of it entirely. */
  .woocommerce table.cart tbody tr.cart_item {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: .85rem;
    align-items: start;
    padding-bottom: .5rem;
  }
  .woocommerce table.cart tbody tr.cart_item + tr.cart_item {
    border-top: 1px solid var(--mg-line);
    padding-top: .75rem;
  }

  /* Remove sits on its own line above, hard right. */
  .woocommerce table.cart tbody tr.cart_item td.product-remove { grid-column: 1 / -1; }

  /* The pair, side by side. */
  .woocommerce table.cart tbody tr.cart_item td.product-thumbnail { grid-column: 1; }
  .woocommerce table.cart tbody tr.cart_item td.product-name {
    grid-column: 2;
    align-self: center;
    padding-left: 0;
  }

  /* Everything else spans the full width underneath. */
  .woocommerce table.cart tbody tr.cart_item td.product-price,
  .woocommerce table.cart tbody tr.cart_item td.product-quantity,
  .woocommerce table.cart tbody tr.cart_item td.product-subtotal { grid-column: 1 / -1; }
}

/* ==========================================================================
   Cart: totals before cross-sells on one column
   --------------------------------------------------------------------------
   Side by side the source order does not matter - the totals panel sits in
   the right-hand column regardless. Once the grid collapses to one column it
   matters a lot: "You may be interested in..." is 749px tall on a phone, and
   it was sitting between the cart and the totals, putting Proceed to Checkout
   at y=2032. Someone ready to pay had to scroll past a full-height product
   card to find the button.

   Reordering rather than hiding: the cross-sells still earn their place, just
   after the decision to buy rather than in front of it.
   ========================================================================== */
@media (max-width: 860px) {
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals { order: 1; }

  .woocommerce .cart-collaterals .cross-sells,
  .woocommerce-page .cart-collaterals .cross-sells { order: 2; margin-top: .5rem; }
}

/* ==========================================================================
   Catalog card: beige photo panel
   --------------------------------------------------------------------------
   The product shots are all opaque with a pure white backdrop baked in -
   checked all eight, including the PNGs, whose alpha channel is 255
   everywhere. So a background colour behind them shows nothing; the white
   rectangle is part of the photograph.

   multiply fixes that without touching the files: white multiplied by the
   panel colour IS the panel colour, so the backdrop disappears into the
   beige while the bag itself stays. The product picks up a faint warm cast,
   which on olive and black hardware is barely visible and reads as a studio
   backdrop rather than a cut-out.

   Dark cards only. On the light shop and product pages a white backdrop
   already sits happily on a near-white page.
   ========================================================================== */
:root { --mg-photo-panel: #DED6C3; }

body:not(.mg-light) .mg-gear__media { background: var(--mg-photo-panel); }

body:not(.mg-light) .mg-gear__shot {
  background: var(--mg-photo-panel);
  /* A blend only composites against its own stacking context, so the panel
     has to be the backdrop rather than the page behind it. */
  isolation: isolate;
}

body:not(.mg-light) .mg-gear__shot img {
  mix-blend-mode: multiply;
  background: transparent;
}

/* The placeholder slot keeps the dark well - there is no photograph to sit
   on a panel, and a beige rectangle with dashed borders reads as a broken
   image rather than as a waiting one. */
body:not(.mg-light) .mg-gear__card .mg-gear__slot { background: var(--mg-well); }
body:not(.mg-light) .mg-gear__media:has(.mg-gear__slot) { background: var(--mg-well); }