/* ==========================================================================
   eclat-woo-pages.css — cart, checkout, my account, wishlist, compare,
   order tracking
   --------------------------------------------------------------------------
   Two markup families have to be covered, not one. The cart and checkout pages
   on this install are built from WooCommerce **blocks** (`wc-block-cart`,
   `wc-block-components-*`), while my account, the wishlist and order tracking
   are still the **classic** shortcode markup (`shop_table`, `form-row`). Both
   are styled here against the same tokens, so a future switch from one to the
   other changes nothing visually.

   Loaded only on those templates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SHARED SHELL
   --------------------------------------------------------------------------
   These pages have no section shortcode of ours, so they inherit the gutter
   from `.wf-container-main`. They get their own vertical rhythm and a measure
   that keeps a checkout form from stretching across a 2560px monitor.
   ----------------------------------------------------------------------- */
.woocommerce-cart #content,
.woocommerce-checkout #content,
.woocommerce-account #content,
.eclat-wooutil #content {
	max-width: 1280px;
	margin-inline: auto;
	padding-block: 40px 64px;
	box-sizing: border-box;
}

.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-notices-wrapper { margin-bottom: 20px; }

/* every notice on these pages shares one look */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--wd-line);
	border-inline-start: 3px solid var(--wd-accent);
	border-radius: 0;
	background: var(--wd-alt);
	color: var(--wd-head);
	font-size: 14px;
	list-style: none;
}

.woocommerce-error { border-inline-start-color: var(--wd-sale); }
.woocommerce-message { border-inline-start-color: var(--wd-ok); }

/* ==========================================================================
   1. FORM CONTROLS — one definition for every field on these pages
   ========================================================================== */
.woocommerce-cart .input-text,
.woocommerce-checkout .input-text,
.woocommerce-account .input-text,
.eclat-wooutil .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.eclat-wooutil input[type="text"],
.eclat-wooutil input[type="email"],
.eclat-wooutil input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wd-head);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* the focus ring is the brand accent, on every family of field */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus,
.eclat-wooutil input:focus,
.woocommerce-account .input-text:focus {
	outline: none;
	border-color: var(--wd-accent);
	box-shadow: 0 0 0 3px rgba(174, 111, 77, 0.14);
}

.wc-block-components-text-input.is-active label,
.woocommerce form .form-row label,
.eclat-wooutil label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wd-head);
}

.woocommerce form .form-row .required { color: var(--wd-sale); text-decoration: none; }

.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }

/* buttons on these pages inherit the design system's button, squared off */
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-account .button,
.eclat-wooutil .button,
.wc-block-components-button {
	border-radius: 0 !important;
	min-height: 48px;
	font-family: var(--wd-font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link) {
	background: var(--wd-accent);
	border: 1px solid var(--wd-accent);
	color: #fff;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--wd-accent-dk);
	border-color: var(--wd-accent-dk);
}

/* ==========================================================================
   2. CART
   ========================================================================== */
.eclat-woo-title {
	margin: 0 0 26px;
	font-family: var(--wd-font-head);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wd-dark);
}

/* --- classic cart table -------------------------------------------------- */
.woocommerce-cart table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	margin: 0 0 26px;
}

.woocommerce-cart table.shop_table th {
	padding: 15px 16px;
	background: var(--wd-alt);
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--wd-head);
	text-align: start;
}

.woocommerce-cart table.shop_table td {
	padding: 16px;
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	vertical-align: middle;
	font-size: 14px;
	color: var(--wd-text);
}

.woocommerce-cart table.shop_table td.product-thumbnail { width: 96px; }

.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wd-line-soft);
	display: block;
}

.woocommerce-cart td.product-name a {
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-head);
}

.woocommerce-cart td.product-name a:hover { color: var(--wd-accent); }

.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
	font-family: var(--wd-font-head);
	font-weight: 600;
	color: var(--wd-head);
	white-space: nowrap;
}

/* the remove control: a real 32px target, aligned to the row's centre */
.woocommerce-cart td.product-remove { width: 52px; text-align: center; }

.woocommerce a.remove,
.woocommerce-cart a.remove {
	width: 30px;
	height: 30px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	background: #fff;
	color: var(--wd-soft) !important;
	font-size: 17px;
	line-height: 1;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.woocommerce a.remove:hover,
.woocommerce-cart a.remove:hover {
	background: var(--wd-sale) !important;
	border-color: var(--wd-sale);
	color: #fff !important;
}

/* quantity stepper, shared with the product page's */
.woocommerce-cart .quantity,
.wc-block-components-quantity-selector {
	display: inline-flex !important;
	align-items: stretch;
	height: 44px;
	border: 1px solid var(--wd-line);
	border-radius: 0 !important;
	background: #fff;
	overflow: hidden;
}

.woocommerce-cart .quantity input.qty,
.wc-block-components-quantity-selector__input {
	width: 52px;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--wd-head);
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce-cart .quantity .is-form,
.wc-block-components-quantity-selector__button {
	width: 40px;
	border: 0 !important;
	background: none !important;
	color: var(--wd-head) !important;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.woocommerce-cart .quantity .is-form:hover,
.wc-block-components-quantity-selector__button:hover {
	background: var(--wd-alt) !important;
	color: var(--wd-accent) !important;
}

/* --- cart totals box ----------------------------------------------------- */
.woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; }

.woocommerce-cart .cart_totals {
	width: min(420px, 100%);
	padding: 24px;
	background: #fff;
	border: 1px solid var(--wd-line);
	box-sizing: border-box;
}

.woocommerce-cart .cart_totals h2 {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.woocommerce-cart .cart_totals table { width: 100%; border-collapse: collapse; border: 0; }

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--wd-line-soft);
	font-size: 14px;
	text-align: start;
	vertical-align: middle;
}

.woocommerce-cart .cart_totals th { font-weight: 600; color: var(--wd-head); width: 45%; }
.woocommerce-cart .cart_totals td { text-align: end; color: var(--wd-text); }

/* the order total is the one line the eye should land on */
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	padding-top: 16px;
	border-bottom: 0;
	border-top: 2px solid var(--wd-head);
	font-family: var(--wd-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--wd-dark);
}

.woocommerce-cart .cart_totals tr.order-total td { color: var(--wd-accent); }

.woocommerce-cart .wc-proceed-to-checkout { padding: 18px 0 0; }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	justify-content: center;
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--wd-accent-dk);
	border-color: var(--wd-accent-dk);
}

/* --- block cart ---------------------------------------------------------- */
.wc-block-cart__submit-container .wc-block-components-checkout-button,
.wc-block-cart__submit-button { width: 100%; }

.wc-block-cart-items { border-collapse: collapse; }

.wc-block-cart-items__header {
	background: var(--wd-alt);
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--wd-head);
}

.wc-block-cart-items__row { border-bottom: 1px solid var(--wd-line); }

.wc-block-cart-item__image img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border: 1px solid var(--wd-line-soft);
	background: #fff;
}

.wc-block-components-product-name {
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-head);
}

.wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-cart-order-summary-block {
	border-radius: 0;
	border-color: var(--wd-line);
}

.wc-block-components-totals-item__label { color: var(--wd-head); }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-family: var(--wd-font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--wd-accent);
}

/* the empty-cart state */
.wc-block-cart__empty-cart__title {
	font-family: var(--wd-font-head);
	font-weight: 600;
	color: var(--wd-dark);
}

/* ==========================================================================
   3. CHECKOUT — distraction-free
   ========================================================================== */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .wc-block-checkout__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	width: 100%;
	float: none;
}

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review { grid-column: 2; }

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

/* the review + payment column is one card, visually separated from the form */
.woocommerce-checkout #order_review,
.wp-block-woocommerce-checkout-order-summary-block {
	padding: 24px;
	background: var(--wd-alt);
	border: 1px solid var(--wd-line);
	box-sizing: border-box;
}

.woocommerce-checkout #order_review table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0 0 4px;
	background: transparent;
}

.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	font-size: 14px;
	text-align: start;
}

.woocommerce-checkout #order_review td { text-align: end; }

.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
	padding-top: 15px;
	border-bottom: 0;
	border-top: 2px solid var(--wd-head);
	font-family: var(--wd-font-head);
	font-size: 18px;
	font-weight: 700;
}

.woocommerce-checkout #order_review tr.order-total td { color: var(--wd-accent); }

/* payment methods: a clear list, each option a row of its own */
.woocommerce-checkout #payment,
.wc-block-checkout__payment-method {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 16px 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 8px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--wd-line);
	list-style: none;
	transition: border-color 0.18s ease;
}

.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--wd-accent); }

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--wd-head);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--wd-accent); }

.woocommerce-checkout #payment div.payment_box {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: var(--wd-alt-2);
	border: 1px solid var(--wd-line-soft);
	border-radius: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--wd-text);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #place_order,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	width: 100%;
	justify-content: center;
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.woocommerce-checkout #place_order:hover { background: var(--wd-accent-dk); border-color: var(--wd-accent-dk); }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 14px; font-size: 13px; }

/* ==========================================================================
   4. MY ACCOUNT
   ========================================================================== */

/* --- login / register, two columns --------------------------------------- */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px;
	align-items: start;
}

/*
 * With registration disabled in WooCommerce settings only the login form
 * renders, and a two-column grid would leave a hole beside it. `:has()` lets
 * the single form centre itself at a readable width instead.
 */
.woocommerce-account:not(.logged-in) .woocommerce:not(:has(.register)) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 480px;
	margin-inline: auto;
}

.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce-account form.login,
.woocommerce-account form.register {
	margin: 0;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	box-sizing: border-box;
}

.woocommerce-account form.login h2,
.woocommerce-account form.register h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wd-dark);
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
	width: 100%;
	justify-content: center;
	margin: 6px 0 0 !important;
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover {
	background: var(--wd-accent-dk);
	border-color: var(--wd-accent-dk);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
}

.woocommerce-account .woocommerce-form-login__rememberme input { accent-color: var(--wd-accent); }
.woocommerce-account .lost_password { margin: 12px 0 0; font-size: 13px; }
.woocommerce-account .lost_password a { color: var(--wd-accent); }

/* --- dashboard: vertical menu + panel ------------------------------------ */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 1px solid var(--wd-line);
	background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	list-style: none;
	border-bottom: 1px solid var(--wd-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li::marker { content: none; }

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 18px;
	font-family: var(--wd-font-head);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wd-head);
	transition: background 0.18s ease, color 0.18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--wd-alt); color: var(--wd-accent); }

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wd-accent);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--wd-line);
	box-sizing: border-box;
	font-size: 14.5px;
	line-height: 1.75;
}

.woocommerce-account .woocommerce-MyAccount-content p:first-child { margin-top: 0; }

/* --- orders table -------------------------------------------------------- */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	margin: 0;
}

.woocommerce-account table.shop_table th {
	padding: 13px 14px;
	background: var(--wd-alt);
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-head);
	text-align: start;
}

.woocommerce-account table.shop_table td {
	padding: 14px;
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	font-size: 14px;
	color: var(--wd-text);
	text-align: start;
}

.woocommerce-account table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce-account table.shop_table .woocommerce-button {
	min-height: 34px;
	padding: 0 14px;
	font-size: 11px;
}

/* ==========================================================================
   5. WISHLIST (TI WooCommerce Wishlist)
   ========================================================================== */
.eclat-wooutil .tinv-wishlist table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wd-line);
}

.eclat-wooutil .tinv-wishlist table th {
	padding: 14px;
	background: var(--wd-alt);
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--wd-head);
	text-align: start;
}

.eclat-wooutil .tinv-wishlist table td {
	padding: 14px;
	border: 0;
	border-bottom: 1px solid var(--wd-line);
	vertical-align: middle;
	font-size: 14px;
}

.eclat-wooutil .tinv-wishlist .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wd-line-soft);
}

.eclat-wooutil .tinv-wishlist .product-name a {
	font-family: var(--wd-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-head);
}

.eclat-wooutil .tinv-wishlist .product-name a:hover { color: var(--wd-accent); }

.eclat-wooutil .tinv-wishlist .product-price {
	font-family: var(--wd-font-head);
	font-weight: 600;
	color: var(--wd-accent);
}

.eclat-wooutil .tinv-wishlist button,
.eclat-wooutil .tinv-wishlist .button {
	border-radius: 0 !important;
	min-height: 40px;
	font-family: var(--wd-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	background: var(--wd-accent);
	border: 1px solid var(--wd-accent);
	color: #fff;
}

.eclat-wooutil .tinv-wishlist button:hover,
.eclat-wooutil .tinv-wishlist .button:hover { background: var(--wd-accent-dk); border-color: var(--wd-accent-dk); }

/* ==========================================================================
   6. COMPARE — the panel from the product page, scrollable on a phone
   ========================================================================== */
@media (max-width: 768px) {
	/*
	 * Four columns of comparison do not fit a 375px screen, and stacking them
	 * destroys the one thing a comparison is for: reading the same row across
	 * products. The grid becomes a horizontally scrollable row of fixed-width
	 * columns instead, with the modal body doing the scrolling.
	 */
	.eclat-sp-modal__body:has(.eclat-sp-cmp) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.eclat-sp-cmp {
		display: flex;
		gap: 12px;
		min-width: max-content;
	}

	.eclat-sp-cmp__col {
		flex: 0 0 168px;
		width: 168px;
	}

	.eclat-sp-cmp__name { font-size: 13px; }
}

/* ==========================================================================
   7. ORDER TRACKING
   ========================================================================== */
.eclat-track {
	width: min(620px, 100%);
	margin-inline: auto;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--wd-line);
	box-sizing: border-box;
}

.eclat-track__lead {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wd-text);
}

.eclat-wooutil form.track_order {
	display: grid;
	gap: 16px;
	margin: 0;
}

.eclat-wooutil form.track_order .form-row,
.eclat-wooutil form.track_order p { margin: 0; width: 100%; float: none; }

.eclat-wooutil form.track_order button,
.eclat-wooutil form.track_order .button {
	width: 100%;
	justify-content: center;
	background: var(--wd-accent);
	border: 1px solid var(--wd-accent);
	color: #fff;
}

.eclat-wooutil form.track_order button:hover { background: var(--wd-accent-dk); border-color: var(--wd-accent-dk); }

.eclat-track__help {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--wd-line);
	font-size: 13.5px;
	color: var(--wd-soft);
}

.eclat-track__help a { color: var(--wd-accent); }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); gap: 30px; }

	.woocommerce-checkout form.checkout #customer_details,
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review { grid-column: 1; }

	.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 22px; }

	/* the account menu lies down and scrolls, rather than becoming a tall list */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		border-bottom: 0;
		border-inline-end: 1px solid var(--wd-line);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-inline-end: 0; }
	.woocommerce-account .woocommerce-MyAccount-navigation a { white-space: nowrap; padding: 13px 16px; }
}

@media (max-width: 768px) {
	.woocommerce-cart #content,
	.woocommerce-checkout #content,
	.woocommerce-account #content,
	.eclat-wooutil #content { padding-block: 24px 40px; }

	.woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 20px; }

	.woocommerce-account form.login,
	.woocommerce-account form.register { padding: 20px; }

	/*
	 * Data tables become cards: each cell keeps its own label so a row is still
	 * readable without a header it can no longer line up with.
	 */
	.woocommerce-cart table.shop_table,
	.woocommerce-account table.shop_table,
	.eclat-wooutil .tinv-wishlist table { border: 0; }

	.woocommerce-cart table.shop_table thead,
	.woocommerce-account table.shop_table thead,
	.eclat-wooutil .tinv-wishlist table thead { display: none; }

	.woocommerce-cart table.shop_table tr,
	.woocommerce-account table.shop_table tr,
	.eclat-wooutil .tinv-wishlist table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
		margin-bottom: 12px;
		padding: 14px;
		border: 1px solid var(--wd-line);
		background: #fff;
	}

	.woocommerce-cart table.shop_table td,
	.woocommerce-account table.shop_table td,
	.eclat-wooutil .tinv-wishlist table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		width: auto;
		padding: 7px 0;
		border-bottom: 1px solid var(--wd-line-soft);
		text-align: end;
	}

	.woocommerce-cart table.shop_table tr td:last-child,
	.woocommerce-account table.shop_table tr td:last-child { border-bottom: 0; }

	/* WooCommerce already carries the header text in data-title */
	.woocommerce-cart table.shop_table td::before,
	.woocommerce-account table.shop_table td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		font-family: var(--wd-font-head);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: var(--wd-soft);
		text-align: start;
	}

	.woocommerce-cart table.shop_table td.product-thumbnail { justify-content: center; }
	.woocommerce-cart table.shop_table td.product-thumbnail::before { display: none; }
	.woocommerce-cart table.shop_table td.product-thumbnail img { width: 96px; height: 96px; }

	.woocommerce-cart .cart-collaterals { justify-content: stretch; }
	.woocommerce-cart .cart_totals { width: 100%; padding: 18px; }

	.woocommerce-checkout #order_review,
	.wp-block-woocommerce-checkout-order-summary-block { padding: 18px; }

	.eclat-track { padding: 20px; }
}

/* ==========================================================================
   ROUND 32 — ACCOUNT DASHBOARD PANEL
   --------------------------------------------------------------------------
   Replaces WooCommerce's two bare paragraphs. The template override lives at
   woocommerce/myaccount/dashboard.php; this is the surface it paints on.
   ========================================================================== */
.eclat-acct-hello {
	margin: 0 0 24px;
	padding: 20px 22px;
	background: var(--wd-alt);
	border-inline-start: 3px solid var(--wd-accent);
}

.eclat-acct-hello__k {
	margin: 0 0 8px;
	font-family: var(--wd-font-head);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wd-head);
}

.eclat-acct-hello__desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--wd-text);
}

.eclat-acct-hello__desc a {
	color: var(--wd-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.eclat-acct-hello__out {
	margin: 12px 0 0;
	font-size: 13px;
}

.eclat-acct-hello__out a { color: var(--wd-soft); }
.eclat-acct-hello__out a:hover { color: var(--wd-sale); }

/* ==========================================================================
   ROUND 32 — CHECKOUT REASSURANCE LINE
   ========================================================================== */
.eclat-co-note {
	margin: 0 0 20px;
	padding: 13px 16px;
	background: var(--wd-alt);
	border: 1px solid var(--wd-line);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wd-head);
}

.woocommerce-checkout .form-row .description,
.woocommerce-checkout .form-row small.description {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wd-soft);
}

/* ==========================================================================
   ROUND 32 — THE STICKY CART BAR
   --------------------------------------------------------------------------
   Rendered on the cart page for every viewport by inc/checkout.php and hidden
   here by default; eclat-mobile.css reveals it under 768px. Declaring the
   hidden state next to the component it belongs to keeps eclat-mobile.css to
   its rule that every selector in it sits inside a width query.
   ========================================================================== */
.eclat-cartbar { display: none; }

/* ==========================================================================
   ROUND 32 — ACCOUNT NAVIGATION, TABLET BAND
   --------------------------------------------------------------------------
   The horizontal scroller is kept between 769 and 992px, where the row fits.
   Hardened so a tab can never be squeezed: no wrapping, no shrinking, and a
   scroll snap that makes a partly visible last tab read as draggable rather
   than as a truncated word.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 992px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-wrap: nowrap;
		scroll-snap-type: x proximity;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		min-width: max-content;
		scroll-snap-align: start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation a {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* ==========================================================================
   ROUND 33 — THE PASSWORD "EYE" TOGGLE
   --------------------------------------------------------------------------
   THE ACTUAL CAUSE

   The toggle is not in the server HTML at all. WooCommerce's frontend script
   wraps every `input[type=password]` inside `form.register, form.checkout,
   form.edit-account, form.lost_reset_password` at runtime and inserts the
   control after it. So the only thing that decides where it lands is CSS, and
   two stylesheets were fighting:

     wc-dt-custom.css (The7, loads 8th)
        .woocommerce form .show-password-input { position:absolute; right:.7em; top:50%; }

     eclat-pages.css (ours, loads 19th)
        .woocommerce form .show-password-input { inset-inline-end: 12px; }

   Same specificity, ours later, so ours won — but only for the property it
   named. `inset-inline-end` resolves to `left` on an RTL page, and The7's
   `right: .7em` was never cleared. An absolutely positioned box with BOTH
   `left` and `right` set and `width: auto` stretches to fill its container, so
   the box spanned the whole field and its ::after glyph rendered at the box's
   start — floating in the middle of the input. Exactly the reported symptom,
   and it could only ever show up in RTL.

   The fix is one line: clear the opposite side. `inset-inline-start: auto`
   resolves to `right: auto` in RTL (killing The7's rule) and to `left: auto`
   in LTR (a no-op), so one declaration corrects both directions with no
   direction-specific override and no `!important`.
   ========================================================================== */
.woocommerce form .password-input,
.woocommerce-page form .password-input,
.woocommerce-account .password-input,
.woocommerce-checkout .password-input {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
}

.woocommerce form .password-input > input,
.woocommerce-page form .password-input > input,
.woocommerce-account .password-input > input,
.woocommerce-checkout .password-input > input {
	flex: 1 1 auto;
	min-width: 0;
	/* room for the control, on whichever edge the writing direction puts it */
	padding-inline-end: 46px;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input,
.woocommerce-account .show-password-input,
.woocommerce-checkout .show-password-input {
	position: absolute;
	inset-inline-start: auto;
	inset-inline-end: 4px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wd-soft);
	cursor: pointer;
	line-height: 1;
}

.woocommerce form .show-password-input:hover,
.woocommerce-account .show-password-input:hover,
.woocommerce-checkout .show-password-input:hover { color: var(--wd-accent); }

.woocommerce form .show-password-input.display-password,
.woocommerce-account .show-password-input.display-password,
.woocommerce-checkout .show-password-input.display-password { color: var(--wd-accent); }

/* The7 draws the glyph with a WooCommerce icon font on ::after; centre it. */
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after,
.woocommerce-account .show-password-input::after,
.woocommerce-checkout .show-password-input::after {
	position: static;
	display: block;
	font-size: 16px;
	line-height: 1;
}

/* ==========================================================================
   ROUND 33 — WOOCOMMERCE BUTTONS, ONE TREATMENT
   --------------------------------------------------------------------------
   WooCommerce emits `.button` from a dozen templates — order actions, the
   downloads table, "Browse products" on an empty cart, the notice call to
   action, "Confirm email", address editing. Each picked up whatever The7 or the
   plugin's own stylesheet happened to give it, so the same control looked
   different on three pages and in two of them collided with the text beside it.

   One declaration block now covers every one of them: the brand palette,
   consistent padding, a 44px minimum touch height, and `vertical-align:
   middle` plus a margin so a button sitting inline after a sentence can no
   longer overlap it.
   ========================================================================== */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-account .button,
.woocommerce-account a.button,
.woocommerce-MyAccount-content .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 20px;
	margin: 0;
	background: var(--wd-accent);
	border: 1px solid var(--wd-accent);
	border-radius: 0;
	color: #fff;
	font-family: var(--wd-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-account .button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce .woocommerce-Button:hover {
	background: var(--wd-dark);
	border-color: var(--wd-dark);
	color: #fff;
}

/* secondary weight: view/cancel on an order row, "return to shop" */
.woocommerce a.button.wc-forward:not(.checkout),
.woocommerce .woocommerce-message a.button.wc-forward,
.woocommerce-account .woocommerce-orders-table a.button.view,
.woocommerce-account .woocommerce-orders-table a.button.cancel,
.woocommerce .return-to-shop a.button {
	background: #fff;
	border-color: var(--wd-line);
	color: var(--wd-head);
}

.woocommerce a.button.wc-forward:not(.checkout):hover,
.woocommerce .woocommerce-message a.button.wc-forward:hover,
.woocommerce-account .woocommerce-orders-table a.button.view:hover,
.woocommerce-account .woocommerce-orders-table a.button.cancel:hover,
.woocommerce .return-to-shop a.button:hover {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

/* a destructive action reads as one */
.woocommerce-account .woocommerce-orders-table a.button.cancel:hover,
.woocommerce a.button.delete:hover {
	background: var(--wd-sale);
	border-color: var(--wd-sale);
}

/* ==========================================================================
   ROUND 33 — NOTICES
   --------------------------------------------------------------------------
   The notice and its button used to sit on one baseline with no gap, so on a
   narrow column the button overlapped the sentence. It is a flex row now, and
   the button is pushed to the trailing edge with `margin-inline-start: auto`
   rather than a float, which is what mirrors correctly in RTL.
   ========================================================================== */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 22px;
	padding: 15px 18px;
	border: 1px solid var(--wd-line);
	border-inline-start: 3px solid var(--wd-accent);
	border-radius: 0;
	background: var(--wd-alt);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wd-head);
	list-style: none;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { content: none; }

.woocommerce .woocommerce-error { border-inline-start-color: var(--wd-sale); }
.woocommerce .woocommerce-message { border-inline-start-color: var(--wd-ok, var(--wd-accent)); }

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
	margin-inline-start: auto;
	flex: 0 0 auto;
}

.woocommerce .woocommerce-error li { list-style: none; margin: 0; }

/* ==========================================================================
   ROUND 33 — ACCOUNT ENDPOINT SCREENS
   --------------------------------------------------------------------------
   Orders, Addresses and Account details each render a different shape and each
   had its own way of going wrong on a narrow column. Common treatment here;
   the per-viewport work is in eclat-mobile.css.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3,
.woocommerce-account .woocommerce-MyAccount-content legend {
	margin: 0 0 16px;
	font-family: var(--wd-font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--wd-head);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: 26px 0 0;
	padding: 20px;
	border: 1px solid var(--wd-line);
	background: var(--wd-alt);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	padding-inline: 8px;
	margin-bottom: 0;
	font-size: 14px;
}

/* addresses: two equal cards, never two floated halves */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

.woocommerce-account .woocommerce-Address {
	float: none;
	width: auto;
	padding: 20px;
	border: 1px solid var(--wd-line);
	background: #fff;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wd-line);
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 15px; }

.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wd-text);
}

/* the "edit" affordance is a link, not a full button, inside a card header */
.woocommerce-account .woocommerce-Address-title .edit {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wd-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* orders table */
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.woocommerce-account .woocommerce-orders-table .button {
	min-height: 38px;
	padding: 8px 14px;
	font-size: 12px;
}

.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-info {
	margin-bottom: 20px;
}

/* ==========================================================================
   ROUND 33 — LOGIN AND REGISTER, THE LOGGED-OUT SCREEN
   ========================================================================== */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	align-items: start;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	margin: 0;
	padding: 28px;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	background: #fff;
}

.woocommerce-account form.login .form-row,
.woocommerce-account form.register .form-row {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	float: none;
}

.woocommerce-account form.login label,
.woocommerce-account form.register label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wd-head);
}

.woocommerce-account form.login .input-text,
.woocommerce-account form.register .input-text {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--wd-line);
	border-radius: 0;
	background: #fff;
	font-size: 15px;
	box-sizing: border-box;
}

.woocommerce-account form.login .input-text:focus,
.woocommerce-account form.register .input-text:focus {
	border-color: var(--wd-accent);
	outline: 2px solid rgba(0, 0, 0, 0.04);
	outline-offset: 0;
}

.woocommerce-account form.login .button,
.woocommerce-account form.register .button {
	width: 100%;
	min-height: 50px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 13.5px;
	font-weight: 500;
}

.woocommerce-account .woocommerce-form-login__rememberme input { margin: 0; }

/* ==========================================================================
   ROUND 33 — PRODUCT BUNDLES
   --------------------------------------------------------------------------
   The presentation layer for grouped routine packs. Everything below is driven
   by server-rendered markup from inc/bundles.php — the products, prices and
   links are real anchors in the HTML, not built by script, so a bundle is
   crawlable and its members are internally linked exactly like any other
   product listing.
   ========================================================================== */
.eclat-bundle {
	margin: 0 0 34px;
	border: 1px solid var(--wd-line);
	background: #fff;
}

.eclat-bundle__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--wd-line);
	background: var(--wd-alt);
}

.eclat-bundle__k {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wd-accent);
}

.eclat-bundle__title {
	margin: 0;
	font-family: var(--wd-font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--wd-head);
}

.eclat-bundle__sub {
	flex: 1 1 100%;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wd-soft);
}

.eclat-bundle__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 268px;
	gap: 0;
}

.eclat-bundle__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eclat-bundle__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 20px 18px;
	border-inline-end: 1px solid var(--wd-line);
}

.eclat-bundle__item:last-child { border-inline-end: 0; }

.eclat-bundle__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--wd-alt);
}

.eclat-bundle__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.eclat-bundle__name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wd-head);
	overflow-wrap: anywhere;
}

.eclat-bundle__name:hover { color: var(--wd-accent); }

.eclat-bundle__price {
	margin-top: auto;
	font-family: var(--wd-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--wd-accent);
}

.eclat-bundle__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border-inline-start: 1px solid var(--wd-line);
	background: var(--wd-alt);
}

.eclat-bundle__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	color: var(--wd-text);
}

.eclat-bundle__line--was .eclat-bundle__v { text-decoration: line-through; color: var(--wd-soft); }

.eclat-bundle__line--now {
	padding-top: 12px;
	border-top: 1px solid var(--wd-line);
	font-size: 15px;
}

.eclat-bundle__line--now .eclat-bundle__v {
	font-family: var(--wd-font-head);
	font-size: 21px;
	font-weight: 700;
	color: var(--wd-head);
}

.eclat-bundle__save {
	align-self: flex-start;
	padding: 4px 10px;
	background: var(--wd-sale);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

.eclat-bundle__btn { width: 100%; min-height: 50px; }