/* ==========================================================================
   Mushroombox storefront - mobile first
   Tokens > base > layout > components > pages > Zen Cart core markup
   ========================================================================== */

:root {
  --ink: #2b1c12;
  --bark: #3a2315;
  --wood: #7a3a17;
  --rust: #a8481b;
  --rust-dark: #8c3b14;
  --moss: #4d6b2c;
  --moss-soft: #e8efdc;
  --cream: #f6e6bd;
  --bg: #faf6ee;
  --surface: #ffffff;
  --sunk: #f3ece0;
  --line: #e4d9c8;
  --line-strong: #cdbfa9;
  --muted: #6b5848;
  --danger: #a3271b;
  --danger-soft: #fbe9e6;
  --success-soft: #e8efdc;
  --warn-soft: #fff4d6;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(43, 28, 18, .06), 0 4px 16px rgba(43, 28, 18, .06);
  --gutter: 16px;
  --max: 1200px;
  --header-h: 60px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
html.mb-lock { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
img { border: 0; }
a { color: var(--wood); text-underline-offset: .15em; }
a:hover { color: var(--rust); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--bark); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
h2 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); }
h3 { font-size: 1.1rem; }
/* account, sign-in and checkout pages: plainer, smaller headings */
#loginBody h1, #createaccountBody h1, #passwordforgottenBody h1, #accountBody h1, [id^="account"] h1, [id^="address"] h1,
.mb--checkout h1, #shoppingcartBody h1, #contactusBody h1, #sitemapBody h1, #advancedsearchBody h1 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.mb--checkout h2, #loginBody h2, #createaccountBody h2, [id^="account"] h2 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
address { font-style: normal; }
small, .smallText { font-size: .875rem; }

.mb-sr, .hiddenField, legend.mb-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mb-skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--bark); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm);
}
.mb-skip:focus { top: 8px; color: #fff; }

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

/* ---------- buttons ---------- */
.mb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.1rem;
  border: 1.5px solid transparent; border-radius: 10px;
  font: 600 .95rem/1.2 var(--font-sans); text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.mb-btn--primary { background: var(--rust); border-color: var(--rust); color: #fff; }
.mb-btn--primary:hover { background: var(--rust-dark); border-color: var(--rust-dark); color: #fff; }
.mb-btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--bark); }
.mb-btn--ghost:hover { border-color: var(--bark); color: var(--bark); }
.mb-btn--disabled { opacity: .6; cursor: default; }
.mb-btn--lg { min-height: 52px; padding: .75rem 1.4rem; font-size: 1.02rem; }
.mb-btn--block { width: 100%; }

/* Zen Cart image buttons (SVGs from buttons/english) */
input[type="image"], .buttonRow img, img.button, a > img[src*="/buttons/"] {
  height: 44px; width: auto; vertical-align: middle; cursor: pointer;
}
img[src*="/buttons/"][src*="small_"], input[src*="small_"] { height: 34px; }
.buttonRow { margin: 1rem 0; }
.buttonRow.forward, .forward { float: right; }
.buttonRow.back, .back { float: left; }
.clearBoth, br.clearBoth { clear: both; display: block; height: 0; }
.mb-main .buttonRow.forward + .buttonRow.back, .mb-main .buttonRow.back + .buttonRow.forward { margin-top: 1rem; }

/* ---------- top strip & header ---------- */
.mb-topbar { background: var(--bark); color: var(--cream); font-size: .8rem; text-align: center; }
.mb-topbar .mb-container { padding-top: .45rem; padding-bottom: .45rem; }

.mb-header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.mb-header__row {
  display: grid; align-items: center; column-gap: 4px; row-gap: 8px;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas: "menu logo utility" "search search search";
  padding-top: 8px; padding-bottom: 10px;
}
.mb--checkout .mb-header__row { grid-template-columns: 1fr auto; grid-template-areas: "logo secure"; padding-top: 12px; padding-bottom: 12px; }
.mb-menu-toggle { grid-area: menu; }
.mb-logo { grid-area: logo; display: inline-flex; justify-self: start; padding: 2px 4px; }
.mb-logo img { display: block; height: 34px; width: auto; }
.mb-search { grid-area: search; }
.mb-utility { grid-area: utility; display: flex; gap: 2px; }
.mb-secure { grid-area: secure; margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--moss); font-weight: 600; }
.mb-secure svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.mb-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 44px; height: 44px; padding: 0 8px;
  background: none; border: 0; border-radius: 10px; color: var(--bark); text-decoration: none; cursor: pointer;
  font: 600 .875rem/1 var(--font-sans);
}
.mb-iconbtn:hover { background: var(--sunk); color: var(--bark); }
.mb-iconbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mb-utility__label { display: none; }
.mb-utility__account { display: none; }
.mb-badge {
  position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--rust); color: #fff; font-size: .7rem; line-height: 19px; text-align: center;
}

.mb-search { position: relative; display: flex; }
.mb-search__input {
  flex: 1; min-width: 0; height: 44px; padding: 0 48px 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--bg);
  font: 1rem var(--font-sans); color: var(--ink);
}
.mb-search__input:focus { outline: none; border-color: var(--wood); background: #fff; box-shadow: 0 0 0 3px rgba(168, 72, 27, .15); }
.mb-search__btn {
  position: absolute; right: 2px; top: 2px; width: 40px; height: 40px;
  border: 0; border-radius: 8px; background: none; color: var(--bark); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mb-search__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* menu: drawer on small screens */
.mb-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 360px);
  background: var(--surface); box-shadow: 4px 0 24px rgba(0, 0, 0, .15);
  transform: translateX(-102%); transition: transform .22s ease; visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;
}
.mb-nav--open { transform: none; visibility: visible; }
.mb-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(43, 28, 18, .45); }
.mb-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px var(--gutter); border-bottom: 1px solid var(--line); }
.mb-nav__title { font: 700 1.1rem var(--font-serif); color: var(--bark); }
.mb-nav ul { list-style: none; margin: 0; padding: 0; }
.mb-nav__cats { padding: 8px 0; }
.mb-nav__cats a, .mb-nav__extra a {
  display: flex; align-items: center; min-height: 48px; padding: .5rem var(--gutter);
  color: var(--bark); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--sunk);
}
.mb-nav__cats a[aria-current] { color: var(--rust); box-shadow: inset 3px 0 0 var(--rust); }
.mb-nav__extra { padding: 8px 0 24px; background: var(--bg); }
.mb-nav__extra a { font-weight: 400; min-height: 44px; }
.mb-nav__subhead { font: 600 .75rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 16px var(--gutter) 6px; }
.mb-nav__account { margin-top: 12px !important; }

/* ---------- breadcrumb, alerts ---------- */
.mb-main { display: block; padding: 16px 0 48px; outline: none; }
/* Zen Cart floats buttons and boxes; keep them inside the content area */
.mb-main > .mb-container, .centerColumn, fieldset, .floatingBox { display: flow-root; }
.mb-breadcrumb { font-size: .85rem; color: var(--muted); margin: 0 0 16px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.mb-breadcrumb::-webkit-scrollbar { display: none; }
.mb-breadcrumb a { color: var(--muted); }
.mb-breadcrumb__sep { margin: 0 .45em; opacity: .6; }
.mb-alerts { padding-top: 12px; }

.messageStackError, .messageStackCaution, .messageStackSuccess, .messageStackWarning, .alert-box {
  padding: .8rem 1rem; margin: 0 0 12px; border-radius: var(--radius-sm); border: 1px solid; font-size: .95rem;
}
.messageStackError, .messageStackWarning { background: var(--danger-soft); border-color: #efc2bb; color: var(--danger); }
.messageStackCaution { background: var(--warn-soft); border-color: #f0dc9d; color: #6b4d00; }
.messageStackSuccess { background: var(--success-soft); border-color: #c8d8b0; color: #33491a; }
.messageStackError img, .messageStackCaution img, .messageStackSuccess img, .messageStackWarning img { vertical-align: middle; margin-right: 6px; }
.alert { color: var(--danger); }
.important, .alert.bold { font-weight: 600; }

/* ---------- shared blocks ---------- */
.mb-eyebrow { font: 600 .8rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rust); margin: 0 0 .75rem; }
.mb-section { margin: 40px 0 0; }
.mb-section__title { margin-bottom: 16px; }
.mb-page-title { margin-bottom: .4em; }

.mb-prose { max-width: 72ch; text-align: left; }
.mb-prose h2 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
.mb-prose > h2:first-child, .mb-more__body > h2:first-child { margin-top: 0; }
.mb-prose p, .mb-prose li { text-align: left; }

/* highlighted notices from admin text (ALL-CAPS paragraphs) and home-page callouts */
.mb-note, .mb-callout {
  background: var(--warn-soft); border: 1px solid #f0dc9d; border-left: 4px solid var(--rust);
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 1rem; font-weight: 600; color: var(--ink);
}
.mb-note p, .mb-callout p { margin: 0 0 .4em; }
.mb-note p:last-child, .mb-callout p:last-child { margin-bottom: 0; }
.mb-callout { margin: 20px 0 0; font-size: 1rem; }
.mb-callout p + p { font-weight: 400; }

/* festive version of the home-page notice (used when it mentions Christmas) */
.mb-callout--xmas {
  position: relative; display: flex; gap: 14px; align-items: flex-start; overflow: hidden;
  padding: 18px 18px 18px 16px; border: 0; border-left: 5px solid #d33a2c; border-radius: var(--radius);
  background-color: #1f4a2c; color: #f7efdc; font-weight: 400;
}
.mb-callout--xmas .mb-callout__holly { flex: none; width: 46px; height: 46px; margin-top: -2px; }
.mb-callout--xmas .mb-callout__body { position: relative; }
.mb-callout--xmas p { margin: 0 0 .35em; }
.mb-callout--xmas p:first-child { font: 700 1.15rem/1.25 var(--font-serif); letter-spacing: .02em; color: #fff; margin-bottom: .5em; }
.mb-callout--xmas p:first-child strong { font-weight: 700; }
.mb-callout--xmas p:last-child { margin: .6em 0 0; font-size: .92rem; color: #e9dcbd; }
.mb-callout--xmas strong { color: #ffd9a0; }
@media (min-width: 600px) { .mb-callout--xmas { padding: 22px 26px 22px 22px; } .mb-callout--xmas .mb-callout__holly { width: 56px; height: 56px; } }

/* "Read more" for long category descriptions */
.mb-more { margin: .25rem 0 0; }
.mb-more summary { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; font-weight: 600; color: var(--wood); list-style: none; min-height: 44px; }
.mb-more summary::-webkit-details-marker { display: none; }
.mb-more summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.mb-more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.mb-more[open] summary { margin-bottom: .5rem; }

/* home "About" section */
.mb-about__lead { font-size: 1.1rem; max-width: 70ch; margin-bottom: 20px; }
.mb-about__grid { display: grid; gap: 12px; }
.mb-about__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.mb-about__card p { margin: 0; }
.mb-about__small { margin-top: 16px; font-size: .85rem; color: var(--muted); }
.mb-about__small p { margin: 0; }
.mb-prose h3 { margin-top: 1.2em; }
.mb-prose img { border-radius: var(--radius-sm); height: auto !important; }
.mb-prose ul, .mb-prose ol { padding-left: 1.25rem; }
.mb-prose table { border-collapse: collapse; margin: 1rem 0; }
.mb-prose td, .mb-prose th { border: 1px solid var(--line); padding: .4rem .6rem; }
.mb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--sunk); }
.mb-placeholder svg { width: 38%; fill: var(--line-strong); }
.mb-placeholder { position: relative; }
/* Zen Cart's stock "no picture" and "NEW!" graphics in its own boxes (new products, also purchased...) */
img[src$="/no_picture.gif"], img[src$="images/new.jpg"] { content: url("../images/placeholder.svg"); object-fit: cover; background: var(--sunk); }
.mb-newbadge {
  position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px;
  background: var(--rust); color: #fff; font: 700 .72rem/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}

/* hero */
.mb-hero {
  display: grid; gap: 20px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  padding: 24px 20px;
}
.mb-hero__title { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); margin-bottom: .35em; }
.mb-hero__lede { font-size: 1.08rem; color: var(--muted); max-width: 46ch; }
.mb-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mb-hero__actions .mb-btn { flex: 1 1 180px; }
.mb-hero__media { margin: 0 -20px -24px; }
.mb-hero__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mb-greeting { margin: 16px 0 0; font-size: .95rem; color: var(--muted); }

/* category tiles */
.mb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mb-tile {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--bark);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mb-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--rust); transform: translateY(-1px); }
.mb-tile__media { display: block; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: var(--sunk); }
.mb-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-tile__title { font: 600 .95rem/1.3 var(--font-sans); color: inherit; margin: 0; padding: 10px 12px 12px; }

/* Consistent look for mixed product photos: a light grade (calmer saturation, a little contrast) plus a faint warm
   tint over cards, tiles and the hero so flash, daylight and indoor shots sit together. The product page photo
   gets only the mildest grade so colours stay true. Remove this block to switch it off. */
.mb-card__img, .mb-tile__img, .mb-hero__img { filter: saturate(.9) contrast(1.05) brightness(1.02); }
.mb-product__img { filter: saturate(.96) contrast(1.02); }
.mb-card__media, .mb-tile__media, .mb-hero__media { position: relative; }
.mb-card__media::after, .mb-tile__media::after, .mb-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 231, 207, .16), rgba(122, 58, 23, .10)); mix-blend-mode: multiply;
}

/* product pages: the category is shown as a small text link above the title, without Zen Cart's thumbnail */
#categoryIcon { float: none; margin: 0 0 4px; }
#categoryIcon img, #categoryIcon br { display: none; }
#categoryIcon a { font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none; }
#categoryIcon a:hover { color: var(--rust); text-decoration: underline; }

/* "Free" price label (replaces Zen Cart's "It's Free!" graphic) */
.mb-free { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--moss-soft); color: var(--moss); font: 700 1.05rem/1.6 var(--font-sans); }
.mb-card__price .mb-free { font-size: .85rem; padding: 0 10px; }

/* registration product: call-to-action panel in place of a photo */
.mb-product__image--cta { border: 0; background: none; }
.mb-tile--cta-panel { min-height: 260px; border-radius: var(--radius); cursor: default; }
.mb-tile--cta-panel:hover { background-color: var(--rust); border-color: var(--rust); transform: none; box-shadow: none; }
.mb-card__cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; padding: 12px; text-align: center; background: var(--rust); color: #fff; font: 800 .9rem/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .03em; }
.mb-card__cta svg { width: 38px; height: 38px; fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

/* "Register your Mushroom Box" call-to-action card (same grid cell as a category tile) */
.mb-tile--cta {
  justify-content: center; align-items: center; gap: 8px; padding: 18px 14px; text-align: center;
  background: var(--rust); border-color: var(--rust); color: #fff;
  background-image: radial-gradient(circle at 100% 0, rgba(255, 255, 255, .13) 0 26%, transparent 27%);
}
.mb-tile--cta:hover { background-color: var(--rust-dark); border-color: var(--rust-dark); color: #fff; }
.mb-tile--cta__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.mb-tile--cta__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.mb-tile--cta__title { font: 800 1rem/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .03em; }
.mb-tile--cta__text { font-size: .82rem; line-height: 1.35; color: var(--cream); }
@media (min-width: 600px) { .mb-tile--cta__title { font-size: 1.12rem; } .mb-tile--cta__text { font-size: .88rem; } }

/* product cards */
.mb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mb-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.mb-card__media { display: block; aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; background: var(--sunk); }
.mb-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-card__body { padding: 10px 12px 4px; flex: 1; }
.mb-card__title { font: 600 .95rem/1.35 var(--font-sans); margin: 0 0 6px; }
.mb-card__title a { color: var(--bark); text-decoration: none; }
.mb-card__title a:hover { color: var(--rust); text-decoration: underline; }
.mb-card__price { font-weight: 700; color: var(--ink); }
.mb-card__action { padding: 8px 12px 12px; }
.mb-card__action .mb-btn { width: 100%; min-height: 42px; font-size: .9rem; padding: .45rem .6rem; }

/* prices (Zen Cart markup) */
.normalprice { text-decoration: line-through; color: var(--muted); font-weight: 400; margin-right: .3em; }
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale { color: var(--rust); font-weight: 700; }
.productPriceDiscount { display: block; font-size: .85rem; color: var(--moss); font-weight: 600; }
.productFreePrice { color: var(--moss); }

/* listing */
.mb-listing__head { margin-bottom: 20px; }
.mb-listing__intro { color: var(--ink); }
.mb-listing__count { font-size: .9rem; color: var(--muted); margin: 0 0 12px; }
.mb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .9rem; }
.mb-filter .inputLabel { width: auto; margin: 0; font-weight: 600; }
.mb-filter select { width: auto; min-width: 0; flex: 1 1 160px; max-width: 280px; }
.mb-empty { padding: 32px 16px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

.mb-pagination, .navSplitPagesLinks { margin: 24px 0 0; text-align: center; }
.mb-pagination ul, .navSplitPagesLinks ul { list-style: none; display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; justify-content: center; }
.mb-pagination li, .navSplitPagesLinks li { display: block; }
.mb-pagination a, .mb-pagination .current, .navSplitPagesLinks a, .navSplitPagesLinks .current, .navSplitPagesLinks strong {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--bark); text-decoration: none; font-weight: 600;
}
.mb-pagination .current, .navSplitPagesLinks .current, .navSplitPagesLinks strong.current { background: var(--bark); border-color: var(--bark); color: #fff; }
.navSplitPagesResult { font-size: .9rem; color: var(--muted); }

/* product page */
.mb-product__top { display: grid; gap: 20px; }
.mb-product__image { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mb-product__img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: var(--surface); }
.mb-product__image--empty { aspect-ratio: 1 / 1; }
.mb-product__title { margin-bottom: .3em; }
.mb-product__reviewlink { font-size: .9rem; }
.mb-product__price { font: 700 1.6rem/1.2 var(--font-sans); color: var(--ink); margin: 8px 0 10px; }
.mb-product__from, .mb-product__onetime { display: block; font-size: .85rem; font-weight: 400; color: var(--muted); }
.mb-stock { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; margin: 0 0 16px; }
.mb-stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.mb-stock--in { color: var(--moss); }
.mb-stock--out { color: var(--danger); }
.mb-product__options { margin: 0 0 16px; }
.mb-product__buy { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 12px; }
.mb-product__incart { margin: 0; font-size: .9rem; color: var(--moss); font-weight: 600; }
.mb-product__shipnote, .mb-product__ask, .mb-product__meta { font-size: .9rem; color: var(--muted); margin: 14px 0 0; }
.mb-product__section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.mb-product__reviews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.mb-product__freeship { margin-bottom: 12px; }

.mb-qty { display: grid; gap: 6px; }
.mb-qty__label { font-weight: 600; font-size: .9rem; }
.mb-qty__control { display: inline-flex; align-items: stretch; width: max-content; border: 1.5px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: #fff; }
.mb-qty__step { width: 44px; border: 0; background: var(--sunk); color: var(--bark); font-size: 1.25rem; cursor: pointer; }
.mb-qty__step:hover { background: var(--line); }
.mb-qty__control .mb-qty__input { width: 64px; height: 44px; border: 0; border-radius: 0; text-align: center; font-weight: 600; padding: 0; }
.mb-qty__note { margin: 0; font-size: .85rem; color: var(--muted); }

.mb-specs { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); max-width: 560px; }
.mb-specs div { display: grid; grid-template-columns: 40% 1fr; border-top: 1px solid var(--line); }
.mb-specs div:first-child { border-top: 0; }
.mb-specs dt, .mb-specs dd { margin: 0; padding: .6rem .8rem; }
.mb-specs dt { background: var(--sunk); font-weight: 600; font-size: .9rem; }

/* attributes (Zen Cart markup) */
#productAttributes { display: grid; gap: 14px; }
#attribsOptionsText { font-weight: 700; font-size: 1rem; margin: 0; }
.wrapperAttribsOptions { margin: 0; padding: 0; border: 0; }
.wrapperAttribsOptions .optionName, .wrapperAttribsOptions h4.optionName, .wrapperAttribsOptions legend.optionName {
  float: none; display: block; font: 600 .9rem/1.3 var(--font-sans); margin: 0 0 6px; padding: 0; color: var(--bark);
}
.wrapperAttribsOptions .back { float: none; }
.wrapperAttribsOptions select { width: 100%; }
.wrapperAttribsOptions input[type="radio"] + label, .wrapperAttribsOptions input[type="checkbox"] + label { display: inline; margin-left: .35rem; }
.wrapperAttribsOptions br { display: none; }
.wrapperAttribsOptions input[type="radio"], .wrapperAttribsOptions input[type="checkbox"] { margin: .45rem 0; }
.attribImg { display: inline-block; margin: 4px; }
.attributesComments { font-size: .85rem; color: var(--muted); }
.wrapperAttribsQtyPrices, #productQuantityDiscounts { margin: 12px 0; font-size: .9rem; }
#productQuantityDiscounts table, .wrapperAttribsQtyPrices table { width: 100%; border-collapse: collapse; background: var(--surface); }
#productQuantityDiscounts td, .wrapperAttribsQtyPrices td { border: 1px solid var(--line); padding: .35rem .5rem; text-align: center; }

/* additional images */
#productAdditionalImages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#productAdditionalImages .additionalImages { width: auto !important; float: none !important; }
#productAdditionalImages img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
#productAdditionalImages br, #productAdditionalImages .imgLink { display: none; }

/* previous / next */
.navNextPrevWrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 28px 0 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; }
.navNextPrevWrapper .navNextPrevCounter { flex: 1 1 100%; text-align: center; color: var(--muted); margin: 0; }
.navNextPrevWrapper .navNextPrevList { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 8px; }
.navNextPrevWrapper br { display: none; }

/* centre boxes: featured / specials / new / also purchased */
.centerBoxWrapper { margin: 40px 0 0; }
.centerBoxHeading { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); color: var(--bark); margin: 0 0 16px; }
.centerBoxWrapper { display: flex; flex-wrap: wrap; gap: 12px; }
.centerBoxWrapper > .centerBoxHeading { flex: 1 1 100%; margin-bottom: 4px; }
.centerBoxWrapper > br { display: none; }
.centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsNew, .centerBoxContentsAlsoPurch, .centerBoxContents, .centerBoxContentsProducts {
  width: calc(50% - 6px) !important; float: none !important; margin: 0 !important;
  padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-align: left; font-size: .92rem;
}
.centerBoxWrapper img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; }
.centerBoxWrapper a { color: var(--bark); font-weight: 600; text-decoration: none; }

/* ---------- forms (all Zen Cart pages) ---------- */
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 20px; background: var(--surface); min-width: 0; }
legend { font: 700 1.05rem var(--font-serif); color: var(--bark); padding: 0 6px; }
label, .inputLabel { display: block; font-weight: 600; font-size: .9rem; margin: 10px 0 4px; }
.inputLabel { width: auto; float: none; }
label.checkboxLabel, label.radioButtonLabel, .checkboxLabel, .radioButtonLabel { display: inline; font-weight: 400; margin: 0 0 0 .4rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input:not([type]), select, textarea {
  width: 100%; max-width: 100%; min-height: 44px; padding: .55rem .75rem;
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink);
  font: 1rem var(--font-sans);
}
textarea { min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--wood); box-shadow: 0 0 0 3px rgba(168, 72, 27, .15); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--rust); vertical-align: middle; }
input[type="submit"], input[type="button"], button[type="submit"]:not(.mb-btn):not(.mb-search__btn) {
  min-height: 44px; padding: .55rem 1.1rem; border: 0; border-radius: 10px; background: var(--rust); color: #fff;
  font: 600 .95rem var(--font-sans); cursor: pointer;
}
.alert, span.alert, .inputRequirement { color: var(--danger); font-size: .85rem; }
.inputRequirement { margin-left: .25rem; }
.mb-main fieldset br { line-height: .5; }
.mb-main fieldset br.clearBoth { line-height: 0; }
.mb-main .information, .mb-main .content { margin-bottom: 1rem; }

/* ---------- tables (cart, account, checkout) ---------- */
.mb-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1rem; }
.mb-main table { border-collapse: collapse; width: 100%; }
.mb-main th, .mb-main .tableHeading th, .mb-main .tableHeading td { text-align: left; font-size: .85rem; color: var(--muted); font-weight: 600; padding: .5rem; border-bottom: 1.5px solid var(--line-strong); }
.mb-main td { padding: .6rem .5rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.mb-main #indexDefault td, .mb-main .mb-prose td { border-bottom: 0; }

/* shopping cart: stacked rows on phones */
#shoppingCartDefault h1 { margin-bottom: .6em; }
#cartContentsDisplay { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
#cartContentsDisplay .cartTotalDisplay { text-align: right; white-space: nowrap; }
#shoppingCartDefault #cartContentsDisplay .tableHeading { display: none; }
#shoppingCartDefault #cartContentsDisplay tr:not(.tableHeading) {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px; border-bottom: 1px solid var(--line);
}
#shoppingCartDefault #cartContentsDisplay td { display: block; padding: 0; border: 0; }
#shoppingCartDefault #cartContentsDisplay .cartProductDisplay { grid-column: 1 / -1; }
#shoppingCartDefault #cartContentsDisplay .cartProductDisplay a { display: flex; gap: 12px; align-items: flex-start; color: var(--bark); text-decoration: none; }
#shoppingCartDefault #cartContentsDisplay .cartImage { float: none; flex: none; width: 72px; }
#shoppingCartDefault #cartContentsDisplay .cartImage img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
#shoppingCartDefault #cartContentsDisplay .cartProdTitle { font-weight: 600; }
#shoppingCartDefault #cartContentsDisplay .cartQuantity input[type="text"] { width: 72px; text-align: center; }
#shoppingCartDefault #cartContentsDisplay .cartQuantity { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#shoppingCartDefault #cartContentsDisplay .cartQuantityUpdate { align-self: center; }
#shoppingCartDefault #cartContentsDisplay .cartUnitDisplay { display: none; }
#shoppingCartDefault #cartContentsDisplay .cartTotalDisplay { font-weight: 700; text-align: right; align-self: center; }
#shoppingCartDefault #cartContentsDisplay .cartRemoveItemDisplay { text-align: right; align-self: center; }
.cartAttribsList { font-size: .85rem; color: var(--muted); margin: 4px 0 0; padding-left: 1rem; }
.cartTotalsDisplay { font-size: .9rem; }
#shoppingCartDefault .buttonRow { margin: 8px 0; }

/* basket lines: photo + name, then quantity / total / remove on one row (side by side from 600px) */
#shoppingCartDefault .mb-lines { list-style: none; margin: 0; padding: 0; display: block; }
.mb-line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.mb-line:last-child { border-bottom: 0; }
.mb-line__img img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.mb-line__name { font-weight: 600; color: var(--bark); text-decoration: none; line-height: 1.35; }
.mb-line__name:hover { color: var(--rust); text-decoration: underline; }
.mb-line__each { display: block; margin-top: 2px; font-size: .85rem; color: var(--muted); }
.mb-line .cartAttribsList { margin: 4px 0 0; }
.mb-line__controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.mb-line__qty input[type="text"], .mb-line__qty input[type="number"] { width: 72px; text-align: center; font-weight: 600; }
.mb-line__fixedqty { font-weight: 600; }
.mb-qty__control--sm .mb-qty__step { width: 40px; font-size: 1.15rem; }
.mb-qty__control--sm .mb-qty__step:disabled { color: var(--line-strong); cursor: default; background: var(--sunk); }
.mb-line__qty .mb-qty__control input[type="text"] { width: 48px; height: 42px; min-height: 0; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
/* with JavaScript the basket saves itself, so the manual button is replaced by a status line */
.mb-cart-auto .mb-cart__update .mb-btn { display: none; }
.mb-cart__status { display: inline-block; min-height: 1.4em; font-size: .88rem; color: var(--muted); }
#shoppingCartForm.is-updating .mb-lines { opacity: .55; pointer-events: none; transition: opacity .15s; }
.mb-line__total { margin-left: auto; font-weight: 700; white-space: nowrap; }
.mb-line__removebtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; }
.mb-line__removebtn:hover { background: var(--sunk); }
.mb-line__removebtn img { width: 22px; height: 22px; }
.mb-line__removecheck { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .85rem; font-weight: 400; }
.mb-line .mb-cart__minunits { grid-column: 1 / -1; margin: 0; }
@media (min-width: 600px) {
  .mb-line { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px 16px; padding: 16px; }
  .mb-line__img img { width: 72px; height: 72px; }
  .mb-line__controls { grid-column: auto; }
  .mb-line__total { min-width: 70px; text-align: right; }
}

/* basket layout: items + summary panel */
.mb-cart { display: grid; gap: 20px; align-items: start; }
.mb-cart__minunits { display: block; font-size: .8rem; color: var(--muted); }
.mb-cart__update { margin: 12px 0 0; }
.mb-cart__note { margin-top: 16px; font-size: .92rem; color: var(--muted); }
.mb-cart__note p { margin: 0 0 .5em; }
.mb-cart__summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; }
.mb-cart__subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.mb-cart__subtotal strong { font-size: 1.35rem; }
.mb-cart__meta { margin: -6px 0 0; font-size: .82rem; color: var(--muted); font-weight: 400; }
.mb-cart__or { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: .85rem; }
.mb-cart__or::before, .mb-cart__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
#PPECbutton { margin: 0; }
.mb-paypal {
  display: flex; align-items: center; justify-content: center; gap: .35em; width: 100%; min-height: 52px; padding: .5rem 1rem;
  background: #ffc439; border-radius: 26px; color: #2c2e2f; text-decoration: none; font: 600 .95rem/1 var(--font-sans);
}
.mb-paypal:hover { background: #f2ba36; color: #2c2e2f; }
.mb-paypal__brand { font: italic 800 1.3rem/1 Verdana, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.mb-paypal__brand b:first-child { color: #003087; }
.mb-paypal__brand b:last-child { color: #009cde; }
.mb-cart__links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: .9rem; }
.mb-cart__links a { display: inline-flex; min-height: 36px; align-items: center; }
@media (min-width: 960px) {
  .mb-cart { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .mb-cart__aside { position: sticky; top: 140px; }
}

/* box headings sit inside their box instead of on the border */
fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-size: 1.02rem; line-height: 1.3; }
fieldset > legend + * { clear: both; }

/* ---------- checkout steps 1-3 ---------- */
.mb--checkout .centerColumn h2 { margin: 22px 0 8px; }
.mb--checkout .centerColumn h1 + h2 { margin-top: 6px; }
/* address card with its "Change address" button on the right */
#checkoutShipping #checkoutShipto, #checkoutPayment #checkoutBillto { display: flex !important; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 12px; }
#checkoutShipping #checkoutShipto .buttonRow, #checkoutPayment #checkoutBillto .buttonRow { float: none; margin: 0; flex: none; }
#checkoutShipto .mb-btn, #checkoutBillto .mb-btn { min-height: 40px; padding: .4rem .8rem; font-size: .88rem; }
/* step 3: billing/payment and delivery as two cards, heading + Edit on the top row */
#checkoutConfirmDefault #checkoutBillto, #checkoutConfirmDefault #checkoutShipto {
  float: none; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 14px;
}
#checkoutConfirmDefault #checkoutBillto > *, #checkoutConfirmDefault #checkoutShipto > * { grid-column: 1 / -1; }
#checkoutConfirmDefault #checkoutBillto > h2, #checkoutConfirmDefault #checkoutShipto > h2 { grid-column: 1; grid-row: 1; margin: 0 0 8px; font-size: 1.05rem; }
#checkoutConfirmDefault #checkoutBillto > .buttonRow, #checkoutConfirmDefault #checkoutShipto > .buttonRow { grid-column: 2; grid-row: 1; margin: 0; }
#checkoutConfirmDefault h3 { font: 600 .9rem var(--font-sans); margin: 12px 0 2px; color: var(--muted); }
#checkoutConfirmDefault h4 { font: 600 .95rem var(--font-sans); margin: 0 0 6px; }
#checkoutConfirmDefault #checkoutBillto .important { font-size: .88rem; font-weight: 400; color: var(--muted); line-height: 1.5; }
#checkoutConfirmDefault hr { margin: 18px 0; }
#checkoutConfirmDefault .buttonRow.forward:has(.mb-btn--small-edit) { margin: 0 0 10px; }
@media (min-width: 960px) {
  #checkoutConfirmDefault #checkoutBillto, #checkoutConfirmDefault #checkoutShipto { display: inline-grid; width: calc(50% - 8px); vertical-align: top; }
  #checkoutConfirmDefault #checkoutBillto { margin-right: 12px; }
}
/* the "your order will be shipped to the address at the left..." note: plain help text, not a box */
.mb--checkout .floatingBox.important.forward { background: none; border: 0; padding: 0; margin: -6px 0 16px; font-weight: 400; font-size: .88rem; color: var(--muted); }
#checkoutShippingContentChoose, .mb--checkout fieldset.payment > p.important { font-weight: 400; color: var(--muted); font-size: .92rem; }
/* shipping quotes and payment methods: one tidy row each */
.mb--checkout fieldset .important.forward { float: right; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.mb--checkout fieldset .checkboxLabel, .mb--checkout fieldset .radioButtonLabel { display: inline-flex; align-items: center; min-height: 44px; margin-left: .5rem; font-weight: 600; }
/* payment methods: radio | label, one per row; anything else a module outputs spans the full width */
.mb--checkout fieldset.payment { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: center; }
.mb--checkout fieldset.payment > * { grid-column: 1 / -1; }
.mb--checkout fieldset.payment > input[type="radio"] { grid-column: 1; margin: 0; }
.mb--checkout fieldset.payment > input[type="radio"] + label { grid-column: 2; margin: 0; padding: 6px 0; }
.mb--checkout fieldset.payment > br { display: none; }
/* bottom of each step: full-width button, then the "Continue to step x" hint */
.mb--checkout .buttonRow { float: none !important; margin: 18px 0 0; }
.mb--checkout form > .buttonRow.forward .mb-btn, .mb--checkout #paymentSubmit .mb-btn { width: 100%; min-height: 52px; font-size: 1.02rem; }
.mb--checkout form > .buttonRow.back { margin-top: 8px; font-size: .85rem; color: var(--muted); text-align: center; }
.mb--checkout form > .buttonRow.back strong { font-weight: 600; color: var(--ink); }
@media (min-width: 960px) {
  .mb--checkout form > .buttonRow.forward, .mb--checkout #paymentSubmit { text-align: right; }
  .mb--checkout form > .buttonRow.forward .mb-btn, .mb--checkout #paymentSubmit .mb-btn { width: auto; min-width: 300px; }
  .mb--checkout form > .buttonRow.back { text-align: right; }
}

/* PayPal as a payment option (replaces PayPal's old hosted image) */
.mb-paypal-mark { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-paypal-mark .mb-paypal__brand { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 14px; background: #ffc439; font-size: 1.05rem; }
.mb-paypal-mark__text { font-weight: 400; font-size: .85rem; color: var(--muted); }

/* change-address pages */
.mb-addr__current { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 20px; }
.mb-addr__current h2 { margin: 0 0 6px !important; font-size: 1rem; }
.mb-addr__current address { line-height: 1.6; }
.mb-addr__hint { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.mb-addr__form { margin: 0 0 20px; }
.mb-addr__form > .mb-btn { margin-top: 4px; }
.mb-addr__book { display: grid; gap: 8px; }
.mb-addr__option { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400 !important; }
.mb-addr__option.is-selected, .mb-addr__option:has(input:checked) { border-color: var(--rust); background: #fdf4ee; }
.mb-addr__option input { margin-top: 2px; flex: none; }
.mb-addr__optiontext { display: grid; gap: 2px; font-size: .92rem; }
.mb-addr__or { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; color: var(--muted); font-size: .9rem; }
.mb-addr__or::before, .mb-addr__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.mb-addr__back { margin: 8px 0 0; font-weight: 600; }
@media (min-width: 960px) { .mb-addr { max-width: 640px; } .mb-addr__form > .mb-btn { width: auto; min-width: 280px; } }

/* checkout & account panels */
.floatingBox { float: none !important; width: auto !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 16px; }
.moduleRow, .moduleRowSelected, .moduleRowOver { padding: 8px; border-radius: var(--radius-sm); }
.moduleRowSelected { background: var(--moss-soft); }
.ccinfo { margin: 4px 0; }
#checkoutConfirmDefault .cartTableDisplay, #checkoutConfirmDefault table, #orderTotals { width: 100%; }
#orderTotals, .orderTotals { margin-top: 12px; }
/* order-total rows: Zen Cart outputs amount then label, both floated right */
div:has(> .totalBox):has(> .lineTitle) { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
div:has(> .totalBox):has(> .lineTitle) > .totalBox, div:has(> .totalBox):has(> .lineTitle) > .lineTitle { float: none; padding: 0; }
div:has(> .totalBox) + br.clearBoth { display: none; }
#ottotal, #ot_total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 1.1rem; }
.lineTitle, .totalBox { padding: 4px 0; }
.lineTitle { text-align: left; color: var(--muted); }
.totalBox { font-weight: 700; text-align: right; white-space: nowrap; }
.amount { text-align: right; }
.productsListingHeading, h2#checkoutShippingHeading, h2.centerBoxHeading { margin-top: 0; }
#checkoutSuccessHeading, #checkoutSuccessOrderNumber { text-align: left; }
.accountTotalDisplay, .accountTaxDisplay { text-align: right; }
#accountLinksWrapper ul, #myAccountGen ul, #myAccountNotify ul, .accountLinkList { padding-left: 1.2rem; }

/* EZ-pages, define pages, site map, reviews */
#ezPageDefault, #shippingInfo, #privacy, #conditions, #siteMap, #contactUsDefault { max-width: 820px; }
#ezPageDefault h1, #shippingInfo h1, #privacy h1, #conditions h1 { margin-bottom: .6em; }
#ezPageDefault img { height: auto !important; max-width: 100%; border-radius: var(--radius-sm); }
#siteMapList ul { padding-left: 1.2rem; }
.reviewsDefault, #reviewsDefault .productReviewsDefaultReviewer { font-size: .92rem; }
.reviewsDefault hr { margin: 1rem 0; }

/* ---------- footer ---------- */
.mb-footer { background: var(--bark); color: #eadfca; margin-top: 24px; font-size: .95rem; }
.mb-footer a { color: #f4e9d3; text-decoration: none; }
.mb-footer a:hover { color: #fff; text-decoration: underline; }
.mb-usps { background: var(--sunk); color: var(--ink); border-top: 1px solid var(--line); }
.mb-usps__list { list-style: none; display: grid; gap: 16px; margin: 0 auto; padding-top: 24px; padding-bottom: 24px; }
.mb-usp { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--rust); }
.mb-usp__title { font: 700 1rem var(--font-serif); color: var(--bark); }
.mb-usp__text { font-size: .9rem; color: var(--muted); }
.mb-footer__grid { display: grid; gap: 28px; padding-top: 36px; padding-bottom: 28px; }
.mb-footer__logo { display: inline-block; width: 230px; margin-bottom: 12px; --logo-ink: #f6e6bd; --logo-accent: #e3a35b; --logo-wood: #a14f22; }
.mb-footer__logo svg { display: block; width: 100%; height: auto; }
.mb-footer__brand p { color: #d9cbb2; max-width: 40ch; }
.mb-footer__address { line-height: 1.7; color: #d9cbb2; }
.mb-footer__heading { font: 600 .8rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #c9b48f; margin: 0 0 12px; }
.mb-footer__col ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; }
.mb-footer__col li { break-inside: avoid; }
.mb-footer__col a { display: inline-block; padding: 6px 0; }
.mb-footer__legal { border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; color: #bfae92; }
.mb-footer__legal .mb-container { padding-top: 14px; padding-bottom: 18px; }
.mb-footer__legal p { margin: 0; }
.mb-banner { margin: 16px 0; text-align: center; }
.mb-banner img { border-radius: var(--radius-sm); }

/* ==========================================================================
   >= 600px
   ========================================================================== */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .mb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mb-usps__list { grid-template-columns: repeat(2, 1fr); }
  .mb-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .mb-footer__brand { grid-column: 1 / -1; }
  .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsNew, .centerBoxContentsAlsoPurch, .centerBoxContents, .centerBoxContentsProducts { width: calc(33.333% - 8px) !important; }
  .mb-hero { padding: 32px; }
  .mb-hero__media { margin: 0 -32px -32px; }

  #shoppingCartDefault #cartContentsDisplay .tableHeading { display: table-row; }
  #shoppingCartDefault #cartContentsDisplay tr:not(.tableHeading) { display: table-row; }
  #shoppingCartDefault #cartContentsDisplay td { display: table-cell; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  #shoppingCartDefault #cartContentsDisplay .cartUnitDisplay { display: table-cell; }
  .mb-utility__account { display: inline-flex; }
}

/* ==========================================================================
   >= 960px: header on one row, menu as a bar, two-column layouts
   ========================================================================== */
@media (min-width: 960px) {
  :root { --gutter: 32px; }
  body { font-size: 16.5px; }
  .mb-header__row {
    grid-template-columns: auto minmax(240px, 1fr) auto;
    grid-template-areas: "logo search utility";
    column-gap: 28px; padding-top: 14px; padding-bottom: 14px;
  }
  .mb--checkout .mb-header__row { grid-template-columns: auto 1fr; grid-template-areas: "logo secure"; }
  .mb--checkout .mb-secure { justify-self: end; }
  .mb-menu-toggle, .mb-nav__head, .mb-nav__extra, .mb-backdrop { display: none !important; }
  .mb-logo img { height: 56px; }
  .mb-search { max-width: 560px; }
  .mb-utility { gap: 6px; }
  .mb-utility__label { display: inline; }
  .mb-iconbtn { padding: 0 12px; }
  .mb-badge { top: 2px; left: 26px; right: auto; }

  .mb-nav {
    position: static; width: auto; transform: none; visibility: visible; box-shadow: none; overflow: visible;
    background: var(--surface); border-top: 1px solid var(--line);
  }
  /* one row in the same centred column as the header, starting under the logo
     (margin is restated because ".mb-nav ul" would otherwise zero the container's auto margins) */
  .mb-nav .mb-nav__cats { display: flex; flex-wrap: nowrap; gap: 0 2px; margin: 0 auto; padding: 4px calc(var(--gutter) - 10px); overflow-x: auto; scrollbar-width: thin; }
  .mb-nav__cats li { flex: none; }
  .mb-nav__cats a { min-height: 42px; padding: 0 10px; border: 0; font-size: .88rem; border-radius: 8px; white-space: nowrap; }
  /* with JS, categories that don't fit move into the "More" dropdown instead of scrolling */
  .mb-nav.mb-nav--fit .mb-nav__cats { overflow: visible; }
  .mb-nav__more { position: relative; }
  .mb-nav__morebtn {
    display: flex; align-items: center; gap: 2px; min-height: 42px; padding: 0 8px 0 12px;
    border: 0; border-radius: 8px; background: none; color: var(--bark); font: 600 .88rem var(--font-sans); cursor: pointer; white-space: nowrap;
  }
  .mb-nav__morebtn:hover, .mb-nav__morebtn[aria-expanded="true"] { background: var(--sunk); color: var(--rust); }
  .mb-nav__morebtn.mb-is-current { box-shadow: inset 0 -3px 0 var(--rust); border-radius: 8px 8px 0 0; }
  .mb-nav__morebtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mb-nav__dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 45; min-width: 240px; padding: 6px !important;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .mb-nav__morebtn[aria-expanded="true"] + .mb-nav__dropdown { display: block; }
  .mb-nav__dropdown li { margin: 0 !important; }
  .mb-nav__dropdown a { display: flex; min-height: 40px; padding: 0 12px; border-radius: 8px; }
  .mb-nav__dropdown a[aria-current] { box-shadow: inset 3px 0 0 var(--rust); border-radius: 0 8px 8px 0; }
  .mb-nav__cats a:hover { background: var(--sunk); color: var(--rust); }
  .mb-nav__cats a[aria-current] { box-shadow: inset 0 -3px 0 var(--rust); border-radius: 8px 8px 0 0; }

  .mb-main { padding-top: 24px; }
  .mb-hero { grid-template-columns: 1.1fr 1fr; padding: 0; gap: 0; }
  .mb-hero__text { padding: 48px 40px 48px 48px; }
  .mb-hero__media { margin: 0; height: 100%; }
  .mb-hero__img { height: 100%; aspect-ratio: auto; min-height: 380px; }
  .mb-hero__actions .mb-btn { flex: 0 0 auto; }
  .mb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .mb-section { margin-top: 56px; }
  .mb-about__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

  .mb-product__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .mb-product__gallery { position: sticky; top: 150px; }
  .mb-product__price { font-size: 1.9rem; }

  .mb-usps__list { grid-template-columns: repeat(4, 1fr); }
  .mb-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
  .mb-footer__brand { grid-column: auto; }
  .centerBoxContentsFeatured, .centerBoxContentsSpecials, .centerBoxContentsNew, .centerBoxContentsAlsoPurch, .centerBoxContents, .centerBoxContentsProducts { width: calc(25% - 9px) !important; }

  /* two-column checkout/account forms where Zen Cart uses floating boxes */
  #checkoutShipping .floatingBox, #checkoutPayment .floatingBox { display: inline-block; vertical-align: top; width: calc(50% - 10px) !important; }
}

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