:root,
[data-bs-theme="light"] {
  --moshammer-page: #303030;
  --moshammer-surface: #181b1c;
  --moshammer-surface-alt: #202324;
  --moshammer-text: #fcfcfc;
  --moshammer-text-muted: #c4c4c4;
  --moshammer-accent: #f79e1b;
  --moshammer-accent-meta: #0EBC5F;
  --moshammer-cta: #e2e2e2;
  --moshammer-header: #000000;
  --moshammer-card-light: #fefefe;
  --moshammer-input-light: #ffffff;
  --moshammer-input-border: #666666;
  --moshammer-border: rgba(255, 255, 255, 0.08);
  /* Elevated card effect (ref: dark showcase card). Adds depth only - no colour
     change. `--moshammer-card-elevation` layers a faint top-edge highlight, a
     tight contact shadow and a soft ambient shadow; the rim is a 1px light border. */
  --moshammer-card-radius: 1.25rem;
  --moshammer-card-border-color: rgba(255, 255, 255, 0.09);
  --moshammer-card-elevation:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 22px 44px -22px rgba(0, 0, 0, 0.5);
  /* Light-card variant: same soft two-layer ambient shadow, without the top-edge
     highlight (a white inset is invisible on a #fefefe card) and without the light
     rim. For merchandise cards that sit light-on-dark. */
  --moshammer-card-elevation-light:
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 24px 44px -22px rgba(0, 0, 0, 0.55);
  /* Layout & typography tokens controlled by the moshammerthemeengine module.
     Defaults below preserve the current look; the module overrides these same
     custom properties at :root (priority 1200) when changed in the back office. */
  --moshammer-body-font-size: 1rem;
  --moshammer-product-card-radius: 1.25rem;
  --moshammer-form-field-height: 44px;
  --moshammer-cart-remove-icon-size: 1.25rem;
  /* Accessibility tokens (engine-controlled). Defaults meet WCAG: a 2px focus
     indicator (2.4.13) and a 44px touch target (2.5.5; 2.5.8 requires 24px). */
  --moshammer-focus-ring-width: 2px;
  --moshammer-focus-ring-color: #f79e1b;
  --moshammer-focus-ring-offset: 2px;

  /* ---- Button system -------------------------------------------------------
     Buttons used to be painted by overriding `background`/`color` on individual
     selectors with literal hex values, so they only *looked* on-palette: nothing
     actually read the tokens, and changing the CTA colour in the back office
     moved no button at all. Everything below derives from the palette tokens
     instead, and the `.btn-*` rules further down bind Bootstrap's own
     `--bs-btn-*` variables to them - which is what makes base, hover, active and
     disabled move together, and what lets buttons the theme has never seen
     (core templates, third-party modules) inherit correctly.

     Each shade is declared twice on purpose: the literal first as a fallback,
     then the `color-mix()` derivation. A browser without `color-mix()` drops the
     second declaration as invalid and keeps the literal, so nothing degrades to
     an unstyled control. */
  --moshammer-btn-radius: 0.5rem;

  /* Foreground colours for each button surface. Named for the surface they sit
     on so the pairing stays obvious when a colour is re-tuned. */
  /* Dark "ink" used wherever content sits on a light surface - CTA buttons,
     merchandise cards, quantity inputs, pagination. It was previously repeated
     as a literal #181b1c in ~20 component rules, which is why re-tuning the
     palette left those components behind. */
  --moshammer-on-light: #181b1c;
  --moshammer-on-cta: var(--moshammer-on-light);
  --moshammer-on-accent: var(--moshammer-on-light);
  --moshammer-on-meta: var(--moshammer-on-light);
  --moshammer-on-danger: #fcfcfc;
  --moshammer-on-surface: var(--moshammer-text);

  --moshammer-danger: #e5484d;

  /* Product image label / flag colours (theme engine -> "Product labels" tab).
     new = green, sale (on-sale + discount) = red; the default pair covers other
     flag types (online-only, pack). Text colours pair with each background. */
  --moshammer-flag-new-bg: #0EBC5F;
  --moshammer-flag-new-text: #181b1c;
  --moshammer-flag-sale-bg: #e5484d;
  --moshammer-flag-sale-text: #fcfcfc;
  --moshammer-flag-default-bg: #181b1c;
  --moshammer-flag-default-text: #fcfcfc;

  /* Light surfaces lighten on hover and darken on press; dark surfaces do the
     reverse, which keeps the interaction reading the same way across variants. */
  --moshammer-cta-hover: #f0f0f0;
  --moshammer-cta-hover: color-mix(in srgb, var(--moshammer-cta) 78%, #ffffff);
  --moshammer-cta-active: #cfcfcf;
  --moshammer-cta-active: color-mix(in srgb, var(--moshammer-cta) 86%, #000000);

  --moshammer-accent-hover: #f9ae3c;
  --moshammer-accent-hover: color-mix(in srgb, var(--moshammer-accent) 84%, #ffffff);
  --moshammer-accent-active: #d88711;
  --moshammer-accent-active: color-mix(in srgb, var(--moshammer-accent) 86%, #000000);

  --moshammer-meta-hover: #2ecb77;
  --moshammer-meta-hover: color-mix(in srgb, var(--moshammer-accent-meta) 84%, #ffffff);
  --moshammer-meta-active: #0ca551;
  --moshammer-meta-active: color-mix(in srgb, var(--moshammer-accent-meta) 86%, #000000);

  --moshammer-danger-hover: #ea6065;
  --moshammer-danger-hover: color-mix(in srgb, var(--moshammer-danger) 84%, #ffffff);
  --moshammer-danger-active: #c93e42;
  --moshammer-danger-active: color-mix(in srgb, var(--moshammer-danger) 86%, #000000);

  /* Neutral/ghost buttons tint the surface rather than introducing a new colour,
     so they stay correct if the page or surface tokens are re-tuned. */
  --moshammer-btn-ghost-hover-bg: rgba(255, 255, 255, 0.06);
  --moshammer-btn-ghost-active-bg: rgba(255, 255, 255, 0.12);
  --moshammer-btn-ghost-border: rgba(255, 255, 255, 0.18);
  --moshammer-btn-ghost-border-hover: rgba(255, 255, 255, 0.28);
  --bs-body-bg: var(--moshammer-page);
  --bs-body-bg-rgb: 48, 48, 48;
  --bs-body-color: var(--moshammer-text);
  --bs-body-color-rgb: 252, 252, 252;
  --bs-emphasis-color: var(--moshammer-text);
  --bs-emphasis-color-rgb: 252, 252, 252;
  --bs-secondary-color: rgba(196, 196, 196, 0.92);
  --bs-secondary-color-rgb: 196, 196, 196;
  --bs-tertiary-color: rgba(196, 196, 196, 0.72);
  --bs-tertiary-color-rgb: 196, 196, 196;
  --bs-secondary-bg: #202324;
  --bs-secondary-bg-rgb: 32, 35, 36;
  --bs-tertiary-bg: #25292a;
  --bs-tertiary-bg-rgb: 37, 41, 42;
  --bs-heading-color: var(--moshammer-text);
  --bs-link-color: var(--moshammer-text);
  --bs-link-color-rgb: 252, 252, 252;
  --bs-link-hover-color: var(--moshammer-accent-meta);
  --bs-link-hover-color-rgb: 14, 188, 95;
  --bs-primary: var(--moshammer-cta);
  --bs-primary-rgb: 226, 226, 226;
  --bs-primary-text-emphasis: #181b1c;
  --bs-primary-bg-subtle: #e2e2e2;
  --bs-primary-border-subtle: #e2e2e2;
  --bs-dark: var(--moshammer-surface);
  --bs-dark-rgb: 24, 27, 28;
  --bs-light: var(--moshammer-text);
  --bs-light-rgb: 252, 252, 252;
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-focus-ring-color: rgba(247, 158, 27, 0.35);
  --bs-box-shadow-sm: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
  --bs-box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.24);
  --bs-border-radius: 0.35rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --header-top-color: var(--moshammer-accent-meta);
  --header-top-color-hover: var(--moshammer-text);
  --scroll-padding-top: 5.5rem;
}

[data-bs-theme="dark"] {
  --bs-link-color: var(--moshammer-text);
  --bs-link-color-rgb: 252, 252, 252;
  --bs-link-hover-color: var(--moshammer-accent-meta);
  --bs-link-hover-color-rgb: 14, 188, 95;
}

body {
  background: var(--moshammer-page);
  color: var(--moshammer-text);
  font-size: var(--moshammer-body-font-size);
  letter-spacing: 0.02em;
}

html {
  background: var(--moshammer-page);
}

#wrapper,
.columns-container,
#center-column.page,
.page-content,
.page-content--home,
#content {
  background: var(--moshammer-page);
}

body.page-index,
body.page-index #wrapper,
body.page-index .columns-container,
body.page-index #center-column,
body.page-index .page-content--home,
body.page-index #content,
body.page-index .elementor,
body.page-index .elementor-section-wrap {
  background: var(--moshammer-page);
}

body.page-index .elementor-section,
body.page-index .elementor-top-section,
body.page-index .elementor-container,
body.page-index .elementor-column,
body.page-index .elementor-widget-wrap,
body.page-index .elementor-widget-container {
  background-color: transparent;
}

body,
button,
input,
select,
textarea {
  font-family: "Inter", sans-serif;
}

a {
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Bootstrap 5.3 paints links with `rgba(var(--bs-link-color-rgb), …)`. That RGB
   triple cannot be derived from a hex custom property, so link colour would not
   follow a back-office change to the meta accent - the control would look live
   but do nothing. Bind link colour straight to the token instead. The
   `--bs-link-*-rgb` values above are kept for components that read them.
   Component rules carry a class and are more specific, so product titles, CTAs
   and buttons keep their own colours. */
a {
  color: var(--moshammer-text);
}

a:hover,
a:focus-visible {
  color: var(--moshammer-accent-meta);
}

/* Buttons must NOT inherit the global link colour above. Anchor-based buttons
   (e.g. "Proceed to checkout", "Continue shopping") were picking up the white
   link colour and green link-hover, and because those `a {}` rules are unlayered
   they beat Bootstrap's own layered `.btn { color: var(--bs-btn-color) }` - so
   filled buttons rendered washed-out white text on the light CTA fill and turned
   green on hover. Route every button's text back through its own variant token:
   filled buttons (btn-primary) show the dark theme colour (#181b1c), outline
   buttons keep their light text (black would be invisible on their dark ground),
   and no button goes green on hover. `a.btn` is listed alongside `.btn` so this
   also beats any `.container a` link rule an anchor button may sit inside. Placed
   BEFORE the `.btn-link`/`.link-primary` rules so link-styled buttons (the price
   estimator toggle, etc.) keep their intended accent colour by source order. */
.btn,
a.btn {
  color: var(--bs-btn-color);
}

.btn:hover,
.btn:focus,
.btn:focus-visible,
a.btn:hover,
a.btn:focus,
a.btn:focus-visible {
  color: var(--bs-btn-hover-color);
}

.btn-link,
.link-primary,
.alert-link {
  color: var(--moshammer-accent-meta);
}

.btn-link:hover,
.btn-link:focus-visible,
.link-primary:hover,
.link-primary:focus-visible,
.alert-link:hover,
.alert-link:focus-visible {
  color: var(--moshammer-accent);
}

.advancedcartcheckout-estimator__toggle,
.cart-summary .advancedcartcheckout-estimator__toggle,
.cart-summary .btn-link.link-primary,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle.btn.btn-link.link-primary,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle.btn.btn-link.link-primary span,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle .advancedcartcheckout-estimator__toggle-icon {
  color: var(--moshammer-accent-meta) !important;
}

.advancedcartcheckout-estimator__toggle:hover,
.advancedcartcheckout-estimator__toggle:focus-visible,
.cart-summary .advancedcartcheckout-estimator__toggle:hover,
.cart-summary .advancedcartcheckout-estimator__toggle:focus-visible,
.cart-summary .btn-link.link-primary:hover,
.cart-summary .btn-link.link-primary:focus-visible,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle.btn.btn-link.link-primary:hover,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle.btn.btn-link.link-primary:focus-visible,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle.btn.btn-link.link-primary:hover span,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle.btn.btn-link.link-primary:focus-visible span,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle:hover .advancedcartcheckout-estimator__toggle-icon,
body#cart .cart-summary__line#cart-subtotal-shipping .advancedcartcheckout-estimator__toggle:focus-visible .advancedcartcheckout-estimator__toggle-icon {
  color: var(--moshammer-accent) !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: var(--moshammer-focus-ring-width) solid var(--moshammer-focus-ring-color);
  outline-offset: var(--moshammer-focus-ring-offset);
  box-shadow: none;
}

/* The megamenu module injects an inline `<style>` scoped to `.mmh-header` that
   sets a 1px focus outline in its own colour. It beats the rule above on both
   specificity (0,2,1) and source order, so header focus indicators were thinner
   than the 2px WCAG 2.4.13 minimum and ignored the theme token. `!important` is
   required to override a later, more specific inline stylesheet. */
.mmh-header a:focus-visible,
.mmh-header button:focus-visible,
.mmh-nav a:focus-visible,
.mmh-nav button:focus-visible {
  outline: var(--moshammer-focus-ring-width) solid var(--moshammer-focus-ring-color) !important;
  outline-offset: var(--moshammer-focus-ring-offset) !important;
}

.wrapper {
  background: transparent;
}

.page-content,
.page-footer {
  color: var(--moshammer-text);
}

.page-header {
  color: #ad9a85;
  text-align: center;
}

.page-header .page-title-section,
.title_text {
  text-align: center;
}

.title_text {
  color: #ad9a85;
  display: block;
  width: 100%;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .title_text {
    background-image: linear-gradient(54deg, #ad9a85 13%, #e4ddcf 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.page-title-section {
  letter-spacing: 0.12em;
  padding-top: 2rem;
  text-transform: uppercase;
}

/* Product pages have no `.page-title-section` H1, so lift the product container off
   the header directly (Moshammer request) — it otherwise sat flush below the nav. */
body#product .product__container {
  padding-top: 2rem;
}

.header {
  background: var(--moshammer-header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.header-top {
  border-bottom: 0;
}

.header-bottom {
  border-bottom: 0;
}


.header-nav-full-width {
  background: var(--moshammer-header);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.header-top a:not(.dropdown-item),
.header-bottom a:not(.dropdown-item),
.header-block__action-btn {
  color: var(--moshammer-text);
}

.header-top a:not(.dropdown-item):hover,
.header-bottom a:not(.dropdown-item):hover,
.header-block__action-btn:hover {
  color: var(--moshammer-accent-meta);
}



.header-block__badge {
  background: var(--moshammer-accent);
  color: var(--moshammer-on-light);
}

.ps-searchbar__dropdown,
.offcanvas,
.modal-content,
.dropdown-menu,
.accordion-item {
  background: var(--moshammer-surface);
  border-color: var(--moshammer-border);
  color: var(--moshammer-text);
}

/* Nav mega-submenu (Clothes/Accessories): drop the dark page-colour fill so the
   panel is no longer a distinct dark box under the nav (Moshammer request). It
   still carries theme.css's border-top + shadow to mark its edge. */
.submenu {
  background: transparent;
}

.card {
  background: var(--moshammer-card-light);
  border: 0;
  color: var(--moshammer-on-light);
}

.product-list-review {
  color: #505658;
}

.product-list-comments-number {
  color: #505658;
  font-size: 0.875rem;
  line-height: 1.4;
}

.product-list-comments-number [data-ps-ref="number-value"] {
  color: var(--moshammer-on-light);
  font-weight: 600;
}

.products__pagination .page-link,
#product-comments-list-pagination .page-link {
  align-items: center;
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  border-radius: 999px;
  color: var(--moshammer-accent-meta);
  justify-content: center;
}

.products__pagination .page-link:hover,
.products__pagination .page-link:focus-visible,
#product-comments-list-pagination .page-link:hover,
#product-comments-list-pagination .page-link:focus-visible {
  background: #202324;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--moshammer-text);
}

.products__pagination .page-item.active .page-link,
#product-comments-list-pagination .page-item.active .page-link {
  background: var(--moshammer-cta);
  border-color: var(--moshammer-cta);
  color: var(--moshammer-on-light);
}

.products__pagination .page-item.disabled .page-link,
.products__pagination .page-link.disabled,
.products__pagination .page-link[aria-disabled="true"],
.products__pagination .page-link:disabled,
#product-comments-list-pagination .page-item.disabled .page-link,
#product-comments-list-pagination .page-link.disabled,
#product-comments-list-pagination .page-link[aria-disabled="true"],
#product-comments-list-pagination .page-link:disabled {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--moshammer-text-muted);
  opacity: 1;
}

.form-control {
  background-color: var(--moshammer-surface-alt);
  border-color: var(--moshammer-border);
  color: var(--moshammer-text);
  color-scheme: dark;
}

select,
.form-select {
  background-color: var(--moshammer-surface-alt);
  border-color: var(--moshammer-border);
  color: var(--moshammer-text);
  color-scheme: dark;
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fcfcfc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--bs-form-select-bg-img);
}

/* Single, global binding of the engine-controlled field height. It replaces the
   per-form min-heights that used to live in the contact and newsletter blocks
   (removed once those modules adopted Hummingbird's `.form-control` markup), so
   the "Form field height" control now reaches every form consistently. Textareas
   keep growing past this via their `rows`; it is only a single-row floor. */
.form-control,
.form-select {
  min-height: var(--moshammer-form-field-height);
}

/* Touch-friendly field height (controlled by --moshammer-form-field-height).
   Textareas keep their natural multi-line height. */

.quantity-button__group {
  background: var(--moshammer-input-light);
  border: 1px solid var(--moshammer-input-border);
  border-radius: 0.65rem;
  overflow: hidden;
  width: fit-content;
}

/* +/- buttons match the theme's primary/CTA button (mirror of .btn-primary). Bind
   the --bs-btn-* variables so every state (hover/active/focus/disabled) paints from
   the CTA tokens, rather than setting background/color directly. */
.quantity-button__group .btn-square-icon {
  --bs-btn-color: var(--moshammer-on-cta);
  --bs-btn-bg: var(--moshammer-cta);
  --bs-btn-border-color: var(--moshammer-cta);
  --bs-btn-hover-color: var(--moshammer-on-cta);
  --bs-btn-hover-bg: var(--moshammer-cta-hover);
  --bs-btn-hover-border-color: var(--moshammer-cta-hover);
  --bs-btn-active-color: var(--moshammer-on-cta);
  --bs-btn-active-bg: var(--moshammer-cta-active);
  --bs-btn-active-border-color: var(--moshammer-cta-active);
  border: 0;
  /* Compact square control; height follows the natural .btn vertical padding so the
     stepper lines up with the Add-to-cart button beside it (see .form-control
     min-height:0). Only the width is fixed and the horizontal padding zeroed. */
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 0;
  padding-inline: 0;
  width: 2.5rem;
}

.quantity-button__group .form-control {
  background: var(--moshammer-input-light);
  border: 0;
  border-inline: 1px solid rgba(24, 27, 28, 0.12);
  border-radius: 0;
  color: var(--moshammer-on-light);
  text-align: center;
  /* Compact fixed width (fits up to 4 digits) and no forced field height, so the
     input no longer stretches to the 20-char default or the 44px global min-height. */
  flex: 0 0 auto;
  min-height: 0;
  padding-inline: 0.25rem;
  width: 3rem;
}

.form-control::placeholder {
  color: var(--moshammer-text-muted);
  opacity: 1;
}

.form-control:focus {
  background-color: var(--moshammer-surface-alt);
  border-color: var(--moshammer-accent);
  box-shadow: 0 0 0 0.2rem rgba(247, 158, 27, 0.16);
  color: var(--moshammer-text);
}

/* Keyboard focus: keep the single dedicated form-control ring (no browser
   outline to avoid a double ring) but make it clearly visible for a11y. */
.form-control:focus-visible {
  border-color: var(--moshammer-accent);
  box-shadow: 0 0 0 calc(var(--moshammer-focus-ring-width) * 2) var(--bs-focus-ring-color);
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--moshammer-text-muted);
}

input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
textarea.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill:hover,
textarea.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--moshammer-surface-alt) inset;
  -webkit-text-fill-color: var(--moshammer-text);
  caret-color: var(--moshammer-text);
}

/* Buttons inside a Bootstrap `.input-group` must sit flush against the adjacent
   input: a trailing button keeps only its right corners rounded, a leading button
   only its left corners. The theme's global `.btn { border-radius }` (unlayered)
   overrides Bootstrap's own corner reset, re-rounding the inner corners and leaving
   a notch that reads as a gap. Seen first on the password show/hide toggle (single
   trailing button), then on the +/- quantity steppers (a leading decrement button,
   the input, then a trailing increment button). Restore the flush attachment the
   way Hummingbird renders it. Higher specificity than `.btn`, so it wins by itself. */
.input-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

select:focus,
.form-select:focus {
  background-color: var(--moshammer-surface-alt);
  border-color: var(--moshammer-accent);
  box-shadow: 0 0 0 0.2rem rgba(247, 158, 27, 0.16);
  color: var(--moshammer-text);
}

select:focus-visible,
.form-select:focus-visible,
textarea.form-control:focus-visible {
  border-color: var(--moshammer-accent);
  box-shadow: 0 0 0 calc(var(--moshammer-focus-ring-width) * 2) var(--bs-focus-ring-color);
  outline: none;
}

select option,
select optgroup,
.form-select option,
.form-select optgroup {
  background: var(--moshammer-surface);
  color: var(--moshammer-text);
}

select option:disabled,
select optgroup:disabled,
.form-select option:disabled,
.form-select optgroup:disabled {
  color: var(--moshammer-text-muted);
}

select option:checked,
.form-select option:checked {
  background: var(--moshammer-surface-alt);
  color: var(--moshammer-text);
}

select:disabled,
.form-select:disabled {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--moshammer-text-muted);
}

/* ==========================================================================
   Buttons

   Hummingbird compiles Bootstrap inside `@layer bs-components` and its own
   variants inside `@layer bs-custom-components`, while this file is unlayered -
   so anything here wins over both regardless of specificity. Every button rule
   in those layers renders from Bootstrap's `--bs-btn-*` variables (base, hover,
   focus-visible, active, disabled and the `.btn-check` states all read them), so
   redefining the *variables* is the whole job: Bootstrap's own machinery then
   paints every state correctly, including states this file never mentions.

   That is the difference from the previous approach, which set `background` and
   `color` directly on `.btn-primary`. Doing that fixes exactly the one state it
   names and leaves everything else - the other eight Bootstrap variants, and
   any button rendered by a module - on stock Bootstrap colours. It also broke
   the back-office CTA control: the literal `color: #181b1c` meant a merchant
   could set a dark CTA and get dark text on a dark button.

   Only bind variables here. Setting `background`/`color` directly would shadow
   the variables again and re-introduce exactly that problem.
   ========================================================================== */

.btn {
  --bs-btn-border-radius: var(--moshammer-btn-radius);
  /* The theme draws its own focus ring (see the focus-visible rule above), so
     Bootstrap's glow is suppressed rather than recoloured - two indicators on
     one control read as a rendering bug. */
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 0.55;
  border-radius: var(--moshammer-btn-radius);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Primary / CTA ----------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: var(--moshammer-on-cta);
  --bs-btn-bg: var(--moshammer-cta);
  --bs-btn-border-color: var(--moshammer-cta);
  --bs-btn-hover-color: var(--moshammer-on-cta);
  --bs-btn-hover-bg: var(--moshammer-cta-hover);
  --bs-btn-hover-border-color: var(--moshammer-cta-hover);
  --bs-btn-active-color: var(--moshammer-on-cta);
  --bs-btn-active-bg: var(--moshammer-cta-active);
  --bs-btn-active-border-color: var(--moshammer-cta-active);
  --bs-btn-disabled-color: var(--moshammer-on-cta);
  --bs-btn-disabled-bg: var(--moshammer-cta);
  --bs-btn-disabled-border-color: var(--moshammer-cta);
}

/* Secondary / tertiary / basic — neutral surface buttons -------------------- */
.btn-secondary,
.btn-tertiary,
.btn-basic {
  --bs-btn-color: var(--moshammer-on-surface);
  --bs-btn-bg: var(--moshammer-surface-alt);
  --bs-btn-border-color: var(--moshammer-border);
  --bs-btn-hover-color: var(--moshammer-on-surface);
  --bs-btn-hover-bg: var(--moshammer-btn-ghost-hover-bg);
  --bs-btn-hover-border-color: var(--moshammer-btn-ghost-border-hover);
  --bs-btn-active-color: var(--moshammer-on-surface);
  --bs-btn-active-bg: var(--moshammer-btn-ghost-active-bg);
  --bs-btn-active-border-color: var(--moshammer-btn-ghost-border-hover);
  --bs-btn-disabled-color: var(--moshammer-text-muted);
  --bs-btn-disabled-bg: var(--moshammer-surface-alt);
  --bs-btn-disabled-border-color: var(--moshammer-border);
}

/* Hummingbird's .btn-basic is a bare text link with --bs-btn-padding-x: 0. Moshammer
   restyles it as a filled surface button (the variant block above), so it needs real
   horizontal padding or the label sits flush against the button edges — most visibly
   on the login "Forgot your password?" button, but also the checkout Cancel /
   different-address and password-reset back-to-login buttons. */
.btn-basic {
  --bs-btn-padding-x: 1.25rem;
}

/* Semantic variants — mapped onto the palette rather than Bootstrap's stock
   green/blue/red, which is what modules and core templates otherwise render. */
.btn-success {
  --bs-btn-color: var(--moshammer-on-meta);
  --bs-btn-bg: var(--moshammer-accent-meta);
  --bs-btn-border-color: var(--moshammer-accent-meta);
  --bs-btn-hover-color: var(--moshammer-on-meta);
  --bs-btn-hover-bg: var(--moshammer-meta-hover);
  --bs-btn-hover-border-color: var(--moshammer-meta-hover);
  --bs-btn-active-color: var(--moshammer-on-meta);
  --bs-btn-active-bg: var(--moshammer-meta-active);
  --bs-btn-active-border-color: var(--moshammer-meta-active);
  --bs-btn-disabled-color: var(--moshammer-on-meta);
  --bs-btn-disabled-bg: var(--moshammer-accent-meta);
  --bs-btn-disabled-border-color: var(--moshammer-accent-meta);
}

.btn-warning,
.btn-info {
  --bs-btn-color: var(--moshammer-on-accent);
  --bs-btn-bg: var(--moshammer-accent);
  --bs-btn-border-color: var(--moshammer-accent);
  --bs-btn-hover-color: var(--moshammer-on-accent);
  --bs-btn-hover-bg: var(--moshammer-accent-hover);
  --bs-btn-hover-border-color: var(--moshammer-accent-hover);
  --bs-btn-active-color: var(--moshammer-on-accent);
  --bs-btn-active-bg: var(--moshammer-accent-active);
  --bs-btn-active-border-color: var(--moshammer-accent-active);
  --bs-btn-disabled-color: var(--moshammer-on-accent);
  --bs-btn-disabled-bg: var(--moshammer-accent);
  --bs-btn-disabled-border-color: var(--moshammer-accent);
}

.btn-danger {
  --bs-btn-color: var(--moshammer-on-danger);
  --bs-btn-bg: var(--moshammer-danger);
  --bs-btn-border-color: var(--moshammer-danger);
  --bs-btn-hover-color: var(--moshammer-on-danger);
  --bs-btn-hover-bg: var(--moshammer-danger-hover);
  --bs-btn-hover-border-color: var(--moshammer-danger-hover);
  --bs-btn-active-color: var(--moshammer-on-danger);
  --bs-btn-active-bg: var(--moshammer-danger-active);
  --bs-btn-active-border-color: var(--moshammer-danger-active);
  --bs-btn-disabled-color: var(--moshammer-on-danger);
  --bs-btn-disabled-bg: var(--moshammer-danger);
  --bs-btn-disabled-border-color: var(--moshammer-danger);
}

.btn-light {
  --bs-btn-color: var(--moshammer-on-cta);
  --bs-btn-bg: var(--moshammer-card-light);
  --bs-btn-border-color: var(--moshammer-card-light);
  --bs-btn-hover-color: var(--moshammer-on-cta);
  --bs-btn-hover-bg: var(--moshammer-cta-hover);
  --bs-btn-hover-border-color: var(--moshammer-cta-hover);
  --bs-btn-active-color: var(--moshammer-on-cta);
  --bs-btn-active-bg: var(--moshammer-cta-active);
  --bs-btn-active-border-color: var(--moshammer-cta-active);
  --bs-btn-disabled-color: var(--moshammer-on-cta);
  --bs-btn-disabled-bg: var(--moshammer-card-light);
  --bs-btn-disabled-border-color: var(--moshammer-card-light);
}

.btn-dark {
  --bs-btn-color: var(--moshammer-text);
  --bs-btn-bg: var(--moshammer-surface);
  --bs-btn-border-color: var(--moshammer-surface);
  --bs-btn-hover-color: var(--moshammer-text);
  --bs-btn-hover-bg: var(--moshammer-surface-alt);
  --bs-btn-hover-border-color: var(--moshammer-surface-alt);
  --bs-btn-active-color: var(--moshammer-text);
  --bs-btn-active-bg: var(--moshammer-header);
  --bs-btn-active-border-color: var(--moshammer-header);
  --bs-btn-disabled-color: var(--moshammer-text-muted);
  --bs-btn-disabled-bg: var(--moshammer-surface);
  --bs-btn-disabled-border-color: var(--moshammer-surface);
}

/* Neutral outline variants — CONVERTED to a solid light CTA (a mirror of
   `.btn-primary`) at the merchant's request, so every neutral button reads as one
   solid style: light `--moshammer-cta` fill, black `--moshammer-on-cta` text, no
   ghost frame. These three are the neutral action outlines actually used in
   templates — `btn-outline-primary` (Continue shopping, "All featured products",
   category/pagination CTAs, …), `-secondary` and `-tertiary`. Text colour is
   applied by the `.btn { color: var(--bs-btn-color) }` rule above, so it follows
   `--bs-btn-color` automatically. Binding the variables (not painting bg/color)
   keeps hover/active/disabled/focus consistent with `.btn-primary`. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-tertiary {
  --bs-btn-color: var(--moshammer-on-cta);
  --bs-btn-bg: var(--moshammer-cta);
  --bs-btn-border-color: var(--moshammer-cta);
  --bs-btn-hover-color: var(--moshammer-on-cta);
  --bs-btn-hover-bg: var(--moshammer-cta-hover);
  --bs-btn-hover-border-color: var(--moshammer-cta-hover);
  --bs-btn-active-color: var(--moshammer-on-cta);
  --bs-btn-active-bg: var(--moshammer-cta-active);
  --bs-btn-active-border-color: var(--moshammer-cta-active);
  --bs-btn-disabled-color: var(--moshammer-on-cta);
  --bs-btn-disabled-bg: var(--moshammer-cta);
  --bs-btn-disabled-border-color: var(--moshammer-cta);
}

/* btn-outline-light / -dark are unused in templates (contextual Bootstrap
   variants a module might render on its own background); keep them as the
   transparent ghost so they still read sensibly there rather than as a light fill. */
.btn-outline-light,
.btn-outline-dark {
  --bs-btn-color: var(--moshammer-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--moshammer-btn-ghost-border);
  --bs-btn-hover-color: var(--moshammer-text);
  --bs-btn-hover-bg: var(--moshammer-btn-ghost-hover-bg);
  --bs-btn-hover-border-color: var(--moshammer-btn-ghost-border-hover);
  --bs-btn-active-color: var(--moshammer-text);
  --bs-btn-active-bg: var(--moshammer-btn-ghost-active-bg);
  --bs-btn-active-border-color: var(--moshammer-btn-ghost-border-hover);
  --bs-btn-disabled-color: var(--moshammer-text-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--moshammer-border);
}

.btn-outline-success {
  --bs-btn-color: var(--moshammer-accent-meta);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--moshammer-accent-meta);
  --bs-btn-hover-color: var(--moshammer-on-meta);
  --bs-btn-hover-bg: var(--moshammer-accent-meta);
  --bs-btn-hover-border-color: var(--moshammer-accent-meta);
  --bs-btn-active-color: var(--moshammer-on-meta);
  --bs-btn-active-bg: var(--moshammer-meta-active);
  --bs-btn-active-border-color: var(--moshammer-meta-active);
  --bs-btn-disabled-color: var(--moshammer-text-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--moshammer-border);
}

.btn-outline-danger {
  --bs-btn-color: var(--moshammer-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--moshammer-danger);
  --bs-btn-hover-color: var(--moshammer-on-danger);
  --bs-btn-hover-bg: var(--moshammer-danger);
  --bs-btn-hover-border-color: var(--moshammer-danger);
  --bs-btn-active-color: var(--moshammer-on-danger);
  --bs-btn-active-bg: var(--moshammer-danger-active);
  --bs-btn-active-border-color: var(--moshammer-danger-active);
  --bs-btn-disabled-color: var(--moshammer-text-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--moshammer-border);
}

.btn-outline-warning,
.btn-outline-info {
  --bs-btn-color: var(--moshammer-accent);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--moshammer-accent);
  --bs-btn-hover-color: var(--moshammer-on-accent);
  --bs-btn-hover-bg: var(--moshammer-accent);
  --bs-btn-hover-border-color: var(--moshammer-accent);
  --bs-btn-active-color: var(--moshammer-on-accent);
  --bs-btn-active-bg: var(--moshammer-accent-active);
  --bs-btn-active-border-color: var(--moshammer-accent-active);
  --bs-btn-disabled-color: var(--moshammer-text-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--moshammer-border);
}

/* Link-style buttons follow the link tokens, matching the `a` bindings above. */
.btn-link {
  --bs-btn-color: var(--moshammer-accent-meta);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--moshammer-accent);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--moshammer-accent);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--moshammer-text-muted);
}

/* Bootstrap's close button is an SVG mask tinted by its own variables. */
/* Close button tinted theme yellow (accent). Bootstrap's close icon is a fixed-fill
   SVG background, so it's re-painted here as a mask filled with the accent colour —
   reliable regardless of the SVG's own fill. */
.btn-close {
  --bs-btn-close-opacity: 0.85;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: none;
  background-color: var(--moshammer-accent);
  background-image: none;
  -webkit-mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
  mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
  filter: none;
}

.alert-warning {
  background: rgba(247, 158, 27, 0.12);
  border-color: rgba(247, 158, 27, 0.25);
  color: var(--moshammer-text);
}

.badge.bg-primary {
  background: rgba(247, 158, 27, 0.16) !important;
  color: var(--moshammer-accent) !important;
}

/* Product image flags, painted from the `--moshammer-flag-*` tokens (theme engine
   "Product labels" tab). theme.css's flag-greying `!important` rule was removed
   (`.product-flags .badge:not(.discount)` dropped from the `.text-bg-primary`
   utility) so these plain, unlayered token rules win — giving both background and
   text real, configurable colours. The base rule covers any flag type; new / sale
   override it. `border-color: transparent` neutralises theme.css's 1px flag border. */
.product-flags .badge {
  background: var(--moshammer-flag-default-bg);
  border-color: transparent;
  color: var(--moshammer-flag-default-text);
}

.product-flags .badge.new {
  background: var(--moshammer-flag-new-bg);
  color: var(--moshammer-flag-new-text);
}

.product-flags .badge.on-sale,
.product-flags .badge.discount {
  background: var(--moshammer-flag-sale-bg);
  color: var(--moshammer-flag-sale-text);
}


.breadcrumb,
.breadcrumb-item,
.breadcrumb-link {
  color: var(--moshammer-text-muted);
}

.breadcrumb-link {
  color: var(--moshammer-accent-meta);
}

.breadcrumb-link:hover {
  color: var(--moshammer-text);
}

.footer__before,
.footer__main {
  background: var(--moshammer-surface);
  color: var(--moshammer-text-muted);
}

.footer__before {
  border-top: 1px solid var(--moshammer-border);
}


.footer-block__title,
.footer-block__title a,
.footer a:hover {
  color: var(--moshammer-text);
}

.footer-block a,
.copyright {
  color: var(--moshammer-text-muted);
}

.block-category,
.left-column > *,
.right-column > * {
  background: transparent;
}

/* Catalog and content surfaces */

.page-cms .page-content,
.page-contact .page-content,
.contact-form,
#custom-text,
.custom-text,
.category__description {
  background: var(--moshammer-surface);
  border: 0;
  border-radius: 1.25rem;
  color: var(--moshammer-text-muted);
  /* These content surfaces carry the elevated card effect (border + radius +
     shadow, added later in the file) but the 1.0.60 layout revert left them with
     no inner padding, so text sat flush against the card edge on CMS/content pages.
     Restore a responsive inset: ~1.5rem on mobile up to 2.5rem on desktop. */
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* On the contact page the real card is the nested `.contact-form`, which already
   gets the inset above. Its wrapper `.page-contact .page-content` is also in the
   group, so keep its own padding at 0 — otherwise the form is double-inset (~82px).
   The wrapper's border/shadow are pre-existing; only its padding is neutralised. */
.page-contact .page-content {
  padding: 0;
}

/* Auth form cards (register / login / checkout customer form) carry the elevated
   card effect but the 1.0.60 revert left them with no inner padding, so fields sat
   flush to the card edge. Same responsive inset as the CMS/content surfaces. */
#customer-form,
.register-form,
.login-form {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* On the registration page `.register-form` wraps the real `#customer-form` card;
   both are in the card group, so neutralise the wrapper to avoid a double card and
   double inset (the inner `#customer-form` keeps the border/shadow/padding). */
.register-form:has(#customer-form) {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.category__header {
  margin-bottom: 2.25rem;
}

.category__cover {
  background: var(--moshammer-card-light);
  border-radius: 1.25rem;
  overflow: hidden;
}


.products__selection {
  align-items: end;
  justify-content: space-between;
}

.products__count {
  color: var(--moshammer-text-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.products__sort {
  align-items: center;
}


.module-products,
.products-section-title,
.section-title {
  color: var(--moshammer-text);
}

.products-section-title,
.section-title {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.product-miniature,
.js-product-miniature {
  background: transparent;
}

.product-miniature__inner {
  background: var(--moshammer-card-light);
  border-radius: var(--moshammer-product-card-radius);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
  color: var(--moshammer-on-light);
  overflow: hidden;
}

.product-miniature__top {
  background: var(--moshammer-card-light);
  /* Frame the image inside the card instead of running it flush to the rounded
     edges. The 1.0.60 layout revert dropped this (Hummingbird leaves the top
     unpadded), which left the square image colliding with the card's radius. */
  padding: 0.75rem 0.75rem 0;
}

.product-miniature__bottom {
  /* Hummingbird pads the content 1rem/.5rem; widen the sides to 1rem so the
     title, price and add-to-cart clear the card edge on the elevated card. */
  padding: 1rem;
}

.product-miniature__image-container,
.thumbnail-container {
  background: var(--moshammer-card-light);
  border-radius: 1rem;
  overflow: hidden;
}

.product-miniature__image-container img,
.thumbnail-container img {
  /* 4:3 rather than square: the listing card was 548px tall on an 812px phone,
     so roughly 1.5 products fitted per screen. `object-fit: contain` is kept so
     no product photography is cropped - the frame is shorter, the image is not. */
  background: var(--moshammer-card-light);
  object-fit: contain;
}



/* Listing titles are clamped to a single line so every card in a row is the
   same height and the grid stays dense. This is a visual clip only: the full
   product name stays in the DOM and in the link's `aria-label`, so assistive
   technology still announces it in full.

   `-webkit-line-clamp` is deliberately NOT used here. The title is a grid item
   (`.product-miniature__infos` is a grid), and grid items have their `display`
   blockified - `-webkit-box` resolves to `flow-root`, which silently disables
   line-clamp. `white-space: nowrap` + `text-overflow` works on a grid item and
   is the correct tool for a single line, since the grid column already
   constrains the width. */
.product-miniature__title {
  color: var(--moshammer-on-light);
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-miniature__title:hover,
.product-miniature__title:focus-visible {
  color: var(--moshammer-on-light);
  opacity: 0.82;
}

.product-miniature__prices {
  align-items: baseline;
}

.product-miniature__price {
  color: var(--moshammer-on-light);
  font-size: 1.15rem;
  font-weight: 700;
}

.product-miniature__regular-price {
  color: rgba(48, 48, 48, 0.72);
  text-decoration-thickness: 1px;
}

.product-miniature__discount-price {
  order: -1;
}





.product-miniature__add,
.product__add-to-cart-button {
  border-radius: 0.65rem;
}

.product-miniature__add {
  justify-content: center;
}


.product-miniature__details {
  background: transparent;
  border-color: rgba(24, 27, 28, 0.16);
  color: var(--moshammer-on-light);
}

.product-miniature__details:hover,
.product-miniature__details:focus-visible {
  background: rgba(24, 27, 28, 0.05);
  border-color: rgba(24, 27, 28, 0.24);
  color: var(--moshammer-on-light);
}

.product-miniature__quickview-button,
.product-miniature__quickview-touch {
  background: rgba(254, 254, 254, 0.88);
  border-color: rgba(24, 27, 28, 0.08);
  color: var(--moshammer-on-light);
}


.product__carousel,
.product__no-image {
  background: var(--moshammer-card-light);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.product__carousel .carousel-inner,
.product__no-image picture {
  background: var(--moshammer-card-light);
  border-radius: 1rem;
}

.product__carousel .carousel-item img,
.product__no-image img {
  object-fit: contain;
}

.product__thumbnail {
  background: var(--moshammer-card-light);
  border: 1px solid transparent;
  border-radius: 1rem;
}

.product__thumbnail.active,
.product__thumbnail[aria-current="true"] {
  border-color: var(--moshammer-input-border);
}

.product__thumbnail-image {
  border-radius: 0.75rem;
}

.product__zoom,
.product__carousel .carousel-control-prev,
.product__carousel .carousel-control-next {
  color: var(--moshammer-on-light);
}

.product__right,
.quickview__body .product__right {
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Product title: no font-size override here on purpose. The markup carries
   Hummingbird's `h2` class, so the size comes from the baseline theme
   (`calc(var(--bs-body-font-size) * 1.5)`). The previous
   `clamp(2rem, 4vw, 3.2rem)` resolved to 51.2px, which wrapped a typical
   product name onto six lines (338px tall) and pushed the price and
   add-to-cart control below the fold. Uses the primary text token so the
   page heading outranks the body copy. */
.product__name {
  color: var(--moshammer-text);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.product__manufacturer a {
  color: var(--moshammer-accent-meta);
}


.product__price {
  color: var(--moshammer-text);
  font-size: clamp(1.65rem, 2.8vw, 2.15rem);
  font-weight: 700;
}

.product__regular-price,
.product__unit-price,
.product__tax-infos,
.product__taxless-price,
.product__description-short,
.product__delivery-infos,
.product__minimal-quantity {
  color: var(--moshammer-text-muted);
}

/* Quick view runs with B2B mode on (PS_B2B_ENABLE=1), so product-prices.tpl prints
   the tax-excluded price beneath the "Tax included" label — two stacked tax lines in
   the modal (the excluded one is also unformatted, e.g. "600 tax excluded"). Hide the
   redundant tax-excluded line in the quick view so it reads as a single "Tax included". */
.quickview .product__taxless-price {
  display: none;
}

.product__discount-percentage,
.product__discount-amount {
  color: var(--moshammer-accent) !important;
}


.product__availability-status.text-warning {
  color: var(--moshammer-accent) !important;
}

/* Keep the positive "in stock" state on the green meta accent so it stays
   visually distinct from the orange low-stock / availability warning. */
.product__availability-status.text-success {
  color: var(--moshammer-accent-meta) !important;
}

.product__availability-status {
  align-items: flex-start;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* The page loader and terms-modal spinners use `text-primary-emphasis`, which
   the dark theme maps to a near-black colour and renders invisible on the dark
   surfaces. Force these spinners onto the visible accent. */
.spinner-border.text-primary-emphasis,
.spinner-grow.text-primary-emphasis {
  color: var(--moshammer-accent) !important;
}

.product__actions-qty-add {
  align-items: end;
}


.product__accordion,
.product__bottom-right .blockreassurance {
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  border-radius: 1.25rem;
  overflow: hidden;
}

/* Hummingbird zeroes the accordion's horizontal padding globally
   (`--bs-accordion-*-padding-x: 0` in @layer bs-components) for its borderless
   flush accordions. Moshammer wraps this one in a bordered, rounded card, so
   flush content would sit against the border. Restore Bootstrap's standard
   accordion inset (1rem 1.25rem) - scoped to this card only, via Bootstrap's own
   variables so it reaches the header and the body alike and leaves the cart and
   checkout accordions untouched. The body's vertical padding is also brought
   back from 0 so content clears the header and the card's rounded corners. */
.product__accordion {
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
}

.product__accordion .accordion-button {
  background: transparent;
  color: var(--moshammer-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product__accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.03);
}

.product__accordion .accordion-body,
.product__description,
.product__attachments,
.product__details {
  color: var(--moshammer-text-muted);
}

.moshammer-cart {
  padding-block: 2.5rem 4rem;
}

.moshammer-cart__hero {
  margin-bottom: 2rem;
  text-align: center;
}

.moshammer-cart__title {
  color: var(--moshammer-text);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0;
  text-transform: uppercase;
}

.moshammer-cart__subtitle {
  color: var(--moshammer-text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}

.moshammer-cart__alert:empty {
  display: none;
}

.moshammer-cart__alert {
  margin-bottom: 1.5rem;
}

.moshammer-cart__grid {
  margin-bottom: 0;
}

.moshammer-cart hr {
  display: none;
}

.moshammer-cart__panel,
.moshammer-cart__footer-block,
.moshammer-cart__trust {
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  border-radius: 0.35rem;
}

.moshammer-cart__panel {
  padding: 1.5rem;
}

.moshammer-cart__panel--summary {
  padding: 1.5rem;
}

.moshammer-cart__summary-head {
  margin-bottom: 1.5rem;
}

.moshammer-cart__summary-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0;
  text-transform: uppercase;
}

.moshammer-cart__sticky {
  position: sticky;
  top: calc(var(--scroll-padding-top) + 1rem);
}

.moshammer-cart__continue {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0;
  width: 100%;
}

.moshammer-cart__security {
  align-items: center;
  color: var(--moshammer-text-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.5rem;
  justify-content: center;
  letter-spacing: 0.08em;
  margin: 1rem 0 0;
  text-transform: uppercase;
}

.moshammer-cart__security .material-icons {
  font-size: 1rem;
}

.moshammer-cart__footer-block {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
}

.moshammer-cart__footer-block > *:last-child {
  margin-bottom: 0;
}

.moshammer-cart__trust {
  margin-top: 1.5rem;
  padding: 1.5rem;
}

.moshammer-cart__trust .blockreassurance,
.moshammer-cart__trust .blockreassurance--dark {
  background: transparent;
}



.moshammer-cart__trust .reassurance,
.moshammer-cart__trust .reassurance--link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--moshammer-text);
  text-decoration: none;
}

.moshammer-cart__trust .reassurance__image {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  justify-content: center;
}

.moshammer-cart__trust .reassurance__image img {
  filter: grayscale(1) brightness(1.5);
  object-fit: contain;
}

.moshammer-cart__trust .reassurance__title {
  color: var(--moshammer-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.moshammer-cart__trust .reassurance__desc {
  color: var(--moshammer-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.moshammer-cart__cross-sell {
  margin-top: 3.5rem;
}

.moshammer-cart__cross-sell .products-section-title,
.moshammer-cart__cross-sell .section-title,
.moshammer-cart__cross-sell h2 {
  color: var(--moshammer-text);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.moshammer-cart__cross-sell .product-miniature,
.moshammer-cart__cross-sell .js-product-miniature {
  background: transparent;
}

.moshammer-cart__cross-sell .product-miniature__inner {
  box-shadow: none;
}

.moshammer-cart__cross-sell img {
  border-radius: 0.35rem;
}

.moshammer-cart-list__items {
  display: flex;
  flex-direction: column;
}

.moshammer-cart-list__item + .moshammer-cart-list__item {
  margin-top: 1.5rem;
  padding-top: 0;
}

.moshammer-cart-list__empty {
  color: var(--moshammer-text-muted);
  margin: 0;
}

.moshammer-cart-line {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.moshammer-cart-line__media {
  align-self: start;
  max-width: 8rem;
}

.moshammer-cart-line__image-link {
  background: transparent;
  border-radius: 0;
  /* Block-level flex (not inline-flex): as an inline box it sat on the baseline
     of the media cell's line box, dropping the image ~18px below the cell top so
     it no longer lined up with the product title. Block-level removes that line
     box, so the image sits flush at the top of the (already `align-self: start`)
     media cell, level with the title. `width: fit-content` keeps it shrink-wrapped
     to the image so the block flex doesn't widen the media column. */
  display: flex;
  width: fit-content;
  overflow: visible;
}

.moshammer-cart-line__image {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.moshammer-cart-line__content {
  min-width: 0;
}

.moshammer-cart-line__header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.moshammer-cart-line__identity {
  min-width: 0;
}

.moshammer-cart-line__title {
  color: var(--moshammer-text);
  display: inline-block;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.35rem;
  text-transform: none;
}

.moshammer-cart-line__reference,
.moshammer-cart-line__meta,
.moshammer-cart-line__delivery {
  color: var(--moshammer-text-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  margin: 0.15rem 0 0;
  text-transform: uppercase;
}

.moshammer-cart-line__reference-label,
.moshammer-cart-line__meta-label {
  color: var(--moshammer-text-muted);
}

.moshammer-cart-line__reference-value,
.moshammer-cart-line__meta-value {
  color: var(--moshammer-text);
}

.moshammer-cart-line__total {
  color: var(--moshammer-text);
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0;
  white-space: nowrap;
}

.moshammer-cart-line__availability {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  font-size: 0.85rem;
  margin: 0.75rem 0 0;
}

.moshammer-cart-line__availability .material-icons {
  font-size: 1rem;
}

.moshammer-cart-line__availability--success {
  color: var(--moshammer-accent-meta);
}

.moshammer-cart-line__availability--warning {
  color: var(--moshammer-accent);
}

.moshammer-cart-line__availability--danger {
  color: #ff8a95;
}

.moshammer-cart-line__footer {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  justify-content: space-between;
  margin-top: 1rem;
}

.moshammer-cart-line__pricing {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  min-width: 0;
}

.moshammer-cart-line__price-row,
.moshammer-cart-line__discount {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.moshammer-cart-line__price-row--muted {
  color: var(--moshammer-text-muted);
}

.moshammer-cart-line__price-label {
  color: var(--moshammer-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.moshammer-cart-line__price-value {
  color: var(--moshammer-text);
  font-size: 0.875rem;
}

.moshammer-cart-line__discount-regular {
  color: var(--moshammer-text-muted);
  text-decoration: line-through;
}

.moshammer-cart-line__discount-badge {
  color: var(--moshammer-text);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.moshammer-cart-line__price-block {
  color: var(--moshammer-text-muted);
  font-size: 0.75rem;
}

.moshammer-cart-line__quantity {
  margin-top: 0.4rem;
  min-width: 0;
}

.moshammer-cart-line__quantity-button .quantity-button__group {
  background: var(--moshammer-input-light);
  border: 1px solid var(--moshammer-input-border);
  border-radius: 0.25rem;
  overflow: hidden;
  width: fit-content;
}

/* +/- buttons match the theme's primary/CTA button — same bindings as the
   product-page stepper (.quantity-button__group .btn-square-icon). */
.moshammer-cart-line__quantity-button .btn-square-icon {
  --bs-btn-color: var(--moshammer-on-cta);
  --bs-btn-bg: var(--moshammer-cta);
  --bs-btn-border-color: var(--moshammer-cta);
  --bs-btn-hover-color: var(--moshammer-on-cta);
  --bs-btn-hover-bg: var(--moshammer-cta-hover);
  --bs-btn-hover-border-color: var(--moshammer-cta-hover);
  --bs-btn-active-color: var(--moshammer-on-cta);
  --bs-btn-active-bg: var(--moshammer-cta-active);
  --bs-btn-active-border-color: var(--moshammer-cta-active);
  border: 0;
}

.moshammer-cart-line__quantity-button .form-control {
  border: 0;
  border-inline: 1px solid rgba(24, 27, 28, 0.12);
  border-radius: 0;
  color: var(--moshammer-on-light);
  text-align: center;
}

.moshammer-cart-line__actions {
  align-items: center;
  align-self: flex-end;
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  justify-content: flex-end;
  margin-inline-start: auto;
}

.moshammer-cart-line__remove {
  align-items: center;
  background: #ef3224;
  border: 1px solid #ef3224;
  border-radius: 999px;
  color: var(--moshammer-on-light);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  text-decoration: none;
  width: 2rem;
}

.moshammer-cart-line__remove .material-icons {
  font-size: var(--moshammer-cart-remove-icon-size);
}

.moshammer-cart-line__remove:hover,
.moshammer-cart-line__remove:focus-visible {
  background: #ef3224;
  border-color: #ef3224;
  color: var(--moshammer-on-light);
  opacity: 0.92;
}

.moshammer-cart-line__gift {
  align-items: center;
  color: var(--moshammer-text-muted);
  display: inline-flex;
  gap: 0.5rem;
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cart-summary__totals {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


.cart-summary__line {
  align-items: flex-start;
  justify-content: space-between;
}

.cart-summary__label {
  color: var(--moshammer-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.cart-summary__value {
  color: var(--moshammer-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: right;
}

.cart-summary__value-inner {
  color: var(--moshammer-text-muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

.cart-summary__line--discount .cart-summary__label,
.cart-summary__line--discount .cart-summary__value {
  color: var(--moshammer-accent);
}

.cart-summary__line--grand-total {
  margin-top: 0.5rem;
  padding-top: 0;
}

.cart-summary__line--grand-total .cart-summary__label,
.cart-summary__line--grand-total .cart-summary__value {
  color: var(--moshammer-text);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cart-summary__line--tax .cart-summary__label,
.cart-summary__line--tax .cart-summary__value {
  color: var(--moshammer-text-muted);
  font-size: 0.8125rem;
}



.cart-summary__notice {
  margin-bottom: 1rem;
}

.moshammer-cart__cta-stack .express-checkout,
.moshammer-cart__express {
  width: 100%;
}

.cart-voucher {
  margin-top: 0.5rem;
  padding-top: 0;
}

/* The Apply button matches the promo input's field height so the field + button
   read as a proportioned pair. The form is a plain flex row (input + .btn, not an
   input-group), and Moshammer top-aligns it at >=768px (align-items: start), which
   left the shorter natural-height button (~38px) floating above a gap in the 44px
   row. Binding the button to the same field-height token aligns their edges at
   every breakpoint. */
.cart-voucher__form .btn {
  min-height: var(--moshammer-form-field-height);
}

.cart-voucher__head {
  margin-bottom: 0.75rem;
}

.cart-voucher__head--toggle {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0;
}

.cart-voucher__title {
  color: var(--moshammer-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.cart-voucher__list {
  list-style: none;
}

.cart-voucher__value {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
}

.cart-voucher__remove {
  color: var(--moshammer-text-muted);
}

.cart-voucher__remove:hover,
.cart-voucher__remove:focus-visible {
  color: var(--moshammer-text);
}

.cart-voucher__accordion {
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.cart-voucher__accordion-item {
  background: transparent;
  border: 0;
}

.cart-voucher__accordion-button {
  background: transparent;
  color: var(--moshammer-text);
  font-size: 0.8125rem;
  font-weight: 600;
  justify-content: flex-end;
  letter-spacing: 0.1em;
  min-height: 2rem;
  padding: 0 0 0.75rem;
  text-transform: uppercase;
}

.cart-voucher__accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--moshammer-text);
}

.cart-voucher__accordion-button::after {
  margin-inline-start: 0;
}

.cart-voucher__accordion-button--icon {
  flex: 0 0 auto;
  min-height: 1.5rem;
  padding: 0;
  width: 1.5rem;
}






.cart-voucher__highlight .h5 {
  color: var(--moshammer-text);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cart-voucher__offers {
  list-style: none;
}

.cart-voucher__code {
  color: var(--moshammer-text-muted);
  font-size: 0.8125rem;
}

.cart-voucher__code-value {
  background: transparent;
  border: 0;
  color: var(--moshammer-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Checkout surfaces */

body#checkout #wrapper,
body#checkout .columns-container,
body#checkout #center-column.page,
body#checkout .page.page--full-width,
.checkout-steps,
.checkout-steps__desktop,
.checkout-steps__mobile,
.checkout-steps__list {
  background: var(--moshammer-page);
}



.checkout-steps__number {
  background: rgba(255, 255, 255, 0.12);
  color: var(--moshammer-text);
}

.checkout-steps__step--current .checkout-steps__number,
.checkout-steps__step--success .checkout-steps__number {
  background: var(--moshammer-cta);
  color: var(--moshammer-on-light);
}

.checkout-steps__btn,
.checkout-steps__title,
.checkout-steps__subtitle {
  color: var(--moshammer-text-muted);
}

.checkout-steps__step--current .checkout-steps__btn,
.checkout-steps__step--current .checkout-steps__title,
.checkout-steps__step--success .checkout-steps__btn,
.checkout-steps__step--success .checkout-steps__title {
  color: var(--moshammer-text);
}

.checkout-grid {
  --bs-link-color: var(--moshammer-text);
  --bs-link-color-rgb: 252, 252, 252;
  --bs-link-hover-color: var(--moshammer-accent-meta);
  --bs-link-hover-color-rgb: 14, 188, 95;
}

.checkout-grid__content .step {
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  border-radius: 0.35rem;
  color: var(--moshammer-text);
  /* The step is a surface card (bg + border + radius) but shipped with no
     inset, so the step title and the whole form sat flush against the card
     edges. Give it a card inset - one notch above the inner option/address
     panels (1rem) so the nesting reads outer > inner. */
  padding: 1.5rem;
}

/* On the current step the title sits directly above the form; drop its default
   heading top margin so the 1.5rem card inset above it isn't doubled, and keep
   a clear gap down to the form body. */
.checkout-grid__content .step > .step__title:first-child {
  margin-top: 0;
}

.checkout-grid__content .step__title,
.checkout-grid__content .step__content,
.checkout-grid__content .step .form-label,
.checkout-grid__content .step .form-check-label,
.checkout-grid__content .step .h3,
.checkout-grid__content .step .h4,
.checkout-grid__content .step .h5 {
  color: var(--moshammer-text);
}

.checkout-grid__content .step__title hr {
  border-top-color: var(--moshammer-border);
  opacity: 1;
}

.checkout-grid__content .nav-underline {
  --bs-nav-underline-link-active-color: var(--moshammer-accent-meta);
}

.checkout-grid__content .nav-underline .nav-link.active,
.checkout-grid__content .nav-underline .show > .nav-link {
  border-bottom-color: var(--moshammer-cta);
}

.checkout__summary-accordion-item {
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  border-radius: 0.35rem;
  color: var(--moshammer-text);
  overflow: hidden;
}

.checkout__summary-accordion .accordion-button,
.checkout__summary-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--moshammer-text);
}

.checkout__summary-accordion .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2);
}


body#checkout .checkout-grid .card,
body#checkout .checkout-grid .address-card__container,
body#checkout .checkout-grid .payment-option,
body#checkout .checkout-grid .payment-option__additional-information,
body#checkout .checkout-grid .delivery-option__label,
body#checkout .checkout-grid .delivery-option__extra-content {
  background: var(--moshammer-surface);
  border-color: var(--moshammer-border);
  color: var(--moshammer-text);
}

/* Checkout panel insets (Hummingbird values). On the standard multi-step
   checkout the cart-summary sidebar, voucher block, address cards and the
   payment/delivery option panels render with content against their dark edges.
   Give them the theme's card inset so nothing sits flush. Uses Hummingbird's own
   values: 1rem for the address card (its `.address-card__container` default) and
   the card body (`--bs-card-spacer`), 1.25rem for the summary panel.

   Scoped to `body#checkout` AND the standard checkout classes. The one-page
   checkout renders `advancedcartcheckout-onepage-*` cards (padded by the module
   itself) and has no `.cart-summary` container, and the cart page uses the
   bespoke `.moshammer-cart` layout - none of them match these selectors, so this
   cannot double-pad or disturb them. Higher specificity than the bare
   Hummingbird rules, so it also wins if a component was rendered flush. */
body#checkout .cart-summary {
  padding: 1.25rem;
}

body#checkout .checkout-grid .card > .card-body {
  padding: 1rem;
}

body#checkout .checkout-grid .address-card__container {
  padding: 1rem;
}

body#checkout .checkout-grid .payment-option,
body#checkout .checkout-grid .delivery-option__label {
  padding: 1rem;
}

#checkout-personal-information-step .nav-underline .nav-link,
.checkout-grid .cart-summary__products-accordion .accordion-button,
#checkout-login-form .btn-basic {
  color: var(--moshammer-text);
}

#checkout-personal-information-step .nav-underline .nav-link:hover,
#checkout-personal-information-step .nav-underline .nav-link:focus-visible,
.checkout-grid .cart-summary__products-accordion .accordion-button:hover,
.checkout-grid .cart-summary__products-accordion .accordion-button:focus-visible,
#checkout-login-form .btn-basic:hover,
#checkout-login-form .btn-basic:focus-visible {
  color: var(--moshammer-accent);
}


#back-to-login.btn-basic {
  color: var(--moshammer-text);
}

#back-to-login.btn-basic:hover,
#back-to-login.btn-basic:focus-visible {
  color: var(--moshammer-accent);
}

#checkout-personal-information-step .form-text,
#checkout-personal-information-step em,
#checkout-personal-information-step .text-body-tertiary,
#checkout-personal-information-step .form-check-label .form-text,
#checkout-personal-information-step .form-check-label small {
  color: #929393 !important;
}

#checkout-personal-information-step .form-text a,
#checkout-personal-information-step .form-check-label .form-text a {
  color: var(--moshammer-accent-meta);
}

/* Advanced cart checkout runtime surfaces */

body#checkout .advancedcartcheckout-flow,
body#checkout .advancedcartcheckout-summary-card {
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  color: var(--moshammer-text);
  --bs-link-color: var(--moshammer-text);
  --bs-link-color-rgb: 252, 252, 252;
  --bs-link-hover-color: var(--moshammer-accent-meta);
  --bs-link-hover-color-rgb: 14, 188, 95;
}

body#checkout .advancedcartcheckout-auth__panel,
body#checkout .advancedcartcheckout-addresses,
body#checkout .advancedcartcheckout-step,
body#checkout .advancedcartcheckout-step__content,
body#checkout .advancedcartcheckout-payment-panel,
body#checkout .advancedcartcheckout-summary-card__payment,
body#checkout .advancedcartcheckout-summary-card__top,
body#checkout .advancedcartcheckout-summary-card__totals {
  color: var(--moshammer-text);
}

body#checkout .advancedcartcheckout-auth__tabs {
  --bs-nav-underline-link-active-color: var(--moshammer-accent-meta);
}

body#checkout .advancedcartcheckout-auth__tab,
body#checkout .advancedcartcheckout-auth__tab.active,
body#checkout .advancedcartcheckout-auth__tab.is-active,
body#checkout #checkout-login-form .btn-basic,
body#checkout .advancedcartcheckout-step a:not(.btn):not(.link-danger),
body#checkout .advancedcartcheckout-payment-panel a:not(.btn):not(.link-danger),
body#checkout .advancedcartcheckout-summary-card a:not(.btn):not(.link-danger) {
  color: var(--moshammer-accent-meta);
}

body#checkout .advancedcartcheckout-auth__tab.active,
body#checkout .advancedcartcheckout-auth__tab.is-active {
  border-bottom-color: var(--moshammer-cta);
}

body#checkout .advancedcartcheckout-auth__tab:hover,
body#checkout .advancedcartcheckout-auth__tab:focus-visible,
body#checkout #checkout-login-form .btn-basic:hover,
body#checkout #checkout-login-form .btn-basic:focus-visible,
body#checkout .advancedcartcheckout-step a:not(.btn):not(.link-danger):hover,
body#checkout .advancedcartcheckout-step a:not(.btn):not(.link-danger):focus-visible,
body#checkout .advancedcartcheckout-payment-panel a:not(.btn):not(.link-danger):hover,
body#checkout .advancedcartcheckout-payment-panel a:not(.btn):not(.link-danger):focus-visible,
body#checkout .advancedcartcheckout-summary-card a:not(.btn):not(.link-danger):hover,
body#checkout .advancedcartcheckout-summary-card a:not(.btn):not(.link-danger):focus-visible {
  color: var(--moshammer-accent);
}

body#checkout .advancedcartcheckout-addresses__billing-option {
  background: transparent;
  border: 0;
  color: var(--moshammer-text-muted);
}

body#checkout .advancedcartcheckout-addresses__billing-option:hover,
body#checkout .advancedcartcheckout-addresses__billing-option:focus-visible {
  color: var(--moshammer-text);
}

body#checkout .advancedcartcheckout-addresses__billing-option.is-active,
body#checkout .advancedcartcheckout-addresses__billing-option[aria-pressed="true"] {
  background: var(--moshammer-cta);
  color: var(--moshammer-on-light);
}

body#checkout .advancedcartcheckout-place-order .btn-primary.disabled,
body#checkout .advancedcartcheckout-place-order .btn-primary:disabled,
body#checkout .advancedcartcheckout-summary-card .btn-primary.disabled,
body#checkout .advancedcartcheckout-summary-card .btn-primary:disabled {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: none;
  color: var(--moshammer-text);
  cursor: not-allowed;
  opacity: 1;
}

.moshammer-empty-cart {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto 3.5rem;
  max-width: 36rem;
  padding: 4rem 1rem 0;
  text-align: center;
}

.moshammer-empty-cart__icon {
  align-items: center;
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-border);
  border-radius: 999px;
  display: inline-flex;
  height: 5.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  width: 5.5rem;
}

.moshammer-empty-cart__icon .material-icons {
  color: var(--moshammer-text-muted);
  font-size: 2rem;
}

.moshammer-empty-cart__text {
  color: var(--moshammer-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: 32rem;
}

.moshammer-empty-cart__action {
  min-width: 14rem;
}


@media (min-width: 768px) {

  .moshammer-cart {
    padding-block: 3.5rem 5rem;
  }

  .moshammer-cart__hero {
    margin-bottom: 2.75rem;
  }

  .moshammer-cart__panel,
  .moshammer-cart__panel--summary {
    padding: 2rem;
  }

  .moshammer-cart__footer-block,
  .moshammer-cart__trust {
    padding: 1.75rem 2rem;
  }


  .cart-voucher__form {
    align-items: start;
  }


}

@media (max-width: 991.98px) {
  .moshammer-cart__sticky {
    position: static;
  }
}

@media (max-width: 767.98px) {



  .moshammer-cart__panel,
  .moshammer-cart__panel--summary,
  .moshammer-cart__footer-block,
  .moshammer-cart__trust {
    padding: 1.25rem;
  }

  .moshammer-cart-line__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .moshammer-cart-line__actions {
    justify-content: flex-end;
    margin-inline-start: 0;
  }
}

@media (max-width: 575.98px) {
  .moshammer-cart {
    padding-block: 2rem 3rem;
  }

  .moshammer-cart-line {
    grid-template-columns: minmax(0, 5.75rem) minmax(0, 1fr);
  }

  .moshammer-cart-line__header {
    flex-direction: column;
  }

  .moshammer-cart-line__total {
    font-size: 1.05rem;
  }

  .moshammer-cart__security {
    justify-content: flex-start;
  }
}

/* Side-cart (CE Elementor cart) drawer width on small screens. The cart widget is
   configured to 90% on tablet + mobile — an awkward near-full sliver on phones and
   a ~700px+ slab on tablets that crowds/clips the product lines. Override to a
   standard responsive drawer: full-width on phones, a fixed comfortable panel on
   tablets. The widget's own width rules carry no !important, so this wins. */
@media (max-width: 767px) {
  .elementor-cart__container .elementor-cart__main {
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-cart__container .elementor-cart__main {
    width: 400px !important;
    max-width: 100% !important;
  }
}

.elementor-cart__product {
  align-items: start;
  column-gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
}

.elementor-cart__product-image {
  align-self: start;
  aspect-ratio: 16 / 10;
  background: transparent;
  display: flex;
  grid-row: 1 / 3;
  justify-self: start;
  overflow: hidden;
  width: clamp(6.25rem, 22%, 7.75rem);
}

.elementor-cart__product-image img {
  background: transparent;
  display: block;
  height: 100%;
  /* Scale the whole product photo into the thumbnail box instead of cropping it.
     The wrapper is a fixed 16:10 slot with overflow:hidden, but the source images
     are `cart_default` (square, 125x125), so `cover` sliced off the top and bottom
     of every product. `contain` fits the full image within the slot (letterboxed
     on the sides for square art) so nothing is cropped, whatever the image aspect. */
  object-fit: contain;
  object-position: center;
  width: 100%;
}

/* ==========================================================================
   Third-party module colour corrections

   These modules ship light-theme defaults (near-black text) that become
   unreadable on the Moshammer dark surfaces. Measured against the #303030
   page background before this fix:
     .block-title  #212529 -> 1.17:1
     .comments-nb  #232323 -> 1.19:1
   Both are far below the 4.5:1 AA requirement, i.e. effectively invisible.

   blockreassurance writes its colour into a `style` attribute (the value is
   back-office configurable), so !important is the only way to override it.
   The comments header is set from a stylesheet, so ID specificity is enough.
   ========================================================================== */
.blockreassurance_product .block-title {
  color: var(--moshammer-text) !important;
}

.blockreassurance_product p {
  color: var(--moshammer-text-muted) !important;
}

#product-comments-list-header .comments-nb {
  color: var(--moshammer-text);
}

/* productcomments renders its list items on a hard-coded white panel, which
   left the theme's inherited light text at 1.03:1 (white on white). Map the
   panel onto the standard Moshammer surface so it matches the other product
   panels and the inherited text colour becomes legible again. */
.product-comment-list-item {
  background: var(--moshammer-surface);
  color: var(--moshammer-text);
}

/* ==========================================================================
   Touch target sizing (WCAG 2.5.8)

   The dense vertical link lists - category tree, footer link columns and the
   account block - rendered as 20-21px tall inline links, under the 24x24
   minimum (measured: 68 such links at 375px). The hit area is grown through
   layout rather than font-size, so the visual type scale is untouched. Touch
   viewports get the comfortable 44px target.

   All three lists are single-child `li > a` markup with no sibling toggles,
   so promoting the link to a block-level flex row is safe.
   ========================================================================== */
#left-column .category-tree li > a,
#footer li > a,
#footer .block-contact a,
.copyright a,
#block_myaccount_infos a {
  align-items: center;
}

@media (max-width: 991.98px) {
}

/* The header utility bar (contact, language, currency, sign-in, cart) is a
   horizontal row, so `inline-flex` is used here rather than `flex`: it gives
   the same compliant hit area without turning each control into a full-width
   block and breaking the bar layout. */
.header-top__left a,
.header-top__right a {
  align-items: center;
}

@media (max-width: 991.98px) {
}

/* ==========================================================================
   Below-lg column order

   The side column is `col-md-4`, so from 768px up it took 240px of a 768px
   viewport and squeezed the product grid into a single 440px column with
   637px-tall cards. On mobile the effect was worse: the category tree
   occupied 1,406px before the first product came into view.

   Below `lg` the listing now takes the full width and the side column follows
   it, so products lead on both phone and tablet while the category tree stays
   reachable. `.row` is already a flex container, so `order` applies.
   ========================================================================== */
@media (max-width: 991.98px) {
  #left-column,
  .left-column {
    flex: 0 0 100%;
    max-width: 100%;
    order: 2;
  }

  #center-column,
  .center-column,
  #content-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
  }
}

/* The quickview overlay is positioned absolutely by the base theme with
   `width: 100%`. Its containing block is the padded `.product-miniature__top`,
   so 100% resolves against the padding box and the button ran 4px past the
   viewport on narrow screens. Anchor it to both insets instead of sizing it. */

/* ==========================================================================
   Elevated card effect

   Applies the lifted "showcase card" look (soft ambient shadow, a subtle light
   rim, a faint top-edge highlight, generous radius) to the dark surface panels
   and form containers, keeping every colour as-is. Placed at the end of the file
   and reusing each panel's own selector, so the radius/border/shadow win purely
   by source order without a specificity fight.

   Light merchandise cards (.product-miniature, #fefefe) are deliberately left
   out: a white inset highlight is invisible on a white card, so they keep their
   existing lighter shadow.
   ========================================================================== */
.page-cms .page-content,
.page-contact .page-content,
.contact-form,
#custom-text,
.custom-text,
.category__description,
.product__right,
.quickview__body .product__right,
.product__accordion,
.product__bottom-right .blockreassurance,
.moshammer-cart__panel,
.moshammer-cart__footer-block,
.moshammer-cart__trust,
.checkout-grid__content .step,
#customer-form,
.register-form,
.login-form,
body#checkout .checkout-grid .card,
body#checkout .cart-summary {
  border: 1px solid var(--moshammer-card-border-color);
  border-radius: var(--moshammer-card-radius);
  box-shadow: var(--moshammer-card-elevation);
}

/* Light merchandise cards (#fefefe) get the matching elevation without the light
   rim/highlight - just the soft ambient shadow, so they lift off the dark page
   consistently with the dark panels. Keeps each card's own radius. Thumbnails and
   inner image frames are left out: the big ambient shadow suits card-sized
   surfaces, not small sub-elements. */
.product-miniature__inner,
.category__cover,
.product__carousel,
.product__no-image {
  box-shadow: var(--moshammer-card-elevation-light);
}

/* ==========================================================================
   Order confirmation page (`body#order-confirmation`) - dark-theme consistency

   Unlike the checkout, this page has no card theming, so every block fell back
   to the global light `.card` (#fefefe): the bankwire payment-return panel, the
   order-details panel and the account-creation panel all rendered white on the
   dark storefront. Worse, the bankwire bank-details `.dl-list` (theme.css paints
   it with a dark `--bs-tertiary-bg`) then inherited the light card's dark text -
   dark text on a dark panel, unreadable. The confirmation banner is a Bootstrap
   `.alert-success` (light green) sitting behind the beige gradient page title,
   washing the title out.

   Re-home the whole page onto the Moshammer dark surface tokens so it reads as
   one consistent, legible confirmation. Scoped to `body#order-confirmation`; the
   featured-products below use `.product-miniature__inner` (not `.card`), so they
   keep their light merchandise styling untouched.
   ========================================================================== */

/* Confirmation banner -> dark surface with the same neutral border as the panels
   below (no green frame), so the beige gradient title and body copy read on a
   consistent dark ground (was washed-out light green). */
body#order-confirmation .alert-success {
  --bs-alert-bg: var(--moshammer-surface);
  --bs-alert-border-color: var(--moshammer-card-border-color);
  --bs-alert-color: var(--moshammer-text);
  border-radius: var(--moshammer-card-radius);
  box-shadow: var(--moshammer-card-elevation);
}

body#order-confirmation .alert-success .page-title-section {
  /* inside the banner it needs no nav-clearance padding */
  padding-top: 0;
}

/* Every confirmation panel -> dark card (payment-return, order details, account). */
body#order-confirmation .card {
  background: var(--moshammer-surface);
  border: 1px solid var(--moshammer-card-border-color);
  border-radius: var(--moshammer-card-radius);
  box-shadow: var(--moshammer-card-elevation);
  color: var(--moshammer-text);
}

/* The account-creation card carries Bootstrap's `.bg-light`, which paints
   `background-color: rgba(var(--bs-light-rgb), …)` via a LAYERED `!important`
   (theme.css compiles Bootstrap into `@layer`). A layered `!important` beats any
   *unlayered* `!important`, so custom.css can't override the colour directly -
   feed the variable `.bg-light` reads instead: point `--bs-light-rgb` at the dark
   surface (24 27 28 = #181b1c = `--moshammer-surface`) so `.bg-light` renders dark. */
body#order-confirmation .card.bg-light,
body#order-confirmation .order-confirmation__account-transformation {
  --bs-light-rgb: 24, 27, 28;
  color: var(--moshammer-text);
}

body#order-confirmation .card-footer {
  background: transparent;
  border-top-color: var(--moshammer-border);
  color: var(--moshammer-text-muted);
}

/* Headings on the dark cards. */
body#order-confirmation .card h1,
body#order-confirmation .card h2,
body#order-confirmation .card h3,
body#order-confirmation .card .h3 {
  color: var(--moshammer-text);
}

/* Secondary/subtitle text: Bootstrap `.text-secondary`/`.text-muted` set a dark
   grey with `!important`, unreadable on the dark card - retint to the theme's
   readable muted light. */
body#order-confirmation .card-subtitle,
body#order-confirmation .text-secondary,
body#order-confirmation .text-body-secondary,
body#order-confirmation .text-muted {
  color: var(--moshammer-text-muted) !important;
}

/* Bankwire bank-details list -> dark panel + light text + themed dividers
   (this is the block that was dark-on-dark). */
body#order-confirmation .dl-list {
  background-color: var(--moshammer-surface-alt);
  color: var(--moshammer-text);
}

body#order-confirmation .dl-list dt {
  border-block-end-color: var(--moshammer-border);
  color: var(--moshammer-text-muted);
}

body#order-confirmation .dl-list dd {
  border-block-end-color: var(--moshammer-border);
  color: var(--moshammer-text);
}

/* Order-detail product rows, subtotals and totals. */
body#order-confirmation .order-confirmation__product-name,
body#order-confirmation .order-confirmation__line-value,
body#order-confirmation .order-confirmation__line--bold,
body#order-confirmation .order-confirmation__product-total {
  color: var(--moshammer-text);
}

body#order-confirmation .order-confirmation__product-attribute,
body#order-confirmation .order-confirmation__product-reference,
body#order-confirmation .order-confirmation__line-label {
  color: var(--moshammer-text-muted);
}

body#order-confirmation .order-confirmation__table,
body#order-confirmation .order-confirmation__subtotals,
body#order-confirmation .order-confirmation__totals,
body#order-confirmation .order-confirmation__line {
  border-color: var(--moshammer-border);
}

/* Account-creation form: put the password field and the "Create account" button
   on one row with the field at 50% width. The form has two block children -
   `.mb-3` (label + password input) and `.buttons-wrapper` (button) - so the form
   becomes a bottom-aligned flex row: the field column takes 50%, the button
   column its natural width beside it. `width: auto` on the button undoes the
   theme's `.buttons-wrapper .btn { width: 100% }`. Only from the md breakpoint up;
   below it the form stays stacked/full-width (the theme default) for usability. */
@media (min-width: 768px) {
  body#order-confirmation .order-confirmation__account-transformation form {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  body#order-confirmation .order-confirmation__account-transformation form > .mb-3 {
    flex: 0 0 50%;
    margin-bottom: 0;
    max-width: 50%;
  }

  body#order-confirmation .order-confirmation__account-transformation form > .buttons-wrapper {
    flex: 0 0 auto;
    width: auto;
    /* `.mb-3` (label+input column) keeps a 1rem bottom margin via a *layered*
       `!important` that unlayered custom.css can't strip, and `align-items:
       flex-end` aligns margin boxes - so without matching that margin here the
       button lands 1rem below the input. Mirror it so the input and button bottom
       edges line up. */
    margin-bottom: 1rem;
  }

  body#order-confirmation .order-confirmation__account-transformation form > .buttons-wrapper .btn {
    width: auto;
  }

  /* Match the password field's height to the Create-account button on the inline
     row: drop the 44px global touch field-height so it falls to its natural ~38px,
     equal to the button. (Mobile keeps the taller touch target - the form is
     stacked there, so this only applies from the md breakpoint up.) */
  body#order-confirmation .order-confirmation__account-transformation form .form-control {
    min-height: 0;
  }
}

/* ─── 1.1.14 — European Legal Withdrawal Button (`orderwithdrawl`) pages ─────────
   The module ships a front.css built for a LIGHT theme: the form-group labels and
   the scope legend are hardcoded dark slate (#0f172a) and its panels are near-white
   (#ffffff / #f8fafc). On the Moshammer dark storefront that leaves the field labels
   invisible (dark-on-dark - the reported low-contrast issue) and drops bright white
   rectangles onto the dark page. Route the module's text and surfaces onto the theme
   tokens, scoped to the module's own pages (form + confirmation) so nothing else is
   touched. Inputs already inherit the theme's dark `.form-control`; error/required
   red and the module's configurable CTA button are intentionally left as-is. Every
   selector outranks the module rule it overrides on specificity (both custom.css and
   the module CSS are unlayered), so no `!important` is needed. */
body[id^="module-orderwithdrawl"] .orderwithdrawl-form-group label,
body[id^="module-orderwithdrawl"] .orderwithdrawl-radio,
body[id^="module-orderwithdrawl"] .orderwithdrawl-scope__legend,
body[id^="module-orderwithdrawl"] .orderwithdrawl-order-item__name,
body[id^="module-orderwithdrawl"] .orderwithdrawl-order-item__quantity,
body[id^="module-orderwithdrawl"] .orderwithdrawl-policy > summary,
body[id^="module-orderwithdrawl"] .orderwithdrawl-policy__content,
body[id^="module-orderwithdrawl"] .orderwithdrawl-privacy__title,
body[id^="module-orderwithdrawl"] .orderwithdrawl-privacy__note,
body[id^="module-orderwithdrawl"] .orderwithdrawl-confirmation__message {
  color: var(--moshammer-text);
}

body[id^="module-orderwithdrawl"] .orderwithdrawl-order-item__reference {
  color: var(--moshammer-text-muted);
}

/* Retint the module's light panels (order items, policy details, privacy notice)
   to the theme's elevated dark surface with the standard hairline card border. Only
   the colour of the module's `border` shorthand is overridden - its 1px width/style
   is kept. */
body[id^="module-orderwithdrawl"] .orderwithdrawl-order-item,
body[id^="module-orderwithdrawl"] .orderwithdrawl-policy,
body[id^="module-orderwithdrawl"] .orderwithdrawl-privacy {
  background: var(--moshammer-surface-alt);
  border-color: var(--moshammer-card-border-color);
}

/* Privacy/withdrawal-notice link onto the theme accent (was hardcoded #2563eb). */
body[id^="module-orderwithdrawl"] .orderwithdrawl-privacy__link {
  color: var(--moshammer-accent);
}