/* ==========================================================================
   MARBOURNE
   Design direction: Marbourne Field Bone
   Tokens are the single source of truth. Do not hardcode a colour below.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Colour */
  --mb-bg: #F4EFE6;
  --mb-surface: #FBF8F3;
  --mb-ink: #1A1813;
  --mb-muted: #5E584B;
  --mb-accent: #3A4A32;
  --mb-accent-hover: #2C3926;
  --mb-sand: #C9B79B;
  --mb-sand-soft: #E6DCC9;
  --mb-line: #E2DACB;
  --mb-line-strong: #8A8271;

  /* Type */
  --mb-font: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Space */
  --mb-xs: 8px;
  --mb-sm: 12px;
  --mb-md: 24px;
  --mb-lg: 48px;
  --mb-xl: 96px;
  --mb-xxl: 144px;

  /* Shape */
  --mb-r: 2px;
  --mb-pill: 999px;

  /* Layout */
  --mb-max: 1440px;
  --mb-gutter: 32px;

  /* Motion. Dial is 0.25, so everything is short and functional. */
  --mb-t-fast: 160ms;
  --mb-t: 240ms;
  --mb-t-slow: 320ms;
  --mb-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Header height, read by the hero so it can fill the first viewport. */
  --mb-header-h: 72px;
}

@media (max-width: 900px) {
  :root {
    --mb-gutter: 20px;
    --mb-xl: 64px;
    --mb-xxl: 88px;
    --mb-header-h: 60px;
  }
}

/* --- Reset -----------------------------------------------------------------
   Two different jobs here, and they need two different specificities.

   1. Anything the PARENT THEME also sets (font-family, colour on a/button,
      background) must be authored at real specificity or Kadence wins on
      specificity regardless of source order. `body.marbourne` is 0,1,1 and
      beats a bare `body` / `a` / `button` at 0,0,1. Getting this wrong is
      silent: the page renders in the platform font and nothing errors.

   2. Anything that only neutralises a USER-AGENT default (margins, list
      padding) is wrapped in :where() so it stays at 0,0,0 and every component
      rule below still wins.
   -------------------------------------------------------------------------- */

body.marbourne {
  background: var(--mb-bg);
  color: var(--mb-ink);
  font-family: var(--mb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.marbourne h1,
body.marbourne h2,
body.marbourne h3,
body.marbourne h4,
body.marbourne h5,
body.marbourne h6 {
  font-family: var(--mb-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

body.marbourne a {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}

body.marbourne button,
body.marbourne input,
body.marbourne select,
body.marbourne textarea {
  font-family: var(--mb-font);
}

body.marbourne button {
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  cursor: pointer;
}

/* UA-default neutralisation only. Kept at 0,0,0 on purpose. */
:where(body.marbourne h1, body.marbourne h2, body.marbourne h3,
       body.marbourne h4, body.marbourne h5, body.marbourne h6,
       body.marbourne p, body.marbourne ul, body.marbourne ol,
       body.marbourne figure, body.marbourne blockquote, body.marbourne dl) {
  margin: 0;
  padding: 0;
  border: 0;
}

:where(body.marbourne img) {
  max-width: 100%;
  height: auto;
  display: block;
}

body.marbourne * {
  box-sizing: border-box;
}

/* Focus. Never removed, always visible, always the accent. */
body.marbourne :focus-visible {
  outline: 2px solid var(--mb-accent);
  outline-offset: 3px;
  border-radius: var(--mb-r);
}

body.marbourne .mb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--mb-accent);
  color: var(--mb-bg);
  padding: var(--mb-sm) var(--mb-md);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.marbourne .mb-skip:focus {
  left: var(--mb-gutter);
  top: var(--mb-xs);
}

.mb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Layout primitives ---------------------------------------------------- */

.mb-wrap {
  width: 100%;
  max-width: var(--mb-max);
  margin-inline: auto;
  padding-inline: var(--mb-gutter);
}

.mb-section {
  padding-block: var(--mb-xl);
}

.mb-rule {
  border: 0;
  border-top: 1px solid var(--mb-line);
  margin: 0;
}

/* --- Type ----------------------------------------------------------------- */

.mb-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-muted);
  line-height: 1;
}

.mb-h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.06;
}

.mb-h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
}

.mb-body {
  font-size: 1rem;
  color: var(--mb-muted);
  line-height: 1.65;
  max-width: 62ch;
}

.mb-price {
  font-variant-numeric: tabular-nums;
}

/* --- Buttons -------------------------------------------------------------- */

body.marbourne .mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-xs);
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--mb-r);
  background: var(--mb-accent);
  color: var(--mb-bg);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--mb-t-fast) var(--mb-ease),
              transform var(--mb-t-fast) var(--mb-ease);
  cursor: pointer;
}

body.marbourne .mb-btn:hover { background: var(--mb-accent-hover); }
body.marbourne .mb-btn:active { transform: translateY(1px); }

body.marbourne .mb-btn--ghost {
  background: transparent;
  color: var(--mb-ink);
  box-shadow: inset 0 0 0 1px var(--mb-ink);
}

body.marbourne .mb-btn--ghost:hover {
  background: var(--mb-ink);
  color: var(--mb-bg);
}

body.marbourne .mb-btn--block { width: 100%; }

/* A text link that underlines from the left on hover. Used in the hero rail. */
body.marbourne .mb-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--mb-xs);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-block: 6px;
  color: var(--mb-ink);
}

body.marbourne .mb-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform var(--mb-t) var(--mb-ease);
}

body.marbourne .mb-link:hover::after { transform: scaleX(0); transform-origin: right; }

body.marbourne .mb-link svg { transition: transform var(--mb-t) var(--mb-ease); }
.mb-link:hover svg { transform: translateX(4px); }

/* --- Header --------------------------------------------------------------- */

.mb-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--mb-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mb-t) var(--mb-ease);
}

.mb-header.is-stuck { border-bottom-color: var(--mb-line); }

body.marbourne .mb-header__inner {
  display: grid;
  /* Exactly three cells: browse, wordmark, utilities. The mobile toggle lives
     inside the first cell so the header can never wrap to a second row. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--mb-md);
  min-height: var(--mb-header-h);
}

body.marbourne .mb-header__lead {
  display: flex;
  align-items: center;
  gap: var(--mb-md);
  min-width: 0;
}

.mb-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

body.marbourne .mb-nav a,
body.marbourne .mb-nav__toggle {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mb-ink);
  position: relative;
  padding-block: 4px;
}

.mb-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--mb-t) var(--mb-ease);
}

.mb-nav a:hover::after,
.mb-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

/* Wordmark. Set in the brand face, tracked out, never an image file. */
body.marbourne .mb-brand {
  justify-self: center;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em; /* optically re-centre the tracked-out lockup */
  white-space: nowrap;
}

.mb-utils {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.marbourne .mb-utils__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 8px;
  border-radius: var(--mb-r);
  color: var(--mb-ink);
  transition: background var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .mb-utils__btn:hover { background: rgba(23, 26, 23, 0.06); }

.mb-utils__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mb-utils__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--mb-pill);
  background: var(--mb-accent);
  color: var(--mb-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mb-utils__count[data-count='0'] { display: none; }

.mb-icon { width: 19px; height: 19px; stroke-width: 1.4; }

@media (max-width: 900px) {
  .mb-header__inner { grid-template-columns: 1fr auto 1fr; }
  body.marbourne .mb-nav--desktop { display: none; }
  .mb-utils__label { display: none; }
}

@media (min-width: 901px) {
  /* Scoped to beat body.marbourne .mb-utils__btn, which also sets display. */
  body.marbourne .mb-nav__toggle { display: none; }
}

/* --- Hero ------------------------------------------------------------------
   Campaign-led. A full-bleed editorial image carries the section and the type
   sits quietly on top of it, rather than the type dominating and the image
   playing support. No product photography here by design: cutouts on white
   belong in the grid below, not in the campaign frame.

   Legibility does not depend on which photograph lands. A directional scrim
   holds the text zone at >= 80% ground opacity, so ink type clears AA against
   any image supplied.
   -------------------------------------------------------------------------- */

body.marbourne .mb-hero { position: relative; }

body.marbourne .mb-hero__frame {
  position: relative;
  /* full bleed out of the container */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  min-height: min(calc(100svh - var(--mb-header-h) - 96px), 700px);
  display: grid;
  isolation: isolate;
  overflow: hidden;
}

/* image, scrim and content all stack in one grid cell */
body.marbourne .mb-hero__frame > * { grid-area: 1 / 1; }

body.marbourne .mb-hero__img { position: relative; z-index: 0; }

body.marbourne .mb-hero__img,
body.marbourne .mb-hero__img .mb-slot {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}

body.marbourne .mb-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

body.marbourne .mb-hero__scrim {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(244, 239, 230, 0.95) 0%,
    rgba(244, 239, 230, 0.86) 30%,
    rgba(244, 239, 230, 0.42) 52%,
    rgba(244, 239, 230, 0) 70%
  );
}

body.marbourne .mb-hero__content {
  z-index: 2;
  align-self: center;
  display: grid;
  align-content: center;
  gap: var(--mb-md);
  padding-block: var(--mb-lg);
}

/* Wide enough that "Everyday carry," holds one line at the display size; the
   accent clause takes the second. A hero headline never runs to three lines. */
body.marbourne .mb-hero__inner { max-width: min(640px, 52%); }

/* Restrained. The image is the loudest thing on the screen, not the headline. */
body.marbourne .mb-hero__title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--mb-ink);
  text-wrap: balance;
}

body.marbourne .mb-hero__title span {
  display: block;
  color: var(--mb-accent);
}

body.marbourne .mb-hero__lede {
  margin-top: var(--mb-md);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: var(--mb-muted);
  line-height: 1.6;
  max-width: 34ch;
}

body.marbourne .mb-hero__cta {
  margin-top: var(--mb-lg);
  display: flex;
  align-items: center;
  gap: var(--mb-sm);
  flex-wrap: wrap;
}

/* Utility rail beneath the hero. */
body.marbourne .mb-hero__rail {
  border-top: 1px solid var(--mb-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mb-md);
  padding-top: var(--mb-md);
  padding-bottom: var(--mb-lg);
}

body.marbourne .mb-hero__rail > :nth-child(2) { justify-self: center; }
body.marbourne .mb-hero__rail > :nth-child(3) { justify-self: end; }

/* Placeholder panel, used only while real editorial photography is missing. */
body.marbourne .mb-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: var(--mb-r);
  background: linear-gradient(160deg, var(--mb-sand-soft) 0%, var(--mb-sand) 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}

body.marbourne .mb-placeholder::after {
  content: attr(data-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mb-ink);
  opacity: 0.42;
  text-align: center;
  padding: var(--mb-md);
}

/* Hero, mobile. Composed independently: the image takes the top of the screen
   at a portrait crop and the type sits on a solid ground beneath it, so the
   headline never fights the photograph on a small display. */
@media (max-width: 900px) {
  body.marbourne .mb-hero__frame {
    min-height: 0;
    grid-template-rows: auto auto;
  }

  body.marbourne .mb-hero__frame > * { grid-area: auto; }

  body.marbourne .mb-hero__img {
    grid-row: 1;
    aspect-ratio: 4 / 5;
    max-height: 56svh;
  }

  body.marbourne .mb-hero__scrim { display: none; }

  body.marbourne .mb-hero__content {
    grid-row: 2;
    padding-block: var(--mb-md) 0;
    background: var(--mb-bg);
  }

  body.marbourne .mb-hero__inner { max-width: none; }
  body.marbourne .mb-hero__lede { margin-top: var(--mb-sm); max-width: none; }
  body.marbourne .mb-hero__cta { margin-top: var(--mb-md); }
  body.marbourne .mb-hero__cta .mb-btn { flex: 1 1 100%; }

  body.marbourne .mb-hero__cta .mb-btn--ghost {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--mb-ink);
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  body.marbourne .mb-hero__cta .mb-btn--ghost:hover { background: none; color: var(--mb-muted); }

  body.marbourne .mb-hero__rail {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--mb-md);
    padding-bottom: var(--mb-md);
  }

  body.marbourne .mb-hero__rail > * {
    justify-self: start !important;
    border-bottom: 1px solid var(--mb-line);
    width: 100%;
    padding-block: 14px;
  }

  body.marbourne .mb-hero__rail > *:last-child { border-bottom: 0; }
  body.marbourne .mb-hero__rail .mb-link::after { display: none; }
}

/* --- Scroll reveal ---------------------------------------------------------
   Hidden only once JS has confirmed it is running. Without JS, without the
   observer, in print, and for a crawler, content renders visible.
   -------------------------------------------------------------------------- */

html.mb-js .mb-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--mb-t-slow) var(--mb-ease),
              transform var(--mb-t-slow) var(--mb-ease);
}

html.mb-js .mb-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.mb-js .mb-reveal { opacity: 1; transform: none; transition: none; }

  body.marbourne *,
  body.marbourne *::before,
  body.marbourne *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Mobile navigation ---------------------------------------------------- */

.mb-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--mb-bg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--mb-t) var(--mb-ease),
              transform var(--mb-t) var(--mb-ease);
  overflow-y: auto;
}

.mb-mobile-nav.is-open { opacity: 1; transform: none; }

.mb-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--mb-header-h);
  border-bottom: 1px solid var(--mb-line);
}

.mb-mobile-nav__links {
  display: flex;
  flex-direction: column;
  padding-block: var(--mb-md);
}

body.marbourne .mb-mobile-nav__links a {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-block: 14px;
  border-bottom: 1px solid var(--mb-line);
  min-height: 56px;
  display: flex;
  align-items: center;
}

.mb-mobile-nav__links a:last-child { border-bottom: 0; }

/* --- Footer --------------------------------------------------------------- */

.mb-footer {
  border-top: 1px solid var(--mb-line);
  padding-block: var(--mb-xl) var(--mb-lg);
  margin-top: var(--mb-xl);
}

.mb-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: var(--mb-lg);
  padding-bottom: var(--mb-xl);
}

.mb-footer__mark {
  display: block;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.mb-footer__line {
  margin-top: var(--mb-sm);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mb-muted);
}

.mb-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--mb-sm);
}

.mb-footer__col .mb-label { margin-bottom: 4px; }

body.marbourne .mb-footer__col a {
  font-size: 15px;
  color: var(--mb-ink);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  transition: color var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .mb-footer__col a:hover { color: var(--mb-muted); }

.mb-footer__base {
  border-top: 1px solid var(--mb-line);
  padding-top: var(--mb-md);
  display: flex;
  justify-content: space-between;
  gap: var(--mb-md);
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mb-muted);
}

@media (max-width: 700px) {
  .mb-footer__top { grid-template-columns: 1fr 1fr; gap: var(--mb-lg) var(--mb-md); }
  .mb-footer__brand { grid-column: 1 / -1; }
}

.mb-icon--sm { width: 15px; height: 15px; }

/* ==========================================================================
   HOMEPAGE SECTIONS
   Editorial register. Every section is a different layout family: nothing
   repeats, and no eyebrow appears more than once per three sections.
   ========================================================================== */

/* --- Brand logo ----------------------------------------------------------- */

body.marbourne .mb-logo {
  display: block;
  color: var(--mb-ink);
}

body.marbourne .mb-logo svg { display: block; width: 100%; height: auto; }

body.marbourne .mb-brand--logo {
  justify-self: center;
  width: clamp(132px, 13vw, 178px);
  line-height: 0;
}

@media (max-width: 900px) {
  body.marbourne .mb-brand--logo { width: 124px; }
}

/* --- Image slot -----------------------------------------------------------
   Declared local placeholder. On-palette, composed like the final image, zero
   external requests. Prints its own spec so the shot list is readable straight
   off the page. Swapping in a real image never changes the layout.
   -------------------------------------------------------------------------- */

body.marbourne .mb-slot {
  position: relative;
  width: 100%;
  aspect-ratio: var(--mb-ar, 4 / 5);
  border-radius: var(--mb-r);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 14px,
      rgba(26, 24, 19, 0.028) 14px 15px
    ),
    linear-gradient(158deg, var(--mb-sand-soft) 0%, var(--mb-sand) 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

body.marbourne .mb-slot__meta {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: var(--mb-md);
  color: var(--mb-ink);
}

body.marbourne .mb-slot__id {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body.marbourne .mb-slot__spec {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}

body.marbourne .mb-slot__note {
  font-size: 12px;
  line-height: 1.45;
  max-width: 30ch;
  opacity: 0.72;
  margin-top: 4px;
}

body.marbourne .mb-slot--fill { height: 100%; aspect-ratio: auto; }

/* A filled slot drops the placeholder ground and shows the real photograph,
   cover-cropped inside the reserved box so layout never shifts. */
body.marbourne .mb-slot--filled { background: var(--mb-surface); }

body.marbourne .mb-slot--filled img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* --- 2. Trust rail (conversion) -------------------------------------------
   Four guarantees, each given room to breathe. Icon sits above the label rather
   than crowding it on one line, and the dividers are hairlines between columns
   instead of a boxed-in row.
   -------------------------------------------------------------------------- */

body.marbourne .mb-trust { border-block: 1px solid var(--mb-line); }

body.marbourne .mb-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(28px, 3.4vw, 48px);
}

body.marbourne .mb-trust__item {
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
}

/* Hairline separators drawn between columns, never around them. */
body.marbourne .mb-trust__item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(10px, 1.5vw, 24px));
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--mb-line);
}

body.marbourne .mb-trust__icon {
  color: var(--mb-accent);
  line-height: 0;
}

body.marbourne .mb-trust__icon svg { width: 22px; height: 22px; stroke-width: 1.25; }

body.marbourne .mb-trust__t {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: block;
}

body.marbourne .mb-trust__d {
  font-size: 13px;
  color: var(--mb-muted);
  display: block;
  margin-top: 3px;
  line-height: 1.45;
  max-width: 24ch;
}

@media (max-width: 900px) {
  body.marbourne .mb-trust__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--mb-md);
    padding-block: var(--mb-md);
  }
  body.marbourne .mb-trust__item:not(:first-child)::before { display: none; }
  body.marbourne .mb-trust__item:nth-child(n+3) { border-top: 1px solid var(--mb-line); padding-top: var(--mb-md); }
  body.marbourne .mb-trust__d { font-size: 12px; }
}

/* --- 3. Brand statement ---------------------------------------------------
   Type only, wide right margin. The page breathing between two dense sections.
   -------------------------------------------------------------------------- */

body.marbourne .mb-statement { padding-block: clamp(64px, 9vw, 130px); }

body.marbourne .mb-statement__body {
  max-width: 22ch;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

body.marbourne .mb-statement__body em {
  font-style: normal;
  font-weight: 600;
  color: var(--mb-accent);
}

body.marbourne .mb-statement__foot {
  margin-top: var(--mb-lg);
  display: flex;
  gap: var(--mb-lg);
  flex-wrap: wrap;
  align-items: flex-start;
}

body.marbourne .mb-statement__col {
  max-width: 34ch;
  font-size: 0.95rem;
  color: var(--mb-muted);
  line-height: 1.6;
}

@media (max-width: 900px) {
  body.marbourne .mb-statement__body { max-width: none; }
  body.marbourne .mb-statement__foot { gap: var(--mb-md); flex-direction: column; }
}

/* --- 4. Collection two-up (asymmetric) ------------------------------------ */

body.marbourne .mb-collection__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(16px, 2.6vw, 40px);
  align-items: stretch;
  /* One shared row height: without this the panel inherits the 4:5 media
     height and opens a dead gap above the CTA. */
  --mb-coll-h: clamp(400px, 44vw, 600px);
}

body.marbourne .mb-collection__media { height: var(--mb-coll-h); }

body.marbourne .mb-collection__media .mb-slot {
  height: 100%;
  aspect-ratio: auto;
}

body.marbourne .mb-collection__panel {
  background: var(--mb-surface);
  border-radius: var(--mb-r);
  padding: clamp(24px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mb-md);
  height: var(--mb-coll-h);
}

body.marbourne .mb-collection__panel .mb-btn {
  align-self: flex-start;
  margin-top: var(--mb-xs);
}

body.marbourne .mb-collection__head { max-width: 26ch; }

body.marbourne .mb-collection__swatches {
  display: flex;
  gap: var(--mb-xs);
  margin-top: var(--mb-md);
  flex-wrap: wrap;
}

body.marbourne .mb-swatch {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--mb-pill);
  background: none;
}

body.marbourne .mb-swatch::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: var(--mb-pill);
  background: var(--mb-swatch, var(--mb-sand));
  box-shadow: inset 0 0 0 1px rgba(26, 24, 19, 0.16);
  transition: transform var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .mb-swatch:hover::before { transform: scale(1.14); }
body.marbourne .mb-swatch[aria-pressed='true']::before {
  box-shadow: inset 0 0 0 1px rgba(26, 24, 19, 0.16), 0 0 0 2px var(--mb-accent);
}

body.marbourne .mb-collection__media { position: relative; }

@media (max-width: 900px) {
  body.marbourne .mb-collection__grid { grid-template-columns: 1fr; --mb-coll-h: auto; }
  body.marbourne .mb-collection__media { height: auto; }
  body.marbourne .mb-collection__media .mb-slot { aspect-ratio: 4 / 5; }
  body.marbourne .mb-collection__panel { padding: var(--mb-md); height: auto; }
  body.marbourne .mb-collection__panel .mb-btn { align-self: stretch; }
}

/* --- 5. Wordmark moment ---------------------------------------------------
   A very large wordmark with the product shots floating over it at different
   depths. The shots are photographed on white, so multiply blending drops that
   white into the page ground and they read as cutouts without alpha channels.
   -------------------------------------------------------------------------- */

body.marbourne .mb-moment {
  padding-block: clamp(56px, 7vw, 104px);
  overflow: hidden;
}

body.marbourne .mb-moment__head {
  display: flex;
  justify-content: space-between;
  gap: var(--mb-lg);
  align-items: flex-end;
  margin-bottom: clamp(16px, 2vw, 28px);
}

body.marbourne .mb-moment__intro {
  max-width: 38ch;
  font-size: 0.95rem;
  color: var(--mb-muted);
  line-height: 1.6;
}

body.marbourne .mb-moment__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 42vw, 620px);
}

body.marbourne .mb-moment__word {
  font-size: clamp(2.6rem, 13.5vw, 12rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mb-ink);
  text-align: center;
  pointer-events: none;
  user-select: none;
}

body.marbourne .mb-moment__float {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.marbourne .mb-float__item {
  position: absolute;
  display: block;
  width: clamp(150px, 21vw, 340px);
  /* The shots are photographed on 242-grey, not pure white. Multiplied against
     the cream ground that grey lands DARKER than the page and leaves a visible
     rectangle around every bag. Lifting brightness ~7% clips the backdrop to
     255 first, so multiply erases it completely. No drop-shadow here: a shadow
     under a multiply layer gets multiplied too and reintroduces the box. */
  filter: brightness(1.07);
  mix-blend-mode: multiply;
}

body.marbourne .mb-float__item img { width: 100%; height: auto; display: block; }

/* Four depths, none of them level with another. */
body.marbourne .mb-float__item:nth-child(1) { left: -3%;  top: -2%;    transform: rotate(-11deg); }
body.marbourne .mb-float__item:nth-child(2) { right: -3%; top: -6%;    transform: rotate(9deg); }
body.marbourne .mb-float__item:nth-child(3) { left: 19%;  bottom: -8%; transform: rotate(6deg); }
body.marbourne .mb-float__item:nth-child(4) { right: 18%; bottom: -4%; transform: rotate(-7deg); }

/* A bag lifts slightly when pointed at. Transform only, and it inherits the
   global reduced-motion collapse. */
body.marbourne .mb-float__item {
  pointer-events: auto;
  transition: transform var(--mb-t-slow) var(--mb-ease);
}

body.marbourne .mb-float__item:nth-child(1):hover { transform: rotate(-11deg) translateY(-12px) scale(1.03); }
body.marbourne .mb-float__item:nth-child(2):hover { transform: rotate(9deg)   translateY(-12px) scale(1.03); }
body.marbourne .mb-float__item:nth-child(3):hover { transform: rotate(6deg)   translateY(-12px) scale(1.03); }
body.marbourne .mb-float__item:nth-child(4):hover { transform: rotate(-7deg)  translateY(-12px) scale(1.03); }

body.marbourne .mb-moment__foot {
  margin-top: clamp(28px, 3.4vw, 52px);
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  body.marbourne .mb-moment__head { flex-direction: column; align-items: flex-start; gap: var(--mb-sm); }
  body.marbourne .mb-moment__stage { min-height: clamp(240px, 62vw, 360px); }
  body.marbourne .mb-float__item { width: clamp(108px, 33vw, 170px); }
  body.marbourne .mb-float__item:nth-child(1) { left: -6%;  top: 0%;     transform: rotate(-11deg); }
  body.marbourne .mb-float__item:nth-child(2) { right: -7%; top: -4%;    transform: rotate(9deg); }
  body.marbourne .mb-float__item:nth-child(3) { left: 10%;  bottom: -6%; transform: rotate(6deg); }
  body.marbourne .mb-float__item:nth-child(4) { display: none; }
}

/* --- 6. Craftsmanship spec rows ------------------------------------------- */

body.marbourne .mb-spec__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

body.marbourne .mb-spec__rows { border-top: 1px solid var(--mb-line); }

body.marbourne .mb-spec__row {
  border-bottom: 1px solid var(--mb-line);
  border-radius: var(--mb-r);
  transition: background var(--mb-t) var(--mb-ease),
              color var(--mb-t) var(--mb-ease);
}

body.marbourne .mb-spec__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--mb-sm);
  text-align: left;
  padding: 20px var(--mb-md) 20px var(--mb-sm);
  min-height: 64px;
}

body.marbourne .mb-spec__n {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mb-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--mb-t) var(--mb-ease);
}

body.marbourne .mb-spec__t {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}

body.marbourne .mb-spec__sign {
  width: 18px;
  height: 18px;
  position: relative;
  flex: 0 0 auto;
}

body.marbourne .mb-spec__sign::before,
body.marbourne .mb-spec__sign::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform var(--mb-t) var(--mb-ease);
}

body.marbourne .mb-spec__sign::before { width: 100%; height: 1px; }
body.marbourne .mb-spec__sign::after  { width: 1px; height: 100%; }

body.marbourne .mb-spec__panel {
  overflow: hidden;
  padding: 0 var(--mb-md) 0 calc(44px + var(--mb-sm));
  color: var(--mb-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

body.marbourne .mb-spec__panel > * { padding-bottom: 20px; max-width: 46ch; }

/* Open row fills with the accent. */
body.marbourne .mb-spec__row[data-open='true'] {
  background: var(--mb-accent);
  color: var(--mb-bg);
}

body.marbourne .mb-spec__row[data-open='true'] .mb-spec__n { color: var(--mb-bg); opacity: 0.7; }
body.marbourne .mb-spec__row[data-open='true'] .mb-spec__panel { color: var(--mb-bg); opacity: 0.88; }
body.marbourne .mb-spec__row[data-open='true'] .mb-spec__sign::after { transform: scaleY(0); }

@media (max-width: 900px) {
  body.marbourne .mb-spec__grid { grid-template-columns: 1fr; }
}

/* --- 7. Category rail ------------------------------------------------------
   Horizontal scroll with uneven tile widths. Explicitly not three identical
   cards.
   -------------------------------------------------------------------------- */

body.marbourne .mb-cats__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--mb-md);
  margin-bottom: var(--mb-md);
}

body.marbourne .mb-cats__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 26vw);
  gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--mb-sm);
  scrollbar-width: thin;
  /* bleed the rail to the viewport edge so tiles run off-screen */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--mb-gutter), calc(50vw - var(--mb-max) / 2));
}

/* Uneven rhythm: every third tile is wider. */
body.marbourne .mb-cats__rail > :nth-child(3n+1) { grid-column: span 1; }
body.marbourne .mb-cat { scroll-snap-align: start; display: block; }
body.marbourne .mb-cat:nth-child(3n+2) .mb-slot { --mb-ar: 1 / 1; }

body.marbourne .mb-cat__name {
  margin-top: var(--mb-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-xs);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

body.marbourne .mb-cat__name svg { transition: transform var(--mb-t) var(--mb-ease); }
body.marbourne .mb-cat:hover .mb-cat__name svg { transform: translateX(4px); }

/* --- 8. Product row (WooCommerce driven) ---------------------------------- */

body.marbourne .mb-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px) clamp(12px, 1.6vw, 24px);
}

body.marbourne .mb-card__media {
  position: relative;
  background: var(--mb-surface);
  border-radius: var(--mb-r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

body.marbourne .mb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--mb-sm);
  transition: opacity var(--mb-t-slow) var(--mb-ease);
}

body.marbourne .mb-card__body {
  margin-top: var(--mb-sm);
  display: flex;
  justify-content: space-between;
  gap: var(--mb-sm);
  align-items: baseline;
}

body.marbourne .mb-card__name { font-size: 14px; font-weight: 500; }
body.marbourne .mb-card__price { font-size: 14px; color: var(--mb-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  /* Two-up, never one-up: browsing stays fast on a phone. */
  body.marbourne .mb-products__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 9. Value marquee ------------------------------------------------------ */

body.marbourne .mb-marquee {
  border-block: 1px solid var(--mb-line);
  overflow: hidden;
  padding-block: 18px;
}

body.marbourne .mb-marquee__track {
  display: flex;
  gap: var(--mb-lg);
  width: max-content;
  animation: mb-marquee 42s linear infinite;
}

body.marbourne .mb-marquee:hover .mb-marquee__track { animation-play-state: paused; }

body.marbourne .mb-marquee__item {
  display: flex;
  align-items: center;
  gap: var(--mb-lg);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.marbourne .mb-marquee__item::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--mb-pill);
  background: var(--mb-accent);
}

@keyframes mb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  body.marbourne .mb-marquee__track { animation: none; }
  body.marbourne .mb-marquee { overflow-x: auto; }
}

/* --- 10. Reviews. Text only, no imagery -----------------------------------
   Four columns, alternately dropped so the row has rhythm, each opened by an
   oversized index numeral instead of the avatar a review block usually leans on.
   -------------------------------------------------------------------------- */

body.marbourne .mb-reviews {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
}

body.marbourne .mb-review:nth-child(even) { margin-top: clamp(24px, 4vw, 68px); }

body.marbourne .mb-review {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--mb-sm);
  padding-top: var(--mb-md);
  border-top: 1px solid var(--mb-ink);
}

body.marbourne .mb-review::before {
  content: attr(data-n);
  position: absolute;
  top: calc(-1 * clamp(26px, 3vw, 40px));
  left: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--mb-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body.marbourne .mb-stars { display: flex; gap: 3px; color: var(--mb-accent); }
body.marbourne .mb-stars svg { width: 13px; height: 13px; }

body.marbourne .mb-review__text {
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--mb-ink);
}

body.marbourne .mb-review__by {
  display: grid;
  gap: 2px;
  margin-top: var(--mb-xs);
  padding-top: var(--mb-sm);
  border-top: 1px solid var(--mb-line);
}

body.marbourne .mb-review__who {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-ink);
}

body.marbourne .mb-review__what {
  font-size: 11px;
  color: var(--mb-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  body.marbourne .mb-reviews { grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 48px); }
  body.marbourne .mb-review:nth-child(even) { margin-top: 0; }
  body.marbourne .mb-review:nth-child(n+3) { margin-top: clamp(16px, 3vw, 32px); }
}

@media (max-width: 640px) {
  body.marbourne .mb-reviews { grid-template-columns: 1fr; gap: var(--mb-lg); }
  body.marbourne .mb-review:nth-child(n) { margin-top: 0; }
}

/* --- 12. Promo two-up (conversion) ---------------------------------------- */

body.marbourne .mb-promo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 24px);
}

body.marbourne .mb-promo__panel {
  position: relative;
  border-radius: var(--mb-r);
  padding: clamp(28px, 3.6vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(260px, 30vw, 380px);
  overflow: hidden;
}

body.marbourne .mb-promo__panel--ink {
  background:
    radial-gradient(120% 92% at 88% 6%, rgba(58, 74, 50, 0.55) 0%, transparent 62%),
    var(--mb-ink);
  color: var(--mb-bg);
}
body.marbourne .mb-promo__panel--surface { background: var(--mb-surface); color: var(--mb-ink); }

body.marbourne .mb-promo__panel--ink .mb-btn {
  background: var(--mb-bg);
  color: var(--mb-ink);
}

body.marbourne .mb-promo__panel--ink .mb-btn:hover { background: #FFFFFF; }

body.marbourne .mb-promo__t {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

body.marbourne .mb-promo__d {
  margin-top: var(--mb-sm);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 34ch;
  opacity: 0.78;
}

body.marbourne .mb-promo__cta { margin-top: var(--mb-md); }

@media (max-width: 900px) {
  body.marbourne .mb-promo__grid { grid-template-columns: 1fr; }
}

/* --- 13. Newsletter --------------------------------------------------------
   Previously two lonely columns floating on the page ground with no shape.
   Now a real surface panel so the last thing above the footer has weight.
   -------------------------------------------------------------------------- */

body.marbourne .mb-news { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }

body.marbourne .mb-news__panel {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r);
  padding: clamp(28px, 4vw, 64px);
}

body.marbourne .mb-news__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

body.marbourne .mb-news__form { display: flex; gap: var(--mb-xs); flex-wrap: wrap; }

body.marbourne .mb-field {
  flex: 1 1 200px;
  min-height: 50px;
  padding: 0 var(--mb-sm);
  background: var(--mb-bg);
  border: 1px solid var(--mb-line-strong);
  border-radius: var(--mb-r);
  color: var(--mb-ink);
  font-size: 15px;
}

body.marbourne .mb-field::placeholder { color: var(--mb-muted); opacity: 1; }
body.marbourne .mb-field:focus { border-color: var(--mb-accent); }
body.marbourne .mb-field:disabled { opacity: 0.6; cursor: not-allowed; }
body.marbourne .mb-news__form .mb-btn { min-height: 50px; }
body.marbourne .mb-news__form .mb-btn:disabled { opacity: 0.55; cursor: not-allowed; }

body.marbourne .mb-news__note {
  margin-top: var(--mb-sm);
  font-size: 12px;
  color: var(--mb-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  body.marbourne .mb-news__grid { grid-template-columns: 1fr; gap: var(--mb-md); }
  body.marbourne .mb-news__form .mb-btn { flex: 1 1 100%; }
}

/* --- Section furniture ----------------------------------------------------- */

body.marbourne .mb-sec { padding-block: clamp(56px, 7vw, 104px); }
body.marbourne .mb-sec--tight { padding-block: clamp(40px, 5vw, 72px); }

body.marbourne .mb-sec__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--mb-md);
  margin-bottom: clamp(20px, 2.6vw, 36px);
}

body.marbourne .mb-sec__title {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

@media (max-width: 700px) {
  body.marbourne .mb-sec__head { flex-direction: column; align-items: flex-start; gap: var(--mb-sm); }
}

/* --- Expanded footer ------------------------------------------------------- */

body.marbourne .mb-footer__top {
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}

body.marbourne .mb-footer__lockup {
  width: clamp(180px, 20vw, 250px);
  color: var(--mb-ink);
  display: block;
}

body.marbourne .mb-footer__blurb {
  margin-top: var(--mb-md);
  font-size: 0.9rem;
  color: var(--mb-muted);
  line-height: 1.6;
  max-width: 34ch;
}

body.marbourne .mb-social { display: flex; gap: var(--mb-xs); margin-top: var(--mb-md); }

body.marbourne .mb-social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--mb-r);
  color: var(--mb-ink);
  transition: background var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .mb-social a:hover { background: rgba(26, 24, 19, 0.06); }
body.marbourne .mb-social svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  body.marbourne .mb-footer__top { grid-template-columns: 1fr 1fr; }
  body.marbourne .mb-footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   SHOP ARCHIVE
   ========================================================================== */

body.marbourne .mb-shop { padding-block: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 104px); }

body.marbourne .mb-shop__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--mb-md);
  padding-bottom: var(--mb-md);
}

body.marbourne .mb-shop__title {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

body.marbourne .mb-shop__desc {
  margin-top: var(--mb-sm);
  color: var(--mb-muted);
  max-width: 52ch;
  line-height: 1.6;
}

body.marbourne .mb-shop__count {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Category chips -------------------------------------------------------- */

body.marbourne .mb-shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-xs);
  padding-block: var(--mb-md);
  border-top: 1px solid var(--mb-line);
}

body.marbourne .mb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--mb-pill);
  box-shadow: inset 0 0 0 1px var(--mb-line-strong);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mb-ink);
  transition: background var(--mb-t-fast) var(--mb-ease),
              color var(--mb-t-fast) var(--mb-ease),
              box-shadow var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .mb-chip:hover { box-shadow: inset 0 0 0 1px var(--mb-ink); }

body.marbourne .mb-chip.is-on {
  background: var(--mb-accent);
  color: var(--mb-bg);
  box-shadow: inset 0 0 0 1px var(--mb-accent);
}

body.marbourne .mb-chip__n {
  font-size: 11px;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}

/* --- Sort bar -------------------------------------------------------------- */

body.marbourne .mb-shop__bar {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--mb-sm) var(--mb-md);
  border-top: 1px solid var(--mb-line);
}

body.marbourne .woocommerce-ordering select {
  min-height: 44px;
  padding: 0 36px 0 14px;
  background: transparent;
  border: 1px solid var(--mb-line-strong);
  border-radius: var(--mb-r);
  color: var(--mb-ink);
  font-family: var(--mb-font);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  /* Chevron drawn inline so no icon font or extra request is needed. */
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mb-ink) 50%),
    linear-gradient(135deg, var(--mb-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

body.marbourne .woocommerce-ordering select:focus { border-color: var(--mb-accent); }

/* --- Product grid ---------------------------------------------------------- */

body.marbourne .mb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px) clamp(12px, 1.6vw, 24px);
}

body.marbourne .mb-card__link { display: block; }

body.marbourne .mb-card__media {
  position: relative;
  display: block;
  background: var(--mb-surface);
  border-radius: var(--mb-r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

body.marbourne .mb-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(8px, 1.2vw, 18px);
  transition: opacity var(--mb-t-slow) var(--mb-ease),
              transform var(--mb-t-slow) var(--mb-ease);
}

body.marbourne .mb-card__img--alt { opacity: 0; }
body.marbourne .mb-card:hover .mb-card__img--alt { opacity: 1; }
body.marbourne .mb-card:hover .mb-card__img--main { opacity: 0; }

/* With no second image there is nothing to cross-fade to, so the single image
   gets a gentle scale instead of sitting completely inert. */
body.marbourne .mb-card:hover .mb-card__img--main:only-of-type {
  opacity: 1;
  transform: scale(1.03);
}

body.marbourne .mb-card__ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--mb-sand-soft) 0%, var(--mb-sand) 100%);
}

body.marbourne .mb-card__badge {
  position: absolute;
  top: var(--mb-sm);
  left: var(--mb-sm);
  z-index: 2;
  background: var(--mb-bg);
  color: var(--mb-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--mb-r);
}

body.marbourne .mb-card__body {
  margin-top: var(--mb-sm);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mb-xs);
}

body.marbourne .mb-card__name { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }

body.marbourne .mb-card__price {
  font-size: 14px;
  color: var(--mb-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.marbourne .mb-card__price del { opacity: 0.5; margin-right: 5px; }
body.marbourne .mb-card__price ins { text-decoration: none; color: var(--mb-accent); }

body.marbourne .mb-card__colours { display: flex; align-items: center; gap: 5px; margin-top: 7px; }

body.marbourne .mb-card__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--mb-pill);
  background: var(--mb-sand);
  box-shadow: inset 0 0 0 1px rgba(26, 24, 19, 0.18);
}

body.marbourne .mb-card__more { font-size: 11px; color: var(--mb-muted); }

/* --- Pagination ------------------------------------------------------------ */

body.marbourne .woocommerce-pagination { margin-top: clamp(40px, 5vw, 72px); }

body.marbourne .woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--mb-xs);
  list-style: none;
}

body.marbourne .woocommerce-pagination li a,
body.marbourne .woocommerce-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--mb-r);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--mb-ink);
  transition: background var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .woocommerce-pagination li a:hover { background: rgba(26, 24, 19, 0.06); }

body.marbourne .woocommerce-pagination li span.current {
  background: var(--mb-accent);
  color: var(--mb-bg);
}

/* --- Empty state ----------------------------------------------------------- */

body.marbourne .mb-empty {
  display: grid;
  justify-items: start;
  gap: var(--mb-sm);
  padding-block: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--mb-line);
}

body.marbourne .mb-empty .mb-btn { margin-top: var(--mb-sm); }

@media (max-width: 1100px) {
  body.marbourne .mb-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  body.marbourne .mb-shop__head { flex-direction: column; align-items: flex-start; gap: var(--mb-xs); }
  /* Two-up, never one-up: browsing stays fast on a phone. */
  body.marbourne .mb-grid { grid-template-columns: repeat(2, 1fr); }
  body.marbourne .mb-shop__bar { justify-content: stretch; }
  body.marbourne .woocommerce-ordering,
  body.marbourne .woocommerce-ordering select { width: 100%; }
}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */

body.marbourne .mb-pdp { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 104px); }

body.marbourne .mb-crumbs {
  display: flex;
  gap: var(--mb-xs);
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-muted);
  padding-bottom: var(--mb-md);
}

body.marbourne .mb-crumbs a { color: var(--mb-muted); }
body.marbourne .mb-crumbs a:hover { color: var(--mb-ink); }
body.marbourne .mb-crumbs span[aria-hidden] { opacity: 0.5; }

body.marbourne .mb-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

/* Gallery stays with the buyer as the detail rows are read. */
body.marbourne .mb-pdp__media { position: sticky; top: calc(var(--mb-header-h) + 16px); }

body.marbourne .mb-pdp__media .woocommerce-product-gallery__image {
  background: var(--mb-surface);
  border-radius: var(--mb-r);
  overflow: hidden;
}

body.marbourne .mb-pdp__media img { border-radius: var(--mb-r); }

body.marbourne .mb-pdp__media .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--mb-xs);
  margin-top: var(--mb-xs);
  list-style: none;
  padding: 0;
}

body.marbourne .mb-pdp__media .flex-control-thumbs li { margin: 0; }

body.marbourne .mb-pdp__media .flex-control-thumbs img {
  background: var(--mb-surface);
  border-radius: var(--mb-r);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .mb-pdp__media .flex-control-thumbs img.flex-active,
body.marbourne .mb-pdp__media .flex-control-thumbs img:hover { opacity: 1; }

body.marbourne .mb-pdp__title {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

body.marbourne .mb-pdp__price {
  margin-top: var(--mb-sm);
  font-size: 1.25rem;
  color: var(--mb-ink);
  font-variant-numeric: tabular-nums;
}

body.marbourne .mb-pdp__price del { opacity: 0.5; margin-right: 8px; }
body.marbourne .mb-pdp__price ins { text-decoration: none; color: var(--mb-accent); }

body.marbourne .mb-pdp__lede {
  margin-top: var(--mb-md);
  color: var(--mb-muted);
  line-height: 1.6;
  max-width: 46ch;
}

body.marbourne .mb-pdp__buy { margin-top: var(--mb-lg); }

/* --- WooCommerce add-to-cart form ------------------------------------------ */

body.marbourne .mb-pdp__buy .quantity { display: inline-flex; }

body.marbourne .mb-pdp__buy .quantity input[type='number'],
body.marbourne .mb-pdp__buy input.qty {
  width: 76px;
  min-height: 52px;
  padding: 0 10px;
  text-align: center;
  background: transparent;
  border: 1px solid var(--mb-line-strong);
  border-radius: var(--mb-r);
  color: var(--mb-ink);
  font-family: var(--mb-font);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

body.marbourne .mb-pdp__buy form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-xs);
  align-items: center;
}

body.marbourne .mb-pdp__buy form.variations_form { display: block; }

body.marbourne .mb-pdp__buy .single_add_to_cart_button {
  flex: 1 1 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border-radius: var(--mb-r);
  background: var(--mb-accent);
  color: var(--mb-bg);
  font-family: var(--mb-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--mb-t-fast) var(--mb-ease),
              transform var(--mb-t-fast) var(--mb-ease);
}

body.marbourne .mb-pdp__buy .single_add_to_cart_button:hover { background: var(--mb-accent-hover); }
body.marbourne .mb-pdp__buy .single_add_to_cart_button:active { transform: translateY(1px); }
body.marbourne .mb-pdp__buy .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }

/* Variation selects */
body.marbourne .mb-pdp__buy table.variations { width: 100%; margin-bottom: var(--mb-md); }
body.marbourne .mb-pdp__buy table.variations th,
body.marbourne .mb-pdp__buy table.variations td { padding: 6px 0; text-align: left; vertical-align: middle; }

body.marbourne .mb-pdp__buy table.variations th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mb-muted);
  width: 34%;
}

body.marbourne .mb-pdp__buy table.variations select {
  width: 100%;
  min-height: 48px;
  padding: 0 36px 0 12px;
  background: transparent;
  border: 1px solid var(--mb-line-strong);
  border-radius: var(--mb-r);
  color: var(--mb-ink);
  font-family: var(--mb-font);
  font-size: 15px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mb-ink) 50%),
    linear-gradient(135deg, var(--mb-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

body.marbourne .mb-pdp__buy .stock { font-size: 13px; color: var(--mb-muted); flex: 1 1 100%; }
body.marbourne .mb-pdp__buy .stock.out-of-stock { color: var(--mb-ink); }

/* --- Assurances ------------------------------------------------------------ */

body.marbourne .mb-pdp__assure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-md);
  margin-top: var(--mb-md);
  padding-top: var(--mb-md);
  border-top: 1px solid var(--mb-line);
  list-style: none;
}

body.marbourne .mb-pdp__assure li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mb-muted);
}

body.marbourne .mb-pdp__assure svg { width: 17px; height: 17px; color: var(--mb-accent); }

body.marbourne .mb-pdp__rows { margin-top: var(--mb-lg); }

body.marbourne .mb-pdp__rows .mb-spec__panel p { margin-bottom: 14px; }
body.marbourne .mb-pdp__rows .mb-spec__panel h2,
body.marbourne .mb-pdp__rows .mb-spec__panel h3 {
  font-size: 1rem;
  margin: 16px 0 6px;
}
body.marbourne .mb-pdp__rows .mb-spec__panel ul { padding-left: 18px; list-style: disc; margin-bottom: 14px; }
body.marbourne .mb-pdp__rows .mb-spec__panel li { margin-bottom: 4px; }

body.marbourne .mb-specs { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--mb-md); }
body.marbourne .mb-specs dt { font-weight: 500; color: var(--mb-ink); }
body.marbourne .mb-specs dd { margin: 0; }

/* --- Related products ------------------------------------------------------ */

body.marbourne .related.products {
  max-width: var(--mb-max);
  margin: clamp(56px, 7vw, 104px) auto 0;
  padding-inline: var(--mb-gutter);
}

body.marbourne .related.products > h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--mb-md);
}

body.marbourne .related.products ul.products,
body.marbourne .related.products .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px) clamp(12px, 1.6vw, 24px);
  list-style: none;
  padding: 0;
}

body.marbourne .mb-pdp__reviews { margin-top: clamp(48px, 6vw, 88px); }

@media (max-width: 900px) {
  body.marbourne .mb-pdp__grid { grid-template-columns: 1fr; gap: var(--mb-md); }
  body.marbourne .mb-pdp__media { position: static; }
  body.marbourne .related.products ul.products,
  body.marbourne .related.products .products { grid-template-columns: repeat(2, 1fr); }

  /* The purchase action follows the buyer down a long mobile page. */
  body.marbourne .mb-pdp__buy .single_add_to_cart_button { flex: 1 1 100%; }
}

/* The accent fill works for the short rows on the homepage. A full product
   description inside it becomes a heavy block of reversed body copy, so on the
   product page the open row stays on the page ground and the accent moves to
   the numeral and a left rule instead. */
body.marbourne .mb-pdp__rows .mb-spec__row[data-open='true'] {
  background: transparent;
  color: var(--mb-ink);
  box-shadow: inset 2px 0 0 var(--mb-accent);
}

body.marbourne .mb-pdp__rows .mb-spec__row[data-open='true'] .mb-spec__n {
  color: var(--mb-accent);
  opacity: 1;
}

body.marbourne .mb-pdp__rows .mb-spec__row[data-open='true'] .mb-spec__panel {
  color: var(--mb-muted);
  opacity: 1;
}

body.marbourne .mb-pdp__rows .mb-spec__btn { padding-left: var(--mb-md); }
body.marbourne .mb-pdp__rows .mb-spec__panel { padding-left: calc(44px + var(--mb-md)); }
body.marbourne .mb-pdp__rows .mb-spec__panel h3 { color: var(--mb-ink); }
body.marbourne .mb-pdp__rows .mb-spec__panel strong { color: var(--mb-ink); }