/* Terrace kits — landing + PDP chrome (matches HTML prototypes). */

body.page-template-terrace-kits .mds-kits-landing,
body.single-product.mds-terrace-kit {
  --mds-kit-orange: #e06132;
  --mds-kit-orange-hover: #c9522a;
  --mds-kit-orange-light: rgba(224, 97, 50, 0.08);
  --mds-kit-brown: #312319;
  --mds-kit-text: #333;
  --mds-kit-text-mid: #555;
  --mds-kit-text-light: #777;
  --mds-kit-text-muted: #999;
  --mds-kit-white: #fff;
  --mds-kit-page-bg: #f5f3f0;
  --mds-kit-light-bg: #f9f8f7;
  --mds-kit-border: #e5e5e5;
  --mds-kit-border-soft: #f0ece8;
  --mds-kit-green: #4caf50;
  --mds-kit-gradient: linear-gradient(135deg, #e06132 0%, #d4472a 100%);
  --mds-kit-shadow: 0 2px 12px rgba(49, 35, 25, 0.06);
  --mds-kit-shadow-hover: 0 6px 24px rgba(49, 35, 25, 0.1);
  --mds-kit-shadow-orange: 0 4px 20px rgba(224, 97, 50, 0.2);
}

/*
 * Woodmart wraps custom page templates in `.wd-content-layout` (12-col CSS grid).
 * Without an explicit span, `<main class="mds-kits-landing">` collapses to one 90px column.
 */
body.page-template-terrace-kits .wd-content-layout > .mds-kits-landing,
body.page-template-terrace-kits .mds-kits-landing {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

.mds-kits-landing {
  background: var(--mds-kit-page-bg);
  color: var(--mds-kit-text);
  padding-bottom: 2.5rem;
}

/* The background runs edge to edge, the content does not.
   WooDmart caps its content wrapper at 1440px, and the landing's warm grey used
   to stop at that cap: a hard seam against the white page on any wide screen.
   The cap is lifted so the colour can reach the glass, and the wrap puts the
   content back in the column where it belongs. The body carries the same colour
   so nothing white shows above or below a short page. */
/* html-qualified: the theme sets a plain `body` background from customizer CSS
   that loads after this file, and only specificity wins that. Without it the
   brands strip below the landing stays white and the seam moves from the sides
   to the bottom. */
html body.page-template-terrace-kits {
  background-color: #f5f3f0;
}

/* The body colour only shows through what is transparent, and the brands strip
   between the content and the footer is an Elementor section painting its own
   #f9f9f9. So the seam did not move to the bottom, it changed shade: a band of a
   colder grey across the full width. `.wd-prefooter` is the theme's own wrapper
   for that area, which survives rebuilding the block — the Elementor element id
   would not. Scoped to this template, so the strip keeps its colour elsewhere. */
/* html+body qualified on purpose: Elementor writes the strip's colour as
   `.elementor-728 .elementor-element.elementor-element-2f0e28ac:not(...)`, which
   is four classes, and a shorter selector here quietly loses to it. */
html body.page-template-terrace-kits .wd-prefooter,
html body.page-template-terrace-kits .wd-prefooter .elementor-section.elementor-top-section,
html body.page-template-terrace-kits .wd-prefooter .elementor-background-overlay {
  background-color: transparent;
}

body.page-template-terrace-kits .wd-content-layout {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.page-template-terrace-kits .mds-kits-landing {
  min-height: 60vh;
}

.mds-kits-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Landing hero --- */
.mds-kits-hero {
  background: linear-gradient(135deg, var(--mds-kit-brown) 0%, #4a3625 100%);
  border-radius: 16px;
  margin-top: 14px;
  padding: 38px 42px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.mds-kits-hero::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(224, 97, 50, 0.15);
}

.mds-kits-hero-badge {
  display: inline-block;
  background: var(--mds-kit-gradient);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  box-shadow: var(--mds-kit-shadow-orange);
}

.mds-kits-hero h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  max-width: 640px;
  color: #fff;
}

.mds-kits-lead {
  margin: 10px 0 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  line-height: 1.65;
}

.mds-kits-lead strong {
  color: #fff;
  font-weight: 700;
}

.mds-kits-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 1;
}

.mds-kits-step {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mds-kits-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mds-kit-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: var(--mds-kit-shadow-orange);
  color: #fff;
}

.mds-kits-step b {
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
  color: #fff;
}

.mds-kits-step span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* USP */
.mds-kits-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 26px;
}

.mds-kits-usp-item {
  background: var(--mds-kit-white);
  border: 1px solid var(--mds-kit-border);
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: var(--mds-kit-shadow);
}

.mds-kits-usp-item b {
  font-size: 12.5px;
  color: var(--mds-kit-brown);
  display: block;
  line-height: 1.3;
}

.mds-kits-usp-item span {
  font-size: 11px;
  color: var(--mds-kit-text-light);
}

.mds-kits-sec-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--mds-kit-brown);
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}

.mds-kits-sec-sub {
  font-size: 13px;
  color: var(--mds-kit-text-light);
  margin: 0 0 18px;
}

/* Cards */
.mds-kits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 34px;
}

.mds-kit-card {
  background: var(--mds-kit-white);
  border: 1px solid var(--mds-kit-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--mds-kit-shadow);
  transition: box-shadow 0.25s, transform 0.25s;
  display: flex;
  flex-direction: column;
}

.mds-kit-card:hover {
  box-shadow: var(--mds-kit-shadow-hover);
  transform: translateY(-3px);
}

.mds-kit-card__media {
  height: 210px;
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--mds-kit-light-bg, #f9f8f7);
  text-decoration: none;
}

/* Taken out of flow so the box decides the size, never the file. Left in flow the
   photo is laid out from its width/height attributes until this rule applies,
   which is the jump you see: full width and tall, then snapping to the strip. */
.mds-kit-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Stated again, and this time so nothing can take it back. WooCommerce and
   Woodmart both ship `img { max-width: 100%; height: auto }` style rules for
   product images; wherever one of those wins, the photo keeps its own aspect
   inside the strip, gets centred by the auto margins, and shows the card
   background as a margin down both sides instead of filling the card.
   The placeholder is excluded on purpose — it is fitted, not cropped. */
.mds-kit-card__media img:not(.woocommerce-placeholder) {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
}


.mds-kit-card__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  z-index: 1;
}

.mds-kit-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  background: rgba(49, 35, 25, 0.85);
}

.mds-kit-badge--disc {
  background: var(--mds-kit-gradient);
  box-shadow: var(--mds-kit-shadow-orange);
}

.mds-kit-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mds-kit-card__title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--mds-kit-brown);
  line-height: 1.3;
}

.mds-kit-card__title a {
  color: inherit;
  text-decoration: none;
}

.mds-kit-card__tag {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--mds-kit-text-light);
  line-height: 1.5;
}

.mds-kit-card__specs {
  list-style: none;
  margin: 13px 0;
  padding: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.mds-kit-card__specs li {
  font-size: 11px;
  color: var(--mds-kit-text-mid);
  display: flex;
  gap: 5px;
  align-items: baseline;
}

.mds-kit-card__specs strong {
  color: var(--mds-kit-brown);
}

.mds-kit-card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--mds-kit-border-soft);
}

/* Computed from the catalog by the kits-landing script; never hand-typed. */
.mds-kit-card__total[hidden] {
  display: none;
}

.mds-kit-card__total {
  display: block;
  flex: 1 1 auto;
}

.mds-kit-card__total-lead {
  display: block;
  font-size: 11px;
  color: var(--mds-kit-text-muted);
}

.mds-kit-card__total-value {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--mds-kit-brown);
  letter-spacing: -0.4px;
  line-height: 1.1;
}

.mds-kit-card__total-m2 {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mds-kit-text-muted);
}

.mds-kit-card__cta {
  margin-left: auto;
  background: var(--mds-kit-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 20px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: var(--mds-kit-shadow-orange);
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.mds-kit-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(224, 97, 50, 0.35);
  color: #fff !important;
}

/* Included + help */
.mds-kits-included {
  background: var(--mds-kit-white);
  border: 1px solid var(--mds-kit-border);
  border-radius: 14px;
  box-shadow: var(--mds-kit-shadow);
  margin-bottom: 34px;
  overflow: hidden;
}

.mds-kits-included__head {
  background: linear-gradient(135deg, #faf7f5 0%, #f5f0eb 100%);
  padding: 15px 24px;
  border-bottom: 1px solid var(--mds-kit-border-soft);
  font-size: 14px;
  font-weight: 700;
  color: var(--mds-kit-brown);
}

.mds-kits-included__body {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.mds-kits-inc {
  text-align: center;
  padding: 14px 8px;
  background: var(--mds-kit-light-bg);
  border-radius: 10px;
}

.mds-kits-inc b {
  font-size: 11.5px;
  color: var(--mds-kit-brown);
  display: block;
  line-height: 1.35;
}

.mds-kits-inc span {
  font-size: 10px;
  color: var(--mds-kit-text-muted);
}

.mds-kits-included__note {
  padding: 0 24px 18px;
  margin: 0;
  font-size: 12px;
  color: var(--mds-kit-text-light);
}

.mds-kits-included__note strong {
  color: var(--mds-kit-brown);
}

.mds-kits-help {
  background: var(--mds-kit-white);
  border: 2px solid var(--mds-kit-border);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.mds-kits-help b {
  font-size: 14px;
  color: var(--mds-kit-brown);
  display: block;
}

.mds-kits-help span {
  font-size: 12.5px;
  color: var(--mds-kit-text-light);
}

.mds-kits-help__btns {
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mds-kits-btn-ghost {
  border: 2px solid var(--mds-kit-border);
  background: var(--mds-kit-white);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mds-kit-text-mid);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.mds-kits-btn-ghost:hover {
  border-color: var(--mds-kit-orange);
  color: var(--mds-kit-orange);
}

/* The <button> beside the two <a> needs every property restated, and the
   selector needs the element name to carry it: Woodmart styles buttons through
   `:is(.btn, .button, button, …)`, which is one class of specificity — a tie
   with a bare class here, and its stylesheet loads later, so it wins. Adding
   `button` breaks the tie without !important. */
button.mds-kits-btn-ghost {
  border: 2px solid var(--mds-kit-border);
  border-radius: 10px;
  background: var(--mds-kit-white);
  padding: 10px 18px;
  min-height: 0;
  color: var(--mds-kit-text-mid);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

button.mds-kits-btn-ghost:hover,
button.mds-kits-btn-ghost:focus-visible {
  border-color: var(--mds-kit-orange);
  background: var(--mds-kit-white);
  color: var(--mds-kit-orange);
}

.mds-kits-content {
  padding: 0 0 2rem;
}

@media (max-width: 980px) {
  .mds-kits-grid {
    grid-template-columns: 1fr;
  }

  .mds-kits-usp {
    grid-template-columns: repeat(2, 1fr);
  }

  .mds-kits-steps {
    grid-template-columns: 1fr;
  }

  .mds-kits-included__body {
    grid-template-columns: repeat(3, 1fr);
  }

  .mds-kits-help {
    flex-direction: column;
    align-items: flex-start;
  }

  .mds-kits-help__btns {
    margin-left: 0;
  }

  .mds-kits-hero {
    padding: 28px 24px;
  }

  .mds-kit-card__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .mds-kit-card__cta {
    margin-left: 0;
    text-align: center;
  }
}

/* --- Kit PDP: own content template (.mds-kit-pdp) — no Woodmart grid overrides --- */
body.single-product.mds-terrace-kit {
  --mds-kit-reserve: 1440px;
  --mds-kit-sticky-top: 24px;
}

@media (max-width: 980px) {
  body.single-product.mds-terrace-kit {
    --mds-kit-reserve: 1500px;
  }
}

.mds-kit-pdp__breadcrumbs {
  margin: 12px 0 18px;
}

/* Woodmart related carousel grows after init — modest reserve to avoid jump. */
/* Held to the same column as the configurator above it. WooDmart lays the kit PDP
   out edge to edge, and the related carousel inherited that while nothing else on
   the page did. */
.mds-kit-pdp .related-products,
body.single-product.mds-terrace-kit .related-products {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.mds-kit-pdp .related-products {
  min-height: 360px;
  margin-top: 36px;
}

@media (max-width: 980px) {
  .mds-kit-pdp .related-products {
    min-height: 300px;
  }
}

.mds-kit-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 28px;
  align-items: start;
  width: 100%;
}

.mds-kit-pdp__media,
.mds-kit-pdp__config {
  min-width: 0;
}

.mds-kit-pdp__config {
  width: 100%;
  max-width: 440px;
}

body.single-product.mds-terrace-kit #mds-kit-root {
  margin: 0;
  width: 100%;
  min-height: var(--mds-kit-reserve, 1440px);
}

/* Shorter column sticks while scrolling; sticky range = grid row height. */
@media (min-width: 981px) {
  body.single-product.mds-terrace-kit .wd-content-layout,
  body.single-product.mds-terrace-kit .wd-content-area,
  body.single-product.mds-terrace-kit .site-content,
  body.single-product.mds-terrace-kit .content-layout-wrapper {
    overflow: visible !important;
  }

  .mds-kit-pdp__media,
  .mds-kit-pdp__config {
    position: sticky;
    top: var(--mds-kit-sticky-top, 24px);
    align-self: start;
  }
}

body.single-product.mds-terrace-kit .wd-content-layout > .wd-content-area,
body.single-product.mds-terrace-kit .wd-content-layout > .site-content {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 980px) {
  .mds-kit-pdp__grid {
    grid-template-columns: 1fr;
  }

  .mds-kit-pdp__config {
    max-width: none;
  }

  .mds-kit-pdp__media,
  .mds-kit-pdp__config {
    position: static;
  }
}

/* Gallery — real images or placeholder */
.mds-kit-gallery {
  margin-bottom: 10px;
  width: 100%;
}

.mds-kit-gallery__main {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  position: relative;
  box-shadow: var(--mds-kit-shadow);
  line-height: 1.6;
  overflow: hidden;
  background: #1a1510;
}

.mds-kit-gallery__main--placeholder {
  padding: 24px;
  background: var(--mds-kit-light-bg, #f9f8f7);
}

.mds-kit-gallery__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}


.mds-kit-gallery__video {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.mds-kit-gallery__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.mds-kit-gallery__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
  pointer-events: none;
}

/* The markup marks the clone source `hidden`, but a class selector outranks the
   browser's own `[hidden] { display: none }`, so the template stayed on screen
   under its own copy — identical pixels, but two stacked shadows. */
.mds-kit-gallery__badges[hidden] {
  display: none;
}

/* Match source_files/html/komplektai/komplektas-produktas.html .thumbs / .thumb */
.mds-kit-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.mds-kit-gallery__thumb,
.mds-kit-gallery__thumb--video {
  position: relative;
  width: 100%;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  aspect-ratio: auto !important;
  border-radius: 8px !important;
  background: var(--mds-kit-light-bg, #f9f8f7);
  border: 2px solid var(--mds-kit-border, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  color: var(--mds-kit-text-muted, #999);
  text-align: center;
  padding: 4px !important;
  line-height: 1.3;
  overflow: hidden !important;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  box-sizing: border-box;
}

.mds-kit-gallery__thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  border-radius: 8px !important;
  display: block;
  padding: 0;
}

.mds-kit-gallery__thumb-label {
  position: relative;
  z-index: 1;
  padding: 4px;
  font-weight: 600;
}

.mds-kit-gallery__thumb--on {
  border-color: var(--mds-kit-orange, #e06132);
}

.mds-kit-gallery__thumb--video {
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(160deg, #f3ebe3 0%, #e4d4c4 100%);
  color: var(--mds-kit-brown, #312319);
}

.mds-kit-gallery__video-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.mds-kit-gallery__video-label {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}

.mds-kit-gallery__video-ring {
  transform-origin: center;
  animation: mds-kit-video-pulse 2.4s ease-in-out infinite;
}

.mds-kit-gallery__video-play {
  transform-origin: center;
  animation: mds-kit-video-play 2.4s ease-in-out infinite;
}

@keyframes mds-kit-video-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mds-kit-video-play {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.mds-kit-gallery__thumb--video:hover .mds-kit-gallery__video-ring,
.mds-kit-gallery__thumb--video:hover .mds-kit-gallery__video-play {
  animation-duration: 1.4s;
}

/* Accordion zones under gallery */
.mds-kit-zones {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mds-kit-zone {
  background: var(--mds-kit-white, #fff);
  border: 1px solid var(--mds-kit-border, #e5e5e5);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--mds-kit-shadow, 0 2px 12px rgba(49, 35, 25, 0.06));
}

.mds-kit-zone__header {
  width: 100%;
  background: linear-gradient(135deg, #faf7f5 0%, #f5f0eb 100%);
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.mds-kit-zone.is-open .mds-kit-zone__header {
  border-bottom-color: var(--mds-kit-border-soft, #f0ece8);
}

.mds-kit-zone__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mds-kit-brown, #312319);
}

.mds-kit-zone__area {
  color: var(--mds-kit-text-muted, #999);
  font-weight: 600;
  margin-left: 4px;
}

.mds-kit-zone__arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--mds-kit-text-muted, #999);
  transition: transform 0.2s;
}

.mds-kit-zone.is-open .mds-kit-zone__arrow {
  transform: rotate(180deg);
}

.mds-kit-zone__body {
  padding: 20px 22px;
  display: none;
}

.mds-kit-zone.is-open .mds-kit-zone__body {
  display: block;
}

.mds-kit-zone__body--desc {
  font-size: 13px;
  color: var(--mds-kit-text-mid, #555);
  line-height: 1.75;
}

.mds-kit-zone__body--desc p:first-child {
  margin-top: 0;
}

.mds-kit-zone__body--desc p:last-child {
  margin-bottom: 0;
}

.mds-kit-zone__body--desc b,
.mds-kit-zone__body--desc strong {
  color: var(--mds-kit-brown, #312319);
}

.mds-kit-zone__body--desc ul {
  margin: 10px 0 0 18px;
}

.mds-kit-zone__body--desc li {
  margin-bottom: 6px;
}

/* Hide leftover WC tabs if Woodmart re-adds them */
body.single-product.mds-terrace-kit .woocommerce-tabs,
body.single-product.mds-terrace-kit .wc-tabs-wrapper {
  display: none !important;
}

@media (max-width: 980px) {
  .mds-kit-gallery__main {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .mds-kit-gallery__thumbs {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .mds-kit-gallery__thumb,
  .mds-kit-gallery__thumb--video {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  .mds-kit-gallery__thumbs {
    gap: 6px;
  }

  .mds-kit-gallery__thumb,
  .mds-kit-gallery__thumb--video {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 8px !important;
  }

  .mds-kit-gallery__thumb--video .mds-kit-gallery__video-icon svg {
    width: 20px;
    height: 20px;
  }

  .mds-kit-gallery__video-label {
    font-size: 8px;
  }

  .mds-kit-gallery__badges {
    top: 10px;
    left: 10px;
    gap: 6px;
  }

  .mds-kit-gallery__badges .mds-kit-badge,
  .mds-kit-gallery__badges span {
    font-size: 9px;
  }
}

/* SSR / React loading skeleton — height matches --mds-kit-reserve */
.mds-kit-skel {
  background: var(--mds-kit-white);
  border: 1px solid var(--mds-kit-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--mds-kit-shadow);
  min-height: var(--mds-kit-reserve, 1440px);
  display: flex;
  flex-direction: column;
}

.mds-kit-skel__head {
  padding: 18px 22px 0;
  flex-shrink: 0;
}

.mds-kit-skel__name {
  font-size: 19px;
  font-weight: 800;
  color: var(--mds-kit-brown);
  line-height: 1.3;
}

.mds-kit-skel__sub {
  font-size: 12px;
  color: var(--mds-kit-text-light);
  margin-top: 4px;
}

.mds-kit-skel__rating {
  height: 18px;
  max-width: 140px;
  margin-top: 12px;
  border-radius: 6px;
  background: #f0ece8;
}

.mds-kit-skel__body {
  padding: 16px 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mds-kit-skel__step {
  margin-bottom: 18px;
}

.mds-kit-skel__line {
  height: 14px;
  border-radius: 6px;
  background: #f0ece8;
  margin: 0 0 10px;
  max-width: 55%;
}

.mds-kit-skel__block {
  height: 72px;
  border-radius: 10px;
  background: #f0ece8;
}

.mds-kit-skel__block--dims {
  height: 200px;
}

.mds-kit-skel__block--tall {
  height: 260px;
}

/* Quiet shimmer on the first two steps only — less visual noise while catalog loads */
.mds-kit-skel__step:nth-child(-n + 2) .mds-kit-skel__line,
.mds-kit-skel__step:nth-child(-n + 2) .mds-kit-skel__block {
  background: linear-gradient(90deg, #f0ece8 25%, #f8f5f2 50%, #f0ece8 75%);
  background-size: 200% 100%;
  animation: mds-kit-shimmer 1.6s ease-in-out infinite;
}

.mds-kit-skel__footer {
  background: linear-gradient(135deg, var(--mds-kit-brown) 0%, #3d2c20 100%);
  padding: 18px 22px;
  min-height: 180px;
  margin-top: auto;
  flex-shrink: 0;
}

@keyframes mds-kit-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (max-width: 980px) {
  .mds-kit-skel__block--dims {
    height: 220px;
  }

  .mds-kit-skel__block--tall {
    height: 240px;
  }
}

/*
 * Beat Woodmart button/input chrome inside the kit mount (theme + React).
 */
body.single-product.mds-terrace-kit #mds-kit-root button,
body.single-product.mds-terrace-kit #mds-kit-root input,
body.single-product.mds-terrace-kit #mds-kit-root a {
  font-family: inherit !important;
  text-transform: none;
  letter-spacing: normal;
  line-height: normal;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body.single-product.mds-terrace-kit #mds-kit-root [data-kit-hint],
body.single-product.mds-terrace-kit #mds-kit-root [data-kit-hint]:hover,
body.single-product.mds-terrace-kit #mds-kit-root [data-kit-hint]:focus,
body.single-product.mds-terrace-kit #mds-kit-root [data-kit-hint]:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

body.single-product.mds-terrace-kit #mds-kit-root input {
  background-color: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}

body.single-product.mds-terrace-kit #mds-kit-root input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  background-color: #fff !important;
}

body.page-template-terrace-kits .mds-kit-card__cta {
  border: none !important;
  border-radius: 10px !important;
  background-image: var(--mds-kit-gradient) !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

body.page-template-terrace-kits .mds-kit-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(224, 97, 50, 0.35);
}

/*
 * Entrance-side diagram (CSS modules hash class names).
 * Keep labels as absolute 32px circles even if Woodmart resets label layout.
 */
body.single-product.mds-terrace-kit #mds-kit-root [class*="diagramContainer"] {
  position: relative !important;
}

body.single-product.mds-terrace-kit #mds-kit-root [class*="edgeBtn"] {
  position: absolute !important;
  z-index: 1;
  transform: translate(-50%, -50%);
}

body.single-product.mds-terrace-kit #mds-kit-root [class*="edgeBtn"] label {
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  border: 2px solid #cfc7bf !important;
  color: #312319 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

body.single-product.mds-terrace-kit #mds-kit-root [class*="edgeBtn"] label::before,
body.single-product.mds-terrace-kit #mds-kit-root [class*="edgeBtn"] label::after {
  content: none !important;
  display: none !important;
}

body.single-product.mds-terrace-kit #mds-kit-root [class*="edgeBtn"] input:checked + label {
  background-color: #e06132 !important;
  border-color: #e06132 !important;
  color: #fff !important;
}

/* Nothing here styles a kit card's media in a product loop. WooCommerce and the
   theme own that box: the hover swap, the lazy loader and the placeholder are all
   theirs, and pinning the image absolute inside it left the lazy source in place
   and only the hover layer visible. A kit in a grid is a product like any other.

   The two rules below apply to our own markup — the landing card and the PDP
   gallery — where there is no theme to defer to. */
.mds-kit-card__media img.woocommerce-placeholder,
.mds-kit-gallery__main img.woocommerce-placeholder {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
}

/* Plain text, like every other price in the grid. It used to be a bordered pill
   because it held a struck-through price; holding a sentence it read as a
   second, disabled button sitting on top of the real one. */
.mds-kit-price-from {
  display: block;
  margin: 6px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mds-kit-brown, #312319);
  line-height: 1.35;
}

/* No button styling here. The catalog link carries mds-catalog-view-link, which
   already paints every catalog button in the shop. This block used to repeat it
   and, because it also matched .wd-add-btn, painted the wrapper as well: two
   stacked orange bars, 54px where every other card is 32px. */