/* ==========================================================================
   KHOR ONE — WooCommerce brand styling
   Shop · Product · Cart · Checkout · Account
   Loads after main.css; reuses its tokens (--navy, --gold, etc.).
   Brand rules: product cards white-on-cream, gold eyebrow, navy title,
   antique-gold price (gold fails AA on light), 2px button radius, no pills.
   ========================================================================== */

.woocommerce, .woocommerce-page {
	--wc-line: var(--line);
	--wc-price: var(--gold-dark);
}

/* Shop / archive layout ---------------------------------------------------- */
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header { text-align: center; }

.woocommerce .woocommerce-products-header__title,
.woocommerce-page .page-title {
	font-family: var(--serif);
	font-weight: 300;
	color: var(--navy);
	font-size: clamp(30px, 4.4vw, 50px);
	letter-spacing: -0.015em;
	margin: 0 0 0.4em;
}
.woocommerce .term-description,
.woocommerce-products-header .woocommerce-breadcrumb { color: var(--muted); }

.woocommerce .woocommerce-result-count {
	font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
	color: var(--muted);
}
.woocommerce .woocommerce-ordering select {
	font-family: var(--sans); font-size: 13px; color: var(--navy);
	border: 1px solid var(--line); border-radius: 2px; padding: 10px 14px; background: var(--white);
}

/* Breadcrumb --------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--muted); margin-bottom: clamp(20px, 3vw, 36px);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--gold-dark); text-decoration: none; }

/* Product grid ------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 40px);
	margin: 0; padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: var(--white);
	padding: clamp(16px, 1.6vw, 24px);
	text-align: left;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(26, 38, 56, 0.35);
}
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1; object-fit: cover; width: 100%;
	margin: 0 0 clamp(14px, 1.4vw, 20px); border-radius: 2px; background: var(--cream);
}
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--serif); font-weight: 400; color: var(--navy);
	font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; padding: 0; margin: 0 0 6px;
}
.woocommerce ul.products li.product .price {
	font-family: var(--sans); font-weight: 500; color: var(--gold-dark);
	font-size: 16px; letter-spacing: 0.01em; margin: 0 0 14px;
}
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 300; opacity: .7; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* --------------------------------------------------------------------------
   Product Collection BLOCK shop (.wc-block-product-template). The classic-loop
   rules above target `.woocommerce-loop-product__title` / `.price`, which the
   block markup does NOT use — so the block shop fell back to unbranded defaults
   (gold 14px title, charcoal price, grey 9999px pill button). Pull it onto the
   brand: serif navy title, gold price, square navy button.
   -------------------------------------------------------------------------- */
.wc-block-product-template li.product .wp-block-post-title,
.wc-block-product-template li.product .wp-block-post-title a {
	font-family: var(--serif) !important; color: var(--navy) !important; font-weight: 400 !important;
	font-size: clamp(19px, 1.6vw, 22px) !important; line-height: 1.25; text-decoration: none;
}
.wc-block-product-template li.product .wp-block-post-title a:hover { color: var(--gold-dark) !important; }
.wc-block-product-template li.product .wc-block-components-product-price,
.wc-block-product-template li.product .wp-block-woocommerce-product-price {
	color: var(--gold-dark) !important; font-family: var(--sans); font-weight: 500; font-size: 16px !important;
}
.wc-block-product-template li.product .wp-block-button__link {
	background: var(--navy) !important; color: var(--cream) !important; border: 0 !important;
	border-radius: 2px !important; font-family: var(--sans); font-weight: 500; font-size: 12px;
	letter-spacing: 0.16em; text-transform: uppercase; padding: 13px 22px !important; min-height: 46px;
}
.wc-block-product-template li.product .wp-block-button__link:hover {
	background: var(--gold) !important; color: var(--navy) !important;
}

/* --------------------------------------------------------------------------
   Block Cart + Checkout (wc-block-checkout / wc-block-cart). Headings already
   inherit navy from theme.json; the primary action buttons default to a grey
   #32373C — pull them onto the brand (navy fill, gold hover, square). Links gold.
   -------------------------------------------------------------------------- */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background-color: var(--navy) !important;
	color: var(--cream) !important;
	border: 0 !important;
	border-radius: 2px !important;
	font-family: var(--sans);
	font-weight: 500;
	letter-spacing: 0.06em;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background-color: var(--gold) !important;
	color: var(--navy) !important;
}
.wc-block-checkout a:not(.wc-block-components-button),
.wc-block-cart a:not(.wc-block-components-button) { color: var(--gold-dark); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--navy); }

/* Cart line-item remove control — the icon-only trash button was small, low
   contrast and easy to miss; a shopper had to hunt the row for it. Same
   destructive red the classic table's a.remove already uses, for consistency. */
.wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	border: 1px solid var(--line) !important;
	color: var(--navy) !important;
	transition: background .2s, border-color .2s, color .2s;
}
.wc-block-cart-item__remove-link svg { width: 18px !important; height: 18px !important; }
.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus {
	background: #8B1E1E !important;
	border-color: #8B1E1E !important;
	color: var(--white) !important;
}

/* Star ratings ------------------------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--gold); }
.woocommerce .star-rating { color: var(--gold); font-size: 13px; margin: 0 0 10px; }

/* On-sale badge ------------------------------------------------------------ */
.woocommerce span.onsale {
	background: var(--navy); color: var(--gold);
	font-family: var(--sans); font-weight: 500; font-size: 10px;
	letter-spacing: 0.18em; text-transform: uppercase;
	min-height: 0; min-width: 0; line-height: 1; padding: 8px 12px;
	border-radius: 2px; top: 12px; right: 12px; left: auto; margin: 0;
}

/* ==========================================================================
   Buttons — unify every WooCommerce button to the brand primary (gold/navy)
   ========================================================================== */
.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,
.woocommerce #respond input#submit.alt,
.woocommerce .woocommerce-message a.button {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.18em;
	text-transform: uppercase; line-height: 1;
	background: var(--gold); color: var(--navy);
	border: 1px solid var(--gold); border-radius: 2px;
	padding: 14px 26px; min-height: 48px; cursor: pointer;
	transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .3s;
}
/* Shimmer sweep — only on real elements; <input> cannot render generated content. */
.woocommerce a.button::after,
.woocommerce button.button::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: translateX(-130%); transition: transform .6s ease;
}
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after { transform: translateX(130%); }
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--gold-hover); border-color: var(--gold-hover); color: var(--navy);
	transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(226, 161, 90, 0.55);
}
/* Secondary / outline variant (e.g. "View basket", added state) */
.woocommerce a.added_to_cart,
.woocommerce .button.wc-backward {
	background: transparent; color: var(--gold-dark); border: 1px solid var(--line);
}
.woocommerce a.added_to_cart:hover,
.woocommerce .button.wc-backward:hover {
	background: var(--navy); color: var(--cream); border-color: var(--navy);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled { opacity: 0.5; cursor: default; }

/* ==========================================================================
   Single product
   ========================================================================== */
/*
 * The two-column product layout belongs to the CLASSIC template, where
 * div.product holds the gallery and the summary side by side. On this block
 * theme div.product wraps <main> instead — one child, not two — so the grid
 * gave main a 773px column and left a 428px column standing empty: the gallery
 * squeezed left, the price and provenance crushed into a 237px strip, and half
 * the screen blank. Caught on 2026-08-19. The rule now applies only where the
 * classic gallery really is a direct child.
 */
.woocommerce div.product:has(> .woocommerce-product-gallery) { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: 2px; background: var(--cream); }
.woocommerce div.product .khorone-gallery-video { position: relative; }
.woocommerce div.product .khorone-gallery-video video { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--navy); }
.woocommerce div.product .khorone-gallery-video__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 108px; height: 68px; border-radius: 50%; cursor: pointer;
	background: var(--gold); color: var(--white);
	border: 3px solid var(--cream);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 12px 34px -6px rgba(20, 29, 44, 0.75), 0 0 0 6px rgba(226, 161, 90, 0.28);
	transition: background .2s, transform .2s ease, box-shadow .2s;
}
.woocommerce div.product .khorone-gallery-video__play svg { margin-left: 3px; }
.woocommerce div.product .khorone-gallery-video__play:hover {
	background: var(--gold-hover); transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 14px 38px -6px rgba(20, 29, 44, 0.8), 0 0 0 8px rgba(226, 161, 90, 0.34);
}
.woocommerce div.product .khorone-gallery-video.is-playing .khorone-gallery-video__play { display: none; }
.woocommerce div.product .khorone-gallery-video video::-webkit-media-controls-start-playback-button { display: none; }
.woocommerce div.product .summary,
.woocommerce div.product .entry-summary { width: 100% !important; float: none; margin: 0; }

.woocommerce div.product .product_title {
	font-family: var(--serif); font-weight: 300; color: var(--navy);
	font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 12px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--sans); font-weight: 500; color: var(--gold-dark);
	font-size: clamp(20px, 2vw, 26px); margin: 0 0 20px;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: rgba(0,0,0,.8); max-width: 60ch; }
.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0 0 1em; }

/* Quantity + add-to-cart row */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 24px 0 8px; }
.woocommerce .quantity .qty {
	font-family: var(--sans); color: var(--navy); text-align: center;
	width: 84px; height: 48px; border: 1px solid var(--line); border-radius: 2px; background: var(--white);
}
.woocommerce div.product form.cart .button { flex: 0 1 auto; }
.woocommerce div.product .single_add_to_cart_button { padding-inline: 34px; }

/* Meta (SKU, categories) */
.woocommerce div.product .product_meta {
	font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--muted);
	border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px;
}
.woocommerce div.product .product_meta a { color: var(--gold-dark); text-decoration: none; }

/* Tabs */
.woocommerce div.product:has(> .woocommerce-product-gallery) .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(32px, 4vw, 56px); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 28px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--muted); padding: 14px 0; display: inline-block;
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--navy); border-bottom-color: var(--gold); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--serif); font-weight: 400; color: var(--navy); }

/* Related / up-sells */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-family: var(--serif); font-weight: 300; color: var(--navy);
	font-size: clamp(24px, 3vw, 36px); text-align: center; margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.woocommerce .related.products,
.woocommerce .upsells.products { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 72px); }

@media (max-width: 860px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Notices (message / info / error)
   ========================================================================== */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	font-family: var(--sans); font-size: 14px; color: var(--navy);
	background: var(--white); border-top: 3px solid var(--gold);
	border-radius: 2px; padding: 16px 20px; box-shadow: 0 12px 30px -22px rgba(26,38,56,.4);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--gold-dark); }
.woocommerce .woocommerce-error { border-top-color: #8B1E1E; list-style: none; }
.woocommerce .woocommerce-error::before { color: #8B1E1E; }

/* ==========================================================================
   Cart
   ========================================================================== */
.woocommerce table.shop_table {
	border: 1px solid var(--line); border-radius: 2px; border-collapse: collapse; background: var(--white);
}
.woocommerce table.shop_table th {
	font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--line); color: var(--navy); }
.woocommerce a.remove {
	color: var(--navy) !important; border: 1px solid var(--line); border-radius: 50%;
	line-height: 1.6; font-weight: 400;
}
.woocommerce a.remove:hover { background: #8B1E1E !important; color: var(--white) !important; border-color: #8B1E1E; }
.woocommerce .cart_totals h2 { font-family: var(--serif); font-weight: 300; color: var(--navy); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { width: 100%; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; }
.woocommerce .coupon .input-text {
	border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; font-family: var(--sans);
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--serif); font-weight: 300; color: var(--navy);
	font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 18px;
}
.woocommerce form .form-row label,
.woocommerce-checkout label {
	font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-selection,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea {
	font-family: var(--sans); font-size: 15px; color: var(--navy);
	border: 1px solid var(--line); border-radius: 2px; padding: 13px 14px; background: var(--white);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226,161,90,.18);
}
.woocommerce-checkout #payment,
.woocommerce .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background: var(--white); border: 1px solid var(--line); border-radius: 2px;
}
.woocommerce-checkout #payment { border-top: 3px solid var(--gold); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment div.payment_box { background: var(--cream); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--cream); }
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order { width: 100%; margin-top: 8px; }

/* Required-field asterisk in brand gold */
.woocommerce form .form-row .required,
.woocommerce form .form-row .optional { color: var(--gold-dark); border: 0; }

/* ==========================================================================
   My account
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--line); border-radius: 2px; list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 14px 18px; font-family: var(--sans); font-size: 13px;
	letter-spacing: 0.04em; color: var(--navy); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--gold-dark); font-weight: 500; }

/* ==========================================================================
   Block cart & checkout: the container WooCommerce does not give them

   The Cart and Checkout blocks render edge to edge — the theme's .entry-content
   caps the width at 1440px but adds no side padding, so on any screen narrower
   than that the form sits flat against the window edge, and on a phone the text
   touches the glass. These rules give them the same measure and breathing room
   as the rest of the house.
   ========================================================================== */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-order-received .woocommerce-order,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	box-sizing: border-box;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 48px);
}

/* The order-received and account pages sit inside the same measure. */
.woocommerce-order-received .woocommerce-order,
.woocommerce-account .woocommerce-MyAccount-content {
	padding-block: 8px;
}

/* Give the two checkout columns air between them instead of a hard seam. */
.wc-block-checkout__main {
	padding-right: clamp(0px, 3vw, 40px);
}

@media (max-width: 900px) {
	.wc-block-checkout__main {
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   Breathing room on the block templates
   --------------------------------------------------------------------------
   The WooCommerce block templates (shop, single product, taxonomy) render
   <main class="has-global-padding"> — but the class resolves to 0 here, so the
   product grid and the gallery started at x=0 and ran to the browser edge on
   every screen. Found on 2026-08-19 alongside the product-grid bug: the same
   omission the block cart and checkout had in 0.7.2, on the templates that were
   not checked then.

   Scoped to WooCommerce pages so ordinary pages, which already sit inside their
   own constrained group, are not padded twice.
   ------------------------------------------------------------------------ */
.woocommerce main.wp-block-group,
.woocommerce-page main.wp-block-group {
	padding-inline: clamp(20px, 5vw, 48px);
}

/* The wide product columns should still stop short of the very edge on a large
   screen: 1440 is the theme's wideSize, and the padding above keeps it honest. */
.woocommerce div.product > main > .wp-block-columns {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Classic loop cards (the [products] shortcode)
   --------------------------------------------------------------------------
   The Lithuanian shop page is a plain page carrying a [products] shortcode, so
   it renders the CLASSIC loop while every other listing renders the block one.
   Left alone, the two looked like different shops: gold buttons with pale text
   here, navy buttons there, and cards of unequal height because the button
   wrapped onto two lines. Found on 2026-08-19.
   ------------------------------------------------------------------------ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   Distraction-free checkout header (logo + cart icon only)
   --------------------------------------------------------------------------
   WooCommerce Blocks renders its own minimal header template on the checkout
   page — a separate template from the site's regular header.html — and it
   carries the same inert "has-global-padding" class as the main.wp-block-group
   bug above: theme.json never defines a root padding value, so the logo and
   cart icon sat flush against the viewport edge on narrow screens. Scoped to
   .woocommerce-checkout only; the Cart page keeps the regular site header.
   Found 2026-10-01, phone screenshot from the founder.
   ------------------------------------------------------------------------ */
.woocommerce-checkout header.wp-block-template-part .has-global-padding {
	padding-inline: clamp(20px, 5vw, 48px);
}

.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.add_to_cart_button,
.woocommerce-page ul.products li.product a.button {
	margin-top: auto;
	background: var(--navy);
	color: var(--cream);
	border: 0;
	border-radius: 2px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	font-family: 'Jost', system-ui, sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.add_to_cart_button:hover,
.woocommerce-page ul.products li.product a.button:hover {
	background: var(--gold);
	color: var(--navy);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(226, 161, 90, 0.55);
}

/* One square image per card, so a tall photo and a wide one do not shift the
   titles onto different lines. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   The empty first cell
   --------------------------------------------------------------------------
   WooCommerce's classic stylesheet clears floats with ul.products::before and
   ::after. Once ul.products became a grid, those two pseudo-elements turned
   into grid ITEMS: the first product was pushed into column two, the third
   wrapped to a row of its own, and the Lithuanian shop looked broken while the
   English one (block-rendered, no clearfix) looked fine. Found 2026-08-19.

   The listing is also given the shop's width: it sits inside a normal page on
   /lt/parduotuve/, whose content column is 680px, so three products were being
   squeezed into 201px each.
   ------------------------------------------------------------------------ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

.page ul.products {
	width: min(1240px, calc(100vw - 2 * clamp(20px, 5vw, 48px)));
	margin-inline: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   The block product grid on a phone
   --------------------------------------------------------------------------
   The classic loop has had responsive columns since 0.4; the BLOCK grid never
   did, so at 390px the shop still rendered three columns squeezed into two
   visible ones — 158px cards with "ADD TO BASKET" broken across two lines and
   thumbnail-sized photography. Checked in a 390px frame on 2026-08-19.
   ------------------------------------------------------------------------ */
@media (max-width: 600px) {
	.wc-block-product-template {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.wc-block-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* A button label should never wrap: the words are short, the box can breathe. */
.wc-block-product-template .wp-block-button__link,
.woocommerce ul.products li.product a.button {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The logo, on the pages that matter most
   --------------------------------------------------------------------------
   On /shop/ and /cart/ — the block templates — the header logo measured 0 × 0.
   The mark simply was not there, while the same header on /about/ rendered it
   at 58 × 42. WooCommerce's block stylesheet loads on those templates and its
   image rules beat the theme's `height: 54px` on an SVG that carries no
   intrinsic size, so the flex row collapsed it to nothing. Found in a 390px
   frame on 2026-08-19; it was missing on desktop too, unnoticed because the
   header sits above the fold in screenshots.
   ------------------------------------------------------------------------ */
.woocommerce .brand__logo,
.woocommerce-page .brand__logo,
body.woocommerce img.brand__logo,
body.woocommerce-page img.brand__logo {
	height: 54px !important;
	width: auto !important;
	min-width: 74px;
	max-width: none;
	flex: 0 0 auto;
}

@media (max-width: 820px) {
	.woocommerce .brand__logo,
	.woocommerce-page .brand__logo,
	body.woocommerce img.brand__logo,
	body.woocommerce-page img.brand__logo {
		height: 42px !important;
		min-width: 58px;
	}
}

/* ==========================================================================
   Cart CLS fix — see khorone_cart_empty_body_class() in inc/woocommerce.php.
   WooCommerce Blocks' own cart.css defaults the pre-hydration ".is-loading"
   skeleton to the FILLED-cart shape (a shimmer cart-items table) even when the
   cart is actually empty, then swaps the whole block to the empty-cart shape
   (heading + icon + a "Latest products" grid) once client JS confirms it —
   measured 2026-09-30: mobile CLS 0.402 (PSI ×3), ~76% of it this one swap.
   We already know server-side whether the cart is empty on every request
   (this page is never full-page-cached), so when it is, show the correct
   branch from the first paint instead of the wrong one — no WooCommerce file
   touched, no min-height guess, inert on every other page/state. */
body.khorone-cart-empty .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-filled-cart-block {
	display: none;
}
body.khorone-cart-empty .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-empty-cart-block {
	display: block;
}

.woocommerce .brand,
.woocommerce-page .brand {
	flex: 0 0 auto;
}