/* =============================================================================
   WooCommerce — dark-mode-safe checkout, cart, account, and forms.
   WooCommerce ships white form controls by default; this remaps every field,
   table, tab and notice onto the Vault design tokens so light-on-light never
   happens in dark mode. Light mode falls back to WooCommerce's own styling
   where it already reads fine.
   ============================================================================= */

html[data-vault-mode="dark"] .woocommerce,
html[data-vault-mode="dark"] .woocommerce-page{ color:var(--vt-text); }

.vault-woo{ padding:20px 24px 90px; max-width:var(--vt-content-width,1240px); margin:0 auto; }

/* page.php wraps every normal page's content in .vault-entry, which the blog
   typography CSS caps at max-width:74ch (~750px) for readable article text.
   That same cap was squeezing the Cart/Checkout page (a plain WP page holding
   the WooCommerce block) down to a narrow column with huge empty space beside
   it. WooCommerce content should always use the full page width. */
body.woocommerce-checkout .vault-entry,
body.woocommerce-cart .vault-entry,
body.woocommerce-account .vault-entry,
body.woocommerce-page .vault-entry{ max-width:none !important; width:100%; }

/* Inputs, selects, textareas */
html[data-vault-mode="dark"] .woocommerce form .form-row input.input-text,
html[data-vault-mode="dark"] .woocommerce form .form-row textarea,
html[data-vault-mode="dark"] .woocommerce form .form-row select,
html[data-vault-mode="dark"] .woocommerce-checkout select,
html[data-vault-mode="dark"] .woocommerce table.shop_table input.input-text,
html[data-vault-mode="dark"] .select2-container .select2-selection--single{
	background:var(--vt-input,var(--vt-canvas)) !important; color:var(--vt-text) !important;
	border:1px solid var(--vt-line) !important; border-radius:10px !important; padding:12px 14px !important; height:auto !important;
}
html[data-vault-mode="dark"] .select2-container .select2-selection__rendered{ color:var(--vt-text) !important; line-height:2.4 !important; }
html[data-vault-mode="dark"] .select2-dropdown{ background:var(--vt-surface) !important; border-color:var(--vt-line) !important; }
html[data-vault-mode="dark"] .select2-results__option{ color:var(--vt-text) !important; }
html[data-vault-mode="dark"] .select2-results__option--highlighted{ background:var(--vt-accent) !important; color:var(--vt-accent-ink) !important; }
html[data-vault-mode="dark"] .woocommerce form .form-row input.input-text:focus,
html[data-vault-mode="dark"] .woocommerce form .form-row textarea:focus,
html[data-vault-mode="dark"] .woocommerce form .form-row select:focus{
	outline:none; border-color:var(--vt-accent-line) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--vt-accent) 16%,transparent) !important;
}
html[data-vault-mode="dark"] .woocommerce ::placeholder{ color:var(--vt-muted) !important; opacity:.8; }
html[data-vault-mode="dark"] .woocommerce label{ color:var(--vt-text) !important; }
html[data-vault-mode="dark"] .woocommerce .woocommerce-input-wrapper .required{ color:var(--vt-loss,#f87171); }

/* Section headings */
html[data-vault-mode="dark"] .woocommerce-billing-fields h3,
html[data-vault-mode="dark"] .woocommerce-additional-fields h3,
html[data-vault-mode="dark"] #order_review_heading{
	font:800 20px/1.2 var(--vt-font-head,inherit); color:var(--vt-text) !important; margin:0 0 18px;
}

/* Order review table + cart tables */
html[data-vault-mode="dark"] .woocommerce table.shop_table,
html[data-vault-mode="dark"] table#order_review{
	background:var(--vt-surface) !important; border:1px solid var(--vt-line) !important; border-radius:16px; overflow:hidden;
	border-collapse:separate; color:var(--vt-text) !important;
}
html[data-vault-mode="dark"] .woocommerce table.shop_table th,
html[data-vault-mode="dark"] .woocommerce table.shop_table td{ border-color:var(--vt-line) !important; color:var(--vt-text) !important; }
html[data-vault-mode="dark"] .woocommerce table.shop_table thead th{ background:var(--vt-raised) !important; }
html[data-vault-mode="dark"] .woocommerce table.shop_table tfoot th,
html[data-vault-mode="dark"] .woocommerce table.shop_table .order-total .amount{ color:var(--vt-accent) !important; }
html[data-vault-mode="dark"] .woocommerce-checkout-review-order-table .product-name,
html[data-vault-mode="dark"] .woocommerce-checkout-review-order-table .amount{ color:var(--vt-text) !important; }

/* Payment methods panel */
html[data-vault-mode="dark"] .woocommerce ul.wc_payment_methods{ list-style:none; margin:0; padding:0; }
html[data-vault-mode="dark"] .woocommerce ul.payment_methods li{
	background:var(--vt-raised) !important; border:1px solid var(--vt-line) !important; border-radius:12px !important;
	padding:14px 16px !important; margin-bottom:10px !important; color:var(--vt-text) !important;
}
html[data-vault-mode="dark"] .woocommerce ul.payment_methods li label{ color:var(--vt-text) !important; font-weight:700; }
html[data-vault-mode="dark"] .woocommerce ul.payment_methods .payment_box{
	background:color-mix(in srgb,var(--vt-canvas) 60%,transparent) !important; color:var(--vt-muted) !important;
	border-radius:10px !important; margin-top:10px !important; padding:14px !important;
}
html[data-vault-mode="dark"] .woocommerce ul.payment_methods .payment_box::before{ border-bottom-color:var(--vt-raised) !important; }
/* Any gateway iframe (Stripe/PayPal) gets a white card so its internal chrome stays legible */
html[data-vault-mode="dark"] .woocommerce ul.payment_methods .payment_box iframe{ border-radius:8px; }
html[data-vault-mode="dark"] .woocommerce #payment .payment_box p{ color:var(--vt-muted) !important; }

/* Buttons */
html[data-vault-mode="dark"] .woocommerce #place_order,
html[data-vault-mode="dark"] .woocommerce a.button,
html[data-vault-mode="dark"] .woocommerce button.button,
html[data-vault-mode="dark"] .woocommerce input.button{
	background:linear-gradient(135deg,var(--vt-accent),var(--vt-accent-2)) !important; color:var(--vt-accent-ink) !important;
	border:none !important; border-radius:11px !important; font-weight:800 !important; letter-spacing:.02em; padding:14px 24px !important;
	text-transform:uppercase; font-size:13px !important;
}
html[data-vault-mode="dark"] .woocommerce a.button.alt{ background:var(--vt-accent) !important; }

/* Order summary sidebar (checkout blocks / classic) */
html[data-vault-mode="dark"] .woocommerce-checkout #order_review,
html[data-vault-mode="dark"] .wc-block-components-sidebar{ background:var(--vt-surface) !important; border-radius:16px; padding:22px !important; border:1px solid var(--vt-line); }

/* Coupon / login / info boxes */
html[data-vault-mode="dark"] .woocommerce-info,
html[data-vault-mode="dark"] .woocommerce-message,
html[data-vault-mode="dark"] .woocommerce-error,
html[data-vault-mode="dark"] .woocommerce-noreviews{
	background:var(--vt-surface) !important; border-top-color:var(--vt-accent) !important; color:var(--vt-text) !important; border-radius:12px;
}
html[data-vault-mode="dark"] .woocommerce-form-coupon{ background:var(--vt-raised) !important; border:1px solid var(--vt-line) !important; border-radius:14px !important; padding:18px !important; }

/* My Account: nav + dashboard tables */
html[data-vault-mode="dark"] .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; background:var(--vt-surface); border:1px solid var(--vt-line); border-radius:14px; overflow:hidden; }
html[data-vault-mode="dark"] .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--vt-line); }
html[data-vault-mode="dark"] .woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
html[data-vault-mode="dark"] .woocommerce-MyAccount-navigation li a{ display:block; padding:13px 18px; color:var(--vt-muted); text-decoration:none; }
html[data-vault-mode="dark"] .woocommerce-MyAccount-navigation li.is-active a,
html[data-vault-mode="dark"] .woocommerce-MyAccount-navigation li a:hover{ background:var(--vt-raised); color:var(--vt-accent); }
html[data-vault-mode="dark"] .woocommerce-MyAccount-content{ color:var(--vt-text); }
html[data-vault-mode="dark"] .woocommerce-MyAccount-content table{ color:var(--vt-text); }

/* Checkbox / radio accents */
html[data-vault-mode="dark"] .woocommerce input[type="checkbox"],
html[data-vault-mode="dark"] .woocommerce input[type="radio"]{ accent-color:var(--vt-accent); width:16px; height:16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   WOOCOMMERCE BLOCKS — Cart & Checkout (Gutenberg blocks, different markup
   entirely from the classic shortcode checkout styled above). This is what
   renders when WooCommerce → Settings → Advanced uses the block-based
   Cart/Checkout pages (the modern default since WC 8+).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full page width — Gutenberg gives top-level blocks an inline
   `style="max-width:...”" from its default content-size custom property.
   Inline styles beat an external stylesheet unless we use !important, which
   is why the block was still rendering narrow with empty space beside it. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{
	width:100% !important; max-width:var(--vt-content-width,1240px) !important; margin:0 auto !important; padding:20px 24px 90px;
}
.wc-block-checkout__main,.wc-block-cart__main{ width:100% !important; max-width:none !important; }
.wc-block-checkout__sidebar,.wc-block-cart__sidebar{ width:100% !important; max-width:none !important; }
@media (min-width:900px){
	.wp-block-woocommerce-checkout .wc-block-checkout__main{ float:none; }
	/* Confirmed from the actual rendered markup: the true two-column parent is
	   `.wc-block-components-sidebar-layout` — it directly wraps BOTH
	   `.wc-block-checkout__main` (the form) and `.wc-block-checkout__sidebar`
	   as siblings. Earlier attempts targeted the form itself or the outer
	   `.wp-block-woocommerce-checkout` wrapper, neither of which is the actual
	   flex/grid parent of the two columns — that's why the sidebar kept
	   stacking underneath instead of sitting beside the form. */
	.wc-block-components-sidebar-layout{
		display:grid !important; grid-template-columns:1.5fr 1fr !important; gap:56px !important; align-items:start !important;
	}
	/* WooCommerce also renders a second "order summary" INSIDE the form, right
	   above Place Order — a mobile-only fallback for when the sidebar is
	   hidden. On desktop, the real sidebar (marked .is-sticky) is what should
	   show; hide the in-form duplicate so it doesn't ALSO render, stacked
	   under everything, which is what "order summary at the bottom" was. */
	.wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper{
		display:none !important;
	}
}

html[data-vault-mode="dark"] .wc-block-checkout,
html[data-vault-mode="dark"] .wc-block-cart,
html[data-vault-mode="dark"] .wp-block-woocommerce-checkout,
html[data-vault-mode="dark"] .wp-block-woocommerce-cart{ color:var(--vt-text); }

/* Country/State <select> wrapper ships an opaque white background by default,
   which is why those dropdowns still looked like light boxes even after the
   <select> itself was themed. Make the wrapper transparent so only our
   dark input styling underneath shows through. */
.wc-blocks-components-select .wc-blocks-components-select__container{ background:transparent !important; }

/* The order-summary block's own default border duplicated the card border we
   already draw on .wc-block-checkout__sidebar, producing a double-line edge. */
.wp-block-woocommerce-checkout-order-summary-block{ border:none !important; }

/* Sticky order summary on desktop — stays in view while filling out the form. */
@media (min-width:900px){
	.wc-block-checkout__sidebar.is-sticky{ position:sticky !important; top:24px; align-self:start; }
}

html[data-vault-mode="dark"] .wc-block-components-text-input input,
html[data-vault-mode="dark"] .wc-block-components-text-input textarea,
html[data-vault-mode="dark"] .wc-block-components-address-form select,
html[data-vault-mode="dark"] .wc-block-checkout__form select,
html[data-vault-mode="dark"] .wc-blocks-components-select select,
html[data-vault-mode="dark"] .wc-block-components-combobox input{
	background:var(--vt-input,var(--vt-canvas)) !important; color:var(--vt-text) !important;
	border:1px solid var(--vt-line) !important; border-radius:10px !important;
}
html[data-vault-mode="dark"] .wc-block-components-text-input label,
html[data-vault-mode="dark"] .wc-blocks-components-select__label{ color:var(--vt-muted) !important; }
html[data-vault-mode="dark"] .wc-block-components-text-input input:focus,
html[data-vault-mode="dark"] .wc-block-components-address-form select:focus{
	outline:none; border-color:var(--vt-accent-line) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--vt-accent) 16%,transparent) !important;
}
/* Field labels sit ON the border by default (floating label); give them the surface bg */
html[data-vault-mode="dark"] .wc-block-components-text-input.is-active label,
html[data-vault-mode="dark"] .wc-block-components-text-input label{ background:transparent !important; }

/* Order-summary sidebar — ONE unified card, not a stack of separately bordered
   boxes. Each sub-panel (items, coupon, totals) previously got its own
   background + border + radius, and since they nest inside one another that
   produced the "boxes within boxes" look with visible seams between every
   line. Now only the outer sidebar is a card; everything inside it is flat,
   separated with a plain top divider instead of a full border. */
html[data-vault-mode="dark"] .wc-block-checkout__sidebar,
html[data-vault-mode="dark"] .wc-block-cart__sidebar{
	background:var(--vt-surface) !important; border:1px solid var(--vt-line) !important; border-radius:16px !important;
	padding:22px !important; color:var(--vt-text) !important;
}
html[data-vault-mode="dark"] .wc-block-checkout__sidebar .wc-block-components-panel,
html[data-vault-mode="dark"] .wc-block-checkout__sidebar .wc-block-components-order-summary,
html[data-vault-mode="dark"] .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
html[data-vault-mode="dark"] .wc-block-cart__sidebar .wc-block-components-panel,
html[data-vault-mode="dark"] .wc-block-cart__sidebar .wc-block-components-totals-wrapper{
	background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
	color:var(--vt-text) !important; padding-left:0 !important; padding-right:0 !important;
}
html[data-vault-mode="dark"] .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
html[data-vault-mode="dark"] .wc-block-checkout__sidebar .wc-block-components-totals-item{
	border-top:1px solid var(--vt-line) !important; padding-top:14px !important; margin-top:14px !important;
}
/* Contact-info / address panels in the MAIN column keep the card treatment —
   those aren't nested inside another card, so no double-border risk there. */
html[data-vault-mode="dark"] .wc-block-checkout__main .wc-block-components-panel,
html[data-vault-mode="dark"] .wc-block-checkout__main .wc-block-components-form{
	background:var(--vt-surface) !important; border:1px solid var(--vt-line) !important; border-radius:16px !important;
	padding:20px !important; color:var(--vt-text) !important;
}
html[data-vault-mode="dark"] .wc-block-components-order-summary-item__description,
html[data-vault-mode="dark"] .wc-block-components-order-summary-item__quantity,
html[data-vault-mode="dark"] .wc-block-components-totals-item__label,
html[data-vault-mode="dark"] .wc-block-components-totals-item__value{ color:var(--vt-text) !important; }
html[data-vault-mode="dark"] .wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount{ color:var(--vt-accent) !important; }

/* Payment method radio cards */
html[data-vault-mode="dark"] .wc-block-components-radio-control__option{
	background:var(--vt-raised) !important; border:1px solid var(--vt-line) !important; border-radius:12px !important; color:var(--vt-text) !important;
}
html[data-vault-mode="dark"] .wc-block-components-radio-control__option--checked-option{ border-color:var(--vt-accent-line) !important; }
html[data-vault-mode="dark"] .wc-block-components-payment-method-label{ color:var(--vt-text) !important; }
html[data-vault-mode="dark"] .wc-block-components-payment-method-icons{ opacity:.9; }
/* Any gateway iframe (Stripe/PayPal card element) gets a plain white frame so
   its internal fields stay legible — same treatment as the classic checkout. */
html[data-vault-mode="dark"] .wc-block-components-payment-method-content{
	background:#fff; border-radius:10px; padding:14px; margin-top:8px; color:#1b1d25 !important;
}

/* Buttons */
html[data-vault-mode="dark"] .wc-block-components-checkout-place-order-button,
html[data-vault-mode="dark"] .wc-block-cart__submit-button,
html[data-vault-mode="dark"] .wp-block-woocommerce-proceed-to-checkout-block a{
	background:linear-gradient(135deg,var(--vt-accent),var(--vt-accent-2)) !important; color:var(--vt-accent-ink) !important;
	border:none !important; border-radius:11px !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.02em;
}

/* Coupon / notices / errors */
html[data-vault-mode="dark"] .wc-block-components-notice-banner,
html[data-vault-mode="dark"] .wc-block-components-validation-error{
	background:var(--vt-surface) !important; border-color:var(--vt-line) !important; color:var(--vt-text) !important; border-radius:12px;
}
html[data-vault-mode="dark"] .wc-block-components-totals-coupon input{ background:var(--vt-input,var(--vt-canvas)) !important; color:var(--vt-text) !important; border-color:var(--vt-line) !important; }

@media (max-width:900px){
	.wc-block-components-sidebar-layout{ display:block !important; }
	.wc-block-checkout__sidebar,.wc-block-cart__sidebar{ margin-top:24px; }
}