/* =========================================================================
   EVERLUX — WooCommerce, "Maison" pass
   -------------------------------------------------------------------------
   Loaded INSTEAD OF the old woocommerce.css, which was written against the
   previous token set (--green-600, --radius: 10px, --ink-500, --sand …). Those
   custom properties no longer exist, so every rule that referenced one was
   resolving to `unset` — that's where the mustard prices and the stray rounded
   chrome on the shop page came from.

   Rather than re-point the old file at new variables (which would keep the old
   SHAPE — shadowed cards, pills, green buttons — and just recolour it), the
   loop is rebuilt here in the same chromeless language as the front page.

   Scope note: this covers the product loop, buttons and prices. Cart/checkout
   still inherit the base system (achromatic + zero radius) and read fine, but
   they haven't had a considered pass yet.
   ========================================================================= */

/* ---- The loop: same chromeless grid as the front page ------------------- */
/* A real grid, not flex. This used to be `display: flex` with no wrap and no
   item widths, so every card in the loop was crammed into ONE row (16 cards at
   ~65px each on the shop page). Column count follows WooCommerce's own
   .columns-N class; the mobile breakpoints below step it down. */
.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
	margin: 0; padding: 0;
	list-style: none;
}
.woocommerce ul.products.columns-2, ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3, ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-5, ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products::before, ul.products::after { content: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
	margin: 0 !important;
	float: none !important;
	/* WC's layout/smallscreen sheets size cards as floats (22.05% / 48%); in a
	   grid the track sets the width, so neutralise theirs. */
	width: auto !important;
	display: flex; flex-direction: column;
	text-align: center;
	/* No card. No border, no shadow, no radius, no padding box. */
	background: none;
	border: 0;
	box-shadow: none;
}

/* The image sits on a whisper tile — separation without a border. */
.woocommerce ul.products li.product a img,
ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--whisper);
	margin: 0 0 1.25rem;
	transition: opacity var(--fade), transform var(--breathe);
}
ul.products li.product:hover img { transform: scale(1.04); }

/* Loop thumbs with a second photo come out of inc/woocommerce.php as
   .hover-swap > __front + __back. Their styles lived in the old woocommerce.css
   / main.css, neither of which loads any more, so both photos were stacking
   (cards twice as tall, grid rows misaligned). Same fade as .pcard swap-back. */
ul.products li.product .hover-swap {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: 1 / 1;
	margin: 0 0 1.25rem;
	background: var(--whisper);
}
ul.products li.product .hover-swap__front,
ul.products li.product .hover-swap__back { position: absolute; inset: 0; display: block; }
ul.products li.product .hover-swap img { height: 100%; margin: 0; }
ul.products li.product .hover-swap__back { opacity: 0; transition: opacity var(--fade); }
ul.products li.product:hover .hover-swap__back { opacity: 1; }
@media (hover: none) {
	ul.products li.product:hover .hover-swap__back { opacity: 0; }
}

/* Title in the UI voice: small, uppercase, wide-tracked. Never a bold serif. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-family: var(--sans);
	font-size: var(--ui-size);
	font-weight: var(--ui-weight);
	letter-spacing: var(--ui-track);
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--ink);
	margin: 0 0 .5rem;
	padding: 0;
}

/* Price: a serif figure in ink — a handwritten tag, not a barcode, and never a
   colour (a coloured price is a discount signal, the opposite of what this
   catalogue wants). Matches the .price treatment in maison.css; only tabular
   contexts (accessory list, qty-tier table) keep sans for scannability. */
.woocommerce ul.products li.product .price,
ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--display);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink) !important;
	margin: 0;
}
.woocommerce div.product p.price { font-size: 1.375rem; }
/* The "/ box" unit appended by the price filter — sans and quiet beside the
   serif figure, same pairing as .price__unit on the grid cards. */
.price-unit-box {
	font-family: var(--sans);
	font-size: .6875rem;
	letter-spacing: .02em;
	color: var(--ink-soft);
	font-weight: 400;
}
.woocommerce ul.products li.product .price del { opacity: .45; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Hide the loop "Add to cart" / "Select options" button entirely.
   A button under every tile is what makes a grid feel like a warehouse. The
   whole tile is already a link; the buying decision belongs on the product
   page, where the square-footage calculator lives. */
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: none !important;
}

/* ---- Buttons: black fill or nothing. No radius, no glow, no lift. ------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	font-family: var(--sans);
	font-size: var(--ui-size);
	font-weight: var(--ui-weight);
	letter-spacing: var(--ui-track);
	text-transform: uppercase;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	box-shadow: none;
	padding: 1.0625rem 2.25rem;
	transition: background var(--quick), color var(--quick);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: transparent;
	color: var(--ink);
}

/* =========================================================================
   SINGLE PRODUCT
   ========================================================================= */
.crumbs {
	display: flex; gap: .6rem; flex-wrap: wrap;
	font-family: var(--sans); font-size: .6875rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.crumbs a { border-bottom: 1px solid transparent; transition: border-color var(--quick); }
.crumbs a:hover { border-bottom-color: var(--ink-soft); }

.woocommerce div.product .product_title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.15;
	margin-bottom: .75rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--ink-soft);
	font-size: .9375rem;
	line-height: 1.7;
	max-width: 34rem;
}

/* The variation swatches: squares, hairlines, ink when chosen. Not rounded
   chips with a coloured ring. */
.woocommerce div.product .variable-items-wrapper .variable-item,
.woo-variation-swatches .variable-items-wrapper .variable-item {
	border-radius: 0 !important;
	box-shadow: none !important;
	border: 1px solid var(--hairline) !important;
	transition: border-color var(--quick);
}
.woocommerce div.product .variable-items-wrapper .variable-item.selected,
.woo-variation-swatches .variable-items-wrapper .variable-item.selected {
	border-color: var(--ink) !important;
	box-shadow: none !important;
	outline: 1px solid var(--ink);
	outline-offset: 1px;
}

/* The quantity-break pricing table (the "plugify" plugin) ships a solid green
   fill on the active tier — rgb(0,145,67), which is essentially the old brand
   green. A discount table shouting in a colour the rest of the site no longer
   owns is the single loudest thing on the page. Ink and hairlines instead; the
   active tier is marked by weight and a whisper fill, not a slab of colour. */
.plugify_table_parent_div { margin: 1.5rem 0; }
.plugify_table_parent_div table.tablez {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: .8125rem;
	border: 0;
}
.plugify_table_parent_div table.tablez th,
.plugify_table_parent_div table.tablez td,
.plugify_table_parent_div td.plugify_qty_col,
.plugify_table_parent_div td.plugify_typ_col,
.plugify_table_parent_div td.plugify_pip_col {
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--hairline) !important;
	padding: .75rem .5rem !important;
	text-align: left !important;
	font-weight: 400;
}
.plugify_table_parent_div table.tablez th {
	font-family: var(--sans);
	font-size: var(--ui-size) !important;
	font-weight: var(--ui-weight) !important;
	letter-spacing: var(--ui-track);
	text-transform: uppercase;
	color: var(--ink-soft) !important;
	border-bottom: 1px solid var(--ink) !important;
}
/* The active tier: a whisper fill and weight, not a green slab. */
.plugify_table_parent_div tr:has(td[style*="rgb(0, 145, 67)"]) td,
.plugify_table_parent_div tr.active td,
.plugify_table_parent_div tr:first-of-type td.plugify_qty_col,
.plugify_table_parent_div tr:first-of-type td.plugify_pip_col {
	background: var(--whisper) !important;
	color: var(--ink) !important;
	font-weight: 600 !important;
}

/* "706 in stock" ships an olive-yellow. Quiet it. */
.woocommerce div.product p.stock,
.woocommerce div.product .stock.in-stock {
	font-family: var(--sans);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-soft) !important;
}

/* =========================================================================
   SQUARE-FOOTAGE CALCULATOR
   -------------------------------------------------------------------------
   The actual buying mechanism: these are priced per sq ft but sold by the box.
   Give it the room, it works out the boxes. See inc/woocommerce.php — its markup
   was lost with Elementor and the JS was listening to nothing.
   ========================================================================= */
.product_quantity_calc-container {
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	padding: 1.5rem 0;
	margin: 0 0 1.5rem;
	max-width: 26rem;
}
.product_quantity_calc-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	margin-bottom: .875rem;
}
.product_quantity_calc-row:last-child { margin-bottom: 0; }
.product_quantity_calc-label label {
	font-family: var(--sans); font-size: var(--ui-size); font-weight: var(--ui-weight);
	letter-spacing: var(--ui-track); text-transform: uppercase;
	color: var(--ink-soft);
}
.product_quantity_calc-field {
	font-family: var(--sans); font-size: .75rem; color: var(--ink-soft);
	display: flex; align-items: center; gap: .5rem;
}
.product_quantity_calc-input {
	width: 6.5rem;
	border: 1px solid var(--hairline);
	border-radius: 0;
	padding: .625rem .75rem;
	font-family: var(--sans); font-size: .9375rem;
	color: var(--ink);
	background: var(--paper);
	transition: border-color var(--quick);
}
.product_quantity_calc-input:focus { border-color: var(--ink); outline: none; }
.product_quantity_calc-input[readonly] { background: var(--whisper); color: var(--ink); font-weight: 600; }

.product_quantity_calc-container .btn,
#doCalc, #doAddToCart {
	font-family: var(--sans); font-size: var(--ui-size); font-weight: var(--ui-weight);
	letter-spacing: var(--ui-track); text-transform: uppercase;
	background: var(--ink); color: var(--paper);
	border: 1px solid var(--ink); border-radius: 0; box-shadow: none;
	padding: .9375rem 2rem;
	cursor: pointer;
	transition: background var(--quick), color var(--quick);
}
#doCalc:hover, #doAddToCart:hover { background: transparent; color: var(--ink); }
/* The calculate step is the quieter of the two — it isn't the commitment. */
#doCalc { background: transparent; color: var(--ink); }
#doCalc:hover { background: var(--ink); color: var(--paper); }

/* The product tabs ship as grey/white pills with borders — the last pieces of
   stock-Woo chrome on the page, and the one surface the cream retint exposed
   (they kept painting pure white on the new ground). Words and a rule, like
   every other control on the site. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 !important;
	margin: 0 0 2rem !important;
	border-bottom: 1px solid var(--hairline);
	display: flex; gap: 2.5rem;
	overflow: visible;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0 0 1rem !important;
	font-family: var(--sans);
	font-size: var(--ui-size); font-weight: var(--ui-weight);
	letter-spacing: var(--ui-track); text-transform: uppercase;
	color: var(--ink-soft) !important;
	position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
	content: "";
	position: absolute; left: 0; bottom: -1px;
	width: 100%; height: 1px;
	background: var(--ink);
	transform: scaleX(0); transform-origin: left;
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); }

/* ---- Nothing on a Woo page floats or curves either. --------------------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top-color: var(--ink);
	background: var(--whisper);
	border-radius: 0;
	box-shadow: none;
}
.woocommerce div.product form.cart .variations select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--hairline);
	border-radius: 0;
	box-shadow: none;
	padding: .875rem 1rem;
	font-family: var(--sans);
	font-size: .875rem;
}

/* The quantity box is NOT a text field and must not inherit a text field's
   padding. WooCommerce sizes this input around 50px wide; 16px of padding each
   side leaves ~17px of content box, the number spinner claims all of it, and the
   digit you typed is pushed clean out of view. It looked like the field simply
   didn't accept input.
   Give it room, centre the number, and let the spinner have its own space. */
.woocommerce div.product form.cart .quantity,
.woocommerce .quantity {
	width: auto !important;
	display: inline-block;
}
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
	width: 5.5rem !important;
	max-width: none;
	padding: .875rem .5rem !important;
	text-align: center;
	border: 1px solid var(--hairline);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--sans);
	font-size: .9375rem;
	color: var(--ink);
	background: var(--paper);
	transition: border-color var(--quick);
}
.woocommerce .quantity input.qty:focus { border-color: var(--ink); outline: none; }

.woocommerce-account .addresses .title .edit{
	float: none;
}

.woocommerce-MyAccount-content h2{
	margin-bottom: .5rem;
}

.woocommerce-MyAccount-content address{
	margin-bottom: 1rem;
}

.woocommerce-MyAccount-navigation{
	border-right: 1px solid var(--hairline);
}

	.woocommerce-MyAccount-navigation ul{
		    list-style: none;
    display: flex;
    flex-direction: column;
	    gap: 1rem;
	}



		.woocommerce-MyAccount-navigation-link{
    position: relative;
    padding-bottom: .25rem;
    transition: opacity var(--quick);
	    width: fit-content;
		text-transform: uppercase;
		    font-weight: 500;
}

	.woocommerce-MyAccount-navigation-link a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
	}

	.woocommerce-MyAccount-navigation-link a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Log out is a .btn (see woocommerce/myaccount/navigation.php), not a nav
   link: no hover underline, and a little air above it to set it apart. */
.woocommerce-MyAccount-navigation-link--customer-logout {
	padding-bottom: 0;
	margin-top: 1rem;
}
.woocommerce-MyAccount-navigation-link--customer-logout a::after {
	display: none;
}

/* Do NOT flex the add-to-cart row.
   The calculator is hooked in as a sibling INSIDE that wrapper, so flexing it
   put the calculator, the quantity box and the button all on one line — and
   `align-items: stretch` blew the button up into a full-height black slab.
   WooCommerce already lays the quantity and button out inline; the only thing
   actually wrong was the quantity input's width, fixed above. The calculator is
   a block and takes its own line, which is where it belongs. */
.woocommerce div.product form.cart .button {
	vertical-align: top;
	margin-left: .75rem;
}

/* ---- Result count / ordering: quiet UI type ---------------------------- */

.woocommerce-wrapper{
	display: flex;
	gap: 5rem;
	margin-bottom: 5rem;
}

.woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells{
	width: auto;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-family: var(--sans);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.woocommerce-page table.cart td.actions .coupon{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.woocommerce-page table.cart td.actions .input-text{
	width: 100%;
}

:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:disabled[disabled]{
	color: var(--paper);
}

@media (max-width: 900px) {

	.woocommerce-wrapper{
		flex-direction: column;
	}

	.woocommerce .cart-collaterals .cross-sells h2{
		margin-bottom: 2rem;
	}

	.woocommerce ul.products, ul.products,
	.woocommerce ul.products[class*="columns-"], ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-MyAccount-content {margin-top: 5rem; margin-bottom: 5rem;}
	.section:has(.woocommerce-MyAccount-navigation){
		padding-block: 0;
		padding-top: 1rem;
	}

	.woocommerce-MyAccount-navigation{
		border-right: none;
		border-bottom: 1px solid var(--hairline);
	}
	.woocommerce-MyAccount-navigation ul{
		padding-inline-start: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.woocommerce-MyAccount-navigation-link--customer-logout {
		grid-column: 1 / -1;  /* full row under the two-column grid, not squeezed into a cell */
	}
	.col-2.woocommerce-Address{
		margin-top: 2rem;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text{
		width: 100%;
	}

	.woocommerce table.cart td.actions .coupon .input-text+.button{
		width: 100%;
	}

	.woocommerce-Button.wc-forward, .button.wc-forward, .woocommerce-Button.button, .woocommerce-MyAccount-content .button, .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout, .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout a{
		width: 100%;
		text-align: center;
	}

	.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout a{
	    justify-content: center;
	}
}