/* Restyles WooCommerce's default markup (shop, single product, cart,
   checkout, my account) to match the Sylva brand, without needing to
   override every template file. Loaded after style.build.css. */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--radius-lg, 0.9rem);
	background: var(--secondary);
	color: var(--secondary-foreground);
	font-size: 0.9rem;
}
.woocommerce-error { background: #fbeaea; color: #7a2020; }
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before { display: none; }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button { margin-left: auto; }

/* Buttons — selectors mirror WooCommerce core's own specificity
   (.woocommerce + element + 2 classes) so these win the cascade instead of
   the plugin's default purple theme, regardless of enqueue order. */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce a.button.button,
.woocommerce button.button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce a.add_to_cart_button,
.woocommerce a.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 2.75rem;
	padding: 0 1.25rem;
	border-radius: 0.5rem;
	background: var(--primary) !important;
	color: var(--primary-foreground) !important;
	font-weight: 500;
	font-size: 0.95rem;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
	text-decoration: none !important;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.single_add_to_cart_button:hover { background: color-mix(in oklch, var(--primary), white 15%) !important; }
.button:active { transform: translateY(1px); }
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.checkout-button,
.woocommerce a.checkout-button,
.woocommerce #place_order {
	background: var(--gold) !important;
	color: var(--gold-foreground) !important;
}
.button.alt:hover,
.checkout-button:hover,
.woocommerce #place_order:hover { background: color-mix(in oklch, var(--gold), white 15%) !important; }
.button.disabled,
.button:disabled { opacity: 0.5; pointer-events: none; }

/* WooCommerce marks the main "add to cart" button with .alt too — keep it
   green (consistent with every other add-to-cart button) and reserve gold
   for checkout/promotional actions specifically. */
.woocommerce a.single_add_to_cart_button.button.alt,
.woocommerce button.single_add_to_cart_button.button.alt {
	background: var(--primary) !important;
	color: var(--primary-foreground) !important;
}
.woocommerce a.single_add_to_cart_button.button.alt:hover,
.woocommerce button.single_add_to_cart_button.button.alt:hover {
	background: color-mix(in oklch, var(--primary), white 15%) !important;
}

/* Compact "In den Warenkorb" button used inside product cards (loop) — kept
   as a quiet outline action so the gold "Bestellen" buy-now button below
   reads as the one clear primary CTA per card. */
.product-card .product-card-cta a.button.button {
	height: 2.75rem !important;
	padding: 0 0.9rem !important;
	font-size: 0.85rem !important;
	white-space: nowrap;
	width: 100%;
	background: transparent !important;
	color: var(--foreground) !important;
	border: 1px solid var(--border) !important;
	box-shadow: none !important;
}
.product-card .product-card-cta a.button.button:hover {
	background: var(--secondary) !important;
	border-color: color-mix(in oklch, var(--border), var(--foreground) 15%) !important;
}

/* "Bestellen" buy-now link on product cards — direct to checkout, gold to
   match the single product page's buy-now button; the card's primary CTA. */
.product-card-buy-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.75rem;
	padding: 0 1.1rem;
	border-radius: 0.5rem;
	background: var(--gold);
	color: var(--gold-foreground);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.product-card-buy-now:hover { background: color-mix(in oklch, var(--gold), white 15%); }
.product-card-buy-now:active { transform: translateY(1px); }

/* Price */
.woocommerce-Price-amount { font-weight: 500; color: var(--foreground); font-family: var(--font-heading); }
del .woocommerce-Price-amount { color: var(--muted-foreground); font-weight: 400; opacity: 0.8; }
ins { text-decoration: none; }

/* Shop toolbar (category filter + sort) */
.sylva-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-bottom: 2rem;
}
.sylva-toolbar-select,
.woocommerce-ordering select.orderby {
	height: 2.5rem;
	padding: 0 2rem 0 0.9rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border);
	background-color: var(--background);
	color: var(--foreground);
	font-size: 0.85rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C6656' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 14px 14px;
	cursor: pointer;
}
.sylva-toolbar-select:focus,
.woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 85%);
}

/* Shop loop grid */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
@media (min-width: 640px) { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
/* woocommerce-layout.css's float-clearfix adds ::before/::after with a real
   " " content value — in a grid container that content makes them generate
   actual grid items, eating the first cell and shifting every real product
   over by one slot. Kill them so the grid starts with product #1. */
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
.woocommerce-pagination { margin-top: 3rem; text-align: center; }
.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 0.35rem;
	list-style: none;
	padding: 0;
}
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border);
	color: var(--foreground);
	text-decoration: none;
	font-size: 0.85rem;
}
.woocommerce-pagination .page-numbers.current { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* Single product */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin-bottom: 3rem;
}
@media (min-width: 1024px) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related.products,
	.woocommerce div.product .upsells.products { grid-column: 1 / -1; }
}
/* Neutralise le layout par flottants hérité de woocommerce-layout.css
   (div.images / div.summary en width:48%) : notre grille gère déjà les 2 colonnes. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none;
	width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--radius-lg, 0.9rem);
	overflow: hidden;
	background: linear-gradient(to bottom right, var(--forest-800), var(--forest-950));
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-lg, 0.9rem); }
/* Miniatures : répartir la largeur sur le nombre réel de photos au lieu des
   25 % fixes de WooCommerce (pensés pour 4 miniatures), qui laissent un
   bandeau vide quand un produit a moins de 4 photos. */
.woocommerce div.product .flex-control-thumbs { display: flex; overflow: visible; }
.woocommerce div.product .flex-control-thumbs li { width: auto; flex: 1 1 0; }
.woocommerce div.product .product_title {
	font-family: var(--font-heading);
	font-size: 1.9rem;
	font-weight: 500;
	color: var(--foreground);
	margin: 0 0 0.5rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: 1.4rem; margin-bottom: 1rem; display: block; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted-foreground); line-height: 1.6; margin-bottom: 1.25rem; }
.woocommerce div.product form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.woocommerce div.product .quantity { display: inline-flex; }
.woocommerce div.product .quantity .qty {
	width: 4.5rem;
	height: 2.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border);
	background: var(--background);
	padding: 0 0.75rem;
	font-size: 0.95rem;
}
.sylva-free-shipping {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--forest-800);
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
.sylva-free-shipping svg { flex-shrink: 0; }
.woocommerce-tabs { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.woocommerce-tabs ul.tabs { display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.woocommerce-tabs ul.tabs li a { color: var(--muted-foreground); text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.woocommerce-tabs ul.tabs li.active a { color: var(--forest-800); }
.woocommerce-tabs .panel { color: var(--muted-foreground); line-height: 1.7; }
.related.products { margin-top: 3rem; }
.related.products > h2 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 1.25rem; }

/* Cart */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 0.9rem);
	overflow: hidden;
	margin-bottom: 2rem;
}
.woocommerce table.shop_table th { text-align: left; background: var(--secondary); color: var(--secondary-foreground); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.9rem 1rem; }
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.woocommerce table.shop_table img { border-radius: 0.5rem; }
.woocommerce .cart-collaterals .cart_totals { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg, 0.9rem); padding: 1.5rem; }
.woocommerce .cart_totals h2 { font-family: var(--font-heading); font-size: 1.3rem; margin: 0 0 1rem; }
.woocommerce .cart_totals table td, .woocommerce .cart_totals table th { border-top: 1px solid var(--border); }
#coupon_code { height: 2.75rem; border-radius: 0.5rem; border: 1px solid var(--border); padding: 0 0.85rem; }

/* Checkout */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
/* Same clearfix-vs-grid bug as ul.products: woocommerce-layout.css's
   .col2-set::before/::after clearfix has a real " " content value, which
   turns them into actual grid items and shifts .col-1/.col-2 over by one
   slot whenever a .col2-set is grid-ified (order confirmation addresses,
   checkout customer details). */
.col2-set::before,
.col2-set::after { content: none !important; display: none !important; }
.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--foreground); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%;
	height: 2.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border);
	background: var(--background);
	padding: 0 0.85rem;
	font-size: 0.95rem;
}
.woocommerce form .form-row textarea { height: auto; padding: 0.75rem 0.85rem; }
#order_review { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg, 0.9rem); padding: 1.5rem; }
#order_review_heading { font-family: var(--font-heading); font-size: 1.3rem; }

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: 0.5rem;
	color: var(--foreground);
	text-decoration: none;
	font-size: 0.9rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--secondary); }
.woocommerce-account .addresses .title h3 { font-family: var(--font-heading); }

/* Star rating */
.star-rating { color: var(--gold); }
.star-rating span::before { color: var(--gold); }

/* ==========================================================================
   Checkout — WooCommerce Checkout block (Cart & Checkout blocks), the one
   actually used by the "checkout" page. Class names come from WooCommerce
   11.x's compiled checkout.css; several rules need !important to beat
   equally- or more-specific selectors already shipped in that stylesheet.
   ========================================================================== */

.wc-block-components-sidebar-layout { gap: 2rem 2.5rem; align-items: flex-start; }
/* Both columns' flex-grow already sizes them to sum to exactly 100% of the
   container, so the gap above has no slack to fit into — without this fix
   main+sidebar overflow by the gap's width and the sidebar wraps onto its
   own row below the form instead of sitting beside it. Forcing explicit
   widths (only in the row layout, scoped via WC's own is-large/is-medium
   state classes — at is-mobile it's a stacked column and must stay 100%)
   leaves deliberate room for the gap instead of relying on flex-shrink,
   which left both columns at their content width regardless of gap. */
.wc-block-components-sidebar-layout.is-large .wc-block-checkout__main,
.wc-block-components-sidebar-layout.is-medium .wc-block-checkout__main {
	width: 60%;
	max-width: 60%;
}
.wc-block-components-sidebar-layout.is-large .wc-block-checkout__sidebar,
.wc-block-components-sidebar-layout.is-medium .wc-block-checkout__sidebar {
	width: 32%;
	max-width: 32%;
}

/* Each step (Coordonnées, Adresse, Livraison, Paiement…) as its own card,
   numbered via a CSS counter — no block markup changes needed. */
.wc-block-checkout__form { counter-reset: sylva-checkout-step; }
.wc-block-components-checkout-step {
	counter-increment: sylva-checkout-step;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 0.9rem);
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}
.wc-block-components-checkout-step__heading-container { margin-bottom: 1.25rem; }
.wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--foreground);
}
.wc-block-components-checkout-step__title::before {
	content: counter(sylva-checkout-step, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 9999px;
	background: var(--forest-800);
	color: var(--primary-foreground);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 600;
}

/* Text inputs / selects — keep WC's floating-label behaviour, only reskin colour & radius. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select__select {
	border-radius: 0.6rem !important;
	border-color: var(--border) !important;
	background-color: var(--background) !important;
	color: var(--foreground) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 85%) !important;
}
.wc-block-components-text-input label { color: var(--muted-foreground) !important; }
.wc-blocks-components-select__label { color: var(--muted-foreground) !important; }

/* Checkbox */
.wc-block-components-checkbox__input[type="checkbox"] { border-radius: 0.3rem !important; border-color: var(--border) !important; }
.wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--primary) !important; border-color: var(--primary) !important; }
.wc-block-components-checkbox__mark { fill: var(--primary-foreground) !important; }

/* Shipping / payment method options as selectable cards. */
.wc-block-components-radio-control__option {
	border: 1.5px solid var(--border) !important;
	border-radius: var(--radius-md, 0.7rem) !important;
	margin-bottom: 0.6rem !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wc-block-components-radio-control__option:after { content: none !important; }
.wc-block-components-radio-control__option:hover { border-color: var(--forest-600) !important; }
.wc-block-components-radio-control__option-checked { border-color: var(--primary) !important; background: var(--forest-50) !important; }
.wc-block-components-radio-control__input { border-color: var(--border) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--primary) !important; }
.wc-block-components-radio-control__input:checked:before { background: var(--primary) !important; }
.wc-block-checkout__shipping-option--free {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	background: var(--forest-100);
	color: var(--forest-800);
	padding: 0.1rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
}

/* Coupon accordion trigger */
.wc-block-components-panel__button { color: var(--forest-800) !important; font-weight: 500; }

/* Order summary sidebar, as one sticky card. */
.wc-block-checkout__sidebar {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 0.9rem);
	padding: 1.5rem;
}
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-checkout-order-summary__title { font-family: var(--font-heading); color: var(--foreground); }
.wc-block-components-order-summary-item__image > img { border-radius: 0.6rem !important; }
.wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity {
	background: var(--forest-800) !important;
	color: var(--primary-foreground) !important;
}
.wc-block-components-totals-wrapper { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 0.5rem; }
.wc-block-components-totals-item__label { color: var(--foreground); }
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-heading);
	color: var(--foreground);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--forest-800); font-size: 1.45em; }

/* Big gold "Passer la commande" call to action, matching the site's checkout/promo colour. */
.wc-block-components-checkout-place-order-button {
	background: var(--gold) !important;
	color: var(--gold-foreground) !important;
	border-radius: 0.65rem !important;
	height: 3.25rem !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	border: none !important;
}
.wc-block-components-checkout-place-order-button:hover { background: color-mix(in oklch, var(--gold), white 15%) !important; }

/* ==========================================================================
   Order confirmation — classic checkout/thankyou.php template. The block
   checkout still renders this classic template for the "order received"
   step, so it needs its own pass separate from the checkout block CSS above.
   ========================================================================== */

.woocommerce-order > .woocommerce-notice--success.woocommerce-thankyou-order-received {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--forest-50);
	border: 1px solid var(--forest-100);
	border-radius: var(--radius-lg, 0.9rem);
	padding: 1.5rem 1.75rem;
	margin: 0 0 2rem;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--forest-800);
}
.woocommerce-order > .woocommerce-notice--success.woocommerce-thankyou-order-received::before {
	content: "";
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	background-color: var(--forest-800);
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.woocommerce-order-overview.woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 1.5rem 1.75rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 0.9rem);
}
.woocommerce-order-overview li {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-foreground);
}
.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--foreground);
	text-transform: none;
	letter-spacing: normal;
}

.woocommerce-order-details__title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--foreground);
	margin: 0 0 1.25rem;
}
.woocommerce-table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 2.5rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 0.9rem);
	overflow: hidden;
}
.woocommerce-table--order-details thead th {
	background: var(--secondary);
	padding: 0.85rem 1.5rem;
	text-align: left;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-foreground);
	font-weight: 600;
}
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--border);
	font-size: 0.925rem;
	color: var(--foreground);
}
.woocommerce-table--order-details tbody a { color: var(--foreground); font-weight: 500; text-decoration: none; }
.woocommerce-table--order-details tbody a:hover { text-decoration: underline; }
.woocommerce-table--order-details .product-quantity { color: var(--muted-foreground); font-weight: 400; }
.woocommerce-table--order-details tfoot th { text-align: left; font-weight: 500; color: var(--muted-foreground); }
.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details th.product-total {
	text-align: right;
}
.woocommerce-table--order-details tfoot td { text-align: right; }

.woocommerce-customer-details { margin: 0; }
.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) {
	.woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; }
}
/* woocommerce-layout.css also floats .col-1/.col-2 at width:48% — neutralise
   it so each address card fills its grid cell instead of floating narrower. */
.woocommerce-columns--addresses .col-1,
.woocommerce-columns--addresses .col-2 { float: none !important; width: 100% !important; }
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 0.9rem);
	padding: 1.5rem;
}
.woocommerce-column__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--foreground);
	margin: 0 0 1rem;
}
.woocommerce-column__title::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	background-color: var(--forest-100);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}
.woocommerce-column--billing-address .woocommerce-column__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4029' stroke-width='1.75'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M2 8h20M6 16h4'/%3E%3C/svg%3E");
}
.woocommerce-column--shipping-address .woocommerce-column__title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4029' stroke-width='1.75'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}
.woocommerce-column address {
	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}
.woocommerce-customer-details--email { margin-top: 0.35rem; }

.sylva-order-confirmation-cta {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: center;
}