/*
Theme Name: Shoptimizer Child — Luigi Sardo
Theme URI:
Description: Brutalist/minimal monospace customization of Shoptimizer. IBM Plex Mono, black/white, no chrome.
Author: Luigi Sardo
Author URI:
Template: shoptimizer
Version: 2.32.109
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root,
html[data-theme="light"] {
	--ls-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--ls-fg: #000000;
	--ls-bg: #ffffff;
	--ls-muted: #6e6e6e;
	--ls-line: #000000;
	--ls-faint: #e5e5e5;
	--ls-size: 16px;
	--ls-lh: 1.5;
	--ls-pad: 12px;
}

html[data-theme="dark"] {
	--ls-fg: #ffffff;
	--ls-bg: #0a0a0a;
	--ls-muted: #888888;
	--ls-line: #ffffff;
	--ls-faint: #2a2a2a;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .site,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] #content,
html[data-theme="dark"] .shoptimizer-archive,
html[data-theme="dark"] .ls-catalog-main {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
}

html[data-theme="dark"] img.ls-card__image {
	mix-blend-mode: normal;
}

/* Dark-mode: header and footer text overrides for any element that hardcodes a color */
html[data-theme="dark"] .site-footer *:not(input):not(button),
html[data-theme="dark"] #colophon *:not(input):not(button),
html[data-theme="dark"] .topbar-wrapper,
html[data-theme="dark"] .topbar-wrapper *,
html[data-theme="dark"] #masthead *:not(.cart-contents):not(.cart-contents *):not(.ls-theme-toggle):not(.ls-theme-toggle *):not(input):not(.ls-flag *) {
	color: inherit !important;
}

/* Force the muted-text shade in dark mode for things that were grey on grey */
html[data-theme="dark"] .ls-card__color,
html[data-theme="dark"] .ls-card__sizes .ls-size-btn,
html[data-theme="dark"] .ls-card__price,
html[data-theme="dark"] .ls-card__title,
html[data-theme="dark"] .topbar-wrapper,
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] #colophon a,
html[data-theme="dark"] .ls-left-header__label {
	color: var(--ls-fg) !important;
}

html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] #colophon p {
	color: var(--ls-fg) !important;
}

/* Footer bottom strip — invert in dark mode (was solid black) */
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .shoptimizer-footer-bottom,
html[data-theme="dark"] .site-info {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

/* Dark-mode topbar */
html[data-theme="dark"] .topbar-wrapper {
	background: var(--ls-bg) !important;
	color: var(--ls-muted) !important;
	border-bottom-color: var(--ls-faint) !important;
}

/* ============================================================
   Cart modal — replaces the right-drawer
   ============================================================ */

/* Disable the Shoptimizer right-drawer entirely */
#shoptimizerCartDrawer,
.shoptimizer-mini-cart-wrap,
.menu-overlay {
	display: none !important;
}

.ls-cart-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
}

.ls-cart-modal.is-open { display: flex; }

.ls-cart-modal__dialog {
	background: var(--ls-bg);
	color: var(--ls-fg);
	width: 100%;
	max-width: 960px;
	max-height: 88vh;
	padding: 40px 32px 24px;
	position: relative;
	font-family: var(--ls-font);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ls-cart-modal__close {
	all: unset;
	position: absolute;
	top: 12px;
	right: 16px;
	cursor: pointer;
	font-size: 12px;
	color: var(--ls-fg);
	padding: 4px 8px;
	border: 1px solid var(--ls-fg);
	text-transform: uppercase;
}

.ls-cart-modal__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--ls-fg);
}

.ls-cart-modal__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ------------------------------------------------------------------ */
/* Custom cart table — used in the cart modal and (via the .ls-cart-table
   class plus shared shop_table styles below) on /cart and /checkout. */
/* ------------------------------------------------------------------ */

.ls-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	color: var(--ls-fg);
	font-size: 13px;
	text-transform: uppercase;
	text-align: center;
	padding: 64px 0;
	letter-spacing: 0.08em;
}
.ls-cart-empty__icon svg {
	width: 54px;
	height: 54px;
	fill: var(--ls-fg);
	display: block;
}
.ls-cart-empty__text {
	font-family: var(--ls-font);
	font-size: 15px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Strip WC's .woocommerce-info box styling off the /cart empty message so the
   branded icon + EMPTY CART layout shows cleanly. */
.woocommerce .cart-empty.ls-cart-empty,
.woocommerce-page .cart-empty.ls-cart-empty {
	background: none !important;
	border: 0 !important;
	padding: 64px 0 !important;
	margin: 0 !important;
	color: var(--ls-fg) !important;
}
.woocommerce .cart-empty.ls-cart-empty::before,
.woocommerce-page .cart-empty.ls-cart-empty::before {
	display: none !important;
}

.ls-cart-modal__spinner {
	width: 32px;
	height: 32px;
	margin: 64px auto;
	border: 2px solid var(--ls-faint);
	border-top-color: var(--ls-fg);
	border-radius: 50%;
	animation: ls-modal-spin 0.7s linear infinite;
}

.ls-cart-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ls-font);
	font-size: 13px;
}

.ls-cart-table thead th {
	text-align: left;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ls-muted);
	padding: 12px 12px;
	border-bottom: 1px solid var(--ls-fg);
	border-right: 1px solid var(--ls-faint);
	background: transparent;
}

.ls-cart-table thead th:last-child {
	border-right: 0;
}

/* The PRODUCT header spans the image + name columns so the label sits at
   the far left of the table, aligned over the product thumbnail. */
.ls-cart-table thead th.ls-cart-th--product {
	text-align: left;
	padding-left: 0;
}

.ls-cart-table thead th:nth-child(2),
.ls-cart-table thead th:nth-child(3),
.ls-cart-table thead th:nth-child(4) {
	text-align: center;
}

.ls-cart-table thead th:last-child {
	text-align: right;
}

.ls-cart-table tbody td {
	vertical-align: middle;
	padding: 16px 12px;
	border-bottom: 1px solid var(--ls-faint);
	border-right: 1px solid var(--ls-faint);
	color: var(--ls-fg);
}

.ls-cart-table tbody td:last-child {
	border-right: 0;
}

/* The image cell and the name cell visually belong to the same "PRODUCT"
   column — no vertical separator between them. */
.ls-cart-table tbody td.ls-cart-row__image {
	border-right: 0 !important;
}

.ls-cart-row__image {
	width: 72px;
}

.ls-cart-row__image img,
.ls-cart-row__img {
	display: block;
	width: 72px !important;
	height: auto !important;
	margin: 0 !important;
	border: 1px solid var(--ls-faint);
	border-radius: 0 !important;
}

.ls-cart-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--ls-fg);
	font-size: 32px;
	line-height: 1;
	color: var(--ls-fg);
	background: var(--ls-bg);
}

.ls-cart-row__name {
	text-align: left;
}

.ls-cart-row__title {
	display: block;
	color: var(--ls-fg);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.ls-cart-row__title:hover {
	text-decoration: underline;
}

.ls-cart-row__attrs {
	display: block;
	margin-top: 4px;
	color: var(--ls-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ls-cart-row__qty,
.ls-cart-row__price {
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Total cell — single line "$X.XX CAD" at the same font size as the
   footer grand total, right-aligned with tabular figures so the amounts
   line up cleanly down the column. */
.ls-cart-row__total {
	text-align: right;
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ls-fg);
}

.ls-cart-row--tariff td {
	background: rgba(0, 0, 0, 0.02);
}

.ls-cart-table tfoot td {
	padding: 18px 12px;
	border-top: 1px solid var(--ls-fg);
	border-bottom: 0;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.ls-cart-foot__total {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- Cart modal cart table: mirrors the /cart page layout ---- */

/* Leading remove (trash) column + the total column carry no vertical
   separators, so the trash sits flush against the thumbnail (one PRODUCT
   group) and the row ends cleanly — same as /cart. */
.ls-cart-table tbody td.ls-cart-row__remove,
.ls-cart-table tbody td.ls-cart-row__total,
.ls-cart-table thead th.ls-cart-th--total {
	border-right: 0;
}
.ls-cart-table thead th.ls-cart-th--total {
	text-align: right;
}
.ls-cart-row__remove {
	width: 40px;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

/* Footer: empty remove cell · GRAND TOTAL label · grand total. */
.ls-cart-foot__remove {
	width: 40px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.ls-cart-foot__label {
	text-align: left;
}

/* Quantity spinner — − value + as connected bordered cells, matching the
   /cart spinner. Explicit !important background defeats Shoptimizer's global
   button styling (which otherwise fills these solid). */
.ls-cart-row__qty .ls-qty {
	display: inline-flex;
	align-items: center;
}
.ls-cart-modal .ls-qty__btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	min-width: 38px !important;
	height: 30px !important;
	padding: 0 !important;
	flex: 0 0 auto;
	border: 1px solid var(--ls-fg) !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	-webkit-user-select: none;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.ls-cart-modal .ls-qty__btn:hover:not([disabled]) {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}
.ls-cart-modal .ls-qty__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}
.ls-qty__value {
	box-sizing: border-box;
	width: 38px;
	min-width: 38px;
	flex: 0 0 auto;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid var(--ls-fg);
	border-bottom: 1px solid var(--ls-fg);
	background: var(--ls-bg);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 500;
}

/* Remove (trash) button — clean red trash glyph, red ring on hover. Mirrors
   /cart's a.remove. It's a <button>, so the global black-button reset
   (specificity 0,2,1 !important) was painting it black + bloating it with
   14px 24px padding; the extra `.ls-cart-row` here lifts this to 0,3,0 so the
   transparent/no-padding styling wins. */
.ls-cart-modal .ls-cart-row .ls-cart-remove-btn {
	all: unset;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 50% !important;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s ease;
}
.ls-cart-modal .ls-cart-remove-btn::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: #d40000;
	-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E");
	mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E");
}
.ls-cart-modal .ls-cart-row .ls-cart-remove-btn:hover { border-color: #d40000 !important; background: transparent !important; }
.ls-cart-modal .ls-cart-remove-btn[disabled] { cursor: default; }

/* Quantity update: green wash when increasing, red when decreasing (painted
   instantly, fades out via the base transition when cleared). The numeric
   cells blur while the request is in flight, then sharpen onto the new total. */
.ls-cart-table tbody tr.ls-cart-row td {
	transition: background 0.4s ease;
}
.ls-cart-row.is-qty-up td {
	background: rgba(34, 160, 60, 0.14) !important;
	transition: none !important;
}
.ls-cart-row.is-qty-down td {
	background: rgba(212, 0, 0, 0.10) !important;
	transition: none !important;
}
.ls-cart-row .ls-qty__value,
.ls-cart-row .ls-cart-row__price,
.ls-cart-row .ls-cart-row__total {
	transition: filter 0.25s ease;
}
.ls-cart-row.is-blur .ls-qty__value,
.ls-cart-row.is-blur .ls-cart-row__price,
.ls-cart-row.is-blur .ls-cart-row__total {
	filter: blur(4px);
}

/* Row being removed — red wash + dim + trash-to-spinner, no pointer events. */
.ls-cart-row.is-removing { pointer-events: none; }
.ls-cart-row.is-removing td {
	background: rgba(212, 0, 0, 0.08) !important;
	opacity: 0.55;
}
.ls-cart-modal .ls-cart-row.is-removing .ls-cart-remove-btn::before {
	background-color: transparent;
	-webkit-mask: none;
	mask: none;
	border: 2px solid rgba(212, 0, 0, 0.3);
	border-top-color: #d40000;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	animation: ls-modal-spin 0.7s linear infinite;
}

/* Active Buy-X-Get-Y offer row — a subtle "redeemed" label, no money column.
   Faint green wash + green check tag, with the plugin's offer label in muted text. */
.ls-cart-row--offer td { background: rgba(15, 122, 52, 0.05); }
[data-theme="dark"] .ls-cart-row--offer td { background: rgba(15, 122, 52, 0.14); }
.ls-cart-row__icon--offer {
	color: #0f7a34;
	border-color: #0f7a34 !important;
	font-size: 28px !important;
}
.ls-cart-offer-tag {
	display: inline-block;
	color: #0f7a34;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ls-cart-offer-name {
	display: block;
	margin-top: 3px;
	color: var(--ls-muted);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Applied-coupon row — faint wash, negative amount, subtle × to remove. */
.ls-cart-row--coupon td { background: rgba(0, 0, 0, 0.02); }
[data-theme="dark"] .ls-cart-row--coupon td { background: rgba(255, 255, 255, 0.03); }
.ls-cart-modal .ls-coupon-remove {
	all: unset;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ls-cart-modal .ls-coupon-remove::before {
	content: "✕";
	font-size: 12px;
	line-height: 1;
	color: var(--ls-muted);
}
.ls-cart-modal .ls-coupon-remove:hover { background: rgba(0, 0, 0, 0.06) !important; }
.ls-cart-modal .ls-coupon-remove:hover::before { color: var(--ls-fg); }

/* Coupon form — COUPON CODE input + APPLY COUPON button, matching /cart. */
.ls-cart-modal__coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}
.ls-cart-coupon__input {
	flex: 1 1 200px;
	min-width: 0;
	box-sizing: border-box;
	padding: 14px 16px;
	font-family: var(--ls-font);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--ls-fg);
	border-radius: 0;
	background: var(--ls-bg);
	color: var(--ls-fg);
}
.ls-cart-coupon__input::placeholder { color: var(--ls-muted); }
.ls-cart-coupon__apply {
	flex: 0 0 auto;
	padding: 14px 24px;
	font-family: var(--ls-font);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--ls-fg) !important;
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ls-cart-coupon__apply:hover:not([disabled]) {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
}
.ls-cart-coupon__apply[disabled] { opacity: 0.5; cursor: default; }
.ls-cart-coupon__msg {
	flex: 1 1 100%;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ls-muted);
}
.ls-cart-coupon__msg.is-error { color: #d40000; }

/* Coupon gating — a "USE A COUPON CODE" text link reveals the input + apply;
   a black X to the right of apply cancels back to the link. Shared by the
   modal and /cart. */
/* It's a <button>, so the global black-button reset (0,2,1 !important) was
   painting it black + adding 14px 24px padding; these context selectors are
   0,3,0 so the plain text-link styling wins (main cart + modal). */
.woocommerce-cart .woocommerce-cart-form .ls-coupon-toggle,
.ls-cart-modal .ls-coupon-wrap .ls-coupon-toggle {
	all: unset;
	cursor: pointer;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ls-fg) !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	text-decoration: underline !important;
	text-decoration-color: var(--ls-muted) !important;
	text-underline-offset: 3px;
}
.woocommerce-cart .woocommerce-cart-form .ls-coupon-toggle:hover,
.ls-cart-modal .ls-coupon-wrap .ls-coupon-toggle:hover { text-decoration-color: var(--ls-fg) !important; }
.ls-coupon-cancel {
	all: unset;
	flex: 0 0 auto;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 14px 12px !important;
	cursor: pointer;
	font-size: 16px !important;
	line-height: 1 !important;
	color: var(--ls-fg) !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	transition: opacity 0.15s ease;
}
.ls-coupon-cancel:hover { opacity: 0.55; }

/* Modal: form hidden until the link is clicked. */
.ls-coupon-wrap { margin-top: 8px; }
.ls-coupon-wrap .ls-cart-modal__coupon { display: none; margin-top: 12px; }
.ls-coupon-wrap.is-open .ls-cart-modal__coupon { display: flex; }
.ls-coupon-wrap.is-open .ls-coupon-toggle { display: none; }

/* /cart: WC's .coupon hidden until the link is clicked. The extra
   .ls-coupon-form selector raises specificity above the display:flex rule
   below so the collapsed state actually wins. */
.woocommerce-cart .coupon.ls-coupon-form.ls-coupon-collapsed { display: none !important; }
.woocommerce-cart .coupon.ls-coupon-form {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
}
.woocommerce-cart .coupon.ls-coupon-form .input-text {
	flex: 1 1 200px !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box;
}

/* Checkout button — white by default, black fill on hover, with a Font
   Awesome arrow-right that slides in to the right of the label on hover. */
.ls-cart-modal__checkout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
}
.ls-cart-modal__checkout:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}
.ls-cart-modal__checkout::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 13px;
	background-color: currentColor;
	opacity: 0;
	transform: translateX(-4px);
	-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
	mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
	transition: width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.ls-cart-modal__checkout:hover::after {
	width: 16px;
	margin-left: 8px;
	opacity: 1;
	transform: translateX(0);
}

/* Enlarged image preview shown on hover over any cart row thumbnail (modal
   or /cart). Floats beside the thumbnail; pointer-events:none so it can't
   trap the cursor. */
.ls-img-preview {
	position: fixed;
	z-index: 1000002;
	width: 500px;
	height: 500px;
	max-width: 90vw;
	max-height: 90vh;
	box-sizing: border-box;
	padding: 8px;
	background: var(--ls-bg);
	border: 1px solid var(--ls-fg);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}
.ls-img-preview.is-visible { opacity: 1; visibility: visible; }
.ls-img-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* /cart quantity change — same green/red wash + numeric blur as the modal. */
.woocommerce-cart table.shop_table.cart tr.cart_item td {
	transition: background 0.4s ease;
}
.woocommerce-cart table.shop_table.cart tr.cart_item.is-qty-up td {
	background: rgba(34, 160, 60, 0.14) !important;
	transition: none !important;
}
.woocommerce-cart table.shop_table.cart tr.cart_item.is-qty-down td {
	background: rgba(212, 0, 0, 0.10) !important;
	transition: none !important;
}
.woocommerce-cart table.shop_table.cart tr.cart_item input.qty,
.woocommerce-cart table.shop_table.cart tr.cart_item .product-price,
.woocommerce-cart table.shop_table.cart tr.cart_item .product-subtotal {
	transition: filter 0.25s ease;
}
.woocommerce-cart table.shop_table.cart tr.cart_item.is-blur input.qty,
.woocommerce-cart table.shop_table.cart tr.cart_item.is-blur .product-price,
.woocommerce-cart table.shop_table.cart tr.cart_item.is-blur .product-subtotal {
	filter: blur(4px);
}

/* Responsive — collapse columns on narrow screens. */
@media (max-width: 640px) {
	.ls-cart-table thead { display: none; }
	.ls-cart-table tbody td {
		display: block;
		text-align: left;
		padding: 4px 0;
		border-bottom: 0;
	}
	.ls-cart-table tbody tr {
		display: grid;
		grid-template-columns: 64px 1fr;
		gap: 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--ls-faint);
	}
	.ls-cart-row__image { grid-row: span 4; }
}

/* ------------------------------------------------------------------ */
/* Official /cart and /checkout pages — apply the same brutalist table
   look to WooCommerce's shop_table markup. The tariff is added as a WC
   fee (see ls_apply_tariff_fee in functions.php) so it shows up in the
   cart totals block automatically. */
/* ------------------------------------------------------------------ */

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	border: 0 !important;
	border-collapse: collapse !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	background: var(--ls-bg) !important;
}

.woocommerce-cart table.shop_table thead th,
.woocommerce-checkout table.shop_table thead th {
	background: var(--ls-bg) !important;
	color: var(--ls-muted) !important;
	font-family: var(--ls-font) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid var(--ls-fg) !important;
	padding: 12px 12px !important;
	border-radius: 0 !important;
}

.woocommerce-cart table.shop_table tbody td,
.woocommerce-checkout table.shop_table tbody td,
.woocommerce-cart table.shop_table tfoot td,
.woocommerce-cart table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td,
.woocommerce-checkout table.shop_table tfoot th {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border-bottom: 1px solid var(--ls-faint) !important;
	padding: 16px 12px !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
}

.woocommerce-cart table.shop_table tfoot tr:last-child td,
.woocommerce-cart table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td,
.woocommerce-checkout table.shop_table tfoot tr:last-child th {
	border-bottom: 0 !important;
	border-top: 1px solid var(--ls-fg) !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
}

/* Product thumbnail in the cart table — small bordered square. */
.woocommerce-cart table.shop_table .product-thumbnail img,
.woocommerce-checkout table.shop_table .product-thumbnail img {
	width: 72px !important;
	height: auto !important;
	border: 1px solid var(--ls-faint) !important;
	border-radius: 0 !important;
}

/* Product name / link styling */
.woocommerce-cart table.shop_table td.product-name a,
.woocommerce-checkout table.shop_table td.product-name a {
	color: var(--ls-fg) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
}

.woocommerce-cart table.shop_table td.product-name a:hover,
.woocommerce-checkout table.shop_table td.product-name a:hover {
	text-decoration: underline !important;
}

.woocommerce-cart table.shop_table dl.variation,
.woocommerce-checkout table.shop_table dl.variation {
	color: var(--ls-muted) !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin-top: 4px !important;
}

.woocommerce-cart table.shop_table dl.variation dt,
.woocommerce-cart table.shop_table dl.variation dd {
	display: inline !important;
	margin: 0 4px 0 0 !important;
	padding: 0 !important;
	font-weight: 400 !important;
}

/* Highlight the fee row (US import tariff) — slightly tinted background
   and the radiation glyph as a pseudo-prefix. */
.woocommerce-cart tr.fee,
.woocommerce-checkout tr.fee {
	background: rgba(0, 0, 0, 0.02) !important;
}

.woocommerce-cart tr.fee th,
.woocommerce-checkout tr.fee th {
	position: relative;
}

.woocommerce-cart tr.fee th::before,
.woocommerce-checkout tr.fee th::before {
	content: "☢ ";
	margin-right: 6px;
	font-size: 14px;
}

/* Quantity input + Shoptimizer's custom +/- buttons. Render the +/- via
   our own ::before content (their icon font was being overridden by our
   global font-family rules, leaving the buttons blank). */
.woocommerce-cart table.shop_table .quantity {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
}

.woocommerce-cart table.shop_table .quantity input.qty {
	width: 38px !important;
	box-sizing: border-box !important;
	padding: 6px 2px !important;
	border: 1px solid var(--ls-fg) !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-align: center !important;
	height: 30px !important;
	box-sizing: border-box !important;
	-moz-appearance: textfield;
}

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

.woocommerce-cart table.shop_table .quantity .quantity-button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 30px !important;
	border: 1px solid var(--ls-fg) !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	cursor: pointer;
	font-family: var(--ls-font) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-cart table.shop_table .quantity .quantity-button:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

/* Replace Shoptimizer's empty icon-font glyphs with simple +/- text. */
.woocommerce-cart table.shop_table .quantity .quantity-up::before,
.woocommerce-cart table.shop_table .quantity .quantity-down::before {
	content: "" !important;
	display: none !important;
}

.woocommerce-cart table.shop_table .quantity .quantity-up::after {
	content: "+";
	display: block;
	font-family: var(--ls-font);
}

.woocommerce-cart table.shop_table .quantity .quantity-down::after {
	content: "−";
	display: block;
	font-family: var(--ls-font);
}

/* Reorder the spinner to − input + (WC/Shoptimizer renders it as
   input · + · −). The nav wrapper becomes display:contents so its +/−
   buttons participate directly in the .quantity flex row, then we order
   them. CSS-only so it survives the plugin re-adding buttons after every
   cart update — no JS race. */
.woocommerce-cart table.shop_table .quantity .quantity-nav {
	display: contents !important;
}
.woocommerce-cart table.shop_table .quantity label.screen-reader-text { order: 0; }
.woocommerce-cart table.shop_table .quantity .quantity-down.minus { order: 1; }
.woocommerce-cart table.shop_table .quantity input.qty { order: 2; }
.woocommerce-cart table.shop_table .quantity .quantity-up.plus { order: 3; }

.woocommerce-cart table.shop_table td.product-remove a.remove {
	color: var(--ls-muted) !important;
	background: transparent !important;
	font-size: 14px !important;
}

.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
	color: var(--ls-fg) !important;
}

/* Cart totals block on /cart and order review on /checkout */
.woocommerce-cart .cart_totals,
.woocommerce-checkout .order-total,
.woocommerce-checkout .cart-subtotal,
.woocommerce-checkout #order_review {
	font-family: var(--ls-font) !important;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-size: 16px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	font-weight: 400 !important;
	color: var(--ls-fg) !important;
}

/* "Proceed to checkout" / "Place order" buttons */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 16px 32px !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* /cart single-column layout. The default Shoptimizer/Woo layout is
   two columns (cart-form + collaterals); we stack vertically so the
   table comes first and the shipping/totals sit below as their own
   section. */
/* ------------------------------------------------------------------ */

.woocommerce-cart .shoptimizer-cart-wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px;
}

.woocommerce-cart .shoptimizer-cart-wrapper > .woocommerce-cart-form,
.woocommerce-cart .shoptimizer-cart-wrapper > .cart-collaterals,
.woocommerce-cart form.woocommerce-cart-form,
.woocommerce-cart .ls-accordion__body > form.woocommerce-cart-form {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* WC cart-form is float: left by default (the old 2-column layout).
   Force full width inside our accordion. */
.woocommerce-cart .ls-accordion--cart form.woocommerce-cart-form,
.woocommerce-cart .ls-accordion--cart table.shop_table.cart {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

/* Shoptimizer renders an extra "PRICE PER ITEM $X.XX" black bar at the
   bottom (the .cart-unit-price block). Hide it — we have our own
   ls-cart-per-item row above. */
.woocommerce-cart .cart-unit-price {
	display: none !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100% !important;
	float: none !important;
}

/* Make the shipping calculator a clearly delimited block under the table. */
.woocommerce-cart .shipping-calculator-form,
.woocommerce-cart .woocommerce-shipping-calculator {
	display: block !important;
	margin-top: 16px !important;
}

.woocommerce-cart .cart_totals h2 {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ls-fg);
	margin-bottom: 16px;
}

/* Hide the shipping calc's manual "Update" button — we auto-trigger it
   from JS once Geoapify populates the fields, so the user only confirms
   their address once. */
.woocommerce-cart button[name="calc_shipping"],
.woocommerce-cart .shipping-calculator-form button[type="submit"] {
	display: none !important;
}

/* The "Calculate shipping" toggle link — restyle as a brutalist label */
.woocommerce-cart a.shipping-calculator-button {
	color: var(--ls-fg) !important;
	font-family: var(--ls-font) !important;
	font-size: 12px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: underline !important;
}

/* Shipping calculator form fields — match brutalist input style */
.woocommerce-cart .shipping-calculator-form .form-row input,
.woocommerce-cart .shipping-calculator-form .form-row .select2-selection,
.woocommerce-cart .shipping-calculator-form .form-row select {
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	padding: 10px 12px !important;
	box-shadow: none !important;
	height: auto !important;
}

.woocommerce-cart .shipping-calculator-form .form-row label {
	font-family: var(--ls-font) !important;
	font-size: 11px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--ls-muted) !important;
}

/* Synthetic line-item rows injected into the items table (tariff + shipping). */
.woocommerce-cart table.shop_table.cart tr.ls-meta-row td {
	background: rgba(0, 0, 0, 0.025) !important;
	vertical-align: middle !important;
}

.woocommerce-cart table.shop_table.cart tr.ls-meta-row .ls-cart-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--ls-fg);
	font-size: 32px;
	line-height: 1;
	color: var(--ls-fg);
	background: var(--ls-bg);
}

.woocommerce-cart table.shop_table.cart tr.ls-meta-row .ls-cart-row__icon img {
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
}

.woocommerce-cart table.shop_table.cart tr.ls-meta-row .ls-cart-row__title {
	display: block;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ls-fg);
}

.woocommerce-cart table.shop_table.cart tr.ls-meta-row .ls-cart-row__attrs {
	display: block;
	margin-top: 4px;
	color: var(--ls-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Price-per-item summary block below the cart form. */
.ls-cart-per-item {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 16px;
	padding: 18px 12px;
	border-top: 1px solid var(--ls-fg);
	font-family: var(--ls-font);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ls-cart-per-item__label {
	color: var(--ls-fg);
	font-weight: 500;
}

.ls-cart-per-item__formula {
	color: var(--ls-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
}

.ls-cart-per-item__value {
	color: var(--ls-fg);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Buy-X-Get-Y banners on /cart — apply the brutalist look. The plugin emits
   .bxgy-cart-notice on this page (different class than .bxgy-shop-banner)
   so we override it separately. */
.woocommerce-cart .bxgy-banner-wrap,
.woocommerce-cart .bxgy-shop-banner-wrap {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 12px !important;
	left: auto !important;
	right: auto !important;
	position: static !important;
}

.woocommerce-cart .bxgy-cart-notice,
.woocommerce-cart .bxgy-shop-banner {
	background: var(--ls-fg) !important;
	background-image: none !important;
	color: var(--ls-bg) !important;
	font-family: var(--ls-font) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 18px 24px !important;   /* extra padding around the marquee text */
	border: 0 !important;
	border-radius: 0 !important;
	animation: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	filter: none !important;
	text-align: center !important;
	line-height: 1.4 !important;
	overflow: hidden !important;     /* clip the bouncing text */
}

.woocommerce-cart .bxgy-cart-notice::before,
.woocommerce-cart .bxgy-cart-notice::after,
.woocommerce-cart .bxgy-shop-banner::before,
.woocommerce-cart .bxgy-shop-banner::after {
	content: none !important;
	display: none !important;
	animation: none !important;
	background: transparent !important;
}

.woocommerce-cart .bxgy-banner-footer {
	display: none !important;
}

/* Make the cart banner stack full-bleed — the plugin's default container
   constrains them to a centered max-width. */
.woocommerce-cart #bxgy-cart-banners {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 16px;
}

.woocommerce-cart #bxgy-cart-banners .bxgy-banner-wrap,
.woocommerce-cart #bxgy-cart-banners .bxgy-cart-notice,
.woocommerce-cart #bxgy-cart-banners .bxgy-shop-banner {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.woocommerce-cart #bxgy-cart-banners .ls-bxgy-disclaimer {
	width: 100%;
}

/* "Check my cart for offer eligibility" button — match brutalist theme:
   transparent fill by default, fills black on hover. */
.woocommerce-cart .bxgy-check-btn,
.bxgy-check-btn {
	display: block;
	width: auto;
	margin: 24px auto 0 !important;
	padding: 12px 24px !important;
	background: transparent !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	box-shadow: none !important;
}

.woocommerce-cart .bxgy-check-btn:hover,
.bxgy-check-btn:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

.woocommerce-cart .bxgy-check-btn img,
.bxgy-check-btn img.emoji {
	display: none !important;
}

/* Hide the Shoptimizer checkout-timeline ("Shopping Cart → Shipping →
   Checkout → Confirmation") on /cart and /checkout. */
.woocommerce-cart .checkout-wrap,
.woocommerce-cart .checkout-bar,
.woocommerce-checkout .checkout-wrap,
.woocommerce-checkout .checkout-bar {
	display: none !important;
}

/* Coupon form — input on the left, Apply button on the right, single line. */
.woocommerce-cart .coupon {
	display: flex !important;
	gap: 8px !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	max-width: 480px;
}

.woocommerce-cart .coupon label[for="coupon_code"] {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.woocommerce-cart .coupon input#coupon_code {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	width: auto !important;
	min-width: 0 !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	box-shadow: none !important;
}

.woocommerce-cart .coupon input#coupon_code::placeholder {
	color: var(--ls-muted) !important;
	text-transform: uppercase !important;
}

.woocommerce-cart .coupon button[name="apply_coupon"] {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 10px 24px !important;
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	text-align: center !important;
	box-shadow: none !important;
}

.woocommerce-cart .coupon button[name="apply_coupon"]:hover {
	background: transparent !important;
	color: var(--ls-fg) !important;
}

/* The actions row hosting coupon + update_cart was rendered as a table-cell;
   give it sensible padding now that update_cart is hidden. */
.woocommerce-cart table.shop_table.cart tr.actions td {
	padding: 16px 12px !important;
	background: var(--ls-bg) !important;
}

/* ------------------------------------------------------------------ */
/* /cart layout reorganisation — sections from JS reorganizeLayout(). */
/* ------------------------------------------------------------------ */

.woocommerce-cart .ls-cart-section {
	background: var(--ls-bg);
	padding: 0;
	margin: 0;
}

.woocommerce-cart .ls-cart-section__title {
	font-family: var(--ls-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ls-fg);
	color: var(--ls-fg);
}

/* ------------------------------------------------------------------ */
/* Accordion containers (SHIPPING and CART). Subtle outer border, header
   has +/- caret on the far right, default state expanded. */
/* ------------------------------------------------------------------ */

.ls-accordion {
	border: 1px solid var(--ls-faint);
	background: var(--ls-bg);
	display: block;
	overflow: hidden;
}

.ls-accordion + .ls-accordion {
	margin-top: 16px;
}

.ls-accordion__header,
button.ls-accordion__header,
.woocommerce-cart button.ls-accordion__header,
.woocommerce-checkout button.ls-accordion__header {
	all: unset;
	box-sizing: border-box !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 16px 20px !important;
	margin: 0 !important;
	cursor: pointer !important;
	font-family: var(--ls-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--ls-fg) !important;
	background: var(--ls-bg) !important;
	background-color: var(--ls-bg) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background 0.15s ease !important;
}

.ls-accordion__header:hover,
.woocommerce-cart button.ls-accordion__header:hover,
.woocommerce-checkout button.ls-accordion__header:hover {
	background: rgba(0, 0, 0, 0.02) !important;
	background-color: rgba(0, 0, 0, 0.02) !important;
	color: var(--ls-fg) !important;
}

.ls-accordion[data-expanded="true"] .ls-accordion__header {
	border-bottom: 1px solid var(--ls-faint);
}

.ls-accordion__title {
	display: inline-block;
}

.ls-accordion__caret {
	width: 14px;
	height: 14px;
	position: relative;
	flex: 0 0 auto;
}

.ls-accordion__caret::before,
.ls-accordion__caret::after {
	content: "";
	position: absolute;
	background: var(--ls-fg);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ls-accordion__caret::before {
	width: 14px;
	height: 1px;
}

.ls-accordion__caret::after {
	width: 1px;
	height: 14px;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

/* In expanded state, hide the vertical bar so the caret reads as "−". */
.ls-accordion[data-expanded="true"] .ls-accordion__caret::after {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

.ls-accordion__body {
	padding: 20px;
	background: var(--ls-bg);
}

.ls-accordion[data-expanded="false"] .ls-accordion__body {
	display: none;
}

/* The CART accordion holds the WC cart-form, which has its own internal
   padding — collapse our padding so the table is flush. */
.ls-accordion--cart .ls-accordion__body {
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* Shipping form grid — 3-column city/state/zip layout, same dimensions
   in label mode and manual mode so toggling never causes layout shift. */
/* ------------------------------------------------------------------ */

.ls-shipping-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 12px 0 0;
	background: var(--ls-bg);
	border: 0;
}

.ls-shipping-grid__col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 6px;
	padding: 10px 14px;
	background: var(--ls-bg);
	min-height: 70px;
	box-sizing: border-box;
}

.ls-shipping-grid__col + .ls-shipping-grid__col {
	border-left: 1px solid var(--ls-faint);
}

.ls-shipping-grid__label {
	display: block;
	font-family: var(--ls-font);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ls-muted);
}

.ls-shipping-grid__value {
	display: block;
	font-family: var(--ls-font);
	font-size: 13px;
	color: var(--ls-fg);
	font-variant-numeric: tabular-nums;
	line-height: 24px;
	min-height: 24px;
}

/* Label mode: show the .value text, hide the actual input. */
.ls-form--label-mode .ls-shipping-grid__col .ls-shipping-grid__input {
	display: none !important;
}

/* Manual mode: hide the .value text, show the input with field styling. */
.ls-form--manual .ls-shipping-grid__col .ls-shipping-grid__value {
	display: none !important;
}

.ls-form--manual .ls-shipping-grid__col .ls-shipping-grid__input {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 8px !important;
	height: 24px !important;
	line-height: 22px !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	box-sizing: border-box;
	box-shadow: none !important;
}

/* Restyle the manual-entry toggle: white background, fills black on hover.
   Shoptimizer's global button styles set a dark fill; we override with
   !important so the toggle reads as a secondary action. */
.ls-shipping-manual-toggle,
button.ls-shipping-manual-toggle,
body.woocommerce-cart button.ls-shipping-manual-toggle {
	display: block !important;
	width: 100% !important;
	margin: 12px 0 0 !important;
	padding: 12px 14px !important;
	background: var(--ls-bg) !important;
	background-color: var(--ls-bg) !important;
	background-image: none !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background 0.15s ease, color 0.15s ease !important;
	text-align: center !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.ls-shipping-manual-toggle:hover,
.woocommerce-cart button.ls-shipping-manual-toggle:hover {
	background: var(--ls-fg) !important;
	background-color: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	opacity: 1 !important;   /* override the global button:hover 0.8 — solid fill */
}

/* Hide the "Change address" link — its job is now done by the accordion. */
.woocommerce-cart a.shipping-calculator-button,
.woocommerce-cart .shipping-calculator-button {
	display: none !important;
}

/* The "×" clear button sitting at the right edge of the street-address
   input. Shown only when the input has a value. */
.ls-address-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ls-bg);
	color: var(--ls-muted);
	border: 1px solid var(--ls-faint);
	border-radius: 0;
	font-family: var(--ls-font);
	font-size: 14px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	z-index: 2;
}

/* The X only makes sense when there's an address to clear. While the street
   field is empty (placeholder visible) — e.g. right after a country change —
   hide both the clear button and the geolocation status, so nothing overlaps
   or flashes over an empty input. Driven purely by the field's emptiness, so
   it stays correct through programmatic clears/re-renders (no JS toggling). */
#calc_shipping_address:placeholder-shown ~ .ls-address-clear,
#calc_shipping_address:placeholder-shown ~ .ics-aac-status {
	display: none !important;
}

.ls-address-clear:hover {
	background: var(--ls-fg);
	color: var(--ls-bg);
	border-color: var(--ls-fg);
}

/* Reserve room on the right of the input so the clear button doesn't
   overlap typed text. */
#calc_shipping_address {
	padding-right: 38px !important;
}

/* Street address row → 3-col / 1-col grid. Both labels on the top row,
   both inputs on the bottom row, so inputs align horizontally. */
.ls-address-row {
	display: grid !important;
	grid-template-columns: 3fr 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 6px;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 16px !important;
}

.ls-address-row > label[for="calc_shipping_address"] {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	margin: 0;
}

.ls-address-row .ls-apt-label {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	margin: 0;
}

/* Geoapify wrapper (or the bare input) — row 2, column 1. */
.ls-address-row .ics-aac-wrapper,
.ls-address-row > input#calc_shipping_address {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.ls-address-row .ls-apt-input {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	min-width: 0;
	margin: 0;
}

.ls-apt-label {
	font-family: var(--ls-font);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ls-fg);
	margin-bottom: 4px;
	display: block;
}

.ls-apt-input {
	width: 100% !important;
	padding: 10px 12px !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	box-sizing: border-box;
	letter-spacing: 0.04em;
}

.ls-apt-input::placeholder {
	color: var(--ls-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
}

/* Hide Geoapify's suggestion dropdown when the user has chosen to enter
   the address manually. Their typing should NOT trigger autocomplete. */
.ls-form--manual .ics-aac-dropdown,
.ls-form--manual .ics-aac-status {
	display: none !important;
}

/* Price-per-item — full width row beneath the cart accordion. */
.ls-cart-per-item {
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-cart .ls-cart-section--shipping .shipping-calculator-form {
	background: var(--ls-bg) !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.woocommerce-cart .ls-shipping-empty {
	color: var(--ls-muted);
	font-family: var(--ls-font);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-cart .ls-cart-section--checkout {
	margin-top: 8px;
}

.woocommerce-cart .ls-cart-section--checkout .wc-proceed-to-checkout {
	margin: 0;
	padding: 0;
}

.woocommerce-cart .ls-cart-section--checkout a.checkout-button {
	display: block;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

/* Hide the now-redundant collaterals block (totals breakdown). */
.woocommerce-cart .shoptimizer-cart-wrapper .cart-collaterals {
	display: none !important;
}

.ls-row-hidden {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* /cart items table: visible headers + vertical column separators,
   matching the AJAX modal cart table. */
/* ------------------------------------------------------------------ */

.woocommerce-cart table.shop_table.cart {
	background: var(--ls-bg) !important;
}

.woocommerce-cart table.shop_table.cart thead {
	display: table-header-group !important;
}

.woocommerce-cart table.shop_table.cart thead th {
	background: var(--ls-bg) !important;
	color: var(--ls-muted) !important;
	font-family: var(--ls-font) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid var(--ls-fg) !important;
	border-right: 1px solid var(--ls-faint) !important;
	padding: 12px 12px !important;
	text-align: left !important;
}

.woocommerce-cart table.shop_table.cart thead th:last-child {
	border-right: 0 !important;
}

.woocommerce-cart table.shop_table.cart thead th.product-price,
.woocommerce-cart table.shop_table.cart thead th.product-quantity,
.woocommerce-cart table.shop_table.cart thead th.product-subtotal {
	text-align: center !important;
}

/* Remove column — small red × shown to the left of each product image. */
.woocommerce-cart table.shop_table.cart .product-remove {
	display: table-cell !important;
	width: 28px !important;
	padding: 0 8px !important;
	text-align: center !important;
	vertical-align: middle !important;
	border-right: 0 !important;
}

/* Red trash-can icon (replaces WC's "×"). The × text is hidden and a
   trash SVG is painted via mask so it inherits the red color. A red
   circle outline appears on hover. */
.woocommerce-cart table.shop_table.cart .product-remove a.remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	background: transparent !important;
	color: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, background 0.15s ease !important;
	position: relative;
}

.woocommerce-cart table.shop_table.cart .product-remove a.remove::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: #d40000;
	-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E");
	mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E");
}

.woocommerce-cart table.shop_table.cart .product-remove a.remove:hover {
	border-color: #d40000 !important;
	background: transparent !important;
}

/* Row being deleted — red wash + dim + spinner, no pointer events. */
.woocommerce-cart table.shop_table.cart tr.cart_item.is-removing {
	position: relative;
	pointer-events: none;
}

.woocommerce-cart table.shop_table.cart tr.cart_item.is-removing td {
	background: rgba(212, 0, 0, 0.08) !important;
	opacity: 0.55;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.woocommerce-cart table.shop_table.cart tr.cart_item.is-removing td.product-remove a.remove::before {
	/* swap the trash icon for a spinner while removing */
	background-color: transparent;
	border: 2px solid rgba(212, 0, 0, 0.3);
	border-top-color: #d40000;
	border-radius: 50%;
	-webkit-mask: none;
	mask: none;
	width: 16px;
	height: 16px;
	animation: ls-modal-spin 0.7s linear infinite;
}

/* Don't show a remove × on the tariff row — it's a fee, not a removable item. */
.woocommerce-cart table.shop_table.cart tr.ls-meta-row .product-remove {
	visibility: hidden;
}

/* Show the header cell as blank (no SR-only text taking up label space). */
.woocommerce-cart table.shop_table.cart thead th.product-remove {
	display: table-cell !important;
	width: 28px !important;
	padding: 0 !important;
	border-right: 0 !important;
}

/* Shoptimizer's parent CSS hides .product-price on the cart table; we
   want it visible to act as the unit-price column. */
.woocommerce-cart table.shop_table.cart .product-price,
.woocommerce-cart table.cart .product-price {
	display: table-cell !important;
}

/* /cart now uses the modal's 4-header structure (rewritten via JS):
   PRODUCT (colspan=3, covers remove+thumb+name) · QUANTITY · UNIT PRICE ·
   TOTAL PRICE. */
.woocommerce-cart table.shop_table.cart thead th.ls-cart-th--product {
	text-align: left !important;
}

.woocommerce-cart table.shop_table.cart thead th.ls-cart-th--qty,
.woocommerce-cart table.shop_table.cart thead th.ls-cart-th--price {
	text-align: center !important;
}

.woocommerce-cart table.shop_table.cart thead th.ls-cart-th--total {
	text-align: right !important;
	padding-right: 12px !important;
}

/* Match the modal: same total formatting/font-size on /cart subtotals. */
.woocommerce-cart table.shop_table.cart td.product-subtotal {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--ls-fg) !important;
	font-variant-numeric: tabular-nums !important;
	text-align: right !important;
	padding-right: 12px !important;
}

/* Grand TOTAL row in the cart table footer. */
.woocommerce-cart table.shop_table.cart tfoot.ls-cart-foot td {
	padding: 18px 12px !important;
	border-top: 1px solid var(--ls-fg) !important;
	border-bottom: 0 !important;
	border-right: 0 !important;
	font-size: 14px !important;
	font-family: var(--ls-font) !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
}

.woocommerce-cart table.shop_table.cart tfoot.ls-cart-foot td.ls-cart-foot__remove {
	width: 28px !important;
	padding: 0 !important;
	border-top: 0 !important;
}

.woocommerce-cart table.shop_table.cart tfoot.ls-cart-foot td.ls-cart-foot__label {
	text-align: left !important;
}

.woocommerce-cart table.shop_table.cart tfoot.ls-cart-foot td.ls-cart-foot__total {
	text-align: right !important;
	font-variant-numeric: tabular-nums !important;
}

.woocommerce-cart table.shop_table.cart td.product-subtotal .ls-cart-row__total-line {
	display: inline;
	white-space: nowrap;
}

/* Vertical separators between body cells. */
.woocommerce-cart table.shop_table.cart tbody td {
	border-right: 1px solid var(--ls-faint) !important;
	vertical-align: middle !important;
}

.woocommerce-cart table.shop_table.cart tbody td:last-child {
	border-right: 0 !important;
}

/* Quantity + unit-price columns centered (match their centered headers);
   the total column stays right-aligned so its decimals line up with the
   GRAND TOTAL below — accounting style. */
.woocommerce-cart table.shop_table.cart td.product-quantity,
.woocommerce-cart table.shop_table.cart td.product-price {
	text-align: center !important;
}

.woocommerce-cart table.shop_table.cart td.product-quantity .quantity {
	display: inline-flex;
	justify-content: center;
}

/* The actions row spans the whole table and shouldn't carry vertical lines. */
.woocommerce-cart table.shop_table.cart tbody tr.actions td,
.woocommerce-cart table.shop_table.cart tbody tr:has(td.actions) td {
	border-right: 0 !important;
	text-align: left !important;
}

/* ------------------------------------------------------------------ */
/* Tariff icon — FontAwesome solid "tag" rendered inline as an SVG. We
   fill it with currentColor so the same markup looks right against any
   page background, and size it to match the product thumbnail. */
/* ------------------------------------------------------------------ */

.ls-cart-row__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--ls-fg);
	background: var(--ls-bg);
	color: var(--ls-fg);
	box-sizing: border-box;
}

.ls-cart-row__icon .ls-tag-icon,
.ls-cart-row__icon .ls-truck-icon,
.ls-cart-row__icon .ls-percent-icon {
	width: 50%;
	height: 50%;
	fill: currentColor;
	display: block;
}

/* On /cart, the thumbnail cell stretches — let the icon container fill it. */
.woocommerce-cart table.shop_table.cart tr.ls-meta-row .ls-cart-row__icon {
	width: 100%;
	max-width: 90px;
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Price-per-item value — plain $X.XX CAD, right-aligned. */
.ls-cart-per-item__value {
	display: inline-block;
	color: var(--ls-fg);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	-webkit-text-fill-color: var(--ls-fg);
}

.ls-cart-modal__actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.ls-cart-modal__view-cart,
.ls-cart-modal__checkout {
	flex: 1;
	padding: 14px 16px;
	text-align: center;
	font-family: var(--ls-font);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid var(--ls-fg);
}

/* When the user is already on /cart, the modal hides the VIEW CART link,
   and CHECKOUT takes the full available width. */
.ls-cart-modal__actions--checkout-only .ls-cart-modal__checkout {
	width: 100%;
	flex: 1 1 100%;
}

.ls-cart-modal__view-cart {
	background: var(--ls-bg);
	color: var(--ls-fg) !important;
}

.ls-cart-modal__checkout {
	background: var(--ls-bg);
	color: var(--ls-fg) !important;
}

.ls-cart-modal__view-cart:hover {
	background: var(--ls-fg);
	color: var(--ls-bg) !important;
}

/* Theme toggle — icon only (sun in dark mode, moon in light mode). */
.ls-theme-toggle-item {
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

.ls-theme-toggle {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ls-fg);
	background: transparent;
	color: var(--ls-fg);
	transition: background 0.12s ease, color 0.12s ease;
}

.ls-theme-toggle:hover {
	background: var(--ls-fg);
	color: var(--ls-bg);
}

.ls-theme-toggle .ls-icon {
	display: none !important;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
}

/* Light mode: show moon (suggesting "switch to dark") */
html[data-theme="light"] .ls-theme-toggle .ls-icon-moon { display: inline-flex !important; }

/* Dark mode: show sun (suggesting "switch to light") */
html[data-theme="dark"] .ls-theme-toggle .ls-icon-sun { display: inline-flex !important; }

/* Fallback when no data-theme yet — show moon */
html:not([data-theme]) .ls-theme-toggle .ls-icon-moon { display: inline-flex !important; }

/* ============================================================
   Global typography + reset
   ============================================================ */
html,
body,
button,
input,
select,
textarea,
.site,
.site-header,
.site-footer,
.shoptimizer-container,
.entry-title,
.product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.widget-title,
.menu li a,
.navigation a,
.button,
.wp-block-button__link,
.added_to_cart,
.cart_totals,
.cart-subtotal {
	font-family: var(--ls-font) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

body {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	font-size: var(--ls-size) !important;
	line-height: var(--ls-lh) !important;
	/* `clip` (not `hidden`) prevents horizontal scroll WITHOUT making html/body a
	   scroll container — `hidden` here broke `position: sticky` descendants (the
	   JOINED-view desc column). */
	overflow-x: clip !important;
}

html {
	overflow-x: clip !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title,
.widget-title,
.woocommerce-loop-product__title {
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0;
}

h1, .product_title { font-size: 20px; }
h2 { font-size: 18px; }
h3, h4, h5, h6 { font-size: 16px; }

a {
	color: var(--ls-fg);
	text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ============================================================
   Strip Shoptimizer chrome — shadows, gradients, rounded corners
   ============================================================ */
*, *::before, *::after {
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 0 !important;
}

.site-header,
#masthead,
.shoptimizer-container,
.entry-content,
.site-footer,
.widget,
.product,
.products li,
.woocommerce-tabs,
.cross-sells,
.up-sells,
.related,
.cart-collaterals {
	background: var(--ls-bg) !important;
	box-shadow: none !important;
}

/* Remove Shoptimizer's heavy gradients/overlays */
.cs-fullbleed-bg,
.cs-section-bg,
.shoptimizer-bg-gradient,
[class*="-gradient"] {
	background-image: none !important;
}

/* ============================================================
   Header — centered minimal nav, full-width
   ============================================================ */
#masthead,
.site-header {
	background: var(--ls-bg) !important;
	border-bottom: 1px solid var(--ls-line);
	padding: 8px 24px !important;   /* trimmed from 16px to halve header height */
}

/* Header's inner .main-header.col-full is normally capped at 1170px;
   break it out so the header matches the full-width content area below. */
.site-header .main-header.col-full,
#masthead .main-header.col-full {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-top: 10px !important;    /* trimmed from 30px */
	padding-bottom: 10px !important;
	box-sizing: border-box;
}

/* Hide the original topbar entirely — its "PRICES IN CAD NOW" content is
   re-rendered above the cart icon via JS (see country-modal.js). */
.topbar-wrapper,
.shoptimizer-topbar,
.cs-topbar {
	display: none !important;
}

/* Currency context above cart has been removed — keep .ls-currency-context
   hidden in case any cached page still renders it. */
.ls-currency-context { display: none !important; }

/* Cart sits inline with the rest of the header nav */
.site-header-cart {
	display: inline-flex !important;
	align-items: center;
}

.main-navigation ul,
#site-navigation ul {
	display: flex;
	justify-content: center;
	gap: 32px;
}

.main-navigation a,
.menu a {
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0;
	color: var(--ls-fg);
	padding: 4px 0;
}

/* Hide noisy header bits Shoptimizer adds */
.cs-shoptimizer-search,
.header-search,
.shoptimizer-search-icon,
.shop-now-button,
.header-message {
	/* keep these visible by default — comment in to hide
	display: none !important;
	*/
}

/* ============================================================
   Buttons — solid black square, white text, uppercase mono
   ============================================================ */
.button,
button:not(.ls-view-btn):not(.ls-size-btn):not(.ls-home-header),
.wp-block-button__link,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 14px 24px !important;
	font-family: var(--ls-font) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	text-transform: uppercase !important;
	letter-spacing: 0 !important;
	transition: opacity 0.15s ease !important;
}

.button:hover,
button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	opacity: 0.8 !important;
}

/* Outlined "secondary" variant — use .button.alt-outline anywhere */
.button.alt-outline,
.button.outline {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
}

/* ============================================================
   Inputs
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
	background: transparent !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	padding: 12px !important;
	font-family: var(--ls-font) !important;
	font-size: 14px !important;
	box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
	color: var(--ls-muted);
	text-transform: uppercase;
}

/* ============================================================
   Product loop / shop archive — image + title + price, nothing else
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
	gap: 48px 32px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--ls-bg) !important;
	border: 0 !important;
	padding: 0 !important;
	text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 400;
	margin: 16px 0 4px;
	color: var(--ls-fg);
}

.woocommerce ul.products li.product .price {
	color: var(--ls-fg) !important;
	font-size: 14px;
	font-weight: 400;
}

.woocommerce ul.products li.product .price del {
	color: var(--ls-muted) !important;
	opacity: 1;
}

.woocommerce ul.products li.product img {
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: opacity 0.2s ease;
	margin-bottom: 0 !important;
}

.woocommerce ul.products li.product:hover img {
	opacity: 0.85;
}

/* Strip loop chrome — sale flashes, badges, rating stars, "select options" buttons inline */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .button,
.cs-loop-product-categories,
.cs-product-out-of-stock,
.product-category-link {
	display: none !important;
}

/* ============================================================
   Single product page
   ============================================================ */
/* Match the JOINED view's .ls-joined__desc-title exactly (Shoptimizer otherwise
   forces weight 400 / no letter-spacing). !important beats its rule. */
.single-product div.product .product_title {
	font-family: var(--ls-font) !important;
	font-size: 26px !important;
	line-height: 1.1 !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em !important;
	margin: 0 0 8px;
	/* Shoptimizer hardcodes #222 here, which vanishes on the dark-mode
	   background — pin it to the fg token so it works in both themes. */
	color: var(--ls-fg) !important;
}

.single-product div.product .price,
.single-product div.product p.price {
	font-size: 22px !important;   /* match JOINED .ls-joined__desc-price */
	color: var(--ls-fg) !important;
	margin-bottom: 12px;
}

.single-product div.product .woocommerce-product-details__short-description {
	font-family: var(--ls-font);
	color: var(--ls-fg);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.single-product div.product .woocommerce-product-gallery {
	margin-bottom: 32px;
}

.single-product div.product .woocommerce-product-gallery__image img {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Color (image) swatches: ~2× larger and square so the whole product image
   shows (CommerceKit default is 60×40 with the square image clipped). */
.single-product .summary .cgkit-attribute-swatch.cgkit-image button {
	width: 84px !important;
	height: 84px !important;
	padding: 0 !important;
	overflow: hidden;
	position: relative;
}
.single-product .summary .cgkit-attribute-swatch.cgkit-image button img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* Inactive color swatches sit under a gray overlay; hover (or being the active
   swatch) colors them in. */
.single-product .summary .cgkit-attribute-swatch.cgkit-image button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(110, 110, 110, 0.45);
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.single-product .summary .cgkit-attribute-swatch.cgkit-image button:hover::before,
.single-product .summary .cgkit-attribute-swatch.cgkit-image button.cgkit-swatch-selected::before {
	opacity: 0;
}
/* Active swatch: black circle + white checkmark, top-right. */
.single-product .summary .cgkit-attribute-swatch.cgkit-image button.cgkit-swatch-selected::after {
	content: "\2713";
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 2;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
}

/* Hide rating + breadcrumbs on single product to match the reference's silence */
.single-product .woocommerce-product-rating,
.single-product .woocommerce-breadcrumb {
	display: none !important;
}

/* Tabs — CommerceKit replaces the standard WC `ul.tabs` with its own
   `.commercekit-atc-tab` nav, so style those (the old ul.tabs rules here were
   dead — that markup never renders). Flatten to a minimal underlined nav. The
   description panel is Visual Composer content and is left untouched; only the
   tab chrome and the attributes table are styled. */
.single-product .commercekit-atc-tab {
	font-family: var(--ls-font) !important;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ls-muted) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 6px !important;
	margin: 0 24px 0 0 !important;
}

/* CommerceKit marks the active tab with `.active` on the PARENT <li> and draws
   a thick gold ::after underline on the link. Target the parent and recolor +
   thin that underline to the brand fg token (no gold accent). */
.single-product .active > .commercekit-atc-tab,
.single-product .active .commercekit-atc-tab {
	color: var(--ls-fg) !important;
}

.single-product .active .commercekit-atc-tab::after {
	border-color: var(--ls-fg) !important;
	border-bottom-width: 2px !important;
}

/* Additional-information attributes table — brutalist rows. */
.single-product .woocommerce-product-attributes {
	border: 0 !important;
	border-collapse: collapse;
	width: 100%;
	font-family: var(--ls-font);
}

.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
	border: 0 !important;
	border-bottom: 1px solid var(--ls-faint) !important;
	background: transparent !important;
	padding: 12px !important;
	font-size: 13px;
	text-transform: uppercase;
	color: var(--ls-fg) !important;
}

.single-product .woocommerce-product-attributes th {
	font-weight: 500;
	width: 30%;
}

/* Quantity selector — flat */
.quantity .qty {
	background: transparent !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	padding: 12px !important;
	font-family: var(--ls-font) !important;
}

/* Variation labels (Color / Size) — high-contrast mono. Shoptimizer hardcodes
   #222, which vanishes in dark mode. */
.single-product .variations th.label,
.single-product .variations th.label label,
.single-product .variations th.label strong {
	color: var(--ls-fg) !important;
	font-family: var(--ls-font) !important;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.single-product .cgkit-chosen-attribute,
.single-product .ckit-chosen-attribute_semicolon {
	color: var(--ls-muted) !important;
	text-transform: none;
}

.single-product .cgkit-swatch-title {
	font-family: var(--ls-font) !important;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--ls-muted) !important;
}

/* Variation swatches — square, monochrome. Size swatches are <button>s inside
   .cgkit-button (already handled by the global button reset); just enforce
   square + mono. Color swatches are images in .cgkit-image — square, with a
   clear selected ring. (Replaces the old dead .variation-radios /
   .cs-variation-radio rules — CommerceKit uses neither.) */
.single-product .cgkit-attribute-swatch,
.single-product .cgkit-attribute-swatch img,
.single-product .variations select {
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
}

.single-product .cgkit-attribute-swatch.cgkit-image.cgkit-selected img,
.single-product .cgkit-attribute-swatch.cgkit-image.selected img {
	outline: 2px solid var(--ls-fg);
	outline-offset: -2px;
}

/* Clear (reset variations) — kill the default blue link. */
.single-product .reset_variations {
	color: var(--ls-muted) !important;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: underline;
}
.single-product .reset_variations:hover {
	color: var(--ls-fg) !important;
}

/* Stock status — subordinate to title/price; mute the green, red for OOS. */
.single-product .stock {
	font-family: var(--ls-font);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
}
.single-product .stock.in-stock { color: var(--ls-muted) !important; }
.single-product .stock.out-of-stock { color: #d40000 !important; }

/* Size guide button — match the brand button (flat, mono, square). */
.single-product .commercekit-size-guide {
	font-family: var(--ls-font) !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Buy-X-Get-Y offer banner on the single product page — the plugin renders its
   native (blue, gradient) banner here via WooCommerce hooks. Mirror the cart's
   brutalist treatment so it matches the rest of the store. */
.single-product .bxgy-banner-wrap,
.single-product .bxgy-shop-banner-wrap {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;   /* banners touch; separated by the jagged divider */
	position: static !important;
}

.single-product .bxgy-shop-banner {
	background: var(--ls-fg) !important;
	background-image: none !important;
	color: var(--ls-bg) !important;
	font-family: var(--ls-font) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 12px 24px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ls-bg) !important;
	border-radius: 0 !important;
	animation: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	filter: none !important;
	text-align: center !important;
	line-height: 1.4 !important;
}

.single-product .bxgy-shop-banner::before,
.single-product .bxgy-shop-banner::after {
	content: none !important;
	display: none !important;
}

.single-product .bxgy-banner-footer { display: none !important; }

/* Strip the plugin's emoji from the PDP banner (WP renders them as
   <img class="emoji">) so it reads as cleanly as the catalog's processed
   banner, which strips emoji in PHP. */
.single-product .bxgy-shop-banner img.emoji,
.single-product .bxgy-shop-banner-wrap img.emoji { display: none !important; }

/* ============================================================
   Offer banners (sitewide) — bouncing-marquee text + jagged-teeth
   divider. The two banners touch vertically; the zigzag band is the
   only thing between them (replaces the old 16px white gap).
   ============================================================ */
.bxgy-shop-banner-wrap { margin-bottom: 0 !important; }
.bxgy-shop-banner {
	overflow: hidden !important;
	/* text stays center-aligned; the marquee bounces symmetrically around center */
}

/* Bounce the text edge-to-edge to draw attention. The left/transform pair is
   width-independent, so it works for any banner-text length. */
.bxgy-shop-banner .ls-marquee {
	display: inline-block;
	white-space: nowrap;
	position: relative;
	will-change: left, transform;
	animation: ls-marquee-bounce 12s ease-in-out infinite alternate;   /* 50% slower */
}
/* The text is center-aligned; bounce it ±17% of the row width so its center
   stops 33% in from each side — always fully in view, never running off. */
@keyframes ls-marquee-bounce {
	from { left: -17%; }
	to   { left: 17%; }
}
@media (prefers-reduced-motion: reduce) {
	.bxgy-shop-banner .ls-marquee { animation: none; }
}

/* Jagged teeth between consecutive banners: a thin page-colored band carrying
   banner-colored teeth, so two touching (same-colored) banners read as split.
   Uses tokens so it inverts correctly in dark mode. */
.bxgy-shop-banner-wrap + .bxgy-shop-banner-wrap::before {
	content: "";
	display: block;
	position: relative;
	z-index: 2;
	height: 12px;
	margin: -6px 0;   /* overlap both banner edges so the seam is jagged on BOTH */
	background: var(--ls-bg);   /* the zigzag line, page-bg color (themed) */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 9L8 3L16 9' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x center / 16px 12px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 9L8 3L16 9' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x center / 16px 12px;
	pointer-events: none;
}

/* Pull the banners (and everything below) up under the header — drop the top
   content gap sitewide. */
main#main.site-main,
main.site-main {
	padding-top: 0 !important;
}

/* The shop's #content has padding-top:32px (its view-controls baseline); the
   single product's #content has none. Give it the same 32px so the identical
   -25px control margin lands the same ~7px below the banner on both — and the
   gray disclaimer stays visible instead of being covered. */
.single-product #content.site-content {
	padding-top: 32px;
}

/* Shop / catalog pages: break out of Shoptimizer's boxed (1170px) layout to full
   width, keeping the same 15px side padding as the product page view. */
.col-full:has(.ls-catalog-main) {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	box-sizing: border-box;
}
/* Banners live directly below the header on catalog pages too: stack the catalog
   as a column and float the offer banners above the view/images controls. */
.ls-catalog-main {
	display: flex;
	flex-direction: column;
}
.ls-catalog-main > .ls-bxgy-banner-wrap { order: -1; }

/* ============================================================
   Cart, checkout, account
   ============================================================ */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: 0 !important;
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0 !important;
	border-bottom: 1px solid var(--ls-faint) !important;
	background: transparent !important;
	padding: 16px 12px !important;
	text-transform: none;
}

.woocommerce table.shop_table thead th {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 400;
}

/* ============================================================
   WooCommerce notice banners — per-bucket palette
   Covers classic PHP notices (.woocommerce-*) AND the block-based
   cart/checkout banners (.wc-block-components-notice-banner.is-*).
   Classic WC has no "warning" bucket — only the block notices do.
   Visit any page with ?ls_show_notices=1 to render one of each.
   ============================================================ */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
	border-radius: 0 !important;
	border-width: 1px !important;
	border-style: solid !important;
	padding: 16px !important;
	font-size: 14px;
	text-transform: uppercase;
}

/* Error — light red */
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: #fdecec !important;
	color: #a30000 !important;
	border-color: #a30000 !important;
}
.woocommerce-error::before,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__icon {
	color: #a30000 !important;
	fill: #a30000 !important;
}

/* Success — light green */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background: #e9f6ec !important;
	color: #1b6b2c !important;
	border-color: #1b6b2c !important;
}
.woocommerce-message::before,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__icon {
	color: #1b6b2c !important;
	fill: #1b6b2c !important;
}

/* Warning — light yellow (block notices only) */
.wc-block-components-notice-banner.is-warning {
	background: #fff7d6 !important;
	color: #7a5a00 !important;
	border-color: #7a5a00 !important;
}
.wc-block-components-notice-banner.is-warning .wc-block-components-notice-banner__icon {
	fill: #7a5a00 !important;
}

/* Info — light blue */
.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	background: #eef2f7 !important;
	color: #2a4a73 !important;
	border-color: #2a4a73 !important;
}
.woocommerce-info::before,
.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__icon {
	color: #2a4a73 !important;
	fill: #2a4a73 !important;
}

/* ============================================================
   Footer — minimal, full-width mailing list, no payment icons
   ============================================================ */
.site-footer,
#colophon {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border-top: 1px solid var(--ls-line);
	padding: 48px 24px 48px !important;
	margin-top: 96px;
}

.site-footer a,
#colophon a {
	color: var(--ls-muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.site-footer a:hover,
#colophon a:hover {
	color: var(--ls-fg);
}

.site-footer .widget,
#colophon .widget {
	background: transparent !important;
	color: var(--ls-fg) !important;
}

.site-footer .widget-title,
#colophon .widget-title,
.site-footer h2,
.site-footer h3 {
	color: var(--ls-fg) !important;
	font-size: 13px !important;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.site-footer p,
#colophon p {
	color: var(--ls-fg) !important;
	font-size: 13px;
}

/* Remove all payment-method imagery in the footer */
.site-footer img[src*="visa"],
.site-footer img[src*="mastercard"],
.site-footer img[src*="paypal"],
.site-footer img[src*="discover"],
.site-footer img[src*="maestro"],
.site-footer img[src*="amex"],
.site-footer img[src*="payment"],
.site-footer .payment-methods,
.site-footer .payment-icons,
.site-footer .cards-accepted,
#colophon img[src*="visa"],
#colophon img[src*="mastercard"],
#colophon img[src*="paypal"],
#colophon img[src*="discover"],
#colophon img[src*="maestro"],
#colophon img[src*="amex"],
#colophon img[src*="payment"],
#colophon .payment-methods,
#colophon .payment-icons,
#colophon .cards-accepted {
	display: none !important;
}

/* The bottom "Subscribe" strip — make full-width, dark band, no payment icons */
.footer-bottom,
.shoptimizer-footer-bottom,
.site-info {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	padding: 32px 24px !important;
	margin-top: 48px !important;
	display: block !important;
}

.footer-bottom .widget,
.footer-bottom .mc4wp-form,
.footer-bottom .newsletter-form,
.shoptimizer-footer-bottom .widget,
.shoptimizer-footer-bottom form {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	gap: 0;
}

.footer-bottom input[type="email"],
.footer-bottom input[type="text"],
.shoptimizer-footer-bottom input[type="email"],
.shoptimizer-footer-bottom input[type="text"] {
	flex: 1;
	background: transparent !important;
	color: var(--ls-bg) !important;
	border: 1px solid var(--ls-bg) !important;
	border-right: 0 !important;
	padding: 14px 16px !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	text-transform: uppercase;
}

.footer-bottom input[type="email"]::placeholder,
.shoptimizer-footer-bottom input[type="email"]::placeholder {
	color: var(--ls-bg) !important;
	opacity: 0.6;
}

.footer-bottom button,
.footer-bottom input[type="submit"],
.shoptimizer-footer-bottom button,
.shoptimizer-footer-bottom input[type="submit"] {
	flex: 0 0 auto;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-bg) !important;
	padding: 14px 32px !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	text-transform: uppercase;
	cursor: pointer;
}

/* Any remaining payment images in the bottom strip */
.footer-bottom img,
.shoptimizer-footer-bottom img,
.site-info img {
	display: none !important;
}

/* Specifically: kill the credit-cards.png widget and any sibling that's just imagery */
#text-16,
footer.copyright #text-16,
.copyright #text-16,
img[src*="credit-cards"],
img[src*="themedemo.commercegurus.com"] {
	display: none !important;
}

/* Bottom dark strip: full-bleed band with a centered mailing-list form. */
footer.copyright {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	padding: 40px 0 !important;
	text-align: center;
}

footer.copyright .col-full {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 24px !important;
	display: flex !important;
	justify-content: center !important;
}

footer.copyright #text-15,
footer.copyright .widget_text {
	width: 100% !important;
	max-width: 560px !important;
	margin: 0 auto !important;
}

/* Heading text above the form ("Subscribe to our mailing list") — give it
   breathing room above the input. */
footer.copyright .textwidget > p:first-child,
footer.copyright .widget_text > .textwidget > p:first-child {
	margin: 0 0 24px !important;
	padding: 0 !important;
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--ls-bg) !important;
}

footer.copyright .mc4wp-form,
footer.copyright .mc4wp-form-fields {
	width: 100% !important;
	margin: 0 !important;
}

/* The MC4WP form has two stacked <p>s — one for email, one for submit.
   Force every wrapper transparent so the black footer strip shows through,
   and put a real gap between the input and the button so they read as
   two separate objects (input on the left, button on the right). */
footer.copyright .mc4wp-form,
footer.copyright form.mc4wp-form,
footer.copyright .mc4wp-form-fields,
footer.copyright .widget_text,
footer.copyright #text-15 {
	background: transparent !important;
	background-color: transparent !important;
}

footer.copyright .mc4wp-form-fields {
	display: flex !important;
	align-items: stretch !important;
	gap: 16px !important;
}

footer.copyright .mc4wp-form-fields > p {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	background: transparent !important;
	background-color: transparent !important;
}

footer.copyright .mc4wp-form-fields > p:first-child {
	flex: 1 1 auto !important;
}

footer.copyright .mc4wp-form-fields > p:last-child {
	flex: 0 0 auto !important;
}

/* Hide the visible "Email address" label */
footer.copyright .mc4wp-form label {
	display: none !important;
}

/* INPUT — dark on the black strip, white text/border so it's clearly
   a field. Override Chrome's user-agent white fill with
   -webkit-text-fill-color and -webkit-appearance: none, and neutralize
   autofill yellow with the inset shadow trick. */
footer.copyright input[type="email"],
footer.copyright .mc4wp-form input[type="email"],
footer.copyright .mc4wp-form input.email {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: none !important;
	height: 52px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ls-bg) !important;
	-webkit-text-fill-color: var(--ls-bg) !important;
	caret-color: var(--ls-bg) !important;
	border: 1px solid var(--ls-bg) !important;
	border-radius: 0 !important;
	padding: 0 20px !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	box-sizing: border-box !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
}

footer.copyright input[type="email"]:focus {
	background: rgba(255, 255, 255, 0.06) !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
}

footer.copyright input[type="email"]:-webkit-autofill,
footer.copyright input[type="email"]:-webkit-autofill:focus,
footer.copyright input[type="email"]:-webkit-autofill:hover {
	-webkit-text-fill-color: var(--ls-bg) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--ls-fg) inset !important;
	box-shadow: 0 0 0 1000px var(--ls-fg) inset !important;
	caret-color: var(--ls-bg) !important;
}

footer.copyright input[type="email"]::placeholder {
	color: var(--ls-bg) !important;
	-webkit-text-fill-color: var(--ls-bg) !important;
	opacity: 0.55 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

/* BUTTON — separate object, opposite contrast (white block, black label)
   so it doesn't visually fuse with the dark input. Shoptimizer parent CSS
   sets position:absolute on this submit which parks it on top of the input —
   force it back into the flex flow with position:static. */
footer.copyright input[type="submit"],
footer.copyright button,
footer.copyright button[type="submit"],
footer.copyright .mc4wp-form input[type="submit"] {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	flex: 0 0 auto !important;
	height: 52px !important;
	background: var(--ls-bg) !important;
	background-color: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	-webkit-text-fill-color: var(--ls-fg) !important;
	border: 1px solid var(--ls-bg) !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 40px !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	width: auto !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

footer.copyright input[type="submit"]:hover,
footer.copyright button:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ls-bg) !important;
	-webkit-text-fill-color: var(--ls-bg) !important;
}

/* ============================================================
   Misc — kill hover overlays, badge ribbons, "quick view"
   ============================================================ */
.cs-quickview,
.cs-quickview-button,
.cs-loop-product-categories,
.cs-product-badge,
.cs-image-hover,
.commercegurus-icon-cart,
.woocommerce-cs-add-cart {
	display: none !important;
}

/* ============================================================
   Site-specific cleanup — remove Shoptimizer chrome & plugin noise
   ============================================================ */

/* Secondary nav strip (was coral on home) — neutralize bg, flatten buttons */
.secondary-navigation,
.shoptimizer-promo-bar,
.cs-header-promo,
.below-header,
.col-full-nav,
[class*="secondary-nav"] {
	background: var(--ls-bg) !important;
	background-color: var(--ls-bg) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--ls-faint);
}

/* Empty header widget bars (Shoptimizer renders empty 24px black strips) */
.header-widget-region,
.header-widget-region-2,
.shoptimizer-header-widget,
.below-header-widget {
	background: var(--ls-bg) !important;
	background-color: var(--ls-bg) !important;
	min-height: 0 !important;
	padding: 0 !important;
}

/* Hide unconditionally — the :empty pseudo-class doesn't match when the
   element contains whitespace text nodes, so it was leaving a 24px gap.
   We're not using these Shoptimizer widget bars on this site. */
.header-widget-region,
.header-widget-region-2,
.shoptimizer-header-widget,
.below-header-widget {
	display: none !important;
}

.secondary-navigation a,
.secondary-navigation .menu-item a {
	background: transparent !important;
	color: var(--ls-fg) !important;
	border: 0 !important;
	text-transform: uppercase;
	padding: 8px 16px !important;
	font-size: 13px !important;
}

/* Topbar "US shipping is back!" strip — keep but flatten */
.topbar-wrapper,
.site-header-cart-active .topbar-wrapper {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border-bottom: 1px solid var(--ls-faint);
	font-size: 12px !important;
	text-transform: uppercase;
}

/* Buy-X-Get-Y promo banners — restyle into brutalist black/white. The plugin
   emits inline gradient backgrounds, fire-flicker emoji pseudo-elements,
   a gradient-shift animation, AND uses a 100vw + negative-margin full-bleed
   trick that breaks inside our custom front-page layout. Override all of it. */
.ls-bxgy-banner-wrap {
	display: block;
	width: 100%;
	margin: 0 0 24px;
}

/* Kill the plugin's full-bleed positioning — sit in normal flow. Banners touch
   vertically (no gap); the jagged divider is the only thing between them. */
.ls-bxgy-banner-wrap .bxgy-shop-banner-wrap {
	display: block !important;
	position: static !important;
	width: 100% !important;
	max-width: 100% !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.ls-bxgy-banner-wrap .bxgy-shop-banner {
	background: var(--ls-fg) !important;
	background-image: none !important;
	color: var(--ls-bg) !important;
	font-family: var(--ls-font) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 18px 24px !important;
	border: 0 !important;   /* no solid line — only the jagged divider separates */
	border-radius: 0 !important;
	animation: none !important;
	background-size: auto !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	white-space: normal !important;
	overflow: hidden !important;   /* clip the bouncing marquee */
	text-align: center !important;
	line-height: 1.4 !important;
}

/* Single shared disclaimer beneath all banners. */
.ls-bxgy-disclaimer {
	display: block;
	background: transparent;   /* no black fill — just gray text */
	color: var(--ls-muted);
	font-family: var(--ls-font);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding: 8px 16px;
}

/* Sitewide global banner block (rendered below the header on every page). It
   lives in full-width #page, so it spans edge-to-edge with no side margin. */
.ls-bxgy-banner-wrap--global {
	margin: 0 !important;
}

/* Kill the fire-flicker emoji pseudo-elements that the plugin pins to the
   sides of the banner. */
.ls-bxgy-banner-wrap .bxgy-shop-banner::before,
.ls-bxgy-banner-wrap .bxgy-shop-banner::after {
	content: none !important;
	display: none !important;
	animation: none !important;
}

/* Hide the plugin's per-banner footer — we render a single shared
   disclaimer (.ls-bxgy-disclaimer) below the entire wrap instead. */
.ls-bxgy-banner-wrap .bxgy-banner-footer {
	display: none !important;
}

/* "OFFER REDEEMED ✓" badge — a stationary marker pinned to the LEFT edge of an
   active offer banner (the bouncing marquee text passes behind its solid fill).
   Injected + toggled by ls_banner_marquee_script: hidden until ls_active_offers
   reports the offer's conditions are met, mirroring the plugin's green cart
   checkmark but surfaced in the sitewide banner. Light mode: green text on white
   (pops on the black banner). Dark mode: the banner flips to white, so invert to
   a solid green fill with white text. Shakes briefly once every 5s to draw the eye. */
.ls-bxgy-banner-wrap .bxgy-shop-banner { position: relative !important; }
.ls-offer-badge {
	display: none;
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	z-index: 3;
	background: #fff;
	color: #0f7a34;            /* green text */
	border: 1px solid #0f7a34;
	font-family: var(--ls-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 4px 10px;
	line-height: 1;
	animation: ls-badge-shake 5s ease-in-out infinite;
}
.bxgy-shop-banner.ls-offer-on .ls-offer-badge { display: inline-block; }

/* Dark mode: solid green fill, white text — visible against the white banner. */
html[data-theme="dark"] .ls-offer-badge {
	background: #0f7a34;
	color: #fff;
	border-color: #0f7a34;
}

/* A short wiggle in the first ~0.4s of each 5s cycle, then rest. translateY(-50%)
   is carried through every keyframe so the vertical centering is preserved. */
@keyframes ls-badge-shake {
	0%, 8%, 100% { transform: translateY(-50%) translateX(0) rotate(0deg); }
	1.5%         { transform: translateY(-50%) translateX(-2px) rotate(-2deg); }
	3%           { transform: translateY(-50%) translateX(2px) rotate(2deg); }
	4.5%         { transform: translateY(-50%) translateX(-2px) rotate(-2deg); }
	6%           { transform: translateY(-50%) translateX(2px) rotate(1deg); }
	7.5%         { transform: translateY(-50%) translateX(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ls-offer-badge { animation: none; transform: translateY(-50%); }
}
@media (max-width: 560px) {
	.ls-offer-badge { font-size: 9px; padding: 3px 6px; left: 8px; letter-spacing: 0.04em; }
}

/* Swatches in shop loop — collapse to tiny dots, hide entirely on small screens.
   These were rendering as full black squares because of our global button rule. */
.products li.product .cgkit-swatches-on-archive,
.products li.product .cgkit-swatches-wrapper,
.products li.product .cgkit-archive-swatches {
	display: none !important;
}

/* On single product page, restore swatch styling: small bordered squares */
.single-product .cgkit-swatch,
.single-product button.swatch {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-width: 40px !important;
	height: 40px !important;
	font-size: 13px !important;
	text-transform: uppercase;
}

.single-product .cgkit-swatch.selected,
.single-product .cgkit-swatch.active,
.single-product button.swatch.selected {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

.single-product .cgkit-swatch.color-swatch,
.single-product button.swatch.color-swatch {
	/* color swatches should remain colored; only enforce square + border */
	background-clip: padding-box !important;
}

/* Trust badges / safe-checkout panel — remove all variations */
.cs-trust-badges,
.shoptimizer-trust-badges,
.commercegurus-trust-badges,
.cs-secure-icons,
.woocommerce-secure-checkout,
.cs-trust-images,
.cs-checkout-images,
.cs-guaranteed-checkout,
.cs-payment-icons,
.shoptimizer-trust-image,
[class*="trust-badges"],
[class*="trust-badge"],
[class*="secure-checkout-image"],
[class*="guaranteed-checkout"],
[class*="trust-image"] {
	display: none !important;
}

/* Shoptimizer's "Guaranteed Safe Checkout" block on product page */
.cs-trustbadge,
.cs-trust-bar,
.trust-banner,
.cs-trust-badges-product,
.shoptimizer-trustbadges,
.shoptimizer-trust-bar,
#text-7 {
	display: none !important;
}

/* "Questions? Request a call back" floating button — kill all variants */
.cs-callback,
.cs-callback-button,
#cs-callback,
.shoptimizer-callback,
.cs-request-call,
.cs-call-back,
.request-call-back,
[class*="callback-button"],
[class*="request-callback"],
[class*="call-back"],
[class*="request-call"],
[id*="callback"] {
	display: none !important;
}

/* Localhost site key / reCAPTCHA tip in corner — admin-only nag, ignore in screenshots */

/* "Fast Shipping / Easy Returns / We Accept / Tracking" 4-column row in footer.
   Looks fine in mono but the icons next to each header are colored — neutralize. */
.cs-features-bar svg,
.cs-features-bar i,
.cs-features-bar img,
.footer-features-bar svg,
.footer-features-bar i {
	color: var(--ls-fg) !important;
	fill: var(--ls-fg) !important;
	filter: grayscale(1);
}

/* Shoptimizer cart drawer (slide-out) — flatten */
.shoptimizer-mini-cart-wrap,
#shoptimizerCartDrawer {
	background: var(--ls-bg) !important;
	border-left: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Breadcrumbs (when not hidden) - the "HOME: SHOP" style */
.woocommerce .woocommerce-breadcrumb,
.shoptimizer-breadcrumbs {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--ls-muted);
	margin-bottom: 24px;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--ls-muted);
}

/* Header logo — if it's an image, keep it; we just style the text version */
.site-branding .site-title a,
.site-branding a {
	color: var(--ls-fg) !important;
	text-transform: uppercase;
	letter-spacing: 0;
	font-weight: 400;
}

/* Search box in header — flat */
.shoptimizer-header-search input[type="search"],
.search-form input[type="search"] {
	background: transparent !important;
	border: 1px solid var(--ls-fg) !important;
	padding: 10px 12px !important;
}

/* ============================================================
   Catalog home page (front-page.php)
   ============================================================ */
/* Break out of Shoptimizer's .col-full wrapper inside the main content area
   on the front page so the catalog fills the viewport edge-to-edge.
   Scoped to #content so the header's own .col-full layout isn't affected. */
body.home #content,
body.home #content .col-full,
body.home .shoptimizer-archive {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Shoptimizer renders an empty `.archive-header` (an empty .woocommerce div)
   above the catalog on the front page; it carries spacing and shows as a blank
   row between the header and the view controls. Nothing lives in it on home. */
body.home .archive-header {
	display: none !important;
}

.ls-catalog-main {
	max-width: none;
	margin: 0;
	padding: 0 0 96px;
	width: 100%;
}

.ls-catalog-grid {
	padding: 0 15px;
}

/* Hide the coral product-quicklinks strip (Low Cuts / Mid Cuts / Journal).
   Note: `.secondary-navigation` is INTENTIONALLY NOT in this list — confusingly,
   Shoptimizer names the header's FAQ/Shop nav `secondary-navigation`. The coral
   strip is wrapped by `.col-full-nav`. */
.col-full-nav,
.below-header,
.shoptimizer-primary-navigation,
.primary-navigation {
	display: none !important;
}

/* Hide search bar in header */
.site-search,
.site-search.type-outline,
.shoptimizer-header-search,
.header-search {
	display: none !important;
}

/* Header nav (FAQ / Shop / Journal) — clean horizontal row with breathing room */
#site-navigation,
.main-navigation {
	display: flex !important;
	align-items: center;
	gap: 24px;
}

#site-navigation ul.menu,
.main-navigation ul.menu {
	display: flex !important;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#site-navigation ul.menu li,
.main-navigation ul.menu li {
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

#site-navigation ul.menu li a,
.main-navigation ul.menu li a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 10px !important;
	color: var(--ls-fg) !important;
	background: transparent !important;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0;
	white-space: nowrap;
}

/* FAQ / SHOP / Journal nav links are text only — hide any icon-wrapper inside menu items site-wide. */
.menu-item .icon-wrapper,
.menu-item > a > svg,
.menu li[id*="menu-item-"] > a > svg,
.menu li[id*="menu-item-"] > a .icon-wrapper {
	display: none !important;
}

/* But still let our own icons inside the theme toggle (which lives in a <button>, not an <a>) survive.
   The per-theme show/hide rules for .ls-icon-sun / .ls-icon-moon must win, so we explicitly DO NOT
   force-show .ls-icon here. */
.ls-theme-toggle svg,
.ls-flag {
	display: inline-block !important;
}

/* Cart button — monochrome */
.site-header-cart,
.site-header-cart .shoptimizer-cart {
	background: transparent !important;
}

.cart-contents,
.cart-contents:link,
.cart-contents:visited {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	padding: 5px 14px !important;   /* trimmed from 10px to shrink header row */
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 30px !important;   /* was 55px — the header-row height driver */
	text-decoration: none !important;
	box-shadow: none !important;
}
/* Shoptimizer sets line-height:55px on the cart's inner price spans too. */
#masthead .cart-contents .amount,
#masthead .cart-contents .woocommerce-Price-amount,
#masthead .cart-contents .woocommerce-Price-currencySymbol,
#masthead .cart-contents .count {
	line-height: 30px !important;
}

/* Theme-toggle button — the global black-button reset forces 14px 24px padding
   (making it the tallest header element at 66px). Pin it to a compact square so
   the header row can shrink. High specificity + !important to beat the reset. */
#masthead button.ls-theme-toggle {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
}

/* Shoptimizer pins the cart button to height:55px and its wrapper to ~60px —
   the header row's floor. Match them to the toggle so the trimmed row stays even
   (the mini-cart dropdown is absolutely positioned, so this is safe). */
#masthead a.cart-contents,
#masthead .site-header-cart,
#masthead .site-header-cart .shoptimizer-cart {
	height: 44px !important;
}

.cart-contents .amount,
.cart-contents .woocommerce-Price-amount,
.cart-contents .woocommerce-Price-currencySymbol {
	color: var(--ls-bg) !important;
	background: transparent !important;
	font-family: var(--ls-font) !important;
	font-weight: 400 !important;
}

/* ============================================================
   LEFT-side header block — sits next to the logo
   ============================================================ */
.site-branding {
	display: flex !important;
	align-items: center;
	gap: 32px;
}

/* ============================================================
   Site logo — Luigi Sardo SVG wordmark (top-left, sitewide)
   ------------------------------------------------------------
   Recolors via currentColor → --ls-fg: black in light mode,
   white in dark mode (flips with the theme toggle). On every
   page load the large wordmark holds for 3s then crossfades to
   the small wordmark (logo-intro.js); reduced-motion users get
   the small one instantly, no animation (html.ls-logo-seen).
   ============================================================ */
:root {
	--ls-logo-h: 38px;
}

.site-branding .ls-site-title {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.ls-logo {
	position: relative;
	display: inline-block;
	height: var(--ls-logo-h);
	width: calc(var(--ls-logo-h) * 4.5400); /* large viewBox: 300 / 66.08 */
	color: var(--ls-fg);
	line-height: 0;
	overflow: visible;
	transition: width 600ms ease;
}

.ls-logo__svg {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: auto;
	pointer-events: none;
	transition: opacity 600ms ease;
}

.ls-logo__svg--large { opacity: 1; }
.ls-logo__svg--small { opacity: 0; }

/* Resolved after the 3s intro (animated crossfade + width morph). */
.ls-logo.ls-logo--resolved { width: calc(var(--ls-logo-h) * 2.8294); } /* small: 186.96 / 66.08 */
.ls-logo.ls-logo--resolved .ls-logo__svg--large { opacity: 0; }
.ls-logo.ls-logo--resolved .ls-logo__svg--small { opacity: 1; }

/* Seen earlier this session (pre-applied before paint): small logo, no motion. */
html.ls-logo-seen .ls-logo { width: calc(var(--ls-logo-h) * 2.8294); }
html.ls-logo-seen .ls-logo__svg--large { opacity: 0; }
html.ls-logo-seen .ls-logo__svg--small { opacity: 1; }
html.ls-logo-seen .ls-logo,
html.ls-logo-seen .ls-logo__svg { transition: none; }

@media (max-width: 600px) {
	:root { --ls-logo-h: 28px; }
}

/* ============================================================
   Footer — equal-width columns drawn with dividing lines, plus
   the animated wordmark in the leftmost column (relocated there
   by ls_footer_logo(); its large→small transform plays on scroll
   via logo-intro.js).
   ============================================================ */
.site-footer .col-full:has(> .widget) {
	display: flex;
	align-items: stretch;
}
.site-footer .col-full > .widget {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
	padding: 0 28px;
	border-right: 1px solid var(--ls-fg);
}
.site-footer .col-full > .widget:first-child {
	border-left: 1px solid var(--ls-fg);
}

/* Footer wordmark — a touch larger than the header's; sits above the column's
   blurb (the redundant "LUIGI SARDO" title is hidden by the relocate script). */
.ls-footer-logo {
	--ls-logo-h: 46px;
	display: block;
	margin: 0 0 18px;
	color: var(--ls-fg);
}

/* Stack the columns on narrow screens — swap the side lines for top lines. */
@media (max-width: 768px) {
	.site-footer .col-full:has(> .widget) { flex-direction: column; }
	.site-footer .col-full > .widget {
		border-right: 0;
		border-left: 0;
		border-top: 1px solid var(--ls-fg);
		padding: 24px 0;
	}
	.site-footer .col-full > .widget:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

.ls-left-header {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ls-font);
	font-size: 12px;
	color: var(--ls-fg);
	text-transform: uppercase;
}

.ls-left-header__flag {
	display: inline-flex;
	align-items: center;
	width: 24px;
	height: 16px;
	color: var(--ls-fg);
}

.ls-left-header__flag svg {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--ls-fg);
}

.ls-left-header__label {
	color: var(--ls-fg);
	letter-spacing: 0.04em;
}

.ls-left-header .ls-country-change {
	color: var(--ls-muted);
	text-decoration: underline;
	font-size: 11px;
	cursor: pointer;
}

.ls-left-header .ls-country-change:hover {
	color: var(--ls-fg);
}

/* The old right-side indicator container is no longer rendered; leave the
   class here in case any cached page still has it. */
.ls-country-indicator { display: none !important; }

/* ============================================================
   Country selection modal — blocking
   ============================================================ */
.ls-country-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	padding: 24px;
}

.ls-country-modal.is-open {
	display: flex;
}

.ls-country-modal__dialog {
	background: var(--ls-bg);
	padding: 56px 48px;
	max-width: 520px;
	width: 100%;
	font-family: var(--ls-font);
	text-align: center;
	border: 1px solid var(--ls-fg);
}

.ls-country-modal__title {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	margin: 0 0 12px;
	text-transform: uppercase;
	color: var(--ls-fg);
}

.ls-country-modal__sub {
	color: var(--ls-muted);
	font-size: 13px;
	margin: 0 0 32px;
	text-transform: uppercase;
	line-height: 1.5;
}

.ls-country-modal__choices {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.ls-country-btn {
	all: unset;
	box-sizing: border-box;
	flex: 1;
	max-width: 180px;
	padding: 16px 20px;
	background: var(--ls-bg);
	color: var(--ls-fg);
	border: 1px solid var(--ls-fg);
	font-family: var(--ls-font);
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ls-country-btn:hover {
	background: var(--ls-fg);
	color: var(--ls-bg);
}

.ls-country-btn:disabled {
	background: var(--ls-faint);
	color: var(--ls-muted);
	border-color: var(--ls-faint);
	cursor: wait;
}

/* ============================================================
   Price block — regular, sale, tariff asterisk
   ============================================================ */
.ls-price {
	font-family: var(--ls-font);
	font-size: 13px;
	color: var(--ls-fg);
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
}

.ls-price--has-sale .ls-price__regular {
	text-decoration: line-through;
	color: var(--ls-muted);
}

.ls-price--has-sale .ls-price__regular .woocommerce-Price-amount {
	color: var(--ls-muted) !important;
}

.ls-price__sale {
	color: #d40000 !important;
	font-weight: 500;
}

.ls-price__sale .woocommerce-Price-amount {
	color: #d40000 !important;
}

.ls-tariff-mark {
	color: var(--ls-muted);
	font-size: 11px;
	vertical-align: top;
	margin-left: 2px;
}

.ls-price__ccy {
	color: var(--ls-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-left: 2px;
}

/* Footer-ish note shown when in USA mode (small, muted) */
body.ls-country-us .ls-card__price::after {
	content: "*TARIFF INCLUDED";
	display: block;
	font-size: 10px;
	color: var(--ls-muted);
	margin-top: 4px;
	letter-spacing: 0.05em;
}

.cart-contents .count {
	color: var(--ls-fg) !important;
	background: var(--ls-bg) !important;
	border: 0 !important;
	padding: 1px 6px !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	border-radius: 0 !important;
	min-width: 18px;
	text-align: center;
}

/* ============================================================
   Homepage masonry feed — auto-assembled mixed-media tiles
   (blog posts, product gallery images, videos). CSS columns give
   true Pinterest-style flow; tiles keep their natural aspect
   ratio so heights vary organically. Rendered by
   ls_render_home_feed() (functions.php), front page only.
   ============================================================ */
.ls-home-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 32px 0 96px;
}

/* Home only: a dark black/gray mosaic backdrop with two diagonal "shimmer"
   sheens sweeping at different angles + speeds, so their interference reads as
   random highlights. It lives in a fixed, behind-everything layer (z-index:-1)
   revealed by the transparent body; the feed and header sit above it. */
body.home { background: transparent !important; }
body.home #content,
body.home .ls-home-main { background: transparent !important; }

.ls-home-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: #f3f3f3;
	/* Near-white checkerboard mosaic (two barely-different light grays — almost
	   white) under a static desaturated noise grain. The grain is listed first so
	   it sits on top of the mosaic. Squares are small (~7px) for a fine mosaic. */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),
		conic-gradient(#fafafa 0.25turn, #ececec 0.25turn 0.5turn, #fafafa 0.5turn 0.75turn, #ececec 0.75turn);
	background-size: 180px 180px, 14px 14px;
}
.ls-home-bg::before,
.ls-home-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
}
.ls-home-bg::before {
	background-image: linear-gradient(115deg, transparent 42%, rgba(0, 0, 0, 0.05) 50%, transparent 58%);
	background-size: 260% 260%;
	animation: ls-home-shimmer-a 9s linear infinite;
}
.ls-home-bg::after {
	background-image: linear-gradient(250deg, transparent 44%, rgba(0, 0, 0, 0.035) 50%, transparent 56%);
	background-size: 220% 220%;
	animation: ls-home-shimmer-b 14s linear infinite;
}
@keyframes ls-home-shimmer-a {
	0%   { background-position: -60% -60%; }
	100% { background-position: 160% 160%; }
}
@keyframes ls-home-shimmer-b {
	0%   { background-position: 160% -60%; }
	100% { background-position: -60% 160%; }
}
@media (prefers-reduced-motion: reduce) {
	.ls-home-bg::before,
	.ls-home-bg::after { animation: none; }
}

.ls-home-feed {
	column-count: 6;
	column-gap: 16px;
	padding: 0 15px;
}
@media (max-width: 1300px) { .ls-home-feed { column-count: 5; } }
@media (max-width: 1100px) { .ls-home-feed { column-count: 4; } }
@media (max-width: 900px)  { .ls-home-feed { column-count: 3; } }
@media (max-width: 768px)  { .ls-home-feed { column-count: 2; } }
@media (max-width: 480px)  { .ls-home-feed { column-count: 1; } }

/* ============================================================
   Home view toolbar — three controls driving the feed:
   GROUP (off random / on row-banded), VIEWS (− default cols /
   + fewer-bigger cols), IMAGES (all / product / people). The
   toolbar reuses .ls-view-controls + .ls-view-btn styling;
   home-view-controls.js + the no-flash head script drive the
   <html> mode classes.
   ============================================================ */

/* The IMAGES group has 3 buttons + a label (4 cells); GROUP and VIEWS keep the
   shop's label + 2-button layout. Scoped with .ls-home-controls so these beat
   the base `.ls-view-controls__group { grid-template-columns: repeat(3, 1fr) }`
   that appears later in this file. */
.ls-home-controls .ls-view-controls__group--home-group,
.ls-home-controls .ls-view-controls__group--home-views {
	grid-template-columns: auto repeat(2, 1fr);
}
.ls-home-controls .ls-view-controls__group--home-images {
	grid-template-columns: auto repeat(3, 1fr);
}

/* Active-button fill, driven off <html> mode classes (parallels the shop's
   per-button activation pattern so the no-flash head script paints the right
   pressed button on the first frame). */
html.ls-home-bigger              .ls-view-btn[data-home-view="bigger"],
html:not(.ls-home-bigger)        .ls-view-btn[data-home-view="default"],
html.ls-home-img-all             .ls-view-btn[data-home-img="all"],
html.ls-home-img-product         .ls-view-btn[data-home-img="product"],
html.ls-home-img-people          .ls-view-btn[data-home-img="people"],
html.ls-home-grouped             .ls-view-btn[data-home-group="on"],
html:not(.ls-home-grouped)       .ls-view-btn[data-home-group="off"] {
	background: var(--ls-fg);
	color: var(--ls-bg);
}

/* IMAGES filter: hide off-mode product tiles. Posts/videos have no data-kind,
   so they're shown in every mode. */
html.ls-home-img-product .ls-home-tile[data-kind="people"],
html.ls-home-img-people  .ls-home-tile[data-kind="product"] {
	display: none;
}

/* VIEWS "bigger": ~2 fewer columns at every breakpoint than the default. */
html.ls-home-bigger .ls-home-feed { column-count: 4; }
@media (max-width: 1300px) { html.ls-home-bigger .ls-home-feed { column-count: 3; } }
@media (max-width: 1100px) { html.ls-home-bigger .ls-home-feed { column-count: 2; } }
@media (max-width: 768px)  { html.ls-home-bigger .ls-home-feed { column-count: 1; } }

/* GROUPED: leave masonry; switch to a row-flow grid so each category band
   reads as actual rows. Group-header tiles span the full row width. Column
   counts match the ungrouped (default = 6 zoomed-out, bigger = 4) so the
   tile density is identical across modes — only the row-vs-column flow and
   the header bands differ. */
html.ls-home-grouped .ls-home-feed {
	column-count: initial;
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 16px;
	row-gap: 16px;
	align-items: start;
}
@media (max-width: 1300px) { html.ls-home-grouped .ls-home-feed { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { html.ls-home-grouped .ls-home-feed { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { html.ls-home-grouped .ls-home-feed { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { html.ls-home-grouped .ls-home-feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { html.ls-home-grouped .ls-home-feed { grid-template-columns: 1fr; } }

html.ls-home-bigger.ls-home-grouped .ls-home-feed { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1300px) { html.ls-home-bigger.ls-home-grouped .ls-home-feed { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { html.ls-home-bigger.ls-home-grouped .ls-home-feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { html.ls-home-bigger.ls-home-grouped .ls-home-feed { grid-template-columns: 1fr; } }

/* In grid mode, the tile margin-bottom is redundant (row-gap handles it). */
html.ls-home-grouped .ls-home-tile { margin: 0; break-inside: auto; }

/* Group header — accordion button spanning the full row. White on default,
   black on hover, with a +/− indicator for collapse/expand. */
.ls-home-header {
	-webkit-appearance: none;
	appearance: none;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	margin: 8px 0 0;
	border: 1px solid var(--ls-fg);
	background: #ffffff;
	color: var(--ls-fg);
	cursor: pointer;
	font-family: var(--ls-font);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	/* Sit below the sticky stack (header + offer banner + control rails) when
	   scrolled to from the sidebar nav. JS sets --ls-home-stick-total to the
	   measured height of the three sticky elements; we add a small visual gap. */
	scroll-margin-top: calc(var(--ls-home-stick-total, 120px) + 12px);
	transition: background 0.15s ease, color 0.15s ease;
}
.ls-home-header:hover {
	background: var(--ls-fg);
	color: var(--ls-bg);
}
.ls-home-header__toggle {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
}
.ls-home-feed > .ls-home-header:first-child { margin-top: 0; }

/* Collapsed band: hide its tiles. (Headers carry the toggle state via the
   `is-collapsed` class on the button itself, swapping the +/− glyph in JS.) */
.ls-home-tile--collapsed { display: none !important; }

/* Safety: if a header survives in the DOM after toggling off, keep it hidden. */
html:not(.ls-home-grouped) .ls-home-header { display: none; }

/* ============================================================
   Home layout — sidebar + feed.

   The sidebar is a 4-button TOC (Journal / Low Cut / Mid Cut /
   Videos) that's only meaningful when GROUP is on, because that's
   when the feed actually has bands to scroll to. In ungrouped
   (masonry) mode the sidebar is hidden and the feed takes the
   full width.

   The sticky top offset is driven by --ls-home-stick-total, a
   CSS var that home-view-controls.js measures from the actual
   header + offer banner + controls heights, so the sidebar slots
   directly under the sticky chrome.
   ============================================================ */
.ls-home-layout {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 0 15px;
}
.ls-home-layout > .ls-home-feed {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}
.ls-home-sidebar {
	flex: 0 0 200px;
	max-width: 200px;
	position: sticky;
	top: calc(var(--ls-home-stick-total, 100px) + 16px);
	max-height: calc(100vh - var(--ls-home-stick-total, 100px) - 32px);
	overflow-y: auto;
}
.ls-home-sidebar__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ls-home-sidebar__nav li { margin: 0 0 8px; }

/* Boxed label: 1px black frame, white fill, mono uppercase. Hover gray, active
   (driven by .is-active set in JS via IntersectionObserver) flips to solid
   black. The sidebar selector wins over the global .ls-view-btn / button
   resets earlier in this file because of specificity + the !important :hover
   from the global button reset is opted-out via :not(.ls-home-sidebar__link)
   added below. */
.ls-home-sidebar__link {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--ls-fg);
	background: var(--ls-bg);
	color: var(--ls-fg);
	text-decoration: none;
	font-family: var(--ls-font);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease;
}
.ls-home-sidebar__link:hover {
	background: var(--ls-faint);
	color: var(--ls-fg);
	text-decoration: none;
}
.ls-home-sidebar__link.is-active {
	background: var(--ls-fg);
	color: var(--ls-bg);
}

/* Visibility tied to grouped mode — sidebar is only useful as a TOC for the
   bands. In ungrouped mode the feed reclaims the sidebar's width. */
html:not(.ls-home-grouped) .ls-home-sidebar { display: none; }
html:not(.ls-home-grouped) .ls-home-layout { padding-left: 15px; padding-right: 15px; }

/* Mobile: stack the sidebar above the feed (grouped mode only — ungrouped
   still hides it). */
@media (max-width: 900px) {
	.ls-home-layout { flex-direction: column; }
	html.ls-home-grouped .ls-home-sidebar {
		flex: 1 1 auto;
		max-width: none;
		position: static;
		max-height: none;
		overflow: visible;
	}
	html.ls-home-grouped .ls-home-sidebar__nav ul {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}
	html.ls-home-grouped .ls-home-sidebar__nav li { margin: 0; }
}

/* ============================================================
   Sticky chrome — sitewide.

   #masthead and the offer banner stick on every page; the home
   view-controls toolbar (.ls-home-controls) only exists on the
   home page but reuses the same CSS-var offset system.

   They share a scroll container (sibling-level under #page), so
   they just need stacking top offsets and z-indices that layer
   above the feed.

   --ls-home-h-masthead / --ls-home-h-banner / --ls-home-h-controls
   are measured by home-view-controls.js (still home-only, since
   that's where they're consumed by the sidebar + band headers).
   --ls-home-stick-total is their sum (used by the sidebar +
   accordion-header scroll-margin-top above).

   IMPORTANT: do NOT add a z-index/position override on .ls-home-bg
   here. The mosaic backdrop is intentionally at z-index:-1 (see
   the .ls-home-bg block earlier); promoting it covers the band
   accordion headers (they have no position:relative, so they sit
   at auto z-index, BEHIND any positive-z fixed sibling).
   ============================================================ */
#masthead,
.ls-bxgy-banner-wrap--global,
.ls-home-controls {
	position: sticky;
	background: var(--ls-bg);
}
#masthead { top: 0; z-index: 53; }
.ls-bxgy-banner-wrap--global {
	top: var(--ls-home-h-masthead, 0px);
	z-index: 52;
}
/* The home controls toolbar is also a .ls-view-controls, so the base rule
   (`margin: -25px 0 32px; padding: 0 15px`) wins by source order at equal
   specificity. Chain the two classes to beat it without resorting to
   !important. */
.ls-view-controls.ls-home-controls {
	top: calc(var(--ls-home-h-masthead, 0px) + var(--ls-home-h-banner, 0px));
	z-index: 51;
	/* Side margins so the toolbar doesn't kiss the viewport edges; bottom
	   margin gives the feed/sidebar breathing room when the rail pins to
	   the stack top. The inner padding from .ls-view-controls (0 15px) is
	   redundant once we add the outer margin — strip it. */
	margin: 0 15px 16px;
	padding: 0;
	border-bottom: 1px solid var(--ls-faint);
}

/* GROUP / VIEWS / IMAGES section labels on the home rail get a black outline
   so they read as labelled segments instead of bare gray plates. Scoped to
   .ls-home-controls so the shop's catalog rail (same component) is untouched. */
.ls-home-controls .ls-view-controls__label {
	border: 1px solid var(--ls-fg);
}

.ls-home-tile {
	display: block;
	break-inside: avoid;
	margin: 0 0 16px;
	color: #161616;   /* dark caption text on the near-white mosaic backdrop */
	text-decoration: none;
}

/* 1px framed card. overflow:hidden clips the hover zoom to the frame. */
.ls-home-tile__media {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--ls-fg);
}
.ls-home-tile__img,
.ls-home-tile__video {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}
/* Subtle zoom-in on the image when hovering the card. */
.ls-home-tile:hover .ls-home-tile__img,
.ls-home-tile:hover .ls-home-tile__video {
	transform: scale(1.04);
}

/* Video tiles are rendered as <div role="button"> (not <a>) so clicking opens
   the lightbox player instead of navigating. Cursor + focus ring match the
   other tile types. */
.ls-home-tile--video {
	cursor: pointer;
}
.ls-home-tile--video:focus-visible {
	outline: 2px solid var(--ls-fg);
	outline-offset: 2px;
}

/* Video lightbox — fullscreen-ish modal with the same brutalist frame as the
   rest of the theme. Opens with audio on and native controls so the user can
   scrub/mute/pause. JS toggles the `is-open` class. */
.ls-home-video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(0, 0, 0, 0.92);
}
.ls-home-video-lightbox.is-open { display: flex; }
.ls-home-video-lightbox__video {
	width: 100%;
	max-width: 1200px;
	max-height: calc(100vh - 64px);
	background: #000;
	border: 1px solid var(--ls-fg);
	display: block;
}
.ls-home-video-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	font: 28px/1 var(--ls-font);
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ls-home-video-lightbox__close:hover {
	background: #fff;
	color: #000;
}

/* Product hover overlay — the colorway (variation name) + the product (style),
   surfaced on hover over the image. The whole tile links to that colorway's PDP
   accordion, so the overlay is click-through (pointer-events:none). */
.ls-home-tile__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px;
	text-align: center;
	font-family: var(--ls-font);
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.ls-home-tile:hover .ls-home-tile__overlay { opacity: 1; }
.ls-home-tile__overlay-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ls-home-tile__overlay-style {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* Caption — minimal mono, sits under the media. */
.ls-home-tile__cap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 2px 0;
	font-family: var(--ls-font);
}
.ls-home-tile__kicker {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}
.ls-home-tile__title {
	font-size: 13px;
	line-height: 1.35;
	text-transform: uppercase;
}
.ls-home-tile:hover .ls-home-tile__title { text-decoration: underline; }

/* Product-archive heading (category / tag pages). Kept for SEO — these pages
   stay indexable — and styled to match the brutalist catalog. The front page
   and /shop render no heading; they clone each other exactly. */
.ls-archive-header {
	padding: 0 15px;
	margin: 0 0 28px;
	text-align: center;
}
.ls-archive-title {
	font-family: var(--ls-font);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 16px;
	margin: 0;
}
.ls-archive-desc {
	font-family: var(--ls-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ls-muted);
	max-width: 640px;
	margin: 10px auto 0;
}

/* ============================================================
   Journal — blog posts index (/journal/) + category archives.
   Rendered by ls_render_journal() (functions.php) through home.php
   and category.php: a category filter rail above a full-width grid
   of bordered post cards.
   ============================================================ */

/* Break out of Shoptimizer's boxed (1170px) .col-full wrapper to full width,
   mirroring the catalog. Selector-based on the main class so it covers BOTH the
   posts index (home.php) and category archives (category.php) in one rule —
   no branching on body class. */
#content:has(.ls-journal-main),
.shoptimizer-archive:has(.ls-journal-main),
.col-full:has(.ls-journal-main) {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

.ls-journal-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0 0 96px;
}

/* "JOURNAL" / "FAQ" heading at the single-product title scale (.product_title /
   .ls-joined__desc-title) — scoped so product-taxonomy archive titles
   (.ls-archive-title elsewhere) keep their smaller size. */
.ls-journal-main .ls-archive-title,
.ls-faq-main .ls-archive-title {
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

/* Category filter rail — reuses the shop view-control look (gray label +
   white pills that fill black on hover/active). Wraps across rows; each pill
   hugs its text rather than sharing a fixed 3-col grid. The pills are <a>
   links, so the rail navigates to each category archive (no JS). */
.ls-journal-rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;   /* centered along the row's width */
	gap: 8px;
	padding: 0 15px;
	margin: 0 0 32px;
}
.ls-journal-rail .ls-view-controls__label,
.ls-journal-rail .ls-view-btn {
	width: auto;
	padding: 0 14px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* Full-width grid of post cards. */
.ls-journal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px 16px;
	padding: 0 15px;
	/* default align-items:stretch — cards in a row equalize height so their
	   outer bottom borders line up; the excerpt (flex:1) takes the slack. */
}
@media (max-width: 480px) {
	.ls-journal-grid { grid-template-columns: 1fr; }
}

/* Card — a bordered stack with 1px internal dividers, like the PDP accordion:
   each cell carries a border-bottom except the last (excerpt); the outer border
   closes the card. */
.ls-journal-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ls-fg);
	background: var(--ls-bg);
	font-family: var(--ls-font);
}
/* Reserve two lines so single- and double-line titles keep the images (and
   everything below) aligned across a row. Vertically centered within the cell. */
.ls-journal-card__title {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: calc(2 * 1.35em + 24px);
	padding: 12px 14px;
	border-bottom: 1px solid var(--ls-fg);
	line-height: 1.35;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ls-fg);
	text-decoration: none;
}
.ls-journal-card__title:hover { text-decoration: underline; }

.ls-journal-card__media {
	display: block;
	padding: 12px;
	border-bottom: 1px solid var(--ls-fg);
	background: var(--ls-bg);
}
/* Uniform 4:3 crop so every tile's image is the same height — a clean grid. */
.ls-journal-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
/* Placeholder keeps the card rhythm for posts with no featured image. */
.ls-journal-card__noimg {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--ls-faint);
}

.ls-journal-card__byline {
	display: flex;
	border-bottom: 1px solid var(--ls-fg);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ls-fg);
}
.ls-journal-card__date,
.ls-journal-card__author {
	flex: 1 1 50%;
	min-width: 0;
	padding: 10px 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ls-journal-card__date { border-right: 1px solid var(--ls-fg); }

.ls-journal-card__excerpt {
	flex: 1 1 auto;   /* fill remaining height so a row of cards stays flush */
	padding: 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ls-muted);
}

/* post_class() puts `post` on the cards, so Shoptimizer's blog.min.css rule
   `.site-main:not(.grid) article.post` (a list separator) recolors our bottom
   border to faint #eee and adds 2rem padding-bottom + 2.25rem margin-bottom —
   hiding the frame and opening a gap under the excerpt. Reassert our own frame;
   !important is needed to beat that higher-specificity third-party rule. */
.ls-journal-card.post {
	border-bottom: 1px solid var(--ls-fg) !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* "VIEW MORE" reveal (assets/js/journal-more.js): everything past the first 50
   cards is collapsed until revealed in batches. */
.ls-journal-card--collapsed { display: none; }

.ls-journal-more-wrap {
	display: flex;
	justify-content: center;
	padding: 0 15px;
	margin: 48px 0 0;
}
/* Reuses .ls-view-btn (white, fills black on hover; also opts out of the global
   button reset) but at a roomier size than the rail toggles. */
.ls-journal-more {
	width: auto;
	height: auto;
	padding: 13px 40px;
	font-size: 13px;
	letter-spacing: 0.08em;
}

/* ============================================================
   Single blog post (single.php) — a centered editorial column:
   breadcrumb, bordered title, outlined DATE | AUTHOR, image, body.
   ============================================================ */
.ls-post-main {
	max-width: 1170px;   /* widened 50% from 780px */
	margin: 0 auto;
	padding: 8px 15px 96px;
	font-family: var(--ls-font);
	box-sizing: border-box;
}

/* post_class() adds `post`, so Shoptimizer's blog.min.css separator
   (`.site-main:not(.grid) article.post`) would draw a stray #eee line + 2rem/
   2.25rem spacing at the foot of the article — drop it. */
.ls-post.post {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Breadcrumb — centered mono trail at the top. */
.ls-post-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ls-post-breadcrumb a { color: var(--ls-fg); text-decoration: none; }
.ls-post-breadcrumb a:hover { text-decoration: underline; }
.ls-post-breadcrumb__sep,
.ls-post-breadcrumb__current { color: var(--ls-muted); }

/* Bordered title. Scoped with .single-post to beat Shoptimizer's customizer
   inline rule `body.single-post h1 { text-transform: none }`. The symmetric side
   padding reserves room for the left badge while keeping the title centered. */
.single-post .ls-post__title {
	position: relative;
	margin: 0;
	padding: 18px 72px;
	border: 1px solid var(--ls-fg);
	text-align: center;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ls-fg);
}
.ls-post__title-text { vertical-align: middle; }

/* Featured image as a small matted badge pinned to the far left of the title
   row — a subtle border with a white margin around the thumbnail. */
.ls-post__badge {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: block;
	line-height: 0;   /* the badge sits in the h1's 31px line-height; zero it so the box hugs the image */
	padding: 5px;
	background: var(--ls-bg);
	border: 1px solid var(--ls-fg);
	box-sizing: border-box;
}
/* Expand into a larger preview on hover. The image (not the badge) is resized,
   so the 1px border and the mat stay crisp instead of scaling up. */
.ls-post__badge:hover { z-index: 6; }
.ls-post__badge-img {
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 !important;   /* beat blog.min.css `.post .wp-post-image { margin-bottom: 1.618em }` */
	object-fit: cover;
	transition: width 0.2s ease, height 0.2s ease;
}
.ls-post__badge:hover .ls-post__badge-img {
	width: 150px;
	height: 150px;
}

@media (max-width: 640px) {
	.single-post .ls-post__title {
		padding-left: 58px;
		padding-right: 58px;
		font-size: 20px;
	}
	.ls-post__badge { left: 8px; }
	.ls-post__badge-img { width: 36px; height: 36px; }
}

/* DATE + AUTHOR — two outlined cells side by side, centered, butted so they
   share one divider (no doubled border). */
.ls-post__byline {
	display: flex;
	justify-content: center;
	margin: 16px 0 0;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ls-post__date,
.ls-post__author {
	padding: 9px 20px;
	border: 1px solid var(--ls-fg);
	color: var(--ls-fg);
}
.ls-post__author { border-left: 0; }

/* Body. */
.ls-post__content {
	margin: 32px 0 0;
	font-size: 15px;
	line-height: 1.75;
}
.ls-post__content > :first-child { margin-top: 0; }
.ls-post__content p { margin: 0 0 1.4em; }
.ls-post__content h2,
.ls-post__content h3,
.ls-post__content h4 {
	margin: 1.8em 0 0.6em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.ls-post__content img { max-width: 100%; height: auto; }
.ls-post__content a { text-decoration: underline; }
.ls-post__content ul,
.ls-post__content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.ls-post__content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 18px;
	border-left: 2px solid var(--ls-fg);
	color: var(--ls-muted);
}

/* ============================================================
   FAQ page (template-faq.php) — centered journal-style title
   above accordion Q&A items mirroring the product page's
   accordion (.ls-joined__group). Toggled by faq-accordion.js.
   ============================================================ */
.ls-faq-main {
	max-width: 860px;
	margin: 0 auto;
	padding: 8px 15px 96px;
	font-family: var(--ls-font);
	box-sizing: border-box;
}
/* The page title ("FAQ") is the centered heading; drop the content's own
   "Frequently Asked Questions" h2 so there aren't two titles. */
.ls-page-faq > h2 { display: none; }

.ls-faq-item { margin: 0 0 12px; }

/* Question = the bordered, clickable accordion header with a +/- affordance. */
.ls-faq-question {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--ls-fg);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ls-fg);
	user-select: none;
}
.ls-faq-question::after {
	content: "+";
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
	color: var(--ls-muted);
}
.ls-faq-item.is-open .ls-faq-question::after { content: "\2212"; } /* minus */

/* Answer = bordered body that meets the header border (border-top:0 avoids
   doubling), revealed when the item is open. */
.ls-faq-answer {
	display: none;
	border: 1px solid var(--ls-fg);
	border-top: 0;
	padding: 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ls-fg);
}
.ls-faq-item.is-open .ls-faq-answer { display: block; }
.ls-faq-answer p { margin: 0; }
.ls-faq-answer p + p { margin-top: 1em; }
.ls-faq-answer a { text-decoration: underline; }

/* ============================================================
   Help / content pages (Shipping, Terms, Contact & Returns,
   My Account — default page template, Visual Composer content).
   Their content renders in the theme's Inter; force the brutalist
   mono so they match the rest of the site. !important + the
   descendant `*` beat VC's inline font-family styles.
   ============================================================ */
body.page .entry-content,
body.page .entry-content *:not(i):not([class*="fa-"]):not([class*="icon"]) {
	font-family: var(--ls-font) !important;
}
/* Slightly tighten VC body copy line-height for the mono face. */
body.page .entry-content p,
body.page .entry-content li {
	line-height: 1.7;
}

/* Contact & Returns (page 19088): Visual Composer's column CSS isn't loaded, so
   its row of two columns (a return form + a contact form) stacks. Lay the VC row
   out as flex so the two forms sit side by side (one row, two columns). Single-
   column rows stay full width; stacks on mobile. */
body.page-id-19088 .vce-row-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 30px;
}
body.page-id-19088 .vce-col {
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 768px) {
	body.page-id-19088 .vce-row-content { flex-direction: column; }
}

/* Page titles: centered H2 (rendered by the overridden shoptimizer_page_header
   as .ls-page-header > h2.entry-title), matching the journal/FAQ title scale. */
.ls-page-header {
	text-align: center;
	margin: 0 0 28px;
}
.ls-page-header .entry-title {
	font-size: 26px !important;
	line-height: 1.1;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase;
}

/* Contact Form 7 fields — full width with a crisp 1px border. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--ls-fg);
}

/* My Account — content is already mono (body.page .entry-content); give its
   inputs and order/address tables the brutalist 1px-black frame for consistency. */
.woocommerce-account .woocommerce-MyAccount-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	border: 1px solid var(--ls-fg) !important;
	box-sizing: border-box;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border: 1px solid var(--ls-fg) !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border-collapse: collapse;
}
/* Account nav: mark the active link the brutalist way. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 500;
}

.ls-catalog-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 48px 16px;
}

@media (max-width: 1400px) {
	.ls-catalog-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1100px) {
	.ls-catalog-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
	.ls-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.ls-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
	.ls-catalog-grid { grid-template-columns: 1fr; }
}

/* Compact (4-per-row) view, set via the `ls-view-compact` class on <html>.
   Only meaningful at >=901px — below that the responsive caps above already
   land at 4 columns or fewer. */
@media (min-width: 901px) {
	html.ls-view-compact .ls-catalog-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Cross-fade the grid when switching products-per-row. */
.ls-catalog-grid {
	transition: opacity 0.25s ease;
}

/* Suppress the per-card image cross-fade during load-time hydration so the
   stored image mode applies instantly instead of animating on first paint. */
.ls-card__slider.ls-no-anim .ls-card__image {
	transition: none !important;
}

/* ============================================================
   Catalog view controls — toolbar above the offers banner.
   50/50 row; each half a 3-cell (33/33/33) segmented bar.
   ============================================================ */
.ls-view-controls {
	display: flex;
	gap: 16px;
	margin: -25px 0 32px;   /* pull the control row up toward the banner */
	padding: 0 15px;
}

.ls-view-controls__group {
	flex: 1 1 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.ls-view-controls__label,
.ls-view-btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;   /* control rail buttons halved sitewide */
	font-family: var(--ls-font);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--ls-bg);
	color: var(--ls-fg);
}

/* Rail labels read as labels, not buttons: gray fill, no border — the same
   treatment as the single-product "VIEW" label (.ls-pdp-views override below).
   Shared by the shop view/images rail and the journal categories rail. */
.ls-view-controls__label {
	border: 0;
	background: var(--ls-faint);
	color: var(--ls-fg);
	font-weight: 500;
	user-select: none;
}

.ls-view-btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid var(--ls-fg);
	border-radius: 0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ls-view-btn .ls-icon svg {
	display: block;
}

/* White fill / black text by default; black fill / white text on hover and
   for the currently-selected option. The selected state is driven by the
   <html> mode classes (not aria-pressed) so the no-flash head script paints
   the right filled button on the first frame, in lockstep with the grid.
   aria-pressed stays on the buttons purely as the accessibility signal. */
html.ls-view-compact .ls-view-btn[data-view="compact"],
html:not(.ls-view-compact) .ls-view-btn[data-view="default"],
html:not(.ls-img-person) .ls-view-btn[data-image="shoe"],
html.ls-img-person .ls-view-btn[data-image="person"],
.ls-view-btn.is-active,
.ls-view-btn:hover {
	background: var(--ls-fg);
	color: var(--ls-bg);
}

/* Stack the two halves on narrow screens. */
@media (max-width: 640px) {
	.ls-view-controls {
		flex-direction: column;
		gap: 12px;
	}
	.ls-view-controls__label,
	.ls-view-btn {
		height: 24px;
		font-size: 13px;
	}
}

/* ============================================================
   Single product page — SINGLE / JOINED views.
   Control bar reuses .ls-view-controls; JOINED swaps the
   gallery+summary for a horizontal-scrolling masonry band.
   ============================================================ */
.ls-pdp-views {
	/* Now lives inside the .summary column (under the short description), so it
	   uses normal in-column spacing — not the top toolbar's negative pull. The
	   top margin is 0 so the gap above the rail comes solely from the short
	   description's margin-bottom (16px) — deterministic and identical in both
	   views (a flex container's top margin collapses inconsistently otherwise). */
	padding: 0;
	margin: 0 0 20px;
}
.ls-pdp-views .ls-view-controls__group {
	/* Label hugs its content; SINGLE/JOINED split the remaining width. */
	grid-template-columns: auto 1fr 1fr;
}
.ls-pdp-views .ls-view-btn {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* The "VIEW" cell reads as a label, not a button: no border, a light-gray fill
   (adapts in dark mode via --ls-faint) and an eye glyph ahead of the text. */
.ls-pdp-views .ls-view-controls__label {
	border: 0;
	background: var(--ls-faint);
	color: var(--ls-fg);
	gap: 7px;
	padding: 0 14px;
}
.ls-pdp-views .ls-view-controls__label .ls-eye {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	fill: currentColor;
	display: block;
}

/* Active (filled) buttons — driven by the <html> classes so the no-flash head
   script paints them on the first frame, like the catalog controls. */
html.ls-pdp-joined .ls-pdp-views .ls-view-btn[data-pdpview="joined"],
html:not(.ls-pdp-joined) .ls-pdp-views .ls-view-btn[data-pdpview="single"],
html.ls-pdp-allimages .ls-pdp-views .ls-view-btn[data-pdpfilter="all"],
html:not(.ls-pdp-allimages) .ls-pdp-views .ls-view-btn[data-pdpfilter="product"] {
	background: var(--ls-fg);
	color: var(--ls-bg);
}

/* The IMAGES filter (PRODUCT/ALL) drives both views now — the horizontal SINGLE
   gallery and the JOINED mosaic — so it's always shown. (The views bar only
   renders on enhanced PDPs in the first place.) */
.ls-pdp-views__group--filter { visibility: visible; }

/* SINGLE (default): joined view hidden, normal gallery+summary shown. */
.ls-joined-view { display: none; }

html.ls-pdp-joined .single-product div.product .product-details-wrapper,
html.ls-pdp-joined .single-product div.product .images,
html.ls-pdp-joined .single-product div.product .woocommerce-product-gallery,
html.ls-pdp-joined .single-product div.product .ls-gallery-col,
html.ls-pdp-joined .single-product div.product .summary,
html.ls-pdp-joined .single-product div.product .woocommerce-tabs,
html.ls-pdp-joined .single-product div.product .related-wrapper {
	display: none !important;
}

/* Enhanced PDPs (BOTH views): hide the default WC tabs + related-products
   surfaces. Description + Additional info are now rendered inside .summary's
   tabs (SINGLE) or .ls-joined__desc-body (JOINED). These selectors are safe
   on the IN-FLOW elements (`.woocommerce-tabs` is a wrapper that's NEVER
   placed inside our custom containers; `.related-wrapper` is the related
   products grid). The CommerceKit ATC tabs strip + Tabs-panel are hidden too
   — they live in commercekit-rendered wrappers (or hoisted to body), not in
   our custom containers. */
body.ls-pdp-has-views .woocommerce-tabs,
body.ls-pdp-has-views .related-wrapper,
body.ls-pdp-has-views .related-products,
body.ls-pdp-has-views .up-sells,
body.ls-pdp-has-views .commercekit-atc-sticky-tabs,
body.ls-pdp-has-views #commercekit-atc-tabs-wrap {
	display: none !important;
}

/* HOISTED-out duplicates: when the parser breaks containers, attribute tables
   and Tabs-panels land at body or #page level. Hide ONLY those (specifically
   targeting direct-children of body/#page so the in-tab copy inside
   .ls-joined__desc-body / .ls-single-desc is untouched). */
body.ls-pdp-has-views > .woocommerce-Tabs-panel,
body.ls-pdp-has-views > .woocommerce-product-attributes,
body.ls-pdp-has-views > .ls-joined__desc-subhead,
body.ls-pdp-has-views #page > .woocommerce-Tabs-panel,
body.ls-pdp-has-views #page > .woocommerce-product-attributes,
body.ls-pdp-has-views #page > .ls-joined__desc-subhead {
	display: none !important;
}
/* .product is a 2-col layout in SINGLE — let the joined view span full width. */
html.ls-pdp-joined .single-product div.product {
	display: block !important;
}

/* Visual Composer renders the product's long description via the_content, and
   the resulting markup makes the HTML parser hoist content OUT of the product
   wrapper up to <body>/#page level: a stray <p>/<h2>, the .vce-col description
   blocks, a duplicate "Additional information" subhead + attributes table, the
   leftover WooCommerce tabs, etc. all become direct children. In SINGLE this
   lands below the gallery (a normal-looking description section, left alone). In
   JOINED the gallery sits lower, so the leaked blocks pile up ABOVE the gallery
   accordions — the reported bug. So ONLY in JOINED, hide every leaked duplicate
   (never .ls-joined-view itself) so the gallery starts at the top. */
body.single-product.ls-pdp-has-views > p,
body.single-product.ls-pdp-has-views > h2,
body.single-product.ls-pdp-has-views > .vce-col,
body.single-product.ls-pdp-has-views > .vce-text-block-wrapper,
body.single-product.ls-pdp-has-views > .ls-joined__desc-subhead,
body.single-product.ls-pdp-has-views > .woocommerce-product-attributes,
body.single-product.ls-pdp-has-views > .woocommerce-Tabs-panel,
body.single-product.ls-pdp-has-views > #commercekit-atc-tabs-wrap,
body.single-product.ls-pdp-has-views > .commercekit-atc-sticky-tabs,
body.single-product.ls-pdp-has-views #page > p,
body.single-product.ls-pdp-has-views #page > h2,
body.single-product.ls-pdp-has-views #page > .vce-col,
body.single-product.ls-pdp-has-views #page > .vce-text-block-wrapper {
	display: none !important;
}

/* JOINED: two columns — the colorway accordions (gallery) + the product
   description. The whole page scrolls as one (no nested scroll areas); the desc
   column is sticky so it follows the gallery and releases into the main content
   at the bottom. align-items:flex-start lets the sticky desc pin to the top. */
html.ls-pdp-joined .ls-joined-view {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 0 15px 16px;
	box-sizing: border-box;
}
/* Each column stacks a header above its content. Columns no longer scroll on
   their own — the page scrolls. */
.ls-joined__col {
	display: flex;
	flex-direction: column;
}
.ls-joined__col--mosaic { flex: 1 1 0; min-width: 0; }
.ls-joined__col--desc {
	flex: 0 0 40%;
	max-width: 40%;
	/* Pin the entire right column on page scroll, with the product TITLE as the
	   topmost row (no padding-top offset). The pin sits just below the sticky
	   chrome (header + offer banner). align-self:flex-start opts out of the row's
	   stretch so .summary uses its content height; max-height + overflow-y let
	   the column scroll INTERNALLY when its content exceeds the viewport (long
	   description / additional-info table). */
	position: sticky;
	align-self: flex-start;
	top: calc(var(--ls-home-stick-total, 100px) + 16px);
	max-height: calc(100vh - var(--ls-home-stick-total, 100px) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Tab bar (Gallery / Description / Additional info) — the same minimal
   underlined nav as the single-product gallery tabs. */
.ls-joined__tabbar {
	flex: 0 0 auto;
	display: flex;
	gap: 24px;
	margin: 0 0 16px;
}
.ls-joined__tab {
	font-family: var(--ls-font);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ls-muted);
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 0 0 6px;
	cursor: pointer;
	text-decoration: none;
}
a.ls-joined__tab:hover { color: var(--ls-fg); }
.ls-joined__tab.is-active {
	color: var(--ls-fg);
	border-bottom-color: var(--ls-fg);
}
span.ls-joined__tab { cursor: default; }

/* LEFT — the gallery column body: a stack of colorway accordions. No scrolling
   of its own; the page scrolls. */
.ls-joined__mosaic {
	flex: 1 1 auto;
}
/* One accordion (<details>) per colorway — a bordered header row above a bordered
   body (sizes + image grid). Collapsed by default; the body shows when expanded. */
.ls-joined__group {
	margin-bottom: 16px;
	/* Clear the sticky stack (header + offer banner + any home rails) when
	   deep-linked from the home feed (#ls-cw-…) — same offset model as the
	   home-page band headers. */
	scroll-margin-top: calc(var(--ls-home-stick-total, 120px) + 12px);
}
/* Sticky group head: when the user scrolls down through an open accordion's
   image grid, the colorway name pins to the top of the viewport just under the
   sticky chrome. height + box-sizing is explicit so the sizes-bar below can
   stack at a known offset without JS measurement. */
.ls-joined__group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--ls-fg);
	background: var(--ls-bg);
	cursor: pointer;
	list-style: none;                 /* hide the default disclosure triangle */
	font-family: var(--ls-font);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ls-fg);
	user-select: none;
	position: sticky;
	top: var(--ls-home-stick-total, 100px);
	z-index: 21;
}
.ls-joined__group-head::-webkit-details-marker { display: none; } /* Safari */
.ls-joined__group-name { margin-right: auto; font-size: 14px; }
.ls-joined__group-head::after {
	content: "+";
	width: 1ch;
	text-align: center;
	font-size: 16px;
	line-height: 1;
	color: var(--ls-muted);
}
.ls-joined__group[open] .ls-joined__group-head::after { content: "\2212"; } /* minus */
/* Bordered content box — meets the header border (border-top:0 avoids doubling). */
.ls-joined__group-body {
	border: 1px solid var(--ls-fg);
	border-top: 0;
	padding: 14px 12px;
}
/* Masonry grid of one colorway's images. */
.ls-joined__group-grid {
	column-count: 3;
	column-gap: 12px;
	padding-bottom: 8px;
}
@media (max-width: 1400px) { .ls-joined__group-grid { column-count: 2; } }

.ls-joined__item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 12px;
	position: relative;
	background: var(--ls-faint);
	overflow: hidden;
}
.ls-joined__img {
	display: block;
	width: 100%;
	height: auto;
}
/* Variation images are non-interactive — no click, no cursor, no hover state.
   The original <a class="ls-joined__image-link"> linked back to the same
   product page (useless), so the markup was simplified to a bare div + img.
   The `.ls-joined__item` rule still positions the hover-label overlay. */
.ls-joined__item img,
.ls-joined__item {
	cursor: default;
}

/* Border for variation images in the galleries only (JOINED mosaic + SINGLE
   strip) — NOT description-content images. */
.ls-variation-img {
	border: 1px solid var(--ls-fg);
	box-sizing: border-box;
}

/* Hover label — product name + colorway, top of each tile. */
.ls-joined__label {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	background: var(--ls-bg);
	border: 1px solid var(--ls-fg);
	box-sizing: border-box;
	font-family: var(--ls-font);
	opacity: 0;
	transition: opacity 0.15s ease;
}
.ls-joined__item:hover .ls-joined__label,
.ls-joined__item:focus-within .ls-joined__label { opacity: 1; }
@media (hover: none) { .ls-joined__label { opacity: 1; } }
.ls-joined__label-name {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ls-fg);
}
.ls-joined__label-color {
	font-size: 11px;
	color: var(--ls-muted);
}

/* Variation size buttons — one row per colorway, at the top of the expanded
   accordion (below the colorway header). Pick a size to add the colorway to the
   cart (same .ls-size-btn + add-to-cart handler + fly-to-cart as the catalog
   cards). Sticky too, stacked under the head (which is 44px tall): when you
   scroll through the image grid the sizes stay reachable. The negative top
   margin pulls the sizes flush against the head's bottom border so the two
   stuck bands read as one. */
.ls-joined__group-sizes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: -14px -12px 14px;
	padding: 8px 12px;
	background: var(--ls-bg);
	border-bottom: 1px solid var(--ls-fg);
	position: sticky;
	top: calc(var(--ls-home-stick-total, 100px) + 44px);
	z-index: 20;
}
.ls-joined__group-sizes-label {
	font-family: var(--ls-font);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ls-muted);
	margin-right: 4px;
}
.ls-joined__group-sizes .ls-size-btn {
	width: 40px;           /* exact 40x40 square, matching the SINGLE size swatches */
	height: 40px;
	min-width: 0;
	padding: 0;
	font-size: 13px;
}

/* PRODUCT filter (default) = first two images per colorway; ALL reveals rest. */
.ls-joined__item--extra { display: block; }

/* RIGHT — the product-identity head (name / price / short desc / VIEW / size-
   guide / tabs) above the description body. */
.ls-joined__desc-head {
	flex: 0 0 auto;
	font-family: var(--ls-font);
}
.ls-joined__desc-title {
	margin: 0 0 8px;
	font-family: var(--ls-font) !important;
	font-size: 26px;
	line-height: 1.1;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ls-fg) !important;
}
.ls-joined__desc-price {
	font-size: 22px;
	color: var(--ls-fg);
	margin-bottom: 12px;
}
.ls-joined__desc-short {
	font-family: var(--ls-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ls-fg);
	margin-bottom: 16px;
}
/* WooCommerce wraps the short description in a <p> whose default bottom margin
   (~19px) collapses out of this div and pushes the VIEW rail down — but only in
   JOINED (the SINGLE short-desc's <p> margin is already zeroed). Zero it so the
   gap below "True to Size Fit" is just this div's 16px in both views, putting the
   VIEW rail at the same position. */
.ls-joined__desc-short p:first-child { margin-top: 0; }
.ls-joined__desc-short p:last-child { margin-bottom: 0; }
/* Size-guide button — the brutalist black CTA, sized to exactly match the size
   buttons (40px tall) and kept identical between the JOINED and SINGLE views.
   The !important overrides beat the global black-button reset's tall padding. */
.ls-joined__size-guide-btn {
	height: 40px !important;
	padding: 0 14px !important;   /* exact match to the SINGLE inline size guide */
	font-size: 13px !important;
	margin-bottom: 16px;
	cursor: pointer;
	align-self: flex-start;
}

.ls-joined__desc {
	overflow-x: hidden;
	font-family: var(--ls-font);
}
/* Autofit the (full-width Visual Composer) description content into the column:
   cap every element at its parent's width so VC's fixed-width image wrappers
   (e.g. .vce-single-image-inner @ 800px) shrink to fit instead of overflowing. */
.ls-joined__desc-body { overflow-x: hidden; }
.ls-joined__desc-body * { max-width: 100% !important; }
.ls-joined__desc-body img,
.ls-joined__desc-body video,
.ls-joined__desc-body iframe {
	height: auto !important;
	width: auto !important;
}
/* "Additional information" attributes table, folded into the description. */
.ls-joined__desc-subhead {
	margin: 32px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ls-faint);
	scroll-margin-top: 8px;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ls-fg);
}

/* Gallery tab nav relocated to the top of the gallery column (pdp-views.js):
   the wrapper becomes the 60% left column, tab nav (un-stickied) on top, gallery
   below; summary stays on the right. */
.ls-gallery-col {
	display: flex;
	flex-direction: column;
	width: 60%;
}
.ls-gallery-col .images {
	width: 100% !important;
}
.ls-gallery-col .commercekit-atc-sticky-tabs {
	position: static !important;
	width: 100% !important;
	margin: 0 0 12px !important;
}

/* Stack the two columns on mobile — page scroll, not independent columns. */
@media (max-width: 768px) {
	html.ls-pdp-joined .ls-joined-view {
		flex-direction: column;
	}
	.ls-joined__col--mosaic,
	.ls-joined__col--desc {
		flex: 1 1 auto;
		max-width: 100%;
		min-width: 0;
		padding-top: 0;   /* no name/image alignment offset when stacked */
	}
	.ls-joined__group-grid { column-count: 2; }
	.ls-gallery-col { width: 100%; }
}

/* ============================================================
   Enhanced SINGLE view — horizontal-scrolling gallery (60%) +
   summary/description column (40%). Active for variable products
   with colorway galleries (body.ls-pdp-has-views) when NOT JOINED.
   The custom gallery + in-summary desc replace CommerceKit's Swiper
   gallery and tabs, which are hidden below.
   ============================================================ */

/* Hide CommerceKit's Swiper gallery, its gallery-tab nav, the empty
   gallery-outside slot, its tabs wrapper, AND its sticky-ATC fixed bar
   (which was hijacking the top of the viewport on scroll, showing
   "IN STOCK / ADD TO CART / DESCRIPTION" instead of our sticky .summary).
   JOINED already hides the whole .product-details-wrapper. */
html:not(.ls-pdp-joined) body.ls-pdp-has-views #commercegurus-pdp-gallery-wrapper,
html:not(.ls-pdp-joined) body.ls-pdp-has-views .commercekit-atc-sticky-tabs,
html:not(.ls-pdp-joined) body.ls-pdp-has-views #cgkit-pdp-gallery-outside,
html:not(.ls-pdp-joined) body.ls-pdp-has-views #commercekit-atc-tabs-wrap,
html:not(.ls-pdp-joined) body.ls-pdp-has-views form.commercekit_sticky-atc:not(.commercekit_sticky-atc-origin),
html:not(.ls-pdp-joined) body.ls-pdp-has-views .commercekit-pdp-sticky[style*="fixed"] {
	display: none !important;
}
/* The custom single pieces only belong to SINGLE; hide them in JOINED. */
html.ls-pdp-joined .ls-single-gallery,
html.ls-pdp-joined .ls-single-desc { display: none !important; }

/* Desktop two-column layout. The right column (.summary) pins to the top of
   the page below the sticky chrome, with the product TITLE as the topmost row.
   The wrapper has min-height: 100vh so that .summary's sticky containing block
   (the wrapper) is meaningfully taller than .summary itself — that gives the
   user a viewport's worth of scroll with the title pinned before the wrapper
   bottoms out and the additional-info section appears. Mobile keeps natural
   page flow. */
@media (min-width: 769px) {
	/* Fill the whole row with the SAME edge padding + gap + column split as the
	   JOINED view. min-height: 100vh extends the wrapper so .summary sticky has
	   room to engage; align-items: flex-start opts summary out of stretch so
	   the gallery doesn't get pulled to wrapper height (it stays viewport-sized
	   horizontal carousel). */
	html:not(.ls-pdp-joined) body.ls-pdp-has-views .product-details-wrapper {
		max-width: none;
		width: 100%;
		margin: 0;
		padding: 0 15px 16px;
		box-sizing: border-box;
		align-items: flex-start;
		gap: 16px;
		min-height: 100vh;
	}
	/* Right column: pin against the page scroll. The product title is the first
	   child of .summary, so it's the topmost visible row when stuck. align-self:
	   flex-start opts out of the row's stretch so .summary uses its content
	   height. max-height lets very long content scroll INSIDE the pinned column
	   instead of overflowing the viewport.
	   The parent theme's inline <style> sets `.theme-shoptimizer.admin-bar.
	   single-product div.product .summary { top: 60px }` at specificity 0-5-2,
	   so we have to chain enough classes to outrank it (0-6-2) — body.admin-bar
	   is conditional, so we also have a non-admin-bar fallback. */
	html:not(.ls-pdp-joined) body.ls-pdp-has-views.single-product div.product .summary.entry-summary {
		flex: 0 0 40%;
		max-width: 40%;
		align-self: flex-start;
		position: sticky;
		top: calc(var(--ls-home-stick-total, 100px) + 16px);
		max-height: calc(100vh - var(--ls-home-stick-total, 100px) - 32px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-top: 0;            /* title sits at the top, no pre-offset */
	}
	/* Gallery: viewport-tall horizontal swiper. Its explicit height drives the
	   wrapper's height (since align-items: flex-start lets summary be shorter),
	   which IS .summary's sticky containing block — the bigger the difference
	   between gallery height and capped summary height, the more page-scroll
	   summary stays pinned for. */
	html:not(.ls-pdp-joined) body.ls-pdp-has-views .ls-single-gallery {
		height: calc(100vh - var(--ls-home-stick-total, 100px) - 32px);
	}

	/* Stack the purchase controls in one column: colour + size attributes on top,
	   then in-stock / quantity / add-to-cart BELOW the size buttons. Scoped to the
	   in-page (origin) form; the sticky-clone bar is untouched. */
	html:not(.ls-pdp-joined) body.ls-pdp-has-views form.commercekit_sticky-atc-origin .commercekit-pdp-sticky-inner {
		display: block;
	}
	html:not(.ls-pdp-joined) body.ls-pdp-has-views form.commercekit_sticky-atc-origin .commercekit-pdp-before-form {
		display: none !important; /* sticky-bar header — never in the in-page form */
	}
	html:not(.ls-pdp-joined) body.ls-pdp-has-views form.commercekit_sticky-atc-origin table.variations {
		width: 100%;
		margin: 0 0 4px;
	}
}

/* SINGLE-view size swatches (CommerceKit): the global button reset (line ~2366)
   paints all unmatched <button>s black, so the swatches end up black on default
   with no visible selected state. Force the inverse here — white default, black
   only when selected. Specificity (0-4-1) + !important beats the global reset's
   !important. */
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary .cgkit-attribute-swatch.cgkit-button button {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
}
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary .cgkit-attribute-swatch.cgkit-button button * {
	color: var(--ls-fg) !important;
}
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary .cgkit-attribute-swatch.cgkit-button button:hover,
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary .cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	border-color: var(--ls-fg) !important;
}
/* Only the text color cascades to children (the number) — not the background. */
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary .cgkit-attribute-swatch.cgkit-button button:hover *,
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary .cgkit-attribute-swatch.cgkit-button button.cgkit-swatch-selected * {
	color: var(--ls-bg) !important;
}
/* The selected SIZE value text is redundant once the chosen swatch is black —
   hide the ": 10" echo (the COLOR value stays; it names the colorway). */
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary label[for="size"] .ckit-chosen-attribute_semicolon,
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary label[for="size"] .cgkit-chosen-attribute {
	display: none;
}
/* Size-guide button relocated inline after the size swatches (pdp-views.js):
   the brutalist black CTA at the exact 40px swatch height, sat on the same row.
   The !important beats the global black-button reset's tall padding. */
.commercekit-sg-label.ls-sg-inline {
	display: inline-flex !important;
	align-items: center !important;
	height: 40px !important;
	margin: 0 0 0 6px !important;
	padding: 0 14px !important;
	font-size: 13px !important;
	vertical-align: top;
}
/* Single ADD TO CART: dim + wait-cursor while the AJAX add is in flight. */
.single_add_to_cart_button.ls-adding {
	opacity: 0.7;
	cursor: wait;
}
/* "True to Size Fit" (short description) — match the JOINED view's .ls-joined__
   desc-short exactly (font + spacing) so the VIEW rail below it sits at the same
   position in both views. */
html:not(.ls-pdp-joined) body.ls-pdp-has-views .summary .woocommerce-product-details__short-description {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 16px;
	padding-bottom: 0;
}

/* LEFT — the horizontal image strip. Fills the column height; images are sized
   to that height so they're large, and you scroll sideways through colorways. */
.ls-single-gallery {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}
/* Holds the strip + arrows below the "Gallery" tab; the arrows center on the
   images (not the whole column). */
.ls-single-gallery__viewport {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.ls-single-gallery__strip {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	align-items: stretch;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;          /* Firefox — hidden, it's a carousel */
	-ms-overflow-style: none;
}
.ls-single-gallery__strip::-webkit-scrollbar { display: none; } /* WebKit */
.ls-single-gallery__item {
	flex: 0 0 calc(50% - 6px);      /* ~2 images visible at a time */
	scroll-snap-align: start;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ls-single-gallery__img {
	height: 100%;
	width: 100%;
	max-width: none;
	object-fit: contain;
	display: block;
	box-sizing: border-box;
}

/* Carousel arrows — square brutalist buttons overlaid at the strip edges. The
   `.ls-single-gallery button…` selector + !important match/beat the global black
   button reset (which is itself !important) without bumping that reset's own
   specificity (doing so would override CommerceKit's swatch styling). */
.ls-single-gallery button.ls-single-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 22px !important;
	line-height: 1;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.ls-single-gallery button.ls-single-gallery__nav:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}
.ls-single-gallery__nav--prev { left: 8px; }
.ls-single-gallery__nav--next { right: 8px; }
.ls-single-gallery button.ls-single-gallery__nav[disabled] {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
}
/* The IMAGES filter was removed — every gallery image shows by default. */
.ls-single-gallery__item--extra { display: flex; }
/* Swatch-narrowed colorway filter (pdp-views.js) — hides the other colorways. */
.ls-single-gallery__item.is-color-hidden { display: none !important; }

/* RIGHT — the Description / Additional-info section, folded into the bottom of
   the summary. Reuses the JOINED desc styles (.ls-joined__tabbar / __desc /
   __desc-body), so it inherits the independent scroll + content autofit. */
.ls-single-desc {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--ls-faint);
}

/* Mobile: stack the columns and let the page scroll normally. */
@media (max-width: 768px) {
	body.ls-pdp-has-views .product-details-wrapper {
		flex-direction: column;
		height: auto !important;
	}
	.ls-single-gallery { flex: 1 1 auto; max-width: 100%; }
	.ls-single-gallery__viewport { height: 60vh; }
	.ls-single-gallery__item { flex: 0 0 82%; height: 100%; }
	.ls-single-gallery__img { height: 100%; width: 100%; object-fit: contain; }
	.ls-single-gallery__nav { display: none; } /* swipe instead of arrows */
	.ls-single-desc { flex: 1 1 auto; }
}

.ls-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ls-card__image-link {
	display: block;
	width: 100%;
	position: relative;
}

/* Image slider — the link holds every gallery image stacked; only the
   image with .is-active is visible. Maintains aspect ratio of the first
   image so the card doesn't reflow as the user steps through. */
.ls-card__slider {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--ls-fg);
}

.ls-card__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 !important;
	transition: opacity 0.2s ease;
}

.ls-card__slider .ls-card__image-link {
	display: block;
	position: relative;
}

/* Stack all gallery images in the same slot; show only the active one. */
.ls-card__slider .ls-card__image-link .ls-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.ls-card__slider .ls-card__image-link .ls-card__image.is-active {
	position: relative;
	inset: auto;
	height: auto;
	opacity: 1;
	pointer-events: auto;
}

.ls-card:hover .ls-card__image.is-active { opacity: 0.85; }

/* Arrows — subtle black squares, hover-revealed on desktop, always
   visible (positioned below) on mobile. */
.ls-card__slider-arrow {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ls-bg);
	color: var(--ls-fg);
	border: 1px solid var(--ls-fg);
	font-family: var(--ls-font);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.18s ease, background 0.15s ease, color 0.15s ease;
	z-index: 2;
	user-select: none;
}

.ls-card__slider-arrow--prev { left: 8px; }
.ls-card__slider-arrow--next { right: 8px; }

.ls-card:hover .ls-card__slider-arrow,
.ls-card__slider-arrow:focus-visible {
	opacity: 1;
}

.ls-card__slider-arrow:hover {
	background: var(--ls-fg);
	color: var(--ls-bg);
}

/* Mobile — no hover, so park the arrows beneath the active image and
   keep them always visible. */
@media (hover: none), (max-width: 720px) {
	.ls-card__slider {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.ls-card__slider-arrow {
		position: static;
		transform: none;
		opacity: 1;
	}
	/* Place both arrows on a single row beneath the image. */
	.ls-card__slider {
		position: relative;
	}
	.ls-card__slider-arrow--prev,
	.ls-card__slider-arrow--next {
		position: absolute;
		bottom: -36px;
		top: auto;
	}
	.ls-card__slider-arrow--prev { left: 50%; transform: translateX(-110%); }
	.ls-card__slider-arrow--next { left: 50%; transform: translateX(10%); }
	.ls-card { padding-bottom: 40px; }
}

.ls-card__meta {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	font-family: var(--ls-font);
}

.ls-card__title {
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--ls-fg);
	letter-spacing: 0;
	text-decoration: none;
}
.ls-card__title:hover { text-decoration: underline; }

.ls-card__color {
	font-size: 12px;
	color: var(--ls-muted);
	text-transform: uppercase;
}

.ls-card__price {
	font-size: 13px;
	color: var(--ls-fg);
	margin-top: 4px;
}

.ls-card__price .woocommerce-Price-amount {
	font-family: var(--ls-font);
	font-weight: 400;
}

/* Sizes accordion wrapper — bar with toggle + quickview "?" button.
   Full-width so the card layout doesn't reflow when the panel opens/closes. */
.ls-card__sizes-wrap {
	margin-top: 12px;
	width: 100%;
	align-self: stretch;
}

.ls-card__sizes-bar {
	display: flex;
	align-items: stretch;
	gap: 6px;
	width: 100%;
}

.ls-card__sizes-toggle,
.ls-catalog-grid .ls-card__sizes-toggle {
	all: unset;
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 6px 10px !important;
	margin: 0 !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--ls-fg) !important;
	background: var(--ls-bg) !important;
	cursor: pointer !important;
	transition: background 0.12s ease, color 0.12s ease !important;
}

.ls-card__sizes-toggle:hover,
.ls-catalog-grid .ls-card__sizes-toggle:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

.ls-card__sizes-caret {
	font-family: var(--ls-font);
	font-size: 12px;
	line-height: 1;
	margin-left: 8px;
}

.ls-card__sizes-toggle[aria-expanded="true"] .ls-card__sizes-caret {
	/* Use "−" when expanded */
	visibility: hidden;
	position: relative;
}

.ls-card__sizes-toggle[aria-expanded="true"] .ls-card__sizes-caret::after {
	content: "−";
	visibility: visible;
	position: absolute;
	inset: 0;
}

/* Quickview "?" — square outlined sibling of the SIZES toggle. */
.ls-card__qv,
.ls-catalog-grid .ls-card__qv {
	all: unset;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--ls-fg) !important;
	background: var(--ls-bg) !important;
	cursor: pointer !important;
	transition: background 0.12s ease, color 0.12s ease !important;
}

.ls-card__qv:hover,
.ls-catalog-grid .ls-card__qv:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

/* Accordion panel — animates open/closed via max-height + opacity.
   Starts collapsed (max-height: 0, opacity: 0). When .is-open is added by
   JS, the panel slides down and fades in. */
.ls-card__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	overflow: hidden;
	max-height: 0;
	margin-top: 0;
	padding-top: 0;
	opacity: 0;
	transform: translateY(-4px);
	transition: max-height 0.28s ease, opacity 0.2s ease,
		transform 0.28s ease, margin-top 0.28s ease, padding-top 0.28s ease;
}

.ls-card__sizes.is-open {
	max-height: 320px;
	opacity: 1;
	transform: translateY(0);
	margin-top: 8px;
	padding-top: 0;
}

/* SIZES toggle + "?" quickview: force white bg / black text. The global black
   button reset is !important at (0,2,1); `.ls-catalog-grid button.<class>` ties
   that specificity and wins on source order. Also pin both to an equal 30px
   height (the reset's 14px 24px padding was bloating the toggle to ~47px). */
.ls-catalog-grid button.ls-card__sizes-toggle,
.ls-catalog-grid button.ls-card__qv {
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;
	font-size: 11px !important;
}
.ls-catalog-grid button.ls-card__sizes-toggle { padding: 0 10px !important; }
.ls-catalog-grid button.ls-card__qv { padding: 0 !important; }
.ls-catalog-grid button.ls-card__sizes-toggle:hover,
.ls-catalog-grid button.ls-card__qv:hover {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

/* When expanded, the size buttons span the full width of the row. */
.ls-catalog-grid .ls-card__sizes { flex-wrap: nowrap; }
.ls-catalog-grid .ls-card__sizes .ls-size-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}

/* SIZES bar + "?" are hidden until the card is hovered (space is reserved via
   visibility so the card doesn't reflow); always shown on touch (no hover). */
.ls-card__sizes-wrap {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}
.ls-card:hover .ls-card__sizes-wrap,
.ls-card:focus-within .ls-card__sizes-wrap {
	opacity: 1;
	visibility: visible;
}
@media (hover: none) {
	.ls-card__sizes-wrap { opacity: 1; visibility: visible; }
}

/* Brief feedback on a size button while its add-to-cart request is in
   flight — invert the colors so the user gets a confirmation pulse. */
.ls-size-btn.is-adding,
.ls-catalog-grid .ls-size-btn.is-adding {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

/* Flying clone of the product image, animating from card to cart icon. */
.ls-fly-to-cart {
	display: block;
	border-radius: 0;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	will-change: left, top, width, height, transform, opacity;
}

/* Centered "ADDING TO CART" loading overlay shown while a size-button
   add-to-cart request is in flight. No backdrop — pointer-events:none keeps
   the page interactive; the black slab itself is the only chrome. */
.ls-adding-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ls-adding-overlay.is-active { display: flex; }

.ls-adding-overlay__box {
	background: #000;
	padding: 28px 48px;
}

.ls-adding-overlay__text {
	font-family: var(--ls-font);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	background: linear-gradient(100deg, #cccccc 0%, #cccccc 38%, #ffffff 50%, #cccccc 62%, #cccccc 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: ls-adding-shimmer 1.2s linear infinite;
}

@keyframes ls-adding-shimmer {
	0%   { background-position: 220% 0; }
	100% { background-position: -220% 0; }
}

/* Shoptimizer auto-opens its mini-cart drawer after add-to-cart, which sets
   body.drawer-open and surfaces a dimmed overlay. We use our own cart modal
   (cart-modal.js), so force those styles dead so the page never appears
   "stuck" after a size click. */
body.drawer-open,
body.menu-open {
	overflow: auto !important;
}

body.drawer-open .menu-overlay,
body.menu-open .menu-overlay,
.menu-overlay.is-active,
.menu-overlay {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#shoptimizerCartDrawer,
#shoptimizerCartDrawer.is-open,
.shoptimizer-mini-cart-wrap,
.shoptimizer-mini-cart-wrap.is-open {
	display: none !important;
	transform: translateX(110%) !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.ls-size-btn,
.ls-catalog-grid .ls-size-btn,
.ls-modal .ls-size-btn {
	all: unset;
	box-sizing: border-box !important;
	display: inline-block !important;
	min-width: 26px !important;
	padding: 4px 6px !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	text-align: center !important;
	text-transform: none !important;
	cursor: pointer !important;
	color: var(--ls-fg) !important;
	background: var(--ls-bg) !important;
	background-color: var(--ls-bg) !important;
	position: relative !important;
	transition: background 0.12s ease, color 0.12s ease !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

.ls-size-btn:hover:not(.is-oos),
.ls-catalog-grid .ls-size-btn:hover:not(.is-oos),
.ls-modal .ls-size-btn:hover:not(.is-oos) {
	background: var(--ls-fg) !important;
	background-color: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

.ls-size-btn.is-oos,
.ls-catalog-grid .ls-size-btn.is-oos,
.ls-modal .ls-size-btn.is-oos {
	color: var(--ls-muted) !important;
	cursor: not-allowed !important;
	border-color: var(--ls-faint) !important;
	background: var(--ls-bg) !important;
}

/* Diagonal strike for OOS */
.ls-size-btn.is-oos::after {
	content: "";
	position: absolute;
	inset: -1px;
	pointer-events: none;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 0.5px),
		currentColor calc(50% - 0.5px),
		currentColor calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

.ls-catalog-empty {
	text-align: center;
	color: var(--ls-muted);
	font-family: var(--ls-font);
	padding: 96px 0;
	text-transform: uppercase;
}

/* ============================================================
   Quick-view modal
   ============================================================ */
.ls-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
}

.ls-modal.is-open { display: flex; }

.ls-modal__dialog {
	background: var(--ls-bg);
	max-width: 1200px;
	width: 100%;
	height: 95vh;
	max-height: 95vh;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	font-family: var(--ls-font);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

@media (max-width: 900px) {
	.ls-modal__dialog { grid-template-columns: 1fr; height: 95vh; }
}

.ls-modal__close {
	all: unset;
	position: absolute;
	top: 12px;
	right: 16px;
	cursor: pointer;
	font-family: var(--ls-font);
	font-size: 13px;
	color: var(--ls-fg);
	z-index: 10;
	padding: 6px 10px;
	background: var(--ls-bg);
	border: 1px solid var(--ls-fg);
}

/* Quickview loading state — centered spinner over an empty dialog while
   the AJAX response is in flight. Brutalist square spinner: thin border
   with one side darkened, rotating. */
.ls-modal__spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 2px solid var(--ls-faint);
	border-top-color: var(--ls-fg);
	border-radius: 50%;
	animation: ls-modal-spin 0.7s linear infinite;
	z-index: 9;
	pointer-events: none;
}

.ls-modal.is-loading .ls-modal__spinner {
	display: block;
}

/* Hide the empty content panes while loading so only the spinner shows. */
.ls-modal.is-loading .ls-modal__gallery,
.ls-modal.is-loading .ls-modal__right {
	visibility: hidden;
}

@keyframes ls-modal-spin {
	to { transform: rotate(360deg); }
}

/* Left column — vertical scrolling gallery */
.ls-modal__gallery {
	background: var(--ls-bg);
	padding: 24px;
	overflow-y: auto;
	border-right: 1px solid var(--ls-faint);
}

.ls-modal__gallery-item {
	margin-bottom: 16px;
}

.ls-modal__gallery-item:last-child {
	margin-bottom: 0;
}

.ls-modal__gallery img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	display: block;
	box-sizing: border-box;
	border: 1px solid var(--ls-fg);
}

.ls-modal__gallery-item {
	width: 100%;
	overflow: hidden;
}

/* Right column — sticky buy-box on top, scrolling details below */
.ls-modal__right {
	overflow-y: auto;
	position: relative;
}

.ls-modal__buy-box {
	position: sticky;
	top: 0;
	background: var(--ls-bg);
	padding: 56px 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ls-faint);
	z-index: 2;
}

.ls-modal__title {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.02em;
	margin: 0;
	color: var(--ls-fg);
}

.ls-modal__color {
	color: var(--ls-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.ls-modal__price {
	font-size: 16px;
	margin: 8px 0 0;
	color: var(--ls-fg);
}

.ls-modal__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ls-modal__sizes .ls-size-btn {
	min-width: 44px !important;
	padding: 10px 12px !important;
	font-size: 13px !important;
}

.ls-modal__sizes .ls-size-btn.is-selected {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
}

.ls-modal__add-form {
	margin-top: 16px;
}

.ls-modal__add {
	all: unset;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 24px;
	background: var(--ls-fg);
	color: var(--ls-bg);
	text-align: center;
	text-transform: uppercase;
	font-family: var(--ls-font);
	font-size: 14px;
	cursor: pointer;
	border: 1px solid var(--ls-fg);
}

.ls-modal__add[disabled] {
	background: var(--ls-bg);
	color: var(--ls-muted);
	border-color: var(--ls-faint);
	cursor: not-allowed;
}

.ls-modal__view-full {
	margin-top: 8px;
	font-size: 12px;
	color: var(--ls-muted);
	text-transform: uppercase;
	text-decoration: underline;
	align-self: flex-start;
}

/* Scrolling details below the sticky buy-box */
.ls-modal__details {
	padding: 32px;
	font-size: 14px;
	color: var(--ls-fg);
	line-height: 1.6;
	overflow-x: hidden;
}
/* The long description is VC content with inline Inter font-family — force the
   brutalist mono inside the modal (icon fonts excluded). */
.ls-modal__details,
.ls-modal__details *:not(i):not([class*="fa-"]):not([class*="icon"]) {
	font-family: var(--ls-font) !important;
}

.ls-modal__details p {
	margin: 0 0 16px;
}

.ls-modal__details img,
.ls-modal__details svg,
.ls-modal__details video,
.ls-modal__details iframe {
	max-width: 100% !important;
	height: auto !important;
	width: auto !important;
	display: block;
}

.ls-modal__details * {
	max-width: 100%;
	box-sizing: border-box;
}

.ls-modal__right {
	overflow-x: hidden;
}

.ls-modal__short-desc {
	font-size: 14px;
	margin-bottom: 24px;
}

.ls-modal__long-desc {
	margin-bottom: 24px;
}

.ls-modal__long-desc h1,
.ls-modal__long-desc h2,
.ls-modal__long-desc h3 {
	font-size: 14px;
	text-transform: uppercase;
	margin: 24px 0 8px;
}

.ls-modal__attrs {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.ls-modal__attrs th,
.ls-modal__attrs td {
	padding: 10px 0;
	text-align: left;
	border-bottom: 1px solid var(--ls-faint);
	vertical-align: top;
}

.ls-modal__attrs th {
	width: 35%;
	text-transform: uppercase;
	color: var(--ls-muted);
	font-weight: 400;
}

/* ============================================================
   Checkout — cart-style review table + shipping-first address
   ============================================================ */

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	background: var(--ls-bg) !important;
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	background: var(--ls-bg) !important;
	color: var(--ls-muted) !important;
	font-family: var(--ls-font) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-bottom: 1px solid var(--ls-fg) !important;
	border-right: 1px solid var(--ls-faint) !important;
	padding: 12px !important;
	text-align: left !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th:last-child { border-right: 0 !important; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.ls-cart-th--qty,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.ls-cart-th--price { text-align: center !important; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.ls-cart-th--total { text-align: right !important; }

.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td {
	border-right: 1px solid var(--ls-faint) !important;
	border-bottom: 1px solid var(--ls-faint) !important;
	vertical-align: middle !important;
	padding: 12px !important;
	background: var(--ls-bg) !important;
	font-family: var(--ls-font) !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td:last-child { border-right: 0 !important; }

.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-thumbnail {
	width: 90px;
	padding: 8px !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-thumbnail img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	display: block;
	margin: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name { text-align: left !important; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table .ls-cart-row__title {
	display: block;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ls-fg);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-quantity,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-price {
	text-align: center !important;
	font-variant-numeric: tabular-nums !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-subtotal {
	text-align: right !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--ls-fg) !important;
	font-variant-numeric: tabular-nums !important;
}

/* Tariff + shipping meta rows. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.ls-meta-row td {
	background: rgba(0, 0, 0, 0.025) !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.ls-meta-row .ls-cart-row__icon {
	width: 100%;
	max-width: 72px;
	height: auto;
	aspect-ratio: 1 / 1;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.ls-meta-row .ls-cart-row__attrs {
	display: block;
	margin-top: 4px;
	color: var(--ls-muted);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Grand total footer. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot.ls-cart-foot td {
	padding: 18px 12px !important;
	border-top: 1px solid var(--ls-fg) !important;
	border-bottom: 0 !important;
	border-right: 0 !important;
	font-size: 14px !important;
	font-family: var(--ls-font) !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	background: var(--ls-bg) !important;
	color: var(--ls-fg) !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot.ls-cart-foot td.ls-cart-foot__label { text-align: left !important; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot.ls-cart-foot td.ls-cart-foot__total {
	text-align: right !important;
	font-variant-numeric: tabular-nums !important;
}

/* --- Shipping-first / billing-same address inversion --- */
.woocommerce-checkout #customer_details {
	display: flex !important;
	flex-direction: column !important;
}
.woocommerce-checkout #customer_details .ls-checkout-contact { order: 0; }
.woocommerce-checkout #customer_details .col-2 { order: 1; width: 100% !important; }
.woocommerce-checkout #customer_details .col-1 { order: 2; width: 100% !important; }

/* Hide WooCommerce's native "ship to a different address" toggle. */
.ls-hide-ship-toggle { display: none !important; }

.ls-checkout-heading {
	font-size: 13px !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 24px 0 12px !important;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ls-fg);
}
.ls-checkout-contact .ls-checkout-heading { margin-top: 0 !important; }

.ls-billing-toggle { margin: 4px 0 16px; }
.ls-billing-toggle__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ls-font);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--ls-fg);
}
.ls-billing-toggle__label input {
	width: 16px;
	height: 16px;
	accent-color: var(--ls-fg);
	margin: 0;
}

/* Billing == shipping → hide the billing address fields. Email + phone live in
   the CONTACT section, so they stay visible regardless. */
body.ls-billing-same .woocommerce-billing-fields__field-wrapper { display: none !important; }

/* Offer banners on checkout: no checkout-specific overrides. The sitewide
   .ls-bxgy-banner-wrap--global block (rendered identically on every page) fully
   styles the banners — black/white, 18px padding, banners touching with only the
   jagged divider between them. Earlier checkout-scoped rules forced a 12px gap
   and thinner padding, which is exactly the divergence we don't want; dropping
   them keeps the checkout banner inline with the rest of the site. */

/* Offer / discount line-item rows (cart + checkout) — show the reduction in
   the sale-price red so it reads as money coming off the total. */
.woocommerce-cart table.shop_table.cart tr.ls-discount-row td.product-price,
.woocommerce-cart table.shop_table.cart tr.ls-discount-row td.product-subtotal,
.woocommerce-cart table.shop_table.cart tr.ls-discount-row td.product-subtotal .ls-cart-row__total-line,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.ls-discount-row td.product-price,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.ls-discount-row td.product-subtotal,
.ls-discount-row .product-price,
.ls-discount-row .product-subtotal {
	color: #d40000 !important;
	-webkit-text-fill-color: #d40000 !important;
}

/* ==================================================================
   Checkout — accordion sections + cart-aligned shipping fields, coupon,
   payment, and a green place-order button. Mirrors the /cart treatment.
   ================================================================== */

/* Each section (CONTACT / SHIPPING / BILLING in the left column, CART /
   PAYMENT INFO in the right) is its own accordion; space them evenly. */
.woocommerce-checkout #customer_details .ls-accordion,
.woocommerce-checkout #order_review .ls-accordion {
	margin: 0 0 16px !important;
}

/* CART (review table) accordion body is flush — the table draws its own
   borders, exactly like the cart page. PAYMENT INFO keeps standard padding. */
.woocommerce-checkout .ls-accordion--checkout-cart .ls-accordion__body { padding: 0; }

/* Show the review table's column headings (PRODUCT / QUANTITY / UNIT PRICE /
   TOTAL PRICE). WooCommerce hides the review-order thead by default; our
   transform fills it with the cart's 4-column header, so reveal it to match
   the /cart table. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
	display: table-header-group !important;
}

/* The CART accordion header replaces WC's "Your order" heading. */
.woocommerce-checkout #order_review_heading { display: none !important; }

/* Drop the stray bottom margin on the last field of each accordion body. */
.woocommerce-checkout .ls-accordion__body > .form-row:last-child { margin-bottom: 0; }

/* ---- Font alignment: every checkout label/input/select reads in the mono
   stack, so all sections match the accordion headers and the cart. ---- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #customer_details label,
.woocommerce-checkout #customer_details input,
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea,
.woocommerce-checkout #customer_details .select2-container,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review label,
.woocommerce-checkout #order_review input {
	font-family: var(--ls-font) !important;
}
.woocommerce-checkout #customer_details .ls-accordion__body label {
	font-size: 12px !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ls-fg);
}

/* ---- Shipping form: extend the cart's manual-toggle + clear-button styling
   (those rules are scoped to .woocommerce-cart) to the checkout. ---- */
body.woocommerce-checkout button.ls-shipping-manual-toggle {
	background: var(--ls-bg) !important;
	background-color: var(--ls-bg) !important;
	background-image: none !important;
	color: var(--ls-fg) !important;
	border: 1px solid var(--ls-fg) !important;
}
body.woocommerce-checkout button.ls-shipping-manual-toggle:hover {
	background: var(--ls-fg) !important;
	background-color: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	opacity: 1 !important;
}

/* Hide the clear "×" while the street field is empty (placeholder shown). */
#shipping_address_1:placeholder-shown ~ .ls-address-clear,
#shipping_address_1:placeholder-shown ~ .ics-aac-status,
#billing_address_1:placeholder-shown ~ .ls-address-clear,
#billing_address_1:placeholder-shown ~ .ics-aac-status { display: none !important; }
#shipping_address_1,
#billing_address_1 { padding-right: 38px !important; }

/* Fold the rows we relocate into the grid; hide them in place. */
.woocommerce-checkout .ls-row-hidden { display: none !important; }

/* APT/UNIT grid (street label/wrapper col 1, apt label/input col 2). */
.ls-address-row > label[for="shipping_address_1"],
.ls-address-row > label[for="billing_address_1"] { grid-column: 1 / 2; grid-row: 1 / 2; margin: 0; }
.ls-address-row > .ics-aac-wrapper,
.ls-address-row > input#shipping_address_1,
.ls-address-row > input#billing_address_1 { grid-column: 1 / 2; grid-row: 2 / 3; }

/* The state cell holds a select2-enhanced <select>; its select2 widget stays
   behind in the hidden row, so in manual mode override select2's accessible
   clip so the native select is visible and usable inside the grid cell. */
.woocommerce-checkout .ls-form--manual .ls-shipping-grid__col select.ls-shipping-grid__input {
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: 100% !important;
	height: 24px !important;
	opacity: 1 !important;
	margin: 0 !important;
}

/* ---- Coupon: WC's native "Have a coupon?" toggle → the cart's subtle text
   link that reveals the input. ---- */
.woocommerce-checkout .ls-coupon-toggle-wrap .woocommerce-info {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
	box-shadow: none !important;
	color: var(--ls-muted) !important;
	font-family: var(--ls-font) !important;
	font-size: 12px !important;
}
.woocommerce-checkout .ls-coupon-toggle-wrap .woocommerce-info::before { display: none !important; }
.woocommerce-checkout .ls-coupon-toggle-wrap a.showcoupon {
	color: var(--ls-fg) !important;
	font-family: var(--ls-font) !important;
	font-size: 12px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-color: var(--ls-faint) !important;
	cursor: pointer !important;
}
.woocommerce-checkout .ls-coupon-toggle-wrap a.showcoupon:hover { text-decoration-color: var(--ls-fg) !important; }
.woocommerce-checkout form.checkout_coupon {
	border: 1px solid var(--ls-faint) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	margin: 0 0 20px !important;
	padding: 16px !important;
	box-shadow: none !important;
}
.woocommerce-checkout form.checkout_coupon .input-text {
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
}
.woocommerce-checkout form.checkout_coupon button {
	background: var(--ls-fg) !important;
	color: var(--ls-bg) !important;
	border: 1px solid var(--ls-fg) !important;
	border-radius: 0 !important;
	font-family: var(--ls-font) !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* ---- Place order: green background, dark-green hover. ---- */
.woocommerce-checkout #place_order,
.woocommerce-checkout #payment #place_order {
	background: #1a7f37 !important;
	background-color: #1a7f37 !important;
	background-image: none !important;
	border: 1px solid #1a7f37 !important;
	color: #ffffff !important;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #payment #place_order:hover {
	background: #0f5c27 !important;
	background-color: #0f5c27 !important;
	border-color: #0f5c27 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

/* ---- Wider content on checkout so the columns aren't boxed into the narrow
   1170px theme width. ---- */
.woocommerce-checkout .col-full {
	max-width: 1500px !important;
}

/* ---- Two columns → 50/50, top-aligned, with a slim gutter. The theme put a
   ~69px margin-right on the left column; with two 49% columns that pushed the
   total past 100% so the right column (which also had clear:right) dropped to
   the BOTTOM. Drop the margin (the right float supplies the 2% gutter) and the
   clear so #order_review sits beside #customer_details at the top. ---- */
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout .col2-set {
	width: 49% !important;
	margin-right: 0 !important;
}
.woocommerce-checkout form.checkout #order_review {
	width: 49% !important;
	clear: none !important;
}

/* Keep the review table inside its column: smaller thumbnail + tighter padding
   so all five columns (incl. the grand-total) fit without overflow. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-thumbnail {
	width: 60px !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-thumbnail img {
	width: 52px !important;
	height: 52px !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	padding: 10px 8px !important;
	word-break: break-word;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot.ls-cart-foot td.ls-cart-foot__total {
	white-space: nowrap;
}

/* ---- Address autocomplete dropdown: it was being clipped by the section
   accordion's overflow:hidden and hidden behind the ORDER NOTES section below.
   Let it escape the accordion and layer above the following sections. ---- */
.woocommerce-checkout .ls-accordion--checkout-shipping,
.woocommerce-checkout .ls-accordion--checkout-billing {
	overflow: visible !important;
	position: relative;
	z-index: 30;
}
.woocommerce-checkout .ls-accordion--checkout-shipping .ls-accordion__body,
.woocommerce-checkout .ls-accordion--checkout-billing .ls-accordion__body,
.woocommerce-checkout .shipping_address,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .ls-address-row,
.woocommerce-checkout .ics-aac-wrapper {
	overflow: visible !important;
}
.ics-aac-dropdown {
	z-index: 9999 !important;
}

/* ============================================================
   Order received / Thank-you page — brutalist redesign.

   Layout order in `woocommerce/order/order-details.php`:
     1. Existing "Thank you" header + order-meta box (unchanged)
     2. Customer details: billing + shipping as 50/50 outlined cards
     3. Order details table with 4 columns (Product / Qty / Unit / Total)
     4. Action row: prominent "Download Invoice" + secondary actions
   ============================================================ */

/* Customer details — two outlined cards, side-by-side, same width. */
.ls-customer-details {
	margin: 24px 0;
}
.ls-customer-details__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.ls-customer-details__col {
	border: 1px solid var(--ls-fg);
	background: var(--ls-bg);
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ls-customer-details__title {
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ls-fg);
	background: var(--ls-fg);
	color: var(--ls-bg);
	font-family: var(--ls-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.ls-customer-details__same {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	opacity: 0.7;
}
.ls-customer-details__address {
	flex: 1 1 auto;
	margin: 0;
	padding: 16px;
	font-family: var(--ls-font);
	font-size: 13px;
	line-height: 1.55;
	font-style: normal;
	color: var(--ls-fg);
	white-space: pre-line;     /* preserves WC's <br>-separated address lines */
}
.ls-customer-details__address--empty {
	color: var(--ls-muted);
	font-style: italic;
}
.ls-customer-details__row {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ls-faint);
	font-size: 12px;
}
.ls-customer-details__row--email { word-break: break-all; }

@media (max-width: 768px) {
	.ls-customer-details__grid { grid-template-columns: 1fr; }
}

/* Order details title — same brutalist heading treatment as the customer
   cards' title bars for visual cohesion. */
.ls-order-details {
	margin: 32px 0 0;
}
.ls-order-details__title {
	margin: 0 0 12px;
	font-family: var(--ls-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Order items table — 4 columns. Column widths give the product name the
   bulk of the space and the three numeric columns equal narrow widths so
   numbers align right and read as a stack. */
.ls-order-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ls-fg);
	font-family: var(--ls-font);
	font-size: 13px;
	/* `fixed` makes the column widths in <thead> binding — `auto` would let
	   the Product cell content (long sneaker names) hog space and starve
	   the numeric columns, which is what made the Shipping totals row wrap
	   at the 25% width hint. */
	table-layout: fixed;
}
.ls-order-table thead {
	background: var(--ls-fg);
	color: var(--ls-bg);
}
.ls-order-table__th {
	padding: 12px 16px;
	border-right: 1px solid var(--ls-bg);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	text-align: left;
}
.ls-order-table__th:last-child { border-right: 0; }
/* With table-layout:fixed these widths are binding for ALL rows. Product
   gets the remaining 53%, the rest split among the numeric columns. */
.ls-order-table__th.product-name { width: 53%; }
.ls-order-table__th--qty   { text-align: right; width: 9%;  white-space: nowrap; }
.ls-order-table__th--unit  { text-align: right; width: 13%; white-space: nowrap; }
.ls-order-table__th--total { text-align: right; width: 25%; white-space: nowrap; }

/* Product cells: long sneaker names can wrap naturally inside their column.
   The numeric cells already use white-space:nowrap so they stay one-line. */
.ls-order-table__cell--name { word-wrap: break-word; overflow-wrap: anywhere; }

/* Body rows — 1px divider top + right between cells, matching the brutalist
   table-grid look used elsewhere in the theme (FAQ, accordion). */
.ls-order-table__row { border-top: 1px solid var(--ls-faint); }
.ls-order-table tbody tr:first-child { border-top: 0; }
.ls-order-table__cell {
	padding: 12px 16px;
	border-right: 1px solid var(--ls-faint);
	color: var(--ls-fg);
	vertical-align: top;
}
.ls-order-table__cell:last-child { border-right: 0; }
.ls-order-table__cell--qty,
.ls-order-table__cell--unit,
.ls-order-table__cell--total { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Allow the totals row's value cell to be wider when the value text is long
   (e.g. "Free shipping, ChitChats Shipping"). The label still right-aligns
   under the Total Price column. */
.ls-order-table__totals-value { white-space: normal; }

/* Hide the legacy "× N" suffix WC appends to product names in line items —
   we now have a dedicated Quantity column so the inline marker is noise. */
.ls-order-table__cell--name .product-quantity { display: none; }

/* Totals rows (Subtotal / Discount / Shipping / etc.) live in <tfoot>. The
   label cell spans the first three columns so the right column lines up
   with the Total Price column above. */
.ls-order-table__totals-row { border-top: 1px solid var(--ls-fg); }
.ls-order-table__totals-row + .ls-order-table__totals-row { border-top: 1px solid var(--ls-faint); }
.ls-order-table__totals-label {
	padding: 10px 16px;
	text-align: right;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ls-muted);
}
.ls-order-table__totals-value {
	padding: 10px 16px;
	text-align: right;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ls-fg);
}
.ls-order-table__totals-row--order_total .ls-order-table__totals-label,
.ls-order-table__totals-row--order_total .ls-order-table__totals-value {
	font-size: 14px;
	color: var(--ls-fg);
}

/* Action row — Download Invoice is the dominant CTA, secondary actions
   (Order again / etc.) are minimal underlined links sitting next to it. */
.ls-order-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid var(--ls-fg);
	border-top: 0;
}
.ls-order-actions__primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--ls-fg);
	color: var(--ls-bg);
	border: 1px solid var(--ls-fg);
	font-family: var(--ls-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ls-order-actions__primary:hover {
	background: var(--ls-bg);
	color: var(--ls-fg);
	text-decoration: none;
}
.ls-order-actions__primary svg {
	display: block;
	flex: 0 0 auto;
}
.ls-order-actions__secondary {
	font-family: var(--ls-font);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ls-fg);
	text-decoration: underline;
}
.ls-order-actions__secondary:hover { color: var(--ls-muted); }