/* ============================================================
   WooCommerce skin — restyles WC's default markup with the
   Beweg dich gesund design tokens (no template overrides for
   cart/checkout/my-account, just CSS, per plan).
   ============================================================ */

.woocommerce{ color: var(--color-dark); }

/* Checkout block ("Kasse"): larger type throughout for readability, and a
   clearly set-off "Bestellübersicht" sidebar. Pure CSS only — WooCommerce
   Blocks reads its type sizes from these CSS custom properties everywhere
   (labels, order-summary line items, totals, radio options), so overriding
   them here cascades the size bump across the whole block without touching
   any markup. The site's own H1 ("Kasse") lives outside this block, so it's
   untouched. */
.wc-block-checkout{
  --wp--preset--font-size--small: 16px;
  --wp--preset--font-size--medium: 24px;
}
.wc-block-checkout__sidebar{
  background: var(--color-white);
  border: 1px solid rgba(var(--color-gold-rgb),.35);
  border-radius: var(--radius-m);
  padding: 1.7rem 1.9rem;
  box-shadow: var(--shadow-soft-s);
}

/* "Zahlungspflichtig bestellen" — match the site's signature gold-pill CTA
   (.btn.btn-primary) instead of WooCommerce's default dark rectangle. */
.wc-block-components-checkout-place-order-button{
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)) !important;
  color: var(--color-dark) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  box-shadow: 0 12px 30px -12px rgba(201,162,39,.55) !important;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .35s ease !important;
}
.wc-block-components-checkout-place-order-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(201,162,39,.65) !important;
}

/* Order summary quantity badge (the small corner number on each product
   thumbnail, e.g. "2", "3") — enlarge and raise contrast so it can't be
   missed, especially with larger quantities like 9, since the unit price
   shown underneath isn't enough for everyone to do the multiplication
   themselves. */
.wc-block-checkout .wc-block-components-order-summary-item__quantity{
  min-width: 26px !important; min-height: 26px !important;
  padding: 0 4px !important;
  font-size: .85rem !important; font-weight: 700 !important;
  background: var(--color-mauve) !important;
  color: var(--color-cream) !important;
  border: 2px solid var(--color-white) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-notice{
  background: rgba(139,108,133,.12);
  color: var(--color-mauve);
  border: none;
  border-radius: var(--radius-s);
  padding: 1rem 1.4rem;
  font-size: .92rem;
  list-style: none;
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: space-between;
}
.woocommerce-error{ background: rgba(179,65,58,.08); color: #b3413a; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ display:none; }

/* Thank-you / order-received page: give the payment-instructions text
   (BACS bank-transfer note, unmarked <p> from the gateway itself) room to
   breathe before the "Bestelldetails" section starts. */
.woocommerce-order-details{ margin-top: 2.8rem; }
.woocommerce-order-details__title{ margin-bottom: 1.2rem; }
.woocommerce-column__title{ margin-bottom: 1.2rem; }
.woocommerce-message .button,
.woocommerce-notice .button{
  order: 2;
}

/* Buttons -> map onto .btn look */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-Button{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-dark) !important;
  box-shadow: 0 12px 30px -12px rgba(201,162,39,.55);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(201,162,39,.65);
}
.woocommerce a.button.alt,
.woocommerce #payment #place_order{
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
}
.woocommerce a.button.loading,
.woocommerce button.button.loading{ opacity:.7; }

/* Shop archive: styled by woocommerce/content-product.php + .offer-card,
   these rules just cover the wrapping list */
ul.products{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:1.75rem; list-style:none; padding:0; margin:0; }
@media (max-width:1023px){ ul.products{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ ul.products{ grid-template-columns: minmax(0,1fr); } }
ul.products li.product{ list-style:none; }

/* Single product */
/* Was an inline style on the template (image | text, side by side) with no
   mobile stacking rule at all, so on phones the two columns just kept
   squeezing narrower instead of ever switching to a full-width image over
   full-width text. min-width:0 on the grid items stops long unbroken words
   (addresses etc. in .offer-meta-box below) from forcing the columns wider
   than the viewport and pushing content off the right edge. */
.bdg-single-product{
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(2rem,5vw,4rem); align-items:start;
}
.bdg-single-product .product-gallery-wrap,
.bdg-single-product .summary{ min-width:0; }
@media (max-width: 1023px){
  .bdg-single-product{ grid-template-columns: minmax(0,1fr); gap:1.8rem; }
}
.woocommerce div.product .woocommerce-product-gallery{ border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow-soft-s); }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ color: var(--color-dark); font-family: var(--font-head); font-size: 1.6rem; font-weight:600; }
.woocommerce div.product p.price del{ color: rgba(43,42,46,.4); font-size:.85em; }
.woocommerce div.product p.price ins{ text-decoration:none; }
.woocommerce div.product .stock{ font-weight:600; color: var(--color-mauve); }
.woocommerce div.product .stock.out-of-stock{ color: rgba(43,42,46,.55); }
.woocommerce div.product form.cart{ margin-top: 1.6rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.woocommerce div.product form.cart .quantity{ margin-right: .5rem; }
.woocommerce div.product form.cart .quantity input{
  width: 4.5rem; padding: .85rem 1rem; border-radius: var(--radius-s);
  border: 1px solid rgba(43,42,46,.18); background: var(--color-cream); font-family: inherit;
}
.woocommerce div.product .woocommerce-variation-add-to-cart{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
/* Default WooCommerce markup is a real <table> with a label <th> column
   beside the select <td> column — the th's content-based width pushed the
   select's left edge well to the right of the quantity/add-to-cart row
   below it, which has no such offset. Switching every table/row/cell to
   block display stacks the label above the select instead, so the select's
   left edge lines up with the button row underneath it. */
table.variations,
table.variations tbody,
table.variations tr,
table.variations th,
table.variations td{
  display:block; width:100%;
}
table.variations{ margin-bottom:1.2rem; }
table.variations td{ padding:0 0 .5rem; }
table.variations th.label{ padding:0 0 .4rem; text-align:left; }
table.variations label{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-mauve); }
table.variations select{
  font-family: inherit; font-size:.95rem; padding:.7rem 1rem; border-radius: var(--radius-s);
  border:1px solid rgba(43,42,46,.18); background: var(--color-cream); width:100%; max-width:320px;
}
.woocommerce-variation.single_variation{ margin-bottom:1rem; }
.woocommerce-variation-price .price{ font-size:1.3rem; }

.woocommerce-tabs{ margin-top: 3rem; }
.woocommerce-tabs ul.tabs{ display:flex; gap:2rem; border-bottom:1px solid rgba(43,42,46,.12); margin-bottom:1.8rem; list-style:none; padding:0; flex-wrap:wrap; }
.woocommerce-tabs ul.tabs li{ list-style:none; }
.woocommerce-tabs ul.tabs li a{ font-weight:600; font-size:.95rem; padding-bottom:.9rem; display:inline-block; position:relative; }
.woocommerce-tabs ul.tabs li.active a{ color: var(--color-mauve); }
.woocommerce-tabs ul.tabs li.active a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--color-gold); }
.woocommerce-tabs .panel{ max-width: none; line-height:1.8; color: rgba(43,42,46,.82); }
.woocommerce-tabs .panel p{ margin: 0 0 1.5rem; }
.woocommerce-tabs .panel p:last-child{ margin-bottom: 0; }
#tab-description.panel{ max-width: 68ch; }
.woocommerce-tabs .panel p.offer-disclaimer{
  margin-top: 2.2rem;
  font-size: .85rem;
  color: rgba(43,42,46,.55);
}

/* "Zusätzliche Informationen" tab — WooCommerce's default attribute table */
.woocommerce-product-attributes{ width:100%; border-collapse:collapse; margin-top:.5rem; }
.woocommerce-product-attributes-item__label{
  text-align:left; vertical-align:top;
  width:200px;
  padding: 1rem 1.5rem 1rem 0;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--color-mauve); font-weight:700;
  border-bottom: 1px dashed rgba(43,42,46,.12);
}
.woocommerce-product-attributes-item__value{
  text-align:left; vertical-align:top;
  padding: 1rem 0;
  font-size:.95rem; color: rgba(43,42,46,.8); line-height:1.7;
  border-bottom: 1px dashed rgba(43,42,46,.12);
}
.woocommerce-product-attributes-item__value p{ margin:0; }
@media (max-width:640px){
  .woocommerce-product-attributes-item__label{ display:block; width:auto; padding:1rem 0 .3rem; border-bottom:none; }
  .woocommerce-product-attributes-item__value{ display:block; padding:0 0 1rem; }
}

/* "Ablauf" tab — WE Retreat day-by-day timeline */
.retreat-schedule{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2rem; margin-top:.5rem;
}
.retreat-schedule-day h3{
  font-size:1.05rem; margin:0 0 1rem;
  padding-bottom:.7rem; border-bottom: 2px solid var(--color-gold);
}
.retreat-schedule-list{ list-style:none; margin:0; padding:0; }
.retreat-schedule-list li{
  position:relative; padding: 0 0 1.1rem 1.3rem;
  border-left: 1px dashed rgba(139,108,133,.4);
  margin-left:.2rem;
}
.retreat-schedule-list li:last-child{ border-left-color: transparent; padding-bottom:0; }
.retreat-schedule-list li::before{
  content:""; position:absolute; left:-4px; top:.4rem;
  width:8px; height:8px; border-radius:50%; background: var(--color-gold);
}
.retreat-schedule-time{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--color-mauve); font-weight:700; margin-bottom:.15rem;
}
.retreat-schedule-label{ display:block; font-size:.92rem; color: rgba(43,42,46,.85); line-height:1.5; }
.retreat-schedule-note{ margin-top:2rem; font-size:.85rem; font-style:italic; color: rgba(43,42,46,.55); }
@media (max-width: 800px){
  .retreat-schedule{ grid-template-columns: minmax(0,1fr); gap:2.2rem; }
}

.offer-meta-box{
  background: var(--color-cream-alt);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.8rem;
  margin: 1.8rem 0;
}

.retreat-booking-notice{
  margin: 1rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(43,42,46,.6);
  max-width: 48ch;
}
.retreat-booking-notice strong{ color: var(--color-mauve); }

/* Cart */
.woocommerce table.shop_table{ border-collapse:collapse; width:100%; border:none; margin-bottom:2rem; }
.woocommerce table.shop_table th{ text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color: var(--color-mauve); padding: .8rem 1rem; border-bottom:1px solid rgba(43,42,46,.12); }
.woocommerce table.shop_table td{ padding: 1.1rem 1rem; border-bottom:1px solid rgba(43,42,46,.08); vertical-align:middle; }
.woocommerce table.shop_table td.product-thumbnail img{ width:72px; border-radius: var(--radius-s); }
.woocommerce table.shop_table td.product-remove a{
  color: #b3413a; font-size:1.3rem; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(179,65,58,.3);
}
.woocommerce .quantity .qty{
  width: 4.5rem; padding: .7rem .9rem; border-radius: var(--radius-s);
  border: 1px solid rgba(43,42,46,.18); background: var(--color-cream); font-family: inherit;
}
.woocommerce-cart-form .coupon{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.woocommerce-cart-form .coupon .input-text{
  padding: .85rem 1.05rem; border-radius: var(--radius-s); border:1px solid rgba(43,42,46,.18); background: var(--color-cream); font-family:inherit;
}
.cart-collaterals .cart_totals{
  background: var(--color-cream-alt); border-radius: var(--radius-l); padding: 2rem;
}
.cart_totals h2{ font-size:1.3rem; margin-bottom:1rem; }
.cart_totals table{ width:100%; }
.cart_totals table th, .cart_totals table td{ padding:.7rem 0; border-bottom:1px dashed rgba(43,42,46,.15); }
.wc-proceed-to-checkout a.checkout-button{ width:100%; text-align:center; }

/* Checkout */
.woocommerce-checkout .col2-set{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; }
@media (max-width:860px){ .woocommerce-checkout .col2-set{ grid-template-columns: minmax(0,1fr); } }
.woocommerce-checkout h3{ font-size:1.3rem; margin-bottom:1.2rem; }
.woocommerce-checkout .form-row{ margin-bottom: 1rem; }
.woocommerce-checkout .form-row label{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-mauve); display:block; margin-bottom:.4rem; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
  font-family: inherit; font-size:.95rem; padding:.85rem 1.05rem; border-radius: var(--radius-s);
  border:1px solid rgba(43,42,46,.18); background: var(--color-cream); width:100%;
}
#order_review{ background: var(--color-cream-alt); border-radius: var(--radius-l); padding:2rem; }
.woocommerce-checkout-payment ul.payment_methods{ list-style:none; padding:0; margin:1.5rem 0; }
.woocommerce-checkout-payment ul.payment_methods li{ padding:.9rem 0; border-bottom:1px solid rgba(43,42,46,.1); }
.woocommerce-checkout-payment div.payment_box{
  background: rgba(139,108,133,.08); border-radius: var(--radius-s); padding:1rem 1.2rem; margin-top:.8rem; font-size:.88rem;
}

/* My account */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.woocommerce-MyAccount-navigation a{
  display:block; padding: .8rem 1.1rem; border-radius: var(--radius-s); font-weight:600; font-size:.92rem;
}
.woocommerce-MyAccount-navigation li.is-active a{ background: var(--color-cream-alt); color: var(--color-mauve); }
.woocommerce-MyAccount-content{ margin-top: 2rem; }
.woocommerce-Address{ background: var(--color-cream-alt); border-radius: var(--radius-m); padding:1.6rem; margin-top:1rem; }
/* Login/register/lost-password/edit-account are still classic (non-block)
   forms. Only .woocommerce-checkout had row spacing before — these rows
   had none at all, sitting flush against each other (and, we suspect, part
   of why the browser's native password-reveal icon looked like it was
   floating into the next row/checkbox below: too little room between the
   password field and the row after it). */
.woocommerce form .form-row{ margin-bottom: 1.2rem; }
/* The ">" (direct-child) combinator here never actually matched: on
   /mein-konto/ the "Anmelden"/"Registrieren" headings sit several levels
   deep (.woocommerce > .u-columns > .u-column1/2 > h2), not as a direct
   child of .woocommerce, so this rule silently did nothing and the
   headings had no breathing room at all. */
.woocommerce-account .woocommerce h2{ margin-top: 2.4rem; margin-bottom: 1.6rem; }
.woocommerce-account .u-column1 h2{ margin-top: 0; }
/* Not a browser/extension thing after all — WooCommerce's own frontend.js
   wraps every password field in <span class="password-input"> and appends
   a <button class="show-password-input"> as its sibling (see
   woocommerce.js, "Show password visibility hover icon"). It rendered as a
   bare, icon-less pill because we don't load WooCommerce's own stylesheet
   (see woocommerce_enqueue_styles filter in inc/woocommerce.php), which is
   normally what draws the eye icon on it. Styled properly here instead. */
.password-input{ position:relative; }
.password-input input.woocommerce-Input{ padding-right: 3rem !important; }
.show-password-input{
  position:absolute; top:50%; right:.85rem; transform:translateY(-50%);
  width:1.5rem; height:1.5rem; padding:0; border:none; background-color:transparent !important;
  background-repeat:no-repeat; background-position:center; background-size:1.3rem;
  cursor:pointer; opacity:.5; transition:opacity .2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2A2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password-input:hover{ opacity:1; }
.show-password-input.display-password{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2A2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a18.6 18.6 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
/* The "remember me" checkbox and the submit button share one <p class="form-row">
   with no layout rules of their own, so they sat flush against each other on
   one line. Making the checkbox label block-level pushes the (inline-flex)
   button onto its own line below it, and the added margin-top gives it room. */
.woocommerce-form-login__rememberme{ display:block; margin-bottom: 1.1rem; cursor:pointer; }
.woocommerce-form-login__submit{ margin-top: .4rem; }
.woocommerce-form-register__submit{ margin-top: 1.4rem; }
.woocommerce-LostPassword{ margin-top: 1.4rem; }
.woocommerce-privacy-policy-text{ margin-top: 1.2rem; margin-bottom: 1.4rem; font-size: .85rem; color: rgba(43,42,46,.65); }
.woocommerce form .form-row label{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--color-mauve); display:block; margin-bottom:.4rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  font-family: inherit; font-size:.95rem; padding:.85rem 1.05rem; border-radius: var(--radius-s);
  border:1px solid rgba(43,42,46,.18); background: var(--color-cream); width:100%;
}
.woocommerce-account .addresses .title h3{ font-size:1.1rem; }

/* Hide the browser-native password reveal/"save password" icons that
   Edge/Chrome/Safari inject into <input type="password">: none of this is
   part of our markup or themeable, and it renders squashed against our
   custom input padding. */
.woocommerce input[type="password"]::-ms-reveal,
.woocommerce input[type="password"]::-ms-clear{
  display:none;
}
.woocommerce input[type="password"]::-webkit-credentials-auto-fill-button,
.woocommerce input[type="password"]::-webkit-strong-password-auto-fill-button{
  visibility:hidden;
  display:none !important;
  pointer-events:none;
  position:absolute;
  right:0;
}

/* Price-on-request (Privat Yoga) */
.price-on-request{ font-family: var(--font-head); font-size:1.4rem; color: var(--color-mauve); font-weight:600; }