/* Heejab 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: 4 / 5;
	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 — gold, top right */
.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(--hj-accent);
	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 + quantity (Shop Kit's purchase form) */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: var(--hj-accent-deep);
	color: #fff;
	border-radius: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	min-height: 48px;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--hj-accent-hover); color: #fff; }

/* 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 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--hj-accent-deep);
	color: #fff;
	border-radius: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 13px 26px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--hj-accent-hover); color: #fff; }

.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; }
.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; }
}
/* 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 .hj-announce, body.woocommerce-cart .hj-hdr, body.woocommerce-cart .hj-ftr,
	body.woocommerce-account .hj-announce, body.woocommerce-account .hj-hdr, body.woocommerce-account .hj-ftr,
	body.woocommerce-order-received .hj-announce, body.woocommerce-order-received .hj-hdr, body.woocommerce-order-received .hj-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 .hj-announce { display: none; }