/* =========================================================================
   Handknitted — Single product page
   -------------------------------------------------------------------------
   Layout from the Figma "Product Lopapeysa" frame (214:3442):
   product photo bleeds to the left viewport edge (700/1440 ≈ 48.6%),
   summary column on the right; divider + "Other recommendations" below.
   Card styles for the recommendations row come from wc-cards.css.
   ========================================================================= */

/* Product photo sits flush against the header hairline (design y=87):
   remove the generic .site-content padding on single product pages. */
.single-product .site-content { padding-block: 0; }

.site-main--product { padding-block: 0 3rem; }

/* ---- Two-column product layout ------------------------------------------ */
.site-main--product div.product {
	display: grid;
	/* photo column scales with the viewport below 1440 but CAPS at the
	   design's absolute 715px — otherwise the image grows too tall on
	   wide screens */
	grid-template-columns: minmax(0, min(48.6%, 715px)) minmax(0, 1fr);
	align-items: start;
}

/* Left: gallery, flush to the viewport edge */
.site-main--product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	opacity: 1 !important; /* Woo fades it in via JS; don't flash empty */
}
.site-main--product .woocommerce-product-gallery__wrapper { margin: 0; }
.site-main--product .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 715 / 905;   /* design's image box */
	max-height: 905px;
	/* fill the frame edge-to-edge (user decision 2026-07-16): the studio
	   shots have safe margins, and contain left white bars that broke the
	   flush-left bleed. The lightbox still shows the photo uncropped. */
	object-fit: cover;
	display: block;
	background: #fff;
}
/* No thumbnail strip (design: extra photos are reached with the arrows) */
.site-main--product .flex-control-thumbs { display: none !important; }

/* Prev/next arrows overlaid on the photo — the design shows bare WHITE
   chevrons, no ring or backing. The button stays 44px for a decent hit
   area but is itself invisible. Injected by product.js (2+ images only). */
.hk-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.15s ease;
	/* barely-there shadow so the white chevron survives white letterboxes */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.hk-gallery-nav:hover { opacity: 0.75; }
.hk-gallery-nav--prev { left: 16px; }
.hk-gallery-nav--next { right: 16px; }
.hk-gallery-nav svg { display: block; }

/* Right: summary column (x=771 → ~71px inner left padding, 65px right) */
.site-main--product .summary.entry-summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	/* content stretches to the design's 65px right margin — no fixed cap */
	padding: clamp(1.5rem, 3.6vw, 3.3rem) clamp(1rem, 4.5vw, 65px) 2rem clamp(1rem, 4.9vw, 71px);
}

/* ---- Category label / title / price ------------------------------------- */
/* Cyan bold Inter type/category label ("Unisex" / "Mens"), per the design */
.hk-product-cat {
	display: inline-block;
	font-family: var(--hk-font);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--hk-brand);
	line-height: 1.2;
	margin-bottom: 2rem;   /* generous gap before the title, per the design */
	text-decoration: none;
}
.hk-product-cat:hover { color: var(--hk-brand-dark); text-decoration: none; }

.site-main--product .product_title {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem);   /* 40px */
	line-height: 1.15;
	margin: 0 0 0.35rem;
}
/* !important: WooCommerce's own stylesheet (olive price, purple button)
   loads after this file with equal specificity.
   Design: price is LARGE but REGULAR weight (Nexa Regular ~34px). */
.site-main--product .summary p.price,
.site-main--product .summary p.price .woocommerce-Price-amount {
	font-family: "Nexa", var(--hk-font);
	font-weight: 400 !important;
	font-size: 2.125rem;
	color: var(--hk-ink) !important;
	margin: 0 0 0.5rem;
	line-height: 1.2;
}
.hk-tax-note {
	font-size: 0.8125rem;     /* 13px */
	color: #8b8b8b;
	margin: 0 0 1.75rem;
	line-height: 1.4;
}
/* Net price for orders shipped abroad, on its own line right under the tax
   note (design "Product Yarn": both lines the same small grey, tight). The
   pair keeps the design's gap before the Size/QTY rows, so the bottom margin
   moves down to whichever line comes last. */
.site-main--product .summary .hk-export-price {
	font-size: 0.8125rem;     /* 13px */
	color: #8b8b8b;
	margin: 0 0 1.75rem;
	line-height: 1.4;
}
.site-main--product .summary .hk-tax-note:has(+ .hk-export-price) { margin-bottom: 0.15rem; }
/* wc_price() wraps the amount in WooCommerce's own price spans, which its
   stylesheet colours and sizes for the big summary price. */
.site-main--product .summary .hk-export-price .woocommerce-Price-amount {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit !important;
	color: inherit !important;
}

/* ---- Variations form (Size / QTY / Add to cart) -------------------------- */
.site-main--product table.variations {
	border-collapse: collapse;
	margin: 0 0 0.5rem;
	width: 100%;
}
.site-main--product table.variations th.label,
.site-main--product table.variations td.value {
	border: 0;
	padding: 0.35rem 0;
	vertical-align: middle;
	text-align: left;
}
.site-main--product table.variations th.label {
	width: 66px;
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1.25rem;           /* ~20px, same label style as QTY */
	color: var(--hk-brand);       /* cyan, per the design */
}
.site-main--product table.variations th.label label { font-weight: 700; }

/* Native select is replaced by buttons (product.js); keep it for no-JS */
.hk-size-select--hidden { display: none !important; }
.hk-size-options {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}
.hk-size-option {
	background: none;
	border: 1px solid transparent;
	border-radius: 2px;
	padding: 0.15rem 0.45rem;
	font-family: "Nexa", var(--hk-font);
	font-size: 1.1875rem;  /* ~19px per the design (patterns override to 1rem) */
	color: var(--hk-ink);
	cursor: pointer;
	line-height: 1.2;
}
.hk-size-option:hover { color: var(--hk-brand); }
.hk-size-option.is-active { border-color: var(--hk-brand); } /* cyan box (design) */
.hk-size-option:disabled { color: #c3c7cb; cursor: not-allowed; }

/* ---- Yarn colour swatches (Product Yarn design: 46px circles, 9 per row) -- */
.site-main--product .hk-product-yarn table.variations th.label { display: none; }
.site-main--product .hk-product-yarn .hk-size-options {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	max-width: 525px;   /* ≈9 swatches per row, like the design */
}
.hk-size-option.hk-swatch {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	font-size: 0;       /* hide the colour name; it lives in the tooltip */
	color: transparent;
	cursor: pointer;
	position: relative;
	background-size: cover;      /* variation image fills the circle */
	background-position: center;
	background-repeat: no-repeat;
}
/* colours without an image: the design's grey placeholder circle */
.hk-size-option.hk-swatch--placeholder { background-color: #d9d9d9; }
/* colour name tooltip on hover/focus */
.hk-size-option.hk-swatch::after {
	content: attr(data-name);
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--hk-ink);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	pointer-events: none;
	z-index: 20;
}
.hk-size-option.hk-swatch:hover::after,
.hk-size-option.hk-swatch:focus-visible::after {
	opacity: 1;
	visibility: visible;
}
.hk-size-option.hk-swatch:hover {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hk-line);
}
.hk-size-option.hk-swatch.is-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hk-brand);
	border-color: transparent;
}
.hk-size-option.hk-swatch:disabled { opacity: 0.25; cursor: not-allowed; }

/* Sits inside the QTY flex row, pushed toward the design's x≈1051 position */
.hk-size-guide {
	margin-left: clamp(2rem, 9vw, 10.5rem);
	/* Design: Nexa Regular ~20px cyan, NO underline */
	font-family: "Nexa", var(--hk-font);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--hk-brand);
	text-decoration: none;
	white-space: nowrap;
}
.hk-size-guide:hover { text-decoration: underline; }
.hk-size-guide:hover { color: var(--hk-brand-dark); }

/* Hide Woo's "Clear" reset link */
.site-main--product .reset_variations { display: none !important; }

/* No magnifier badge on the photo (design) — clicking the image still opens
   the lightbox (wc-product-gallery-lightbox stays enabled). */
.site-main--product .woocommerce-product-gallery__trigger { display: none !important; }

/* QTY row, then the button stacked BELOW it (per the design) */
.site-main--product .woocommerce-variation-add-to-cart,
.site-main--product form.cart:not(.variations_form) {
	display: block;
}
.site-main--product form.cart { margin: 1.2rem 0 4.2rem; }
.site-main--product form.cart div.quantity {
	/* Woo floats the quantity div, which pulls the button up beside it */
	float: none !important;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.6rem !important;
}
.site-main--product form.cart .quantity::before {
	content: "QTY";
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1.25rem;       /* same label style as "Size" (design) */
	color: var(--hk-brand);   /* cyan, per the design */
}
.site-main--product form.cart .quantity .qty {
	width: 52px;
	height: 40px;
	border: 1px solid var(--hk-brand);  /* cyan box, per the design */
	border-radius: 2px;
	text-align: center;
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1rem;
	color: var(--hk-ink);
}
.site-main--product form.cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	max-width: 400px;
	height: 50px;
	background: var(--hk-brand-btn) !important;  /* beat Woo's purple */
	color: #fff !important;
	border: 0;
	border-radius: 2px;
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1.25rem;       /* ~20px per the design */
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}
.site-main--product form.cart .single_add_to_cart_button:hover { background: var(--hk-brand-btn-dark) !important; }
.site-main--product form.cart .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }

/* Variation price line inside the form duplicates the top price — hide it */
.site-main--product .woocommerce-variation-price { display: none; }

/* ---- Attribute grid ------------------------------------------------------ */
/* Inter bold labels over grey Inter values, roomy rows (per the design) */
.hk-product-attrs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem 2.5rem;
	margin: 0 0 2.4rem;
}
.hk-product-attrs__item dt {
	font-family: var(--hk-font);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--hk-ink);
	margin: 0 0 0.25rem;
}
.hk-product-attrs__item dd {
	margin: 0;
	font-size: 1.0625rem;
	color: #8b8b8b;
	line-height: 1.45;
}

/* ---- Description --------------------------------------------------------- */
.hk-product-description {
	color: #8b8b8b;           /* grey Inter body, per the design */
	font-size: 1.0625rem;
	line-height: 1.55;
}
.hk-product-description h3,
.hk-product-description h2 {
	font-family: var(--hk-font);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--hk-ink);
	margin: 0 0 0.4rem;
}
.hk-product-description p { margin: 0 0 1rem; }

/* ---- Pattern products (Product_Uppskriftir design) ------------------------
   Products in the Patterns category get the .hk-product-pattern class:
   cyan type label, grey garment subtitle, Size Chart link, language buttons
   as a boxed grid, and Note/Gauge/Needles/Wool accordions. */

/* (pattern type label now shares the unified cyan .hk-product-cat style) */

.hk-product-subtitle {
	font-family: "Nexa", var(--hk-font);
	font-size: 1.25rem;       /* "Pullover" ~20px grey */
	color: #a5a9ad;
	margin: 0 0 0.4rem;
}

.hk-size-chart-link {
	display: inline-block;
	font-family: "Nexa", var(--hk-font);
	font-size: 1rem;
	color: var(--hk-brand);
	text-decoration: none;
	margin: 0.75rem 0 1.25rem;
}
.hk-size-chart-link:hover { color: var(--hk-brand-dark); text-decoration: underline; }

/* Language selector: boxed 4-column button grid, no "Language" row label */
.site-main--product .hk-product-pattern table.variations th.label { display: none; }
.site-main--product .hk-product-pattern .hk-size-options {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
	width: 100%;
	max-width: 520px;
}
.site-main--product .hk-product-pattern .hk-size-option {
	border: 1px solid var(--hk-line);
	border-radius: 2px;
	padding: 0.6rem 0.9rem;
	text-align: left;
	font-size: 1rem;          /* ~17px grey per the design */
	color: #8b8b8b;
}
.site-main--product .hk-product-pattern .hk-size-option:hover {
	border-color: var(--hk-brand);
	color: var(--hk-brand);
}
.site-main--product .hk-product-pattern .hk-size-option.is-active {
	background: var(--hk-brand);
	border-color: var(--hk-brand);
	color: #fff;
}

/* (QTY label is cyan on all product pages now — see the base rule) */

/* Accordions: Note / Gauge / Needles / Wool */
.hk-product-acc {
	margin-top: 2rem;
	border-top: 1px solid var(--hk-line);
}
.hk-product-acc__item { border-bottom: 1px solid var(--hk-line); }
.hk-product-acc__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.95rem 0.25rem 0.95rem 0;
	font-family: var(--hk-font);   /* Inter bold, like the attr labels */
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--hk-ink);
}
.hk-product-acc__item summary::-webkit-details-marker { display: none; }
.hk-product-acc__item summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--hk-ink);
	border-bottom: 2px solid var(--hk-ink);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex: 0 0 auto;
	margin-left: 1rem;
}
.hk-product-acc__item[open] summary::after { transform: rotate(225deg); }
.hk-product-acc__body {
	padding: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--hk-ink-soft);
	line-height: 1.6;
}

@media (max-width: 560px) {
	.site-main--product .hk-product-pattern .hk-size-options { grid-template-columns: repeat(2, 1fr); }
}

/* ---- "Other recommendations" (related products) -------------------------- */
.site-main--product div.product > section.related.products {
	/* the section lives inside the gallery|summary grid — span BOTH columns
	   (otherwise it gets squeezed into the 48.6% gallery column) */
	grid-column: 1 / -1;
	width: 100%;
}
.site-main--product section.related.products {
	max-width: calc(1310px + 2 * var(--hk-gutter));
	margin: 3rem auto 0;
	padding: 3.4rem var(--hk-gutter) 0;
	border-top: 1px solid var(--hk-line);
}
.site-main--product section.related.products > h2 {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);  /* 30px, like "Best sellers" */
	color: var(--hk-brand);
	margin: 0 0 2rem;
}

/* ---- Store notices (added to cart, etc.) --------------------------------- */
.site-main--product .woocommerce-notices-wrapper .woocommerce-message,
.site-main--product .woocommerce-notices-wrapper .woocommerce-info {
	margin: 0;
	border-top-color: var(--hk-brand);
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
	.site-main--product div.product { grid-template-columns: 1fr; }
	.site-main--product .summary.entry-summary {
		padding: 1.5rem var(--hk-gutter) 0;
		max-width: none;
	}
	.hk-product-attrs { grid-template-columns: repeat(2, 1fr); }
}