/*
 * Cart + Checkout — on-brand styling to the design tokens. The prototype has no
 * dedicated cart/checkout page (cart is a drawer), so this applies the system:
 * sharp corners, hairline inputs, Brauer headings, emphasis primary buttons,
 * yellow accents. Covers both classic (shortcode) and block-based WC markup.
 */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account { background: var(--sisa-bg-archive); }

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1, .woocommerce-checkout h1 {
	font-family: var(--sisa-display); font-weight: 700;
}

/* ---------- Classic cart table ---------- */
.woocommerce table.shop_table {
	border: 1px solid var(--sisa-hairline); border-radius: 0; background: var(--sisa-panel);
}
.woocommerce table.shop_table th {
	font-family: var(--sisa-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sisa-text-2);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--sisa-hairline); }
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout h3,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	font-family: var(--sisa-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.4px; color: var(--sisa-ink); margin-bottom: 16px;
}
/* Emphasize the order TOTAL row over subtotal/shipping */
.woocommerce-checkout .shop_table tr.order-total th,
.woocommerce-checkout .shop_table tr.order-total td,
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
	font-family: var(--sisa-display); font-weight: 700; font-size: 16px; color: var(--sisa-ink); text-transform: none;
}
/* Required/optional markers — muted, not alarm-red */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required { color: var(--sisa-text-3); border: 0; text-decoration: none; }
.woocommerce form .form-row .optional { color: var(--sisa-text-3); }

/* ---------- Inputs (classic) ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	border: 1px solid var(--sisa-hairline) !important; border-radius: 0 !important;
	background: var(--sisa-bg-input); min-height: 48px; padding: 0 14px; font-size: 14px; color: var(--sisa-ink);
}
.woocommerce form .form-row textarea { padding: 12px 14px; }
.woocommerce form .form-row label { font-size: 13px; color: var(--sisa-text-1); font-weight: 500; }

/* ---------- Buttons (classic) ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #place_order, .woocommerce .checkout-button {
	border-radius: 0 !important;
	font-family: var(--sisa-body); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px;
}
/* Primary conversion CTAs (proceed-to-checkout, place order) = YELLOW — design
   system reserves yellow for cart/conversion (page-system §04, btnPrimary), and
   it matches the yellow mini-cart "Kasse" + card add-to-cart. */
.woocommerce .checkout-button, .woocommerce #place_order,
.woocommerce button.button.alt {
	background: var(--sisa-yellow) !important; color: var(--sisa-yellow-ink) !important;
	border: 1px solid var(--sisa-yellow) !important; padding: 16px 32px !important;
}
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover, .woocommerce button.button.alt:hover { filter: brightness(.96); color: var(--sisa-yellow-ink) !important; }
/* Secondary actions (apply coupon, update cart) = ghost (white + ink + hairline) */
.woocommerce .cart .button, .woocommerce .actions .button {
	background: var(--sisa-panel); color: var(--sisa-ink); border: 1px solid var(--sisa-hairline);
}
.woocommerce .cart .button:hover, .woocommerce .actions .button:hover {
	background: var(--sisa-emphasis); color: var(--sisa-on-emphasis); border-color: var(--sisa-emphasis);
}
.woocommerce .actions .button[disabled], .woocommerce .actions .button:disabled { opacity: .45; cursor: not-allowed; }
/* Coupon row */
.woocommerce .coupon input.input-text { min-height: 48px; }

/* ---------- Quantity stepper (Blocksy renders .quantity + .ct-increase/.ct-decrease) ---------- */
.woocommerce table.cart td.product-quantity .quantity,
.woocommerce .cart .quantity {
	display: inline-flex; align-items: stretch; height: 48px; width: 132px;
	border: 1px solid var(--sisa-hairline); background: var(--sisa-panel);
}
.woocommerce .cart .quantity input.qty,
.woocommerce .cart .quantity input[type="number"] {
	border: 0 !important; border-radius: 0 !important; --theme-form-field-border-radius: 0 !important;
	flex: 1 1 auto; width: 100%; min-width: 0; text-align: center; background: transparent;
	font-family: var(--sisa-body); font-weight: 600; font-size: 15px; color: var(--sisa-ink); font-variant-numeric: tabular-nums;
}
.woocommerce .cart .quantity .ct-increase,
.woocommerce .cart .quantity .ct-decrease { border-radius: 0 !important; }

/* ---------- Solid (not dashed) table dividers — override Blocksy's tr variables ---------- */
.woocommerce table.shop_table tr {
	--theme-table-border-style: solid;
	--theme-table-border-color: var(--sisa-hairline);
}

/* ---------- Input focus (highest-traffic form) ---------- */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .select2-container--focus .select2-selection,
.woocommerce .select2-container--open .select2-selection {
	outline: 0; border-color: var(--sisa-ink) !important; box-shadow: none;
}

/* ---------- Native select chevron (design SVG) ---------- */
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 32px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23676562' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center;
}
.woocommerce .select2-container .select2-selection__arrow { display: none; }

/* ---------- Checkout column panels (classic shortcode) ---------- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	background: var(--sisa-panel); border: 1px solid var(--sisa-hairline); border-radius: 0;
	padding: 28px; box-sizing: border-box;
}
/* the order table already lives inside the #order_review panel → drop its own box */
.woocommerce-checkout #order_review table.shop_table { border: 0; }
/* payment sits inside the #order_review panel → divider, not a second box */
.woocommerce-checkout #payment { background: transparent; border: 0; border-top: 1px solid var(--sisa-hairline); border-radius: 0; margin-top: 8px; }
.woocommerce-checkout #payment ul.wc_payment_methods { border: 0; border-bottom: 1px solid var(--sisa-hairline); padding: 16px 0; margin: 0; }
.woocommerce-checkout #payment div.payment_box { background: var(--sisa-bg-input); border-radius: 0; font-size: 13px; color: var(--sisa-text-1); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 16px 0 0; }

/* ---------- Block cart / checkout ---------- */
.wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button {
	border-radius: 0 !important;
	font-family: var(--sisa-body); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
	background: var(--sisa-emphasis) !important; color: var(--sisa-on-emphasis) !important;
}
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__container {
	border-radius: 0 !important; border-color: var(--sisa-hairline) !important; background: var(--sisa-bg-input);
}
.wc-block-cart-items__header,
.wc-block-components-totals-item { font-family: var(--sisa-body); }
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wc-block-components-title { font-family: var(--sisa-display); }
.wc-block-components-totals-coupon__button { background: var(--sisa-emphasis) !important; }
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: var(--sisa-panel); border: 1px solid var(--sisa-hairline); border-radius: 0;
}

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: 0; border-top: 3px solid var(--sisa-yellow);
}
.woocommerce-message { border-top-color: var(--sisa-stock-ok); }

/* ---------- Page title (audit: cart/checkout opened with dead grey space) ----------
   layout.css re-shows Blocksy's hero H1 on cart+checkout; style it to the system
   (Brauer display, sharp, flush with the container). */
.woocommerce-cart .hero-section,
.woocommerce-checkout .hero-section { padding: 28px 0 0; background: transparent; }
.woocommerce-cart .hero-section .page-title,
.woocommerce-checkout .hero-section .page-title {
	font-family: var(--sisa-display, "Brauer LL", serif); font-weight: 700;
	font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -.6px;
	color: var(--sisa-ink, #1a1a1a);
}

/* ---------- Table edge padding (audit: content flush against the panel hairline) ----------
   Blocksy zeroes first/last cell inline padding for borderless tables; our shop
   tables are bordered panels, so content needs breathing room at the edges. */
.woocommerce-page table.shop_table tr > *:first-child { padding-inline-start: 20px; }
.woocommerce-page table.shop_table tr > *:last-child { padding-inline-end: 20px; }

/* ---------- Cart totals = ONE design-system panel (audit: double-boxed, 2px border) ---------- */
.woocommerce .cart_totals,
.woocommerce-cart .cart_totals {
	background: var(--sisa-panel, #fff);
	border: 1px solid var(--sisa-hairline, #eceae3) !important;
	--cart-totals-border: 0px;
	padding: 24px 28px;
}
.woocommerce .cart_totals table.shop_table { border: 0 !important; background: none; }
.woocommerce .cart_totals table.shop_table tr > * { padding-inline: 0; }
.woocommerce .cart_totals h2 {
	margin: 0 0 14px; font-family: var(--sisa-display, "Brauer LL", serif);
	font-weight: 700; font-size: 22px; letter-spacing: -.3px; color: var(--sisa-ink, #1a1a1a);
}

/* ============================================================
   Checkout cleanup pass (design-audit) — one panel per column,
   brand notices, visible controls, sticky summary, trust row.
   ============================================================ */

/* Order review: Blocksy's .ct-order-review wrapper drew its own 2px box AROUND
   our #order_review panel (double-boxed, off-brand 2px stroke, heading outside).
   Make the WRAPPER the one panel; unbox the inner div. */
.woocommerce-checkout .ct-order-review {
	background: var(--sisa-panel);
	--order-review-border: 1px solid var(--sisa-hairline);
	--order-review-padding: 28px;
}
.woocommerce-checkout .ct-order-review #order_review { background: transparent; border: 0; padding: 0; }

/* Notices: Blocksy paints them via variables — override the variable + kill the
   radius at higher specificity (cool blue-grey #F0F1F3 → warm brand input bg). */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-form-login-toggle .woocommerce-info {
	border-radius: 0 !important;
	--background-color: var(--sisa-bg-input);
	background-color: var(--sisa-bg-input);
}

/* Login toggle: keep the link next to the question and make it read as a link. */
.woocommerce-form-login-toggle .woocommerce-info { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.woocommerce-form-login-toggle .woocommerce-info a.showlogin {
	font-weight: 600; color: var(--sisa-ink); text-decoration: none;
	border-bottom: 2px solid var(--sisa-yellow); padding-bottom: 1px;
}

/* Unselected radios/checkboxes were ~1.3:1 ghost rings (WCAG 1.4.11 fail) on the
   highest-stakes form — give them a readable boundary. */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
	--theme-form-field-border-initial-color: var(--sisa-text-2);
	border-color: var(--sisa-text-2);
}

/* Terms (AGB) checkbox: flex label = hanging indent stays aligned when the text
   wraps; 20px box + padded row ≈ a real touch target. */
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* Keep the money summary in sight on desktop. */
@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout { align-items: flex-start; }
	.woocommerce-checkout .ct-order-review { position: sticky; top: calc(var(--header-height, 100px) + 24px); }
}

/* PLZ + Ort (and Telefon + E-Mail) share a row via functions/commerce/checkout.php. */

/* Review items: product thumbnail (mini-cart pattern) for recognition/trust. */
.woocommerce-checkout-review-order-table .product-name img {
	width: 48px; height: 48px; object-fit: contain; background: var(--sisa-bg-card);
	margin-right: 12px; vertical-align: middle; display: inline-block;
}

/* Mobile compact cost strip above the form (output by checkout.php). */
.sisa-co-strip {
	display: none; margin: 0 0 16px; padding: 12px 16px;
	background: var(--sisa-panel); border: 1px solid var(--sisa-hairline);
	font-family: var(--sisa-mono); font-size: 11px; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--sisa-text-2);
}
.sisa-co-strip b { color: var(--sisa-ink); font-weight: 700; }
@media (max-width: 999px) { .sisa-co-strip { display: block; } }

/* Trust micro-row under the place-order CTA (output by checkout.php). */
.sisa-co-trust {
	margin: 14px 0 0; display: flex; align-items: center; gap: 8px;
	font-family: var(--sisa-mono); font-size: 10.5px; letter-spacing: 1.1px;
	text-transform: uppercase; color: var(--sisa-text-2); line-height: 1.6;
}
.sisa-co-trust svg { flex: none; width: 13px; height: 13px; }