/* Etheria Lab — restyle of WooCommerce-native pages (cart, checkout, account,
   product, order-received) and embedded shortcodes (order tracking, gift).
   We only change the LOOK — structure and behaviour stay native so COD, OTP,
   gift-code and pixel plugins keep working. Palette/fonts from base.css. */

.woocommerce, .woocommerce-page,
.woocommerce-order-received .site-content,
body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account {
	color: var(--eth-ink);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
	font-family: var(--eth-serif-display);
	font-weight: 500;
	color: var(--eth-green);
}

/* --- Buttons --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce form.track_order button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	font-family: var(--eth-sans);
	font-weight: 600;
	letter-spacing: .03em;
	background-color: var(--eth-green);
	color: var(--eth-bg);
	border-radius: 3px;
	border: 1px solid transparent;
	padding: 13px 26px;
	min-height: 48px; /* room for longer translated labels */
	text-transform: none;
	transition: background-color .15s, color .15s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: #16301f;
	color: var(--eth-bg);
}
/* Gold accent for the primary conversion buttons */
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--eth-gold);
	color: #1f2a1d;
}
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: #9c7c43;
	color: #1f2a1d;
}

/* --- Form fields --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce form.track_order input.input-text,
.woocommerce table.cart td.actions .coupon .input-text {
	border: 1px solid var(--eth-field-border);
	border-radius: var(--eth-radius);
	background: var(--eth-field-bg);
	color: var(--eth-ink);
	padding: 12px 14px;
	font-family: var(--eth-serif);
	font-size: 16px; /* >=16px avoids iOS zoom-on-focus in the IG browser */
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form.track_order input.input-text:focus {
	border-color: var(--eth-gold);
	box-shadow: var(--eth-focus);
	outline: none;
}
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label {
	font-family: var(--eth-sans);
	font-size: 13px;
	color: var(--eth-green);
}

/* --- Prices --- */
.woocommerce .price, .woocommerce-page .price,
.woocommerce ins { color: var(--eth-green); font-weight: 600; }
.woocommerce del { color: #8a8577; }

/* --- Notices --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-top-color: var(--eth-gold);
	background: var(--eth-bg-alt);
	border-radius: var(--eth-radius);
	font-family: var(--eth-serif);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--eth-gold); }

/* --- Checkout / cart tables --- */
.woocommerce table.shop_table {
	border-radius: 6px;
	border-color: var(--eth-line);
}
.woocommerce table.shop_table th { font-family: var(--eth-sans); color: var(--eth-green); }
.woocommerce-checkout #payment { background: var(--eth-bg-alt); border-radius: 6px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--eth-line); }
.woocommerce-checkout #payment div.payment_box { background: #fff; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }

/* Personalization recap rows under the item (from the quiz) */
.woocommerce .cart_item dl.variation,
.woocommerce-checkout .cart_item dl.variation,
.woocommerce td.product-name dl.variation {
	font-family: var(--eth-serif);
	font-size: 14px;
	color: var(--eth-muted);
}
.woocommerce dl.variation dt { font-family: var(--eth-sans); font-weight: 600; color: var(--eth-green); }

/* --- My account --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border-color: var(--eth-line); }
.woocommerce-account .woocommerce-MyAccount-navigation a { color: var(--eth-green-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--eth-green); font-weight: 600; }

/* The landing's "Retrouver" section no longer renders WooCommerce's tracking
   shortcode — that shortcode prints the whole order receipt, addresses and all.
   It is now a status-only lookup with its own markup; see landing.css. */

/* --- Order-received ("code synergie") — see woocommerce/checkout/thankyou.php --- */
.eth-thankyou { background: var(--eth-green); color: var(--eth-bg); border-radius: 8px; text-align: center; padding: 40px 28px; margin-bottom: 28px; }
.eth-thankyou__kicker { font-family: var(--eth-mono); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--eth-gold-light); margin-bottom: 12px; }
.eth-thankyou__title { font-family: var(--eth-serif-display); font-weight: 500; font-size: 30px; margin: 0 0 8px; color: #f7f4ec; }
.eth-thankyou__intro { font-family: var(--eth-serif); font-size: 17px; color: #cdd6cb; max-width: 460px; margin: 0 auto 20px; }
.eth-thankyou__code { display: inline-block; background: rgba(217,184,115,.12); border: 1px solid rgba(217,184,115,.4); border-radius: 5px; padding: 12px 24px; }
.eth-thankyou__code-label { font-family: var(--eth-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9fb09c; margin-bottom: 4px; }
.eth-thankyou__code-val { font-family: var(--eth-mono); font-size: 24px; letter-spacing: .12em; color: var(--eth-gold-light); }

/* =========================================================================
   WooCommerce BLOCK Cart & Checkout (the "Checkout"/"Cart" blocks).
   These render with .wc-block-* classes — different markup from the classic
   shortcode styled above — so they need their own rules. We change the LOOK
   only; COD / payment / validation behaviour stays native. !important is used
   because the block stylesheet ships high-specificity defaults.
   ========================================================================= */

/* Step titles: "Contact information", "Shipping address", "Order summary"... */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2 {
	font-family: var(--eth-serif-display);
	font-weight: 500;
	color: var(--eth-green);
}
.wc-block-components-checkout-step__description {
	font-family: var(--eth-serif);
	color: var(--eth-muted);
}

/* Text inputs, selects, textareas */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-form-token-field__input {
	border: 1px solid var(--eth-field-border) !important;
	border-radius: var(--eth-radius) !important;
	background: var(--eth-field-bg) !important;
	color: var(--eth-ink) !important;
	font-family: var(--eth-serif) !important;
	font-size: 16px !important; /* >=16px avoids iOS zoom-on-focus in the IG browser */
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus {
	border-color: var(--eth-gold) !important;
	box-shadow: var(--eth-focus) !important;
}
.wc-block-components-text-input label {
	font-family: var(--eth-sans);
	color: var(--eth-green-soft);
}
.wc-block-components-text-input.is-active label {
	color: var(--eth-green);
}

/* Checkboxes / radios accent */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input {
	accent-color: var(--eth-green);
}

/* Shipping / payment option cards */
.wc-block-components-radio-control__option {
	border-color: var(--eth-line) !important;
}
.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control-accordion-option:has( input:checked ) {
	border-color: var(--eth-gold) !important;
	background: var(--eth-bg-alt);
}
.wc-block-components-radio-control__label {
	font-family: var(--eth-sans);
	color: var(--eth-green);
}

/* Primary buttons: Place Order (checkout) + Proceed to checkout (cart) */
.wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
	background-color: var(--eth-gold) !important;
	color: #1f2a1d !important;
	font-family: var(--eth-sans) !important;
	font-weight: 600 !important;
	letter-spacing: .03em;
	border-radius: 3px !important;
	min-height: 52px;
}
.wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover {
	background-color: #9c7c43 !important;
	color: #1f2a1d !important;
}

/* Order summary card */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar .wc-block-components-order-summary {
	background: var(--eth-bg-alt);
	border: 1px solid var(--eth-line);
	border-radius: 8px;
}
/* Order-summary item text = product NAME + the quiz answers. In this Woo
   version they live inside __description, so we style it (do NOT hide it —
   hiding the container also removes the product name). */
.wc-block-components-order-summary-item__description {
	font-family: var(--eth-serif);
	color: var(--eth-muted);
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name,
.wc-block-components-order-summary-item__description strong,
.wc-block-components-product-details__name {
	font-family: var(--eth-sans);
	font-weight: 600;
	color: var(--eth-green);
}
.wc-block-components-product-details,
.wc-block-components-product-metadata {
	font-family: var(--eth-serif);
	font-size: 13px;
	color: var(--eth-muted);
}
/* Totals */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-family: var(--eth-serif);
	color: var(--eth-ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--eth-serif-display);
	font-weight: 600;
	color: var(--eth-green);
}
/* Prices */
.wc-block-components-product-price__value { color: var(--eth-green); }
.wc-block-components-product-price__regular { color: #8a8577; }
/* Collapsible "Order summary" header (mobile) + coupon toggle */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button-text { color: var(--eth-green); font-family: var(--eth-sans); }

/* --- Header cart (Storefront pages: cart / checkout / account) --- */
.site-header-cart .cart-contents {
	color: var(--eth-green);
	font-family: var(--eth-sans);
	font-weight: 600;
}
.site-header-cart .cart-contents:hover { color: var(--eth-gold); }
.site-header-cart .cart-contents .count,
.site-header-cart .amount { color: var(--eth-gold); }

/* =========================================================================
   CART (block)
   ========================================================================= */
/* The whole filled-cart presentation — page frame, product card, summary card,
   coupon panel, reassurance strip — lives in commerce-fidelity.css (built
   against the real WooCommerce 10.9.4 DOM) plus cart-refinement.css for the
   handful of !important overrides Woo's own stylesheet needs. Nothing
   cart-specific belongs here: the rules that used to live in this file fought
   that layout, and the leftover `.wc-block-cart__main` fallback card painted a
   stray rule above the reassurance strip. */

/* The "you save X" badge is not part of the approved cart/checkout design. */
.woocommerce-cart .wc-block-components-sale-badge,
.woocommerce-checkout .wc-block-components-sale-badge { display: none !important; }

/* Empty cart (still styled here — it is not part of the filled-cart layout). */
.wc-block-cart--is-empty { text-align: center; }
.wc-block-cart--is-empty .wc-block-components-button,
.wp-block-woocommerce-empty-cart-block .wc-block-components-button {
	background: var(--eth-green) !important; color: var(--eth-bg) !important;
	border-radius: 9px !important; min-height: 50px; font-family: var(--eth-sans) !important; font-weight: 600 !important;
	display: inline-flex; align-items: center;
}
.wc-block-cart--is-empty .wc-block-components-product-title,
.wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--eth-serif-display) !important; color: var(--eth-green) !important;
}