@charset "UTF-8";
/* ===========================================================================
   AFRO CROWN BEAUTY — booking UI skin
   Re-dresses "Bookings for WooCommerce" (+ Pro) in the ACB design system.

   TOKENS: every value below is a var() read from assets/css/acb.css :root.
   Nothing is hardcoded, so a future re-skin that re-points --gold/--paper/
   --font carries this file with it. The two colours this file CANNOT reach
   from CSS (the available/unavailable day fills) are set as PLUGIN OPTIONS
   instead — see the ledger — because the plugin prints them into an inline
   <style> with !important.

   LOAD ORDER: enqueued from functions.php as `acb-booking`, depending on the
   last registered vendor + theme handles, so it lands AFTER every booking
   stylesheet. Equal-specificity overrides therefore win on source order and
   need no !important.

   !important IS USED IN EXACTLY FOUR PLACES, all of them forced by the
   vendor's own !important or by an inline style attribute. Each is labelled.

   ACB design language, read off acb.css, not invented:
     - border-radius: 0 everywhere (acb.css declares radius exactly once, as 0)
     - no box-shadows at all — separation is done with hairlines
     - fields: transparent, bottom hairline only, focus turns the rule --clay
     - buttons: 1px border, uppercase, .2em tracking, .72rem, weight 500
     - labels: --fs-label, uppercase, --tr-label tracking
   =========================================================================== */

/* ---------------------------------------------------------------- 1. shell */
.mwb-mbfw-cart-page-data {
  display: block;
  margin: 1.5rem 0 1.25rem;
  font-family: var(--font);
  font-size: var(--fs-small);
  color: var(--ink);
}

/* The legend is two bare <span>s and two swatch <div>s with a <br> between —
   no wrapper exists to grid, so they are re-typed in place. */
.mwb-mbfw-cart-page-data > br { display: none; }

.mwb-mbfw-cart-page-data > span {
  /* !important #1 of 4 — the vendor prints style="color:black" on these spans
     (class-bookings-for-woocommerce-pro-public.php), so nothing but
     !important can re-colour them. */
  color: var(--ink-3) !important;
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 .35rem .5rem 0;
  vertical-align: middle;
}
.mwb-mbfw-cart-page-data > span + div { margin-bottom: .5rem; }

/* Swatches: squared off and shrunk to a legend chip. The FILL is not set here
   on purpose — it comes from the plugin's own colour options, which we pointed
   at --jade / --indigo, so the swatch and the day cells can never drift apart. */
.wps_bfwp_availability_color,
.wps_bfwp_unavailability_color {
  width: 11px;
  height: 11px;
  border-radius: 0;
  vertical-align: middle;
  display: inline-block;
}
.wps_bfwp_availability_color   { margin: 0 1.25rem 0 .15rem; }
.wps_bfwp_unavailability_color { margin: 0 0 0 .15rem; }

/* ------------------------------------------------------- 2. the date field */
.mbfw-date-picker-section__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: .25rem 0 1.25rem;
}
.mbfw-date-picker-section {
  display: grid;
  gap: .5rem;
  flex: 1 1 15rem;
  min-width: 0;
  max-width: 22rem;
}
.mbfw-date-picker-section label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
/* (0,2,1) — beats the vendor's .mbfw-date-picker-section input at (0,1,1). */
.mbfw-date-picker-section input[type="text"],
.mwb-mbfw-cart-page-data .mbfw-date-picker-section input {
  width: 100%;
  max-width: none;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: .6rem 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: var(--tr-tight);
  cursor: pointer;
  transition: border-bottom-color .25s var(--ease);
}
.mwb-mbfw-cart-page-data .mbfw-date-picker-section input::placeholder {
  color: var(--ink-3);
  opacity: .55;
  text-transform: none;
  letter-spacing: var(--tr-tight);
}
.mwb-mbfw-cart-page-data .mbfw-date-picker-section input:focus {
  outline: 0;
  border-bottom-color: var(--clay);
}
/* Focus ring: --gold on --paper is only 2.1:1, below the 3:1 WCAG 2.2 floor
   for a focus indicator, so booking controls use --gold-dk (3.56:1). This is a
   deliberate, scoped strengthening of the theme's global ring. */
.mwb-mbfw-cart-page-data :focus-visible,
.flatpickr-calendar :focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 2px;
}

/* quantity / persons readout */
.mwb-bfwp-booking-quantity__public-show {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: .25rem 0 1rem;
}
.mwb-bfwp-booking-quantity__public-show span {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Any select the plugin renders inside the booking form (persons, resource,
   duration) picks up the ACB field language rather than browser chrome. */
.mwb-mbfw-cart-page-data select,
.mwb-mbfw-cart-page-data input[type="number"] {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: .6rem 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
}
.mwb-mbfw-cart-page-data select:focus,
.mwb-mbfw-cart-page-data input[type="number"]:focus {
  outline: 0;
  border-bottom-color: var(--clay);
}

/* --------------------------------------------------- 3. the calendar popup */
.flatpickr-calendar {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;               /* ACB has no shadow language at all */
  font-family: var(--font);
  color: var(--ink);
  padding: .25rem .25rem .5rem;
  width: auto;
  max-width: min(22rem, calc(100vw - 2rem));
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowBottom::before { border-bottom-color: var(--ink); border-top-color: var(--ink); }
.flatpickr-calendar.arrowTop::after     { border-bottom-color: var(--paper); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--paper); }

.flatpickr-months { padding-top: .25rem; }
.flatpickr-months .flatpickr-month,
.flatpickr-month { background: transparent; color: var(--ink); height: auto; }

/* The month control is a <select> that the PARENT THEME's select2 enhances,
   which left it overlapping the year. Give the header real box model and let
   the widget size itself instead of fighting it. */
.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  position: static;
  width: auto;
  height: auto;
  padding: .35rem 0 .5rem;
  left: auto;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .select2-container { font-family: var(--font-display); }
.flatpickr-current-month .select2-container { width: auto !important; min-width: 8.5rem; }
/* ^ !important #2 of 4 — select2 writes an inline width:Npx on its own
   container at init; without this the month label is clipped in German,
   where "September"/"November"/"Dezember" are longer than the measured
   English width. */
.flatpickr-current-month .numInputWrapper { width: 4.25ch; }
.flatpickr-current-month input.cur-year {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  color: var(--ink);
}

.flatpickr-prev-month, .flatpickr-next-month {
  fill: var(--ink);
  padding: .4rem .5rem;
  border-radius: 0;
  transition: background .2s var(--ease);
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: var(--paper-2); }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--ink); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--ink); width: 12px; }

.flatpickr-weekdays { background: transparent; border-top: 1px solid var(--hair-ink); padding-top: .4rem; }
.flatpickr-weekdaycontainer { width: 100%; }
span.flatpickr-weekday {
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;   /* --tr-label (.26em) is too wide for a 7-col grid */
  text-transform: uppercase;
}

/* ------------------------------------------------------------ 4. day cells */
.flatpickr-days { border: 0; }
.dayContainer { padding: 0; }
.flatpickr-day {
  border-radius: 0;
  border: 1px solid transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 400;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--paper-2);
  border-color: var(--hair-ink);
  border-radius: 0;
  color: var(--ink);
}
.flatpickr-day.today { border-color: var(--gold-dk); border-radius: 0; }
.flatpickr-day.today:hover { background: var(--paper-2); }

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.disabled-date {
  background: transparent;
  border-color: transparent;
  color: rgba(26, 18, 13, .34);   /* --ink at 34%; disabled controls are WCAG-exempt but stay legible */
  cursor: default;
  border-radius: 0;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { opacity: .85; }

/* Available / unavailable fills arrive from the plugin's inline <style>, which
   is !important and option-driven. We only correct the GEOMETRY here, so the
   two systems cannot disagree about colour. */
.flatpickr-day.wps-available-day,
.flatpickr-day.wps-unavailable-day { border-radius: 0; border-color: transparent; }
.flatpickr-day.wps-available-day:hover { border-color: var(--ink); }

/* !important #3 of 4 — the vendor ships
   `.flatpickr-day.selected{background-color:#22c4ff!important;color:#fff!important}`
   and the same for `.custom-selected`, so only !important can win. Specificity
   (0,2,0) also beats the option-driven `.wps-available-day` (0,1,0), which is
   why a selected day stops being jade. */
.flatpickr-day.selected,
.flatpickr-day.custom-selected,
.flatpickr-day.selected:hover,
.flatpickr-day.custom-selected:hover {
  background: var(--gold) !important;
  background-color: var(--gold) !important;
  color: var(--ink) !important;   /* 7.87:1 */
  border-radius: 0 !important;
  border-color: var(--gold-dk) !important;
  font-weight: 600;
}

/* ------------------------------------------------------- 5. the time slots */
.wps_cal_timeslot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  padding: .75rem .35rem .25rem;
  border-top: 1px solid var(--hair-ink);
  margin-top: .5rem;
}
/* (0,1,2) ties the vendor's `div.wps_cal_timeslot span` and wins on order. */
div.wps_cal_timeslot > span {
  display: block;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.wps_cal_timeslot button {
  display: block;
  width: 100%;
  margin: 0;
  padding: .55rem .3rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hair-ink);
  border-radius: 0;
  font-family: var(--font);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.wps_cal_timeslot button:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.wps_cal_timeslot button:disabled,
.wps_cal_timeslot button[disabled] {
  background: var(--paper-2);
  color: rgba(26, 18, 13, .34);
  border-color: var(--paper-3);
  cursor: not-allowed;
  text-decoration: line-through;
}
.wps_cal_timeslot button:disabled:hover { background: var(--paper-2); color: rgba(26, 18, 13, .34); }

/* !important #4 of 4 — vendor ships
   `button.wps_timeslot_button{background-color:#45c0e4!important;color:#fff!important}`. */
button.wps_timeslot_button,
button.wps_timeslot_button:hover {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  color: var(--gold) !important;   /* 7.87:1 */
  border-color: var(--ink) !important;
  font-weight: 600;
}

/* ------------------------------------------------------- 6. the Book button */
form.cart button.single_add_to_cart_button,
form.cart button.single_add_to_cart_button.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem 1.6rem;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: .72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .2em;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* Hover inverts to --btn-ink (ink ground, gold type, 7.87:1) rather than the
   kit's transparent/gold hover, which would be 2.1:1 on --paper. */
form.cart button.single_add_to_cart_button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}
form.cart button.single_add_to_cart_button:disabled,
form.cart button.single_add_to_cart_button[disabled] {
  background: var(--paper-2);
  color: var(--ink-3);
  border-color: var(--paper-3);
  cursor: not-allowed;
  opacity: 1;                      /* Woo dims to .5; the hairline says it better */
}
form.cart button.single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 3px;
}
/* The booking form supplies its own quantity; Woo's numeric box is hidden by
   the plugin (type=hidden) but its wrapper still reserves space. */
form.cart .mwb-mbfw-cart-page-data + .quantity { display: inline; }

/* --------------------------- 7. cart / checkout / order "Booking Dates" line */
.wc-block-components-product-details__booking-dates,
.wc-block-components-product-details li,
.wc-item-meta li,
.variation {
  font-family: var(--font);
  font-size: var(--fs-small);
}
.wc-block-components-product-details__name,
.wc-item-meta-label,
.variation dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.wc-block-components-product-details__value,
.wc-item-meta li p,
.variation dd p,
.variation dd {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0;
}

/* -------------------------------------------- 8. notices the plugin can emit */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
  border-radius: 0;
  border-top: 2px solid var(--gold);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-small);
}
.woocommerce-notices-wrapper .woocommerce-error { border-top-color: var(--clay); }

/* -------------------------------------------------------- 9. narrow screens */
/* Breakpoints mirror acb.css: 999 / 782 / 480. The 783–999 band is swept
   explicitly because the header CTA defect once hid exactly there. */
@media (max-width: 999px) {
  .mbfw-date-picker-section { max-width: 20rem; }
}
@media (max-width: 782px) {
  .mbfw-date-picker-section__wrapper { gap: 1rem; }
  .mbfw-date-picker-section { flex: 1 1 100%; max-width: none; }
  .flatpickr-calendar { max-width: calc(100vw - 1.5rem); }
  .flatpickr-day { height: 38px; line-height: 38px; }   /* keep a 38px touch target */
}
@media (max-width: 480px) {
  .flatpickr-calendar { max-width: calc(100vw - 1rem); padding: .2rem .2rem .4rem; }
  .flatpickr-current-month { font-size: 1.1rem; }
  .flatpickr-current-month .select2-container { min-width: 7.5rem; }
  .wps_cal_timeslot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding: .6rem .25rem .2rem; }
  .wps_cal_timeslot button { font-size: .65rem; padding: .6rem .2rem; }
  form.cart button.single_add_to_cart_button { width: 100%; }
}

/* ===========================================================================
   10. MEASURED CORRECTIONS
   Everything below fixes something observed in the browser after the first
   pass, not something predicted. Values quoted are the computed styles that
   were actually read off the live page.
   =========================================================================== */

/* 10a. The date field is a bottom-hairline field, but the parent design system
   paints a 3px gold glow on focus — measured as
   `box-shadow: rgba(200,164,99,.25) 0 0 0 3px` — which turns it back into a
   box. Drop the glow; the --clay underline plus the focus-visible ring carry
   the state. The vendor also centres the value
   (`.mbfw-date-picker-section input{text-align:center}`, (0,1,1)); ACB fields
   are left-aligned and our (0,2,1) selector wins. */
.mwb-mbfw-cart-page-data .mbfw-date-picker-section input,
.mwb-mbfw-cart-page-data .mbfw-date-picker-section input:focus,
.mwb-mbfw-cart-page-data .mbfw-date-picker-section input:focus-visible {
  box-shadow: none;
  text-align: left;
}

/* 10b. The month control. flatpickr renders a <select>; the PARENT THEME's
   select2-init.js enhances every <select> on the page, so the month arrives
   wearing the theme's select2 skin — measured 136x44, background #DCD0BA
   (--paper-3), border-radius 2px, font-size 13px. Beside a 20px Cormorant
   year that reads as foreign widget chrome. Re-dress it rather than removing
   it: destroying select2 here would need JS, and un-hiding the native select
   would leave a focusable control still marked aria-hidden. */
.flatpickr-current-month .select2-container .select2-selection,
.flatpickr-current-month .select2-container .select2-selection--single {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair-ink);
  border-radius: 0;
  height: auto;
  min-height: 0;
  padding: 0 1.2rem .15rem .1rem;
  display: flex;
  align-items: center;
}
.flatpickr-current-month .select2-container .select2-selection__rendered {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  padding: 0;
}
.flatpickr-current-month .select2-container .select2-selection__arrow {
  height: 100%;
  right: 0;
  top: 0;
  width: 1rem;
}
.flatpickr-current-month .select2-container .select2-selection__arrow b {
  border-top-color: var(--ink-3);
  border-width: 4px 4px 0 4px;
}
/* the parent skin may draw the arrow as a pseudo-element instead */
.flatpickr-current-month .select2-container .select2-selection--single::after {
  color: var(--ink-3);
}
.flatpickr-current-month .select2-container--open .select2-selection,
.flatpickr-current-month .select2-container--open .select2-selection--single {
  border-bottom-color: var(--clay);
}
/* Height parity with the Cormorant year sitting next to it. */
.flatpickr-current-month input.cur-year { line-height: 1.2; }
.flatpickr-current-month .numInputWrapper { height: auto; }

/* 10c. Keyboard ring on the date field. Measured with a real Tab: the field
   matched :focus-visible but painted `outline: 0px none`, because our own
   `...input:focus{outline:0}` (0,3,1) outranked the generic
   `.mwb-mbfw-cart-page-data :focus-visible` (0,2,0). Restate the ring at equal
   specificity, after it, so pointer focus stays quiet and keyboard focus does
   not. --gold-dk, not --gold: 3.56:1 vs 2.10:1 on --paper. */
.mwb-mbfw-cart-page-data .mbfw-date-picker-section input:focus-visible,
.mwb-mbfw-cart-page-data select:focus-visible,
.mwb-mbfw-cart-page-data input[type="number"]:focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 2px;
}
/* Slot buttons and calendar days are inside the popup, which flatpickr appends
   to <body>; give them the same ring for anyone who does reach them. */
.wps_cal_timeslot button:focus-visible,
.flatpickr-day:focus-visible,
.flatpickr-current-month select:focus-visible,
.flatpickr-prev-month:focus-visible,
.flatpickr-next-month:focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: -2px;
}

/* ===========================================================================
   11. THE /termin/ BOOKING PAGE
   The booking product is embedded with [product_page id="N"] inside
   .acb-booking-embed. WooCommerce's own furniture is removed in PHP
   (acb_trim_embedded_product); what is left is title, price, excerpt and the
   booking form, which this section dresses as one ACB panel.
   =========================================================================== */

/* The panel itself: squared, hairline, no shadow — same language as everything
   else in this file, because acb.css declares radius exactly once (as 0) and
   ships no box-shadow at all. */
.acb-booking-embed .woocommerce,
.acb-booking-embed .single-product { margin: 0; padding: 0; }

.acb-booking-embed .product {
  background: var(--paper-2);
  border: 1px solid var(--hair-ink);
  border-radius: 0;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin: 0;
  display: block;
}

/* The summary is normally a ~48% column beside the gallery; with the gallery
   gone it must take the full panel. Woo sets the width inline-ish via its own
   stylesheet, so restate it rather than assume. */
.acb-booking-embed .summary.entry-summary {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}
.acb-booking-embed .woocommerce-product-gallery,
.acb-booking-embed .woocommerce-tabs,
.acb-booking-embed .product_meta,
.acb-booking-embed .woocommerce-product-rating,
.acb-booking-embed .related,
.acb-booking-embed .up-sells { display: none; }

/* Title of the embedded service. h3 by construction — the page's real h1 is
   the post title in the gold hero. */
.acb-booking-embed .acb-embed-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin: 0 0 .5rem;
}
.acb-booking-embed .price,
.acb-booking-embed p.price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1rem;
  display: block;
}
.acb-booking-embed .woocommerce-product-details__short-description {
  font-size: var(--fs-small);
  color: var(--ink-3);
  margin: 0 0 1.5rem;
  max-width: 46ch;
}
/* Woo's notice wrapper inside the panel should not add empty vertical space. */
.acb-booking-embed .woocommerce-notices-wrapper:empty { display: none; }

/* Placeholder notice — deliberately loud. This is the marker the owner must
   not be able to miss, and it also protects a visitor from booking a service
   that does not exist. Delete the block from the page to remove it. */
.acb-placeholder-notice {
  border: 1px solid var(--clay);
  border-left-width: 4px;
  border-radius: 0;
  background: var(--paper-2);
  color: var(--ink);
  padding: 1.1rem 1.35rem;
  margin: 0 0 2rem;
  max-width: 62ch;
}
.acb-placeholder-notice .label {
  color: var(--clay);
  margin: 0 0 .5rem;
}
.acb-placeholder-notice p { font-size: var(--fs-small); line-height: 1.6; margin: 0; }

/* The calendar popup is appended to <body>, so it is NOT inside .section--ink
   and needs no inversion — but the booking form itself sits on --paper-2 here
   rather than --paper. Re-ground the pieces that assumed --paper. */
.acb-booking-embed .wps_cal_timeslot button { background: var(--paper); }

@media (max-width: 782px) {
  .acb-booking-embed .product { padding: 1.25rem; }
  .acb-placeholder-notice { padding: 1rem 1.1rem; }
}

/* ---- 11b. MEASURED CORRECTIONS to the /termin/ panel -------------------- */

/* The summary stayed floated at 48% with an empty half-panel beside it,
   because I miscounted the vendor: woocommerce-layout.css ships
   `.woocommerce div.product div.summary` = (0,3,2) — THREE classes plus two
   type selectors — and my `.acb-booking-embed .summary.entry-summary` is only
   (0,3,0). Equal class count, fewer types, so the vendor won. Restate it at
   (0,4,2) and it wins on specificity rather than on luck. */
.acb-booking-embed .woocommerce div.product div.summary,
.acb-booking-embed .woocommerce div.product div.entry-summary {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  clear: both;
}

/* NAME COLLISION, not a styling gap: acb.css defines `.price` as the pricing
   TIER CARD (background --paper, 1px hairline, 2rem padding, display:flex) and
   WooCommerce's classic single-product template emits `<p class="price">` for
   the amount. On /termin/ that wrapped €45,00 in a card. The block product
   page is unaffected — it uses .wc-block-components-product-price — so this
   only bites where the [product_page] shortcode renders the classic template.
   Reset the card properties explicitly; inheriting them was the bug. */
.acb-booking-embed .woocommerce div.product p.price,
.acb-booking-embed .woocommerce div.product span.price {
  background: none;
  border: 0;
  padding: 0;
  display: block;
  position: static;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

/* The panel ground is --paper-2, so a --paper-2 disabled button disappears
   into it. Measured: button bg rgb(237,230,214) on panel bg rgb(237,230,214).
   Give it its own ground and a visible hairline on this surface only. */
.acb-booking-embed form.cart button.single_add_to_cart_button:disabled,
.acb-booking-embed form.cart button.single_add_to_cart_button[disabled] {
  background: var(--paper);
  border-color: var(--paper-3);
  color: var(--ink-3);
}