/**
 * Single product page — 1:1 with design/bozpo-product.html, wired to the
 * WooCommerce markup (price html, stock html, add-to-cart form, attributes
 * table, related loop cards). Tokens only; mobile-first with min-width scaling
 * at the theme's 561px / 981px breakpoints.
 *
 * @package Bozpo_Custom
 */

/* ============================== Breadcrumb ============================== */
.crumb {
	background: var(--surface);
	border-bottom: 1px solid var(--color-border);
}

.crumb .wrap {
	display: flex;
	align-items: center;
	min-height: 42px;
	color: var(--color-muted);
	font-size: var(--text-12);
}

.crumb__nav {
	color: var(--color-muted);
}

.crumb__nav a {
	color: var(--color-muted);
}

.crumb__nav a:hover {
	color: var(--color-primary);
}

.crumb .sep {
	margin: 0 var(--space-7);
	opacity: .5;
}

/* ============================ Product layout ============================ */
.product-notices:empty {
	display: none;
}

.product {
	display: grid;
	/* minmax(0,…) lets the column shrink below content min-width so the gallery /
	   thumbnail strip scrolls instead of blowing the layout past the viewport. */
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--space-22);
	align-items: start;
	padding: var(--space-28) var(--wrap-pad) var(--space-10);
}

.woocommerce-loop-product__link {
	align-self: flex-end;
}

/* Mobile stack order: title → gallery → info. */
.info-col {
	display: contents;
}

.product-title {
	order: 1;
	margin-bottom: 0;
}

.product-title__name {
	margin: 0 0 var(--space-6);
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: var(--text-28);
	font-weight: 700;
	line-height: var(--leading-105);
}

.sku {
	margin-bottom: var(--space-14);
	color: var(--color-muted);
	font-size: var(--text-12-5);
	letter-spacing: .3px;
}

/* ------------------------------ Gallery ------------------------------ */
.gallery {
	order: 2;
	min-width: 0;
	align-self: start;
}

.stage {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* background: var(--surface-soft); */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-14);
}

.stage__img {
	width: auto;
	height: auto;
	max-width: 82%;
	max-height: 82%;
	object-fit: contain;
}

.stage .saletag {
	position: absolute;
	top: var(--space-14);
	left: var(--space-14);
	z-index: 2;
	padding: var(--space-4) var(--space-10);
	color: var(--on-primary);
	font-size: var(--text-13);
	font-weight: 700;
	background: var(--c-accent);
	border-radius: var(--radius-7);
}

.stage .zoom {
	position: absolute;
	bottom: var(--space-14);
	left: var(--space-14);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--color-muted);
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-circle);
}

.stage .zoom:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Thumbnail strip: fixed-size tiles, a few visible, extras scroll behind arrows. */
.thumbs-wrap {
	--thumbs-visible: 5;
	--thumbs-gap: var(--space-10);
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-top: var(--space-14);
}

.thumbs {
	display: flex;
	gap: var(--thumbs-gap);
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.thumbs::-webkit-scrollbar {
	display: none;
}

.thumb {
	display: grid;
	/* Uniform size: exactly --thumbs-visible tiles fit; the rest overflow-scroll. */
	flex: 0 0 calc((100% - (var(--thumbs-visible) - 1) * var(--thumbs-gap)) / var(--thumbs-visible));
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: var(--space-8);
	scroll-snap-align: start;
	background: var(--surface-soft);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-10);
	transition: border-color .15s;
}

.thumb-arrow {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--color-muted);
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-circle);
	transition: color .15s, border-color .15s, opacity .15s;
}

.thumb-arrow svg {
	width: 18px;
	height: 18px;
}

.thumb-arrow:hover:not(:disabled) {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.thumb-arrow:disabled {
	opacity: .35;
	cursor: default;
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.thumb:hover {
	border-color: var(--c-border-hover);
}

.thumb.active {
	border-color: var(--color-primary);
}

/* ------------------------------- Info -------------------------------- */
.info {
	order: 3;
	min-width: 0;
}

.lead-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-14);
	margin: 0 0 var(--space-8);
}

.lead {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	margin: 0;
	color: var(--c-ink-body);
	font-size: var(--text-14);
	line-height: var(--leading-normal);
}

.lead svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: var(--space-3);
	color: var(--color-primary);
}

.lead__text li { 
	margin-left: 10px;
}

.lead__text > :first-child {
	margin-top: 0;
}

.lead__text > :last-child {
	margin-bottom: 0;
}

.wish {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--color-muted);
	background: var(--surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-circle);
	transition: color .15s, border-color .15s;
}

.wish svg {
	width: 20px;
	height: 20px;
	transition: fill .15s;
}

.wish:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.wish[aria-pressed="true"] {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.wish[aria-pressed="true"] svg {
	fill: var(--color-primary);
}

.readmore {
	display: inline-flex;
	align-items: center;
	gap: var(--space-5);
	margin: 0 0 var(--space-20);
	padding: 0;
	color: var(--color-primary);
	font-size: var(--text-13-5);
	font-weight: 600;
	background: none;
	border: 0;
}

.readmore svg {
	width: 14px;
	height: 14px;
}

.readmore:hover {
	text-decoration: underline;
}

/* ------------------------------- Stock ------------------------------- */
/*
 * Availability is rendered by WooCommerce itself (simple.php -> wc_get_stock_html(),
 * variable products -> .woocommerce-variation-availability), always as a
 * <p class="stock …"> inside the add-to-cart form. We restyle that native output
 * as the design's pill and prepend the box icon via a CSS mask, so there is a
 * single source of truth for stock and no duplicated custom badge.
 */
.buybar .stock {
	display: inline-flex;
	align-items: center;
	gap: var(--space-9);
	margin: var(--space-4) 0 var(--space-14);
	padding: var(--space-9) var(--space-13);
	color: var(--c-stock-ink);
	font-size: var(--text-13-5);
	font-weight: 600;
	background: var(--c-stock-bg);
	border: 1px solid var(--c-stock-border);
	border-radius: var(--radius-9);
}

.buybar .stock::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background-color: var(--c-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.3 7 12 12 20.7 7'/%3E%3Cline x1='12' y1='22' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.3 7 12 12 20.7 7'/%3E%3Cline x1='12' y1='22' x2='12' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------- Price ------------------------------- */
.pricebox {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-12);
	margin: 0 0 var(--space-4);
}

.pricebox .woocommerce-Price-amount {
	color: var(--color-primary);
	font-family: var(--font-display);
	font-size: var(--text-34);
	font-weight: 700;
	line-height: 1;
}

.pricebox del {
	color: var(--color-muted);
	text-decoration: line-through;
}

.pricebox del .woocommerce-Price-amount {
	color: var(--color-muted);
	font-family: var(--font-body);
	font-size: var(--text-17);
	font-weight: 400;
}

.pricebox ins {
	background: none;
	text-decoration: none;
}

.price-vat {
	color: var(--color-muted);
	font-size: var(--text-13);
}

.save {
	padding: var(--space-3) var(--space-8);
	color: var(--on-primary);
	font-size: var(--text-12-5);
	font-weight: 700;
	background: var(--c-accent);
	border-radius: var(--radius-6);
}

.price-sub {
	margin: var(--space-2) 0 var(--space-14);
	color: var(--color-muted);
	font-size: var(--text-12-5);
}

.price-sub strong {
	color: var(--color-text);
}

/* ------------------------ Add to cart (buybar) ----------------------- */
.buybar {
	margin: 0 0 var(--space-20);
}

.buybar form.cart {
	display: flex;
	align-items: stretch;
	gap: var(--space-14);
	margin: 0;
}

/* Quantity box + injected −/+ stepper. */
.buybar .quantity {
	display: flex;
	flex: none;
	align-items: center;
	overflow: hidden;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-12);
}

.buybar .quantity input.qty {
	width: 48px;
	text-align: center;
	font-size: var(--text-16);
	font-weight: 700;
	border: 0;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.buybar .quantity input.qty::-webkit-outer-spin-button,
.buybar .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.buybar .qty__btn {
	align-self: stretch;
	width: 48px;
	color: var(--color-muted);
	font-size: var(--text-21);
	background: var(--surface);
	border: 0;
}

.buybar .qty__btn:hover {
	color: var(--color-text);
	background: var(--surface-soft);
}

.buybar .single_add_to_cart_button {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: var(--space-11);
	padding: var(--space-19) var(--space-26);
	color: var(--on-primary);
	font-size: var(--text-17);
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	background: var(--color-addtocart);
	border: 0;
	border-radius: var(--radius-12);
	box-shadow: var(--shadow-addcart);
	transition: background .15s, box-shadow .15s, transform .1s;
}

.buybar .single_add_to_cart_button::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='18' cy='21' r='1'/%3E%3Cpath d='M2 3h3l2.4 12.4a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.6L23 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='18' cy='21' r='1'/%3E%3Cpath d='M2 3h3l2.4 12.4a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.6L23 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.buybar .single_add_to_cart_button:hover {
	background: var(--color-addtocart-strong);
	box-shadow: var(--shadow-addcart-hover);
}

.buybar .single_add_to_cart_button:active {
	transform: translateY(1px);
}

/*
 * Variable products.
 *
 * The simple-product rule above makes form.cart a flex ROW (quantity next to
 * the add button). A variable form ALSO carries .cart, so without this it would
 * flex the attribute rows + variation wrap into one scattered line. Reset it to
 * a normal block column; only the final qty + add-to-cart line flexes as a row.
 */
.buybar form.variations_form {
	display: block;
	margin: 0;
}

.bozpo-variations {
	margin: 0 0 var(--space-18);
}

/* Attribute block: label row + chip buttons (mirrors the design's size group). */
.buybar .opt {
	margin: 0 0 var(--space-18);
}

.buybar .opt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
	margin-bottom: var(--space-9);
}

.buybar .opt-label {
	font-size: var(--text-13);
	font-weight: 600;
	letter-spacing: .2px;
}

.buybar .opt-value {
	color: var(--color-muted);
	font-weight: 500;
}

.buybar .reset_variations {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4, 4px);
	color: var(--color-muted);
	font-size: var(--text-12);
	text-decoration: none;
}

.buybar .reset_variations:hover {
	color: var(--color-primary);
}

/* Chip buttons — colour AND size render identically. */
.buybar .sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.buybar .size {
	min-width: 46px;
	padding: var(--space-9) var(--space-12);
	color: var(--color-text);
	font-size: var(--text-13);
	font-weight: 600;
	background: var(--surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-8);
	transition: border-color .12s, background .12s, color .12s;
}

.buybar .size:hover {
	border-color: #c7c7cc;
}

.buybar .size.is-active,
.buybar .size[aria-pressed="true"] {
	color: var(--on-primary);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.buybar .size.soldout,
.buybar .size:disabled {
	opacity: .45;
	text-decoration: line-through;
}

/* Soldout chips stay clickable so a tap shows the "unavailable" message. */
.buybar .size.soldout {
	cursor: pointer;
}

.buybar .size:disabled {
	cursor: not-allowed;
}

.buybar .size.soldout:hover,
.buybar .size:disabled:hover {
	border-color: var(--color-border);
}

/* Native selects stay in the DOM for WooCommerce's variation JS, but hidden. */
.buybar .bozpo-select-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.buybar .woocommerce-variation-price {
	margin: 0 0 var(--space-12);
}

.buybar .woocommerce-variation-price .price {
	color: var(--color-primary);
	font-weight: 700;
	font-size: var(--text-17);
}

/* Qty + add-to-cart line — the one row that flexes, like the simple buybar. */
.buybar .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-14);
}

/*
 * Variation add-to-cart states — the button is ALWAYS visible, and disabled when
 * the current selection is not a purchasable variation.
 *
 * WooCommerce never removes the button; in every non-purchasable state (no/partial
 * selection, no-matching combination, out-of-stock variation) it just adds
 * `.disabled` (+ wc-variation-selection-needed / wc-variation-is-unavailable) to the
 * button and `-disabled` to the wrapper. We render that as a clearly greyed,
 * non-interactive button — never a hidden button, and never WC's
 * "sorry / no matching combination" message.
 */

/* Keep the qty + button row visible even in the disabled state. */
.buybar .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: flex;
}

.buybar .single_add_to_cart_button.disabled,
.buybar .single_add_to_cart_button:disabled {
	color: var(--color-muted);
	background: var(--surface-soft);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none; /* also blocks WooCommerce's disabled-click alert() popup */
}

.buybar .single_add_to_cart_button.disabled:hover,
.buybar .single_add_to_cart_button:disabled:hover {
	background: var(--surface-soft);
	box-shadow: none;
}

/* Chosen combination is unavailable (sold-out or non-existent variation): make
   the greyed button read clearly as "unavailable" with a soft red tint. */
.buybar .single_add_to_cart_button.wc-variation-is-unavailable {
	color: var(--c-danger-ink);
	background: var(--c-danger-bg);
	border: 1px solid var(--c-danger-border);
}

/*
 * Unavailability messages. Two WooCommerce sources, styled as one red alert:
 *  - an existing but sold-out variation -> <p class="stock out-of-stock">
 *  - a non-existent combination         -> <p class="wc-no-matching-variations">
 */
.buybar .stock.out-of-stock,
.buybar .wc-no-matching-variations,
.buybar .bozpo-variation-unavailable {
	display: inline-flex;
	align-items: center;
	gap: var(--space-9);
	margin: var(--space-4) 0 var(--space-14);
	padding: var(--space-9) var(--space-13);
	color: var(--c-danger-ink);
	font-size: var(--text-13-5);
	font-weight: 600;
	background: var(--c-danger-bg);
	border: 1px solid var(--c-danger-border);
	border-radius: var(--radius-9);
}

.buybar .bozpo-variation-unavailable[hidden] {
	display: none;
}

/* Red "unavailable" icon (crossed circle) replaces the in-stock box icon. */
.buybar .stock.out-of-stock::before,
.buybar .wc-no-matching-variations::before,
.buybar .bozpo-variation-unavailable::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background-color: var(--c-danger-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.9' y1='4.9' x2='19.1' y2='19.1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.9' y1='4.9' x2='19.1' y2='19.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------- Mini trust ------------------------------ */
.mini-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	padding-top: var(--space-18);
	border-top: 1px solid var(--color-border);
}

.mini-trust div {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	color: var(--c-ink-body);
	font-size: var(--text-12-5);
}

.mini-trust svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--color-primary);
}

.mini-trust b {
	display: block;
	color: var(--color-text);
	font-size: var(--text-13);
}

/* ========================= Sticky section tabs ======================== */
.ptabs {
	position: sticky;
	top: var(--header-h, 68px);
	z-index: 30;
	background: var(--surface);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-ptabs);
}

.ptabs .wrap {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
}

.ptabs .wrap::-webkit-scrollbar {
	display: none;
}

.ptab {
	flex: none;
	margin-right: var(--space-28);
	padding: var(--space-16) var(--space-2);
	color: var(--color-muted);
	font-family: var(--font-display);
	font-size: var(--text-17);
	font-weight: 600;
	white-space: nowrap;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s;
}

.ptab:last-child {
	margin-right: 0;
}

.ptab:hover {
	color: var(--color-text);
}

.ptab.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* ------------------------- Tab content + aside ----------------------- */
.tabs-wrap {
	--ptabs-h: 58px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	align-items: start;
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-8) var(--wrap-pad) 0;
}

.tabs-main {
	min-width: 0;
}

.tabsec {
	margin: 0;
	padding: var(--space-30) 0 var(--space-6);
	scroll-margin-top: calc(var(--header-h, 68px) + var(--ptabs-h));
}

.tabsec-title {
	margin: 0 0 var(--space-14);
	font-family: var(--font-display);
	font-size: var(--text-22);
	font-weight: 700;
}

.tabsec-body {
	max-width: 760px;
	margin: 0;
	color: var(--c-ink-body);
	font-size: var(--text-14-5);
	line-height: var(--leading-165);
}

.tabsec-body > :last-child {
	margin-bottom: 0;
}

/* Attributes table (additional information tab). */
.tabsec-body .woocommerce-product-attributes {
	width: 100%;
	max-width: 560px;
	margin: 0;
	font-size: var(--text-14);
	border-collapse: collapse;
}

.tabsec-body .woocommerce-product-attributes th,
.tabsec-body .woocommerce-product-attributes td {
	padding: var(--space-9) 0;
	border-bottom: 1px solid var(--color-border);
}

.tabsec-body .woocommerce-product-attributes th {
	width: 45%;
	color: var(--color-muted);
	font-weight: 400;
	text-align: left;
}

.tabsec-body .woocommerce-product-attributes td {
	font-weight: 600;
	text-align: right;
}

.tabsec-body .woocommerce-product-attributes p {
	margin: 0;
}

/* Shipping section. */
.ship {
	display: flex;
	align-items: center;
	gap: var(--space-18);
	max-width: 760px;
}

.ship .dpd {
	flex: none;
	padding: var(--space-12) var(--space-16);
	color: var(--c-dpd-ink);
	font-family: var(--font-display);
	font-size: var(--text-26);
	font-weight: 700;
	line-height: 1;
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-10);
}

.ship p {
	margin: 0;
	color: var(--c-ink-body);
	font-size: var(--text-14-5);
	line-height: var(--leading-165);
}

/* Support help box. */
.help-box {
	margin-top: var(--space-8);
	padding: var(--space-24) var(--space-22);
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-14);
}

.help-av {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--space-14);
	color: var(--color-primary);
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-circle);
}

.help-av svg {
	width: 26px;
	height: 26px;
}

.help-box h4 {
	margin: 0 0 var(--space-8);
	font-family: var(--font-display);
	font-size: var(--text-19);
	font-weight: 700;
}

.help-box > p {
	margin: 0 0 var(--space-18);
	color: var(--color-muted);
	font-size: var(--text-13-5);
	line-height: var(--leading-155);
}

.help-list {
	margin: 0 0 var(--space-18);
	padding: 0;
	list-style: none;
}

.help-list li {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-11) 0;
	border-top: 1px solid var(--color-border);
}

.help-list li:first-child {
	padding-top: 0;
	border-top: 0;
}

.help-list .hi {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--color-primary);
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-10);
}

.help-list .hi svg {
	width: 17px;
	height: 17px;
}

.help-list li > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--color-text);
	font-size: var(--text-14);
	font-weight: 600;
}

.help-list li > span:last-child b {
	margin-bottom: 1px;
	color: var(--color-muted);
	font-size: var(--text-11);
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.help-list a {
	color: var(--color-text);
}

.help-list a:hover {
	color: var(--color-primary);
}

.help-cta {
	display: block;
	padding: var(--space-13);
	color: var(--on-primary);
	font-size: var(--text-14);
	font-weight: 600;
	text-align: center;
	background: var(--color-primary);
	border-radius: var(--radius-10);
	transition: background .15s;
}

.help-cta:hover {
	background: var(--color-primary-strong);
}

/* =========================== Related carousel ========================= */
.related {
	padding: var(--space-46) var(--wrap-pad) var(--space-8);
}

.rel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	margin: 0 0 var(--space-20);
}

.sec-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-24);
	font-weight: 700;
}

/* Carousel arrows — identical to the homepage "Odporúčame" nav. */
.rel-nav {
	display: flex;
	flex: none;
	gap: var(--space-8);
}

.rel-arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--color-text);
	background: var(--surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-circle);
}

.rel-arrow svg {
	width: 18px;
	height: 18px;
}

.rel-arrow:not(:disabled):hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.rel-arrow:disabled {
	opacity: .35;
	cursor: default;
}

.related .products {
	display: flex;
	gap: var(--space-18);
	margin: 0;
	padding: var(--space-2) var(--space-2) var(--space-10);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.related .products::-webkit-scrollbar {
	display: none;
}

/* While the user drags with the mouse, disable snap + smooth so the track
   follows the pointer 1:1 instead of stuttering between card boundaries. */
.related .products.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.related .products > li.product-card {
	flex: 0 0 78%;
	scroll-snap-align: start;
}

/* ============================== Breakpoints =========================== */
@media (min-width: 561px) {
	.crumb .wrap {
		font-size: var(--text-13);
	}

	.mini-trust {
		grid-template-columns: 1fr 1fr;
	}

	.related .products > li.product-card {
		flex-basis: 262px;
	}
}

@media (min-width: 981px) {
	.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-48);
	}

	.info-col {
		display: block;
	}

	.product-title {
		order: 0;
		margin-bottom: var(--space-16);
	}

	.product-title__name {
		font-size: var(--text-34);
	}

	.gallery {
		order: 0;
		position: sticky;
		top: calc(var(--header-h, 68px) + var(--space-16));
	}

	.info {
		order: 0;
	}

	.tabs-wrap {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--space-44);
	}

	.help-box {
		position: sticky;
		top: calc(var(--header-h, 68px) + var(--ptabs-h) + var(--space-14));
		margin-top: 0;
	}
}