/*
 * MOSHAMMER Content Blocks — front styles.
 *
 * Scoped BEM classes (.mcb-*) that CONSUME the theme's custom.css design tokens
 * (var(--moshammer-*)) rather than hard-coding the palette. Every colour has a
 * literal fallback so the block still renders if a token is ever renamed. No
 * inline CSS ships from the block templates (the one exception is the spacer's
 * --mcb-spacer-size custom property, consumed below).
 *
 * If you want these values to be merchant-tunable, promote them into the theme
 * engine registry + custom.css tokens instead of editing literals here.
 */

.mcb-zone {
  display: block;
}

.mcb {
  box-sizing: border-box;
}

/* Every block gets a uniform 40px top/bottom padding (--mcb-block-space). The gap
   BETWEEN blocks (--mcb-space) stays 0, so spacing is driven purely by that per-block
   padding — adjacent blocks show 80px between them (40 bottom + 40 top). Individual
   blocks add no vertical padding of their own (that used to stack — a styled Category
   Grid got the band padding PLUS the card section's, ~128px); the 40px lives here on
   the .mcb-zone child. Override --mcb-block-space on .mcb-zone to retune globally.
   EXCEPTION: the full-bleed Hero / Image sliders (.mcb-hero) stay edge-to-edge with
   no vertical padding (see the reset below). */
.mcb-zone {
  --mcb-space: 0px;
  --mcb-block-space: 40px;
}
/* Per-block top/bottom padding: --mcb-pt / --mcb-pb are set inline on a block's
   wrapper by the renderer ONLY when the merchant overrides them (CMS-page "Styling"
   popup); otherwise each falls back to the global 40px baseline. */
.mcb-zone > * {
  padding-top: var(--mcb-pt, var(--mcb-block-space, 40px));
  padding-bottom: var(--mcb-pb, var(--mcb-block-space, 40px));
}
/* Full-bleed sliders (Hero + Image Slider share the .mcb-hero root) are exempt —
   they render true edge-to-edge with no top/bottom padding. */
.mcb-zone > .mcb-hero {
  padding-top: 0;
  padding-bottom: 0;
}
.mcb-zone > * + * {
  margin-top: var(--mcb-space);
}

/* ---- Section styles (per-block "Section style") ------------------------- */
/* A block the merchant gave a Section style is wrapped in .mcb-block--{style};
   it becomes a full-width colour band (from the THEME's --moshammer-* palette,
   so alternating/highlight sections come from the theme, not each block type)
   with its content re-centred to the theme container width. Unstyled blocks get
   no wrapper. The colour set here is a baseline the theme can override. */
[class*="mcb-block--"] {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  /* Same per-block padding as every other block (re-declared here for precedence
     over the attribute selector; honours the inline --mcb-pt/--mcb-pb overrides and
     falls back to the 40px baseline). The band's colour background insets by it. */
  padding-top: var(--mcb-pt, var(--mcb-block-space, 40px));
  padding-bottom: var(--mcb-pb, var(--mcb-block-space, 40px));
}
[class*="mcb-block--"] > * {
  max-width: var(--moshammer-container-max, 1280px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}
.mcb-block--surface { background: var(--moshammer-surface, #181b1c); color: var(--moshammer-text, #fcfcfc); }
.mcb-block--surface-alt { background: var(--moshammer-surface-alt, #202324); color: var(--moshammer-text, #fcfcfc); }
.mcb-block--header { background: var(--moshammer-header, #000000); color: var(--moshammer-text, #fcfcfc); }
.mcb-block--accent { background: var(--moshammer-accent, #f79e1b); color: var(--moshammer-on-accent, #111111); }
.mcb-block--accent a { color: var(--moshammer-on-accent, #111111); }
.mcb-block--highlight {
  background: color-mix(in srgb, var(--moshammer-accent, #f79e1b) 12%, transparent);
  border-block: 1px solid var(--moshammer-accent, #f79e1b);
}

/* ---- Video -------------------------------------------------------------- */
/* Responsive YouTube / Vimeo / self-hosted player. The frame holds the aspect
   ratio; the iframe / <video> / click-to-load facade fill it absolutely. */
.mcb-video {
  width: 100%;
  max-width: 1125px;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  box-sizing: border-box;
}
.mcb-video__heading {
  margin: 0 0 0.9rem;
  color: var(--moshammer-text, #fcfcfc);
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.2;
}
.mcb-video__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: var(--moshammer-card-radius, 8px);
}
.mcb-video__frame--16x9 { aspect-ratio: 16 / 9; }
.mcb-video__frame--21x9 { aspect-ratio: 21 / 9; }
.mcb-video__frame--4x3  { aspect-ratio: 4 / 3; }
.mcb-video__frame--1x1  { aspect-ratio: 1 / 1; }
.mcb-video__frame--9x16 { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.mcb-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.mcb-video__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
  display: block;
}
.mcb-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcb-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.15s ease, transform 0.15s ease;
}
.mcb-video__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.mcb-video__facade:hover .mcb-video__play,
.mcb-video__facade:focus-visible .mcb-video__play {
  background: var(--moshammer-accent, #f79e1b);
  transform: translate(-50%, -50%) scale(1.06);
}
.mcb-video__facade:hover .mcb-video__play::before,
.mcb-video__facade:focus-visible .mcb-video__play::before {
  border-left-color: var(--moshammer-on-accent, #111);
}
.mcb-video__caption {
  margin: 0.6rem 0 0;
  text-align: center;
  color: var(--moshammer-text-muted, #c4c4c4);
  font-size: 0.9rem;
}

/* ---- Product Showcase --------------------------------------------------- */
/* One featured product: image + name + price + short description + CTA to the
   product page. Presented via the core product presenter (correct price/tax). */
.mcb-pshow {
  width: 100%;
  max-width: 1125px;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  box-sizing: border-box;
}
.mcb-pshow__heading {
  margin: 0 0 1.2rem;
  color: var(--moshammer-text, #fcfcfc);
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.2;
}
.mcb-pshow__inner {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 700px) {
  .mcb-pshow--image_left .mcb-pshow__inner,
  .mcb-pshow--image_right .mcb-pshow__inner {
    grid-template-columns: 1fr 1fr;
  }
  .mcb-pshow--image_right .mcb-pshow__media {
    order: 2;
  }
}
.mcb-pshow__media {
  display: block;
  overflow: hidden;
  border-radius: var(--moshammer-card-radius, 8px);
  background: var(--moshammer-media-bg, #0d0f10);
}
.mcb-pshow__media img {
  display: block;
  width: 100%;
  height: auto;
}
.mcb-pshow__name {
  margin: 0 0 0.5rem;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.15;
}
.mcb-pshow__name a {
  color: var(--moshammer-text, #fcfcfc);
  text-decoration: none;
}
.mcb-pshow__name a:hover {
  color: var(--moshammer-accent, #f79e1b);
}
.mcb-pshow__price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}
.mcb-pshow__price-now {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--moshammer-accent, #f79e1b);
}
.mcb-pshow__price-old {
  color: var(--moshammer-text-muted, #c4c4c4);
  text-decoration: line-through;
  font-size: 1rem;
}
.mcb-pshow__desc {
  color: var(--moshammer-text-muted, #c4c4c4);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.mcb-pshow__cta {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: var(--moshammer-btn-radius, var(--moshammer-card-radius, 8px));
  background: var(--moshammer-accent, #f79e1b);
  color: var(--moshammer-on-accent, #111);
  font-weight: 600;
  text-decoration: none;
}
.mcb-pshow__cta:hover {
  filter: brightness(1.06);
}

/* ---- Gallery ------------------------------------------------------------ */
/* Curated responsive grid; columns per breakpoint via --mcb-gal-cols-*.
   Tiles keep a uniform aspect (cover) for a tidy grid; the lightbox overlay
   (appended to <body> by initGalleries) shows the full image. */
.mcb-gallery {
  width: 100%;
  max-width: 1125px;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  box-sizing: border-box;
}
.mcb-gallery__heading {
  margin: 0 0 1.2rem;
  color: var(--moshammer-text, #fcfcfc);
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.2;
}
.mcb-gallery__grid {
  display: grid;
  gap: clamp(0.4rem, 1.4vw, 0.9rem);
  grid-template-columns: repeat(var(--mcb-gal-cols-m, 1), 1fr);
}
@media (min-width: 600px) {
  .mcb-gallery__grid { grid-template-columns: repeat(var(--mcb-gal-cols-t, 2), 1fr); }
}
@media (min-width: 992px) {
  .mcb-gallery__grid { grid-template-columns: repeat(var(--mcb-gal-cols-d, 3), 1fr); }
}
.mcb-gallery__item {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--moshammer-card-radius, 8px);
  background: var(--moshammer-media-bg, #0d0f10);
  cursor: pointer;
}
.mcb-gallery__item--static { cursor: default; }
.mcb-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.mcb-gallery__item:hover .mcb-gallery__img { transform: scale(1.05); }

/* ---- Tabs / Accordion --------------------------------------------------- */
.mcb-tabs-block {
  width: 100%;
  max-width: 1125px;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  box-sizing: border-box;
}
.mcb-tabs-block__heading {
  margin: 0 0 1.2rem;
  color: var(--moshammer-text, #fcfcfc);
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.2;
}

/* Tabs */
.mcb-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--moshammer-card-border-color, rgba(255, 255, 255, 0.14));
  margin-bottom: 1.25rem;
}
.mcb-tabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--moshammer-text-muted, #c4c4c4);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.mcb-tabs__tab:hover { color: var(--moshammer-text, #fcfcfc); }
.mcb-tabs__tab.is-active {
  color: var(--moshammer-accent, #f79e1b);
  border-bottom-color: var(--moshammer-accent, #f79e1b);
}
.mcb-tabs__tab:focus-visible { outline: 2px solid var(--moshammer-accent, #f79e1b); outline-offset: 2px; }
.mcb-tabs__panel { color: var(--moshammer-text, #fcfcfc); line-height: 1.6; }

/* Accordion */
.mcb-accordion__item { border-bottom: 1px solid var(--moshammer-card-border-color, rgba(255, 255, 255, 0.14)); }
.mcb-accordion__header { margin: 0; }
.mcb-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: 0;
  padding: 1rem 0;
  cursor: pointer;
  text-align: left;
  color: var(--moshammer-text, #fcfcfc);
  font-size: 1.05rem;
  font-weight: 600;
}
.mcb-accordion__trigger:hover { color: var(--moshammer-accent, #f79e1b); }
.mcb-accordion__trigger:focus-visible { outline: 2px solid var(--moshammer-accent, #f79e1b); outline-offset: 2px; }
.mcb-accordion__icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.mcb-accordion__icon::before,
.mcb-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 0.2s ease;
}
.mcb-accordion__icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.mcb-accordion__icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.mcb-accordion__trigger[aria-expanded="true"] .mcb-accordion__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.mcb-accordion__panel { padding: 0 0 1.1rem; }
.mcb-accordion__body { color: var(--moshammer-text-muted, #c4c4c4); line-height: 1.6; }

@media (max-width: 600px) {
  .mcb-tabs__list { overflow-x: auto; flex-wrap: nowrap; }
  .mcb-tabs__tab { white-space: nowrap; }
}

/* ---- Feature / Spec Grid ------------------------------------------------ */
.mcb-features {
  width: 100%;
  max-width: 1125px;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  box-sizing: border-box;
}
.mcb-features__heading {
  margin: 0 0 0.5rem;
  color: var(--moshammer-text, #fcfcfc);
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.2;
}
.mcb-features__intro {
  margin: 0 0 1.5rem;
  max-width: 60ch;
  color: var(--moshammer-text-muted, #c4c4c4);
  line-height: 1.6;
}
.mcb-features--center { text-align: center; }
.mcb-features--center .mcb-features__intro { margin-inline: auto; }
.mcb-features__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(var(--mcb-feat-cols-m, 1), 1fr);
}
@media (min-width: 600px) {
  .mcb-features__grid { grid-template-columns: repeat(var(--mcb-feat-cols-t, 2), 1fr); }
}
@media (min-width: 992px) {
  .mcb-features__grid { grid-template-columns: repeat(var(--mcb-feat-cols-d, 3), 1fr); }
}
.mcb-features__item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.mcb-features--center .mcb-features__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
a.mcb-features__item:hover .mcb-features__title { color: var(--moshammer-accent, #f79e1b); }
.mcb-features__icon { margin-bottom: 0.8rem; }
.mcb-features__icon img { display: block; width: auto; height: auto; max-width: 64px; max-height: 64px; }
.mcb-features--center .mcb-features__icon img { margin-inline: auto; }
.mcb-features__title {
  margin: 0 0 0.4rem;
  color: var(--moshammer-text, #fcfcfc);
  font-size: 1.15rem;
  line-height: 1.25;
}
.mcb-features__text {
  margin: 0;
  color: var(--moshammer-text-muted, #c4c4c4);
  line-height: 1.6;
}

/* Shared inner width so blocks line up with the theme's content column. */
.mcb-richtext__body,
.mcb-cta__inner,
.mcb-imagetext__grid {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---- Rich Text ---------------------------------------------------------- */
.mcb-richtext__body {
  color: var(--moshammer-text, #fcfcfc);
  line-height: 1.6;
}
.mcb-richtext__body h1,
.mcb-richtext__body h2,
.mcb-richtext__body h3 {
  color: var(--moshammer-text, #fcfcfc);
  letter-spacing: 0.01em;
}
.mcb-richtext__body a {
  color: var(--moshammer-accent-meta, #0ebc5f);
}

/* ---- Call To Action ----------------------------------------------------- */
.mcb--cta {
  text-align: center;
}
.mcb-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.mcb-cta__heading {
  color: var(--moshammer-text, #fcfcfc);
  margin: 0;
}
.mcb-cta__text {
  color: var(--moshammer-text-muted, #c4c4c4);
  margin: 0;
  max-width: 48rem;
}

/* Buttons mirror the theme's CTA button (light fill, dark text) via tokens. */
.mcb-cta__button,
.mcb-imagetext__button,
.mcb-hero__button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--moshammer-btn-radius, 8px);
  font-weight: 600;
  text-decoration: none;
  background: var(--moshammer-cta, #e2e2e2);
  color: var(--moshammer-on-cta, var(--moshammer-on-light, #181b1c));
  transition: filter 0.15s ease;
}
.mcb-cta__button:hover,
.mcb-imagetext__button:hover,
.mcb-hero__button:hover {
  filter: brightness(0.92);
  color: var(--moshammer-on-cta, var(--moshammer-on-light, #181b1c));
}
.mcb--cta-accent .mcb-cta__button {
  background: var(--moshammer-accent, #f79e1b);
  color: var(--moshammer-on-accent, #181b1c);
}

/* ---- Image + Text ------------------------------------------------------- */
.mcb-imagetext__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
}
@media (min-width: 768px) {
  .mcb-imagetext__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Image on the right: swap the visual order without touching the DOM order. */
  .mcb--imagetext-right .mcb-imagetext__media {
    order: 2;
  }
}
.mcb-imagetext__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--moshammer-card-radius, 10px);
}
.mcb-imagetext__heading {
  color: var(--moshammer-text, #fcfcfc);
  margin-top: 0;
}
.mcb-imagetext__text {
  color: var(--moshammer-text-muted, #c4c4c4);
  line-height: 1.6;
}

/* ---- Spacer ------------------------------------------------------------- */
.mcb--spacer {
  height: var(--mcb-spacer-size, 3rem);
}

/* ---- Reuse wrapper ------------------------------------------------------ */
.mcb--reuse {
  display: block;
}

/* ---- Category Cards ----------------------------------------------------- *
 * Card grid of categories (image + name → category). Owned by this module —
 * ported from the theme engine's former .moshammer-model-grid.               */
.mcb-cards {
  margin-inline: auto;
  width: 70%;
  max-width: 1125px;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  /* No padding-block — vertical spacing comes from the shared --mcb-space gap. */
}
/* 70% is too narrow on phones/tablets — go full width there. */
@media (max-width: 991px) {
  .mcb-cards { width: 100%; }
}
.mcb-cards__heading {
  letter-spacing: 0.08em;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  text-transform: uppercase;
  color: var(--moshammer-text, #fcfcfc);
}
.mcb-cards__grid {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  /* Column counts are per-block (merchant choice) via the --mcb-cols-* custom
     properties set inline on the grid; the fallbacks apply if none are set. */
  grid-template-columns: repeat(var(--mcb-cols-mobile, 1), 1fr);
}
@media (min-width: 768px) {
  .mcb-cards__grid { grid-template-columns: repeat(var(--mcb-cols-tablet, 2), 1fr); }
}
@media (min-width: 992px) {
  .mcb-cards__grid { grid-template-columns: repeat(var(--mcb-cols-desktop, 3), 1fr); }
}
.mcb-card {
  aspect-ratio: 16 / 9;
  background: var(--moshammer-surface, #181b1c);
  border-radius: var(--moshammer-btn-radius, 8px);
  color: var(--moshammer-text, #fcfcfc);
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.mcb-card__media {
  inset: 0;
  position: absolute;
}
/* Fit the whole image inside the 16:9 card — never cropped (letterboxed on the
   card surface if the source isn't 16:9). Sources are kept low-res for weight. */
.mcb-card__img {
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
  width: 100%;
}
.mcb-card:hover .mcb-card__img,
.mcb-card:focus-visible .mcb-card__img {
  transform: scale(1.05);
}
.mcb-card__title {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.15) 60%, transparent);
  bottom: 0;
  color: #fff;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 600;
  inset-inline: 0;
  letter-spacing: 0.04em;
  padding: 1.75rem 1rem 0.9rem;
  position: absolute;
  text-transform: uppercase;
}

/* ---- Page Cards (CMS pages as cards) ------------------------------------ */
/* Reuses .mcb-cards / .mcb-cards__grid above (responsive columns). Cards inherit
   the theme palette through --moshammer-* tokens — the mospagecards CE widget
   stylesheet is deliberately NOT copied. */
/* Page Cards fills the theme content column — it should NOT inherit the Category
   Grid's narrower width:70%/1125px cap (that cap stays for .mcb-cards only). */
.mcb--pagecards {
  width: 100%;
  max-width: none;
}
.mcb-pagecard {
  display: flex;
  flex-direction: column;
  background: var(--moshammer-surface, #181b1c);
  border: 1px solid var(--moshammer-card-border-color, var(--moshammer-border, rgba(255, 255, 255, 0.14)));
  border-radius: var(--moshammer-card-radius, var(--moshammer-btn-radius, 8px));
  overflow: hidden;
  color: var(--moshammer-text, #fcfcfc);
  transition: border-color 0.2s ease;
}
.mcb-pagecard:hover { border-color: var(--moshammer-accent, #f79e1b); }
.mcb-pagecard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mcb-pagecard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.mcb-pagecard:hover .mcb-pagecard__img { transform: scale(1.04); }
.mcb-pagecard__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(0.9rem, 2vw, 1.25rem);
}
.mcb-pagecard__title {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.25;
}
.mcb-pagecard__title a { color: var(--moshammer-text, #fcfcfc); text-decoration: none; }
.mcb-pagecard__title a:hover { color: var(--moshammer-accent, #f79e1b); }
.mcb-pagecard__excerpt {
  margin: 0;
  color: var(--moshammer-text-muted, #c4c4c4);
  font-size: 0.9rem;
  line-height: 1.5;
}
.mcb-pagecard__cta {
  margin-top: auto;
  align-self: flex-start;
  color: var(--moshammer-accent, #f79e1b);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  text-decoration: none;
}
.mcb-pagecard__cta:hover { text-decoration: underline; }

/* ---- Category dropdown (image-off mode) --------------------------------- */
/* When "Show category cover image" is off, each grid item is a button with a
   chevron that drops down its direct subcategories. Sits in the same grid. */
.mcb-catdd {
  position: relative;
}
.mcb-catdd__toggle {
  align-items: center;
  background: var(--moshammer-surface, #181b1c);
  border: 1px solid var(--moshammer-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--moshammer-btn-radius, 8px);
  color: var(--moshammer-text, #fcfcfc);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 600;
  gap: 0.6rem;
  justify-content: space-between;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 100%;
}
.mcb-catdd__toggle:hover,
.mcb-catdd__toggle[aria-expanded="true"] {
  background: var(--moshammer-surface-hover, #22282a);
  border-color: var(--moshammer-accent, #f79e1b);
}
.mcb-catdd__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcb-catdd__chevron {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.5rem;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  width: 0.5rem;
}
.mcb-catdd__toggle[aria-expanded="true"] .mcb-catdd__chevron {
  transform: rotate(-135deg);
}
.mcb-catdd__menu {
  background: var(--moshammer-surface, #181b1c);
  border: 1px solid var(--moshammer-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--moshammer-btn-radius, 8px);
  list-style: none;
  margin: 0.35rem 0 0;
  overflow: hidden;
  padding: 0.25rem;
}
.mcb-catdd__item {
  margin: 0;
}
.mcb-catdd__item--all {
  border-bottom: 1px solid var(--moshammer-border, rgba(255, 255, 255, 0.14));
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}
.mcb-catdd__item--all .mcb-catdd__link {
  font-weight: 600;
}
.mcb-catdd__link {
  border-radius: calc(var(--moshammer-btn-radius, 8px) - 3px);
  color: var(--moshammer-text, #fcfcfc);
  display: block;
  padding: 0.55rem 0.75rem;
  text-decoration: none;
  transition: background 0.15s ease;
}
.mcb-catdd__link:hover,
.mcb-catdd__link:focus-visible {
  background: var(--moshammer-surface-hover, #22282a);
  color: var(--moshammer-accent, #f79e1b);
}

/* ---- Full Width Hero / Image Slider ------------------------------------- */
/* Cinematic full-bleed hero. Full-bleed 1-up slides on a native scroll-snap track;
   the first slide is server-rendered + visible before JS (LCP). Restrained,
   editorial — the vehicle stays the focus. Driven by the shared window.MoshCarousel
   core (engine moshammer-carousel.js); the Image Slider shares this shell. */
.mcb-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.mcb-hero__viewport {
  position: relative;
  width: 100%;
  height: var(--mcb-hero-h, 82vh);
  min-height: 420px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .mcb-hero__viewport {
    height: var(--mcb-hero-h-mobile, 72vh);
    min-height: 360px;
  }
  /* Image-only hero: the slides are wide (16:9) photos, but a tall 72vh mobile box makes
     object-fit:cover crop them hard. Size the box to the image's OWN ratio instead — the
     full picture shows full-width with no crop and no letterbox, and every slide is the
     same height so the swipe stays smooth. Content heroes keep the fixed 72vh for overlays. */
  .mcb-hero--images .mcb-hero__viewport {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--mcb-hero-ar-mobile, 16 / 9);
  }
}
/* Native scroll-snap track — the shared window.MoshCarousel core (engine
   moshammer-carousel.css) drives BOTH the Hero and the Image Slider now; the
   opacity crossfade + pointer-drag + parallax are retired. The <ul> carries
   .mos-carousel__track (flex + overflow-x + scroll-snap-type); each slide is a
   full-bleed 1-up snap pane holding the (absolutely-filled) media and, for the
   Hero, the content overlay. --mos-carousel-gap:0 keeps the panes edge-to-edge. */
.mcb-hero { --mos-carousel-gap: 0; }
.mcb-hero__slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}
.mcb-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

/* ---- Header / footer content-block zones (1.4.8) ---------------------- */
/* Zones injected into the theme header (displayBanner / displayNavFullWidth) and
   footer. They sit on the dark --moshammer-surface, so blocks inherit the light
   text tokens already — we only tighten the vertical rhythm (a thin strip, not a
   full page section, so the default 40px per-block padding is too tall) and
   centre the top banner. Full-bleed section-style bands still work here. */
.mcb-zone--header-banner,
.mcb-zone--header-nav,
.mcb-zone--footer-top,
.mcb-zone--footer-bottom {
  --mcb-block-space: 12px;
}
.mcb-zone--header-banner {
  text-align: center;
}

/* Product / category page content-block zones (1.5.0). They render inside the page
   body via core hooks (displayFooterProduct / displayProductAdditionalInfo /
   displayHeaderCategory / displayFooterCategory), so blocks keep their normal look;
   just add a little separation from the surrounding catalog content. */
.mcb-zone--product,
.mcb-zone--category,
.mcb-zone--manufacturer,
.mcb-zone--supplier,
.mcb-zone--search {
  margin-block: 1.5rem;
}

/* ---- Related Products (dynamic) grid (1.5.2) -------------------------- */
.mcb-ctxprod__heading {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  color: var(--moshammer-text, #fcfcfc);
}
.mcb-ctxprod__grid {
  display: grid;
  grid-template-columns: repeat(var(--mcb-ctx-cols-m, 2), 1fr);
  gap: 1rem;
}
@media (min-width: 600px) {
  .mcb-ctxprod__grid { grid-template-columns: repeat(var(--mcb-ctx-cols-t, 3), 1fr); }
}
@media (min-width: 992px) {
  .mcb-ctxprod__grid { grid-template-columns: repeat(var(--mcb-ctx-cols-d, 4), 1fr); }
}
.mcb-ctxprod__card {
  display: flex;
  flex-direction: column;
  background: var(--moshammer-surface, #181b1c);
  border: 1px solid var(--moshammer-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--moshammer-card-radius, 6px);
  overflow: hidden;
}
.mcb-ctxprod__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.mcb-ctxprod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.mcb-ctxprod__card:hover .mcb-ctxprod__media img { transform: scale(1.04); }
.mcb-ctxprod__body { padding: 0.75rem; }
.mcb-ctxprod__name {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  line-height: 1.3;
}
.mcb-ctxprod__name a { color: var(--moshammer-text, #fcfcfc); text-decoration: none; }
.mcb-ctxprod__name a:hover { color: var(--moshammer-accent, #f79e1b); }
.mcb-ctxprod__price { display: flex; gap: 0.5rem; align-items: baseline; }
.mcb-ctxprod__price-now { font-weight: 600; color: var(--moshammer-accent, #f79e1b); }
.mcb-ctxprod__price-old { text-decoration: line-through; opacity: 0.6; font-size: 0.85em; }

/* ---- Container (Columns) block (1.6.0) -------------------------------- */
/* Responsive CSS grid of child blocks. Column count per viewport + each child's
   span come as inline custom props (server-clamped so a span never exceeds the
   viewport's columns). minmax(0,1fr) + min-width:0 keep wide children from
   overflowing their cell. */
.mcb-container__grid {
  display: grid;
  grid-template-columns: repeat(var(--mcb-cols-m, 1), minmax(0, 1fr));
  gap: var(--mcb-container-gap, 1rem);
}
@media (min-width: 600px) {
  .mcb-container__grid { grid-template-columns: repeat(var(--mcb-cols-t, 2), minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .mcb-container__grid { grid-template-columns: repeat(var(--mcb-cols-d, 3), minmax(0, 1fr)); }
}
.mcb-container__cell { grid-column: span var(--mcb-cs-m, 1); min-width: 0; }
@media (min-width: 600px) {
  .mcb-container__cell { grid-column: span var(--mcb-cs-t, 1); }
}
@media (min-width: 992px) {
  .mcb-container__cell { grid-column: span var(--mcb-cs-d, 1); }
}
.mcb-container--align-start .mcb-container__grid { align-items: start; }
.mcb-container--align-center .mcb-container__grid { align-items: center; }
.mcb-container--align-end .mcb-container__grid { align-items: end; }
.mcb-container--align-stretch .mcb-container__grid { align-items: stretch; }

/* ---- Image block (1.7.0) --------------------------------------------- */
.mcb-image {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mcb-image--left { align-items: flex-start; }
.mcb-image--center { align-items: center; }
.mcb-image--right { align-items: flex-end; }
.mcb-image__link,
.mcb-image__img { display: block; max-width: 100%; }
.mcb-image__img { height: auto; }
/* Optional max-width from the server-validated custom property. */
.mcb-image[style*="--mcb-image-maxw"] .mcb-image__img { max-width: var(--mcb-image-maxw); }
.mcb-image__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--moshammer-text-muted, #9a9a9a);
}

/* ---- Menu / Link List block (1.8.0) ---------------------------------- */
.mcb-menu__heading {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--moshammer-text, #fcfcfc);
}
.mcb-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mcb-menu--horizontal .mcb-menu__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
.mcb-menu__link {
  color: var(--moshammer-text, #fcfcfc);
  text-decoration: none;
}
.mcb-menu__link:hover { color: var(--moshammer-accent, #f79e1b); }
.mcb-menu__switchers {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.mcb-menu--horizontal .mcb-menu__switchers { margin-top: 0; }
.mcb-menu__country select { padding: 0.25rem 0.5rem; }
.mcb-hero__link {
  display: block;
  position: absolute;
  inset: 0;
}
.mcb-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mcb-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}
.mcb-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mcb-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.28));
}
.mcb-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: clamp(1.5rem, 5vw, 5rem);
}
.mcb-hero__content-inner {
  max-width: 40rem;
}
.mcb-hero__slide--align-left .mcb-hero__content { justify-content: flex-start; text-align: left; }
.mcb-hero__slide--align-center .mcb-hero__content { justify-content: center; text-align: center; }
.mcb-hero__slide--align-right .mcb-hero__content { justify-content: flex-end; text-align: right; }
.mcb-hero__slide--pos-top .mcb-hero__content { align-items: flex-start; }
.mcb-hero__slide--pos-middle .mcb-hero__content { align-items: center; }
.mcb-hero__slide--pos-bottom .mcb-hero__content { align-items: flex-end; }
.mcb-hero__slide--w-narrow .mcb-hero__content-inner { max-width: 30rem; }
.mcb-hero__slide--w-medium .mcb-hero__content-inner { max-width: 40rem; }
.mcb-hero__slide--w-wide .mcb-hero__content-inner { max-width: 56rem; }
.mcb-hero__eyebrow {
  margin: 0 0 0.75rem;
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moshammer-accent, #f79e1b);
}
.mcb-hero__headline {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 4rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.mcb-hero__text {
  margin: 1rem 0 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.mcb-hero__slide--align-center .mcb-hero__text { margin-inline: auto; }
.mcb-hero__actions {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.mcb-hero__slide--align-center .mcb-hero__actions { justify-content: center; }
.mcb-hero__slide--align-right .mcb-hero__actions { justify-content: flex-end; }
.mcb-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--moshammer-btn-radius, 4px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mcb-hero__cta--primary { background: #fff; color: #111; border: 1px solid #fff; }
.mcb-hero__cta--primary:hover,
.mcb-hero__cta--primary:focus-visible { background: var(--moshammer-accent, #f79e1b); border-color: var(--moshammer-accent, #f79e1b); color: #111; }
.mcb-hero__cta--secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); }
.mcb-hero__cta--secondary:hover,
.mcb-hero__cta--secondary:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
/* Arrows + dots are generated and styled by the shared carousel core
   (.mos-carousel__arrow / .mos-carousel__dot, engine moshammer-carousel.css), which
   also handles reduced-motion (scroll-behavior:auto). The bespoke .mcb-hero__nav /
   __dots and the crossfade + parallax reduced-motion rules are retired with
   hero-slider.js. */

/* ---- Review Slider ------------------------------------------------------ */
.mcb--reviewslider {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  text-align: center;
  /* Core-generated dots (window.MoshCarousel): tint the active dot with the brand
     accent, matching the previous bespoke dots. */
  --mos-carousel-dot-active: var(--moshammer-accent, #f79e1b);
}
.mcb-reviews__heading {
  color: var(--moshammer-text, #fcfcfc);
  margin: 0 0 1.25rem;
}
.mcb-reviews__viewport {
  overflow: hidden;
}
.mcb-reviews__track {
  /* flex + gap + scroll-snap come from the shared .mos-carousel__track helper (added
     on the <ul> in the .tpl); only the list reset is bespoke now. */
  margin: 0;
  padding: 0;
  list-style: none;
}
.mcb-reviews__slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 1.5rem clamp(0.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.mcb-reviews__stars {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  line-height: 1;
}
.mcb-reviews__star {
  color: color-mix(in srgb, var(--moshammer-text, #fcfcfc) 30%, transparent);
}
.mcb-reviews__star.is-on {
  color: var(--moshammer-accent, #f79e1b);
}
.mcb-reviews__text {
  color: var(--moshammer-text, #fcfcfc);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0;
  max-width: 44rem;
  quotes: '\201C' '\201D';
}
.mcb-reviews__text::before { content: open-quote; }
.mcb-reviews__text::after { content: close-quote; }
.mcb-reviews__author {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.mcb-reviews__name {
  color: var(--moshammer-text, #fcfcfc);
  font-weight: 600;
}
.mcb-reviews__role {
  color: var(--moshammer-text-muted, #c4c4c4);
  font-size: 0.875rem;
}
/* Arrows + dots are generated and styled by the shared carousel core
   (.mos-carousel__arrow / .mos-carousel__dot, engine moshammer-carousel.css); the
   bespoke .mcb-reviews__controls/__nav/__dots and the track transform transition
   are retired with the translateX slider. */
/* ---- Icon List (iconlist) — theme-icon + text rows in a responsive grid ---- */
.mcb-iconlist__heading {
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}
.mcb-iconlist__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(var(--mcb-cols-mobile, 1), minmax(0, 1fr));
}
.mcb-iconlist__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.mcb-iconlist__icon {
  --mos-icon-size: 1.5rem;
  flex: none;
  color: var(--moshammer-accent, #f79e1b);
}
.mcb-iconlist__text {
  min-width: 0;
  color: var(--moshammer-text, inherit);
}
@media (min-width: 768px) {
  .mcb-iconlist__grid { grid-template-columns: repeat(var(--mcb-cols-tablet, 1), minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .mcb-iconlist__grid { grid-template-columns: repeat(var(--mcb-cols-desktop, 1), minmax(0, 1fr)); }
}

/* ---- Folder Gallery (folder-sourced image grid) ------------------------- */
/* Ported from the standalone mosfoldergallery module's folder-gallery-front.css when the
   feature was folded into content-blocks (v1.14.0); markup + class names unchanged, so the
   `.mosfoldergallery` selectors match foldergallery.tpl. The grid reads its column counts,
   gap and crop ratio from CSS custom properties the template sets inline on the wrapper
   (--fg-cols, --fg-cols-t, --fg-cols-m, --fg-gap, --fg-ratio). */

.mosfoldergallery {
    --fg-cols: 4;
    --fg-cols-t: 3;
    --fg-cols-m: 2;
    --fg-gap: 10px;
    margin: 1.5rem 0;
}

.mosfoldergallery__grid {
    display: grid;
    grid-template-columns: repeat(var(--fg-cols), minmax(0, 1fr));
    gap: var(--fg-gap);
    margin: 0;
    padding: 0;
}

.mosfoldergallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.mosfoldergallery__link {
    display: block;
    line-height: 0;
}

.mosfoldergallery__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fixed crop: the picture fills a box of the chosen ratio, cropping the overflow. */
.mosfoldergallery__grid--ratio .mosfoldergallery__img {
    height: auto;
    aspect-ratio: var(--fg-ratio);
    object-fit: cover;
}

.mosfoldergallery__caption {
    display: block;
    padding: 0.4rem 0.2rem;
    font-size: 0.85em;
    line-height: 1.3;
    text-align: center;
}

/* Hover: zoom the image, or wash it with a dark overlay. */
.mosfoldergallery--hover-zoom .mosfoldergallery__img {
    transition: transform 0.35s ease;
}

.mosfoldergallery--hover-zoom .mosfoldergallery__item:hover .mosfoldergallery__img {
    transform: scale(1.06);
}

.mosfoldergallery--hover-overlay .mosfoldergallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.mosfoldergallery--hover-overlay .mosfoldergallery__item:hover::after {
    background: rgba(0, 0, 0, 0.28);
}

.mosfoldergallery--lightbox .mosfoldergallery__link {
    cursor: zoom-in;
}

@media (max-width: 991px) {
    .mosfoldergallery__grid {
        grid-template-columns: repeat(var(--fg-cols-t), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mosfoldergallery__grid {
        grid-template-columns: repeat(var(--fg-cols-m), minmax(0, 1fr));
    }
}

/* ---- Buy Box (product purchase area) ------------------------------------ */
/* Self-contained purchase UI (price + variant selects + qty + add-to-cart). The form
   reproduces the core add-to-cart contract (theme core.js drives it); these rules only
   lay it out, consuming the theme's own design tokens. */

.mcb-buybox {
    margin: 1.25rem 0;
}

.mcb-buybox__heading {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.mcb-buybox__prices {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.mcb-buybox__price {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.mcb-buybox__price-old {
    color: var(--moshammer-muted, #8a8a8a);
    text-decoration: line-through;
    font-size: 1rem;
}

.mcb-buybox__form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 32rem;
}

.mcb-buybox__variants {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mcb-buybox__group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mcb-buybox__group-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.mcb-buybox__group-input {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--moshammer-border, #d5d5d5);
    border-radius: var(--moshammer-radius, 4px);
    background: #fff;
    font: inherit;
    max-width: 20rem;
}

.mcb-buybox__actions {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mcb-buybox__qty {
    width: 5rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--moshammer-border, #d5d5d5);
    border-radius: var(--moshammer-radius, 4px);
    font: inherit;
    text-align: center;
}

.mcb-buybox__add {
    flex: 1 1 auto;
    min-width: 12rem;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: var(--moshammer-radius, 4px);
    background: var(--moshammer-accent, #111);
    color: var(--moshammer-accent-contrast, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.mcb-buybox__add:hover {
    opacity: 0.9;
}

.mcb-buybox__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mcb-buybox__availability {
    margin: 0;
    font-size: 0.88rem;
    color: var(--moshammer-muted, #6b7885);
}

.mcb-buybox--loading {
    opacity: 0.6;
    pointer-events: none;
}