/* The product page (approved mockup, 22 Oct 2026). Loaded on product pages only, after shop.css (whose card rules
   also style the related-product cards) and before buttons.css (the one button standard).
   Sections: layout, photos, details column, Shop Kit's pieces (carousel, size buttons, quantity), the shipping note,
   sections (tabs / accordion), share row, the phone price bar, "You might like | Recently viewed". */

/* ---------------------------------------------------------------- layout */
.pdp { max-width: 1440px; margin: 0 auto; padding-bottom: 84px; }
.pdp-top {
	display: grid; grid-template-columns: minmax(0, 53%) minmax(0, 1fr); gap: clamp(24px, 2.6vw, 40px);
	align-items: start; padding-top: 24px;
}
.pdp-gallery { position: relative; min-width: 0; }
.pdp-info { min-width: 0; max-width: 480px; padding-right: var(--hj-gut); }
.pdp-main .woocommerce-notices-wrapper { padding-top: 14px; }

/* ---------------------------------------------------------------- photos (Shop Kit tiles them) */
/* WooCommerce floats div.images to 48% wide (.woocommerce #content div.product div.images, which has an ID),
   so this rule starts with #content to outrank it. */
#content .pdp .pdp-gallery div.images.qav-gallery { --qav-gallery-ratio: 4 / 5; float: none; width: 100%; margin: 0; }
.pdp-gallery .qav-gallery .woocommerce-product-gallery__image img { object-position: 50% 14%; background: var(--hj-mist); }
/* First photo across the full width, the rest two by two. */
.pdp-gallery .qav-gallery .woocommerce-product-gallery__wrapper > :first-child { grid-column: 1 / -1; }
.pdp-gallery span.onsale {
	position: absolute; top: 0; left: 0; right: auto; z-index: 6; min-width: 0; min-height: 0; margin: 0;
	padding: 6px 14px; border-radius: 0; background: var(--hj-ink); color: #fff;
	font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .04em;
}

/* ---------------------------------------------------------------- details column */
.pdp-crumb { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--hj-muted); }
.pdp-crumb a { color: var(--hj-muted); text-decoration: none; text-transform: capitalize; }
.pdp-crumb a:hover { color: var(--hj-ink); }

.pdp-info h1.product_title {
	margin: 0 0 10px; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--hj-ink);
}
/* Price: old price struck through and muted, then the new price in bold black (WooCommerce's own colour is overridden). */
.pdp .pdp-info p.price {
	display: flex; justify-content: flex-start; align-items: baseline; gap: 12px; flex-wrap: wrap;
	margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--hj-ink);
}
.pdp .pdp-info p.price ins { background: none; font-weight: 600; text-decoration: none; color: var(--hj-ink); }
.pdp .pdp-info p.price del { font-size: 15px; font-weight: 400; opacity: 1; color: var(--hj-muted); }
.pdp .pdp-info p.price del .amount { color: var(--hj-muted); }

.pdp-stock { display: flex; align-items: center; gap: 7px; margin: 0 0 24px; font-size: 13px; color: var(--hj-ok); }
.pdp-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pdp-stock.is-out { color: #A33A2F; }

/* ---------------------------------------------------------------- Shop Kit: "Also available in" carousel */
.pdp-info .qav-carousel {
	--qav-carousel-width: 68px; --qav-carousel-ratio: 68 / 92; --qav-carousel-padding: 0; --qav-carousel-gap: 12px;
	--qav-carousel-label-size: 11.5px; --qav-carousel-label-color: var(--hj-muted);
	--qav-carousel-name-size: 10.5px; --qav-carousel-name-color: var(--hj-muted);
	margin: 0 0 26px;
}
.pdp-info .qav-carousel-label { margin: 0 0 12px; font-weight: 500; letter-spacing: .2em; }
.pdp-info .qav-carousel-thumb { border-width: 1px; }
.pdp-info .qav-carousel-item:hover .qav-carousel-thumb { border-color: var(--hj-ink); }

/* ---------------------------------------------------------------- the form */
.pdp-info form.cart { margin: 0; }
.pdp-info table.variations { width: 100%; margin: 0 0 18px; border: 0; }
.pdp-info table.variations tr { display: block; }
.pdp-info table.variations th.label,
.pdp-info table.variations td.value { display: block; padding: 0; border: 0; background: none; }
/* "SIZE: S/M" label with the Size chart link on the right (assets/product.js adds the link and the chosen size). */
/* Shop Kit sets th to 60px (.woocommerce div.product form.cart .variations th), so the width is restated here. */
.pdp .pdp-info form.cart table.variations th.label { display: flex; align-items: baseline; width: 100%; margin-bottom: 10px; }
.pdp-info table.variations th.label label {
	margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; color: var(--hj-muted);
}
.pdp-info table.variations th.label label::after { content: ":"; }
.pdp-info .pdp-chosen { margin-left: 8px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hj-ink); }
.pdp-info .pdp-chart-link {
	margin-left: auto; font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: underline;
	text-underline-offset: 3px; color: var(--hj-ink);
}
.pdp-info a.reset_variations { display: none !important; }

/* Size buttons: outlined, the chosen one filled black. */
.pdp-info .qav-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-info form.cart .qav-swatches .qav-swatch {
	min-width: 84px; height: 46px; padding: 0 18px; border: 1px solid var(--hj-line-2); border-radius: 0; background: #fff; color: var(--hj-ink);
	font-family: var(--hj-sans); font-size: 13.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.pdp-info form.cart .qav-swatches .qav-swatch:hover:not(.is-disabled):not(.is-active) { border-color: var(--hj-ink); background: #fff; color: var(--hj-ink); }
.pdp-info form.cart .qav-swatches .qav-swatch.is-active,
.pdp-info form.cart .qav-swatches .qav-swatch.is-active:hover { border-color: var(--hj-ink); background: var(--hj-ink); color: #fff; }
.pdp-info form.cart .qav-swatches .qav-swatch.is-disabled { color: #A8A59E; background: var(--hj-mist); text-decoration: line-through; }

/* WooCommerce's own variation price/availability box: the price is already above, the stock line is ours. */
.pdp-info .woocommerce-variation.single_variation { margin: 0; }
.pdp-info .woocommerce-variation-price,
.pdp-info .woocommerce-variation-description { display: none; }
.pdp-info .woocommerce-variation-availability .stock { margin: 0 0 12px; font-size: 13px; }

/* A product limited to one per order prints an empty quantity box (just a hidden input). It must not keep its column:
   no stepper, so Add to cart takes the whole row. The hidden value 1 is still sent with the form. */
.pdp-info form.cart div.quantity:has(input[type="hidden"]) { display: none; }
.pdp-info form.cart div.quantity:has(input[type="hidden"]) ~ .single_add_to_cart_button { grid-column: 1 / -1; }

/* Buy row: quantity stepper | Add to cart. */
.pdp-info form.cart .woocommerce-variation-add-to-cart,
.pdp-info form.cart:not(.variations_form) {
	display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 0;
}
.pdp-info form.cart div.quantity.qav-qty { display: flex; align-items: stretch; width: 100%; height: 48px; margin: 0; border: 1px solid var(--hj-line-2); border-radius: 0; background: #fff; }
.pdp-info form.cart div.quantity.qav-qty:focus-within { border-color: var(--hj-ink); }
/* "−  1  +": the two steppers take 40px each and the number fills the middle, so the 1 sits in the centre. */
.pdp-info form.cart div.quantity.qav-qty .qav-qty-step {
	flex: 0 0 40px; display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; padding: 0; border-radius: 0;
	color: var(--hj-ink); font-family: var(--hj-sans); font-size: 18px; line-height: 1;
}
.pdp-info form.cart div.quantity.qav-qty .qav-qty-step:hover { color: var(--hj-ink); background-color: var(--hj-mist) !important; }
.pdp-info form.cart div.quantity.qav-qty input[type="number"] {
	flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0;
	color: var(--hj-ink); font-family: var(--hj-sans); font-size: 16px; font-weight: 500; text-align: center;
}
.pdp-info form.cart .single_add_to_cart_button { width: 100%; height: 48px; margin: 0; }

/* ---------------------------------------------------------------- sections: tabs (desktop) | accordion (phone) */
.pdp-secs { margin: 30px 0 0; }
.pdp-secs-tabs { display: flex; gap: 30px; margin: 0 0 20px; border-bottom: 1px solid var(--hj-line); }
.pdp-secs-tabs[hidden] { display: none; }
.pdp-secs-tab {
	margin: 0 0 -1px; padding: 0 0 13px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
	font-family: var(--hj-sans); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hj-muted); cursor: pointer;
}
.pdp-secs-tab:hover { color: var(--hj-ink); background: none; }
.pdp-secs-tab[aria-selected="true"] { border-bottom-color: var(--hj-ink); color: var(--hj-ink); }

/* Without JavaScript every section is shown, one after another, each under its own title. */
.pdp-sec-head { margin: 0; padding: 18px 0 8px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.pdp-sec-toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; border-radius: 0; background: none;
	font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--hj-ink); text-align: left; cursor: default;
}
.pdp-sec-toggle svg { display: none; }
/* With JavaScript on: tabs show the one panel; phones turn the titles into accordion rows. */
.pdp-secs.is-tabs .pdp-sec-head { display: none; }
.pdp-sec-panel { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--hj-ink-2); }
.pdp-sec-panel p { margin: 0 0 10px; }
.pdp-sec-panel ul { margin: 0; padding-left: 22px; }
.pdp-sec-panel li { margin: 0 0 8px; }
.pdp-sec-panel[hidden] { display: none; }
.pdp-secs.is-accordion .pdp-sec { border-bottom: 1px solid var(--hj-line); }
.pdp-secs.is-accordion .pdp-sec:first-of-type { border-top: 1px solid var(--hj-line); }
.pdp-secs.is-accordion .pdp-sec-head { padding: 0; }
.pdp-secs.is-accordion .pdp-sec-toggle { min-height: 56px; cursor: pointer; }
.pdp-secs.is-accordion .pdp-sec-toggle svg { display: block; transition: transform .2s; }
.pdp-secs.is-accordion .pdp-sec-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pdp-secs.is-accordion .pdp-sec-panel { padding: 0 0 18px; }

/* ---------------------------------------------------------------- share row */
.pdp-share { display: flex; align-items: center; gap: 4px; margin: 26px 0 0; }
.pdp-share span { margin-right: 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hj-ink); }
.pdp-share a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--hj-ink); transition: color .2s; }
.pdp-share a:hover { color: var(--hj-gold-deep); }

/* ---------------------------------------------------------------- the phone price bar (Shop Kit prints it under the photos) */
.pdp-gallery .qav-mpb { --qav-brand-primary: var(--hj-ink); --qav-brand-accent: var(--hj-gold); }
.pdp-gallery .qav-mpb-was { margin-top: 6px; }

/* ---------------------------------------------------------------- You might like | Recently viewed */
.pdp-below { padding: 0 var(--hj-gut); }
.pdp-more { max-width: 1180px; margin: 64px auto 0; }
.pdp-more-tabs { display: flex; justify-content: center; gap: 28px; margin: 0 0 30px; }
.pdp-more-tab {
	padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
	font-family: var(--hj-sans); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hj-muted); cursor: pointer;
}
.pdp-more-tab:hover { color: var(--hj-ink); background: none; }
.pdp-more-tab[aria-selected="true"] { border-bottom-color: var(--hj-ink); color: var(--hj-ink); }
.pdp-more-title { margin: 0 0 28px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.pdp-more-panel[hidden] { display: none; }
.pdp-more .related > h2:empty { display: none; }
.pdp-more ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pdp-more ul.products li.product .woocommerce-loop-product__title,
.pdp-more ul.products li.product .cc-desc { padding-inline: 0; text-align: center; }
.pdp-more ul.products li.product .price { justify-content: center; padding-inline: 0; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
	.pdp { padding-bottom: 52px; }
	.pdp-top { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
	.pdp-info { max-width: none; padding: 20px 16px 0; }
	.pdp-info h1.product_title { font-size: 22px; }
	.pdp-crumb { display: none; }
	.pdp-more { margin-top: 44px; }
	.pdp-more ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
	.pdp-more-tabs { gap: 22px; }
}
@media (max-width: 767px) {
	/* Shop Kit's dark price bar under the photos already shows the price, so it is not repeated under the name. */
	.pdp .pdp-info p.price { display: none; }
	/* The photos are a swipe carousel here (Shop Kit): no first-photo span, the pill sits over the top-left corner. */
	.pdp-gallery .qav-gallery .woocommerce-product-gallery__wrapper > :first-child { grid-column: auto; }
	.pdp-below { padding: 0 16px; }
}