/* Nelle WooCommerce skin — matches the approved category/product mockups.
   The structure comes from IGSHOP Shop Kit (.qav-thumb, .qav-onsale, .qav-sizes, .qav-soldout)
   and TSC (cart/checkout/account); this file only re-skins them in white & gold. */

/* ---------------------------------------------------------------- product grid */
/* WooCommerce/theme clearfix pseudo-elements become grid items and steal the first cell. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
}

/* photo — 4:5, no radius, soft grey bed.
   The card link wraps a badge-plugin div around the thumb; both must hug the photo,
   otherwise the title overlaps its bottom edge. */
.woocommerce ul.products li.product > a,
ul.products li.product > a { display: block; }
.wpcbm-wrapper,
.woocommerce ul.products li.product .qav-thumb,
ul.products li.product .qav-thumb {
	display: block;
	position: relative;
	height: auto;
	overflow: hidden;
}


.woocommerce ul.products li.product .qav-thumb,
.woocommerce ul.products li.product a img,
ul.products li.product a img {
	background: var(--hj-mist);
}
.woocommerce ul.products li.product .qav-thumb img,
ul.products li.product .qav-thumb img,
.woocommerce ul.products li.product > a > img {
	width: 100%;
	aspect-ratio: 1 / 1; /* square, like Nelle's product photos (Ain, 6 Oct 2026) */
	object-fit: cover;
	margin: 0;
	transition: transform .6s ease;
}
.woocommerce ul.products li.product:hover .qav-thumb img { transform: scale(1.035); }
.qav-thumb { position: relative; overflow: hidden; display: block; }

/* discount badge (Shop Kit's "-44%"): wine with white text, top right (Ain, 6 Oct 2026) */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale,
span.onsale.qav-onsale {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 3px 9px;
	border-radius: 0;
	background: var(--nl-wine);
	color: #fff;
	font-family: var(--hj-sans);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .02em;
}

/* size / combo pills over the photo */
.qav-sizes {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	gap: 4px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.qav-size {
	background: rgba(255, 255, 255, .92);
	color: var(--hj-ink-2);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .06em;
	padding: 3px 8px;
	border: 1px solid rgba(0, 0, 0, .06);
}

/* sold out — ink, not the brand primary Shop Kit defaults it to */
.qav-soldout {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--hj-ink) !important;
	color: #fff !important;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 6px 12px;
	z-index: 2;
}
li.product.outofstock .qav-thumb img { filter: grayscale(.35) opacity(.85); }

/* name + price */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	margin: 12px 0 2px;
	padding: 0;
	position: relative;
	font-family: var(--hj-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hj-ink);
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
	display: flex;
	gap: 8px;
	align-items: baseline;
	justify-content: center;
	margin: 0;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	color: var(--hj-ink);
}
.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
	color: var(--hj-sale);
	opacity: 1;
	text-decoration-thickness: 1px;
}
.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
	background: none;
	font-weight: 600;
	text-decoration: none;
	color: var(--hj-ink);
}

@media (max-width: 900px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: 1fr 1fr; gap: 26px 10px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
	.woocommerce ul.products li.product span.onsale { top: 8px; right: 8px; font-size: 11.5px; padding: 2px 7px; }
	.qav-sizes { bottom: 8px; }
	.qav-size { font-size: 9.5px; padding: 2px 6px; }
}

/* ---------------------------------------------------------------- category page */
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 22px;
	padding-top: 44px;
}
@media (max-width: 767px) {
	.woocommerce .woocommerce-products-header,
	.woocommerce-page .woocommerce-products-header { padding-top: 28px; }
}
/* Information pages (classic WordPress pages: Payment Information, Privacy Policy …): the same room
   above the content. Elementor pages and the TSC cart/account pages set their own spacing. */
body.page:not(.elementor-page):not(.woocommerce-page) main.site-main { padding-top: 56px; padding-bottom: 72px; }
@media (max-width: 767px) {
	body.page:not(.elementor-page):not(.woocommerce-page) main.site-main { padding-top: 32px; padding-bottom: 48px; }
}
.woocommerce-products-header__title,
.woocommerce h1.page-title {
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 8px;
}
.woocommerce .term-description {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--hj-ink-2);
	font-weight: 300;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}
.woocommerce .woocommerce-result-count {
	float: none;
	margin: 34px 0 14px;
	font-size: 14px;
	color: var(--hj-ink-2);
}
.woocommerce .woocommerce-ordering { float: right; margin-top: 26px; }

/* ---------------------------------------------------------------- single product */
.woocommerce div.product .product_title {
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-top: 6px;
	font-size: 16px;
	color: var(--hj-ink);
	font-variant-numeric: tabular-nums;
}
.woocommerce div.product p.price del { color: var(--hj-sale); opacity: 1; font-size: 15px; }
.woocommerce div.product p.price ins { background: none; font-weight: 600; text-decoration: none; }
.woocommerce div.product .stock.in-stock { color: var(--hj-ok); font-size: 13px; }
.woocommerce div.product .stock.out-of-stock { color: var(--hj-sale); font-size: 13px; }

/* add to cart: the site-wide button standard, see assets/buttons.css */

/* product page photos: square, like Nelle's product photos (Ain, 6 Oct 2026). Shop Kit crops its
   tiled gallery to 2:3 (4:5 on phones) unless told otherwise. */
body .qav-gallery { --qav-gallery-ratio: 1 / 1; }

/* product page accordion (Description | Delivery) */
.hj-acc { margin-top: 26px; border-top: 1px solid var(--hj-line); }
.hj-acc-item { border-bottom: 1px solid var(--hj-line); }
.hj-acc-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 0; cursor: pointer; list-style: none;
	font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hj-ink);
}
.hj-acc-head::-webkit-details-marker { display: none; }
.hj-acc-head svg { flex: none; color: var(--hj-muted); transition: transform .2s; }
.hj-acc-item[open] > .hj-acc-head svg { transform: rotate(180deg); }
.hj-acc-body { padding: 0 0 20px; font-size: 14.5px; line-height: 1.7; color: var(--hj-ink-2); font-weight: 300; }
.hj-acc-body > :last-child { margin-bottom: 0; }
.hj-acc-body h2 { display: none; }

/* ---------------------------------------------------------------- pagination (shop + category pages)
   Centred square page numbers under the grid: ink square for the current page, hairline squares
   for the rest, arrows in matching squares. WooCommerce's bordered strip is reset first. The gap
   to the footer comes from the archive padding further down. */
.woocommerce nav.woocommerce-pagination { margin: 40px 0 0; text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers { display: inline-flex; gap: 8px; margin: 0; padding: 0; border: 0; white-space: normal; }
.woocommerce nav.woocommerce-pagination ul li { display: block; float: none; margin: 0; border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; margin: 0;
	border: 1px solid var(--hj-line-2); border-radius: 0; background: #fff; color: var(--hj-ink);
	font-family: var(--hj-sans); font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-decoration: none; transition: border-color .2s, background .2s, color .2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--hj-ink); background: #fff; color: var(--hj-ink); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--hj-ink); border-color: var(--hj-ink); color: #fff; }
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next { font-size: 15px; }
.woocommerce nav.woocommerce-pagination ul li span.dots { border-color: transparent; color: var(--hj-muted); }
@media (max-width: 767px) {
	.woocommerce nav.woocommerce-pagination { margin: 28px 0 0; }
	.woocommerce nav.woocommerce-pagination ul.page-numbers { gap: 6px; }
	.woocommerce nav.woocommerce-pagination ul li a,
	.woocommerce nav.woocommerce-pagination ul li span { min-width: 36px; height: 36px; padding: 0 8px; }
}

/* The "X from Y purchased…" sales pop-up (wpcsn) stays on the home page only. */
body.post-type-archive-product .wpcsn-notification,
body.tax-product_cat .wpcsn-notification,
body.single-product .wpcsn-notification,
body.woocommerce-account .wpcsn-notification { display: none !important; }

/* Shop and category pages: room between the grid (or its pagination) and the footer. */
body.woocommerce.archive main.site-main,
body.post-type-archive-product main.site-main { padding-bottom: 72px; }
@media (max-width: 767px) {
	body.woocommerce.archive main.site-main,
	body.post-type-archive-product main.site-main { padding-bottom: 48px; }
}

/* related / upsell headings */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.recently-viewed-products > h2 {
	font-weight: 400;
	font-size: 16px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 28px;
}

/* ---------------------------------------------------------------- generic WooCommerce buttons */
/* See assets/buttons.css: one button standard for the whole site. */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-top-color: var(--hj-accent); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--hj-accent); }

/* ---------------------------------------------------------------- Shop Kit overrides
   Shop Kit pulls the title and price up by 10px because on Qhalesaa they sit under
   Elementor's Products widget, which leaves a gap. Our archives have no such gap, so the
   title lands on the photo. It also colours titles with the brand primary; the mockups
   use ink, with gold kept for badges and buttons. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	margin-top: 12px !important;
	margin-bottom: 2px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4 !important;
	letter-spacing: 0;
	color: var(--hj-ink) !important;
}
.qav-price-style ul.products li.product .price,
.woocommerce ul.products li.product .price {
	margin-top: 2px !important;
}

/* ---------------------------------------------------------------- combo chip (cards) + combo box (product) */
.hj-chip {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 2;
	background: rgba(255, 255, 255, .92);
	color: var(--hj-ink-2);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .06em;
	padding: 3px 8px;
	border: 1px solid rgba(0, 0, 0, .06);
	white-space: nowrap;
	pointer-events: none;
}
li.product.outofstock .hj-chip { display: none; }
.hj-combo {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 18px 0 20px;
	padding: 12px 14px;
	background: var(--hj-wash);
	border: 1px solid var(--hj-accent-light);
}
.hj-combo-ic { color: var(--hj-accent-deep); margin-top: 1px; flex: none; }
.hj-combo p { font-size: 13.5px; color: var(--hj-ink-2); line-height: 1.5; margin: 0; }
.hj-combo b { display: block; font-weight: 500; color: var(--hj-ink); }
@media (max-width: 900px) { .hj-chip { bottom: 8px; font-size: 9.5px; padding: 2px 6px; } }

/* ---------------------------------------------------------------- single product (woocommerce/single-product.php)
   Gallery left, flush to the edge; details column right. Shop Kit styles the tiled gallery, the
   sibling carousel, the countdown card and the phone price bar themselves. */
.hj-main--product { padding: 0; }
.hj-pdp { display: grid; grid-template-columns: minmax(0, 53%) minmax(0, 1fr); gap: 0 clamp(24px, 2.6vw, 40px); align-items: start; padding: 24px 0 0; }
.hj-pdp-gallery { position: relative; padding: 0; }
/* WooCommerce's layout sheet floats div.images to 48% (with an #content variant); the grid places it. */
.woocommerce div.product.hj-pdp div.images,
.woocommerce #content div.product.hj-pdp div.images { float: none; width: 100%; margin: 0; }
.hj-pdp-info { max-width: 520px; padding: 0 var(--hj-gut) 40px 0; }
/* Hello Commerce's woocommerce.css adds margin-bottom:18px to .woocommerce div.product .product_title. */
.woocommerce div.product.hj-pdp .product_title { font-size: 26px; font-weight: 500; line-height: 1.25; margin: 0; }
.woocommerce div.product.hj-pdp p.price { margin: 6px 0 14px; font-size: 16px; }
.hj-pdp-cart form.cart { margin: 0; }
.woocommerce div.product.hj-pdp .hj-pdp-cart form.cart { margin-top: 26px; }
@media (max-width: 767px) {
	/* phones: the bar carries the price, so the name needs its own breathing room */
	.woocommerce div.product.hj-pdp .product_title { margin-bottom: 12px; }
	.woocommerce div.product.hj-pdp .hj-pdp-cart form.cart { margin-top: 22px; }
}
.hj-pdp-cart .qav-carousel { margin-top: 22px; }
.hj-pdp-cart .qav-carousel-heading { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--hj-muted); font-weight: 500; }
.hj-pdp-share { display: flex; gap: 12px; margin-top: 22px; }
.hj-pdp-share a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hj-ink); color: #fff; transition: background .2s; }
.hj-pdp-share a:hover { background: var(--hj-accent-deep); color: #fff; }
/* share icons: rose circles, mulberry when pointed at; centred on phones (Ain, 6 Oct 2026) */
.hj-pdp-share a { background: var(--nl-rose); color: #fff; }
.hj-pdp-share a:hover, .hj-pdp-share a:focus-visible { background: var(--nl-mulberry); color: #fff; }
@media (max-width: 900px) { .hj-pdp-share { justify-content: center; } }
.hj-pdp-more { padding: 36px var(--hj-gut) 72px; max-width: var(--hj-wrap); margin-inline: auto; }
.hj-related .related > h2, .hj-related .products-heading { font-weight: 400; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; text-align: center; margin-bottom: 28px; }
.hj-related ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 900px) {
	.hj-pdp { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
	.hj-pdp-info { max-width: none; padding: 20px 16px 28px; }
	.woocommerce div.product.hj-pdp .product_title { font-size: 22px; }
	.hj-related ul.products { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
	.hj-pdp-more { padding: 28px 16px 48px; }
	/* 20 Oct 2026 (Ain): on phones the Add to cart button lives in the bottom bar, so "In stock" is the last
	   line of the form; 16px to the Product info accordion instead of WooCommerce's 2em + 26px. */
	.woocommerce div.product.hj-pdp .hj-pdp-cart form.cart { margin-bottom: 0; }
	.hj-pdp-info .hj-acc { margin-top: 8px; }
}
/* Shop Kit's − / + quantity steppers inherit the parent theme's white button text; ink them. */
.woocommerce div.product.hj-pdp .qav-qty-step { color: var(--hj-ink); background: transparent; }
@media (max-width: 767px) {
	/* Shop Kit's price bar (body.hj-mpb) carries the price and the discount pill on phones. */
	.woocommerce div.product.hj-pdp .hj-pdp-gallery span.onsale { display: none !important; }
	.hj-mpb.woocommerce div.product.hj-pdp p.price { display: none; }
}

/* sale badge top-left of the gallery, as in the mockup; units-sold bar for flash sales */
.hj-pdp-gallery span.onsale, .hj-pdp-gallery .onsale { top: 0; left: 0; right: auto; }
.hj-sold { display: flex; align-items: center; gap: 8px; margin: 7px auto 0; max-width: 220px; font-size: 11.5px; color: var(--hj-flash); font-weight: 500; font-variant-numeric: tabular-nums; }
.hj-sold-track { flex: 1; height: 6px; border-radius: 3px; background: #F6DCD6; overflow: hidden; }
.hj-sold-track i { display: block; height: 100%; border-radius: 3px; background: var(--hj-flash); }
.hj-pdp-info .hj-sold { margin: 10px 0 0; max-width: 320px; }
/* first gallery photo spans the full width (Shop Kit tiles the rest two per row) */
.hj-pdp-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; }

/* Cart: breathing room above the footer on desktop. */
body.woocommerce-cart .site-main { padding-bottom: 72px; }

/* TSC hides the theme header/footer on phones for cart and account (it targets Kadence's
   #masthead/#colophon); mirror that for our header, footer and announcement bar. Checkout uses
   TSC's own canvas template, so nothing is needed there. */
@media (max-width: 767px) {
	/* Phones: cart and checkout run edge to edge — TSC draws its own full-width bands and bottom
	   bar, so the parent theme's 10px content gutter and page margins must go. Checkout normally
	   renders in TSC's canvas template; the rule also covers it if that canvas is ever switched off. */
	body.woocommerce-cart .site-main, body.woocommerce-checkout .site-main,
	body.woocommerce-cart .page-content, body.woocommerce-checkout .page-content { padding: 0; margin: 0; max-width: none; }
	body.woocommerce-cart .nl-ann, body.woocommerce-cart .nl-hdr, body.woocommerce-cart .nl-ftr,
	body.woocommerce-account .nl-ann, body.woocommerce-account .nl-hdr, body.woocommerce-account .nl-ftr,
	body.woocommerce-order-received .nl-ann, body.woocommerce-order-received .nl-hdr, body.woocommerce-order-received .nl-ftr { display: none; }
}
.hj-pdp-cart .stock { margin: 6px 0 0; font-size: 13px; }
/* Shop Kit tucks the availability line under Qhalesaa's price widget; here it lands on top of ours. */
.hj-pdp-cart p.stock, .hj-pdp-cart .stock { position: static !important; transform: none !important; margin: 4px 0 8px !important; }
/* TSC's checkout has its own header; the theme's announcement bar doesn't belong above it. */
body.woocommerce-checkout .nl-ann { display: none; }

/* ---------------------------------------------------------------- 1 Oct 2026 fixes */
/* Phone grid off-centre on iPhone: Hello Commerce makes each card a flex column with
   align-items:flex-start, so older iPhone Safari sizes the card to its longest text line
   ("Madame — Snow White") and leaves it at the left of its column. Stretch every card's
   contents to the full column width, on every browser. */
.woocommerce ul.products li.product { display: flex; flex-direction: column; align-items: stretch; min-width: 0; } /* button pinned to the bottom: margin-top:auto */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { width: 100%; align-self: stretch; }
.woocommerce ul.products li.product > a.nl-card-photo { margin-bottom: 10px; }

/* "Add to cart" on product cards. It shows once Shop Kit's "hide add to cart" is switched off.
   margin-top:auto keeps every button in a row on one line, whatever the title length. */
.woocommerce ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center; /* the button is as wide as its text, centred under the price */
	width: auto;
	margin-top: auto;
	line-height: 1.2;
	/* colours, size and lettering: the site-wide button standard (assets/buttons.css) */
}
.woocommerce ul.products li.product .button.loading { opacity: .6; }
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* WPC Badge Management badges (e.g. SOLD OUT) — smaller text on category and product pages. */
.wpcbm-badge-inner { font-size: 12px; }

/* ---------------------------------------------------------------- reward points (TikTok Style Checkout) */
/* Ain, 6 Oct 2026: every reward-points text in rose gold (--nl-points in brand.css) instead of TSC's
   green: the "Earn X points" line on the product page and the account's Reward page (balance, Worth
   badge, history, notes). Ain, 16 Oct 2026: the cart and checkout points lines are TSC green again
   (TSC 0.20.0 locks them green on every site), so they are no longer listed here. TSC keeps points
   and store credit in one colour family by design, so store credit follows. TSC's colour variables are redefined one step more specific; the
   lines it colours with a fixed green carry !important, so these do too. Badges filled with rose gold
   get wine lettering, as on the product page price bar: white on rose gold is too faint to read. */
html:root,
body .tsc-points {
	--tsc-pts: var(--nl-points);
	--tsc-pts-good: var(--nl-points);
	--tsc-pts-tint: #FCEAEA;
	--tsc-pts-line: #EFD5D2;
	--tsc-credit: var(--nl-points);
	--tsc-credit-tint: #FCEAEA;
	--tsc-credit-line: #EFD5D2;
}
body .tsc-points__worth,
body .tsc-points__worth .amount,
body .tsc-points__worth bdi,
body .tsc-points__worth span { color: var(--nl-wine) !important; }
body .tsc-points-promo-badge {
	background: var(--nl-points) !important;
	color: var(--nl-wine) !important;
}
/* product page: the points line inside the "In stock" line, same size as "In stock" (includes/shop.php) */
.woocommerce div.product .stock .tsc-points-earn.nl-stock-points {
	display: inline;
	margin: 0 0 0 14px;
	font-size: inherit;
}
.woocommerce div.product .stock .nl-stock-points .tsc-points-earn__icon { margin-right: 5px; }
body .tsc-points__birthday-nudge {
	background: var(--nl-blush);
	border-color: var(--nl-points);
	color: var(--nl-points) !important;
}

/* ---------------------------------------------------------------- product page: colour swatches */
/* Shop Kit's colour buttons, turned into round swatches by assets/product.js (as in the approved
   product page): each colour's own shade, a dark ring on the picked one, a white slash on a colour
   that can't be picked, and the picked colour's name beside the row. Shop Kit 2.9.3 starts its button
   rules with "form.cart .qav-swatches" (0,3,1) and marks backgrounds !important, so these rules start
   with "form.cart" too, one class more specific, and use !important where Shop Kit does. */
form.cart .qav-swatches.nl-swatches { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; vertical-align: middle; }
form.cart .qav-swatches .qav-swatch.nl-swatch {
	position: relative;
	width: 40px;
	height: 40px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none !important;
	color: transparent;
	font-size: 0 !important;
	line-height: 0;
	text-decoration: none;
}
form.cart .qav-swatches .qav-swatch.nl-swatch::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(43, 23, 25, .14);
}
form.cart .qav-swatches .qav-swatch.nl-swatch::after {
	content: "";
	position: absolute;
	inset: 1px;
	border: 1.5px solid transparent;
	border-radius: 50%;
	transition: border-color .15s ease;
}
form.cart .qav-swatches .qav-swatch.nl-swatch:hover::after { border-color: var(--hj-line-2); }
form.cart .qav-swatches .qav-swatch.nl-swatch.is-active { background: none !important; }
form.cart .qav-swatches .qav-swatch.nl-swatch.is-active::after { border-color: var(--hj-ink); }
form.cart .qav-swatches .qav-swatch.nl-swatch.is-disabled { opacity: .4; cursor: not-allowed; }
form.cart .qav-swatches .qav-swatch.nl-swatch.is-disabled::before {
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)),
		var(--c);
}
form.cart .qav-swatches .qav-swatch.nl-swatch:focus-visible { outline: 2px solid var(--nl-wine); outline-offset: 1px; }
.nl-swatch-name {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}
.nl-swatch-picked { display: inline-block; margin-left: 10px; vertical-align: middle; font-size: 15px; color: var(--hj-ink-2); }
/* label, swatches and picked name on one line: the label column fits "COLOUR" instead of
   Shop Kit's narrow 60px column (made for short labels like "SIZE") */
.woocommerce div.product form.variations_form table.variations th.label {
	width: auto;
	padding: 0 16px 0 0;
	vertical-align: middle;
	white-space: nowrap;
}
.woocommerce div.product form.variations_form table.variations td.value { padding: 0; vertical-align: middle; }
/* one colour always stays picked, so WooCommerce's "Clear" link has nothing to do */
.nl-has-swatches .reset_variations { display: none !important; }

/* ---------------------------------------------------------------- discount badges outside the shop pages */
/* TSC's cart: the "-60%" chip beside each price, wine with white text like every discount badge. */
body .tsc-cart-item__discount-badge { background: var(--nl-wine); color: #fff; }
/* Shop Kit's phone price bar: its discount badge is blush with wine lettering (Ain, 6 Oct 2026: first
   wine lettering on the rose gold fill, then the fill changed to blush). A flash sale paints that badge
   black, so it keeps its white lettering. */
body .qav-mpb:not(.flash-sale) .qav-mpb-pill { background: var(--nl-blush); color: var(--nl-wine); }

/* ---------------------------------------------------------------- product cards, TikTok style (13 Oct 2026)
   includes/cards.php + assets/cards.js: clean photo, square shade swatches, name, price,
   ★ 4.9 | 1669 sold, and an add-to-cart button whose photo flies into the cart. */
.woocommerce ul.products li.product .qav-thumb,
.woocommerce ul.products li.product a.nl-card-photo img { background: #fff; } /* clean background */

/* swatches: one row of small cards under the photo, Shopee style (Ain, 20 Oct 2026): a white card
   with a thin border, the colour's photo, its name under it and, when set, the hot label. The row
   is centred while it fits and scrolls sideways when it doesn't. */
.nl-sw {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 2px 2px 3px;
	overflow-x: auto;
	scrollbar-width: none;
	contain: inline-size; /* a long row scrolls inside the card instead of widening it (and the page) */
}
.nl-sw::-webkit-scrollbar { display: none; }
/* The name sits close under the row (Ain, 20 Oct 2026: the gap above it was too wide). The row no longer has a
   bottom margin of its own, and the name's usual 12px top margin shrinks to 4px when a row is above it. */
.woocommerce ul.products li.product:has(.nl-sw) .woocommerce-loop-product__title { margin-top: 4px !important; }
.nl-sw > :first-child { margin-left: auto; }  /* centred while it fits, scrollable when it doesn't */
.nl-sw > :last-child { margin-right: auto; }
.nl-sw-opt {
	flex: none;
	position: relative;
	display: grid;
	align-content: start;
	gap: 3px;
	width: 70px;
	padding: 4px 4px 5px;
	border: 1px solid var(--hj-line-2);
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.nl-sw-opt img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; border-radius: 4px; background: var(--hj-line); }
.nl-sw-opt .nl-sw-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal; /* the button reset says nowrap, which would clip the name to one line */
	overflow-wrap: anywhere; /* a word wider than the card breaks instead of being cut off */
	color: var(--hj-ink);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
}
.nl-sw-opt .nl-hot { font-size: 9px; }
.nl-sw-opt .nl-hot svg { width: 10px; height: 10px; }
.nl-sw-opt[aria-pressed="true"] { border-color: var(--nl-rose); box-shadow: inset 0 0 0 1px var(--nl-rose); }
.nl-sw-opt[aria-pressed="true"] .nl-sw-name { color: var(--nl-rose); }
.nl-sw-opt:hover { border-color: var(--nl-rosegold); }
.nl-sw-opt:focus-visible { outline: 2px solid var(--nl-rose); outline-offset: 2px; }
.nl-sw-opt:disabled { opacity: .4; cursor: not-allowed; }
.nl-sw-opt:disabled::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 48%, var(--hj-muted) 49% 51%, transparent 52%); }
/* choices without photos (the car perfume scents): square text boxes */
.nl-sw--text .nl-sw-opt { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 3px; }
.nl-sw--text .nl-sw-opt .nl-sw-name { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--hj-ink-2); }

/* the hot label: a flame and the words typed in the product editor, under a colour's name on the
   product page cards and the product cards (the video sheet and the cart picker print their own) */
.nl-hot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	gap: 2px;
	max-width: 100%;
	margin-top: -1px;
	color: var(--nl-rose);
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
}
.nl-hot svg { flex: none; width: 11px; height: 11px; }
.nl-hot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-sw-hint { margin: 6px 0 0; font-size: 12px; color: var(--nl-rose); }
li.product.nl-ask .nl-sw { animation: nl-nudge .4s ease; }
@keyframes nl-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ★ 4.9 | 1669 sold, TikTok Shop style (Ain's reference, 19 Oct 2026): one gold star, the rating,
   a hairline divider, the units sold in grey. Centred under the card price; the product page
   prints the same line left-aligned under the name (.nl-pdp-meta, further down). */
.nl-card-meta,
.nl-pdp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	line-height: 1;
	color: var(--hj-muted);
}
.nl-card-meta { justify-content: center; margin: 6px 0 12px; font-size: 12.5px; }
.nl-rate { display: inline-flex; align-items: center; gap: 4px; }
.nl-rate svg { width: 1.2em; height: 1.2em; flex: none; fill: #F5B400; }
.nl-rate b { font-weight: 600; color: var(--hj-ink-2); }
.nl-rate i { font-style: normal; color: var(--hj-muted); }
.nl-sep { width: 1px; height: .9em; background: var(--hj-line-2); }
.nl-sold { color: var(--hj-muted); }

/* add to cart: as wide as its text, centred under the price (Ain, 20 Oct 2026: not full width);
   margin-top:auto (rule above) still pins every button to the bottom of its card */
.woocommerce ul.products li.product .nl-card-buy {
	align-self: center;
	width: auto;
	min-width: 160px;
	min-height: 42px;
	padding: 0 28px;
	font-size: 12.5px;
}
.woocommerce ul.products li.product .nl-card-buy.is-busy { opacity: .7; cursor: progress; }
.woocommerce ul.products li.product .nl-card-buy.is-added { background: var(--nl-mulberry); }
.woocommerce ul.products li.product .nl-card-buy.is-off { background: var(--hj-line-2); color: var(--hj-muted); cursor: default; }

/* the photo flying to the cart, and the cart icon's bounce when it lands */
.nl-fly { position: fixed; z-index: 100000; margin: 0; object-fit: cover; pointer-events: none; box-shadow: 0 8px 24px rgba(43, 23, 25, .25); will-change: transform; }
.nl-bump { animation: nl-bump .45s ease; }
@keyframes nl-bump { 40% { transform: scale(1.25); } 70% { transform: scale(.94); } }

@media (max-width: 900px) {
	.nl-sw-opt { width: 62px; }
	.nl-sw-opt .nl-sw-name { font-size: 9px; }
	.nl-sw { gap: 5px; }
	.nl-card-meta { font-size: 11.5px; gap: 6px; }
	.woocommerce ul.products li.product .nl-card-buy { min-width: 132px; min-height: 38px; padding: 0 20px; font-size: 11.5px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
	li.product.nl-ask .nl-sw, .nl-pick.nl-ask, .nl-bump { animation: none; }
}

/* ---------------------------------------------------------------- product page, TikTok Shop style (Ain, 19 Oct 2026)
   Under the name: ★ 4.9 (735) | 3.9K sold. Then the colours as square photo swatches, this
   product's videos as a small strip, and the plugin's floating video box bottom right
   (includes/shop.php, includes/product-fields.php, assets/product.js). */

/* ★ 4.9 (735) | 3.9K sold: the shared line (.nl-rate / .nl-sep / .nl-sold above), left-aligned */
.nl-pdp-meta { margin: 8px 0 0; font-size: 13.5px; }
.woocommerce div.product.hj-pdp .nl-pdp-meta + p.price { margin-top: 12px; }

/* the colour cards, Shopee style (Ain, 20 Oct 2026; was 84px bare photos): "Colour: Starlight #01",
   then one row of 88px white cards with a thin border, the colour's photo, its name under it in
   small capitals and, when set, the hot label. Always one row: it scrolls sideways when the cards
   don't fit (five fit the desktop column). The picked card gets a rose border and a rose name. */
.nl-pick { margin-top: 18px; }
.nl-pick-head { margin: 0 0 8px; font-size: 13px; color: var(--hj-muted); }
.nl-pick-head b { font-weight: 600; color: var(--hj-ink); }
.nl-pick-row { display: flex; flex-wrap: nowrap; gap: 8px; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nl-pick-row::-webkit-scrollbar { display: none; }
.nl-pick-opt {
	flex: none;
	display: grid;
	align-content: start;
	gap: 4px;
	width: 88px;
	padding: 5px 5px 7px;
	border: 1px solid var(--hj-line-2);
	border-radius: 8px;
	background: #fff;
	color: var(--hj-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.nl-pick-opt img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 5px;
	background: var(--hj-line);
}
/* two lines at most (20 Oct 2026, Ain): white-space: normal undoes the button reset's nowrap, which clipped long names to one line */
.nl-pick-opt > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; padding: 0 1px; }
.nl-pick-opt:hover { border-color: var(--nl-rosegold); }
.nl-pick-opt.is-on { border-color: var(--nl-rose); box-shadow: inset 0 0 0 1px var(--nl-rose); }
.nl-pick-opt.is-on > span { color: var(--nl-rose); }
.nl-pick-opt.is-out { opacity: .45; }
.nl-pick-opt:focus-visible { outline: 2px solid var(--nl-rose); outline-offset: 2px; }
/* name pills when a colour has no photo of its own (the car perfume scents) */
.nl-pick:not(.nl-pick--photos) .nl-pick-opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 44px;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
.nl-pick:not(.nl-pick--photos) .nl-pick-opt > span { display: block; }
.nl-pick:not(.nl-pick--photos) .nl-pick-opt:hover { border-color: var(--nl-rose); }
.nl-pick:not(.nl-pick--photos) .nl-pick-opt.is-on { border-color: var(--nl-rose); box-shadow: inset 0 0 0 1px var(--nl-rose); color: var(--nl-rose); font-weight: 600; }
/* the form's own colour row stays for WooCommerce, out of sight; the squares work it (assets/product.js) */
.hj-pdp-cart--picked form.cart .variations { display: none; }
.nl-pick.nl-ask { animation: nl-nudge .4s ease; }
/* 20 Oct 2026 (Ain): phones — smaller name, and price bar → name → stars/sold → colours pulled
   closer together; the squares sit on one line that scrolls sideways, bleeding to the screen edge
   like the product sheet in the videos (72px squares no longer fit five across) */
@media (max-width: 900px) {
	.hj-pdp-info { padding-top: 10px; }
	.woocommerce div.product.hj-pdp .product_title { font-size: 18px; line-height: 1.3; margin-bottom: 4px; }
	.nl-pdp-meta { margin-top: 4px; font-size: 13px; }
	.nl-pick { margin-top: 10px; }
	.nl-pick-head { margin-bottom: 6px; }
	.nl-pick-row { margin-right: -16px; padding-right: 16px; }
	.nl-pick-opt { width: 84px; }
}

/* the cart's colour picker (TikTok Style Checkout 0.24.0) in Nelle's colours: rose price and hot
   label, the discount badge in wine with white text like every other badge on the site */
body .tsc-modal {
	--tsc-sale: var(--nl-rose);
	--tsc-hot: var(--nl-rose);
	--tsc-discount-bg: var(--nl-wine);
	--tsc-discount-fg: #fff;
}

/* this product's videos: a small strip, same heading style as the sibling carousel */
.hj-pdp-videos { margin-top: 22px; }
.hj-pdp-videos .tsv-heading { margin: 0 0 2px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--hj-muted); font-weight: 500; text-align: left; }
/* 20 Oct 2026 (Ain): heading sits 8px above the reels (the plugin leaves 12/10px of track padding) */
.hj-pdp-videos .tsv--compact .tsv-track { padding-top: 6px; }

/* the floating video box (TikTok Style Video, float: true) sits bottom right, where the WhatsApp
   button is; the WhatsApp button moves to its left while the box is there (body.tsv-has-float) */
body.single-product { --tsv-float-right: 20px; --tsv-float-bottom: 22px; }
body.single-product.tsv-has-float .hj-wa { right: calc(20px + 132px + 12px); }
@media (max-width: 900px) {
	body.single-product { --tsv-float-right: 14px; }
	body.single-product.has-nl-pbar { --tsv-float-bottom: calc(70px + env(safe-area-inset-bottom)); }
	body.single-product.tsv-has-float .hj-wa { right: calc(14px + 104px + 10px); }
}

/* ---------------------------------------------------------------- 21 Oct 2026 (Ain): centred titles on phones */
/* Phones only (the desktop layout stays as it was). Every page title that sat to the left on a phone is
   centred, so the titles match the rest of the shop (shop heading, "You might also like", cart, My Account). */
@media (max-width: 767px) {
	/* Login: the plain "Login" heading WooCommerce prints above the form. Logged-out only, so the form
	   headings inside the logged-in account pages (Billing address …) are not touched. */
	body.woocommerce-account:not(.logged-in) .woocommerce > h2,
	body.woocommerce-account:not(.logged-in) .u-column1 > h2,
	body.woocommerce-account:not(.logged-in) .u-column2 > h2 { text-align: center; }

	/* Information pages (About Us, FAQ, Shipping …), search results, 404 and blog posts: the page's own
	   h1. Shop and product pages are excluded (woocommerce-page); the product name stays left on purpose. */
	body:not(.woocommerce-page) main.site-main .page-header h1.entry-title { text-align: center; }

	/* TSC "Your orders" header: the title sat left of the back arrow. Centre it the way TSC's own
	   My Account header does: 8px gap, and a spacer as wide as the 28px back button so the text lands
	   in the true middle of the screen. */
	body .tsc-orders__header { gap: 8px; }
	body .tsc-orders__title { text-align: center; margin-left: 0; }
	body .tsc-orders__header-spacer { width: 28px; }

	/* "Product videos" label on the product page, centred like "You might also like" below it. */
	.hj-pdp-videos .tsv-heading { text-align: center; }
}