/*
Theme Name:        Sereniva Child
Theme URI:         https://theme-crazy.com/wp/sereniva
Description:       Child theme for Sereniva Spa & Wellness. Add your custom CSS and PHP overrides here — parent theme updates will not overwrite your changes.
Author:            theme_crazy
Author URI:        https://themeforest.net/user/theme_crazy
Template:          sereniva
Version:           1.0.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       sereniva-child
Tags:              spa, wellness, woocommerce, elementor
*/

/*
 * Add your custom CSS below this line.
 * These rules load AFTER the parent theme stylesheet, so they override it.
 * -------------------------------------------------------------------------
 */

/* ================================================================
   WooCommerce — variable product (Gutschein)
   ----------------------------------------------------------------
   The parent theme only styles the *simple* add-to-cart form: it ships
   woocommerce/single-product/add-to-cart/simple.php but no variable.php,
   and has no rules for .variations or the gallery trigger. A variable
   product therefore fell through to WooCommerce's bare core markup —
   a browser-default <select>, the label welded to it by the
   <table class="variations"> layout, and the quantity box butting
   straight into the button.

   The zoom trigger is a separate case: WooCommerce *prepends* it with
   JS (single-product.js -> initPhotoswipe), so with no positioning it
   lands in normal flow ABOVE the image instead of on it.
   ================================================================ */

/* ---- Gallery: put the zoom trigger on the image, bottom right ---- */
.woocommerce div.product .woocommerce-product-gallery {
  position: relative;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}
.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute;
  right: 1.15rem;
  bottom: 1.15rem;
  top: auto;
  left: auto;
  z-index: 3;
  width: 2.9rem;
  height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFDF8;
  border: 1px solid #E5DFD3;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(31, 38, 32, 0.12);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hide the injected emoji (and the <img class="emoji"> WP may swap in
   for it) — we draw our own mark so it matches the palette. */
.woocommerce div.product .woocommerce-product-gallery__trigger > * {
  display: none !important;
}
.woocommerce div.product .woocommerce-product-gallery__trigger::after {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8A6E' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover {
  background: #7A8A6E;
  border-color: #7A8A6E;
  box-shadow: 0 4px 16px rgba(31, 38, 32, 0.18);
}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF8' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
}
.woocommerce div.product .woocommerce-product-gallery__trigger:focus-visible {
  outline: 2px solid #7A8A6E;
  outline-offset: 3px;
}

/* ---- Variation picker: break the table so the label sits above ---- */
.woocommerce div.product form.cart.variations_form {
  margin-top: 1.75rem;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: none;
}
.woocommerce div.product form.cart .variations {
  margin: 0 0 1.5rem;
}
.woocommerce div.product form.cart .variations tr + tr {
  margin-top: 1.35rem;
}
.woocommerce div.product form.cart .variations th.label label {
  display: block;
  margin: 0 0 0.6rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1F2620;
}
.woocommerce div.product form.cart .variations td.value select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 340px;
  border: 1px solid #E5DFD3;
  border-radius: 0;
  background-color: #FFFDF8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A8A6E' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px 7px;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #1F2620;
  cursor: pointer;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.woocommerce div.product form.cart .variations td.value select:hover {
  border-color: #C9C0AE;
}
.woocommerce div.product form.cart .variations td.value select:focus {
  border-color: #7A8A6E;
  outline: none;
  box-shadow: none;
}

/* "Auswahl zurücksetzen" — WooCommerce toggles this with an inline
   visibility style, which would otherwise reserve empty space. */
.woocommerce div.product form.cart a.reset_variations {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A8A80;
  text-decoration: none;
  border-bottom: 1px solid #E5DFD3;
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.woocommerce div.product form.cart a.reset_variations:hover {
  color: #B89460;
  border-bottom-color: #B89460;
}
.woocommerce div.product form.cart a.reset_variations[style*="hidden"] {
  display: none;
}

/* ---- Selected-variation price + availability ---- */
.woocommerce div.product .single_variation_wrap .woocommerce-variation {
  margin: 0;
}
.woocommerce div.product .woocommerce-variation-price:not(:empty) {
  margin-bottom: 1.25rem;
  padding-top: 0.25rem;
}
.woocommerce div.product .woocommerce-variation-price .price {
  display: block;
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.75rem;
  color: #7A8A6E;
}
.woocommerce div.product .woocommerce-variation-description p:last-child {
  margin-bottom: 1rem;
}

/* ---- Quantity + button: stop them touching ---- */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.9rem;
  margin-top: 0.25rem;
}
.woocommerce div.product form.cart .quantity {
  margin: 0;
  float: none;
}
.woocommerce div.product form.cart .quantity .qty {
  width: 88px;
  height: 100%;
  border: 1px solid #E5DFD3;
  border-radius: 0;
  background: #FFFDF8;
  padding: 0.95rem 0.5rem;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  color: #1F2620;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.woocommerce div.product form.cart .quantity .qty:focus {
  border-color: #7A8A6E;
  outline: none;
  box-shadow: none;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  margin: 0;
  justify-content: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled:hover {
  background: #7A8A6E;
  border-color: #7A8A6E;
}

/* ---- Product meta below the form ---- */
.woocommerce div.product .product_meta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #E5DFD3;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  color: #5A5A52;
}
.woocommerce div.product .product_meta > span {
  display: block;
  margin-bottom: 0.4rem;
}
.woocommerce div.product .product_meta a {
  color: #7A8A6E;
  text-decoration: none;
}
.woocommerce div.product .product_meta a:hover {
  color: #B89460;
}

@media (max-width: 575.98px) {
  .woocommerce div.product form.cart .variations td.value select {
    max-width: 100%;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
  }
  .woocommerce div.product .woocommerce-product-gallery__trigger {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ---- Label and dropdown on one row -----------------------------------
   Revision 2026-09-05: "Wert" now sits beside the select rather than above
   it. The reset link rides along on the same line on purpose — if it sat
   below the select it would grow the row the moment a value is picked,
   nudging the label down. Appended last so these win over the stacked
   rules above without needing !important.
   --------------------------------------------------------------------- */
.woocommerce div.product form.cart .variations tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
}
.woocommerce div.product form.cart .variations th.label {
  flex: 0 0 auto;
  width: auto;
}
.woocommerce div.product form.cart .variations th.label label {
  margin: 0;
}
.woocommerce div.product form.cart .variations td.value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
  flex: 1 1 240px;
  width: auto;
  min-width: 0;
}
.woocommerce div.product form.cart a.reset_variations {
  margin-top: 0;
}

/* ---- "Zusätzliche Informationen" attributes table ---------------------
   The theme dequeues WooCommerce's own stylesheets wholesale
   (inc/woocommerce.php: woocommerce_enqueue_styles -> __return_empty_array),
   so anything it didn't hand-write CSS for renders raw. It covers
   table.shop_table (cart/checkout) but not table.shop_attributes, which is
   why the product attributes arrived as bare label/value text.

   Styled to match the shop_table language already in the parent theme:
   #E5DFD3 rules, #F4ECE0 label column, uppercase Inter labels.
   --------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-attributes {
  width: 100%;
  margin: 0;
  border: 1px solid #E5DFD3;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.woocommerce div.product .woocommerce-product-attributes th {
  width: 34%;
  padding: 1rem 1.25rem;
  background: #F4ECE0;
  border-bottom: 1px solid #E5DFD3;
  border-right: 1px solid #E5DFD3;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1F2620;
  text-align: left;
  vertical-align: top;
}
.woocommerce div.product .woocommerce-product-attributes td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E5DFD3;
  color: #5A5A52;
  vertical-align: top;
}
.woocommerce div.product .woocommerce-product-attributes tr:last-child th,
.woocommerce div.product .woocommerce-product-attributes tr:last-child td {
  border-bottom: 0;
}
.woocommerce div.product .woocommerce-product-attributes td p {
  margin: 0;
}

/* The tab is already labelled "Zusätzliche Informationen" / "Beschreibung";
   WooCommerce repeats it as an <h2> inside the panel. The panel carries
   aria-labelledby pointing at the tab, so dropping the heading costs
   nothing for screen readers. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  display: none;
}

@media (max-width: 575.98px) {
  .woocommerce div.product .woocommerce-product-attributes tr,
  .woocommerce div.product .woocommerce-product-attributes th,
  .woocommerce div.product .woocommerce-product-attributes td {
    display: block;
    width: auto;
  }
  .woocommerce div.product .woocommerce-product-attributes th {
    border-right: 0;
    border-bottom: 0;
  }
}

/* ---- Preise list: keep "60 €" on one line ----------------------------
   .price-item is a Bootstrap d-flex row; the price sits in a plain
   <div class="text-end"> which, as a default flex item (flex: 0 1 auto),
   is allowed to shrink. Once the title/description column got long enough
   the price box narrowed past the width of "60 €" and broke at the space
   before the euro sign. Two guards: the box no longer shrinks, and the
   amount itself refuses to wrap.
   --------------------------------------------------------------------- */
.price-item {
  gap: 1.25rem;
}
.price-item > .text-end {
  flex: 0 0 auto;
}
.price-item .price-amount {
  white-space: nowrap;
}

/* ---- Preise list: even rows, no holes -------------------------------
   The list is a Bootstrap `row g-4` of `col-md-6`, so items are laid out in
   PAIRS and every pair is as tall as its taller half. 9 of the 13 items have
   a description and 4 do not, so a one-line item sitting beside a four-line
   one left its bottom border floating with a hole underneath it.

   Not switched to CSS multi-column / masonry on purpose: the pairing is
   meaningful (Wimpernverlängerung Erste/Nachbehandlung, Microblading
   Erste/Nachbehandlung, the two Fußpflege rows sit side by side) and column
   flow would reorder them down each column instead.

   Filling the cell instead means both borders in a pair line up, and because
   .price-item already carries Bootstrap's align-items-center the content
   centres in the taller cell - the leftover space reads as padding rather
   than as a gap.
   -------------------------------------------------------------------- */
.price-item {
  height: 100%;
}

/* ---- Header logo: size by width, not height -------------------------
   Parent sets `.site-logo img { height: 44px; width: auto }`, which suits
   the demo's compact lotus mark. Our wordmark is a 6:1 script signature,
   so 44px tall made it ~270px wide and it dominated the header. Driving
   it from the width instead pins it at 150px and lets the height fall out
   at ~26px.

   The header sits over the dark hero at the top of the front page
   (`.header-on-dark:not(.is-sticky)`), where the theme already flips the
   nav text to cream. The logo is an image, so it needs the equivalent —
   `brightness(0) invert(1)` knocks the olive out to white rather than
   shipping a second cream PNG and swapping src in PHP.
   --------------------------------------------------------------------- */
.site-logo {
  /* The header row is a flex container; with six nav items the logo link
     was allowed to shrink, and the theme's global img{max-width:100%} then
     scaled the wordmark down to ~110px between 1200 and 1350. */
  flex: 0 0 auto;
}

.site-logo img {
  width: 215px;
  max-width: none;
  height: auto;
}

.site-header.header-on-dark:not(.is-sticky) .site-logo img {
  filter: brightness(0) invert(1);
}

@media (max-width: 575.98px) {
  .site-logo img {
    width: 150px;
  }
}

/* ---- Footer logo: gold wordmark, sized by width ---------------------
   Same story as the header. Parent sets `.footer-logo img { height: 50px }`,
   which on a 6:1 wordmark comes out ~305px wide. Pinned to 350px instead
   (height lands at ~62px) — the footer's first column is wider than the header
   slot, so the wordmark can carry more weight here. Source PNG is 800px wide so
   350 CSS px still has ~2.3x for retina.

   The footer ground is #1F2620, so this one stays GOLD rather than olive —
   the olive header mark would sink into the dark, and gold picks up the
   CTA button and the price colour used elsewhere. No invert filter here.
   --------------------------------------------------------------------- */
.site-footer .footer-about .footer-logo img {
  width: 350px;
  height: auto;
}

@media (max-width: 575.98px) {
  .site-footer .footer-about .footer-logo img {
    width: 240px;
  }
}

/* ---- Mobile: page wider than the phone (white gap right + bottom) ----
   On phones the hero rendered narrower than the screen with a white band
   to the right and below, and Chrome had zoomed the whole page out to fit.
   Measured with a 375px viewport: innerWidth 475, scrollWidth 475 — the
   layout viewport was exactly 100px wider than the device.

   Root cause: the about-intro text column carries data-aos="fade-left", and
   AOS parks it at translate3d(100px,0,0) until it scrolls into view. The
   parent theme relies on `body { overflow-x: hidden }` to contain that, which
   is enough on desktop but NOT on mobile Chrome/Safari: with `html` left at
   overflow visible, the paint is hidden yet the layout viewport still grows
   to include the translated box, and the browser zooms out to fit it. That
   is also why the gap shrank after scrolling — once the section animated in
   the transform went to 0 and only a 7px overflow remained (see below).

   Clipping on the root element is what actually stops the viewport growing.
   `clip` rather than `hidden` so html does not become a scroll container
   (which would break position: sticky and scroll-to-anchor). Browsers
   without `overflow: clip` (pre-2021) ignore the line and keep the current
   behaviour.
   --------------------------------------------------------------------- */
html {
  overflow-x: clip;
}

/* ---- Stats tiles: "Behandlungsarten" wider than its tile ---------------
   The remaining 7px of the overflow above. .stat-label is 0.75rem uppercase
   with 0.25em tracking; "BEHANDLUNGSARTEN" is one unbreakable word and came
   out 179px wide in a col-6 cell that is 158px inside its padding at 375px,
   so it ran out of its tile and past the screen edge.

   Fixed in the CONTENT, not here: the label in the stats widget on page 100
   now reads "Behandlungs" + U+00AD + "arten" (soft hyphen). Invisible while the word
   fits, and when it does not the browser breaks it as BEHANDLUNGS-ARTEN —
   the correct German split — without depending on the site language.
   Tried and rejected: tighter tracking + overflow-wrap:anywhere, which broke
   it as BEHANDLUNGSART/EN; and hyphens:auto, which is language-aware and
   inert while the site still declares lang="en-US".
   --------------------------------------------------------------------- */

/* ---- Service cards are not links any more --------------------------
   The grid is rendered by KB_Services_Widget (child inc/) without the
   <a> wrapper, because the treatments have no pages of their own. Drop the
   two affordances that still said "click me": the hover zoom on the photo
   and the pointer cursor.
   --------------------------------------------------------------------- */
.service-photo-card {
  cursor: default;
}
.service-photo-card:hover .service-img {
  transform: none;
}

/* ---- Gutschein boxes: picture on top --------------------------------
   Rendered by KB_Pricing_Widget (child inc/). The parent .price-card has
   2.5rem 2rem padding, so the image pulls itself out to the inner edge of
   the border with negative side margins and the card drops its top padding.
   3:2 keeps the boxes from getting tall; the gift-card photo is square with
   the card in the middle, so a centred 3:2 crop keeps the card in frame.
   The "Beliebt" badge is absolute top-right and simply sits over the image.
   --------------------------------------------------------------------- */
.price-card.has-img {
  padding-top: 0;
}
.price-card .price-card-img {
  aspect-ratio: 3 / 2;
  margin: 0 -2rem 2rem;
  background-size: cover;
  background-position: center;
}

/* ---- Phone numbers are tel: links ------------------------------------
   Topbar, mobile menu and footer already style their <a> (cream, gold on
   hover). The CTA banner text had no links before, so give its numbers the
   same behaviour instead of the theme's default green link colour.
   --------------------------------------------------------------------- */
.cta-banner .lead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 253, 248, 0.5);
}
.cta-banner .lead a:hover {
  color: #D4B587;
  text-decoration-color: currentColor;
}

/* ---- Galerie sections (KB_Gallery_Section_Widget) --------------------
   The parent's .gallery-item expects a .gallery-img background div. This
   widget emits a real <img> instead, so it can be lazy-loaded and carry alt
   text (61 customer photos on one page - background images would all load
   eagerly and say nothing to a screen reader). Everything else - the 4:5
   box, the hover zoom, the "+" overlay - still comes from the parent.

   The img carries its OWN aspect-ratio rather than height:100%. The parent's
   height comes from aspect-ratio, and a percentage height does not resolve
   against that (it falls back to auto), so height:100% left every photo at
   its native ratio - portrait nails 3:4 next to square PMU 1:1, ragged rows.
   Sizing the img from width:100% + aspect-ratio depends on nothing but its
   own box, and object-fit does the cropping. The source photos really are
   mixed (1200x1600, 1536x1536, 1200x800), so cropping is unavoidable; this
   at least makes it uniform.
   --------------------------------------------------------------------- */
.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item:hover img {
  transform: scale(1.08);
}

.kb-gallery-intro {
  max-width: 620px;
  margin: 1.25rem auto 0;
  color: #5A5A52;
}

/* Slider: arrows sit outside the track on wide screens and tuck back in
   when there is no room, so they never overlap the photos on a phone. */
.kb-gallery {
  position: relative;
}
.kb-gallery .swiper {
  overflow: hidden;
}
.kb-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid #E5DFD3;
  background: #FFFDF8;
  color: #1F2620;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kb-gal-nav:hover {
  background: #B89460;
  border-color: #B89460;
  color: #FFFDF8;
}
.kb-gal-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.kb-gal-prev {
  left: -22px;
}
.kb-gal-next {
  right: -22px;
}
@media (max-width: 1399.98px) {
  .kb-gal-prev {
    left: 8px;
  }
  .kb-gal-next {
    right: 8px;
  }
}

.kb-gal-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.kb-gal-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C9C3B6;
  opacity: 1;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kb-gal-pagination .swiper-pagination-bullet-active {
  background: #B89460;
  width: 22px;
  border-radius: 4px;
}

/* Sage sections invert the header text (parent .bg-sage only sets body colour) */
.kb-gallery-section.bg-sage .section-title,
.kb-gallery-section.bg-sage .kb-gallery-intro {
  color: #FFFDF8;
}
.kb-gallery-section.bg-sage .section-tag {
  color: #F4ECE0;
}
.kb-gallery-section.bg-sage .kb-gal-nav {
  background: transparent;
  border-color: rgba(255, 253, 248, 0.5);
  color: #FFFDF8;
}
.kb-gallery-section.bg-sage .kb-gal-nav:hover {
  background: #FFFDF8;
  border-color: #FFFDF8;
  color: #1F2620;
}

/* ---- Primary nav: six items instead of five -------------------------
   Adding Galerie pushed the row past its comfortable width and the flex
   items started shrinking. "Über mich" was the first to give: it broke
   across two lines and made the whole header 108px tall. Nav labels should
   never wrap, so pin them to one line and take the extra room out of the
   gap (2.25rem -> 1.6rem) below 1500px instead.
   --------------------------------------------------------------------- */
.nav-list > li > a {
  white-space: nowrap;
}
.nav-list > li {
  flex: 0 0 auto;
}

@media (max-width: 1499.98px) {
  .nav-list {
    gap: 1.6rem;
  }
  .main-nav {
    gap: 1.4rem;
  }
}

/* 215px is comfortable from ~1400px up. Below that the wordmark's tail ran
   into "Behandlungen" and the CTA broke onto two lines (header 90 -> 95px),
   so step it down for the last stretch before the burger takes over at 1200. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-logo img {
    width: 165px;
  }
  .header-actions .btn-book {
    margin-left: 0.75rem;
    white-space: nowrap;
  }
}

/* ---- Collapse to the burger at 1200, not 992 ------------------------
   With six items the header row needs ~1120px; the parent only swaps in
   the burger below 992, so 992-1199 overflowed by ~90px. Same rules as the
   parent's own breakpoint, just raised. The three icon buttons and the CTA
   use Bootstrap's d-lg-* (>= 992), so they need holding back to 1200 too,
   otherwise they would sit next to a burger with no nav.
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .nav-list,
  .header-actions .btn-book,
  .header-actions .icon-btn.d-lg-inline-flex,
  .header-actions .account-dropdown-wrap.d-lg-flex {
    display: none !important;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  header:not(.is-sticky) .menu-toggle span {
    background: #fff;
  }
}

/* ---- Header icons: tighter cluster, more room for the wordmark -------
   Parent spaces everything in .header-actions with a single gap:1.25rem, so
   the three icon buttons sat as far apart as they did from the CTA. Each
   .icon-btn is a 42px hit area around an ~18px glyph, so there is already
   24px of built-in air between glyphs; the extra 20px gap made the cluster
   ~166px wide. Pull the icons together and give the CTA its own margin
   instead - the hit areas stay 42px, only the visual grouping changes.
   Desktop only: below 1200 the search/account icons and the CTA are hidden,
   and .header-actions holds just the cart and the burger.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .header-actions {
    gap: 0.25rem;
  }
  .header-actions .btn-book {
    margin-left: 1.25rem;
  }
}

/* ---- Kontakt: consent line and map link -----------------------------
   CF7 renders [acceptance] as a checkbox inside a <span class="wpcf7-list-item">
   with a browser-default margin-left, which pushed the box off the grid.
   --------------------------------------------------------------------- */
.kb-consent {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
.kb-consent .wpcf7-list-item {
  margin-left: 0;
}
.kb-consent input[type="checkbox"] {
  margin-right: 0.5rem;
}
.kb-consent a {
  text-decoration: underline;
}

.kb-map-link {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

/* ---- Kontakt: static map + CF7 submit -------------------------------
   CF7 renders the submit as <input type="submit" class="btn btn-primary">.
   The theme styles .btn-primary for links, but Bootstrap's own .btn-primary
   wins on an <input>, so the button came out Bootstrap blue in the middle of
   an olive-and-gold page. Restated here for the CF7 input specifically.
   --------------------------------------------------------------------- */
.kb-map {
  margin: 0;
}
.kb-map img {
  width: 100%;
  height: auto;
  display: block;
}

.wpcf7 input[type="submit"] {
  background: #7A8A6E;
  border: 1px solid #7A8A6E;
  color: #FFFDF8;
  border-radius: 0;
  padding: 0.9rem 2.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
  background: #B89460;
  border-color: #B89460;
  color: #FFFDF8;
}
.wpcf7 input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- CTA banner: drop the parallax ----------------------------------
   Parent sets `background-attachment: fixed` on .cta-banner. With `fixed`
   the background is sized against the VIEWPORT, not the element, so
   `cover` scaled our 1920x410 banner up to viewport height (1080+) and
   showed a small magnified crop of it. Scrolling attachment maps the image
   onto the ~410px band it was cut for. `fixed` is also ignored on iOS and
   forces a repaint on every scroll frame, so nothing of value is lost.
   --------------------------------------------------------------------- */
.cta-banner {
  background-attachment: scroll;
}

/* ---- Kontakt: interactive map ---------------------------------------
   Before the click this is just the static preview image; the button sits
   over it. After the click .is-loaded reveals the Leaflet canvas, which is
   absolutely positioned over the preview so the block never changes height.
   --------------------------------------------------------------------- */
.kb-map-embed {
  position: relative;
  overflow: hidden;
  background: #EFEBE3;
  aspect-ratio: 3 / 2;
}
.kb-map-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kb-map-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem;
  border: 0;
  cursor: pointer;
  text-align: center;
  background: rgba(31, 38, 32, 0.42);
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kb-map-load:hover,
.kb-map-load:focus-visible {
  background: rgba(31, 38, 32, 0.55);
}
.kb-map-load-btn {
  background: #B89460;
  color: #FFFDF8;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.8rem 1.5rem;
}
.kb-map-load-note {
  color: #FFFDF8;
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 26ch;
  text-shadow: 0 1px 3px rgba(31, 38, 32, 0.6);
}
.kb-map-load.is-loading .kb-map-load-btn {
  opacity: 0.6;
}
.kb-map-embed.is-loaded .kb-map-preview,
.kb-map-embed.is-loaded .kb-map-load {
  display: none;
}
.kb-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Leaflet paints its own controls; align them with the site */
.kb-map-canvas .leaflet-control-zoom a {
  color: #1F2620;
  border-radius: 0;
}
.kb-map-canvas .leaflet-bar {
  border-radius: 0;
  border-color: #E5DFD3;
}
.kb-map-canvas .leaflet-container {
  font-family: inherit;
}
.kb-pin {
  background: none;
  border: 0;
  filter: drop-shadow(0 4px 6px rgba(31, 38, 32, 0.35));
}

/* ---- Icon cards: equal height ---------------------------------------
   Parent sets `.service-card { height: auto }`, so each card shrank to its
   own text while the Bootstrap column around it still stretched — on
   "Was mein Studio besonders macht" that left boxes of three different
   heights side by side. Filling the column makes every card in a row match;
   the card is already centred, so the spare space reads as padding.
   --------------------------------------------------------------------- */
.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-card p:last-child {
  margin-bottom: 0;
}

/* Equal across ROWS too, not just within one. A Bootstrap row only
   stretches the columns that share a line, so with two lines of three the
   second line could come out shorter. When the cards sit side by side, turn
   their row into a grid with `grid-auto-rows: 1fr`, which sizes every row to
   the tallest card on the page. Column count follows the widget's own
   setting (col-lg-6 / -4 / -3 = 2 / 3 / 4 across). Below 768px the cards
   stack one per line, where equal heights mean nothing, so it stays flex. */
@media (min-width: 768px) {
  .row:has(> [class*="col-"] > .service-card) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.5rem;
    margin: 0;
  }
  .row:has(> [class*="col-"] > .service-card) > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }
}
@media (min-width: 992px) {
  .row:has(> .col-lg-4 > .service-card) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .row:has(> .col-lg-3 > .service-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Product page banner: the category tag that sits above the title.
   The theme only recolours the title and the breadcrumb for image headers, so
   the tag's link kept the normal dark-olive link colour (#5C6B52) and vanished
   into the dark overlay. Only applies where there is an image behind it. */
.page-header.has-image .section-tag,
.page-header.has-image .section-tag a {
  color: #E8D9BF;
}
.page-header.has-image .section-tag a:hover,
.page-header.has-image .section-tag a:focus {
  color: #FFFDF8;
}
.page-header.has-image .section-tag::before,
.page-header.has-image .section-tag::after {
  background: rgba(232, 217, 191, 0.75);
}