/* =============================================================================
   Miaustore 2026 — theme styles

   Implements the design system directly (no parent theme to fight). Everything
   references tokens.css; there are no raw hex values or magic pixel sizes for
   anything the design system defines.
   ============================================================================= */

/* =============================================================================
   1. FONT FACES
   ============================================================================= */

@font-face {
  font-family: 'Pearl Jean';
  src: url('../fonts/PearlJean.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/RedHatDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/RedHatDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/RedHatDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/RedHatDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/RedHatDisplay-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/RedHatDisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   2. RESET + BASE
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-body-1);
  font-weight: var(--ms-fw-regular);
  line-height: var(--ms-lh-normal);
  letter-spacing: var(--ms-ls-body);
  color: var(--ms-text-body);
  background-color: var(--ms-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--ms-font-display);
  font-weight: var(--ms-fw-regular);
  line-height: var(--ms-lh-tight);
  letter-spacing: var(--ms-ls-display);
  color: var(--ms-text-heading);
}

h1 {
  font-size: var(--ms-size-h1);
}
h2 {
  font-size: var(--ms-size-h2);
}
h3 {
  font-size: var(--ms-size-h3);
}

h4,
h5,
h6 {
  font-family: var(--ms-font-body);
  color: var(--ms-text-heading);
  letter-spacing: var(--ms-ls-heading);
}

h4 {
  font-size: var(--ms-size-h4);
  font-weight: var(--ms-fw-black);
}
h5 {
  font-size: var(--ms-size-h5);
  font-weight: var(--ms-fw-black);
  line-height: var(--ms-lh-snug);
}
h6 {
  font-size: var(--ms-size-h6);
  font-weight: var(--ms-fw-medium);
}

strong,
b {
  font-weight: var(--ms-fw-black);
}

a {
  color: var(--ms-btn-commerce);
  text-decoration: none;
  transition: color var(--ms-transition);
}

a:hover {
  color: var(--ms-btn-commerce-hover);
}

/* Pre-title: uppercase bold eyebrow above a heading (brand guide slide 12). */
.pre-title {
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-accent);
  margin-block-end: var(--ms-space-3);
}

/* =============================================================================
   3. LAYOUT PRIMITIVES
   ============================================================================= */

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

.section {
  padding-block: var(--ms-space-9);
}

.section--tight {
  padding-block: var(--ms-space-6);
}

/* Alternating baby-blue band — the brand's primary sectioning device. */
.band {
  background-color: var(--ms-bg-section);
}

.section__title {
  text-align: center;
  margin-block-end: var(--ms-space-4);
}

.section__lead {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: var(--ms-space-7);
  color: var(--ms-text-muted);
}

.center {
  text-align: center;
  margin-block-start: var(--ms-space-7);
}

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--ms-space-4);
  inset-block-start: -100vh;
  z-index: 999;
  padding: var(--ms-space-2) var(--ms-space-4);
  background-color: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  border-radius: var(--ms-radius-sm);
}

.skip-link:focus {
  inset-block-start: var(--ms-space-4);
  color: var(--ms-text-on-dark);
}

/* =============================================================================
   4. BUTTONS
   Two intents, deliberately not interchangeable (tokens.css §2):
   marketing = orange, commerce = electric blue.
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-6);
  border: 2px solid transparent;
  border-radius: var(--ms-radius-pill);
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-button);
  font-weight: var(--ms-fw-extrabold);
  letter-spacing: var(--ms-ls-button);
  line-height: var(--ms-lh-none);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--ms-transition),
    border-color var(--ms-transition),
    color var(--ms-transition),
    transform var(--ms-transition);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--marketing {
  background-color: var(--ms-btn-marketing);
  border-color: var(--ms-btn-marketing);
  color: var(--ms-text-on-dark);
}
.btn--marketing:hover {
  background-color: var(--ms-btn-marketing-hover);
  border-color: var(--ms-btn-marketing-hover);
  color: var(--ms-text-on-dark);
}

.btn--commerce {
  background-color: var(--ms-btn-commerce);
  border-color: var(--ms-btn-commerce);
  color: var(--ms-text-on-dark);
}
.btn--commerce:hover {
  background-color: var(--ms-btn-commerce-hover);
  border-color: var(--ms-btn-commerce-hover);
  color: var(--ms-text-on-dark);
}

/* Ghost variant — checkout wizard's "Zurück" (Figma p20–p22's "Go back
   previous step"). Not marketing or commerce fill, so it sits outside the
   two-intent rule above on purpose: a step backward is neither. */
.btn--outline {
  background-color: transparent;
  border-color: var(--ms-btn-marketing);
  color: var(--ms-btn-marketing);
}
.btn--outline:hover {
  background-color: var(--orange-50);
  border-color: var(--ms-btn-marketing-hover);
  color: var(--ms-btn-marketing-hover);
}

.btn--lg {
  padding: var(--ms-space-4) var(--ms-space-8);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled] {
  background-color: var(--ms-disabled);
  border-color: var(--ms-disabled);
  cursor: not-allowed;
  transform: none;
}

/* =============================================================================
   5. BRAND DOODLES
   The line art ships as black SVG, so it is tinted by masking a token colour
   with the SVG rather than editing the official files.
   ============================================================================= */

.doodle {
  position: absolute;
  display: block;
  pointer-events: none;
  -webkit-mask-image: var(--doodle-src);
  mask-image: var(--doodle-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.doodle--orange {
  background-color: var(--ms-accent);
}
.doodle--blue {
  background-color: var(--ms-btn-commerce);
}
.doodle--paw {
  background-color: var(--ms-accent);
  opacity: 0.18;
}

/* =============================================================================
   6. HEADER
   ============================================================================= */

.site-header {
  background-color: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--ms-space-6);
  min-height: 4.5rem;
  padding-block: var(--ms-space-3);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo img {
  height: 2.25rem;
  width: auto;
}

.site-nav {
  flex: 1;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--ms-space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list a {
  color: var(--ms-text-on-dark);
  font-size: var(--ms-size-nav);
  font-weight: var(--ms-fw-semibold);
  letter-spacing: var(--ms-ls-flush);
}

.nav-list a:hover {
  color: var(--ms-btn-commerce);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ms-space-4);
  margin-inline-start: auto;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ms-text-on-dark);
  background: transparent;
  border: 0;
  border-radius: var(--ms-radius-pill);
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--ms-accent);
}

.cart-badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  display: grid;
  place-items: center;
  background-color: var(--ms-btn-commerce);
  color: var(--ms-text-on-dark);
  font-size: var(--ms-size-body-3);
  font-weight: var(--ms-fw-bold);
  border-radius: var(--ms-radius-pill);
}

/* CSS-only mobile drawer */
.nav-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline-start: auto;
  cursor: pointer;
  color: var(--ms-text-on-dark);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  display: block;
  width: 1.4rem;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
}

.nav-toggle__bars {
  position: relative;
}
.nav-toggle__bars::before {
  position: absolute;
  top: -6px;
}
.nav-toggle__bars::after {
  position: absolute;
  top: 6px;
}

/* =============================================================================
   7. HERO
   ============================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--ms-bg-section);
  padding-block: var(--ms-space-9);
}

.hero__doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.doodle--hero-1 {
  top: -4%;
  right: -4%;
  width: 30rem;
  height: 18rem;
  opacity: 0.9;
}
.doodle--hero-2 {
  bottom: 2%;
  left: -6%;
  width: 22rem;
  height: 15rem;
  opacity: 0.75;
}
.doodle--paw-1 {
  top: 12%;
  left: 5%;
  width: 4rem;
  height: 4.2rem;
}
.doodle--paw-2 {
  bottom: 16%;
  right: 8%;
  width: 3rem;
  height: 3.2rem;
}

/*
 * Named grid areas rather than two flat children: the copy block is split
 * into hero__copy-top (pre-title/h1/description) and hero__copy-bottom
 * (trust widget/usps/cta) so the product image can sit BETWEEN them in
 * source order — on mobile that reads as title → description → image →
 * trust/usps/cta, instead of dumping the whole text block before or after
 * the image.
 *
 * On desktop "media" spans BOTH rows of the left-hand text column, so the
 * trust/usps/cta group sits directly under the description in the same
 * column instead of stretching full width below the image.
 *
 * The explicit `auto 1fr` row sizing is what makes that work. An earlier
 * attempt used the default `auto auto` and was abandoned because Grid then
 * distributes a too-tall image's extra height across BOTH spanned rows,
 * opening a dead gap between the description and the trust widget. Pinning
 * row 1 to its content height and letting row 2 absorb all the slack keeps
 * top and bottom touching; `align-self: start` then holds the bottom group
 * at the top of that now-taller row rather than centring it in the slack.
 */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'top media' 'bottom media';
  grid-template-rows: auto 1fr;
  column-gap: var(--ms-space-8);
  row-gap: var(--ms-space-5);
  align-items: start;
}

.hero__copy-top {
  grid-area: top;
}

.hero__copy-bottom {
  grid-area: bottom;
  align-self: start;
  max-width: 34rem;
}

.hero__media {
  grid-area: media;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__subtext {
  margin-block: var(--ms-space-5);
  max-width: 34rem;
}

.hero__usps {
  list-style: none;
  padding: 0;
  margin-block-end: var(--ms-space-6);
  display: grid;
  gap: var(--ms-space-2);
}

.hero__usps li {
  position: relative;
  padding-inline-start: var(--ms-space-6);
  font-size: var(--ms-size-body-2);
}

.hero__usps li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-accent);
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--ms-space-5);
  flex-wrap: wrap;
}

.hero__price {
  font-size: var(--ms-size-h5);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
}

.hero__product {
  border-radius: var(--ms-radius-lg);
  margin-inline: auto;
}

/* =============================================================================
   8. HOMEPAGE SECTIONS
   ============================================================================= */

.recommended {
  text-align: center;
}

.recommended__label {
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}

.recommended__note {
  margin-block-start: var(--ms-space-2);
  color: var(--ms-text-body);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-space-8);
  align-items: center;
}

.split__copy > * + * {
  margin-block-start: var(--ms-space-4);
}

.split__media img {
  border-radius: var(--ms-radius-lg);
  margin-inline: auto;
}

.stat-line {
  display: flex;
  align-items: baseline;
  gap: var(--ms-space-4);
  padding: var(--ms-space-4);
  background-color: var(--ms-bg-card);
  border-radius: var(--ms-radius-md);
}

.stat-line__big {
  font-family: var(--ms-font-display);
  font-size: var(--ms-size-h2);
  color: var(--ms-accent);
  line-height: 1;
}

/* ---- Cards ---- */

.cards {
  display: grid;
  gap: var(--ms-space-5);
}

.cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-6);
  box-shadow: var(--ms-shadow-card);
  transition: box-shadow var(--ms-transition), transform var(--ms-transition);
}

.card:hover {
  box-shadow: var(--ms-shadow-card-hover);
  transform: translateY(-2px);
}

.card__title {
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-h6);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
  margin-block-end: var(--ms-space-3);
}

/* ---- Stats ---- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ms-space-5);
  text-align: center;
}

/* No rating card available on this store (front-page.php) — keep the row full. */
.stats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat__value {
  font-family: var(--ms-font-display);
  font-size: var(--ms-size-h2);
  color: var(--ms-accent);
  line-height: var(--ms-lh-tight);
}

.stat__label {
  margin-block-start: var(--ms-space-2);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-body);
}

/* ---- Numbered steps ---- */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-space-5);
}

.step {
  counter-increment: step;
  position: relative;
  background-color: var(--ms-bg-card);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-6);
  padding-inline-start: var(--ms-space-9);
  box-shadow: var(--ms-shadow-card);
}

.step::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: var(--ms-space-5);
  top: var(--ms-space-5);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-btn-commerce);
  color: var(--ms-text-on-dark);
  font-weight: var(--ms-fw-extrabold);
}

/* ---- Spec list ---- */

.spec-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--ms-space-3);
}

.spec-list li {
  padding-block: var(--ms-space-3);
  border-bottom: 1px solid var(--ms-border);
  font-size: var(--ms-size-body-2);
}

/* ---- Reviews (replaces the old colour grid — see front-page.php) ---- */

.reviews__summary {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ms-space-6);
  margin-block-end: var(--ms-space-6);
}

/* Store without its own Site Reviews: only the Trustpilot box remains. */
.reviews__summary--single {
  grid-template-columns: minmax(0, 32rem);
  justify-content: center;
}

.reviews__stars,
.reviews__trustbox {
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reviews__latest-title {
  text-align: center;
  margin-block: var(--ms-space-7) var(--ms-space-5);
}

.reviews__list .miau-reviews {
  display: grid;
  gap: var(--ms-space-4);
}

.reviews__list .glsr-review {
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-4) var(--ms-space-5);
}

.reviews__list .glsr-pagination {
  margin-block-start: var(--ms-space-6);
  text-align: center;
}

@media (max-width: 700px) {
  .reviews__summary {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   9. FAQ — orange questions with a +/− affordance (Figma p07)
   ============================================================================= */

.faq {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--ms-space-8);
  align-items: start;
}

.faq__intro p {
  margin-block-start: var(--ms-space-4);
  color: var(--ms-text-muted);
}

.faq-item {
  border-bottom: 1px solid var(--ms-border);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-4);
  padding-block: var(--ms-space-5);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-accent);
  cursor: pointer;
  list-style: none;
}

/* Hide the native disclosure triangle in both engines. */
.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q::after {
  content: '+';
  font-size: var(--ms-size-h5);
  font-weight: var(--ms-fw-regular);
  line-height: 1;
  color: var(--ms-accent);
  flex-shrink: 0;
}

.faq-item[open] .faq-item__q::after {
  content: '−';
}

.faq-item__a {
  padding-block-end: var(--ms-space-5);
  color: var(--ms-text-body);
}

/* =============================================================================
   10. CTA BAND
   ============================================================================= */

.cta-band {
  background-color: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  padding-block: var(--ms-space-9);
  text-align: center;
}

.cta-band h2,
.cta-band p {
  color: var(--ms-text-on-dark);
}

.cta-band p {
  margin-block: var(--ms-space-4) var(--ms-space-6);
}

/* =============================================================================
   11. FOOTER
   ============================================================================= */

.site-footer {
  position: relative;
  background-color: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  border-start-start-radius: var(--ms-radius-panel);
  border-start-end-radius: var(--ms-radius-panel);
  margin-block-start: var(--ms-space-8);
  padding-block: var(--ms-space-8);
  overflow: hidden;
}

.site-footer a {
  color: var(--ms-text-on-dark);
}

.site-footer a:hover {
  color: var(--ms-btn-commerce);
}

.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-space-8);
  align-items: center;
}

.newsletter__title {
  color: var(--ms-accent);
  font-size: var(--ms-size-h3);
}

.newsletter__copy p {
  margin-block-start: var(--ms-space-4);
  color: var(--ms-text-on-dark);
  font-size: var(--ms-size-body-2);
}

.newsletter__row {
  display: flex;
  gap: var(--ms-space-2);
  background-color: var(--ms-bg-card);
  border-radius: var(--ms-radius-pill);
  padding: var(--ms-space-1);
}

.newsletter__input {
  flex: 1;
  border: 0;
  background: transparent;
  padding-inline: var(--ms-space-5);
  color: var(--ms-text-body);
  min-width: 0;
}

.newsletter__input:focus {
  outline: none;
}

.newsletter__small {
  margin-block-start: var(--ms-space-3);
  font-size: var(--ms-size-body-3);
  color: var(--ms-text-on-dark);
  opacity: 0.75;
}

.footer-doodle {
  position: relative;
  height: 6rem;
  margin-block: var(--ms-space-6);
}

.doodle--footer {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6rem;
  background-color: var(--ms-btn-commerce);
  opacity: 0.9;
}

.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--ms-space-7);
  padding-block-start: var(--ms-space-6);
  border-top: 1px solid var(--navy-blue-700);
}

.footer-col__title {
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-h6);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-on-dark);
  margin-block-end: var(--ms-space-4);
}

.footer-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--ms-space-3);
  font-size: var(--ms-size-footer);
}

.footer-legal {
  margin-block-start: var(--ms-space-7);
  font-size: var(--ms-size-body-3);
  opacity: 0.7;
}

/* =============================================================================
   12. CONFIGURATOR (customize page)
   ============================================================================= */

.cz {
  padding-block: var(--ms-space-8);
}

.cz__head {
  margin-block-end: var(--ms-space-8);
}

.cz__sub {
  margin-block-start: var(--ms-space-3);
  color: var(--ms-text-muted);
}

/* WooCommerce add-to-cart notices on the configurator (template-customize.php).
   Woo prints these as bare .woocommerce-error/-message/-info lists with no
   wrapper of its own, same as on checkout — the checkout copy of these rules is
   scoped to body.woocommerce-checkout, which this page is not. */
.cz__notices .woocommerce-error,
.cz__notices .woocommerce-message,
.cz__notices .woocommerce-info {
  margin: 0 0 var(--ms-space-6);
  padding: var(--ms-space-4) var(--ms-space-5);
  border-radius: var(--ms-radius-md);
  list-style: none;
  font-size: var(--ms-size-body-2);
}

.cz__notices .woocommerce-error {
  background-color: var(--orange-50);
  border: 1px solid var(--ms-error);
}

.cz__notices .woocommerce-message,
.cz__notices .woocommerce-info {
  background-color: var(--ms-bg-section);
  border: 1px solid var(--ms-border);
}

.cz__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-space-8);
  align-items: start;
}

/* The preview tracks the option column as it scrolls — the key interaction of
   this page (Figma p07: the left column is empty across mid-page frames). */
.cz__preview {
  position: sticky;
  top: 6rem;
}

.cz__stage {
  background-color: var(--ms-bg-section);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-6);
  display: grid;
  place-items: center;
}

.cz__stage img {
  border-radius: var(--ms-radius-md);
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
}

.cz__chosen-label {
  margin-block: var(--ms-space-5) var(--ms-space-3);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-heading);
}

.cz__chosen {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
}

.cz-chip {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  padding: var(--ms-space-2) var(--ms-space-4) var(--ms-space-2) var(--ms-space-2);
  font-size: var(--ms-size-body-3);
  font-weight: var(--ms-fw-semibold);
}

.cz-chip img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: var(--ms-radius-sm);
}

.cz-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--ms-space-8);
}

.cz-group__title {
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-h6);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
  padding: 0;
  margin-block-end: var(--ms-space-4);
}

/* ---- Colour swatches ---- */

.cz-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
}

.cz-swatch {
  position: relative;
  cursor: pointer;
  line-height: 0;
}

.cz-swatch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.cz-swatch__chip {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--swatch);
  object-fit: cover;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--ms-border);
  transition: border-color var(--ms-transition), transform var(--ms-transition);
}

.cz-swatch:hover .cz-swatch__chip {
  transform: translateY(-2px);
}

/* Selection ring. :has() is what makes the highlight work with zero JS. */
.cz-swatch:has(input:checked) .cz-swatch__chip {
  border-color: var(--ms-border-selected);
  box-shadow: 0 0 0 1px var(--ms-border-selected);
}

.cz-swatch:has(input:focus-visible) .cz-swatch__chip {
  outline: 3px solid var(--ms-focus-ring);
  outline-offset: 2px;
}

.cz-selected-name {
  margin-block-start: var(--ms-space-4);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

/* ---- Option cards ---- */

.cz-cards {
  display: grid;
  gap: var(--ms-space-3);
}

.cz-card {
  position: relative;
  display: block;
  background-color: var(--ms-bg-card);
  border: 2px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-5);
  cursor: pointer;
  box-shadow: var(--ms-shadow-card);
  transition: border-color var(--ms-transition), background-color var(--ms-transition);
}

.cz-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cz-card:hover {
  border-color: var(--electric-blue-200);
}

/* Selected state: pale blue fill + blue border, per Figma p07. */
.cz-card:has(input:checked) {
  background-color: var(--ms-bg-section);
  border-color: var(--ms-border-selected);
}

.cz-card:has(input:focus-visible) {
  outline: 3px solid var(--ms-focus-ring);
  outline-offset: 2px;
}

.cz-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-space-4);
}

/* Colour-dependent cards (grass vase / bowl / mat) put a thumbnail next to
   the name, which reads better vertically centred than baseline-aligned. */
.cz-card__head:has(.cz-card__thumb) {
  align-items: center;
}

.cz-card__title {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-width: 0;
}

.cz-card__thumb {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  border-radius: var(--ms-radius-sm);
  background-color: var(--ms-bg-section);
  flex-shrink: 0;
}

.cz-card__name {
  font-weight: var(--ms-fw-bold);
  color: var(--ms-btn-commerce);
}

.cz-card__unavailable-note {
  display: none;
  margin-block-start: var(--ms-space-2);
  font-size: var(--ms-size-body-3);
  font-style: italic;
  color: var(--ms-text-muted);
}

/*
 * A colour-addon whose currently-selected fountain colour has no matching
 * SKU (the mat, in particular, only exists in 8 of the 13 colours — see
 * miau_fountain_color_addons()) is disabled rather than hidden, so the
 * option doesn't just vanish without explanation. Zero JS needed for the
 * visual state, same :has() approach the rest of this page already uses.
 */
.cz-card:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.cz-card:has(input:disabled):hover {
  border-color: var(--ms-border);
}

.cz-card:has(input:disabled) .cz-card__unavailable-note {
  display: block;
}

.cz-card__price {
  font-weight: var(--ms-fw-bold);
  color: var(--ms-btn-commerce);
  white-space: nowrap;
}

.cz-card__desc {
  display: block;
  margin-block-start: var(--ms-space-3);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

.cz-card__bullets {
  margin-block-start: var(--ms-space-3);
  padding-inline-start: var(--ms-space-5);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
  display: grid;
  gap: var(--ms-space-1);
}

/* ---- Summary ---- */

.cz-summary {
  border-top: 1px solid var(--ms-border);
  padding-block-start: var(--ms-space-6);
}

.cz-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-space-4);
}

.cz-summary__name {
  font-size: var(--ms-size-h6);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
}

.cz-summary__total {
  font-size: var(--ms-size-h3);
  font-weight: var(--ms-fw-black);
  color: var(--ms-btn-commerce);
  white-space: nowrap;
}

.cz-summary__including {
  margin-block-start: var(--ms-space-3);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

.cz-summary__including ul {
  padding-inline-start: var(--ms-space-5);
  margin-block-start: var(--ms-space-1);
}

.cz-summary__shipping {
  margin-block: var(--ms-space-4) var(--ms-space-5);
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-body);
}

/*
 * Mobile: the summary + add-to-cart pin to the bottom of the viewport from
 * the first scroll, not just once the visitor reaches the end of the
 * (single-column, see the .cz__grid rule above) options list. Kept compact
 * on purpose — a full-height summary permanently covering a third of a
 * phone screen would be worse than not being sticky at all.
 */
@media (max-width: 900px) {
  .cz-summary {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    background-color: var(--ms-bg-card);
    border-top: 1px solid var(--ms-border);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.1);
    padding: var(--ms-space-3) var(--ms-space-4);
    padding-bottom: max(var(--ms-space-3), env(safe-area-inset-bottom));
  }

  /* So the fixed bar never covers the last option once scrolled to the end. */
  .cz__options {
    padding-block-end: 9rem;
  }

  .cz-summary__name {
    font-size: var(--ms-size-body-2);
  }

  .cz-summary__total {
    font-size: var(--ms-size-h6);
  }

  .cz-summary__including {
    margin-block-start: var(--ms-space-2);
    font-size: var(--ms-size-body-3);
  }

  /* Addons collapse from a vertical list into a wrapping, bullet-separated
     row -- the vertical list was the single biggest thing making the bar
     too tall to keep pinned on screen. */
  .cz-summary__including ul {
    display: flex;
    flex-wrap: wrap;
    padding-inline-start: 0;
    margin-block-start: var(--ms-space-1);
    list-style: none;
  }

  .cz-summary__including li {
    white-space: nowrap;
  }

  .cz-summary__including li:not(:last-child)::after {
    content: "\2022";
    margin-inline: 0.4em;
    color: var(--ms-text-muted);
  }

  .cz-summary__shipping {
    margin-block: var(--ms-space-2) var(--ms-space-3);
    font-size: var(--ms-size-body-3);
  }

  /* Smaller so "IN DEN WARENKORB" (and longer translations) stay on one
     line instead of wrapping to two inside the now-shorter bar. */
  .cz-summary .btn {
    font-size: var(--ms-size-body-2);
    padding-block: var(--ms-space-3);
    white-space: nowrap;
  }
}

/* =============================================================================
   13. WOOCOMMERCE — minimal alignment so cart/checkout inherit the brand
   ============================================================================= */

.woo-content {
  padding-block: var(--ms-space-6);
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  background-color: var(--ms-btn-commerce);
  color: var(--ms-text-on-dark);
  border-radius: var(--ms-radius-pill);
  font-weight: var(--ms-fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ms-ls-button);
  padding: var(--ms-space-3) var(--ms-space-6);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  background-color: var(--ms-btn-commerce-hover);
  color: var(--ms-text-on-dark);
}

.notice--error {
  background-color: var(--orange-50);
  border: 1px solid var(--ms-accent);
  border-radius: var(--ms-radius-md);
  padding: var(--ms-space-5);
}

/* =============================================================================
   14. ACCESSIBILITY
   ============================================================================= */

:focus-visible {
  outline: 3px solid var(--ms-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   15. RESPONSIVE
   ============================================================================= */

@media (max-width: 1080px) {
  .nav-toggle {
    display: flex;
    order: 3;
  }

  .site-header__actions {
    order: 2;
    margin-inline-start: auto;
  }

  /* Drawer: the nav becomes a full-width panel below the bar when toggled. */
  .site-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
  }

  .nav-toggle__input:checked ~ .site-nav {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ms-space-4);
    padding-block: var(--ms-space-5);
  }

  .site-header__inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .split,
  .cz__grid,
  .newsletter,
  .faq {
    grid-template-columns: 1fr;
  }

  .cz__preview {
    position: static;
  }

  .cards--3,
  .cards--2,
  .steps {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-cols {
    grid-template-columns: 1fr;
    gap: var(--ms-space-6);
  }

  /*
   * Stacks as title/description → product image → trust/usps/cta. Source
   * order already gives that (hero__copy-top, hero__media, hero__copy-bottom
   * are siblings in that order) — this just collapses the desktop grid
   * (where "media" spans two rows beside the text) into one column so the
   * three areas stack in source order instead of the two-column layout.
   *
   * grid-template-rows is reset to auto: the desktop `auto 1fr` exists only
   * to stop a tall image inflating the text column's first row, and there is
   * no side-by-side image to inflate anything here.
   */
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas: 'top' 'media' 'bottom';
    grid-template-rows: auto;
    row-gap: var(--ms-space-6);
  }

  /*
   * Centre the whole trust/usps/cta group once it sits under the product
   * image. The image, swatches and Trustpilot badge above it are already
   * centred, so leaving the USPs, button and price flush left made the
   * lower half of the hero look misaligned rather than deliberate.
   *
   * .hero__copy-bottom keeps its 34rem cap, so margin-inline:auto matters on
   * the wider end of this breakpoint (tablets) where the cap actually binds.
   */
  .hero__copy-bottom {
    margin-inline: auto;
    text-align: center;
  }

  .hero__cta {
    justify-content: center;
  }

  /*
   * The USP bullets are absolutely positioned against a left padding on
   * desktop, which cannot centre. Here the dot becomes an inline marker
   * instead, so it sits directly before the first line of centred text and
   * a wrapped item (the Bewegungssensor one) centres both its lines rather
   * than hanging off a ragged left edge.
   */
  .hero__usps li {
    padding-inline-start: 0;
  }

  .hero__usps li::before {
    position: static;
    top: auto;
    display: inline-block;
    margin-inline-end: var(--ms-space-2);
    vertical-align: middle;
  }
}

@media (max-width: 560px) {
  .section {
    padding-block: var(--ms-space-7);
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .site-footer {
    border-start-start-radius: var(--ms-radius-lg);
    border-start-end-radius: var(--ms-radius-lg);
  }

  .newsletter__row {
    flex-direction: column;
    background: transparent;
    padding: 0;
    gap: var(--ms-space-3);
  }

  .newsletter__input {
    background-color: var(--ms-bg-card);
    border-radius: var(--ms-radius-pill);
    padding: var(--ms-space-3) var(--ms-space-5);
  }

  /*
   * --ms-size-h1's clamp() floor is 3rem (48px) — tuned for desktop, where
   * it comfortably fits on one/two lines. At phone widths a single long
   * German compound word (e.g. "Ersatzpumpen", "Trinkbrunnen") doesn't fit
   * at that size and overflow-wrap forces a mid-word break. This general
   * rule keeps every page's h1 legible; .hero h1 below is more specific
   * (class + type vs. type alone) so it still wins for the homepage hero,
   * same value, kept as its own rule so the two can diverge later without
   * fighting specificity.
   */
  h1 {
    font-size: 1.6rem;
  }

  /*
   * The hero eyebrow and h1 use fluid sizes tuned for desktop, where they
   * comfortably fit on one/two lines. On a phone-width viewport the same
   * sizes wrapped to 2 lines (eyebrow) and 3 lines (h1), pushing the
   * description and CTA far down. Fixed, smaller sizes here keep the
   * eyebrow to 1 line and the h1 to 2 lines at common phone widths.
   */
  .hero .pre-title {
    font-size: var(--ms-size-body-3);
    letter-spacing: 0.04em;
  }

  .hero h1 {
    font-size: 1.6rem;
  }
}

/* =============================================================================
   16. ENDORSEMENTS + TRUSTPILOT
   ============================================================================= */

.recommended__logos {
  list-style: none;
  padding: 0;
  margin-block: var(--ms-space-5) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-7);
}

/* Shown in full colour at full opacity: these are real third-party
   endorsements and greyscaling them made them look like faded placeholders. */
.recommended__logo img {
  max-height: 5rem;
  max-width: 12rem;
  width: auto;
  object-fit: contain;
  transition: transform var(--ms-transition);
}

.recommended__logo img:hover {
  transform: scale(1.04);
}

/*
 * Trustpilot lives in the hero now, below the product photo — not in
 * .recommended with the blog/vet endorsement logos. A trust *score* and a
 * set of third-party editorial logos are different kinds of proof and read
 * as more credible kept apart rather than bundled into one strip.
 */
.hero__trust {
  margin-block: var(--ms-space-5);
  display: flex;
  justify-content: flex-start;
}

/* The Mini widget lays out inside an iframe that needs a real width and height;
   constraining it to the content column keeps it centred without stretching. */
.hero__trust .trustpilot-widget {
  width: 100%;
  max-width: 22rem;
  min-height: 130px;
}

/*
 * Compact variant: the one-row "Micro Star" TrustBox (same one production
 * uses in its own header) — just a rating word + stars, ~20px tall, no
 * TrustScore/review-count line underneath. Needs its own, much shorter
 * min-height so the widget's iframe isn't left with dead space below it.
 */
.hero__trust--compact .trustpilot-widget {
  max-width: 12rem;
  min-height: 20px;
}

@media (max-width: 900px) {
  .hero__trust {
    justify-content: center;
  }
}

/* =============================================================================
   17. HOMEPAGE GALLERY (main image + thumbnails + colour swatches)
   ============================================================================= */

.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ms-space-2);
  margin-block-end: var(--ms-space-4);
  /* Reserve the row's height so building it in JS doesn't shift the hero
     image down after load (CLS). */
  min-height: 3.5rem;
}

.gallery__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ms-radius-sm);
  background: none;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
  transition: border-color var(--ms-transition);
}

.gallery__thumb img {
  width: 4rem;
  height: 3rem;
  object-fit: cover;
}

.gallery__thumb:hover {
  border-color: var(--electric-blue-200);
}

.gallery__thumb.is-active {
  border-color: var(--ms-border-selected);
}

.gallery__color {
  text-align: center;
  margin-block-start: var(--ms-space-4);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

.gallery__swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ms-space-3);
  margin-block-start: var(--ms-space-3);
}

.gallery__swatch {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

/* Real glaze photo. --swatch stays as the background so the chip still shows
   the right colour while the image loads (or if it ever 404s). */
.gallery__swatch-chip {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--swatch);
  object-fit: cover;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--ms-border);
  transition: border-color var(--ms-transition), transform var(--ms-transition);
}

.gallery__swatch:hover .gallery__swatch-chip {
  transform: translateY(-2px);
}

.gallery__swatch.is-active .gallery__swatch-chip {
  border-color: var(--ms-border-selected);
  box-shadow: 0 0 0 1px var(--ms-border-selected);
}

/* =============================================================================
   18. PRODUCT GRID (parts & accessories — Figma p08)
   ============================================================================= */

.parts__title {
  margin-block-end: var(--ms-space-6);
}

.parts__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ms-space-5);
  margin-block-end: var(--ms-space-8);
}

.parts__search {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-pill);
  padding: var(--ms-space-3) var(--ms-space-5);
  min-width: min(24rem, 100%);
  color: var(--ms-text-muted);
}

.parts__search input[type='search'] {
  flex: 1;
  border: 0;
  background: transparent;
  min-width: 0;
  color: var(--ms-text-body);
}

.parts__search input[type='search']:focus {
  outline: none;
}

.parts__intro {
  margin-block-end: var(--ms-space-7);
  color: var(--ms-text-muted);
}

.parts__group-title {
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-h4);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
  padding-block-end: var(--ms-space-4);
  border-bottom: 1px solid var(--ms-border);
  margin-block: var(--ms-space-8) var(--ms-space-6);
}

/*
 * minmax(0, 1fr), not 1fr.
 *
 * `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` minimum is the
 * item's MIN-CONTENT width — so a single unbreakable token stretches its column
 * and every other column with it. The Katzengrasvasen titles do exactly that
 * ("Katzengrasvase+Katzengrasssamen+Bio" has no break opportunity), which blew
 * that one section out to 418px columns against 286px everywhere else and
 * overflowed the container. minmax(0, …) lets columns shrink below content.
 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ms-space-4);
}

.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-4);
  box-shadow: var(--ms-shadow-card);
  transition: box-shadow var(--ms-transition), transform var(--ms-transition);
}

.product-card:hover {
  box-shadow: var(--ms-shadow-card-hover);
  transform: translateY(-2px);
}

.product-card__media {
  display: block;
  margin-block-end: var(--ms-space-4);
}

.product-card__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--ms-radius-md);
}

.product-card__body {
  flex: 1;
  min-width: 0;
}

/* Product names are ORANGE on cards — distinct from the configurator's option
   cards, where names are electric blue (Figma p07 vs p08). */
.product-card__name {
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-body-1);
  font-weight: var(--ms-fw-bold);
  line-height: var(--ms-lh-snug);
  margin-block-end: var(--ms-space-2);
  /* Titles like "Katzengrasvase+Katzengrasssamen+Bio Erde" have no natural
     break opportunity; allow breaking anywhere so they wrap in-column. */
  overflow-wrap: anywhere;
}

.product-card__name a {
  color: var(--ms-accent);
}

.product-card__name a:hover {
  color: var(--orange-600);
}

.product-card__desc {
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  margin-block-start: var(--ms-space-4);
}

.product-card__price,
.product-card__price .amount {
  font-size: var(--ms-size-body-1);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
}

.product-card__price del {
  opacity: 0.5;
  font-weight: var(--ms-fw-regular);
  margin-inline-end: var(--ms-space-2);
}

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  padding: var(--ms-space-2) var(--ms-space-4);
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-btn-commerce);
  color: var(--ms-text-on-dark);
  font-weight: var(--ms-fw-bold);
  flex-shrink: 0;
  transition: background-color var(--ms-transition);
}

.add-btn:hover {
  background-color: var(--ms-btn-commerce-hover);
  color: var(--ms-text-on-dark);
}

/* WooCommerce's AJAX script appends this link after a successful add. */
.add-btn.added + .added_to_cart {
  display: none;
}

.add-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

.add-btn.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.add-btn--oos {
  background-color: var(--ms-disabled);
  cursor: not-allowed;
  font-size: var(--ms-size-body-2);
  text-transform: none;
}

/*
 * Colour-linked accessory picker (Mini Fountains: Katzengrasset, Keramischer
 * Fressnapf). One product card instead of one-per-colour — same
 * .gallery__swatch(es)/.gallery__swatch-chip classes the hero uses, so
 * picking a colour here looks and behaves like picking one in the hero, and
 * a script listens for the hero's own colour change to keep these in sync
 * (assets/js/color-linked-accessories.js).
 */
.color-picker {
  display: flex;
  gap: var(--ms-space-5);
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-5);
  box-shadow: var(--ms-shadow-card);
}

.color-picker__media {
  flex: 0 0 12rem;
}

.color-picker__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--ms-radius-md);
}

.color-picker__body {
  flex: 1;
  min-width: 0;
}

.color-picker__label {
  margin-block-end: var(--ms-space-2);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

/* Smaller than the hero's own 2.75rem chip — a dozen of these sit inside a
   product card here, not the full-width hero. */
.color-picker .gallery__swatches {
  justify-content: flex-start;
  margin-block-start: 0;
  margin-block-end: var(--ms-space-4);
}

.color-picker .gallery__swatch-chip {
  width: 2rem;
  height: 2rem;
}

.color-picker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
}

@media (max-width: 640px) {
  .color-picker {
    flex-direction: column;
  }

  .color-picker__media {
    flex-basis: auto;
    max-width: 12rem;
    margin-inline: auto;
  }
}

/* =============================================================================
   19. CART DRAWER (Figma p18)
   ============================================================================= */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 25, 44, 0.45);
  opacity: 0;
  transition: opacity var(--ms-transition);
}

.cart-drawer.is-open .cart-drawer__overlay {
  opacity: 1;
}

.cart-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(30rem, 100%);
  display: flex;
  flex-direction: column;
  background-color: var(--ms-bg-card);
  box-shadow: -8px 0 32px rgba(11, 25, 44, 0.18);
  transform: translateX(100%);
  transition: transform 240ms ease;
}

.cart-drawer.is-open .cart-drawer__panel {
  transform: translateX(0);
}

.cart-drawer.is-busy .cart-drawer__panel {
  opacity: 0.6;
  pointer-events: none;
}

.cart-drawer__head {
  display: flex;
  align-items: baseline;
  gap: var(--ms-space-3);
  padding: var(--ms-space-5) var(--ms-space-6);
  border-bottom: 1px solid var(--ms-border);
}

.cart-drawer__title {
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-h4);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
}

.cart-drawer__count {
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

.cart-drawer__close {
  margin-inline-start: auto;
  align-self: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ms-text-heading);
  padding: var(--ms-space-1);
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ms-space-5) var(--ms-space-6);
  display: flex;
  flex-direction: column;
}

.cart-drawer__note {
  font-size: var(--ms-size-body-2);
  color: var(--ms-btn-commerce);
  margin-block-end: var(--ms-space-5);
}

/*
 * Shown by cart-drawer.js's showError() — e.g. a product the Stock Manager
 * plugin has switched off. Inserted ahead of the (unchanged) cart contents,
 * not replacing them, so a failed add never looks like it emptied the cart.
 */
.cart-drawer__error {
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-error);
  background-color: var(--ms-error-bg, color-mix(in srgb, var(--ms-error) 10%, transparent));
  border: 1px solid var(--ms-error);
  border-radius: var(--ms-radius-md);
  padding: var(--ms-space-3) var(--ms-space-4);
  margin-block-end: var(--ms-space-5);
}

.cart-drawer__items {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.cart-line {
  display: flex;
  gap: var(--ms-space-4);
  padding-block: var(--ms-space-5);
  border-bottom: 1px solid var(--ms-border);
}

.cart-line__media img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  border-radius: var(--ms-radius-sm);
}

.cart-line__body {
  flex: 1;
  min-width: 0;
}

.cart-line__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-space-3);
}

.cart-line__name {
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-heading);
}

.cart-line__name:hover {
  color: var(--ms-btn-commerce);
}

.cart-line__price {
  font-weight: var(--ms-fw-bold);
  color: var(--ms-btn-commerce);
  white-space: nowrap;
}

.cart-line__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  margin-block-start: var(--ms-space-4);
}

.cart-line__remove {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ms-error);
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-semibold);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  overflow: hidden;
}

.qty-stepper__btn {
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--ms-size-body-1);
  color: var(--ms-text-heading);
}

.qty-stepper__btn:hover {
  background-color: var(--ms-bg-section);
}

.qty-stepper__value {
  min-width: 2.25rem;
  text-align: center;
  font-weight: var(--ms-fw-bold);
  border-inline: 1px solid var(--ms-border);
  line-height: 2.25rem;
}

.cart-drawer__foot {
  padding-block-start: var(--ms-space-5);
  margin-block-start: auto;
}

.cart-drawer__small {
  margin-block-start: var(--ms-space-3);
  text-align: center;
  font-size: var(--ms-size-body-3);
  color: var(--ms-text-muted);
}

.cart-drawer__empty {
  text-align: center;
  padding-block: var(--ms-space-8);
  display: grid;
  gap: var(--ms-space-5);
  justify-items: center;
}

@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .parts__toolbar {
    justify-content: stretch;
  }
}

@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  .cart-drawer__panel {
    width: 100%;
  }
}

/* =============================================================================
   20. SINGLE PRODUCT
   Modelled on the configurator layout (Figma p07): sticky media left,
   details right, supporting content full width below.
   ============================================================================= */

.miau-product__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-space-8);
  align-items: start;
}

.miau-product__media {
  position: sticky;
  top: 6rem;
  background-color: var(--ms-bg-section);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-6);
}

/* WooCommerce's gallery ships its own float/width rules; neutralise them so the
   grid above is what actually controls the layout. */
.miau-product__media .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.miau-product__media .woocommerce-product-gallery__image img {
  border-radius: var(--ms-radius-md);
}

.miau-product__media .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  list-style: none;
  padding: 0;
  margin-block-start: var(--ms-space-4);
}

.miau-product__media .flex-control-thumbs li {
  width: 4.5rem;
}

.miau-product__media .flex-control-thumbs img {
  border-radius: var(--ms-radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
}

.miau-product__media .flex-control-thumbs img.flex-active {
  border-color: var(--ms-border-selected);
}

.miau-product__summary .product_title {
  font-family: var(--ms-font-display);
  font-size: var(--ms-size-h2);
  color: var(--ms-text-heading);
  margin-block-end: var(--ms-space-4);
}

.miau-product__summary .price,
.miau-product__summary .price .amount {
  font-size: var(--ms-size-h4);
  font-weight: var(--ms-fw-black);
  color: var(--ms-btn-commerce);
}

.miau-product__summary .price del {
  opacity: 0.5;
  font-weight: var(--ms-fw-regular);
  margin-inline-end: var(--ms-space-2);
}

.miau-product__summary .woocommerce-product-details__short-description {
  margin-block: var(--ms-space-5);
  color: var(--ms-text-body);
}

.miau-product__summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-4);
  margin-block: var(--ms-space-6);
}

.miau-product__summary .quantity input[type='number'] {
  width: 5rem;
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
}

.miau-product__summary .product_meta {
  font-size: var(--ms-size-body-3);
  color: var(--ms-text-muted);
  padding-block-start: var(--ms-space-5);
  border-top: 1px solid var(--ms-border);
}

.miau-product__assurances {
  list-style: none;
  padding: 0;
  margin-block-start: var(--ms-space-5);
  display: grid;
  gap: var(--ms-space-2);
  font-size: var(--ms-size-body-2);
}

.miau-product__assurances li {
  position: relative;
  padding-inline-start: var(--ms-space-6);
}

.miau-product__assurances li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-accent);
}

.miau-product__details {
  margin-block-start: var(--ms-space-9);
}

/* Description / reviews tabs */
.miau-product__details .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  list-style: none;
  padding: 0;
  margin-block-end: var(--ms-space-6);
  border-bottom: 1px solid var(--ms-border);
}

.miau-product__details .woocommerce-tabs ul.tabs li {
  margin: 0;
}

.miau-product__details .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: var(--ms-space-3) var(--ms-space-5);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-muted);
  border-radius: var(--ms-radius-sm) var(--ms-radius-sm) 0 0;
}

.miau-product__details .woocommerce-tabs ul.tabs li.active a {
  color: var(--ms-accent);
  border-bottom: 3px solid var(--ms-accent);
}

.miau-product__details h2 {
  font-size: var(--ms-size-h3);
  margin-block-end: var(--ms-space-5);
}

/* Related / upsell grids reuse the card look. */
.miau-product__details ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ms-space-5);
  list-style: none;
  padding: 0;
  margin-block-start: var(--ms-space-5);
}

.miau-product__details ul.products li.product {
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-4);
  box-shadow: var(--ms-shadow-card);
  text-align: center;
}

.miau-product__details ul.products li.product img {
  border-radius: var(--ms-radius-md);
  margin-block-end: var(--ms-space-3);
}

.miau-product__details ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-accent);
  margin-block-end: var(--ms-space-2);
}

.miau-product__details ul.products li.product .price {
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
}

/* =============================================================================
   21. CONFIGURATOR SELECTION GRID (tiles with remove)
   ============================================================================= */

.cz-selection {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--ms-space-3);
}

.cz-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-4) var(--ms-space-3) var(--ms-space-3);
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-shadow-card);
  text-align: center;
}

/*
 * `display: flex` above is an author-stylesheet rule, so it wins the cascade
 * over the browser's own `[hidden] { display: none }` UA rule regardless of
 * selector order or specificity (author origin beats user-agent origin,
 * full stop) — without this, every tile rendered `hidden` in the PHP markup
 * (i.e. every not-yet-added addon) showed up immediately anyway. This is the
 * fix for that: an explicit author-level `display: none` for the hidden
 * state, which *does* win because it's the more specific of two author rules.
 */
.cz-tile[hidden] {
  display: none;
}

.cz-tile__media {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
}

.cz-tile__media img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  border-radius: var(--ms-radius-sm);
}

.cz-tile__media--icon {
  color: var(--ms-btn-commerce);
}

.cz-tile__name {
  font-size: var(--ms-size-body-3);
  font-weight: var(--ms-fw-semibold);
  color: var(--ms-text-heading);
  line-height: var(--ms-lh-snug);
}

/* Remove control: sits over the top-right corner of the tile. */
.cz-tile__remove {
  position: absolute;
  top: -0.5rem;
  inset-inline-end: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-bg-dark);
  color: var(--ms-text-on-dark);
  cursor: pointer;
  box-shadow: var(--ms-shadow-card);
  transition: background-color var(--ms-transition), transform var(--ms-transition);
}

.cz-tile__remove:hover {
  background-color: var(--ms-error);
  transform: scale(1.08);
}

/* =============================================================================
   22. EXTRAS PAGE SECTIONS + FILTER
   ============================================================================= */

.parts__section + .parts__section {
  margin-block-start: var(--ms-space-9);
}

.parts__section-intro {
  margin-block: calc(var(--ms-space-4) * -1) var(--ms-space-6);
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-2);
}

.parts__toolbar {
  align-items: center;
  gap: var(--ms-space-4);
}

.parts__count {
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
  white-space: nowrap;
}

.parts__empty {
  text-align: center;
  padding-block: var(--ms-space-8);
  color: var(--ms-text-muted);
}

@media (max-width: 1080px) {
  .miau-product__details ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .miau-product__top {
    grid-template-columns: 1fr;
  }
  .miau-product__media {
    position: static;
  }
}

/* =============================================================================
   23. CHECKOUT (Figma p19–p22)

   Real 3-step wizard (Angaben → Bestätigung → Zahlung), driven by
   assets/js/checkout-steps.js — see the comment at the top of
   woocommerce/checkout/form-checkout.php for how the panels/steps map to
   WooCommerce's single underlying <form>.
   ============================================================================= */

/* page.php prints its own <h1> (the page title, "Kasse") above the shortcode
   output — the styled title below replaces it, so hide the plain one. */
body.woocommerce-checkout .container.section > h1 {
  display: none;
}

/* Whatever's left on `woocommerce_before_checkout_form` after login/coupon/
   gift-card were relocated into the wizard steps (inc/checkout.php) — in
   practice just order-notice/error messages. WooCommerce prints these with
   no wrapper of its own, directly into .container.section above .miau-checkout
   (checkout/notices/{error,success,notice}.php each echo bare
   .woocommerce-error/-message/-info), so this is styled outside the
   .miau-checkout scope, on the plain classes. */
/* :where() keeps this at .woocommerce-info's own specificity (0,1,0), so the
   more specific overrides further down (.miau-checkout__utility .woocommerce-info
   etc, for the SAME class reused inside the login/coupon toggles) still win
   without needing !important. */
:where(body.woocommerce-checkout) .woocommerce-message,
:where(body.woocommerce-checkout) .woocommerce-error,
:where(body.woocommerce-checkout) .woocommerce-info {
  margin: 0 0 var(--ms-space-5);
  padding: var(--ms-space-4) var(--ms-space-5);
  border-radius: var(--ms-radius-md);
  list-style: none;
  font-size: var(--ms-size-body-2);
}

:where(body.woocommerce-checkout) .woocommerce-message {
  background-color: var(--ms-bg-section);
  border: 1px solid var(--ms-border-selected);
}

:where(body.woocommerce-checkout) .woocommerce-error {
  background-color: var(--orange-50);
  border: 1px solid var(--ms-error);
}

:where(body.woocommerce-checkout) .woocommerce-info {
  background-color: var(--ms-bg-section);
  border: 1px solid var(--ms-border);
}

.miau-checkout {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-7);
}

.miau-checkout__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-6);
}

.miau-checkout__title {
  margin: 0;
}

/* ---- Step chips ---- */

.checkout-steps {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.checkout-steps__step {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  color: var(--ms-text-muted);
  font-weight: var(--ms-fw-semibold);
  cursor: pointer;
  border-radius: var(--ms-radius-sm);
}

.checkout-steps__step.is-active {
  color: var(--ms-text-heading);
}

/* A chip only becomes clickable once its step has actually been completed —
   see the furthestReached guard in checkout-steps.js — so this hover/focus
   affordance is never shown on steps that aren't reachable yet either. */
.checkout-steps__step.is-complete:hover,
.checkout-steps__step.is-complete:focus-visible {
  color: var(--ms-text-heading);
}

.checkout-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-border);
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-bold);
  flex-shrink: 0;
}

.checkout-steps__step.is-active .checkout-steps__num {
  background-color: var(--electric-blue-200);
  color: var(--ms-text-heading);
}

/* Completed step: checkmark instead of the digit, per Figma p20–p22. */
.checkout-steps__step.is-complete .checkout-steps__num {
  background-color: var(--ms-btn-commerce);
  color: var(--ms-text-on-dark);
  font-size: 0;
}

.checkout-steps__step.is-complete .checkout-steps__num::before {
  content: '\2713';
  font-size: var(--ms-size-body-2);
}

.checkout-steps__label {
  font-size: var(--ms-size-body-2);
  white-space: nowrap;
}

.checkout-steps__sep {
  width: 2.5rem;
  height: 1px;
  background-color: var(--ms-border);
  flex-shrink: 0;
}

/* ---- Grid ---- */

.miau-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: var(--ms-space-8);
  align-items: start;
}

.miau-checkout__main {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-8);
  min-width: 0;
}

/* ---- Wizard steps ----
   Only one [data-step-panel] is visible at a time (checkout-steps.js toggles
   the `hidden` attribute). The explicit `display: none` below is defensive —
   without it, any later rule that sets `display` on this selector would beat
   the browser's own low-specificity `[hidden]` default and silently show
   every step at once. */

.miau-checkout__step {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-8);
}

.miau-checkout__step[hidden] {
  display: none;
}

.miau-checkout__step-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ms-space-4);
}

.miau-checkout__step-actions--single {
  display: block;
}

.miau-checkout__section-title {
  margin-block-end: var(--ms-space-5);
}

/* ---- Login (step 1) / coupon + gift card (step 2) ----
   Siblings of the checkout <form>, not inside a [data-step-panel] — see the
   comment at the top of form-checkout.php. Same [hidden] defensiveness as
   .miau-checkout__step: without it, any later `display` rule on this
   selector would beat the browser's low-specificity [hidden] default. */

/* Sits above .miau-checkout__grid (see the header comment), so it isn't a
   grid item and can't inherit the main column's width the normal way — this
   mirrors the grid's own math (1fr / 26rem sidebar / var(--ms-space-8) gap)
   instead, so the login/coupon box lines up with the billing form's edges
   below it rather than being an arbitrarily narrow (or, unconstrained, a
   1100px+ wide) box. */
.miau-checkout__utility {
  max-width: calc(100% - 26rem - var(--ms-space-8));
  margin-block-end: var(--ms-space-6);
}

@media (max-width: 960px) {
  /* Matches .miau-checkout__grid collapsing to a single column at this
     breakpoint (see below) — the main column is the full width there too. */
  .miau-checkout__utility {
    max-width: 100%;
  }
}

.miau-checkout__utility[hidden] {
  display: none;
}

.miau-checkout__utility .woocommerce-info {
  display: flex;
  align-items: baseline;
  gap: var(--ms-space-2);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

.miau-checkout__utility .woocommerce-info::before {
  display: none;
}

.miau-checkout__utility form.login {
  margin-block-start: var(--ms-space-4);
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
}

/* form-login.php's two fields (.form-row-first/-last) get their side-by-side
   layout from WooCommerce's own core woocommerce.css (float:left;width:47%),
   which is still enqueued — not from the .miau-checkout .form-row-first
   flex rule above, which only takes effect inside a flex parent (the
   billing/shipping wrapper divs) and this form isn't one. Widening the
   container above is what actually fixes this: 47% of a wider box is a
   usable field instead of the ~180px the old max-width:24rem left it. */
.miau-checkout__utility form.login .woocommerce-form-login__rememberme,
.miau-checkout__utility form.login .lost_password {
  margin-block-start: var(--ms-space-3);
}

/* ---- Step 2: recap ---- */

.miau-checkout__recap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ms-space-3) var(--ms-space-6);
  margin: 0;
}

.miau-checkout__recap dt {
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-2);
}

.miau-checkout__recap dd {
  margin: 0;
  font-weight: var(--ms-fw-semibold);
  color: var(--ms-text-body);
}

.miau-checkout__edit-link {
  display: inline-block;
  margin-block-start: var(--ms-space-5);
  background: none;
  border: 0;
  padding: 0;
  color: var(--ms-btn-commerce);
  font-weight: var(--ms-fw-bold);
  font-size: var(--ms-size-body-2);
  cursor: pointer;
  text-decoration: underline;
}

.miau-checkout__edit-link:hover {
  color: var(--ms-btn-commerce-hover);
}

.miau-checkout .woocommerce-form-coupon-toggle,
.miau-checkout .woocommerce-form-login-toggle {
  margin: 0;
}

.miau-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.miau-checkout .woocommerce-form-login-toggle .woocommerce-info {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-body);
}

.miau-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
.miau-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
  display: none;
}

.miau-checkout .woocommerce-form-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ms-space-4);
  margin-block-start: var(--ms-space-4);
}

.miau-checkout .woocommerce-form-coupon .form-row {
  flex: 1 1 16rem;
  margin: 0;
}

/* ---- Billing / shipping fields ---- */

.miau-checkout .woocommerce-billing-fields h3,
.miau-checkout .woocommerce-shipping-fields h3,
.miau-checkout .woocommerce-additional-fields h3 {
  font-family: var(--ms-font-body);
  font-size: var(--ms-size-h5);
  font-weight: var(--ms-fw-black);
  color: var(--ms-text-heading);
  margin-block-end: var(--ms-space-5);
}

.miau-checkout .woocommerce-billing-fields__field-wrapper,
.miau-checkout .woocommerce-shipping-fields__field-wrapper,
.miau-checkout .woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-5);
}

.miau-checkout .form-row {
  flex: 1 1 100%;
  min-width: 0;
}

.miau-checkout .form-row-first,
.miau-checkout .form-row-last {
  flex: 1 1 calc(50% - var(--ms-space-5) / 2);
}

.miau-checkout .form-row label {
  display: block;
  margin-block-end: var(--ms-space-2);
  font-size: var(--ms-size-body-2);
  font-weight: var(--ms-fw-semibold);
  color: var(--ms-text-body);
}

.miau-checkout .form-row label .required {
  color: var(--ms-accent);
  text-decoration: none;
}

.miau-checkout .form-row .woocommerce-input-wrapper {
  display: block;
}

.miau-checkout .form-row .input-text,
.miau-checkout .form-row select {
  width: 100%;
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  background-color: var(--ms-bg-card);
  font-size: var(--ms-size-body-1);
  transition: border-color var(--ms-transition);
}

.miau-checkout .form-row .input-text:focus,
.miau-checkout .form-row select:focus {
  border-color: var(--ms-border-selected);
}

.miau-checkout .form-row.woocommerce-invalid .input-text,
.miau-checkout .form-row.woocommerce-invalid select {
  border-color: var(--ms-error);
}

.miau-checkout .select2-container--default .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
}

.miau-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: normal;
}

.miau-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: var(--ms-space-3);
}

.miau-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  font-size: var(--ms-size-body-2);
  cursor: pointer;
}

.miau-checkout .woocommerce-form__input-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--ms-btn-commerce);
  flex-shrink: 0;
}

.miau-checkout .woocommerce-account-fields,
.miau-checkout #ship-to-different-address {
  margin-block-start: var(--ms-space-5);
}

.miau-checkout div.shipping_address {
  margin-block-start: var(--ms-space-5);
}

/* ---- Payment method list (Figma p20–p22 selected-state) ---- */

.miau-checkout ul.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
}

/* One method per row, full width — a 2-column grid (tried first) squeezed
   the expanded card-fields box (.payment_box) down to a single ~280px
   column, since .payment_box is a block child of the <li>, not its own flex
   item of the <ul>, so it can never span past its parent's column. */
.miau-checkout li.wc_payment_method {
  position: relative;
}

.miau-checkout li.wc_payment_method input.input-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* `>` is deliberate, not decorative: gateways render their own nested labels
   inside .payment_box (Stripe's card form has a "Karte speichern" toggle
   built from a bare <label>) and an unscoped `label` selector here styled
   THAT as if it were the big pill button too — 108×56px, blue-filled,
   sitting on top of its own text. Found by testing the Kreditkarte flow,
   not by reading the CSS. */
.miau-checkout li.wc_payment_method > label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-3);
  min-height: 3.5rem;
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 2px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  background-color: var(--ms-bg-card);
  cursor: pointer;
  font-weight: var(--ms-fw-bold);
  text-align: center;
  transition: border-color var(--ms-transition), background-color var(--ms-transition), color var(--ms-transition);
}

.miau-checkout li.wc_payment_method > label img {
  display: inline-block;
  max-height: 1.5rem;
  width: auto;
  vertical-align: middle;
}

.miau-checkout li.wc_payment_method:hover > label {
  border-color: var(--electric-blue-200);
}

/* Selected state: solid blue fill, per Figma p20–p22 (not the pale-fill
   pattern .cz-card uses — the checkout mockups show a stronger fill here).
   `:has(> input...)` (not the bare `:has(input:checked)` this used to be)
   for the same reason as the `>` above — a gateway's own nested checkbox
   being checked (e.g. "save this card") must not count. */
.miau-checkout li.wc_payment_method:has(> input.input-radio:checked) > label {
  background-color: var(--ms-btn-commerce);
  border-color: var(--ms-btn-commerce);
  color: var(--ms-text-on-dark);
}

.miau-checkout li.wc_payment_method:has(> input.input-radio:focus-visible) > label {
  outline: 3px solid var(--ms-focus-ring);
  outline-offset: 2px;
}

.miau-checkout .payment_box {
  margin-block-start: var(--ms-space-2);
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  background-color: var(--ms-bg-section);
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-body);
}

.miau-checkout .payment_box p {
  margin-block-end: var(--ms-space-3);
}

.miau-checkout .payment_box p:last-child {
  margin-block-end: 0;
}

/* ---- Terms + place order ---- */

.miau-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-block-start: var(--ms-space-6);
}

.miau-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  flex-basis: auto;
}

.miau-checkout .form-row.place-order {
  margin-block-start: var(--ms-space-6);
}

/* Checkout is a commerce action, but the cart drawer's own checkout button
   (inc/cart-drawer.php) already established orange for this exact CTA — kept
   consistent here rather than switching to blue partway through the flow. */
.miau-checkout #place_order {
  width: 100%;
  background-color: var(--ms-btn-marketing);
  border-color: var(--ms-btn-marketing);
}

.miau-checkout #place_order:hover {
  background-color: var(--ms-btn-marketing-hover);
  border-color: var(--ms-btn-marketing-hover);
}

/* ---- Order summary sidebar ---- */

/* min-width: 0 mirrors .miau-checkout__main above — without it a grid item's
   default min-width: auto uses its content's min-content size, and the order
   table (a <table> underneath, even with its rows flexed) resists shrinking
   below that. At the 960px breakpoint .miau-checkout__grid collapses to a
   single 1fr column shared by both items, so the sidebar's unshrunk
   min-content was winning the track's size and dragging .miau-checkout__main
   past the viewport edge along with it — not a sidebar-only overflow. */
.miau-checkout__sidebar {
  position: sticky;
  top: calc(4.5rem + var(--ms-space-5));
  min-width: 0;
}

.miau-checkout__order-card {
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-5);
  box-shadow: var(--ms-shadow-card);
}

/* Default h2 sizing (up to ~2.5rem, the bubble display font) reads fine as a
   page section title but was disproportionate for a sidebar widget next to
   16px item rows — the single biggest contributor to this card feeling
   cramped once there were 3+ items to fit above the fold. */
.miau-checkout__order-title {
  font-size: var(--ms-size-h4);
  margin-block-end: var(--ms-space-4);
}

/* body-2 (14–16px) instead of the inherited body-1 (16–20px) default — the
   second lever on "cramped": every extra px here is multiplied by every row
   plus the subtotal/shipping/total lines below it. */
/* table-layout: fixed is load-bearing, not cosmetic: tbody/tfoot rows below
   are flexed (display: flex), which strips their <tr>s of table-row display,
   so the browser has no real row/column structure left to compute auto
   layout from and was falling back to sizing the <table> off its widest cell
   content — wide enough (shipping method name + price on one line) to push
   the table past its 26rem sidebar column and, via the shared grid track,
   past the mobile viewport. Fixed layout makes the 100% above authoritative
   instead of a mere minimum. */
.miau-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--ms-size-body-2);
}

.miau-checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}

.miau-checkout .woocommerce-checkout-review-order-table tbody tr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding-block: var(--ms-space-3);
  border-block-end: 1px solid var(--ms-border);
}

.miau-checkout .woocommerce-checkout-review-order-table tbody tr:first-child {
  padding-block-start: 0;
}

.miau-checkout .woocommerce-checkout-review-order-table td,
.miau-checkout .woocommerce-checkout-review-order-table th {
  padding: 0;
  border: 0;
  text-align: start;
  /* Every row (tbody AND tfoot) is flexed above; every cell is therefore a
     flex item with a default min-width: auto. The order-total row is the one
     that actually hits this in practice — its label + bold, larger-font total
     price can together exceed the sidebar's shrunk mobile width — but setting
     it table-wide is cheaper than chasing each row that happens to be long
     enough to trigger it. */
  min-width: 0;
}

/* min-width: 0 is required because the row is a flex container — without it
   a flex item's default min-width (auto = its content's min-content size)
   wins over the table's own 100% width. A product name with no wrappable
   spaces (e.g. a bundle title joined with "+", "Vase+Samen+Erde") is a
   single unbreakable run that would otherwise force the whole card to
   overflow its 26rem sidebar column to fit it on one line. */
.miau-checkout .woocommerce-checkout-review-order-table .product-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-heading);
}

.miau-checkout .woocommerce-checkout-review-order-table .product-name .product-quantity {
  display: block;
  margin-block-start: var(--ms-space-1);
  font-weight: var(--ms-fw-regular);
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-3);
}

.miau-checkout .woocommerce-checkout-review-order-table .product-total {
  flex-shrink: 0;
  font-weight: var(--ms-fw-bold);
  color: var(--ms-btn-commerce);
  white-space: nowrap;
  text-align: end;
}

.miau-checkout .woocommerce-checkout-review-order-table tfoot tr {
  display: flex;
  justify-content: space-between;
  gap: var(--ms-space-4);
  padding-block: var(--ms-space-2);
}

.miau-checkout .woocommerce-checkout-review-order-table tfoot th {
  font-weight: var(--ms-fw-semibold);
  color: var(--ms-text-body);
}

.miau-checkout .woocommerce-checkout-review-order-table tfoot td {
  font-weight: var(--ms-fw-semibold);
  text-align: end;
}

.miau-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
  margin-block-start: var(--ms-space-2);
  padding-block-start: var(--ms-space-4);
  border-block-start: 1px solid var(--ms-border);
}

.miau-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.miau-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  font-size: var(--ms-size-h5);
  font-weight: var(--ms-fw-black);
  color: var(--ms-accent);
}

/* At the 960px breakpoint the sidebar collapses to the shared, narrower
   single-column track (see .miau-checkout__sidebar above) — "Gesamtsumme"
   plus a black-weight, h5-sized price no longer both fit on one flex line
   without the label's own box shrinking below its text's rendered width
   (min-width: 0, set table-wide above, permits exactly that shrink), which
   visually overflows the label into the price. Same class of fix as the
   hero h1's mobile size, just for this row. */
@media (max-width: 960px) {
  .miau-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
  .miau-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: var(--ms-size-body-1);
  }
}

.miau-checkout .woocommerce-shipping-totals ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
  text-align: end;
}

@media (max-width: 960px) {
  .miau-checkout__grid {
    grid-template-columns: 1fr;
  }

  .miau-checkout__sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 560px) {
  .checkout-steps__label {
    display: none;
  }

  .miau-checkout__step-actions {
    flex-direction: column-reverse;
  }

  .miau-checkout__step-actions .btn {
    width: 100%;
  }
}

/* =============================================================================
   24. VET AUTHORITY QUOTE, PUMP TECH, CERTIFICATIONS & GUARANTEE
   Homepage trust-building content carried over verbatim from the old
   Cornerstone homepage (see front-page.php for the copy). Long supporting
   detail is tucked behind .info-accordion so the page stays scannable; the
   short, high-trust items (the vet quote, the guarantee headline) stay
   visible by default.
   ============================================================================= */

.vet-quote {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-6);
  background-color: var(--ms-bg-card);
}

.vet-quote__logos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ms-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-6);
}

.vet-quote__logos img {
  max-height: 3.5rem;
  max-width: 9rem;
  width: auto;
  object-fit: contain;
}

.vet-quote blockquote {
  margin: 0;
  font-size: var(--ms-size-h6);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-heading);
  text-align: center;
}

.vet-quote figcaption {
  margin-block-start: var(--ms-space-3);
  text-align: center;
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-3);
}

/* ---- Generic expandable content (same look as .faq-item, different job:
   long supporting detail rather than Q&A). ---- */

.info-accordion {
  margin-block-start: var(--ms-space-5);
  display: grid;
  gap: var(--ms-space-3);
}

.faq-item,
.info-accordion__item {
  border-bottom: 1px solid var(--ms-border);
}

.faq-item__q,
.info-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-4);
  padding-block: var(--ms-space-5);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-accent);
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker,
.info-accordion__summary::-webkit-details-marker {
  display: none;
}

.faq-item__q::after,
.info-accordion__summary::after {
  content: '+';
  font-size: var(--ms-size-h5);
  font-weight: var(--ms-fw-regular);
  line-height: 1;
  color: var(--ms-accent);
  flex-shrink: 0;
}

.faq-item[open] .faq-item__q::after,
.info-accordion__item[open] .info-accordion__summary::after {
  content: '−';
}

.faq-item__a,
.info-accordion__body {
  padding-block-end: var(--ms-space-5);
  color: var(--ms-text-body);
}

.info-accordion__body > * + * {
  margin-block-start: var(--ms-space-4);
}

.info-accordion__body ol,
.info-accordion__body ul {
  padding-inline-start: var(--ms-space-6);
  display: grid;
  gap: var(--ms-space-3);
}

/* ---- Pump video ---- */

.pump-media {
  display: grid;
  gap: var(--ms-space-3);
}

.pump-media video {
  width: 100%;
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-card);
}

.pump-media figcaption {
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-3);
}

/* ---- Certification badges ---- */

.cert-section {
  margin-block-start: var(--ms-space-9);
  padding-block-start: var(--ms-space-8);
  border-top: 1px solid var(--ms-border);
}

.cert-badges {
  list-style: none;
  padding: 0;
  margin: var(--ms-space-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-6);
}

.cert-badges img {
  max-height: 4rem;
  max-width: 6rem;
  width: auto;
  object-fit: contain;
}

.cert-badges__caption {
  margin-block-start: var(--ms-space-4);
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-3);
}

/* ---- Guarantee ---- */

.guarantee {
  text-align: center;
}

.guarantee__badge {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-accent);
  color: var(--ms-text-on-dark);
  font-family: var(--ms-font-display);
  font-size: var(--ms-size-h6);
  margin-block-end: var(--ms-space-4);
}

.guarantee__lead {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--ms-text-body);
}

.guarantee__details {
  max-width: 40rem;
  margin-inline: auto;
  text-align: start;
  color: var(--ms-text-body);
}

.guarantee__details p + p {
  margin-block-start: var(--ms-space-4);
}

.guarantee__signature {
  margin-block-start: var(--ms-space-5);
  display: grid;
  justify-items: center;
  gap: var(--ms-space-2);
}

.guarantee__signature img {
  height: 2.5rem;
  width: auto;
}

.guarantee__signature figcaption {
  color: var(--ms-text-muted);
  font-size: var(--ms-size-body-3);
}

@media (max-width: 560px) {
  .vet-quote blockquote {
    font-size: var(--ms-size-body-1);
  }
}

/* =============================================================================
   23. RATING (Mini Fountains intro)
   ============================================================================= */

.rating {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-block-start: var(--ms-space-4);
}

.rating__stars {
  color: var(--ms-accent);
  letter-spacing: 0.1em;
  font-size: var(--ms-size-body-1);
}

.rating__label {
  font-size: var(--ms-size-body-2);
  color: var(--ms-text-muted);
}

/* =============================================================================
   25. TV VIDEO FRAME (miau_tv_embed)
   =============================================================================
   A retro TV set drawn entirely in CSS — no image asset, so it recolours with
   the tokens and stays sharp at any density. The cabinet is navy (the brand's
   dark surface) with the orange accent reserved for the one live signal, the
   ON AIR dot, so it reads as an accent rather than decoration.
   ============================================================================= */

.tv {
  --tv-cabinet: var(--navy-blue-500);
  --tv-cabinet-dark: var(--navy-blue-700);

  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  /* Room above for the antennae, which sit outside the cabinet box. */
  padding-block-start: 2.75rem;
}

/* ---- Antennae ---- */

.tv__antennae {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12rem;
  height: 3rem;
  transform: translateX(-50%);
}

.tv__antenna {
  position: absolute;
  bottom: 0;
  width: 0.28rem;
  height: 3rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--tv-cabinet);
}

/* The tip knob. Drawn as a pseudo-element so one span makes a whole antenna. */
.tv__antenna::after {
  content: '';
  position: absolute;
  top: -0.3rem;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-accent);
  transform: translateX(-50%);
}

.tv__antenna--left {
  left: 2.5rem;
  transform: rotate(-24deg);
  transform-origin: bottom center;
}

.tv__antenna--right {
  right: 2.5rem;
  transform: rotate(24deg);
  transform-origin: bottom center;
}

/* ---- Cabinet ---- */

.tv__body {
  position: relative;
  z-index: 1;
  padding: var(--ms-space-3);
  border-radius: var(--ms-radius-lg);
  background-color: var(--tv-cabinet);
  box-shadow: 0 1.25rem 2.5rem rgba(9, 20, 36, 0.28);
}

.tv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  padding-inline: var(--ms-space-2);
  padding-block-end: var(--ms-space-2);
  font-size: 0.6875rem;
  font-weight: var(--ms-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-text-on-dark);
}

.tv__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--orange-200);
}

.tv__live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-accent);
  animation: tv-pulse 2s ease-in-out infinite;
}

@keyframes tv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- Screen ---- */

.tv__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ms-radius-md);
  background-color: var(--midnight-blue-900);
}

.tv__poster,
.tv__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* hqdefault is 4:3 with letterbox bars baked in; cover crops those away so
   the poster fills the 16:9 screen the way the player will. */
.tv__poster {
  object-fit: cover;
}

/* The poster stays behind the iframe rather than being removed — it covers
   the moment between the iframe attaching and YouTube painting its first
   frame, which is otherwise a flash of black. */
.tv__iframe {
  z-index: 1;
}

.tv__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background-color: var(--ms-accent);
  color: #ffffff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--ms-transition), background-color var(--ms-transition);
}

.tv__play svg {
  width: 2rem;
  height: 2rem;
  /* Nudge right so the triangle's optical centre lands on the circle's. */
  margin-inline-start: 0.15rem;
}

.tv__play:hover {
  background-color: var(--ms-btn-marketing-hover);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Once the player is mounted the button must not sit over its controls. */
.tv.is-playing .tv__play {
  display: none;
}

/* ---- Control strip ---- */

.tv__controls {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding-block-start: var(--ms-space-3);
  padding-inline: var(--ms-space-2);
}

.tv__leds {
  display: inline-flex;
  gap: 0.3rem;
}

.tv__leds i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--ms-radius-pill);
  background-color: var(--navy-blue-300);
}

.tv__leds i.is-on {
  background-color: var(--ms-accent);
}

/* Speaker grille: repeating-linear-gradient rather than a row of elements —
   same look, one element, and it scales with the cabinet. */
.tv__grille {
  flex: 1;
  height: 0.75rem;
  border-radius: var(--ms-radius-sm);
  background-image: repeating-linear-gradient(
    90deg,
    var(--navy-blue-400) 0 2px,
    transparent 2px 5px
  );
}

.tv__dial {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--ms-radius-pill);
  border: 2px solid var(--navy-blue-300);
}

/* ---- Stand ---- */

.tv__stand {
  width: 7rem;
  height: 0.6rem;
  margin-inline: auto;
  border-radius: 0 0 var(--ms-radius-pill) var(--ms-radius-pill);
  background-color: var(--tv-cabinet-dark);
}

@media (max-width: 560px) {
  /* The antennae are pure decoration and crowd the heading above them on a
     phone; the cabinet alone still reads as a TV. */
  .tv {
    padding-block-start: 0;
  }

  .tv__antennae {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv__live-dot {
    animation: none;
  }
}

/* =============================================================================
   26. TECH-SPEC LISTS, DRAWINGS & WIDE ACCORDIONS
   ============================================================================= */

/*
 * .split centres its two columns, which is right when one side is an image.
 * Where both sides are lists of different lengths — the specs and the
 * delivery contents — centring leaves their headings on different baselines.
 */
.split--top {
  align-items: start;
}

.spec-note {
  margin-block-start: var(--ms-space-4);
  font-size: var(--ms-size-body-3);
  color: var(--ms-text-muted);
}

/*
 * The .info-accordion default width follows whatever column it sits in. The
 * benefits and drawings accordions are full-container instead: they carry the
 * page's long-form copy and a measured drawing needs the room.
 */
.info-accordion--wide {
  margin-block-start: var(--ms-space-7);
}

/* Production quotes a real Amazon reviewer inside the filter-cost argument;
   it needs to read as a quotation, not as more body copy. */
.info-accordion__body blockquote {
  margin: 0;
  padding-inline-start: var(--ms-space-5);
  border-inline-start: 3px solid var(--ms-accent);
  color: var(--ms-text-body);
  font-style: italic;
}

.info-accordion__body blockquote footer {
  margin-block-start: var(--ms-space-2);
  font-style: normal;
  font-size: var(--ms-size-body-3);
  color: var(--ms-text-muted);
}

/* ---- Measured drawings ---- */

.spec-drawings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ms-space-6);
}

.spec-drawing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-5);
  border-radius: var(--ms-radius-md);
  background-color: var(--ms-bg-card);
  border: 1px solid var(--ms-border);
}

/* The source drawings are line art on white at assorted intrinsic sizes;
   capping height rather than width keeps the set optically consistent
   whether a part is portrait (towers) or landscape (the base). */
.spec-drawing img {
  max-width: 100%;
  max-height: 11rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*
 * margin-block-start:auto pins the caption to the bottom of the card. The
 * drawings have very different aspect ratios (the base is wide and short, the
 * towers are tall), so without this each caption sits directly under its own
 * image and the row of weights reads as a ragged zigzag.
 */
.spec-drawing__weight {
  margin-block-start: auto;
  font-size: var(--ms-size-body-3);
  font-weight: var(--ms-fw-bold);
  color: var(--ms-text-heading);
  text-align: center;
}

/* =============================================================================
   27. THIRD-PARTY OVERLAYS — MOBILE
   ============================================================================= */

/*
 * Klaviyo's on-site signup popup renders as its own `position: fixed`
 * overlay (z-index 90000, well above anything of ours) with a per-build class
 * hash — `kl-private-reset-css-<hash>` — shared by the whole widget tree, not
 * just its outer panel, so hiding every element that matches also hides the
 * one actually painting the fixed box. On mobile it opens tall enough to
 * cover roughly the bottom two-thirds of the viewport, which sits directly on
 * top of any of our own fixed bottom bars — confirmed on /customize.html,
 * where it fully occluded .cz-summary's pinned add-to-cart button (same
 * z-index family: cz-summary is 40, this is 90000).
 *
 * Scoped to the same max-width as .cz-summary's own mobile breakpoint, not a
 * blanket hide — desktop has no fixed bottom bar for it to collide with.
 */
@media (max-width: 900px) {
  [class*='kl-private-reset-css'] {
    display: none !important;
  }
}

/* =============================================================================
   28. MINI FOUNTAINS — STICKY MOBILE CHECKOUT BAR
   ============================================================================= */

/*
 * Same fixed-bottom-bar pattern as .cz-summary on the customize page (same
 * z-index, same shadow/border, same safe-area padding) — a persistent "go to
 * checkout" affordance while browsing the colour-linked accessories further
 * down the page, instead of only being reachable at the very bottom. Not
 * gated on cart state: this page can be page-cached (FlyingPress), and a
 * server-rendered "cart has items" check would go stale for a returning
 * visitor — see the ui-ux-audit-blockers-20260911 memory for the same class
 * of cache/personalisation trap on /customize.html. A "Zur Kasse" link is
 * harmless to show even before anything is in the cart.
 */
.mini-sticky-checkout {
  display: none;
}

@media (max-width: 900px) {
  .mini-sticky-checkout {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    background-color: var(--ms-bg-card);
    border-top: 1px solid var(--ms-border);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.1);
    padding: var(--ms-space-3) var(--ms-space-4);
    padding-bottom: max(var(--ms-space-3), env(safe-area-inset-bottom));
  }

  /*
   * So the fixed bar never covers the page's own footer/final CTA once
   * scrolled to the end. Targets WordPress's own auto-generated
   * page-template body class (theme has no .site-main wrapper to hang this
   * off instead) rather than a class this template would have to remember
   * to add itself.
   */
  body.page-template-page-templatestemplate-mini-fountains-php {
    padding-block-end: 4.5rem;
  }
}