/* Forms (Contact Form 7) and WooCommerce views in "Weingarten und Keller": Sofia for everything you fill in,
   pay or count; Literata for names. */

/* ---- Contact Form 7 ---- */
.st-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.st-field {
  grid-column: 1 / -1;
  margin: 0 0 22px !important;
  max-width: none !important;
}
.st-field--half { grid-column: span 1; }
@media (max-width: 600px) { .st-field--half { grid-column: 1 / -1; } }
.st-field label {
  display: block;
  margin-bottom: 8px;
  font: 480 var(--st-fs-ui)/1.3 var(--st-sans);
  letter-spacing: .012em;
  color: var(--st-cream);
  transition: color var(--st-quick) var(--st-ease);
}
.st-optional {
  font-weight: 460;
  color: var(--st-cream-soft);
}
/* A field is the warm fill with a baseline under it, like a line on a form you write on: no box. The baseline
   (#8A7E70, 4.8:1 on the ground) is what WCAG 1.4.11 needs to find the field; it turns soft cream on hover. Focus
   is the global gold ring (base.css) alone, not a second border. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-page form .input-text,
.select2-container .select2-selection {
  width: 100%;
  min-height: 50px;
  background-color: var(--st-label-2) !important;
  color: var(--st-cream) !important;
  border: 0 !important;
  border-bottom: 1px solid #8A7E70 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 460 1.0625rem/1.4 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  padding: 12px 14px !important;
  caret-color: var(--st-gold);
  transition: border-color var(--st-quick) var(--st-ease), background-color var(--st-quick) var(--st-ease);
}
@media (hover: hover) {
  .wpcf7 :is(input, textarea):not([type="submit"]):hover,
  .woocommerce form .input-text:hover,
  .woocommerce form select:hover,
  .select2-container .select2-selection:hover {
    border-bottom-color: var(--st-cream-soft) !important;
  }
}
.wpcf7 input[type="date"] { color-scheme: dark; }
/* Chrome's autofill paints its own pale ground: keep the fill and the cream text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--st-cream) !important;
  caret-color: var(--st-gold);
  transition: background-color 5000s ease-in-out 0s;
}
/* An unfilled required field: its baseline turns cream and doubles, the tip below says what is missing.
   No error colour: the words carry the message (gold stays for interaction). */
.wpcf7 [aria-invalid="true"],
.woocommerce form .woocommerce-invalid .input-text,
.woocommerce form .woocommerce-invalid .select2-selection {
  border-bottom: 2px solid var(--st-cream) !important;
  padding-bottom: 11px !important;
}
.wpcf7-not-valid-tip,
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  color: var(--st-cream) !important;
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans) !important;
  letter-spacing: .012em;
  margin-top: 8px;
}
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 0;
  border: 0 !important;
  font: 470 var(--st-fs-ui)/1.4 var(--st-sans);
  color: var(--st-cream);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { color: var(--st-cream); }
/* Tips and notices unroll from their top edge once, as they appear (CF7 inserts the tip on a failed check) */
@media (prefers-reduced-motion: no-preference) {
  .wpcf7-not-valid-tip,
  .wpcf7 form .wpcf7-response-output,
  .woocommerce-notices-wrapper > *,
  .woocommerce-NoticeGroup > *,
  .woocommerce-error,
  .woocommerce-message {
    clip-path: inset(0);
    transition: clip-path var(--st-exit) var(--st-ease);
  }
  @starting-style {
    .wpcf7-not-valid-tip,
    .wpcf7 form .wpcf7-response-output,
    .woocommerce-notices-wrapper > *,
    .woocommerce-NoticeGroup > *,
    .woocommerce-error,
    .woocommerce-message {
      clip-path: inset(0 0 100% 0);
    }
  }
}
/* Checkboxes and radios (Uncode draws them itself, so accent-color only reaches native ones): square, a baseline-
   strong frame, gold when chosen */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--st-gold);
}
html body :is(.wpcf7, .woocommerce, .term-filters) input[type="checkbox"] {
  border-radius: 0 !important;
}
html body :is(.wpcf7, .woocommerce, .term-filters) :is(input[type="checkbox"], input[type="radio"]) {
  border: 1px solid #8A7E70 !important;
  background-color: transparent;
  transition: background-color var(--st-quick) var(--st-ease), border-color var(--st-quick) var(--st-ease);
}
@media (hover: hover) {
  html body :is(.wpcf7, .woocommerce, .term-filters) :is(input[type="checkbox"], input[type="radio"]):not(:checked):hover { border-color: var(--st-cream-soft) !important; }
}
html body :is(.wpcf7, .woocommerce, .term-filters) input[type="checkbox"]:checked {
  background-color: var(--st-gold) !important;
  border-color: var(--st-gold) !important;
  color: var(--st-label) !important;
}
html body :is(.wpcf7, .woocommerce, .term-filters) input[type="checkbox"]:checked::before { color: var(--st-label) !important; }
html body :is(.wpcf7, .woocommerce, .term-filters) input[type="radio"]:checked { border-color: var(--st-gold) !important; }
html body :is(.wpcf7, .woocommerce, .term-filters) input[type="radio"]:checked::before { background-color: var(--st-gold) !important; }

/* ---- Shop grid (Uncode index on /shop/ and category archives) ---- */
/* The plate also sits on the link around the image: on /shop/ Uncode gives that link perspective: 1000px,
   which makes it a stacking context, and multiply only blends with what is painted inside it. */
.tmb-woocommerce .t-entry-visual-cont,
.tmb-woocommerce .t-entry-visual,
.tmb-woocommerce .t-entry-visual-cont > a {
  background-color: var(--st-plate) !important;
}
.tmb-woocommerce .t-entry-visual img {
  mix-blend-mode: multiply;
}
.tmb-woocommerce .t-entry-visual-overlay { display: none !important; }
.tmb-woocommerce .t-entry-title,
.tmb-woocommerce .t-entry-title a {
  font-family: var(--st-serif) !important;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3rem) !important;   /* 17 px in a 164 px phone tile, 20.8 px from 1150 px */
  font-weight: 470 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  line-height: 1.22 !important;
  color: var(--st-cream) !important;
}
/* The whole tile is the link's hover area: pointing at the bottle underlines its name too */
.tmb-woocommerce .t-entry-title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--st-quick) var(--st-ease-settle);
}
@media (hover: hover) {
  .tmb-woocommerce:hover .t-entry-title a {
    color: var(--st-cream) !important;
    text-decoration-color: var(--st-gold);
    transition-timing-function: var(--st-ease);
  }
}
.tmb-woocommerce:focus-within .t-entry-title a { text-decoration-color: var(--st-gold); }
.tmb-woocommerce .price,
.tmb-woocommerce .price ins,
.tmb-woocommerce .price .h3 {
  font: 580 1.0625rem/1.3 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0 !important;
  text-decoration: none;
  color: var(--st-cream) !important;
}
.woocommerce-price-suffix {
  font-family: var(--st-sans);
  font-size: .8em;
  font-weight: 460;
  color: var(--st-cream-soft);
}

/* Filters and sorting */
.widget-ajax-filters .widget-title,
.widget-container .widget-title {
  font: 480 var(--st-fs-ui)/1.3 var(--st-sans) !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  color: var(--st-cream) !important;
  border-color: var(--st-line) !important;
}
.term-filter-link,
.uncode-woocommerce-sorting-dropdown__link,
.uncode-woocommerce-sorting__link,
.ajax-filter-sidebar__button,
.woocommerce-result-count,
.uncode-woocommerce-sorting,
.uncode-woocommerce-toggle-ajax-filters {
  font-family: var(--st-sans) !important;
  font-size: var(--st-fs-ui) !important;
  font-weight: 470 !important;
  text-transform: none !important;
  letter-spacing: .012em !important;
}
/* Small-print links in the filter: soft at rest, cream with a gold line drawn under the pointer; the chosen
   category keeps its line (like the current page) */
.term-filter-link {
  color: var(--st-cream-soft) !important;
  padding-bottom: 3px;
  background: linear-gradient(var(--st-gold), var(--st-gold)) no-repeat left bottom / 0 1px;
  transition: color var(--st-quick) var(--st-ease-settle), background-size var(--st-quick) var(--st-ease-settle);
}
@media (hover: hover) {
  /* Uncode turns the link's pointer events off: the list line is what the pointer hovers */
  .term-filter:hover .term-filter-link,
  .term-filter-link:hover {
    color: var(--st-cream) !important;
    background-size: 100% 1px;
    transition: color var(--st-quick) var(--st-ease), background-size var(--st-draw) var(--st-ease);
  }
}
.term-filter--active .term-filter-link,
.term-filter input:checked + .term-filter-link {
  color: var(--st-cream) !important;
  background-size: 100% 1px;
}
.term-filter-count { color: var(--st-cream-soft); font-variant-numeric: lining-nums; }
/* The filter column (2026-11-03): the small print's weight, no rule under "Kategorien" (separation by space) */
.widget-ajax-filters .widget-title,
.ajax-filter-sidebar .widget-container .widget-title {
  border: 0 !important;
  padding-bottom: 6px !important;
}
.ajax-filter-sidebar .term-filter-link,
.ajax-filter-sidebar .term-filter label {
  font-weight: 460 !important;
}
.ajax-filter-sidebar .term-filter-count {
  font: 460 var(--st-fs-ui)/1.3 var(--st-sans);
  font-variant-numeric: lining-nums tabular-nums;
}
/* The phone panel's header and footer sit on the ground without rules */
.ajax-filter-sidebar .ajax-filter-sidebar-header,
.ajax-filter-sidebar .ajax-filter-sidebar-footer {
  border: 0 !important;
}
/* Wide screens: the filter column travels with the grid instead of leaving an empty column beside it. Uncode clips
   the column (for its hide animation) and the page box: clip is the same cut without making them scroll containers,
   which would hold the sticky block in place. */
@media (min-width: 960px) {
  body:has(.ajax-filter-sidebar) .box-wrapper,
  .ajax-filter-wrapper .ajax-filter-sidebar-wrapper {
    overflow: clip !important;
  }
  .ajax-filter-wrapper .ajax-filter-sidebar {
    position: sticky;
    top: calc(var(--st-header-h) + 24px);
  }
}
/* Phones and tablets: "Filter anzeigen" on the page margin like the heading above it, not centred */
@media (max-width: 959px) {
  .grid-filters .menu-horizontal.text-mobile-center,
  .grid-filters .filter-main-group {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .grid-filters .uncode-toggle-ajax-filters { margin-left: 0 !important; }
}

/* ---- Single product ---- */
.single-product .woocommerce-product-gallery,
.single-product .uncode-single-product-gallery,
.single-product .woocommerce-product-gallery__image {
  background-color: var(--st-plate) !important;
}
.single-product .woocommerce-product-gallery img,
.single-product .uncode-single-product-gallery img {
  mix-blend-mode: multiply;
}
/* The product name is WooCommerce data (often in capitals): set it at h2 size, not as a display line */
.single-product .heading-text h1,
.single-product h1.product_title {
  font-size: var(--st-fs-h2) !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: break-word;
}
/* Only the buy block's price: the related tiles below keep the shop's price size */
.single-product .heading-text .price {
  font: 580 1.5rem/1.2 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0 !important;
  text-decoration: none;
  color: var(--st-cream) !important;
}
.single-product .heading-text .woocommerce-price-suffix {
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans) !important;
  color: var(--st-cream-soft) !important;
  margin-left: .35em;
}
.st-description {
  margin-top: 28px !important;
}
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.breadcrumb,
.breadcrumb a {
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans) !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  color: var(--st-cream-soft) !important;
}
.quantity input.qty,
.woocommerce .quantity .qty {
  min-height: 48px;
  background-color: var(--st-label-2) !important;
  color: var(--st-cream) !important;
  border: 1px solid #8A7E70 !important;
  border-radius: 0 !important;
  font: 560 1.0625rem/1 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
}
.quantity .qty-inset,
.quantity .qty-inset > span {
  background-color: var(--st-label-2) !important;
  color: var(--st-cream) !important;
  border-color: #8A7E70 !important;
}
.quantity .qty-inset > span {
  min-width: 44px;
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.single-product form.cart .single_add_to_cart_button {
  min-height: 50px;
}

/* ---- Cart and checkout: the site's ground, Sofia for the tables, visible labels ---- */
.woocommerce-cart .main-container,
.woocommerce-checkout .main-container,
.woocommerce-cart .post-content,
.woocommerce-checkout .post-content,
.woocommerce-cart .row-container,
.woocommerce-checkout .row-container {
  background-color: var(--st-label) !important;
}
.woocommerce-cart .row-background,
.woocommerce-checkout .row-background,
.woocommerce-cart .uncode-divider-wrap,
.woocommerce-checkout .uncode-divider-wrap {
  display: none !important;
}
.woocommerce-cart .uncol,
.woocommerce-checkout .uncol,
.woocommerce-cart .uncol .column-background,
.woocommerce-checkout .uncol .column-background,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .col2-set,
.woocommerce-checkout #order_review {
  background-color: transparent !important;
  box-shadow: none !important;
}
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--st-line) !important;
  border-radius: 0 !important;
  font-family: var(--st-sans);
}
.woocommerce table.shop_table th,
.woocommerce-checkout h3,
.cart_totals h2,
.woocommerce-billing-fields h3 {
  font: 480 var(--st-fs-ui)/1.3 var(--st-sans) !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  color: var(--st-cream-soft) !important;
}
.woocommerce-cart h1,
.woocommerce-checkout h1 { max-width: 14em; }
.woocommerce table.shop_table td,
.woocommerce-checkout-review-order-table td {
  font-variant-numeric: lining-nums tabular-nums;
}
/* Wine names in Literata, at the shop tiles' size (Uncode's cart prints them in .product-data__name) */
.woocommerce table.shop_table td.product-name a,
.woocommerce-cart-form .product-data__name,
.woocommerce-cart-form .product-data__name a {
  font-family: var(--st-serif) !important;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3rem) !important;
  font-weight: 470 !important;
  line-height: 1.22 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: var(--st-cream) !important;
}
.woocommerce-cart-form .product-data__name,
.woocommerce-checkout-review-order-table .product-item-text,
.tmb-woocommerce .t-entry-title { text-wrap: balance; }   /* „Kalk + Granit“ stays on one line where it can */
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  margin: 0 0 8px !important;
  font: 480 var(--st-fs-ui)/1.3 var(--st-sans) !important;
  color: var(--st-cream) !important;
  opacity: 1 !important;
}
.woocommerce form .form-row .required { color: var(--st-cream-soft); text-decoration: none; }
/* Notices are lines of text on the ground: no panel, no rule, no error colour (the words say what is wrong).
   html body: Uncode's notice box (padding 12px 18px !important) sits under "body .style-dark …" */
html body .woocommerce-message,
html body .woocommerce-info,
html body .woocommerce-error,
html body .woocommerce-notice,
html body .style-dark .wc-notice.woocommerce-message,
html body .style-dark .wc-notice.woocommerce-info {
  background: none !important;
  color: var(--st-cream) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font: 460 var(--st-fs-ui)/1.45 var(--st-sans) !important;
  letter-spacing: .012em;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none !important; display: none !important; }
.woocommerce-error > li { margin: 0 0 4px !important; padding: 0 !important; list-style: none; }
.woocommerce #payment,
.woocommerce-checkout #payment {
  background-color: var(--st-label-2) !important;
  border-radius: 0 !important;
}
.woocommerce #payment div.payment_box {
  background-color: var(--st-label) !important;
  color: var(--st-cream) !important;
}
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--st-label) !important; }

/* Product page: the name at a reading size (WooCommerce data is often in capitals), the price in the sans */
.single-product .heading-text h1,
.single-product h1.product_title {
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em !important;
}
.single-product .heading-text .h2:has(.amount),
.single-product .heading-text .h2:has(.amount) * {
  font-family: var(--st-sans) !important;
  font-size: 1.5rem !important;
  font-weight: 580 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: lining-nums tabular-nums;
}
.single-product .heading-text .h2:has(.amount) .woocommerce-price-suffix {
  font-size: var(--st-fs-meta) !important;
  font-weight: 460 !important;
  color: var(--st-cream-soft) !important;
}

/* Sorting and the filter toggle above the grid */
.uncode-woocommerce-sorting__link,
.uncode-woocommerce-sorting__link *,
.uncode-toggle-ajax-filters,
.uncode-toggle-ajax-filters *,
.woocommerce-result-count {
  font-family: var(--st-sans) !important;
  font-size: var(--st-fs-ui) !important;
  font-weight: 470 !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
}
.vc_row.st-shop-flow .uncode-wrapper,
.vc_row.st-shop-flow .uncol { overflow: visible; }
/* Uncode's filter bar sets the sort trigger and its list to inherit the body face (!important, three classes deep):
   these four classes win, so both are small print like the result count beside them */
.grid-filters .menu-smart.uncode-woocommerce-sorting .uncode-woocommerce-sorting__link,
.grid-filters .menu-smart.uncode-woocommerce-sorting .uncode-woocommerce-sorting-dropdown__link {
  font-family: var(--st-sans) !important;
  font-size: var(--st-fs-ui) !important;
  font-weight: 470 !important;
  letter-spacing: .012em !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}
/* Sorting: the open list's options are soft, the pointed one cream with a gold line; the trigger keeps its cream */
.grid-filters .menu-smart.uncode-woocommerce-sorting .uncode-woocommerce-sorting-dropdown__link {
  color: var(--st-cream-soft) !important;
}
.grid-filters .menu-smart.uncode-woocommerce-sorting :is(.uncode-woocommerce-sorting__link, .uncode-woocommerce-sorting-dropdown__link),
.grid-filters .uncode-toggle-ajax-filters > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  text-decoration-color: transparent;
  transition: color var(--st-quick) var(--st-ease-settle), text-decoration-color var(--st-quick) var(--st-ease-settle);
}
@media (hover: hover) {
  .grid-filters .menu-smart.uncode-woocommerce-sorting :is(.uncode-woocommerce-sorting__link, .uncode-woocommerce-sorting-dropdown__link):hover,
  .grid-filters .uncode-toggle-ajax-filters:hover > span {
    color: var(--st-cream) !important;
    text-decoration-color: var(--st-gold);
    transition-timing-function: var(--st-ease);
  }
}
/* The list opens with its words under the trigger's word (trigger padding 11 px, items 20 px) and keeps each
   option on one line */
.grid-filters ul.menu-smart.uncode-woocommerce-sorting > li.uncode-woocommerce-sorting__item > ul.uncode-woocommerce-sorting-dropdown {
  left: -9px !important;
  right: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  padding: 12px 0 !important;
}
.grid-filters .menu-smart.uncode-woocommerce-sorting .uncode-woocommerce-sorting-dropdown__link {
  padding: 6px 20px !important;
  white-space: nowrap !important;
}

/* Cart: the page heading is enough; the element's own title goes */
.woocommerce-cart-form > h2 { display: none !important; }
/* The main step forward is the cream button, everywhere */
html body .wc-proceed-to-checkout a.checkout-button,
html body .woocommerce #payment #place_order,
html body .woocommerce-checkout #place_order {
  background-color: var(--st-cream) !important;
  border: 1px solid var(--st-cream) !important;
  color: var(--st-label) !important;
  min-height: 50px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html body .wc-proceed-to-checkout a.checkout-button:hover,
html body .woocommerce #payment #place_order:hover {
  background-color: var(--st-gold) !important;
  border-color: var(--st-gold) !important;
}
/* Secondary cart actions: outlines on the ground */
.woocommerce-cart-form .coupon button.button,
.woocommerce-cart-form td.actions > button.button {
  background: transparent !important;
  border: 1px solid rgba(236, 228, 214, .45) !important;
  color: var(--st-cream) !important;
  min-height: 46px;
}
.woocommerce-cart-form .coupon button.button:hover,
.woocommerce-cart-form td.actions > button.button:hover { border-color: var(--st-cream) !important; }
.woocommerce-cart-form a.remove {
  font-family: var(--st-sans);
  font-size: var(--st-fs-meta) !important;
  color: var(--st-cream-soft) !important;
}
.woocommerce #payment,
.woocommerce #payment * { font-family: var(--st-sans) !important; }
.woocommerce #payment .payment_box p { font-size: var(--st-fs-meta) !important; line-height: 1.5; }

/* Shop and product rows on the page margin like every other page (logo and text start at var(--st-edge)) */
.vc_row.st-shop-grid > .row,
.vc_row.st-product > .row,
.single-product .post-content .vc_row:not(.st-grid) > .row {
  max-width: none !important;
  padding-left: var(--st-edge) !important;
  padding-right: var(--st-edge) !important;
}
.single-product .post-content h2,
.single-product .related h2 { text-align: left !important; }
@media (max-width: 959px) {
  .vc_row.st-shop-grid > .row,
  .single-product .post-content .vc_row:not(.st-grid) > .row {
    padding-left: var(--st-edge) !important;
    padding-right: var(--st-edge) !important;
  }
}
/* Product page: tags and the repeated short note stay in the data, not on the page */
.single-product .product_meta .tagged_as { display: none !important; }
.single-product .product_meta { font-family: var(--st-sans); font-size: var(--st-fs-meta); color: var(--st-cream-soft); }
.single-product .product_meta a { color: var(--st-cream-soft) !important; }
/* The quantity stepper (product page and cart): − digit + in one frame, flat on the ground, as tall as the button
   beside it.
   Uncode places − and + absolutely over a wide padded input (20px in from each side); here the three are cells of
   one row. The form's clearfix pseudo-elements would be flex items and indent the stepper by one gap. */
.single-product form.cart::before,
.single-product form.cart::after {
  content: none !important;
}
:is(.single-product form.cart, .woocommerce-cart-form) .quantity,
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset {
  background: transparent !important;
  margin: 0 !important;
}
:is(.single-product form.cart, .woocommerce-cart-form) .quantity {
  display: flex !important;
}
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset {
  display: flex !important;
  align-items: stretch;
  float: none !important;
  min-height: 50px;
  border: 1px solid #8A7E70 !important;
}
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset > span,
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset input.qty {
  flex: 0 0 44px;
  width: 44px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset > span {
  position: static !important;
}
/* − and +: gold under the pointer (not after a tap: hover sticks on touch screens), a faint press on both */
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset > span {
  border-radius: 0 !important;
  transition: color var(--st-quick) var(--st-ease-settle), background-color var(--st-quick) var(--st-ease-settle) !important;
}
@media (hover: hover) {
  :is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset > span:hover {
    color: var(--st-gold) !important;
    transition-timing-function: var(--st-ease) !important;
  }
}
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset > span:active {
  background-color: rgba(236, 228, 214, .08) !important;
  transition-duration: var(--st-instant) !important;
}
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset input.qty {
  float: none !important;
  padding: 0 !important;
  text-align: center;
}
/* Phones: the button takes the rest of the line, so stepper and button stay on one line across the text column */
@media (max-width: 600px) {
  .single-product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* Cart and checkout: totals separated by space, not rules; the shipping note reads as a sentence */
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { border: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; }
.woocommerce-shipping-totals td,
.woocommerce-shipping-totals td p { text-align: left !important; font-family: var(--st-sans); font-size: var(--st-fs-meta); }
.woocommerce #payment { background: transparent !important; padding: 0 !important; }
.woocommerce #payment .payment_box { background: var(--st-label-2) !important; }
/* Related products under a product ("Das könnte dich auch interessieren"): no rule above, on the page margin */
.vc_row.st-related { border: 0 !important; }

/* ==== QA pass (2026-11-02) ==== */
/* "Weiter zur Kasse" carries btn-default: one step stronger than the dark-skin guard in uncode.css */
html body .style-dark .wc-proceed-to-checkout a.checkout-button.btn-default,
html body .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--st-cream) !important;
  border-color: var(--st-cream) !important;
  color: var(--st-label) !important;
}
html body .style-dark .wc-proceed-to-checkout a.checkout-button.btn-default:hover,
html body .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--st-gold) !important;
  border-color: var(--st-gold) !important;
  color: var(--st-label) !important;
}
/* Placeholders must not look like typed values */
input::placeholder,
textarea::placeholder,
.select2-selection__placeholder {
  color: var(--st-cream-faint) !important;
  opacity: 1 !important;
}
/* Contact Form 7 errors: the field and its tip in the error colour (Uncode's generated rule paints tips gold) */
.wpcf7 form .wpcf7-form-control[aria-invalid="true"],
.wpcf7 form input[aria-invalid="true"],
.wpcf7 form textarea[aria-invalid="true"] {
  border-bottom-color: var(--st-cream) !important;
}
html body .wpcf7 span.wpcf7-not-valid-tip {
  color: var(--st-cream) !important;
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans) !important;
}
/* The cart notice: its link sits inside the line, not on the box edge */
.woocommerce-message .button,
.woocommerce-message a.wc-forward {
  float: none !important;
  position: static !important;
  display: inline !important;
  margin: 0 0 0 .4em !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: .22em;
}
.woocommerce-message:focus { outline: none !important; }
/* Checkout: the shipping row gets a readable width */
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th { width: 34%; }
/* Cart thumbnails on the limestone like every packshot (only the image's own box, not the cell) */
.woocommerce-cart-form .product-thumbnail a {
  display: inline-block !important;
  background: var(--st-plate) !important;
  line-height: 0;
}
.woocommerce-cart-form .product-thumbnail img { mix-blend-mode: multiply; display: block; }
/* Shop tiles: names keep whole words where the tile has room ("Geschenkgutschein" split at 1440 px); on phones
   long names hyphenate instead of breaking mid-word */
.tmb-woocommerce .t-entry-title,
.tmb-woocommerce .t-entry-title a {
  overflow-wrap: normal !important;
  hyphens: manual !important;
}
@media (max-width: 600px) {
  .tmb-woocommerce .t-entry-title,
  .tmb-woocommerce .t-entry-title a { hyphens: auto !important; }
}
/* Shop tiles: one frame for every product. The packshots come in three shapes (bottles 8:9, cans taller, one
   landscape shot); each sits inside an 8:9 limestone frame, so names and prices line up row by row. The voucher
   graphics are 8:9 on white like the packshots (.dev/redesign/tools/gutschein.mjs), so they stand on the same stone. */
.tmb-woocommerce .t-entry-visual-cont > a {
  display: block !important;
  aspect-ratio: 8 / 9;
  overflow: hidden;
}
.tmb-woocommerce .t-entry-visual-cont > a > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
/* Uncode reserves each tile's height with a .dummy spacer at the image's own ratio: pin it to 8:9 */
.tmb-woocommerce .t-entry-visual .dummy {
  padding-top: 112.5% !important;
}

/* ==== Design review fixes (2026-11-02, docs/design-review-2026-11-02.md #9) ==== */
/* Header cart: the count stands beside the bag as a small figure (Uncode lifts it 30 px onto the handle) */
.uncode-cart .cart-icon-container,
.mobile-shopping-cart .cart-icon-container {
  display: inline-flex !important;
  align-items: center;
}
.uncode-cart .cart-icon-container .badge,
.mobile-shopping-cart .cart-icon-container .badge {
  position: static !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 0 0 5px !important;
  padding: 0 !important;
  line-height: 1 !important;
  font: 500 .875rem/1 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--st-cream) !important;
}

/* Cart and checkout without rules (spec §1c): rows and blocks are separated by space */
.woocommerce-cart-form table.shop_table,
.woocommerce-cart-form table.shop_table td,
.woocommerce-cart-form table.shop_table th,
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .form-row.place-order {
  border: 0 !important;
}
.woocommerce-checkout .woocommerce-shipping-fields { padding-top: 8px !important; }
.woocommerce-checkout .form-row.place-order { padding-top: 8px !important; }

/* Cart: the coupon waits behind a text link (strommer.js); quantities update by themselves, so the update
   button is only there without JavaScript */
html.st-cart-js .woocommerce-cart-form .coupon.st-coupon--closed { display: none !important; }
html.st-cart-js .woocommerce-cart-form button.st-auto-update { display: none !important; }
.woocommerce-cart-form .st-coupon-toggle {
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 0;
  border: 0;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;
  font: 480 var(--st-fs-ui)/1.3 var(--st-sans);
  letter-spacing: .012em;
  color: var(--st-cream-soft);
  cursor: pointer;
  transition: color var(--st-quick) ease-out;
}
.woocommerce-cart-form .st-coupon-toggle:hover,
.woocommerce-cart-form .st-coupon-toggle[aria-expanded="true"] { color: var(--st-cream); }
.woocommerce-cart-form .st-coupon-toggle::before { content: none !important; display: none !important; }  /* Uncode's icon for action buttons */
.woocommerce-cart-form td.actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
}
.woocommerce-cart-form .coupon {
  display: flex !important;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.woocommerce-cart-form .coupon input[name="coupon_code"] {
  width: 14em !important;
  min-height: 46px;
  margin: 0 !important;
}
.woocommerce-cart-form .coupon button.button { margin: 0 !important; }
.woocommerce-cart-form td.actions { padding-top: var(--st-space-m) !important; }

/* Checkout: "Hast du einen Gutschein?" is a line of text with a link, not a raised bar */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info.wc-notice {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 var(--st-space-m) !important;
  font: 460 var(--st-fs-ui)/1.45 var(--st-sans) !important;
  color: var(--st-cream-soft) !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-info.wc-notice a {
  color: var(--st-cream) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(236, 228, 214, .38) !important;
  text-underline-offset: .22em;
}
.woocommerce-form-coupon-toggle .woocommerce-info a:hover { text-decoration-color: var(--st-gold) !important; }

/* Product page: the facts list under the description (only when the wine has attributes) */
.uncode_text_column.st-product-facts-wrap:not(:has(dl)) { display: none; }
.st-product-facts-wrap dl.st-product-facts { margin-top: 28px; }
/* Phones and tablets: the count takes no room in the icon row (the menu button is pulled towards it on the page
   margin); it hangs beside the bag, centred on it */
.mobile-shopping-cart .cart-icon-container { position: relative; }
.mobile-shopping-cart .cart-icon-container .badge {
  position: absolute !important;
  left: 100% !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ==== Refinement pass (2026-11-03): shop, product page, cart, forms ==== */

/* ---- Product page: one buy block. Breadcrumb, name, price; then stepper and button with air above and below;
   then the tasting note and, when the description is one line of facts, that line as small print ---- */
.vc_row.st-product:not(.st-related) .uncont > form.cart {
  margin-top: var(--st-space-m) !important;
}
.vc_row.st-product:not(.st-related) .uncont > form.cart + .uncode_text_column {
  margin-top: var(--st-space-m) !important;
}
.vc_row.st-product .uncont > .uncode_text_column:empty { display: none; }   /* a product without a short text */
.vc_row.st-product .uncont > .uncode_text_column:empty + .st-description { margin-top: var(--st-space-m) !important; }
.st-description:has(> p.st-product-line) { margin-top: 14px !important; }
.st-description p.st-product-line {
  font: 460 var(--st-fs-meta)/1.45 var(--st-sans);
  letter-spacing: .012em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--st-cream-soft);
}

/* ---- Product page: the plate. One 8:9 limestone frame like the shop tiles, held within the first screen on wide
   windows so the whole bottle stands beside the buy block. Bottles are contained; the one landscape shot is cropped
   to its bottle (the sides are empty stone; body classes from inc/woocommerce.php). The voucher graphics fill the
   plate. A click opens the photo in the lightbox. ---- */
.single-product .st-product .woocommerce-product-gallery__image-first {
  position: relative;
  aspect-ratio: 8 / 9;
  background-color: var(--st-plate) !important;
}
/* laid over the plate absolutely: Safari does not resolve height: 100% against a height that comes only from
   aspect-ratio (the photo fell back to its height attribute, 1707 px, and showed only the capsule) */
.single-product .st-product .woocommerce-product-gallery__image-first > a {
  display: block;
  position: absolute;
  inset: 0;
  cursor: zoom-in;
}
.single-product .st-product .woocommerce-product-gallery__image-first > a > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
@media (min-width: 960px) {
  .single-product .st-product .woocommerce-product-gallery__image-first {
    width: 100% !important;          /* a set width keeps the cap from narrowing the plate through its ratio */
    max-height: max(440px, calc(100svh - var(--st-header-h) - var(--st-space-l) - var(--st-space-m)));
  }
}
/* tablets: the plate spans the column but leaves the name and price in the first screen */
@media (min-width: 601px) and (max-width: 959px) {
  .single-product .st-product .woocommerce-product-gallery__image-first {
    width: 100% !important;
    max-height: 60svh;
  }
}
.st-packshot-wide .st-product .woocommerce-product-gallery__image-first > a > img { object-fit: cover; }
/* the frame is the plate, so the gallery around it stays the ground (its 18 px bottom margin showed a stone strip) */
.single-product .st-product .woocommerce-product-gallery,
.single-product .st-product .uncode-single-product-gallery {
  background-color: transparent !important;
}
.single-product .st-product .woocommerce-product-gallery__image-first { margin-bottom: 0 !important; }

/* ---- Related wines: the shop's tiles. "Weitere Weine" is a run-in head (h2.st-run, components.css): a section-size
   heading would outrank the wine's own name above it ---- */
.vc_row.st-related .uncode_text_column h2.st-run { margin-bottom: 0 !important; }
.vc_row.st-related .uncode_text_column + .owl-carousel-wrapper { margin-top: var(--st-gap) !important; }

/* ---- Shop pagination: small print on the grid's left edge, not Uncode's grey disc with arrows at the far ends.
   Numbers soft, the current page cream over a still gold line (the current page, like the main menu), a line drawn
   under the pointer. Every target is 44 px tall; the number's 18 px side padding makes it 44 px wide. ---- */
.grid-footer-inner:has(> ul.pagination) { text-align: left !important; }
ul.pagination {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
ul.pagination > li,
ul.pagination > li.page-prev,
ul.pagination > li.page-next {
  display: flex !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
ul.pagination > li > .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  scale: none !important;
  transform: none !important;
  color: var(--st-cream-soft) !important;
  transition: color var(--st-quick) var(--st-ease-settle);
}
ul.pagination > li > .btn > .page-numbers {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  background: none !important;
  border-radius: 0 !important;
  font: 460 var(--st-fs-ui)/1 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .012em;
  color: var(--st-cream-soft) !important;
  transition: color var(--st-quick) var(--st-ease-settle);
}
ul.pagination > li > .btn > .page-numbers::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 1px;
  background: var(--st-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--st-quick) var(--st-ease-settle);
}
ul.pagination > li > .btn > .page-numbers.current { color: var(--st-cream) !important; }
ul.pagination > li > .btn > .page-numbers.current::after { transform: none; }
ul.pagination > li > .btn > a.page-numbers:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) {
  ul.pagination > li > .btn > a.page-numbers:hover { color: var(--st-cream) !important; transition-timing-function: var(--st-ease); }
  ul.pagination > li > .btn > a.page-numbers:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--st-draw) var(--st-ease);
  }
  ul.pagination > li > a.btn:hover { color: var(--st-cream) !important; transition-timing-function: var(--st-ease); }
}
/* the arrows: plain marks set close to the numbers, the back arrow on the grid's edge; faint where there is no page */
ul.pagination > li.page-prev > .btn { justify-content: flex-start; }
ul.pagination > li.page-next > .btn { justify-content: flex-end; }
ul.pagination > li > .btn i {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  top: 0 !important;
}
ul.pagination > li > .btn i::before { vertical-align: middle !important; }
ul.pagination > li > span.btn-disable-hover { color: var(--st-cream-faint) !important; opacity: .45; }

/* ---- Shop filter: the grid dims evenly while new results load, and the new tiles fade in once (no stagger, no
   movement). body.uncode-loaded arrives after the first paint, so tiles on a freshly loaded page do not fade. ---- */
.grid-container { transition: opacity var(--st-quick) var(--st-ease-settle); }
.grid-filtering .grid-container {
  opacity: .45 !important;
  transition: opacity var(--st-quick) var(--st-ease);
}
@media (prefers-reduced-motion: no-preference) {
  body.uncode-loaded .grid-container .tmb { transition: opacity var(--st-exit) var(--st-ease); }
  @starting-style {
    body.uncode-loaded .grid-container .tmb { opacity: 0; }
  }
}

/* ---- Cart: the item row as four parts with air between them; money right-aligned in tabular figures ---- */
.woocommerce-cart-form .product-data .price-wrapper,
.woocommerce-cart-form .product-data .price-wrapper * {
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .012em;
  color: var(--st-cream-soft) !important;
}
.woocommerce-cart-form .product-data .price-wrapper { margin-top: 6px !important; }
.woocommerce-cart-form td.product-subtotal,
.woocommerce-cart-form td.product-subtotal * {
  font: 500 var(--st-fs-ui)/1.3 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .012em;
  color: var(--st-cream) !important;
}
.cart_totals td,
.cart_totals td .amount,
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot td {
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 768px) {
  .woocommerce-cart-form td.product-quantity {
    padding-left: var(--st-gap) !important;
    vertical-align: top;
  }
  .woocommerce-cart-form td.product-subtotal {
    min-width: 5.5em;
    padding-left: var(--st-gap) !important;
    text-align: right !important;
    white-space: nowrap;
  }
}
/* The stepper's number keeps its place from 9 to 10 */
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset input.qty {
  min-width: 2ch;
  text-align: center;
}
/* "Versandkosten berechnen" as a text link (st-more): Sofia, a cream line as long as the words, gold drawn on hover */
.cart_totals a.shipping-calculator-button {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  padding: 6px 0 !important;
  border: 0 !important;
  font: 480 var(--st-fs-meta)/1.3 var(--st-sans) !important;
  letter-spacing: .012em;
  color: var(--st-cream) !important;
  text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;
}
.cart_totals a.shipping-calculator-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--st-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--st-quick) var(--st-ease-settle);
}
.cart_totals a.shipping-calculator-button:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) {
  .cart_totals a.shipping-calculator-button:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--st-draw) var(--st-ease);
  }
}
@media (max-width: 959px), (pointer: coarse) {
  html body .cart_totals a.shipping-calculator-button {
    padding: 13px 0 !important;
    margin: -7px 0 -13px !important;
    background-position: left bottom 7px !important;
  }
  .cart_totals a.shipping-calculator-button::after { bottom: 7px; }
}

/* ---- Checkout: the order list says "× 1" after the name instead of a gold disc on the bottle ---- */
.woocommerce-checkout-review-order-table .product-item-thumb .product-quantity { display: none !important; }
.woocommerce-checkout-review-order-table .product-item-text {
  font-family: var(--st-serif) !important;
  font-size: var(--st-fs-ui) !important;     /* a summary list: one step under the cart's names */
  line-height: 1.3 !important;
  color: var(--st-cream) !important;
}
html body .woocommerce-checkout-review-order-table .product-item-text strong.product-quantity {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 .2em !important;
  border-radius: 0 !important;
  background: none !important;
  font: 460 var(--st-fs-meta)/1.3 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--st-cream-soft) !important;
  white-space: nowrap;
}
html body .woocommerce-checkout-review-order-table .product-item-text strong.product-quantity > span { display: inline !important; }
.woocommerce-checkout-review-order-table .product-item-thumb {
  flex: 0 0 56px;
  align-self: flex-start;
  width: 56px !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 18px 0 0 !important;
  background: var(--st-plate);
  line-height: 0;
}
.woocommerce-checkout-review-order-table .product-item-thumb img {
  display: block;
  width: 56px !important;
  height: auto !important;
  aspect-ratio: 8 / 9;
  object-fit: cover;          /* the 8:9 frame of the shop tiles; a landscape shot is cut to its bottle */
  mix-blend-mode: multiply;
}
.woocommerce-checkout .woocommerce-additional-fields { margin-top: var(--st-space-m) !important; }

/* ---- Contact Form 7: sending shows as a gold line under the button, not CF7's grey disc ---- */
.wpcf7 p:has(> .wpcf7-submit) {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-self: start;      /* a grid item in .st-fields: as wide as the button, not the form */
  width: auto !important;
  gap: 6px;
}
/* Uncode hides CF7's spinner outright (div.wpcf7 span.wpcf7-spinner, !important): this brings it back as the line */
html body div.wpcf7 form span.wpcf7-spinner {
  display: block !important;
  visibility: hidden;
  width: auto !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--st-gold) !important;
  opacity: 1 !important;
  transform-origin: left center;
}
html body div.wpcf7 form span.wpcf7-spinner::before { content: none !important; display: none !important; }
html body div.wpcf7 form.submitting span.wpcf7-spinner { visibility: visible; }
@keyframes st-sending {
  0% { transform: scaleX(0); transform-origin: left center; }
  50% { transform: scaleX(1); transform-origin: left center; }
  50.01% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@media (prefers-reduced-motion: no-preference) {
  html body div.wpcf7 form.submitting span.wpcf7-spinner { animation: st-sending 1.4s var(--st-ease-inout) infinite; }
}

/* ---- Cart after a quantity change: Uncode re-measures the cart module's inner row while WooCommerce swaps the
   table (with its loading overlay and notice still in place) and pins that height inline (+215 px at 1440): the
   page grew under the totals. The row takes its content's height. ---- */
.uncode-wc-module .wpb_row.row-inner { height: auto !important; }

/* ---- The stepper is a field like the others: the warm fill and a baseline, no frame ---- */
:is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset {
  background: var(--st-label-2) !important;
  border: 0 !important;
  border-bottom: 1px solid #8A7E70 !important;
  transition: border-color var(--st-quick) var(--st-ease-settle);
}
@media (hover: hover) {
  :is(.single-product form.cart, .woocommerce-cart-form) .quantity .qty-inset:hover { border-bottom-color: var(--st-cream-soft) !important; }
}

/* Checkout: fixed columns, so the shipping sentence below cannot widen the money column and squeeze the wine's
   name into four lines */
.woocommerce-checkout-review-order-table { table-layout: fixed; width: 100%; }
.woocommerce-checkout-review-order-table thead th.product-name { width: 62%; }
.woocommerce-checkout-review-order-table thead th.product-total { width: 38%; }
/* phones: the columns share the width by content (the shipping sentence needs its room), the photo is smaller */
@media (max-width: 600px) {
  .woocommerce-checkout-review-order-table { table-layout: auto; }
  .woocommerce-checkout-review-order-table thead :is(th.product-name, th.product-total) { width: auto; }
  .woocommerce-checkout-review-order-table .product-item-thumb {
    flex-basis: 40px;
    width: 40px !important;
    margin-right: 12px !important;
  }
  .woocommerce-checkout-review-order-table .product-item-thumb img { width: 40px !important; }
}
.woocommerce-checkout-review-order-table td.product-total { padding-left: var(--st-gap) !important; white-space: nowrap; }