/* ==========================================================================
   NOCTURA — WooCommerce styles (dark theme)
   ========================================================================== */

/* Layout ------------------------------------------------------------------
   The filter column is closed by default and slides open from the Filters
   toolbar button: an inline animated column on desktop, an off-canvas
   drawer on mobile/tablet (see media query near the end of this file). */
.nc-shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.nc-shop-layout--full,
.nc-shop-no-sidebar .nc-shop-layout { grid-template-columns: minmax(0, 1fr); }
.nc-shop-sidebar { min-width: 0; }
.woocommerce .nc-shop-layout > .nc-primary,
.woocommerce-page .nc-shop-layout { min-width: 0; }

@media (min-width: 992px) {
	/* Filters are shown BY DEFAULT — the column collapses only when the user
	   closes it (body.nc-filters-closed). */
	.nc-shop-layout {
		grid-template-columns: 248px minmax(0, 1fr);
		gap: clamp(20px, 2.6vw, 38px);
		transition: grid-template-columns 0.32s cubic-bezier(0.4, 0, 0.2, 1), gap 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.nc-shop-layout--full { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
	.nc-shop-sidebar {
		overflow: hidden;
		transition: opacity 0.28s ease, visibility 0.28s ease;
		position: sticky; top: calc(var(--nc-header-h) + 20px);
		max-height: calc(100vh - var(--nc-header-h) - 40px);
		overflow-y: auto; overscroll-behavior: contain;
		scrollbar-width: none;
	}
	.nc-shop-sidebar::-webkit-scrollbar { display: none; width: 0; }
	/* Fixed inner width prevents text reflow while the column animates. */
	.nc-shop-sidebar__body { width: 248px; }
	body.nc-filters-closed .nc-shop-layout { grid-template-columns: 0px minmax(0, 1fr); gap: 0; }
	body.nc-filters-closed .nc-shop-sidebar { opacity: 0; visibility: hidden; }
}

/* When Woo prints content directly (no explicit sidebar wrapper), keep it fluid */
.woocommerce-products-header { grid-column: 1 / -1; }

/* Shop notices ------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	background: var(--nc-surface) !important;
	border: 1px solid var(--nc-border);
	border-left: 3px solid var(--nc-accent);
	border-radius: var(--nc-radius-sm);
	color: var(--nc-text) !important;
	padding: 1rem 1.2rem !important;
	margin: 0 0 1.4rem !important;
	list-style: none;
	display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.woocommerce-error { border-left-color: var(--nc-danger); }
.woocommerce-message { border-left-color: var(--nc-success); }
.woocommerce-message a.button,
.woocommerce-info a.button { margin-left: auto; }
/* WooCommerce core absolutely-positions an icon-font glyph inside notices and
   expects its own padding — with our layout it overlaps the text. Remove it;
   the colored left border carries the meaning. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.woocommerce-error li::before,
.wc-block-components-notice-banner::before {
	display: none !important;
	content: none !important;
}
.woocommerce-error li { margin: 0; list-style: none; }
ul.woocommerce-error { padding-left: 1.2rem !important; }

/* Result count + ordering -------------------------------------------------- */
.woocommerce-result-count { color: var(--nc-text-muted); font-size: 0.9rem; margin: 0; }
.woocommerce-ordering select { width: auto; min-width: 200px; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: inline-block; }
.woocommerce-notices-wrapper:empty { display: none; }

.nc-shop-toolbar,
.woocommerce-products-header + .woocommerce-notices-wrapper + form,
.woocommerce > .woocommerce-result-count { }

.woocommerce .products-header-row,
.woocommerce-page .nc-shop-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}

/* Product grid ------------------------------------------------------------ */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--nc-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
/* WooCommerce core adds clearfix pseudo-elements (content:" "; display:table)
   to ul.products — inside a grid they become empty grid ITEMS and eat the
   first cell, so the first product appears missing. Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--nc-surface);
	border: 0;
	border-radius: var(--nc-radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	position: relative;
}

/* Product media */
.nc-product__media,
.woocommerce ul.products li.product a img,
ul.products li.product .woocommerce-loop-product__link {
	display: block;
}
/* Product image sits on a white stage and is CONTAINED — the whole product is
   always visible, never zoomed or cropped. (Thumbnails are also generated
   uncropped — see noctura_uncropped_thumbnail() in inc/woocommerce.php.) */
.nc-product__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #fff; }
.woocommerce ul.products li.product .nc-product__media img,
.woocommerce ul.products li.product img {
	width: 100%; height: 100%;
	object-fit: contain; object-position: center;
	padding: 10px;
	margin: 0 !important; border: 0 !important; border-radius: 0;
	background: #fff;
	transition: transform 0.5s ease;
}
.woocommerce ul.products li.product:hover .nc-product__media img { transform: scale(1.04); }

/* ===== LIGHT STOREFRONT (body.nc-light) ==================================
   Clean white cards — no border, no shadow, no outline. */
body.nc-light .woocommerce ul.products li.product,
body.nc-light ul.products li.product {
	background: #fff;
	border: 0;
	box-shadow: none;
}
body.nc-light .woocommerce ul.products li.product:hover {
	border: 0;
	box-shadow: none;
}
/* Category tiles: keep them filled (cover) — they're lifestyle images */
body.nc-light .woocommerce ul.products li.product.product-category .nc-product__media img,
body.nc-light .woocommerce ul.products li.product.product-category img { object-fit: cover !important; padding: 0; }
/* Single product: image contained on a clean white stage */
body.nc-light .woocommerce div.product .woocommerce-product-gallery,
body.nc-light .woocommerce div.product .woocommerce-product-gallery .flex-viewport,
body.nc-light .woocommerce div.product .woocommerce-product-gallery__image { background: #fff; }
body.nc-light .woocommerce div.product .woocommerce-product-gallery__image img { background: #fff; }
body.nc-light .woocommerce div.product .flex-control-thumbs img { background: #fff; }
body.nc-light .woocommerce-product-gallery .flex-direction-nav a { background: #fff; border: 1px solid var(--nc-border); }
body.nc-light .woocommerce-product-gallery .flex-direction-nav a::before { color: var(--nc-heading); }

/* Category tiles inside the products grid (Shop display: categories) */
.woocommerce ul.products li.product.product-category a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.woocommerce ul.products li.product.product-category img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }
.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title {
	padding: 1rem 1.15rem !important; margin: 0 !important;
	display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
}
.woocommerce ul.products li.product.product-category mark { background: transparent; color: var(--nc-text-faint); font-size: 0.85rem; }

/* Card image slider — extra gallery images overlay the base thumbnail */
.nc-product__media img.nc-product__media-extra {
	position: absolute !important; inset: 0; z-index: 1;
	width: 100% !important; height: 100% !important;
	object-fit: contain !important;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	margin: 0 !important;
}
.nc-product__media img.nc-product__media-extra.is-show { opacity: 1; }
/* Dark translucent arrows — stay visible on white product photos.
   Centered with margin (NOT transform: translateY) so nothing shifts them. */
.nc-card-nav {
	position: absolute; top: 50%; margin-top: -16px; z-index: 4;
	width: 32px; height: 32px; padding: 0;
	display: grid; place-items: center;
	background: rgba(14, 8, 20, 0.72); color: #fff;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; cursor: pointer;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity var(--nc-transition), background var(--nc-transition), color var(--nc-transition), border-color var(--nc-transition);
}
.nc-card-nav::before { display: none; }
.nc-card-nav--prev { left: 10px; }
.nc-card-nav--next { right: 10px; }
.nc-card-nav--prev svg { transform: rotate(90deg); }
.nc-card-nav--next svg { transform: rotate(-90deg); }
li.product:hover .nc-card-nav,
.nc-product__media-wrap:hover .nc-card-nav { opacity: 1; }
.nc-card-nav:hover { background: var(--nc-accent); border-color: var(--nc-accent); color: #fff; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5); filter: none; }
@media (hover: none) {
	.nc-card-nav { opacity: 0.9; width: 30px; height: 30px; margin-top: -15px; }
}

/* Media wrap + hover tools (wishlist / compare / quick-view) */
.nc-product__media-wrap { position: relative; overflow: hidden; }
.nc-product__tools {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	display: flex; flex-direction: column; gap: 8px;
	opacity: 0; transform: translateX(12px);
	transition: opacity var(--nc-transition), transform var(--nc-transition);
}
.woocommerce ul.products li.product:hover .nc-product__tools,
.nc-product:hover .nc-product__tools { opacity: 1; transform: none; }
.nc-tool {
	width: 40px; height: 40px; border-radius: 50%; padding: 0;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, 0.96); color: #2a2233;
	border: 0; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.55);
	transition: background var(--nc-transition), color var(--nc-transition), transform var(--nc-transition);
}
.nc-tool::before { display: none; }
.nc-tool:hover { background: var(--nc-accent); color: #fff; transform: scale(1.08); box-shadow: none; filter: none; }
.nc-tool.is-active { background: var(--nc-accent); color: #fff; }
.nc-tool--wishlist.is-active svg { fill: currentColor; }
/* Product body — category, title, price, then Add to cart pinned to the base */
.nc-product__body { padding: 0.75rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.nc-product__cat { font-family: var(--nc-font-head); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nc-text-faint); line-height: 1.3; }
.nc-product__title-link { color: inherit; display: block; }
.nc-product__title-link:hover .woocommerce-loop-product__title { color: var(--nc-accent-2); }
/* margin-top:auto keeps the price+button block aligned across a row */
.nc-product__foot { margin-top: auto; padding-top: 0.3rem; display: block; }

/* No Add to cart on the card — the wrapper only exists for plugin hooks */
.nc-product__actions { margin-top: 0.6rem; display: block; }
.nc-product__actions:empty { display: none; margin: 0; }
.nc-product__actions .added_to_cart { display: none !important; }
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: var(--nc-font-head);
	font-size: 0.98rem !important;
	font-weight: 600;
	color: var(--nc-heading);
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.35;
}
/* Clamp long titles to two lines. No min-height — a one-line title shouldn't
   reserve a blank second line; `margin-top:auto` on the foot keeps prices aligned. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; margin: 0 !important;
}
.woocommerce ul.products li.product a { color: inherit; }
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--nc-accent-2); }

/* Star rating — unicode stars, independent of WooCommerce's "star" webfont
   (plugins/optimizers often strip that font, making ratings invisible). */
.woocommerce .star-rating,
.star-rating {
	font-size: 0.85rem;
	margin: 0;
	position: relative;
	display: inline-block;
	/* Crop to the star glyph's visible height (~0.8em) so the character's
	   built-in top/bottom padding doesn't inflate the row. */
	width: auto !important; height: 0.8em !important;
	line-height: 0.8 !important;
	overflow: hidden !important;
	font-family: inherit !important;
	letter-spacing: 2px;
	white-space: nowrap;
}
.woocommerce .star-rating::before,
.star-rating::before {
	content: "★★★★★" !important;
	color: var(--nc-elevated);
	float: none;
	position: static;
	opacity: 1;
}
.woocommerce .star-rating span,
.star-rating span {
	position: absolute; top: 0; left: 0;
	overflow: hidden; white-space: nowrap;
	color: var(--nc-warning);
	float: none;
	height: 0.8em; line-height: 0.8 !important;
	padding-top: 0 !important;
}
.woocommerce .star-rating span::before,
.star-rating span::before {
	content: "★★★★★" !important;
	color: var(--nc-warning);
	position: static;
}
/* (Card star ratings removed — stars remain on the single product & reviews.) */

/* Price — amethyst brand accent, so it reads as the key figure */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--nc-accent-2) !important;
	font-family: var(--nc-font-head);
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0;
}
.woocommerce ul.products li.product .price { font-size: 1.05rem; margin-top: 0.1rem; }
/* Old price: quiet, struck through ONCE. The strike lives on <del> only —
   putting it on the inner .amount too produced a second (double) line. */
.woocommerce del {
	color: var(--nc-text-faint) !important;
	opacity: 1; font-weight: 500; font-size: 0.85em;
	text-decoration: line-through;
}
.woocommerce del .amount { text-decoration: none !important; color: inherit !important; font-weight: inherit; font-size: 1em; }
/* Sale price: same amethyst, never the default green/pink */
.woocommerce ins,
.woocommerce ins .amount { text-decoration: none; background: transparent; color: var(--nc-accent-2) !important; font-weight: 700; }
.woocommerce .price del + ins { margin-left: 0.45em; }

/* Badges — assertive: WooCommerce core gives .onsale a circular shape pinned
   top-RIGHT with negative margins, and badge plugins sometimes hide it.
   Force our pill style at the top-left of the product image. */
.nc-badge,
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	position: absolute !important;
	top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important;
	z-index: 5;
	padding: 0.4em 0.75em !important;
	margin: 0 !important;
	min-width: 0 !important; min-height: 0 !important;
	width: auto !important; height: auto !important;
	background: var(--nc-accent-grad) !important;
	background-color: var(--nc-accent) !important;
	color: #fff !important;
	font-family: var(--nc-font-head);
	font-weight: 700; font-size: 0.72rem !important;
	letter-spacing: 0.03em;
	border-radius: 100px !important;
	line-height: 1 !important;
	text-transform: uppercase;
	box-shadow: 0 5px 14px -5px rgba(var(--nc-accent-rgb), 0.7);
	visibility: visible !important;
	opacity: 1 !important;
	border: 0 !important;
}

/* Add to cart button in loop */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: block; width: 100%;
	border-radius: 100px;
	background: var(--nc-surface-2);
	color: var(--nc-text);
	border: 1px solid var(--nc-border);
	font-family: var(--nc-font-head); font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	padding: 0.7em 0.9em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	transition: background var(--nc-transition), border-color var(--nc-transition), color var(--nc-transition);
}
.woocommerce ul.products li.product .button::before { display: none; }
.woocommerce ul.products li.product .button:hover {
	background: var(--nc-accent);
	border-color: var(--nc-accent);
	color: #fff;
	box-shadow: none;
}
.woocommerce ul.products li.product .added_to_cart { background: var(--nc-success); color: #04140d; border-color: transparent; }
.woocommerce a.added_to_cart { text-align: center; }
/* loading spinner tint */
.woocommerce ul.products li.product .button.loading { opacity: 0.75; }

/* Single product ---------------------------------------------------------- */
/* The breadcrumb bar sits directly above, so the content area doesn't need a
   big top pad — this was the unwanted gap at the top of the product page. */
body.single-product .nc-content-area { padding-top: clamp(18px, 2.2vw, 30px); }

/* Two columns, two rows:
 *
 *   ┌──────────────┬──────────────┐
 *   │  gallery     │              │   row 1
 *   ├──────────────┤   summary    │
 *   │  description │              │   row 2
 *   │  + reviews   │              │
 *   └──────────────┴──────────────┘
 *
 * The summary (title → price → variations → cart → meta → assurances) always
 * runs far taller than a square product photo, which left a tall empty band
 * under the media. The tab block now starts directly beneath the gallery and
 * fills it, instead of waiting below both columns.
 */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start; position: relative;
}
/* Gallery = main image on top, horizontal thumbnail strip directly below.
   No border/card — the media sits flush on the page. Assertive sizing:
   WooCommerce core also tags this element `.images` and floats it at 48%,
   so the layout must win. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images.woocommerce-product-gallery {
	grid-column: 1; grid-row: 1;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	display: flex !important; flex-direction: column; align-items: stretch; gap: 12px;
	box-sizing: border-box;
}
/* The summary spans both rows so it is free to be as tall as it needs to be
   while the description sits alongside its lower half. */
.woocommerce div.product .entry-summary,
.woocommerce div.product .summary {
	grid-column: 2; grid-row: 1 / span 2;
	width: auto !important; float: none !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	order: 1 !important;
	flex: 0 0 auto !important; min-width: 0;
	width: 100% !important; max-width: 100% !important; float: none !important;
	border-radius: var(--nc-radius); overflow: hidden; margin: 0 !important;
	position: relative; /* anchors the sale badge that JS moves in here */
	background: #fff;
	border: 1px solid var(--nc-border); /* subtle frame so the white stage reads on a white page */
}
/* Sale badge lives ON the main image (JS relocates it into the viewport) */
.woocommerce div.product .flex-viewport > span.onsale,
.woocommerce div.product .woocommerce-product-gallery__wrapper > span.onsale {
	top: 12px !important; left: 12px !important; z-index: 7;
}
/* Zoom trigger + slider arrows must overlay the MAIN IMAGE, not sit in the
   flex row beside the thumbnails. The gallery is the positioning context and
   --nc-thumb-col reserves the thumbnail column's width. */
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	--nc-thumb-col: 0px; /* thumbs sit below the image, so arrows span its full width */
}
.woocommerce div.product .woocommerce-product-gallery--without-images { --nc-thumb-col: 0px; }
.woocommerce div.product .woocommerce-product-gallery__trigger {
	position: absolute !important;
	top: 12px !important; right: 12px !important; left: auto !important;
	margin: 0 !important; z-index: 8;
}
/* Square overlay matching the main image exactly, so the arrows land on its
   true vertical centre (not the centre of the whole gallery + thumb strip). */
.woocommerce-product-gallery .flex-direction-nav {
	position: absolute;
	top: 0; right: 0; bottom: auto;
	left: var(--nc-thumb-col, 74px);
	aspect-ratio: 1 / 1;
	margin: 0; padding: 0;
	pointer-events: none;
	z-index: 8;
}
.woocommerce-product-gallery .flex-direction-nav a { pointer-events: auto; }
/* Square white stage — the product is centred and never cropped */
.woocommerce div.product .woocommerce-product-gallery__image {
	border-radius: var(--nc-radius); overflow: hidden; border: 0;
	background: #fff;
	aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper img,
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100% !important; height: 100% !important;
	object-fit: contain; object-position: center;
	padding: 10px;
	background: #fff;
	border-radius: 0;
}
/* Thumb slider: a horizontal strip directly under the main image, with ◀ / ▶
   rails either side that appear only when the strip actually overflows. */
.woocommerce div.product .nc-thumbs {
	order: 2 !important;
	flex: 0 0 auto !important;
	width: 100% !important; max-width: 100% !important; min-width: 0;
	height: auto !important;
	display: flex; flex-direction: row; align-items: stretch; gap: 8px;
	box-sizing: border-box;
	min-height: 0;
}
.woocommerce div.product .nc-thumbs__arrow {
	display: none;
	width: 30px !important; height: auto !important; flex: 0 0 30px !important;
	align-self: stretch;
	padding: 0 !important;
	place-items: center;
	background: var(--nc-surface-2); color: var(--nc-text-muted);
	border: 1px solid var(--nc-border); border-radius: 8px;
	cursor: pointer; line-height: 1;
	transition: background var(--nc-transition), color var(--nc-transition), border-color var(--nc-transition), opacity var(--nc-transition);
}
.woocommerce div.product .nc-thumbs__arrow::before { display: none; }
.woocommerce div.product .nc-thumbs.has-nav .nc-thumbs__arrow { display: grid; }
/* Explicit order — the strip carries `order: 1`, so without these both buttons
   (default order 0) stacked before it instead of straddling it. */
.woocommerce div.product .nc-thumbs__arrow--up { order: 0; }
.woocommerce div.product .nc-thumbs__arrow--down { order: 2; }
.woocommerce div.product .nc-thumbs__arrow:hover { background: var(--nc-accent); border-color: var(--nc-accent); color: #fff; box-shadow: none; transform: none; filter: none; }
.woocommerce div.product .nc-thumbs__arrow:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 2px; }
/* Ends of the strip: keep the button in place (no jumping layout) but make it
   read as unavailable. */
.woocommerce div.product .nc-thumbs__arrow:disabled { opacity: 0.32; cursor: default; pointer-events: none; }
.woocommerce div.product .nc-thumbs__arrow--up svg { transform: rotate(90deg); }
.woocommerce div.product .nc-thumbs__arrow--down svg { transform: rotate(-90deg); }
.woocommerce div.product .nc-thumbs__arrow svg { width: 14px; height: 14px; }

.woocommerce div.product .flex-control-thumbs {
	order: 1;
	flex: 1 1 auto !important;
	width: 100% !important; max-width: 100% !important;
	display: flex !important; flex-direction: row; gap: 8px;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	list-style: none;
	min-width: 0;
	max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
	/* A swipe should land on a thumbnail, not halfway across one. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.woocommerce div.product .flex-control-thumbs::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Every thumb is a fixed square. These selectors repeat the column modifiers
   (`--columns-4` etc.) because WooCommerce's own rules pin a percentage width
   through them — a shorter selector loses and the thumbs balloon to fill the
   strip. */
.woocommerce div.product .flex-control-thumbs li,
.woocommerce div.product .woocommerce-product-gallery--columns-3 .flex-control-thumbs li,
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li,
.woocommerce div.product .woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
	margin: 0 !important; padding: 0 !important;
	flex: 0 0 78px !important; width: 78px !important; max-width: 78px !important;
	float: none !important;
	list-style: none;
	scroll-snap-align: start;
}
.woocommerce div.product .flex-control-thumbs li::before,
.woocommerce div.product .flex-control-thumbs li::after { display: none; }
.woocommerce div.product .flex-control-thumbs img {
	width: 100% !important; height: auto !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1; object-fit: contain; display: block;
	padding: 3px;
	border-radius: 8px; border: 1px solid var(--nc-border);
	background: #fff;
	opacity: 0.8; cursor: pointer;
	box-sizing: border-box;
	transition: opacity var(--nc-transition), border-color var(--nc-transition);
}
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--nc-border); }
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--nc-accent); box-shadow: 0 0 0 1px var(--nc-accent); }
@media (max-width: 560px) {
	.woocommerce div.product .nc-thumbs { gap: 6px; }
	.woocommerce div.product .flex-control-thumbs { gap: 6px; }
	.woocommerce div.product .flex-control-thumbs li,
	.woocommerce div.product .woocommerce-product-gallery--columns-3 .flex-control-thumbs li,
	.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li,
	.woocommerce div.product .woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
		flex: 0 0 62px !important; width: 62px !important; max-width: 62px !important;
	}
	.woocommerce div.product .nc-thumbs__arrow { width: 26px !important; flex: 0 0 26px !important; }
}

/* Gallery slider arrows (FlexSlider directionNav, enabled via PHP filter) */
.woocommerce-product-gallery .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.woocommerce-product-gallery .flex-direction-nav li { margin: 0; position: static; }
.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute; top: 50%; margin-top: -20px; z-index: 8;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.5);
	overflow: hidden; color: transparent !important; font-size: 0; text-indent: -9999px;
	opacity: 0; transition: opacity var(--nc-transition), background var(--nc-transition);
	cursor: pointer;
}
.woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce-product-gallery .flex-direction-nav a.flex-prev { left: 24px; }
.woocommerce-product-gallery .flex-direction-nav a.flex-next { right: 24px; }
.woocommerce-product-gallery .flex-direction-nav a::before {
	content: "\2039"; /* ‹ */
	position: absolute; inset: 0; text-indent: 0;
	display: grid; place-items: center;
	color: #241a2e; font-size: 26px; line-height: 1; padding-bottom: 4px;
	font-family: var(--nc-font-head);
	transition: color var(--nc-transition);
}
.woocommerce-product-gallery .flex-direction-nav a.flex-next::before { content: "\203A"; /* › */ }
.woocommerce-product-gallery .flex-direction-nav a:hover { background: var(--nc-accent); }
.woocommerce-product-gallery .flex-direction-nav a:hover::before { color: #fff; }
@media (hover: none) { .woocommerce-product-gallery .flex-direction-nav a { opacity: 0.85; } }

/* Smooth crossfade when a variation swaps the gallery image */
.woocommerce div.product .woocommerce-product-gallery__image img { transition: opacity 0.35s ease; }
.woocommerce-product-gallery.nc-img-swap .woocommerce-product-gallery__image img { opacity: 0.2; }

/* Product video: play button over the gallery + modal player */
.nc-video-btn {
	position: absolute; left: 22px; bottom: 22px; z-index: 8;
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.55em 1.05em; border: 0; border-radius: 100px;
	background: rgba(8, 4, 12, 0.78); color: #fff;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.85rem;
	cursor: pointer; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
}
.nc-video-btn::before { display: none; }
.nc-video-btn:hover { background: var(--nc-accent); color: #fff; transform: none; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6); filter: none; }
.nc-video-btn svg { flex-shrink: 0; }
.nc-video-modal {
	position: fixed; inset: 0; z-index: 380;
	display: grid; place-items: center; padding: 18px;
	background: rgba(5, 2, 8, 0.92);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	opacity: 0; visibility: hidden;
	transition: opacity var(--nc-transition), visibility var(--nc-transition);
}
.nc-video-modal.is-open { opacity: 1; visibility: visible; }
.nc-video-modal__box { position: relative; width: min(940px, 100%); }
.nc-video-modal__holder {
	aspect-ratio: 16 / 9; width: 100%;
	background: #000; border-radius: var(--nc-radius); overflow: hidden;
	box-shadow: var(--nc-shadow);
}
.nc-video-modal__holder iframe,
.nc-video-modal__holder video { width: 100%; height: 100%; border: 0; display: block; }
.nc-video-modal__close {
	position: absolute; top: -50px; right: 0;
	color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
}
.nc-video-modal__close:hover { background: var(--nc-accent); color: #fff; }
.woocommerce div.product .entry-summary { margin: 0 !important; }
.woocommerce div.product .product_title {
	font-size: clamp(1.55rem, 2.6vw, 2.15rem);
	line-height: 1.18; letter-spacing: -0.02em;
	margin-bottom: 0.6rem;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link { color: var(--nc-text-faint); font-size: 0.85rem; }
/* Rating row: stars · average · "N ratings · N reviews" */
.nc-single-rating {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.9rem;
}
.nc-single-rating__stars { display: inline-flex; align-items: center; }
.nc-single-rating__stars .star-rating { font-size: 0.95rem; }
.nc-single-rating__avg {
	font-family: var(--nc-font-head); font-weight: 700; font-size: 0.95rem;
	color: var(--nc-heading);
}
.nc-single-rating__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--nc-text-faint); opacity: 0.6; }
.nc-single-rating__link { color: var(--nc-text-muted); font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; }
.nc-single-rating__link:hover { color: var(--nc-accent-2); }
/* Scoped to the SUMMARY only — related/upsell cards live inside div.product and
   were inheriting this 1.85rem price, which blew those cards up. */
.woocommerce div.product .entry-summary > p.price,
.woocommerce div.product .entry-summary > span.price,
.woocommerce div.product .summary > p.price,
.woocommerce div.product .summary > span.price,
.woocommerce div.product .woocommerce-variation-price span.price {
	font-size: 1.85rem !important; margin-bottom: 1rem;
	display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.woocommerce div.product .entry-summary > p.price del { font-size: 1.05rem; }
/* Prices inside any product loop (related, upsells, cross-sells) stay card-sized */
.woocommerce div.product ul.products li.product .price,
.woocommerce ul.products li.product .price {
	font-size: 1.05rem !important;
	display: block; margin: 0.1rem 0 0 !important;
}
/* Short description — plain, quiet text (no box) */
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--nc-text-muted);
	font-size: 0.96rem; line-height: 1.75;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 1.3rem;
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.woocommerce div.product .woocommerce-product-details__short-description ul { margin: 0.4em 0 0; padding-left: 1.1em; }
.woocommerce div.product .woocommerce-product-details__short-description li { margin-bottom: 0.25em; }
/* Stock line as a subtle pill */
.woocommerce div.product .entry-summary p.stock { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.82rem; font-weight: 600; padding: 0.35em 0.85em; border-radius: 100px; margin: 0 0 1rem; }
/* Tints come from the -soft tokens, not a literal rgba(), so the light content
   palette can restate both the text colour and its background together. */
.woocommerce div.product .entry-summary p.stock.in-stock { color: var(--nc-success); background: var(--nc-success-soft); }
.woocommerce div.product .entry-summary p.stock.out-of-stock { color: var(--nc-danger); background: var(--nc-danger-soft); }
/* Purchase area — clear hierarchy:
     row 1  [ qty stepper ] [ Add to cart ————— ]  (outline, secondary)
     row 2  [ Buy Now ——————————————— ]            (gradient, primary)
   All controls share one 52px height so the row reads as a single unit. */
.woocommerce div.product form.cart {
	margin: 0 0 1.3rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--nc-border-soft);
	display: flex; gap: 0.7rem; align-items: stretch; flex-wrap: wrap;
}
.woocommerce div.product form.cart .quantity { flex: 0 0 auto; height: 52px; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 200px; min-width: 170px; }
.woocommerce div.product form.cart .single_add_to_cart_button,
.nc-buy-now-single {
	min-height: 52px;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
	padding-top: 0; padding-bottom: 0;
	font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	background: var(--nc-surface-2);
	color: var(--nc-text);
	border: 1px solid var(--nc-border);
	transition: border-color var(--nc-transition), color var(--nc-transition), background var(--nc-transition);
}
.woocommerce div.product form.cart .single_add_to_cart_button::after {
	/* cart glyph keeps the secondary button from feeling bare */
	content: ""; width: 17px; height: 17px; flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99fb5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	border-color: var(--nc-accent);
	color: var(--nc-accent-2);
	background: var(--nc-surface-2);
	box-shadow: none;
}
/* Buy Now: primary, always its own full row */
.nc-buy-now-single { flex: 1 1 100%; min-width: 0; box-shadow: 0 10px 24px -10px rgba(var(--nc-accent-rgb), 0.55); }
/* Woo flags the wrapper while no variation resolves; match how it greys out
   its own Add to cart so the pair never disagree. */
.nc-buy-now-single:disabled,
.nc-buy-now-single.disabled,
.woocommerce-variation-add-to-cart-disabled .nc-buy-now-single {
	opacity: 0.45; cursor: not-allowed; pointer-events: none;
	box-shadow: none; transform: none;
}
/* Variable products: variation qty/buttons follow the same pattern */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: 0.7rem; align-items: stretch; flex-wrap: wrap; width: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity { height: 52px; }
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product .single_variation_wrap { width: 100%; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 0.8rem; }
/* Disabled add-to-cart (no variation chosen yet) reads clearly as inactive */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	opacity: 0.45; cursor: not-allowed;
	border-color: var(--nc-border); color: var(--nc-text-muted);
}

/* Single: wishlist / compare row */
.nc-single-tools { display: flex; gap: 1.4rem; margin: 0 0 1.4rem; flex-wrap: wrap; }
.nc-single-tool {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0;
	background: transparent; border: 0; color: var(--nc-text-muted);
	font-family: var(--nc-font-head); font-weight: 500; font-size: 0.9rem; cursor: pointer;
}
.nc-single-tool::before { display: none; }
.nc-single-tool:hover { color: var(--nc-accent-2); background: transparent; box-shadow: none; transform: none; filter: none; }
.nc-single-tool.is-active { color: var(--nc-accent-2); }
.nc-single-tool.is-active svg { fill: currentColor; }

/* Single: trust assurances */
.nc-single-assurances { list-style: none; margin: 1.2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--nc-border); display: flex; flex-direction: column; gap: 0.7rem; }
.nc-single-assurances li { display: flex; align-items: center; gap: 0.7rem; color: var(--nc-text-muted); font-size: 0.9rem; }
.nc-single-assurances li svg { color: var(--nc-accent-2); flex-shrink: 0; }
/* The returns line links to the store's policy page when one is set. */
.nc-single-assurances li a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--nc-border); }
.nc-single-assurances li a:hover { color: var(--nc-accent); text-decoration-color: currentColor; }

.woocommerce div.product .product_meta { margin-top: 1.4rem; }

/* Variations panel — attribute rows as labeled swatch pills ---------------- */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: transparent; }
.woocommerce div.product form.cart table.variations { margin: 0 0 0.5rem; }
.woocommerce div.product form.cart table.variations tr { margin-bottom: 1.1rem; }
.woocommerce div.product form.cart table.variations th.label {
	font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--nc-text-faint); margin-bottom: 0.5rem; text-align: left;
}
.woocommerce div.product form.cart table.variations th.label label { margin: 0; color: inherit; font-size: inherit; }
.woocommerce div.product form.cart table.variations td.value select { max-width: 100%; }
/* JS replaces each select with pills; the select stays for Woo's script */
select.nc-swatch-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; padding: 0 !important; border: 0 !important; }
.nc-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nc-swatch {
	padding: 0.5em 1.1em; border-radius: 100px;
	background: var(--nc-surface); border: 1px solid var(--nc-border);
	color: var(--nc-text-muted);
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.88rem;
	cursor: pointer; line-height: 1.3;
	transition: all var(--nc-transition);
}
.nc-swatch::before { display: none; }
.nc-swatch:hover { border-color: var(--nc-accent); color: var(--nc-text); background: var(--nc-surface); transform: none; box-shadow: none; filter: none; }
.nc-swatch.is-active { background: var(--nc-accent); border-color: var(--nc-accent); color: #fff; }
.nc-swatch.is-active:hover { background: var(--nc-accent); color: #fff; }
.nc-swatch.is-disabled { opacity: 0.32; text-decoration: line-through; cursor: not-allowed; }

/* Colour attributes render as real colour circles. A row can mix circles and
   text pills when only some terms have a swatch colour set, so keep them
   vertically centred against each other. */
.nc-swatches--color { gap: 0.55rem; align-items: center; }
.nc-swatch--color {
	width: 36px; height: 36px; padding: 0;
	border-radius: 50%;
	display: inline-grid; place-items: center;
	background: var(--nc-surface) !important;
	border: 2px solid var(--nc-border);
}
.nc-swatch--color .nc-swatch__dot {
	width: 26px; height: 26px; border-radius: 50%;
	/* Ring is firm enough that white / very light swatches still read as a
	   swatch rather than an empty circle. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
	display: block;
}
.nc-swatch--color:hover { border-color: var(--nc-accent); }
.nc-swatch--color.is-active {
	border-color: var(--nc-accent) !important;
	box-shadow: 0 0 0 3px var(--nc-accent-soft);
	background: var(--nc-surface) !important;
}
.nc-swatch--color.is-disabled { text-decoration: none; opacity: 0.3; }
.nc-swatch--color.is-disabled .nc-swatch__dot { position: relative; }
.nc-swatch--color.is-disabled .nc-swatch__dot::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top left, transparent 46%, var(--nc-danger) 46%, var(--nc-danger) 54%, transparent 54%);
	border-radius: 50%;
}
/* Chosen value shown next to the attribute label — "Colour: Midnight Blue" */
.nc-swatch-picked {
	margin-left: 0.5em; color: var(--nc-heading);
	font-weight: 600; text-transform: none; letter-spacing: 0;
	font-size: 0.86rem;
}
.nc-swatch-picked:empty { display: none; }
/* "Clear" — a real button that sits under the swatch rows, not a stray link
   above them. It only exists once something is selected: the JS class covers
   our own swatch UI, the [style] match covers Woo hiding it on its own (it
   only flips `visibility`, which would otherwise leave a phantom gap). */
.woocommerce div.product form.cart .reset_variations {
	display: inline-flex; align-items: center; gap: 0.4em;
	margin: 0 0 1rem; padding: 0.4em 0.95em;
	border: 1px solid var(--nc-border); border-radius: 100px;
	background: var(--nc-surface); color: var(--nc-text-muted);
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.78rem;
	line-height: 1.3; text-decoration: none;
	transition: all var(--nc-transition);
}
.woocommerce div.product form.cart .reset_variations::before { content: "×"; font-size: 1.1em; line-height: 1; }
.woocommerce div.product form.cart .reset_variations:hover,
.woocommerce div.product form.cart .reset_variations:focus-visible {
	border-color: var(--nc-danger); color: var(--nc-danger); background: var(--nc-surface);
}
.woocommerce div.product form.cart .reset_variations.nc-reset--off,
.woocommerce div.product form.cart .reset_variations[style*="hidden"] { display: none !important; }
/* Selected variation summary (price + stock) */
.woocommerce div.product form.cart .single_variation_wrap { width: 100%; }
/* WooCommerce always prints the price / availability / description shells,
   empty or not, so `:not(:empty)` was always true and drew a blank card under
   the swatches. Paint it only when one of those shells actually has content. */
.woocommerce div.product form.cart .woocommerce-variation.single_variation {
	margin: 0; padding: 0; background: none; border: 0;
}
.woocommerce div.product form.cart .woocommerce-variation.single_variation:has(.woocommerce-variation-price .price),
.woocommerce div.product form.cart .woocommerce-variation.single_variation:has(.woocommerce-variation-availability p),
.woocommerce div.product form.cart .woocommerce-variation.single_variation:has(.woocommerce-variation-description p) {
	background: var(--nc-surface); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm); padding: 0.9rem 1.1rem; margin: 0 0 1rem;
}
/* Fallback for engines without :has() — no card, but never an empty one. */
@supports not selector(:has(*)) {
	.woocommerce div.product form.cart .woocommerce-variation.single_variation { margin: 0 0 0.5rem; }
}
.woocommerce div.product .woocommerce-variation-price .price { font-size: 1.35rem !important; }
.woocommerce div.product .woocommerce-variation-availability p.stock { margin: 0.3rem 0 0; font-size: 0.88rem; }
.woocommerce div.product .woocommerce-variation-description p:last-child { margin-bottom: 0; }

/* Orders & thank-you page --------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table { width: 100% !important; max-width: 100%; }
.woocommerce-order { width: 100%; }
.woocommerce-thankyou-order-received {
	font-family: var(--nc-font-head); font-size: 1.3rem; font-weight: 600;
	color: var(--nc-heading); margin: 0 0 1.4rem;
}
ul.woocommerce-order-overview {
	list-style: none; margin: 0 0 1.8rem !important; padding: 0 !important;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem;
}
ul.woocommerce-order-overview li {
	background: var(--nc-surface); border: 1px solid var(--nc-border) !important;
	border-radius: var(--nc-radius-sm); padding: 0.9rem 1.05rem;
	margin: 0 !important; float: none !important; width: auto !important;
	font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--nc-text-faint);
}
ul.woocommerce-order-overview li strong {
	display: block; margin-top: 0.35rem;
	font-size: 0.98rem; letter-spacing: 0; text-transform: none;
	color: var(--nc-heading); font-family: var(--nc-font-head);
}
.woocommerce-order-details, .woocommerce-customer-details { margin-top: 1.8rem; width: 100%; }
.woocommerce-order-details__title, .woocommerce-customer-details h2 { font-size: 1.2rem; }
.woocommerce-customer-details address {
	font-style: normal; line-height: 1.8;
	background: var(--nc-surface); border: 1px solid var(--nc-border) !important;
	border-radius: var(--nc-radius-sm); padding: 1.1rem 1.2rem;
	color: var(--nc-text-muted);
}
.woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 720px) { .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-customer-details .woocommerce-columns::before,
.woocommerce-customer-details .woocommerce-columns::after { display: none !important; content: none !important; }
.woocommerce-customer-details .woocommerce-column { width: 100% !important; float: none !important; }

/* Quantity — unified pill stepper: [ − | value | + ] with soft dividers */
.woocommerce .quantity {
	display: inline-flex; align-items: stretch;
	border: 1px solid var(--nc-border); border-radius: 100px;
	overflow: hidden; background: var(--nc-surface-2);
	transition: border-color var(--nc-transition);
}
.woocommerce .quantity:focus-within { border-color: var(--nc-accent); }
.woocommerce .quantity input.qty {
	width: 52px; border: 0 !important; background: transparent !important;
	text-align: center; padding: 0; font-weight: 700; font-size: 1rem;
	color: var(--nc-heading) !important;
	font-family: var(--nc-font-head);
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity input.qty:focus { box-shadow: none; outline: none; }
.nc-qty-btn {
	width: 44px; border: 0; background: transparent;
	color: var(--nc-text-muted); font-size: 1.25rem; line-height: 1;
	cursor: pointer; padding: 0; border-radius: 0;
	transition: background var(--nc-transition), color var(--nc-transition);
}
.nc-qty-minus { border-right: 1px solid var(--nc-border-soft); }
.nc-qty-plus { border-left: 1px solid var(--nc-border-soft); }
.nc-qty-btn:hover { background: var(--nc-elevated); color: var(--nc-accent-2); box-shadow: none; transform: none; filter: none; }

/* Variations */

/* Product meta — a labelled row per fact, terms as linked chips */
.woocommerce div.product .product_meta { font-size: 0.85rem; color: var(--nc-text-faint); border-top: 1px solid var(--nc-border); padding-top: 1.2rem; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 0.3rem; }
.woocommerce div.product .product_meta a { color: var(--nc-text-muted); }

.woocommerce div.product .nc-meta { display: flex; flex-direction: column; gap: 0.55rem; }
.nc-meta__row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.nc-meta__label {
	flex: 0 0 84px;
	font-family: var(--nc-font-head);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--nc-text-faint);
}
.nc-meta__value { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; flex: 1 1 auto; }
.woocommerce div.product .nc-meta__chip {
	display: inline-flex; align-items: center;
	padding: 0.24em 0.7em; border-radius: 100px;
	background: var(--nc-surface-2); border: 1px solid var(--nc-border-soft);
	color: var(--nc-heading) !important;
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.82rem; line-height: 1.5;
	transition: border-color var(--nc-transition), color var(--nc-transition), background var(--nc-transition);
}
.woocommerce div.product a.nc-meta__chip:hover {
	border-color: var(--nc-accent); background: var(--nc-accent-soft); color: var(--nc-accent-2) !important;
}
.nc-meta__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem; color: var(--nc-text-muted); letter-spacing: 0.02em;
}

/* Tabs — compact underline bar, no heavy card around the panel.
   Row 2 of the product grid, under the gallery: the description and reviews
   read alongside the lower half of the buy column instead of leaving a tall
   empty band beneath the media. */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1; grid-row: 2;
	min-width: 0;
	margin-top: clamp(22px, 3vw, 36px);
	padding-top: clamp(18px, 2.4vw, 28px);
	border-top: 1px solid var(--nc-border-soft);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0; margin: 0 0 1.5rem;
	border: 0; border-bottom: 1px solid var(--nc-border);
	display: flex; gap: 0.2rem; flex-wrap: wrap;
	overflow: visible;
	/* Don't rely on WooCommerce's own stylesheet being present (or unminified
	   away) to suppress the bullets. */
	list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { list-style: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::marker { content: ""; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important; border-radius: 0 !important;
	margin: 0 0 -1px !important; padding: 0;
	box-shadow: none;
}
.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 {
	display: block; padding: 0.75em 1.15em;
	color: var(--nc-text-muted) !important;
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.92rem;
	border-bottom: 2px solid transparent;
	transition: color var(--nc-transition), border-color var(--nc-transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--nc-heading) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--nc-accent-2) !important;
	border-bottom-color: var(--nc-accent);
}
.woocommerce div.product .woocommerce-tabs .panel {
	background: transparent; border: 0; border-radius: 0;
	padding: 0; margin: 0;
	/* --nc-text, not --nc-text-muted: this is body copy someone reads end to
	   end, not a caption. 68ch keeps the measure inside the comfortable range
	   instead of letting lines run the full width of a desktop window. */
	color: var(--nc-text); line-height: 1.75; font-size: 1rem;
	max-width: 68ch;
}
.woocommerce div.product .woocommerce-tabs .panel p { margin: 0 0 1.1em; }
.woocommerce div.product .woocommerce-tabs .panel a { color: var(--nc-accent-2); text-decoration: underline; text-underline-offset: 2px; }
.woocommerce div.product .woocommerce-tabs .panel a:hover { color: var(--nc-accent); }
.woocommerce div.product .woocommerce-tabs .panel hr { border: 0; border-top: 1px solid var(--nc-border-soft); margin: 1.6em 0; }
/* Hide ONLY WooCommerce's own "Description" heading (always the first child).
   Any subheadings inside the content itself must still show. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4 {
	display: block;
	color: var(--nc-heading);
	font-family: var(--nc-font-head); font-weight: 600;
	margin: 1.5em 0 0.55em; line-height: 1.3;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.15rem; }
.woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 1.02rem; }
.woocommerce div.product .woocommerce-tabs .panel h4 { font-size: 0.95rem; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child + * { margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel > :first-child { margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel strong,
.woocommerce div.product .woocommerce-tabs .panel b { color: var(--nc-heading); font-weight: 600; }
.woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.woocommerce div.product .woocommerce-tabs .panel li { margin-bottom: 0.45em; }
.woocommerce div.product .woocommerce-tabs .panel ul li::marker { color: var(--nc-accent); }

/* Collapsible sections written into the description as <details>. Left raw,
   these render as a bare ▶/▼ glyph against unstyled text with nothing to show
   where one section ends and the next begins. */
.woocommerce div.product .woocommerce-tabs .panel details {
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm);
	background: transparent;
	margin: 0 0 0.7rem;
	overflow: hidden;
	/* Inset lives here, not on the children: a margin on `summary ~ *` is
	   outranked by the longer table/list selectors below, which reset margin
	   wholesale and left tables flush against the card edge. */
	padding: 0 1.05rem;
}
/* Tint the summary bar only — the body stays on the page colour so long copy
   keeps its full contrast instead of reading off a tinted panel. */
.woocommerce div.product .woocommerce-tabs .panel details > summary {
	display: flex; align-items: center; gap: 0.7rem;
	margin: 0 -1.05rem; /* bleed back out through the card's inset */
	padding: 0.85rem 1.05rem;
	background: var(--nc-surface-2);
	cursor: pointer; list-style: none;
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.98rem;
	color: var(--nc-heading);
	transition: background var(--nc-transition), color var(--nc-transition);
}
.woocommerce div.product .woocommerce-tabs .panel details > summary::-webkit-details-marker { display: none; }
.woocommerce div.product .woocommerce-tabs .panel details > summary::marker { content: ""; }
.woocommerce div.product .woocommerce-tabs .panel details > summary:hover { background: var(--nc-elevated); color: var(--nc-accent-2); }
.woocommerce div.product .woocommerce-tabs .panel details > summary:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: -2px; }
/* Chevron drawn from borders so it needs no icon font or inline SVG. */
.woocommerce div.product .woocommerce-tabs .panel details > summary::after {
	content: ""; flex: 0 0 auto; margin-left: auto;
	width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	opacity: 0.6;
	transition: transform var(--nc-transition);
}
.woocommerce div.product .woocommerce-tabs .panel details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.woocommerce div.product .woocommerce-tabs .panel details[open] > summary { border-bottom: 1px solid var(--nc-border); }
.woocommerce div.product .woocommerce-tabs .panel details > summary + * { margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs .panel details[open] > :last-child { margin-bottom: 1rem; }
/* Nested headings inside a details block already have the summary above them. */
.woocommerce div.product .woocommerce-tabs .panel details h2:first-of-type,
.woocommerce div.product .woocommerce-tabs .panel details h3:first-of-type { margin-top: 0; }

/* Spec tables authored inside the description */
.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes) {
	width: 100%; border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--nc-border); border-radius: var(--nc-radius-sm);
	overflow: hidden; margin: 0 0 1.1em; font-size: 0.92rem;
}
.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes) th,
.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes) td {
	padding: 0.65rem 0.9rem; text-align: left; border: 0;
	border-bottom: 1px solid var(--nc-border-soft);
}
.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes) tr:last-child th,
.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes) tr:last-child td { border-bottom: 0; }
.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes) th {
	background: var(--nc-surface); color: var(--nc-heading); font-weight: 600; width: 38%;
}
.woocommerce div.product .woocommerce-tabs .panel table:not(.shop_attributes) td { color: var(--nc-text-muted); }

/* Additional information table — clean, readable rows */
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
	width: 100%; max-width: 620px;
	border: 1px solid var(--nc-border); border-radius: var(--nc-radius-sm);
	border-collapse: separate; border-spacing: 0; overflow: hidden;
	margin: 0;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:not(:last-child) th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:not(:last-child) td { border-bottom: 1px solid var(--nc-border-soft); }
.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
	width: 34%; text-align: left; padding: 0.75rem 1rem;
	background: var(--nc-surface-2);
	color: var(--nc-heading); font-weight: 600; font-size: 0.88rem;
	border: 0;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
	padding: 0.75rem 1rem; border: 0;
	color: var(--nc-text-muted); font-size: 0.9rem; font-style: normal;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes td p { margin: 0; padding: 0; }

/* Reviews — compact list */
.woocommerce #reviews #comments h2 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.woocommerce #reviews #comments ol.commentlist { padding: 0; margin: 0 0 1.6rem; list-style: none; }
.woocommerce #reviews #comments ol.commentlist li {
	background: var(--nc-surface-2); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm); padding: 1rem 1.15rem; margin: 0 0 0.7rem;
}
.woocommerce #reviews #comments ol.commentlist li .comment_container { display: flex; gap: 0.9rem; align-items: flex-start; background: transparent; border: 0; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static; float: none; flex: 0 0 40px;
	margin: 0; border-radius: 50%; width: 40px; height: 40px;
	border: 0; padding: 0; background: transparent;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; border: 0; padding: 0; flex: 1; min-width: 0; }
.woocommerce #reviews #comments ol.commentlist li .meta { font-size: 0.85rem; color: var(--nc-text-faint); margin: 0 0 0.35rem; }
.woocommerce #reviews #comments ol.commentlist li .meta strong { color: var(--nc-heading); font-weight: 600; }
.woocommerce #reviews #comments ol.commentlist li .description p:last-child { margin-bottom: 0; }
.woocommerce #reviews #comments ol.commentlist li .star-rating { margin-bottom: 0.35rem; }
.woocommerce #review_form #respond { background: transparent; padding: 0; }
.woocommerce #review_form #respond textarea { min-height: 110px; }
.woocommerce #reviews .comment-reply-title { font-family: var(--nc-font-head); font-weight: 600; color: var(--nc-heading); display: block; margin-bottom: 0.7rem; }

/* Related / upsells */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 { font-size: 1.6rem; margin: clamp(28px, 4vw, 52px) 0 1.6rem; }
/* Full width, below both columns. No explicit grid-row — auto-placement puts
   them after the summary's two-row span. */
.woocommerce .related, .woocommerce .upsells { grid-column: 1 / -1; margin-top: 1rem; min-width: 0; }

/* Cart =====================================================================

   Two columns on desktop: the line items on the left, the order summary
   parked on the right and pinned while the list scrolls. That's the shape
   people already know from every checkout they've used, and it keeps the
   total and the CTA on screen instead of stranded below a long list.

   WooCommerce's cart.php is untouched. It emits the form and .cart-collaterals
   as siblings, so the wrapper becomes the grid and .cart-collaterals goes
   `display: contents` — that lets the summary card and the cross-sell row
   place themselves in the grid instead of being trapped in one column.
   `order` drives placement rather than source order, because WooCommerce
   prints cross-sells BEFORE the totals and auto-placement would otherwise
   push the summary below them.

   Engines without :has() (and any builder that changes the wrapper) simply
   don't match and keep the stacked single-column cart. Everything below the
   layout block is plain styling and applies either way.
   ========================================================================= */
.woocommerce-cart .nc-site-main .woocommerce:has(> form.woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 2rem;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { order: 0; grid-column: 1 / -1; }
.woocommerce-cart form.woocommerce-cart-form { order: 1; grid-column: 1; min-width: 0; }
/* Guarded by the same :has() as the grid — without it there is nothing for the
   summary to place itself into, and dissolving the wrapper would only leave
   cross-sells sitting between the items and the total. */
.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) .cart-collaterals { display: contents; }
.woocommerce-cart .cart_totals { order: 2; }
.woocommerce-cart .cross-sells { order: 3; grid-column: 1 / -1; min-width: 0; }

/* Core floats these two into a 48%/48% pair. Selectors match core's own
   specificity (.woocommerce .cart-collaterals .cart_totals) because a shorter
   one silently loses and the summary snaps back to a half-width float. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-cart .cart-collaterals .cross-sells { float: none; width: 100%; }

/* Core clearfixes .cart-collaterals and the coupon box. `display: contents`
   removes the wrapper's own box but NOT its pseudo-elements, so those two
   empty `display: table` boxes would become real grid items and take cells
   from the layout. The coupon and actions rows are flex for the same reason. */
.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after,
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after,
.woocommerce-cart td.actions::before,
.woocommerce-cart td.actions::after,
.woocommerce-cart td.actions .coupon::before,
.woocommerce-cart td.actions .coupon::after { content: none !important; display: none !important; }

@media (min-width: 992px) {
	.woocommerce-cart .nc-site-main .woocommerce:has(> form.woocommerce-cart-form) {
		grid-template-columns: minmax(0, 1fr) 366px;
		gap: 2.5rem 2.5rem;
	}
	.woocommerce-cart .cart_totals {
		grid-column: 2;
		position: sticky;
		/* Clears the sticky navbar, plus a little breathing room. */
		top: calc(var(--nc-header-h) + 1.25rem);
	}
}

/* --- Line items ---------------------------------------------------------
   The card is the FORM, not the table, so the coupon/update row sits inside
   the same panel as the products instead of floating loose underneath it. */
.woocommerce-cart form.woocommerce-cart-form {
	background: var(--nc-surface);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-lg);
	box-shadow: var(--nc-shadow-sm);
	padding: 0.25rem 1.5rem 1.25rem;
}
.woocommerce-cart form.woocommerce-cart-form table.shop_table {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	width: 100%;
}

/* Everywhere else a shop_table still wants to look like a card of its own
   (order details, my-account, the thank-you page). */
.woocommerce table.shop_table {
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--nc-surface);
	overflow: hidden;
	margin: 0 0 1.5rem;
}
.woocommerce table.shop_table th { background: var(--nc-surface-2); color: var(--nc-heading); font-family: var(--nc-font-head); padding: 1rem 1.2rem; border: 0; }
.woocommerce table.shop_table td { padding: 1rem 1.2rem; border-top: 1px solid var(--nc-border); color: var(--nc-text); vertical-align: middle; }
.woocommerce table.shop_table tr:first-child td { border-top: 0; }

/* Column headings read as quiet labels — the products are the content here,
   and a filled header bar would compete with the summary card beside it. */
.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th {
	background: transparent;
	color: var(--nc-text-faint);
	font-family: var(--nc-font-head);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1.1rem 0.6rem;
	border-bottom: 1px solid var(--nc-border);
	text-align: left;
}
.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th.product-subtotal { text-align: right; }
/* Auto table layout hands the leftover width to the FIRST column, so the
   remove cell was taking ~340px and squeezing the product name into a
   two-line wrap next to a stack of empty space. Pin every column except the
   name, which then absorbs the remainder.

   These are kept tight on purpose. The cart is full width at ≥992px and a
   single column below it, so the same table has to work at roughly 900px and
   at roughly 700px; generous fixed columns look fine at the first width and
   leave a product title nothing to sit in at the second. The 160px on
   quantity is a floor, not a choice — the stepper is 44 + 52 + 44 plus the
   cell padding. */
.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th.product-remove,
.woocommerce-cart td.product-remove { width: 44px; }
.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th.product-thumbnail,
.woocommerce-cart td.product-thumbnail { width: 100px; }
.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th.product-price,
.woocommerce-cart td.product-price { width: 112px; }
.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th.product-quantity,
.woocommerce-cart td.product-quantity { width: 160px; }
.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th.product-subtotal,
.woocommerce-cart td.product-subtotal { width: 112px; }
.woocommerce-cart form.woocommerce-cart-form table.shop_table tbody td {
	padding: 1.15rem 0.6rem;
	border-top: 1px solid var(--nc-border-soft);
	background: transparent;
	vertical-align: middle;
}
.woocommerce-cart form.woocommerce-cart-form table.shop_table tbody tr:first-child td { border-top: 0; }

/* Thumbnail on the same contained white stage the rest of the shop uses, so a
   product shot is never cropped through the middle in the cart. */
.woocommerce-cart td.product-thumbnail img {
	max-width: none;
	width: 76px; height: 76px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm);
	padding: 5px;
	display: block;
}
.woocommerce-cart td.product-name a {
	color: var(--nc-heading);
	font-family: var(--nc-font-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	text-decoration: none;
}
.woocommerce-cart td.product-name a:hover { color: var(--nc-accent-2); }
/* Chosen variation attributes as a quiet "Colour: Midnight · Size: M" line
   rather than a <dl> with default browser indentation. Everything runs inline
   so a pair never splits across two lines the way a flex row does. */
.woocommerce-cart td.product-name .variation {
	display: block; margin: 0.35rem 0 0;
	font-size: 0.8rem; line-height: 1.5; color: var(--nc-text-muted);
}
.woocommerce-cart td.product-name .variation dt { display: inline; font-weight: 500; margin: 0; }
.woocommerce-cart td.product-name .variation dd { display: inline; margin: 0 0.75rem 0 0.25rem; }
.woocommerce-cart td.product-name .variation dd p { display: inline; margin: 0; }
.woocommerce-cart td.product-price { color: var(--nc-text-muted); font-weight: 500; }
.woocommerce-cart td.product-subtotal { text-align: right; color: var(--nc-heading); font-weight: 700; font-family: var(--nc-font-head); }
.woocommerce-cart td.product-quantity .quantity { background: var(--nc-surface-2); }

/* Remove — neutral until you mean it. It was permanently red, which put the
   loudest colour on the page next to every single product. */
.woocommerce a.remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; line-height: 1;
	color: var(--nc-text-faint) !important;
	border: 1px solid var(--nc-border);
	background: transparent;
	border-radius: 50%;
	font-weight: 400;
	transition: color var(--nc-transition), background var(--nc-transition), border-color var(--nc-transition);
}
.woocommerce a.remove:hover {
	background: var(--nc-danger) !important;
	border-color: transparent;
	color: #fff !important;
}
.woocommerce a.remove:focus-visible { outline: none; box-shadow: var(--nc-ring); }

/* --- Coupon + update row ------------------------------------------------- */
/* Deliberately NOT display:flex on the <td>. A cell that stops being a
   table-cell loses its colspan, and this row would collapse to the width of
   the first column instead of spanning the table. It stays a cell (which is
   its own block formatting context, so the floated button below needs no
   clearfix) and the coupon group does the flexing. */
.woocommerce-cart form.woocommerce-cart-form td.actions {
	padding: 1.4rem 0.6rem 0.4rem !important;
	border-top: 1px solid var(--nc-border) !important;
	background: transparent !important;
	text-align: left;
	vertical-align: middle;
}
.woocommerce-cart td.actions .coupon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; float: none; }
/* Core styles this input at .woocommerce-cart table.cart td.actions .coupon
   .input-text — four classes deep, with its own grey border and 6px padding.
   Anything shorter than that loses, so the full path leads the list. */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce .coupon .input-text {
	width: auto; min-width: 190px; display: inline-block; height: 46px;
	border: 1px solid var(--nc-border); border-radius: 100px;
	background: var(--nc-surface-2); color: var(--nc-text);
	margin: 0; padding: 0 1.1rem;
	font-size: 0.92rem; line-height: normal;
}
.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.woocommerce .coupon .input-text:focus { border-color: var(--nc-accent); box-shadow: var(--nc-ring); outline: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder { color: var(--nc-text-faint); }
/* Update cart is a fallback (the stepper applies changes on its own), so it
   sits at the quiet end of the row rather than competing with Apply coupon. */
.woocommerce-cart td.actions button[name="update_cart"],
.woocommerce-cart td.actions input[name="update_cart"] { float: right; margin-left: 1rem; }

/* Continue shopping — the way back to the catalogue, which the stock cart
   simply doesn't offer. */
.nc-cart-continue {
	display: inline-flex; align-items: center; gap: 0.5rem;
	margin: 1.25rem 0.6rem 0.25rem;
	font-size: 0.9rem; font-weight: 600;
	color: var(--nc-accent-2); text-decoration: none;
}
.nc-cart-continue svg { transform: rotate(180deg); transition: transform var(--nc-transition); }
.nc-cart-continue:hover { color: var(--nc-accent-strong); }
.nc-cart-continue:hover svg { transform: rotate(180deg) translateX(3px); }

/* Update cart / Apply coupon — secondary outline buttons (any cart markup) */
.woocommerce td.actions .button,
.woocommerce td.actions input.button,
td.actions .button,
td.actions input.button {
	background: var(--nc-surface-2) !important; color: var(--nc-text) !important;
	border: 1px solid var(--nc-border) !important; border-radius: 100px;
	min-height: 46px; padding: 0 1.4rem; font-weight: 600;
	box-shadow: none !important;
}
td.actions .button:hover:not([disabled]),
td.actions input.button:hover:not([disabled]) { border-color: var(--nc-accent) !important; color: var(--nc-accent-2) !important; background: var(--nc-surface-2) !important; }
td.actions .button[disabled],
td.actions input.button[disabled] { opacity: 0.45; cursor: not-allowed; }
.woocommerce .cart .button, .woocommerce .cart input.button { border-radius: 100px; }

/* The whole form dims while a quantity change is being submitted, so the
   totals are never read as current while they're about to change. */
.woocommerce-cart form.woocommerce-cart-form.is-updating { opacity: 0.55; pointer-events: none; transition: opacity 0.2s ease; }

/* --- Order summary ------------------------------------------------------
   Selectors stay body-class-independent so an Elementor/ShopBuilder cart
   widget (which renders without the .woocommerce-cart body class) still gets
   the card. */
.cart_totals,
.woocommerce .cart_totals {
	background: var(--nc-surface-2);
	border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-lg);
	padding: 1.5rem;
	box-shadow: var(--nc-shadow-sm);
	float: none; width: 100%;
}
.cart_totals h2 {
	font-family: var(--nc-font-head);
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--nc-text-faint);
	margin: 0 0 1.1rem;
}
/* The totals table also carries .shop_table, so the generic card rule above
   would draw a bordered white panel inside this one. Matching that rule's
   specificity (and sitting after it) keeps the table transparent. */
.woocommerce .cart_totals table.shop_table,
.woocommerce .cart_totals table,
.cart_totals table { width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.cart_totals table th,
.cart_totals table td {
	padding: 0.65rem 0 !important;
	border: 0; border-top: 1px solid var(--nc-border-soft) !important;
	background: transparent !important;
	vertical-align: top;
}
.cart_totals table tr:first-child th,
.cart_totals table tr:first-child td { border-top: 0 !important; }
/* Core pins this th to width:35% from .woocommerce-cart .cart-collaterals
   .cart_totals table th, so the override needs the same reach. */
.woocommerce-cart .cart-collaterals .cart_totals table th,
.cart_totals table th { color: var(--nc-text-muted) !important; font-weight: 500 !important; font-family: var(--nc-font-body); text-align: left; width: 45%; }
.woocommerce-cart .cart-collaterals .cart_totals table td,
.cart_totals table td { color: var(--nc-heading) !important; font-weight: 600; text-align: right; }

/* The grand total is the number people are looking for — size and weight do
   that job. Brand purple is saved for the one action in this card, so the
   summary has a single obvious next step. */
.cart_totals .order-total th,
.cart_totals .order-total td {
	border-top: 1px solid var(--nc-border) !important;
	padding-top: 1rem !important;
}
.cart_totals .order-total th { color: var(--nc-heading) !important; font-weight: 700 !important; font-family: var(--nc-font-head); font-size: 0.98rem; }
.cart_totals .order-total .amount { color: var(--nc-heading) !important; font-family: var(--nc-font-head); font-weight: 700; font-size: 1.32rem; }
.cart_totals .includes_tax,
.cart_totals small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--nc-text-faint); }

/* Shipping block inside the summary */
.cart_totals .woocommerce-shipping-destination { font-size: 0.82rem; color: var(--nc-text-muted); margin: 0.5rem 0 0; }
.cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; }
.cart_totals ul#shipping_method li { margin: 0 0 0.35rem; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.cart_totals ul#shipping_method li:last-child { margin-bottom: 0; }
.cart_totals ul#shipping_method label { font-weight: 500; color: var(--nc-text); }
.cart_totals .shipping-calculator-button {
	display: inline-block; margin-top: 0.5rem;
	color: var(--nc-accent-2); font-size: 0.85rem; font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px;
}
.cart_totals .shipping-calculator-button:hover { color: var(--nc-accent-strong); }
.cart_totals .shipping-calculator-form { margin-top: 0.9rem; text-align: left; }
.cart_totals .shipping-calculator-form .button { width: 100%; }

/* Proceed to checkout — prominent primary CTA (any cart markup).
   Core sizes this from .woocommerce-cart .wc-proceed-to-checkout
   a.checkout-button (font-size 1.25em, padding 1em, margin-bottom 1em), which
   out-specifies a bare a.checkout-button — hence the long selector first. */
.woocommerce-cart .wc-proceed-to-checkout { padding: 1.25rem 0 0; margin: 0; }
.wc-proceed-to-checkout { padding: 1.25rem 0 0; margin: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.checkout-button,
a.checkout-button,
.wc-proceed-to-checkout .button {
	display: flex !important; align-items: center; justify-content: center;
	width: 100%; min-height: 54px; margin: 0;
	background: var(--nc-accent-grad) !important; background-color: var(--nc-accent) !important; color: #fff !important;
	font-family: var(--nc-font-head); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
	border: 0 !important; border-radius: 100px;
	padding: 0 1.5rem;
	box-shadow: 0 10px 24px -10px rgba(var(--nc-accent-rgb), 0.55);
	transition: box-shadow var(--nc-transition), transform var(--nc-transition), background-color var(--nc-transition);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.checkout-button:hover,
.wc-proceed-to-checkout .button:hover {
	background-color: var(--nc-accent-strong) !important; color: #fff !important;
	box-shadow: 0 14px 30px -10px rgba(var(--nc-accent-rgb), 0.62);
	transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
	.checkout-button:hover, .wc-proceed-to-checkout .button:hover { transform: none; }
}

/* Reassurance under the CTA — shipping / returns / secure checkout, all read
   from the store's own settings (see noctura_cart_assurances). */
.nc-cart-assurances { list-style: none; margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--nc-border-soft); display: grid; gap: 0.6rem; }
.nc-cart-assurances li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--nc-text-muted); }
.nc-cart-assurances svg { flex: none; color: var(--nc-accent); }
.nc-cart-assurances a { color: var(--nc-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.nc-cart-assurances a:hover { color: var(--nc-accent-2); }

/* --- Cross-sells --------------------------------------------------------- */
.woocommerce-cart .cross-sells { margin-top: 0.5rem; }
.woocommerce-cart .cross-sells > h2 { font-size: 1.35rem; margin: 0 0 1.2rem; color: var(--nc-heading); }

/* --- Empty cart ----------------------------------------------------------
   Core gives this paragraph the .woocommerce-info class as well, so it
   arrives styled as a left-accented notice strip with !important padding and
   margins. An empty cart isn't a warning — it's the whole page — so it's
   restated here as a centred panel that the Return to shop row closes off. */
.woocommerce-cart p.cart-empty,
.woocommerce-cart .cart-empty.woocommerce-info {
	display: block !important;
	text-align: center;
	font-size: 1.05rem;
	font-family: var(--nc-font-head);
	color: var(--nc-text-muted) !important;
	background: var(--nc-surface) !important;
	border: 1px solid var(--nc-border) !important;
	/* The Return to shop row continues this same card, so the seam between
	   them must not draw a rule across the middle of it. */
	border-bottom: 0 !important;
	border-radius: var(--nc-radius-lg) var(--nc-radius-lg) 0 0 !important;
	padding: 3.5rem 1.5rem 0.25rem !important;
	margin: 0 !important;
}
.woocommerce-cart .return-to-shop {
	text-align: center;
	background: var(--nc-surface);
	border: 1px solid var(--nc-border);
	border-top: 0;
	border-radius: 0 0 var(--nc-radius-lg) var(--nc-radius-lg);
	margin: 0 0 1.5rem;
	padding: 1.5rem 1.5rem 3.5rem;
}
.woocommerce-cart .return-to-shop .button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding: 0 2rem;
	background: var(--nc-accent-grad) !important; color: #fff !important;
	border: 0 !important; border-radius: 100px;
	font-family: var(--nc-font-head); font-weight: 700;
}

/* --- Cart on small screens ----------------------------------------------
   WooCommerce's shop_table_responsive falls back to stacked rows with
   "Product:" labels floated in front of every cell. That reads like a debug
   dump; each line item becomes a proper card instead.

   768px, not 767px — core's own responsive query is `max-width: 768px`, and a
   one-pixel gap between the two is a viewport width where core's stacked rows
   show through with the labels still attached. */
@media (max-width: 768px) {
	.woocommerce-cart form.woocommerce-cart-form { padding: 0.25rem 1rem 1rem; }
	.woocommerce-cart form.woocommerce-cart-form table.shop_table thead { display: none; }
	.woocommerce-cart form.woocommerce-cart-form table.shop_table tbody tr.cart_item {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name     remove"
			"thumb price    price"
			"thumb quantity subtotal";
		align-items: center;
		gap: 0.4rem 0.9rem;
		padding: 1.1rem 0;
		border-top: 1px solid var(--nc-border-soft);
	}
	.woocommerce-cart form.woocommerce-cart-form table.shop_table tbody tr.cart_item:first-child { border-top: 0; }
	.woocommerce-cart form.woocommerce-cart-form table.shop_table tbody tr.cart_item td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		background: transparent !important;
	}
	/* Kill core's "Product: " / "Price: " pseudo-labels — the layout says it. */
	.woocommerce-cart form.woocommerce-cart-form table.shop_table tbody tr.cart_item td::before { content: none !important; }
	/* The desktop column widths are set on the cells themselves, and a cell
	   keeps that width once it becomes a grid item — the 160px quantity cell
	   sat in a 93px track and printed straight over the subtotal beside it.
	   Every one of them hands its width back to the grid here. */
	.woocommerce-cart td.product-remove,
	.woocommerce-cart td.product-thumbnail,
	.woocommerce-cart td.product-name,
	.woocommerce-cart td.product-price,
	.woocommerce-cart td.product-quantity,
	.woocommerce-cart td.product-subtotal { width: auto; }
	.woocommerce-cart td.product-thumbnail { grid-area: thumb; align-self: start; }
	.woocommerce-cart td.product-name { grid-area: name; }
	.woocommerce-cart td.product-price { grid-area: price; font-size: 0.88rem; }
	.woocommerce-cart td.product-quantity { grid-area: quantity; }
	.woocommerce-cart td.product-subtotal { grid-area: subtotal; text-align: right !important; }
	.woocommerce-cart td.product-remove { grid-area: remove; text-align: right !important; align-self: start; }
	.woocommerce-cart form.woocommerce-cart-form td.actions { padding: 1.2rem 0 0.2rem !important; }
	.woocommerce-cart td.actions .coupon { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-bottom: 0.75rem; }
	.woocommerce-cart table.cart td.actions .coupon .input-text,
	.woocommerce .coupon .input-text { width: 100%; min-width: 0; }
	.woocommerce-cart td.actions .button,
	.woocommerce-cart td.actions input.button { width: 100%; }
	.woocommerce-cart td.actions button[name="update_cart"],
	.woocommerce-cart td.actions input[name="update_cart"] { float: none; margin-left: 0; }
	.nc-cart-continue { margin-left: 0; }

	/* The summary is a two-column label/value list and reads perfectly well at
	   this width, so it keeps its table rather than being stacked into
	   "Subtotal: …" lines by core's responsive rules. */
	/* `tr { display: block }` is the piece that has to come back too: with the
	   row a block and the cells still table-cells, the browser wraps them in
	   an anonymous row that shrink-wraps, and label and amount end up stuck
	   together on the left ("Subtotal₹13,097.00") instead of spanning. */
	.woocommerce-cart .cart_totals table.shop_table_responsive tbody tr { display: table-row; }
	.woocommerce-cart .cart_totals table.shop_table_responsive tbody th { display: table-cell; }
	.woocommerce-cart .cart_totals table.shop_table_responsive tbody td { display: table-cell; text-align: right !important; }
	.woocommerce-cart .cart_totals table.shop_table_responsive tbody td::before { content: none !important; }
	.cart_totals,
	.woocommerce .cart_totals { padding: 1.2rem; }
}

/* Cart / checkout blocks (Gutenberg) — colour only, they bring their own
   layout and shouldn't be fought with. */
.wc-block-cart, .wc-block-checkout { color: var(--nc-text); }
.wc-block-cart .wc-block-components-product-name { color: var(--nc-heading); }
.wc-block-cart .wc-block-cart__totals-title { color: var(--nc-text-faint); }
.wc-block-components-totals-item__value { color: var(--nc-heading); }
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--nc-accent-grad) !important; color: #fff !important;
	border: 0 !important; border-radius: 100px; min-height: 54px;
	font-family: var(--nc-font-head); font-weight: 700;
}

/* Checkout ---------------------------------------------------------------- */
/* Strong, plugin-proof styling: page-builder checkout templates (Elementor /
   ShopBuilder etc.) ship light-mode CSS + floating labels that turn unreadable
   on a dark theme. Everything below is scoped to the checkout body class and
   deliberately assertive. */

/* Headings & generic text are always readable */
body.woocommerce-checkout .nc-site-main h1,
body.woocommerce-checkout .nc-site-main h2,
body.woocommerce-checkout .nc-site-main h3,
body.woocommerce-checkout .nc-site-main h4,
body.woocommerce-checkout .nc-site-main legend { color: var(--nc-heading) !important; }
body.woocommerce-checkout .nc-site-main p,
body.woocommerce-checkout .nc-site-main span:not(.select2-selection__rendered),
body.woocommerce-checkout .nc-site-main li { color: inherit; }
body.woocommerce-checkout .nc-site-main { color: var(--nc-text); }

/* Page-builder footer safety net -------------------------------------------
   A footer-builder plugin (Boostify HF / Elementor HF) can render its footer
   INSIDE the content scope (e.g. when it discards the theme's closing wrappers).
   The assertive !important colour overrides above/below would then repaint the
   footer's headings and text. Re-assert inheritance so the builder's own footer
   colours win. This matches ONLY the footer wrapper, so real cart / checkout /
   account content is untouched, and it is inert once the footer sits outside
   .nc-site-main as intended. */
body:is(.woocommerce-checkout, .woocommerce-cart, .woocommerce-account) .nc-site-main
	:is([class*="boostify"], .elementor-location-footer, .ehf-footer)
	:is(h1, h2, h3, h4, h5, h6, p, span, li) {
	color: inherit !important;
}

/* Kill floating/overlapping labels — labels always sit above their field */
body.woocommerce-checkout .nc-site-main .form-row label,
body.woocommerce-checkout .nc-site-main form label {
	position: static !important;
	transform: none !important;
	inset: auto !important;
	display: block;
	background: transparent !important;
	color: var(--nc-text-muted) !important;
	font-size: 0.88rem;
	margin: 0 0 0.35em;
	padding: 0 !important;
	line-height: 1.4;
	pointer-events: auto;
}
body.woocommerce-checkout .nc-site-main .form-row label .required { color: var(--nc-danger); }
body.woocommerce-checkout .nc-site-main .form-row.woocommerce-validated label,
body.woocommerce-checkout .nc-site-main .form-row.woocommerce-invalid label { top: auto !important; }
/* Checkbox rows keep the label inline */
body.woocommerce-checkout .nc-site-main .form-row label.checkbox,
body.woocommerce-checkout .nc-site-main label.woocommerce-form__label-for-checkbox {
	display: inline-flex !important; align-items: center; gap: 0.5em; margin: 0;
}

/* Fields: consistent dark inputs no matter what the builder ships */
body.woocommerce-checkout .nc-site-main input[type="text"],
body.woocommerce-checkout .nc-site-main input[type="email"],
body.woocommerce-checkout .nc-site-main input[type="tel"],
body.woocommerce-checkout .nc-site-main input[type="number"],
body.woocommerce-checkout .nc-site-main input[type="password"],
body.woocommerce-checkout .nc-site-main select,
body.woocommerce-checkout .nc-site-main textarea {
	background: var(--nc-surface) !important;
	border: 1px solid var(--nc-border) !important;
	color: var(--nc-text) !important;
	border-radius: var(--nc-radius-sm) !important;
	padding: 0.8em 1em !important;
	box-shadow: none;
	width: 100%;
}
body.woocommerce-checkout .nc-site-main input:focus,
body.woocommerce-checkout .nc-site-main select:focus,
body.woocommerce-checkout .nc-site-main textarea:focus { border-color: var(--nc-accent) !important; box-shadow: var(--nc-ring); }
body.woocommerce-checkout .nc-site-main ::placeholder { color: var(--nc-text-faint) !important; opacity: 1; }
body.woocommerce-checkout .nc-site-main .form-row { margin-bottom: 1rem; }

/* Order review / totals table readable on dark */
body.woocommerce-checkout .nc-site-main table,
body.woocommerce-checkout .nc-site-main table th,
body.woocommerce-checkout .nc-site-main table td { color: var(--nc-text) !important; background: transparent; border-color: var(--nc-border) !important; }
body.woocommerce-checkout .nc-site-main table .product-name,
body.woocommerce-checkout .nc-site-main table .product-name a { color: var(--nc-text) !important; }
body.woocommerce-checkout .nc-site-main table .amount,
body.woocommerce-checkout .nc-site-main table .woocommerce-Price-amount { color: var(--nc-heading) !important; font-weight: 600; }
body.woocommerce-checkout .nc-site-main .order-total .amount { color: var(--nc-accent-2) !important; font-size: 1.1em; }
body.woocommerce-checkout .nc-site-main table.shop_table { background: var(--nc-surface); }

/* Review column / payment area cards */
body.woocommerce-checkout .nc-site-main #order_review,
body.woocommerce-checkout .nc-site-main .woocommerce-checkout-review-order {
	background: var(--nc-surface); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius); padding: clamp(16px, 2.5vw, 28px);
}
body.woocommerce-checkout .nc-site-main #order_review table.shop_table { border: 0; background: transparent; }
body.woocommerce-checkout .nc-site-main #order_review table.shop_table th,
body.woocommerce-checkout .nc-site-main #order_review table.shop_table td { padding: 0.75rem 0.4rem; }

/* Payment methods */
body.woocommerce-checkout .nc-site-main #payment,
body.woocommerce-checkout .nc-site-main ul.wc_payment_methods { background: transparent !important; border: 0; }
body.woocommerce-checkout .nc-site-main ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
body.woocommerce-checkout .nc-site-main .wc_payment_method {
	background: var(--nc-surface-2); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm); padding: 0.85rem 1rem;
}
body.woocommerce-checkout .nc-site-main .wc_payment_method > label { display: inline-flex !important; align-items: center; gap: 0.6em; color: var(--nc-heading) !important; font-weight: 600; margin: 0; cursor: pointer; }
body.woocommerce-checkout .nc-site-main .wc_payment_method label img { max-height: 26px; width: auto; }
body.woocommerce-checkout .nc-site-main #payment div.payment_box,
body.woocommerce-checkout .nc-site-main .payment_box {
	background: var(--nc-elevated) !important; color: var(--nc-text-muted) !important;
	border-radius: var(--nc-radius-sm); margin-top: 0.7rem; padding: 0.9rem 1rem;
}
body.woocommerce-checkout .nc-site-main .payment_box p { color: var(--nc-text-muted) !important; margin: 0; }
body.woocommerce-checkout .nc-site-main #payment div.payment_box::before { display: none; }

/* Privacy / terms text visible */
body.woocommerce-checkout .nc-site-main .woocommerce-privacy-policy-text,
body.woocommerce-checkout .nc-site-main .woocommerce-privacy-policy-text p,
body.woocommerce-checkout .nc-site-main .woocommerce-terms-and-conditions-wrapper p { color: var(--nc-text-faint) !important; font-size: 0.85rem; }

/* Inline coupon row (cart-style) */
body.woocommerce-checkout .nc-site-main .coupon { display: flex; gap: 0.6rem; flex-wrap: wrap; border: 0; padding: 0; }
body.woocommerce-checkout .nc-site-main .coupon .input-text { flex: 1 1 200px; min-width: 0; }

/* Place order + notices */
body.woocommerce-checkout .nc-site-main #place_order { width: 100%; margin-top: 1rem; font-size: 1rem; }
body.woocommerce-checkout .nc-site-main .woocommerce-message,
body.woocommerce-checkout .nc-site-main .woocommerce-info { color: var(--nc-text) !important; }
body.woocommerce-checkout .nc-site-main .woocommerce-message a,
body.woocommerce-checkout .nc-site-main .woocommerce-info a { color: var(--nc-accent-2); }

/* Shipping methods list */
body.woocommerce-checkout .nc-site-main ul#shipping_method,
body.woocommerce-checkout .nc-site-main ul.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
body.woocommerce-checkout .nc-site-main ul.woocommerce-shipping-methods li {
	background: var(--nc-surface-2); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm); padding: 0.7rem 0.9rem;
	display: flex; align-items: center; gap: 0.6rem;
}
body.woocommerce-checkout .nc-site-main ul.woocommerce-shipping-methods li label { margin: 0; color: var(--nc-text) !important; }

/* Radio / checkbox accent */
body.woocommerce-checkout .nc-site-main input[type="radio"],
body.woocommerce-checkout .nc-site-main input[type="checkbox"] { accent-color: var(--nc-accent); width: 17px; height: 17px; }

/* Billing/shipping column wrappers never float side-by-side inside the form column */
body.woocommerce-checkout .nc-site-main #customer_details .col-1,
body.woocommerce-checkout .nc-site-main #customer_details .col-2 { width: 100% !important; float: none !important; padding: 0; }
body.woocommerce-checkout .nc-site-main #customer_details .col-2 { margin-top: 1.4rem; }

/* Section headings get a subtle underline for structure */
body.woocommerce-checkout .nc-site-main .woocommerce-billing-fields > h3,
body.woocommerce-checkout .nc-site-main .woocommerce-shipping-fields h3,
body.woocommerce-checkout .nc-site-main #order_review_heading,
body.woocommerce-checkout .nc-site-main .woocommerce-additional-fields > h3 {
	font-size: 1.15rem; padding-bottom: 0.7rem; margin-bottom: 1.1rem;
	border-bottom: 1px solid var(--nc-border);
}
body.woocommerce-checkout .nc-site-main #ship-to-different-address { font-size: 1rem; }
body.woocommerce-checkout .nc-site-main #ship-to-different-address label { color: var(--nc-heading) !important; font-weight: 600; cursor: pointer; }

/* "Have a coupon? Click here to enter your code" toggle */
body.woocommerce-checkout .nc-site-main .woocommerce-form-coupon-toggle .woocommerce-info { border-left-color: var(--nc-accent); }
body.woocommerce-checkout .nc-site-main .showcoupon { color: var(--nc-accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.woocommerce-checkout .nc-site-main .showcoupon:hover { color: var(--nc-accent-strong); }
/* Revealed coupon form — card with input + Apply side by side */
body.woocommerce-checkout .nc-site-main form.checkout_coupon {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.7rem; align-items: end;
	background: var(--nc-surface); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius); padding: 1.1rem 1.2rem; margin-bottom: 1.4rem;
}
body.woocommerce-checkout .nc-site-main form.checkout_coupon > p:first-child {
	grid-column: 1 / -1; margin: 0; color: var(--nc-text-muted); font-size: 0.9rem;
}
body.woocommerce-checkout .nc-site-main form.checkout_coupon .form-row {
	margin: 0 !important; padding: 0 !important; float: none; width: auto;
}
body.woocommerce-checkout .nc-site-main form.checkout_coupon .form-row-first { grid-column: 1; }
body.woocommerce-checkout .nc-site-main form.checkout_coupon .form-row-last { grid-column: 2; }
body.woocommerce-checkout .nc-site-main form.checkout_coupon label { display: none; }
body.woocommerce-checkout .nc-site-main form.checkout_coupon .input-text { width: 100%; height: 48px; margin: 0; }
body.woocommerce-checkout .nc-site-main form.checkout_coupon .button {
	height: 48px; min-width: 130px; white-space: nowrap;
	display: inline-flex; align-items: center; justify-content: center;
}
body.woocommerce-checkout .nc-site-main form.checkout_coupon .clear { display: none; }
@media (max-width: 480px) {
	body.woocommerce-checkout .nc-site-main form.checkout_coupon { grid-template-columns: 1fr; }
	body.woocommerce-checkout .nc-site-main form.checkout_coupon .form-row-last { grid-column: 1; }
	body.woocommerce-checkout .nc-site-main form.checkout_coupon .button { width: 100%; }
}

/* Validation states */
body.woocommerce-checkout .nc-site-main .form-row.woocommerce-invalid input,
body.woocommerce-checkout .nc-site-main .form-row.woocommerce-invalid select { border-color: var(--nc-danger) !important; }
body.woocommerce-checkout .nc-site-main .form-row.woocommerce-validated input,
body.woocommerce-checkout .nc-site-main .form-row.woocommerce-validated select { border-color: rgba(52, 211, 153, 0.55) !important; }

/* Payment method logos never overflow */
body.woocommerce-checkout .nc-site-main .wc_payment_method label img { max-width: 100%; height: auto; max-height: 26px; }

/* Checkout on small screens */
@media (max-width: 991px) {
	body.woocommerce-checkout .nc-site-main #order_review,
	body.woocommerce-checkout .nc-site-main #order_review_heading { margin-top: 1.6rem; }
}
@media (max-width: 560px) {
	body.woocommerce-checkout .nc-site-main #order_review,
	body.woocommerce-checkout .nc-site-main .woocommerce-checkout-review-order { padding: 14px; }
	body.woocommerce-checkout .nc-site-main table.shop_table { font-size: 0.9rem; }
	body.woocommerce-checkout .nc-site-main #order_review table.shop_table th,
	body.woocommerce-checkout .nc-site-main #order_review table.shop_table td { padding: 0.6rem 0.25rem; }
	body.woocommerce-checkout .nc-site-main table .product-name { max-width: 60vw; overflow-wrap: anywhere; }
	body.woocommerce-checkout .nc-site-main #place_order { position: sticky; bottom: 10px; z-index: 5; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); }
}

/* WooCommerce's AJAX loading overlay (blockUI) is white by default — blinding
   on a dark theme. Applies to checkout, cart and mini-cart updates. */
.woocommerce .blockUI.blockOverlay,
.woocommerce-page .blockUI.blockOverlay,
.blockUI.blockOverlay {
	background: rgba(11, 7, 16, 0.65) !important;
}

.woocommerce form .form-row label { color: var(--nc-text-muted); }
.woocommerce .col2-set, .woocommerce-page .col2-set { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; float: none; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce #order_review,
.woocommerce #order_review_heading { }
.woocommerce-checkout #payment { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--nc-border); }
.woocommerce-checkout #payment div.payment_box { background: var(--nc-surface-2); color: var(--nc-text-muted); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--nc-surface-2); }
.woocommerce #payment #place_order, .woocommerce-checkout #place_order { width: 100%; margin-top: 1rem; }
.select2-container--default .select2-selection--single { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius-sm); height: auto; padding: 0.5rem 0.6rem; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--nc-text); line-height: 1.5; }
.select2-dropdown { background: var(--nc-surface); border: 1px solid var(--nc-border); color: var(--nc-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--nc-accent); }

/* Two-column checkout on desktop. main.js finds the nearest common ancestor
   of #customer_details and #order_review (which may be separate page-builder
   widgets, not siblings of form.checkout) and tags it + the column wrappers
   with these classes — so billing sits left and the order summary right, on
   ANY checkout markup. */
@media (min-width: 992px) {
	.nc-checkout-cols {
		display: grid !important;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(24px, 3.5vw, 48px);
		row-gap: 1.1rem;
		align-items: start;
		float: none !important;
	}
	.nc-checkout-cols > .nc-checkout-col-main {
		grid-column: 1; grid-row: 1 / span 2;
		width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important;
	}
	.nc-checkout-cols > .nc-checkout-col-head {
		grid-column: 2; grid-row: 1;
		width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important;
	}
	.nc-checkout-cols > .nc-checkout-col-aside {
		grid-column: 2; grid-row: 2; align-self: start;
		width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important;
	}
	.nc-checkout-cols > .nc-checkout-col-aside--solo { grid-row: 1 / span 2; }
	.nc-checkout-cols > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 3; }
	body.woocommerce-checkout #customer_details { width: 100% !important; float: none !important; }
	body.woocommerce-checkout #order_review { width: 100% !important; float: none !important; }
	body.woocommerce-checkout #order_review_heading { margin-top: 0 !important; }
}

/* My account ----------------------------------------------------------------
   Pill-tab navigation + content card. Deliberately structure-agnostic (works
   whether nav/content are siblings or wrapped by a page builder) and
   assertive enough to override plugin account templates. */
.woocommerce-account .nc-site-main .woocommerce { display: block; }

body.woocommerce-account .nc-site-main .woocommerce-MyAccount-navigation {
	background: transparent !important; border: 0 !important;
	padding: 0 !important; margin: 0 0 1.5rem !important;
	width: 100% !important; float: none !important;
}
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0 !important; padding: 0 !important;
	display: flex; flex-wrap: wrap; gap: 0.45rem;
}
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-navigation ul li {
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	background: transparent !important; flex: 0 0 auto; width: auto !important;
}
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-navigation ul li a {
	display: inline-flex !important; align-items: center;
	padding: 0.58rem 1.15rem !important; border-radius: 100px !important;
	background: var(--nc-surface) !important; border: 1px solid var(--nc-border) !important;
	color: var(--nc-text-muted) !important;
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.9rem !important;
	white-space: nowrap; line-height: 1.2;
	transition: all var(--nc-transition);
}
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-navigation ul li a:hover {
	border-color: var(--nc-accent) !important; color: var(--nc-text) !important;
}
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--nc-accent) !important; border-color: var(--nc-accent) !important; color: #fff !important;
}

body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content {
	width: 100% !important; float: none !important;
	background: var(--nc-surface); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius); padding: clamp(20px, 3.5vw, 38px);
	color: var(--nc-text);
}
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content > *:last-child { margin-bottom: 0; }
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content > p { color: var(--nc-text-muted) !important; }
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content p,
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content li,
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content td,
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content address { color: var(--nc-text) !important; }
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content h2,
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content h3,
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content h4,
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content legend { color: var(--nc-heading) !important; }
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content a:not(.button) { color: var(--nc-accent-2); }
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content a:not(.button):hover { color: var(--nc-text); }
body.woocommerce-account .nc-site-main .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--nc-border); border-radius: var(--nc-radius-sm);
	padding: 1.1rem 1.2rem; margin: 0 0 1.2rem;
}

/* Address cards — two side-by-side cards on desktop, stacked on mobile */
body.woocommerce-account .woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.2rem;
	width: 100% !important;
	justify-items: stretch;
}
@media (min-width: 720px) {
	body.woocommerce-account .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after { display: none !important; content: none !important; }
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
body.woocommerce-account .woocommerce-Addresses .u-column1,
body.woocommerce-account .woocommerce-Addresses .u-column2 {
	width: 100% !important; max-width: 100% !important;
	float: none !important; margin: 0 !important;
}
body.woocommerce-account .woocommerce-Addresses { margin-top: 1.4rem; }
/* Assertive: page-builder account widgets (ShopBuilder/Elementor) strip the
   scoped padding, so force it on the address card wherever it renders. */
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .u-column1.woocommerce-Address,
body.woocommerce-account .u-column2.woocommerce-Address {
	background: var(--nc-surface-2) !important;
	border: 1px solid var(--nc-border) !important;
	border-radius: var(--nc-radius-sm) !important;
	padding: clamp(20px, 2.5vw, 28px) !important;
	display: flex !important; flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}
body.woocommerce-account .woocommerce-Address header,
body.woocommerce-account .woocommerce-Address-title {
	display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
	margin: 0 0 1rem !important; padding: 0 0 0.9rem !important;
	border-bottom: 1px solid var(--nc-border);
	width: 100%;
}
body.woocommerce-account .woocommerce-Address-title h3 { font-size: 1.05rem; margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.woocommerce-account .woocommerce-Address-title .edit {
	font-size: 0.82rem; font-weight: 600; font-family: var(--nc-font-head);
	color: var(--nc-accent-2); white-space: nowrap;
}
body.woocommerce-account .woocommerce-Address-title .edit:hover { color: var(--nc-text); }
body.woocommerce-account .woocommerce-Address address {
	font-style: normal; color: var(--nc-text-muted) !important; line-height: 1.9;
	border: 0 !important; padding: 0 !important; margin: 0 !important;
	background: transparent !important;
	font-size: 0.95rem;
}

/* Forms on account pages (login / register / edit account / addresses):
   static labels + dark fields, whatever a plugin ships. */
body.woocommerce-account .nc-site-main form label {
	position: static !important; transform: none !important; inset: auto !important;
	display: block; background: transparent !important;
	color: var(--nc-text-muted) !important; font-size: 0.88rem;
	margin: 0 0 0.35em; padding: 0 !important; line-height: 1.4;
}
body.woocommerce-account .nc-site-main form label.woocommerce-form__label-for-checkbox,
body.woocommerce-account .nc-site-main form label.checkbox { display: inline-flex !important; align-items: center; gap: 0.5em; margin: 0; }
body.woocommerce-account .nc-site-main input[type="text"],
body.woocommerce-account .nc-site-main input[type="email"],
body.woocommerce-account .nc-site-main input[type="tel"],
body.woocommerce-account .nc-site-main input[type="password"],
body.woocommerce-account .nc-site-main select,
body.woocommerce-account .nc-site-main textarea {
	background: var(--nc-surface-2) !important;
	border: 1px solid var(--nc-border) !important;
	color: var(--nc-text) !important;
	border-radius: var(--nc-radius-sm) !important;
	padding: 0.8em 1em !important;
	width: 100%;
}
body.woocommerce-account .nc-site-main input:focus,
body.woocommerce-account .nc-site-main select:focus,
body.woocommerce-account .nc-site-main textarea:focus { border-color: var(--nc-accent) !important; box-shadow: var(--nc-ring); }
body.woocommerce-account .nc-site-main .form-row { margin-bottom: 1rem; float: none; width: 100%; }
body.woocommerce-account .nc-site-main .show-password-input { top: 50%; transform: translateY(-50%); }
body.woocommerce-account .nc-site-main input[type="radio"],
body.woocommerce-account .nc-site-main input[type="checkbox"] { accent-color: var(--nc-accent); width: 17px; height: 17px; }

/* Login / register: centered card(s), side by side when both exist.
   Assertive + structure-agnostic: builder templates wrap or float these,
   so every rule pins width/float explicitly. */
body.woocommerce-account .col2-set,
body.woocommerce-account #customer_login {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	width: 100% !important; max-width: 100%;
	float: none !important;
	justify-items: center;
	align-items: start;
}
/* WooCommerce's clearfix pseudo-elements become EMPTY GRID CELLS inside the
   grid (same bug as the product grid) and shove the login/register sections
   out of place — remove them. */
body.woocommerce-account .col2-set::before,
body.woocommerce-account .col2-set::after,
body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after,
body.woocommerce-checkout .col2-set::before,
body.woocommerce-checkout .col2-set::after {
	display: none !important;
	content: none !important;
}
body.woocommerce-account .col2-set .col-1,
body.woocommerce-account .col2-set .col-2,
body.woocommerce-account .col2-set .u-column1,
body.woocommerce-account .col2-set .u-column2 {
	width: 100% !important; max-width: 560px !important;
	float: none !important; padding: 0 !important; margin: 0 !important;
	flex: none;
}
@media (min-width: 900px) {
	body.woocommerce-account #customer_login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
.woocommerce-form-login, .woocommerce-form-register {
	background: var(--nc-surface); border: 1px solid var(--nc-border) !important;
	border-radius: var(--nc-radius); padding: clamp(20px, 3vw, 32px) !important;
	width: 100% !important; max-width: 100%; margin: 0 !important;
	display: block;
}
body.woocommerce-account .woocommerce-form-login h2,
body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 { font-size: 1.35rem; margin-bottom: 1.1rem; }
.woocommerce-form-login .woocommerce-form-login__rememberme { display: block; margin-bottom: 0.9rem; }
.woocommerce-form-login .button, .woocommerce-form-register .button { width: 100% !important; margin-top: 0.4rem; float: none !important; }
.woocommerce-LostPassword { margin: 0.8rem 0 0; text-align: center; }
body.woocommerce-account .woocommerce-form-login input,
body.woocommerce-account .woocommerce-form-register input:not([type="checkbox"]) { width: 100% !important; }
/* Password reveal toggle aligned inside the field */
body.woocommerce-account .password-input,
body.woocommerce-checkout .password-input { position: relative; display: block; width: 100%; }
body.woocommerce-account .show-password-input,
body.woocommerce-checkout .show-password-input { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); margin: 0; }

/* Orders / downloads tables stack into rows on small screens */
@media (max-width: 720px) {
	body.woocommerce-account .nc-site-main table.shop_table,
	body.woocommerce-account .nc-site-main table.shop_table tbody { display: block; width: 100%; border: 0; background: transparent; }
	body.woocommerce-account .nc-site-main table.shop_table thead { display: none; }
	body.woocommerce-account .nc-site-main table.shop_table tr {
		display: block; background: var(--nc-surface-2);
		border: 1px solid var(--nc-border); border-radius: var(--nc-radius-sm);
		padding: 0.5rem 0.9rem; margin-bottom: 0.8rem;
	}
	body.woocommerce-account .nc-site-main table.shop_table td {
		display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
		border: 0; border-top: 1px solid var(--nc-border-soft); padding: 0.55rem 0;
		text-align: right;
	}
	body.woocommerce-account .nc-site-main table.shop_table td:first-child { border-top: 0; }
	body.woocommerce-account .nc-site-main table.shop_table td::before {
		content: attr(data-title);
		color: var(--nc-text-faint); font-size: 0.82rem; text-align: left; flex-shrink: 0;
	}
	body.woocommerce-account .nc-site-main table.shop_table td .button { width: auto; }
}

/* Shop sidebar widgets (Woo) ---------------------------------------------- */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--nc-surface-2); border-radius: 100px; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--nc-accent); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: #fff; border: 2px solid var(--nc-accent); border-radius: 50%; }
.woocommerce .widget_price_filter .price_slider_amount .button { font-size: 0.8rem; }
.woocommerce-widget-layered-nav-list { list-style: none; padding: 0; }
.woocommerce mark { background: var(--nc-accent-soft); color: var(--nc-accent-2); }

/* Buttons alignment for account/added state */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button { border-radius: 100px; }
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--nc-accent); }
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--nc-accent-strong); }

/* Store notice / mini elements */
.woocommerce-store-notice, p.demo_store { background: var(--nc-accent); color: #fff; }

/* Column count from Customizer (desktop only — responsive rules below collapse it) */
@media (min-width: 1101px) {
	.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Responsive product grid ------------------------------------------------- */
@media (max-width: 1100px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); }
}
/* With the filter column open on desktop there's less room — drop a column. */
@media (min-width: 1101px) {
	body.nc-filters-open .woocommerce ul.products.columns-4,
	body.nc-filters-open .woocommerce ul.products.columns-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
	/* minmax(0, 1fr) — NOT 1fr — so the single column can shrink below the
	   min-content of its widest child (gallery / related grid) instead of
	   forcing horizontal page overflow. */
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	/* Stacked: clear the explicit rows/columns or `grid-column: 2` would create
	   a phantom second column and the two-row span would strand the tabs. */
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .entry-summary,
	.woocommerce div.product .summary,
	.woocommerce div.product .woocommerce-tabs { grid-column: auto; grid-row: auto; }
	/* Stacked layout — centre the media column. Both selectors are repeated (and
	   flagged !important) because the base rule pins it through
	   `div.images.woocommerce-product-gallery`, which outranks a shorter one. */
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product div.images.woocommerce-product-gallery {
		max-width: 560px !important;
		margin: 0 auto !important;
	}
	.woocommerce div.product .woocommerce-tabs { border-top: 0; padding-top: 0; }
	.woocommerce div.product .product_title { font-size: 1.55rem; }
	.woocommerce div.product p.price,
	.woocommerce div.product span.price { font-size: 1.5rem !important; }
	.woocommerce div.product form.cart .single_add_to_cart_button,
	.nc-buy-now-single { flex: 1 1 100%; min-width: 0; }
	.woocommerce div.product form.cart { gap: 0.6rem; }
	.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 1rem; padding-bottom: 0; }
	.woocommerce div.product .woocommerce-tabs .panel { padding: 18px 16px; }
	.nc-single-assurances { gap: 0.55rem; font-size: 0.88rem; }
}
@media (max-width: 560px) {
	.woocommerce div.product .woocommerce-product-gallery { padding: 8px; border-radius: var(--nc-radius); }
	.woocommerce div.product .product_title { font-size: 1.35rem; }
	.woocommerce div.product form.cart .quantity { width: 100%; justify-content: space-between; }
	.woocommerce div.product .quantity input.qty { flex: 1; }
	.woocommerce div.product .product_meta { font-size: 0.8rem; }
	.woocommerce #reviews #comments ol.commentlist li img.avatar { flex-basis: 34px; width: 34px; height: 34px; }
	/* Rating row + swatches scale down */
	.nc-single-rating { gap: 0.4rem; }
	.nc-single-rating__link { font-size: 0.82rem; }
	.nc-swatch { padding: 0.45em 0.9em; font-size: 0.84rem; }
	.nc-swatch--color { width: 32px; height: 32px; }
	.nc-swatch--color .nc-swatch__dot { width: 23px; height: 23px; }
	.woocommerce div.product .woocommerce-tabs table.shop_attributes th { width: 40%; padding: 0.6rem 0.7rem; font-size: 0.82rem; }
	.woocommerce div.product .woocommerce-tabs table.shop_attributes td { padding: 0.6rem 0.7rem; font-size: 0.85rem; }
}
/* Tabs: horizontal scroll instead of wrapping on narrow screens */
@media (max-width: 720px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto; overscroll-behavior-x: contain;
		gap: 0.1rem;
		scrollbar-width: none;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; height: 0; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0.6em 0.85em; font-size: 0.86rem; white-space: nowrap; }
}
@media (max-width: 720px) {
	.woocommerce ul.products:not(.nc-view-list), ul.products:not(.nc-view-list) { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.nc-product__body { padding: 0.75rem 0.85rem 0.85rem; }
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart { font-size: 0.82rem; padding: 0.68em 0.9em; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0.6em 1em; font-size: 0.9rem; }
	.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 { font-size: 1.3rem; }
}
@media (max-width: 420px) {
	.woocommerce ul.products, ul.products { grid-template-columns: 1fr 1fr; gap: 10px; }
	.nc-product__body { padding: 0.8rem; gap: 0.3rem; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.92rem !important; }
	.nc-product__cat { font-size: 0.66rem; }
}

/* Cart slider (mini-cart) contents --------------------------------------- */
.nc-minicart .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.nc-minicart .nc-minicart-item,
.nc-minicart .woocommerce-mini-cart-item {
	position: relative;
	display: flex; align-items: flex-start; gap: 0.85rem;
	padding: 0.95rem 0; margin: 0;
	border-bottom: 1px solid var(--nc-border-soft);
}
.nc-minicart-item__thumb {
	flex: 0 0 64px; width: 64px;
	border-radius: var(--nc-radius-sm); overflow: hidden;
	border: 1px solid var(--nc-border); background: var(--nc-surface-2);
	display: block;
}
.nc-minicart-item__thumb img {
	width: 100% !important; height: 76px !important; object-fit: cover;
	display: block; float: none !important; margin: 0 !important; border-radius: 0;
}
.nc-minicart-item__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; padding-right: 1.6rem; }
.nc-minicart-item__name {
	color: var(--nc-text); font-weight: 500; font-family: var(--nc-font-head);
	font-size: 0.94rem; line-height: 1.35;
	overflow: hidden; text-overflow: ellipsis;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
a.nc-minicart-item__name:hover { color: var(--nc-accent-2); }
.nc-minicart-item__info dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 0 0.4rem; margin: 0; font-size: 0.78rem; color: var(--nc-text-faint); }
.nc-minicart-item__info dl.variation dt, .nc-minicart-item__info dl.variation dd { margin: 0; }
.nc-minicart-item__info dl.variation dd p { margin: 0; }
.nc-minicart-item__qty { color: var(--nc-text-muted); font-size: 0.88rem; }
.nc-minicart-item__qty .amount { color: var(--nc-heading); font-weight: 600; }
.nc-minicart .nc-minicart-item a.remove,
.nc-minicart .woocommerce-mini-cart-item a.remove {
	position: absolute; top: 0.95rem; right: 0;
	width: 26px; height: 26px; line-height: 24px; font-size: 16px; text-align: center;
	color: var(--nc-text-faint) !important; border: 1px solid var(--nc-border); border-radius: 50%; background: var(--nc-surface);
	flex: 0 0 auto;
}

/* Fallback for the STANDARD Woo/plugin mini-cart item markup (remove link,
   product link with image+name, quantity span as direct children) — keeps
   image size, name, and "qty × price" tidy even when our template isn't used. */
.nc-minicart .woocommerce-mini-cart-item { flex-wrap: wrap; }
.nc-minicart .woocommerce-mini-cart-item > a:not(.remove):not(.nc-minicart-item__thumb) {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: center; gap: 0.85rem;
	padding-right: 1.9rem;
	color: var(--nc-text); font-family: var(--nc-font-head); font-weight: 500;
	font-size: 0.94rem; line-height: 1.35;
}
.nc-minicart .woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--nc-accent-2); }
.nc-minicart .woocommerce-mini-cart-item img {
	width: 64px !important; height: 76px !important; max-width: 64px;
	object-fit: cover; flex-shrink: 0;
	border-radius: var(--nc-radius-sm); border: 1px solid var(--nc-border);
	background: var(--nc-surface-2);
	float: none !important; margin: 0 !important; display: block;
}
.nc-minicart .woocommerce-mini-cart-item > .quantity {
	flex: 0 0 100%;
	padding-left: calc(64px + 0.85rem);
	margin-top: 0.3rem;
	color: var(--nc-text-muted); font-size: 0.88rem;
	background: transparent; border: 0; border-radius: 0; display: block;
}
.nc-minicart .woocommerce-mini-cart-item .quantity .amount { color: var(--nc-heading); font-weight: 600; }
.nc-minicart .woocommerce-mini-cart-item > dl.variation {
	flex: 0 0 100%; padding-left: calc(64px + 0.85rem); margin: 0.15rem 0 0;
	display: grid; grid-template-columns: auto 1fr; gap: 0 0.4rem;
	font-size: 0.78rem; color: var(--nc-text-faint);
}
.nc-minicart .nc-minicart-item a.remove:hover,
.nc-minicart .woocommerce-mini-cart-item a.remove:hover { background: var(--nc-danger) !important; color: #fff !important; border-color: transparent; }
/* Head count pill (updated live via cart fragments) */
.nc-minicart__head .nc-cart-count {
	position: static; margin-left: 0.35rem;
	min-width: 22px; height: 22px; font-size: 0.72rem;
	border: 0; background: var(--nc-accent);
}

/* Row hover */
.nc-minicart .nc-minicart-item { transition: background var(--nc-transition); border-radius: var(--nc-radius-sm); }
.nc-minicart .nc-minicart-item:hover { background: var(--nc-surface-2); }

/* Free-shipping progress */
.nc-minicart__shipbar {
	margin-top: 1.1rem; padding: 0.9rem 1rem;
	background: var(--nc-surface-2); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm);
}
.nc-minicart__shipbar-text {
	display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.65rem;
	font-size: 0.85rem; color: var(--nc-text-muted);
}
.nc-minicart__shipbar-text svg { color: var(--nc-accent-2); flex-shrink: 0; }
.nc-minicart__shipbar-text strong { color: var(--nc-heading); }
.nc-minicart__shipbar-text .amount { color: var(--nc-accent-2); font-weight: 700; }
.nc-minicart__shipbar-track { height: 6px; border-radius: 100px; background: var(--nc-bg-alt); overflow: hidden; }
.nc-minicart__shipbar-fill {
	display: block; height: 100%; border-radius: 100px;
	background: var(--nc-accent-grad);
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.nc-minicart__shipbar.is-unlocked { border-color: rgba(52, 211, 153, 0.4); }
.nc-minicart__shipbar.is-unlocked .nc-minicart__shipbar-text svg { color: var(--nc-success); }
.nc-minicart__shipbar.is-unlocked .nc-minicart__shipbar-fill { background: var(--nc-success); }

/* Trust line under buttons */
.nc-minicart__trust {
	display: flex; align-items: center; justify-content: center; gap: 0.45rem;
	margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--nc-text-faint);
}
.nc-minicart__trust svg { color: var(--nc-success); }

.nc-minicart .woocommerce-mini-cart__total {
	display: flex; align-items: baseline; justify-content: space-between;
	margin: 1.1rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--nc-border);
	font-family: var(--nc-font-head); font-size: 1.05rem; color: var(--nc-heading);
}
.nc-minicart .woocommerce-mini-cart__total .amount { color: var(--nc-accent-2); font-size: 1.2rem; }
.nc-minicart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.nc-minicart .woocommerce-mini-cart__buttons .button { width: 100%; border-radius: 100px; }
.nc-minicart .woocommerce-mini-cart__buttons .button:not(.checkout) { background: var(--nc-surface-2); color: var(--nc-text); border: 1px solid var(--nc-border); }
.nc-minicart .woocommerce-mini-cart__buttons .button:not(.checkout):hover { background: var(--nc-elevated); }
.nc-minicart .woocommerce-mini-cart__buttons .checkout { background: var(--nc-accent-grad); color: #fff; }
.nc-minicart p.woocommerce-mini-cart__empty-message,
.nc-minicart .cart-empty { color: var(--nc-text-muted); text-align: center; padding: 2rem 0; }

/* Load on scroll ------------------------------------------------------------
   The sentinel is a real "Load more" button: auto-triggers near the viewport
   and stays tappable on any device. */
.nc-pagination-hidden { display: none !important; }
.nc-infinite {
	display: flex; align-items: center; justify-content: center; gap: 0.6rem;
	margin: 1.8rem auto 0.4rem; padding: 0.85em 2em;
	width: auto; min-height: 46px;
	background: var(--nc-surface);
	border: 1px solid var(--nc-border);
	border-radius: 100px;
	color: var(--nc-text-muted);
	font-family: var(--nc-font-head); font-weight: 600; font-size: 0.9rem;
	cursor: pointer;
	transition: border-color var(--nc-transition), color var(--nc-transition);
}
.nc-infinite::before { display: none; }
.nc-infinite:hover { border-color: var(--nc-accent); color: var(--nc-accent-2); background: var(--nc-surface); box-shadow: none; transform: none; filter: none; }
.nc-infinite .nc-wishlist__spinner { display: none; width: 16px; height: 16px; border-width: 2px; }
.nc-infinite.is-loading { pointer-events: none; }
.nc-infinite.is-loading .nc-wishlist__spinner { display: inline-block; }
.nc-infinite.is-done { display: none; }

/* Shop toolbar: [Filters] [result count] [sorting] [grid|list] ------------ */
.nc-shop-toolbar { display: flex; align-items: center; gap: 0.8rem 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.nc-shop-toolbar .nc-filters-toggle { order: 1; }
.nc-shop-toolbar .woocommerce-result-count { margin: 0; order: 2; }
.nc-shop-toolbar .woocommerce-ordering { margin: 0 0 0 auto; order: 3; }
.nc-shop-toolbar .nc-view-toggle { order: 4; }
.nc-filters-toggle { display: inline-flex; }
.nc-filters-toggle[aria-expanded="true"] { background: var(--nc-accent); color: #fff; }

/* Grid / list switch */
.nc-view-toggle { display: inline-flex; border: 1px solid var(--nc-border); border-radius: 100px; padding: 3px; gap: 2px; background: var(--nc-surface); }
.nc-view-btn {
	width: 36px; height: 34px; padding: 0; border-radius: 100px;
	display: grid; place-items: center;
	background: transparent; border: 0; color: var(--nc-text-faint); cursor: pointer;
}
.nc-view-btn::before { display: none; }
.nc-view-btn:hover { background: var(--nc-surface-2); color: var(--nc-text); box-shadow: none; transform: none; filter: none; }
.nc-view-btn.is-active { background: var(--nc-accent); color: #fff; }

/* List view — image left, details right (title, price, then Add to cart) */
.woocommerce ul.products.nc-view-list,
ul.products.nc-view-list { grid-template-columns: 1fr !important; gap: 14px; }
.woocommerce ul.products.nc-view-list li.product,
ul.products.nc-view-list li.product { flex-direction: row; align-items: stretch; }
ul.products.nc-view-list li.product .nc-product__media-wrap { flex: 0 0 200px; align-self: stretch; }
ul.products.nc-view-list li.product .nc-product__media { height: 100%; aspect-ratio: auto; min-height: 200px; }
ul.products.nc-view-list li.product .nc-product__body { padding: 1.15rem 1.4rem; justify-content: center; gap: 0.35rem; }
ul.products.nc-view-list li.product .woocommerce-loop-product__title { font-size: 1.1rem !important; -webkit-line-clamp: 3; }
ul.products.nc-view-list li.product .price { font-size: 1.2rem !important; }
ul.products.nc-view-list li.product .nc-product__foot { margin-top: 0.4rem; }
/* Add to cart doesn't need to span the whole wide row — cap its width */
ul.products.nc-view-list li.product .nc-product__actions { margin-top: 0.9rem; max-width: 260px; }
@media (max-width: 560px) {
	ul.products.nc-view-list li.product .nc-product__media-wrap { flex: 0 0 116px; }
	ul.products.nc-view-list li.product .nc-product__media { min-height: 116px; }
	ul.products.nc-view-list li.product .nc-product__body { padding: 0.85rem 0.95rem; gap: 0.25rem; }
	ul.products.nc-view-list li.product .woocommerce-loop-product__title { font-size: 0.95rem !important; -webkit-line-clamp: 2; }
	ul.products.nc-view-list li.product .price { font-size: 1.02rem !important; }
	ul.products.nc-view-list li.product .nc-product__actions { max-width: none; margin-top: 0.6rem; }
}

/* Shop filters panel ------------------------------------------------------ */
.nc-shop-sidebar__head { display: none; }
.nc-shop-sidebar .nc-icon-btn { color: var(--nc-text-muted); }
.nc-shop-sidebar .nc-icon-btn:hover { background: var(--nc-surface-2); color: var(--nc-text); }

/* Compact, flat filter — sections divided by hairlines (no boxy cards) */
.nc-filters { display: flex; flex-direction: column; gap: 0; }
.nc-filter-group {
	background: transparent; border: 0;
	border-bottom: 1px solid var(--nc-border-soft);
	border-radius: 0; padding: 0.85rem 0;
}
.nc-filter-group:first-child { padding-top: 0; }
.nc-filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.nc-filter-group__title {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--nc-heading); margin: 0 0 0.7rem;
}
/* Collapsible group head — full-width, comfortable tap target */
.nc-filter-group__head {
	display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
	width: 100%; padding: 0; margin: 0; border: 0; border-radius: 0;
	background: transparent; cursor: pointer;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--nc-heading); font-family: var(--nc-font-head);
}
.nc-filter-group__head::before { display: none; }
.nc-filter-group__head:hover { background: transparent; color: var(--nc-accent-2); transform: none; box-shadow: none; filter: none; }
.nc-filter-group__head:hover svg { color: var(--nc-accent-2); }
.nc-filter-group__head svg {
	width: 15px; height: 15px;
	transition: transform var(--nc-transition), color var(--nc-transition);
	color: var(--nc-text-muted); flex-shrink: 0;
}
.nc-filter-group.is-collapsed .nc-filter-group__head svg { transform: rotate(-90deg); }
/* Smooth open/close */
.nc-filter-group__content {
	display: grid; grid-template-rows: 1fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nc-filter-group__inner { min-height: 0; overflow: hidden; padding-top: 0.7rem; }
.nc-filter-group--static .nc-filter-group__inner { padding-top: 0; }
.nc-filter-group.is-collapsed .nc-filter-group__content { grid-template-rows: 0fr; }
.nc-filter-group.is-collapsed .nc-filter-group__inner { padding-top: 0; }

/* Active filter chips */
.nc-filter-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.nc-filter-chip {
	display: inline-flex; align-items: center; gap: 0.45em;
	padding: 0.35em 0.85em; border-radius: 100px;
	background: var(--nc-accent-soft); color: var(--nc-accent-2);
	font-size: 0.8rem; font-weight: 600; font-family: var(--nc-font-head);
	border: 1px solid transparent;
}
.nc-filter-chip b { font-weight: 700; }
.nc-filter-chip:hover { background: var(--nc-accent); color: #fff; }
.nc-filter-chip--clear { background: transparent; border-color: var(--nc-border); color: var(--nc-text-muted); }
.nc-filter-chip--clear:hover { border-color: var(--nc-danger); background: transparent; color: var(--nc-danger); }

/* Filter search — pill with the magnifier inside, matching the header search */
.nc-filter-search { position: relative; }
.nc-filter-search .nc-search-input,
.nc-filter-search input[type="search"] {
	width: 100%; height: 40px;
	background: var(--nc-surface-2); border: 1px solid var(--nc-border); color: var(--nc-text);
	border-radius: 100px; padding: 0 2.8em 0 1rem; font-size: 0.86rem;
}
.nc-filter-search input[type="search"]::placeholder { color: var(--nc-text-faint); }
.nc-filter-search input[type="search"]:focus { border-color: var(--nc-accent); box-shadow: 0 0 0 3px var(--nc-accent-soft); outline: none; }
.nc-filter-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.nc-filter-search .nc-search-icon-btn {
	position: absolute; right: 4px; top: 50%; margin-top: -15px;
	width: 30px; height: 30px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; border-radius: 50%;
	color: var(--nc-text-muted); cursor: pointer;
}
.nc-filter-search .nc-search-icon-btn::before { display: none; }
.nc-filter-search .nc-search-icon-btn:hover,
.nc-filter-search .nc-search-icon-btn:active { color: #fff; background: var(--nc-accent); }
.nc-filter-search .nc-search-icon-btn svg { width: 16px; height: 16px; }

/* Price slider (dual range + editable min/max fields) — clean & reliable */
.nc-price-slider { position: relative; }
.nc-price-slider__rail { position: relative; height: 22px; display: flex; align-items: center; }
.nc-price-slider__track { position: relative; height: 6px; width: 100%; border-radius: 100px; background: var(--nc-surface-2); border: 1px solid var(--nc-border-soft); }
.nc-price-slider__fill { position: absolute; top: -1px; bottom: -1px; left: 0; right: 0; border-radius: 100px; background: var(--nc-accent-grad); }
.nc-price-slider input[type="range"] {
	position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0; padding: 0;
	-webkit-appearance: none; appearance: none; background: transparent !important; border: 0 !important;
	pointer-events: none; box-shadow: none;
}
.nc-price-slider input[type="range"]:focus { box-shadow: none; border: 0; outline: none; }
/* Both engines get the same 20px thumb (Firefox's was 14px and sat off the
   fill), and a soft shadow rather than the dark-theme one that muddied a white
   handle on this light panel. */
.nc-price-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	box-sizing: border-box;
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; border: 5px solid var(--nc-accent);
	cursor: grab; pointer-events: auto;
	box-shadow: 0 2px 6px rgba(30, 10, 40, 0.22);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	margin-top: 0;
}
.nc-price-slider input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px var(--nc-accent-soft), 0 2px 6px rgba(30, 10, 40, 0.22); }
.nc-price-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; box-shadow: 0 0 0 8px var(--nc-accent-soft), 0 2px 6px rgba(30, 10, 40, 0.22); }
.nc-price-slider input[type="range"]::-moz-range-thumb {
	box-sizing: border-box;
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; border: 5px solid var(--nc-accent);
	cursor: grab; pointer-events: auto;
	box-shadow: 0 2px 6px rgba(30, 10, 40, 0.22);
}
.nc-price-slider input[type="range"]::-moz-range-thumb:active { box-shadow: 0 0 0 8px var(--nc-accent-soft), 0 2px 6px rgba(30, 10, 40, 0.22); }
.nc-price-slider input[type="range"]::-moz-range-track { background: transparent; }
/* Keyboard users get a visible handle too — the input itself has no outline. */
.nc-price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nc-accent-soft), 0 0 0 6px var(--nc-accent); }
.nc-price-slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nc-accent-soft), 0 0 0 6px var(--nc-accent); }
/* Min / max entry fields */
.nc-price-slider__inputs { display: flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem; }
.nc-price-slider__field {
	display: flex; align-items: center; flex: 1 1 0; min-width: 0; margin: 0; gap: 0.15em;
	background: var(--nc-surface-2); border: 1px solid var(--nc-border);
	border-radius: var(--nc-radius-sm); padding: 0.5em 0.7em;
	transition: border-color var(--nc-transition), box-shadow var(--nc-transition);
}
.nc-price-slider__field:focus-within { border-color: var(--nc-accent); box-shadow: 0 0 0 3px var(--nc-accent-soft); }
.nc-price-slider__cur { color: var(--nc-text-faint); font-size: 0.9rem; font-weight: 700; flex-shrink: 0; }
.nc-price-slider__field input {
	width: 100%; min-width: 0; border: 0 !important; background: transparent !important;
	padding: 0 !important; font-size: 0.95rem; font-weight: 700;
	color: var(--nc-heading) !important; box-shadow: none !important;
	text-align: left;
	/* Tabular figures so the two boxes stay optically aligned as digits change. */
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield; appearance: textfield;
}
.nc-price-slider__field input:focus { outline: none; }
.nc-price-slider__field input::-webkit-outer-spin-button,
.nc-price-slider__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nc-price-slider__sep { width: 12px; height: 2px; border-radius: 2px; background: var(--nc-border); flex-shrink: 0; }

/* Category / brand lists — capped with "+ N more" */
.nc-filter-list, .nc-filter-sublist { list-style: none; margin: 0; padding: 0; }
.nc-filter-list > li { margin: 0; }
.nc-filter-list .nc-filter-more-item { display: none; }
.nc-filter-list.is-expanded .nc-filter-more-item { display: block; }
.nc-filter-list.is-expanded { max-height: min(360px, 50vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: none; }
.nc-filter-list.is-expanded::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* In the mobile filter drawer, don't nest a scroll inside a scroll — show every
   brand/category and let the drawer itself scroll, so all terms are reachable. */
@media (max-width: 991px) {
	.nc-filter-list.is-expanded { max-height: none; overflow: visible; }
}
.nc-filter-link {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
	padding: 0.36rem 0.5rem; border-radius: 8px;
	color: var(--nc-text-muted); font-size: 0.86rem;
	transition: color var(--nc-transition), background var(--nc-transition);
}
.nc-filter-link:hover { color: var(--nc-accent-2); background: var(--nc-surface-2); }
/* The label nudges right on hover — via transform, not padding. This panel can
   hold 20+ rows and animating padding relayouts the whole list on every hover. */
.nc-filter-link > span:first-child { transition: transform var(--nc-transition); }
.nc-filter-link:hover > span:first-child,
.nc-filter-link.is-active > span:first-child { transform: translateX(4px); }

/* The category you're browsing — a filled chip, not a tint, so it's obvious at
   a glance which slice of the catalogue the counts belong to. */
.nc-filter-link.is-active {
	color: #fff; font-weight: 600;
	background: var(--nc-accent);
}
.nc-filter-link.is-active:hover { color: #fff; background: var(--nc-accent); }
.nc-filter-link.is-active .nc-filter-count {
	background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.34); color: #fff;
}
.nc-filter-link.is-active:hover .nc-filter-count { border-color: rgba(255, 255, 255, 0.34); color: #fff; }
/* Ancestor of the active category — part of the path, but not the destination. */
.nc-filter-link.is-branch { color: var(--nc-heading); font-weight: 600; }
/* Nothing left here once the other active filters are applied. */
.nc-filter-link.is-empty:not(.is-active),
.nc-filter-check.is-empty { opacity: 0.42; }

.nc-filter-sublist { padding-left: 0.7rem; border-left: 1px solid var(--nc-border-soft); margin: 0.15rem 0 0.35rem 0.6rem; }
.nc-filter-count {
	font-size: 0.72rem; color: var(--nc-text-faint);
	background: var(--nc-surface-2); border: 1px solid var(--nc-border-soft);
	padding: 0.15em 0.55em; border-radius: 100px;
	font-family: var(--nc-font-head); font-weight: 600; line-height: 1.4;
	flex-shrink: 0;
	transition: color var(--nc-transition), border-color var(--nc-transition), background var(--nc-transition);
}
.nc-filter-link:hover .nc-filter-count,
.nc-filter-check:hover .nc-filter-count { border-color: var(--nc-accent); color: var(--nc-accent-2); }
.nc-filter-check.is-active .nc-filter-check__label { color: var(--nc-heading); font-weight: 600; }
.nc-filter-more {
	background: transparent; border: 0; padding: 0.45rem 0.15rem 0; margin: 0;
	color: var(--nc-accent-2); font-size: 0.85rem; font-weight: 600; font-family: var(--nc-font-head);
	cursor: pointer; border-radius: 0;
}
.nc-filter-more::before { display: none; }
.nc-filter-more:hover { color: var(--nc-text); background: transparent; box-shadow: none; transform: none; filter: none; }

/* Brand checkboxes */
.nc-filter-check { display: flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0.1rem; cursor: pointer; margin: 0; font-size: 0.86rem; color: var(--nc-text-muted); }
.nc-filter-check:hover { color: var(--nc-text); }
.nc-filter-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.nc-filter-check__box {
	width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px;
	border: 1.5px solid var(--nc-border); background: var(--nc-surface-2);
	display: grid; place-items: center; transition: all var(--nc-transition);
}
.nc-filter-check input:checked + .nc-filter-check__box { background: var(--nc-accent); border-color: var(--nc-accent); }
.nc-filter-check input:checked + .nc-filter-check__box::after {
	content: ""; width: 9px; height: 5px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translateY(-1px);
}
.nc-filter-check input:focus-visible + .nc-filter-check__box { box-shadow: var(--nc-ring); }
.nc-filter-check__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Apply / reset */
.nc-filters__actions { display: flex; gap: 0.6rem; }
.nc-filters__actions .nc-btn { flex: 1; }

/* Mobile / tablet: filters slide in from the LEFT as a full drawer -------- */
@media (max-width: 991px) {
	.nc-shop-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 320;
		width: min(320px, 86vw); background: var(--nc-bg-alt);
		border-right: 1px solid var(--nc-border);
		transform: translateX(-100%); transition: transform var(--nc-transition);
		overflow-y: auto; overscroll-behavior: contain;
		display: flex; flex-direction: column;
		scrollbar-width: none;
	}
	.nc-shop-sidebar::-webkit-scrollbar { display: none; width: 0; }
	.nc-shop-sidebar.is-open { transform: translateX(0); }
	.nc-shop-sidebar__head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 1rem 1.2rem; border-bottom: 1px solid var(--nc-border);
		position: sticky; top: 0; background: var(--nc-bg-alt); z-index: 2;
	}
	.nc-shop-sidebar__head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
	.nc-shop-sidebar__body { padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
	/* Sticky apply bar so the CTA is always reachable while scrolling filters */
	.nc-filters__actions {
		position: sticky; bottom: -1.2rem; z-index: 2;
		margin: 0 -1.2rem -1.2rem; padding: 0.9rem 1.2rem;
		background: var(--nc-bg-alt); border-top: 1px solid var(--nc-border);
	}
	.nc-shop-toolbar .woocommerce-result-count { font-size: 0.82rem; }
}
@media (max-width: 560px) {
	.nc-shop-toolbar { gap: 0.6rem; }
	.nc-shop-toolbar .woocommerce-result-count { order: 4; flex-basis: 100%; }
	.nc-shop-toolbar .woocommerce-ordering { order: 2; margin-left: auto; flex: 1 1 auto; display: flex; justify-content: flex-end; }
	.nc-shop-toolbar .woocommerce-ordering select { min-width: 0; width: 100%; max-width: 210px; font-size: 0.85rem; padding: 0.7em 0.9em; }
	.nc-shop-toolbar .nc-view-toggle { order: 3; }
}

/* Order / account tables stack on small screens --------------------------- */
@media (max-width: 720px) {
	/* Non-cart tables (orders, downloads) — generic stacked rows. The cart's
	   own small-screen layout lives in the Cart section above; a second copy
	   used to sit here with a different breakpoint (720px vs core's 768px)
	   and a different card design, so between 721px and 768px the two fought
	   and the page fell back to core's label-prefixed rows. */
	.woocommerce table.shop_table:not(.cart) thead { display: none; }
}
body.woocommerce-cart .nc-entry-content,
body.woocommerce-checkout .nc-entry-content,
body.woocommerce-account .nc-entry-content { font-size: 1rem; }

/* Single product gallery / slider polish ---------------------------------- */
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image--placeholder img,
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; display: block; }
/* Border/background deliberately left to the layout rule above — repeating
   them here (this selector is identical, so it would win on source order)
   was quietly cancelling the frame around the white image stage. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport { border-radius: var(--nc-radius); overflow: hidden; }
/* Badge sits inside the padded gallery card */
.woocommerce div.product > span.onsale { top: 24px !important; left: 24px !important; }
.woocommerce div.product .woocommerce-product-gallery__trigger {
	top: 1rem; right: 1rem; width: 42px; height: 42px; display: grid; place-items: center;
	background: rgba(255, 255, 255, 0.95); border-radius: 50%; box-shadow: var(--nc-shadow-sm); text-indent: 0; z-index: 4;
}
.woocommerce div.product .woocommerce-product-gallery__trigger::before { border-color: #241a2e; background: transparent; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__trigger::after { background: #241a2e; margin: 0; }
/* NOTE: the legacy "FlexSlider thumbnail nav" block that used to live here
   (display:grid + overflow:visible on .flex-control-nav.flex-control-thumbs)
   was removed — it is superseded by the .nc-thumbs slider system above, and its
   `overflow:visible` overrode the mobile strip's `overflow-x:auto`, stopping the
   thumbnails from clipping/scrolling and overflowing the page on small screens. */