/* Tasneem 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, cards, category banner
   See assets/cards.css (M4 mockup, 18 Oct 2026). */

/* 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; }
}

/* ---------------------------------------------------------------- single product
   Layout, title, price, stock, tabs, reviews and "More": assets/product.css (M4 mockup, 18 Oct 2026). */
/* product page photos: square, like Tasneem'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; }

/* ---------------------------------------------------------------- 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: page padding is in assets/cards.css. */

/* 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); }

/* ---------------------------------------------------------------- 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; } }

/* units-sold bar for flash sales (includes/shop.php) */
.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; }
}
/* 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 */
/* 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;
}
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 and checkout: assets/cart-checkout.css (the cart drops the badge, the checkout's comes from the
   TSC colour settings). Shop Kit's phone price bar on the product page: assets/product.css. */

/* ---------------------------------------------------------------- stars + "sold online" (off on cards, see includes/cards.php)
   and the photo that flies into the cart (assets/cards.js) */
.nl-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 7px;
	margin: 6px 0 12px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--hj-muted);
}
.nl-stars {
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E");
	display: block;
	width: 65px;
	height: 13px;
	background: linear-gradient(90deg, #F5B400 var(--pct, 100%), #E8DAD8 var(--pct, 100%));
	-webkit-mask: var(--star) 0 0 / 13px 13px repeat-x;
	mask: var(--star) 0 0 / 13px 13px repeat-x;
}

/* 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-card-meta { font-size: 11px; gap: 2px 5px; }
	.nl-stars { width: 55px; height: 11px; -webkit-mask-size: 11px 11px; mask-size: 11px 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.nl-bump { animation: none; }
}