/*
 * BUK Site Builder — front-end styles.
 *
 * Rule: no hardcoded colours, no invented nfd-* classes. Everything resolves
 * against Bluehost Blueprint's --wndb--* layer or WordPress preset variables,
 * so if the client changes palette or font pair in the site editor these
 * styles follow automatically.
 */

.bukw-prose {
	max-width: var(--wndb--max-w--prose, 68ch);
	color: var(--wndb--color--text, currentColor);
	line-height: 1.7;
}

.bukw-prose > * + * {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}

.bukw-prose h2 {
	font-size: var(--wp--preset--font-size--large, 1.25em);
	color: var(--wndb--color--text--contrast, currentColor);
	margin-top: var(--wp--preset--spacing--60, 2.25rem);
	line-height: 1.25;
}

.bukw-prose h3 {
	font-size: var(--wp--preset--font-size--medium, 1em);
	font-weight: 600;
	color: var(--wndb--color--text--contrast, currentColor);
	margin-top: var(--wp--preset--spacing--50, 1.5rem);
}

.bukw-prose ul,
.bukw-prose ol {
	padding-left: 1.35em;
}

.bukw-prose li + li {
	margin-top: 0.35em;
}

.bukw-prose a {
	color: var(--wndb--color--links, var(--wndb--color--primary, currentColor));
	text-underline-offset: 0.18em;
}

/* ---------- Collection page ---------- */

.bukw-collection-intro {
	margin-bottom: var(--wndb--gap--lg, 1.5rem);
}

.bukw-collection-copy {
	margin-top: var(--wndb--gap--2xl, 3rem);
	padding-top: var(--wndb--gap--xl, 2rem);
	border-top: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.08));
}

.bukw-collection-copy .bukw-prose {
	max-width: none;
	column-gap: var(--wndb--gap--2xl, 3rem);
}

@media (min-width: 900px) {
	.bukw-collection-copy .bukw-prose {
		columns: 2;
	}
	.bukw-collection-copy .bukw-prose h2,
	.bukw-collection-copy .bukw-prose h3 {
		column-span: all;
	}
}

/* Stat / trust strip — replaces the placeholder social proof. */

.bukw-facts {
	display: grid;
	gap: var(--wndb--gap--md, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.bukw-fact {
	padding: var(--wndb--p--md, 1.25rem);
	border: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.08));
	border-radius: var(--wndb--border--radius--md, 12px);
	background: var(--wndb--color--surface, transparent);
}

.bukw-fact__value {
	display: block;
	font-size: var(--wp--preset--font-size--large, 1.75em);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wndb--color--text--contrast, currentColor);
}

.bukw-fact__label {
	display: block;
	margin-top: 0.35em;
	font-size: var(--wp--preset--font-size--small, 0.85em);
	color: var(--wndb--color--text--faded, currentColor);
}

/* ---------- Cards / related articles ---------- */

.bukw-related {
	margin-top: var(--wndb--gap--2xl, 3rem);
}

.bukw-related > h2 {
	margin-bottom: var(--wndb--gap--md, 1rem);
}

.bukw-grid {
	display: grid;
	gap: var(--wndb--gap--lg, 1.5rem);
}

.bukw-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bukw-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.08));
	border-radius: var(--wndb--border--radius--md, 12px);
	background: var(--wndb--color--surface, transparent);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.bukw-card {
		transition: none;
	}
}

.bukw-card:hover,
.bukw-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--wndb--shadow--sm, 0 6px 20px rgba(0, 0, 0, 0.08));
}

.bukw-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wndb--color--subtle, rgba(0, 0, 0, 0.04));
}

.bukw-card__media img,
.bukw-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bukw-card__ph {
	display: block;
	width: 100%;
	height: 100%;
}

.bukw-card__body {
	display: block;
	padding: var(--wndb--p--sm, 1rem);
}

.bukw-card__title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.bukw-card__meta {
	display: block;
	margin-top: 0.4em;
}

/* ---------- Article body ---------- */

.bukw-article-toc {
	padding: var(--wndb--p--md, 1.25rem);
	border-left: 3px solid var(--wndb--color--primary, currentColor);
	background: var(--wndb--color--subtle, rgba(0, 0, 0, 0.03));
	border-radius: var(--wndb--border--radius--sm, 6px);
}

.bukw-article-toc ul {
	margin: 0.5em 0 0;
}

.bukw-credit {
	display: block;
	margin-top: 0.5em;
	font-size: 0.78em;
	color: var(--wndb--color--text--faded, currentColor);
}

/* Product grid legibility on collection pages — titles wrap to two lines
   consistently so cards align on a row. */

.bukw-tightened .wc-block-product-template .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

/* ==========================================================================
   Hero
   ==========================================================================
   The image on this site is a product cutout on a white background, so it
   cannot fill an edge-to-edge box the way a lifestyle photo can — cropping it
   with object-fit:cover slices the product. "contain" on a white surface with
   internal padding gives it room and reads as intentional.
   ========================================================================== */

.bukw-hero__media {
	margin: 0;
	border-radius: var(--wndb--border--radius--lg, 20px);
	overflow: hidden;
	aspect-ratio: var(--bukw-hero-ratio, 4 / 3);
	background: var(--wndb--color--white, #fff);
	border: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.07));
}

.bukw-hero__media img {
	width: 100%;
	height: 100%;
	display: block;
}

.bukw-fit-cover.bukw-hero__media img {
	object-fit: cover;
}

.bukw-fit-contain.bukw-hero__media {
	padding: clamp(1rem, 3vw, 2.5rem);
}

.bukw-fit-contain.bukw-hero__media img {
	object-fit: contain;
}

/* ==========================================================================
   Category cards
   ==========================================================================
   Replaces the three-per-row column layout. An auto-fill grid means the final
   row never leaves a hole, and the cards sit in a real surface so the white
   product cutouts stop bleeding into the grey page background.
   ========================================================================== */

.bukw-cat-grid {
	display: grid;
	gap: var(--wndb--gap--lg, 1.5rem);
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: stretch;
}

/* Each card declares its own span via --bukw-span, set by the row planner in
   PHP. Six columns divides cleanly into two-up (span 3) and three-up (span 2)
   rows, so five categories arrange as 2 + 3 with no gap. */
.bukw-cat-grid > .bukw-cat-card {
	grid-column: span var(--bukw-span, 2);
}

/* Two breakpoints down, spans are overridden rather than the grid rebuilt —
   that keeps the source order intact. */
@media (max-width: 1024px) {
	.bukw-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bukw-cat-grid > .bukw-cat-card {
		grid-column: span 1;
	}
}

@media (max-width: 600px) {
	.bukw-cat-grid {
		grid-template-columns: 1fr;
	}
}

.bukw-cat-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wndb--color--surface, #fff);
	border: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.08));
	border-radius: var(--wndb--border--radius--md, 14px);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.bukw-cat-card:hover {
	transform: translateY(-3px);
	border-color: var(--wndb--color--primary, currentColor);
	box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.22);
}

.bukw-cat-card:focus-within {
	border-color: var(--wndb--color--primary, currentColor);
}

@media (prefers-reduced-motion: reduce) {
	.bukw-cat-card,
	.bukw-cat-card:hover {
		transition: none;
		transform: none;
	}
}

.bukw-cat-card__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--wndb--color--white, #fff);
	border-bottom: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.06));
	overflow: hidden;
}

.bukw-cat-card__media a,
.bukw-cat-card__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.bukw-cat-card__media--empty {
	background: var(--wndb--color--subtle, rgba(0, 0, 0, 0.04));
}

/* Cutouts get breathing room and are never cropped. */
.bukw-fit-contain .bukw-cat-card__media {
	padding: 1.15rem;
}

.bukw-fit-contain .bukw-cat-card__media img {
	object-fit: contain;
	transition: transform 320ms ease;
}

.bukw-fit-cover .bukw-cat-card__media img {
	object-fit: cover;
	transition: transform 320ms ease;
}

.bukw-cat-card:hover .bukw-cat-card__media img {
	transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
	.bukw-cat-card:hover .bukw-cat-card__media img {
		transform: none;
	}
}

.bukw-cat-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.5rem;
	padding: var(--wndb--p--md, 1.25rem);
}

.bukw-cat-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.25em);
	font-weight: 600;
	line-height: 1.25;
}

/* The live cards render the heading as an underlined green link, which reads
   as body copy rather than a card title. */
.bukw-cat-card__title a {
	color: var(--wndb--color--text--contrast, currentColor);
	text-decoration: none;
}

.bukw-cat-card:hover .bukw-cat-card__title a {
	color: var(--wndb--color--primary, currentColor);
}

.bukw-cat-card__desc {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.95em;
	line-height: 1.55;
	color: var(--wndb--color--text--faded, currentColor);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bukw-cat-card__cta {
	margin: 0;
	font-size: 0.9em;
	font-weight: 600;
}

.bukw-cat-card__cta a {
	color: var(--wndb--color--primary, currentColor);
	text-decoration: none;
}

.bukw-cat-card__cta a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Make the whole card clickable without nesting links. */
.bukw-cat-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bukw-cat-card {
	position: relative;
}

.bukw-cat-card__cta a {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Facts strip — tighter than the first pass
   ========================================================================== */

.bukw-facts {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.bukw-fact {
	padding: 1.1rem 1.25rem;
	background: var(--wndb--color--surface, transparent);
}

.bukw-fact__value {
	font-size: 1.6em;
	letter-spacing: -0.01em;
}

.bukw-fact__label {
	line-height: 1.4;
}

/* ==========================================================================
   Site-wide polish — only applied when body.bukw-polish is present
   ==========================================================================
   Everything below is scoped to that class so it can be switched off from the
   settings page without editing CSS. Deliberately additive: spacing, focus
   states and card treatment. No colour or type-scale overrides, because those
   belong to the theme's palette and font pair.
   ========================================================================== */

body.bukw-polish :where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wndb--color--primary, currentColor);
	outline-offset: 2px;
	border-radius: 3px;
}

body.bukw-polish ::selection {
	background: var(--wndb--color--primary, #117a4d);
	color: #fff;
}

/* Product grid cards, on the shop and every collection page. Same reasoning
   as the category cards: the catalogue is cutouts on white. */

body.bukw-polish .wc-block-product-template .wc-block-product,
body.bukw-polish .wp-block-woocommerce-product-template > li {
	display: flex;
	flex-direction: column;
	padding: 0.9rem;
	background: var(--wndb--color--surface, #fff);
	border: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.07));
	border-radius: var(--wndb--border--radius--md, 12px);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

body.bukw-polish .wc-block-product-template .wc-block-product:hover,
body.bukw-polish .wp-block-woocommerce-product-template > li:hover {
	border-color: var(--wndb--color--borders-strong, rgba(0, 0, 0, 0.18));
	box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.25);
}

body.bukw-polish .wc-block-product-template .wc-block-components-product-image {
	margin-bottom: 0.65rem;
	border-radius: var(--wndb--border--radius--sm, 8px);
	overflow: hidden;
	background: #fff;
}

body.bukw-polish .wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	mix-blend-mode: normal;
}

/* Titles wrap to a consistent two lines so prices align across a row. */
body.bukw-polish .wc-block-product-template .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	line-height: 1.3;
	font-size: 0.98em;
}

body.bukw-polish .wc-block-product-template .wc-block-components-product-price {
	margin-top: auto;
	font-weight: 700;
}

body.bukw-polish .wc-block-product-template .wp-block-button__link,
body.bukw-polish .wc-block-product-template .wc-block-components-product-button a {
	width: 100%;
	text-align: center;
	margin-top: 0.6rem;
}

/* Breadcrumbs and toolbars */

body.bukw-polish .wc-block-breadcrumbs {
	margin-bottom: 0.75rem;
	opacity: 0.85;
}

body.bukw-polish .bukw-toolbar {
	padding-block: 0.6rem;
	border-block: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.07));
	align-items: center;
	margin-bottom: var(--wndb--gap--lg, 1.5rem);
}

/* Refine panel */

body.bukw-polish .bukw-filters-col {
	position: sticky;
	top: 2rem;
	align-self: start;
}

body.bukw-polish .bukw-filters {
	padding: 1rem;
	border: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.08));
	border-radius: var(--wndb--border--radius--md, 12px);
	background: var(--wndb--color--surface, transparent);
}

@media (max-width: 781px) {
	body.bukw-polish .bukw-filters-col {
		position: static;
	}
}

/* Pagination */

body.bukw-polish .wp-block-query-pagination {
	gap: 0.4rem;
	margin-top: var(--wndb--gap--xl, 2rem);
}

body.bukw-polish .wp-block-query-pagination a,
body.bukw-polish .wp-block-query-pagination .page-numbers {
	padding: 0.4em 0.75em;
	border-radius: var(--wndb--border--radius--sm, 6px);
	text-decoration: none;
	border: 1px solid transparent;
}

body.bukw-polish .wp-block-query-pagination a:hover {
	border-color: var(--wndb--color--borders, rgba(0, 0, 0, 0.15));
}

body.bukw-polish .wp-block-query-pagination .current {
	background: var(--wndb--color--primary, currentColor);
	color: #fff;
}

/* Forms — the contact and enquiry pages use WPForms */

body.bukw-polish .wpforms-field input[type="text"],
body.bukw-polish .wpforms-field input[type="email"],
body.bukw-polish .wpforms-field input[type="tel"],
body.bukw-polish .wpforms-field select,
body.bukw-polish .wpforms-field textarea {
	border-radius: var(--wndb--border--radius--sm, 6px);
	border: 1px solid var(--wndb--color--borders, rgba(0, 0, 0, 0.18));
	padding: 0.6em 0.75em;
}

body.bukw-polish .wpforms-field input:focus,
body.bukw-polish .wpforms-field textarea:focus {
	border-color: var(--wndb--color--primary, currentColor);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wndb--color--primary, #117a4d) 18%, transparent);
	outline: none;
}

/* Long-form pages — About, Wholesale Solutions, the policy pages — are dense
   walls of text at full container width. */

body.bukw-polish .bukw-prose,
body.bukw-polish .entry-content > p {
	text-wrap: pretty;
}

body.bukw-polish img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Wide cards — the two-up row
   ==========================================================================
   A card that spans half the grid gets a horizontal layout instead of simply
   scaling up: a 4:3 image stretched to half the page width would dwarf the
   copy beside it.
   ========================================================================== */

@media (min-width: 1025px) {
	.bukw-cat-card--wide {
		flex-direction: row;
		align-items: stretch;
	}

	.bukw-cat-card--wide .bukw-cat-card__media {
		flex: 0 0 44%;
		aspect-ratio: auto;
		border-bottom: 0;
		border-right: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.06));
		min-height: 15rem;
	}

	.bukw-cat-card--wide .bukw-cat-card__body {
		justify-content: center;
		gap: 0.6rem;
		padding: var(--wndb--p--lg, 1.75rem);
	}

	.bukw-cat-card--wide .bukw-cat-card__title {
		font-size: var(--wp--preset--font-size--x-large, 1.6em);
	}

	.bukw-cat-card--wide .bukw-cat-card__desc {
		-webkit-line-clamp: 4;
		font-size: 1em;
	}
}

/* ==========================================================================
   Full-bleed hero
   ==========================================================================
   The image runs to the viewport edge on the right; copy stays aligned with
   the page grid on the left. The section takes most of the viewport height so
   it lands like a hero rather than a banner. Inside bleed mode, the fit and
   ratio settings on the figure are overridden — a bleed hero is always
   cover-fitted and sized by the section, never by an aspect box.
   ========================================================================== */

.bukw-hero--bleed {
	/* Escape the constrained content column no matter how the theme treats
	   alignfull: full viewport width, recentred with a negative margin. */
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-block: 0 !important;
	background: var(--wndb--color--surface, transparent);
	overflow: hidden;
}

.bukw-hero--bleed__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	min-height: min(78vh, 720px);
	max-width: none;
}

.bukw-hero--bleed__copy {
	/* Left edge lines up with the page container; right side breathes. */
	padding-left: max(var(--wp--style--root--padding-left, 24px), calc((100vw - var(--wndb--container, 1200px)) / 2));
	padding-right: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(2rem, 6vh, 4rem);
}

.bukw-hero--bleed__media {
	position: relative;
	align-self: stretch;
	min-height: 320px;
}

/* Whatever the figure was built as, in bleed mode it fills the column. */
.bukw-hero--bleed__media .bukw-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	aspect-ratio: auto;
	background: transparent;
}

.bukw-hero--bleed__media .bukw-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
}

/* A soft scrim where the image meets the copy, so the transition is not a
   hard vertical line against the page background. */
.bukw-hero--bleed__media::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: clamp(2rem, 8vw, 7rem);
	background: linear-gradient(90deg, var(--wndb--color--surface, #f4f4f4), transparent);
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 900px) {
	.bukw-hero--bleed__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/* Image first on mobile, copy under it, both full width. */
	.bukw-hero--bleed__media {
		order: -1;
		min-height: 46vh;
	}

	.bukw-hero--bleed__media::before {
		display: none;
	}

	.bukw-hero--bleed__copy {
		padding: 1.5rem var(--wp--style--root--padding-left, 24px) 2rem;
	}
}

/* ==========================================================================
   Site header — compact mode
   ==========================================================================
   Blueprint's stock header ships with generous block padding on the <header>
   element itself, an empty spacer row above the logo group, and a Site Logo
   sized 64px+ that (on both client sites) also embeds a small "buktools.com"
   or brand line, so it reads much taller than a wordmark of the same pixel
   height. On mobile these compound: the header can eat 40% of the viewport
   before any content shows.

   These rules assume the plugin's site-wide polish is on (body.bukw-polish),
   so they never affect a site that has explicitly opted out.
   ========================================================================== */

body.bukw-polish header.wp-block-template-part,
body.bukw-polish .wp-site-blocks > header {
	padding-block: 0 !important;
}

/* The row wrapping logo + nav — target its inner group without needing an
   anchor to be added in the site editor. */
body.bukw-polish header.wp-block-template-part > .wp-block-group,
body.bukw-polish header.wp-block-template-part .wp-block-group.is-layout-flex:first-child {
	padding-block: 0.5rem;
	min-height: 0;
}

/* Empty spacers and empty groups inside the header — a common source of the
   white band above the logo. Collapses only nodes that have no rendered
   content, so intentional spacing elsewhere is untouched. */
body.bukw-polish header.wp-block-template-part .wp-block-spacer {
	height: 0 !important;
	min-height: 0 !important;
}

body.bukw-polish header.wp-block-template-part .wp-block-group:empty {
	display: none;
}

/* Logo size, capped rather than forced — a 40-48px cap reads compact without
   pushing the design towards "app bar". */
body.bukw-polish header.wp-block-template-part .wp-block-site-logo img {
	max-height: 44px;
	width: auto;
}

/* Site title, if present, aligns with the logo baseline rather than growing
   the row. */
body.bukw-polish header.wp-block-template-part .wp-block-site-title,
body.bukw-polish header.wp-block-template-part .wp-block-site-title a {
	font-size: 1.05rem;
	line-height: 1.2;
	margin: 0;
}

/* Navigation — a touch smaller than body copy, and less generous vertical
   padding on each item. */
body.bukw-polish header.wp-block-template-part .wp-block-navigation {
	font-size: 0.95rem;
}

body.bukw-polish header.wp-block-template-part .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

/* The account and cart icons that sit on the right — shrink to nav weight. */
body.bukw-polish header.wp-block-template-part .wc-block-mini-cart__button,
body.bukw-polish header.wp-block-template-part .wp-block-loginout a,
body.bukw-polish header.wp-block-template-part .woocommerce-mini-cart-contents {
	padding-block: 0.35rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 782px) {
	body.bukw-polish header.wp-block-template-part > .wp-block-group,
	body.bukw-polish header.wp-block-template-part .wp-block-group.is-layout-flex:first-child {
		padding-inline: 1rem;
		padding-block: 0.4rem;
		gap: 0.5rem;
	}

	/* Logo takes what it needs, nav toggle stays right — the stock header
	   sometimes wraps into three stacked rows on narrow viewports; force a
	   single row. */
	body.bukw-polish header.wp-block-template-part .wp-block-group.is-layout-flex {
		flex-wrap: nowrap;
	}

	body.bukw-polish header.wp-block-template-part .wp-block-site-logo img {
		max-height: 36px;
	}

	/* Off-canvas menu open state — Blueprint's default gets a fixed viewport
	   height that iOS handles badly; use dynamic viewport height where the
	   browser supports it. */
	body.bukw-polish .wp-block-navigation__responsive-container.is-menu-open {
		min-height: 100dvh;
	}

	/* The nav hamburger button — 44px hitbox as the accessibility target. */
	body.bukw-polish header.wp-block-template-part .wp-block-navigation__responsive-container-open,
	body.bukw-polish header.wp-block-template-part .wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		padding: 0.5rem;
	}
}

/* ---------- Body offset ----------
   When the plugin trims the header, the first block on the page can end up
   too close to it. A small top-of-main padding restores rhythm without
   restoring the whitespace we just removed. */
body.bukw-polish .wp-block-post-content > *:first-child,
body.bukw-polish main > *:first-child {
	margin-top: 0;
}

body.bukw-polish main {
	padding-top: clamp(0.75rem, 2vw, 1.5rem);
}

/* ==========================================================================
   Header — .bukw-header
   ==========================================================================
   Only applied when the header row carries the bukw-header class, so this
   doesn't leak into headers we haven't touched. Kept variable-driven so a
   Styles change (font size, colours) still flows through.
   ========================================================================== */

.bukw-header {
	min-height: 0;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.bukw-header .wp-block-site-logo img {
	/* No max-height — the block's own Image width setting governs the size.
	   A CSS cap here just fights the width setting when the source PNG is
	   square, and the image collapses to whichever constraint is tighter. */
	width: auto;
	display: block;
}

.bukw-header__nav {
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.bukw-header .wp-block-navigation {
	font-size: 0.95rem;
}

.bukw-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

.bukw-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	padding-inline: 0.15rem;
}

/* Utilities strip (cart + account) — tighten the icon spacing */
.bukw-header__utils {
	gap: 0.25rem !important;
}

.bukw-header__utils .wp-block-woocommerce-mini-cart-contents,
.bukw-header__utils .wp-block-woocommerce-mini-cart,
.bukw-header__utils .wc-block-customer-account {
	padding: 0.35rem;
	line-height: 1;
}

/* Kill any stray vertical space above the header on both desktop and mobile.
   Blueprint's header pattern sometimes inherits margin from the outer template
   wrapper, which reads as an empty band above the row. */
.bukw-header {
	margin-block-start: 0 !important;
}

.wp-site-blocks > header:first-child,
.wp-site-blocks > .bukw-header:first-child {
	margin-top: 0 !important;
}



/* Shop-page product category filter row — WooCommerce renders each term
   with layout hints that break when names span more than one word. Force
   a consistent baseline. */
body.bukw-polish .wp-block-woocommerce-product-collection .wc-block-product-template ~ *,
body.bukw-polish .woocommerce-ordering,
body.bukw-polish .wp-block-woocommerce-product-filter-taxonomy,
body.bukw-polish .wc-block-product-categories-list,
body.bukw-polish .term-description + ul,
body.bukw-polish .wp-block-post-terms {
	line-height: 1.6;
}

/* The category chip row itself on archive-product / shop page */
body.bukw-polish .wc-block-product-categories,
body.bukw-polish .wp-block-term-description + nav,
body.bukw-polish .products-header,
body.bukw-polish .woocommerce-shop .taxonomy-product_cat {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.75rem;
	align-items: baseline;
	font-size: 1.05rem;
	margin-block: var(--wndb--gap--lg, 1.5rem) var(--wndb--gap--xl, 2rem);
}

body.bukw-polish .wc-block-product-categories a,
body.bukw-polish .woocommerce-shop .taxonomy-product_cat a {
	white-space: nowrap;
	font-size: 1.05rem !important;
	font-weight: 500;
}

/* ==========================================================================
   ==========================================================================
   MOBILE & TABLET LAYER — single source of truth
   ==========================================================================
   Everything below overrides the desktop rules above at two breakpoints:
   1024px (tablet) and 782px (phone — matching WordPress's own navigation
   breakpoint so our rules and the hamburger switch at the same moment).
   Sits at the end of the file deliberately: at equal specificity, these win.
   ========================================================================== */

/* ----- Base mobile hygiene, all widths ----- */

.bukw-header,
.bukw-hero,
.bukw-cat-grid,
.bukw-facts {
	box-sizing: border-box;
}

.bukw-header img,
.bukw-hero img,
.bukw-cat-card img {
	max-width: 100%;
	height: auto;
}

/* ----- Tablet: 783–1024 ----- */

@media (max-width: 1024px) {
	/* Collection page: refine column becomes full-width above the grid */
	.bukw-filters-col {
		position: static !important;
		flex-basis: 100% !important;
	}

	/* Hero bleed: keep the split but ease the height */
	.bukw-hero--bleed__inner {
		min-height: min(60vh, 560px);
	}
}

/* ----- Phone: ≤782 ----- */

@media (max-width: 782px) {

	/* ---------- Page-level overflow guard ----------
	   If anything renders wider than the viewport, iOS Safari zooms the whole
	   layout out to fit it — which reads as "everything went narrow". Clip
	   horizontal overflow at the root so a single overflowing element can't
	   shrink the entire page. */
	html, body {
		overflow-x: clip;
		max-width: 100%;
	}

	.wp-site-blocks {
		overflow-x: clip;
		padding-block-start: 0 !important;
	}

	/* Whitespace band around the header. Scoped to the bukw-header part and
	   its immediate surroundings only — a bare `header .wp-block-spacer`
	   hide clashes with WonderBlocks patterns that use spacers structurally. */
	.bukw-header .wp-block-spacer,
	header:has(.bukw-header) > .wp-block-spacer,
	.wp-site-blocks > .wp-block-spacer:first-child {
		display: none !important;
	}

	.bukw-header .wp-block-group:empty,
	header:has(.bukw-header) .wp-block-group:empty {
		display: none !important;
	}

	/* The gap between header and the first content section */
	.wp-site-blocks > main,
	.wp-site-blocks .bukw-hero {
		margin-block-start: 0 !important;
	}

	.bukw-hero {
		padding-block-start: 0.75rem !important;
	}

	/* ---------- Header ---------- */

	.bukw-header {
		padding-block: 6px !important;
		padding-inline: 16px !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 0.75rem;
		margin-block-start: 0 !important;
		min-height: 56px;
	}

	.bukw-header__brand {
		flex: 0 1 auto;
		min-width: 0;
		margin-right: auto;
		display: flex;
		align-items: center;
	}

	.bukw-header .wp-block-site-logo {
		max-width: 46vw;
	}

	.bukw-header .wp-block-site-logo img {
		width: 100%;
		height: auto;
		max-width: 170px;
		display: block;
	}

	/* Right cluster: cart, account, then hamburger last (thumb corner) */
	.bukw-header__nav {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 0.9rem;
	}

	.bukw-header__nav .wp-block-navigation {
		order: 2;
	}

	.bukw-header__utils {
		order: 1;
		display: flex;
		align-items: center;
		gap: 0.7rem !important;
	}

	/* 44px minimum touch targets on every interactive header element */
	.bukw-header__nav .wp-block-navigation__responsive-container-open,
	.bukw-header__utils .wc-block-mini-cart__button,
	.bukw-header__utils .wc-block-customer-account > a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.3rem;
	}

	/* The open mobile menu overlay: readable size, breathing room */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.5rem 1.25rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.15rem;
		padding-block: 0.65rem;
	}

	/* ---------- Hero: boxed ---------- */

	.bukw-hero .wp-block-columns {
		gap: 1rem !important;
	}

	.bukw-hero__media {
		aspect-ratio: 16 / 10;
	}

	.bukw-fit-contain.bukw-hero__media {
		padding: 1rem;
	}

	/* ---------- Hero: bleed ---------- */

	.bukw-hero--bleed__inner {
		display: block !important;
		min-height: 0;
	}

	.bukw-hero--bleed {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.bukw-hero--bleed__media {
		position: relative;
		width: 100%;
		height: 42vh;
		min-height: 240px;
		max-height: 400px;
		order: initial;
	}

	.bukw-hero--bleed__media::before {
		display: none;
	}

	.bukw-hero--bleed__copy {
		width: 100%;
		padding: 1.25rem 16px 1.75rem;
	}

	/* Headings scale down instead of wrapping awkwardly */
	.bukw-hero h1,
	.bukw-hero--bleed__copy h1 {
		font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
		line-height: 1.15;
	}

	/* Buttons: comfortable tap size, stack if they don't fit */
	.bukw-hero .wp-block-buttons,
	.bukw-hero--bleed__copy .wp-block-buttons {
		gap: 0.6rem;
	}

	.bukw-hero .wp-block-button__link,
	.bukw-hero--bleed__copy .wp-block-button__link {
		padding: 0.7em 1.3em;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* ---------- Section rhythm ----------
	   Blueprint's nfd-p / nfd-py utility paddings supply section spacing on
	   desktop; if that option CSS loads late or is purged differently on
	   mobile, sections butt together. Guarantee a floor of spacing on the
	   plugin's own sections regardless of the utility layer. */
	.bukw-facts,
	.bukw-cat-grid,
	.bukw-related,
	.bukw-hero {
		margin-block-end: 1.75rem;
	}

	.wp-block-group:has(> .bukw-cat-grid),
	.wp-block-group:has(> .bukw-facts) {
		padding-block: 1rem;
	}

	/* ---------- Facts strip: 2×2 grid ---------- */

	.bukw-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.bukw-fact {
		padding: 0.85rem 0.9rem;
	}

	.bukw-fact__value {
		font-size: 1.3em;
	}

	/* ---------- Category cards: single column, capped media ---------- */

	.bukw-cat-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-flow: row !important;
		grid-auto-rows: auto !important;
		align-items: start !important;
		gap: 0.75rem !important;
		columns: auto !important;
		column-count: auto !important;
	}

	.bukw-cat-grid > .bukw-cat-card {
		grid-column: auto / span 1 !important;
		grid-row: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		margin: 0 !important;
		transform: none !important;
		position: relative;
	}

	.bukw-cat-grid > .bukw-cat-card:hover {
		transform: none !important;
	}

	/* Compact card at half-width: tighter type, shorter media, smaller body */
	.bukw-cat-card__title {
		font-size: 1.02rem;
	}

	.bukw-cat-card__cta {
		font-size: 0.82rem;
	}

	/* Wide-card horizontal layout resets to the standard stacked card */
	.bukw-cat-card--wide {
		flex-direction: column;
	}

	.bukw-cat-card--wide .bukw-cat-card__media {
		flex: none;
		border-right: 0;
		border-bottom: 1px solid var(--wndb--color--borders-light, rgba(0, 0, 0, 0.06));
		min-height: 0;
	}

	.bukw-cat-card__media {
		aspect-ratio: 4 / 3;
	}

	.bukw-fit-contain .bukw-cat-card__media {
		padding: 0.6rem;
	}

	.bukw-cat-card__body {
		padding: 0.65rem 0.75rem 0.8rem;
		gap: 0.3rem;
	}

	.bukw-cat-card--wide .bukw-cat-card__title {
		font-size: var(--wp--preset--font-size--large, 1.25em);
	}

	.bukw-cat-card__desc {
		-webkit-line-clamp: 2;
	}

	/* ---------- Collection pages ---------- */

	.bukw-collection .wp-block-columns {
		gap: 0.75rem !important;
	}

	body.bukw-polish .bukw-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
		padding-block: 0.5rem;
	}

	/* Product grid: 2-up on phones — one column wastes scroll, three is
	   unreadably small. Scoped to grids this plugin renders (.nfd-wc-products
	   is the class our homepage/collection markup sets) plus the polish
	   opt-in — NOT every Woo grid on the site, so Bluehost/WonderBlocks
	   patterns keep their own layout. */
	body.bukw-polish .wc-block-product-template,
	.bukw-collection .wc-block-product-template,
	.nfd-wc-products .wc-block-product-template {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.6rem !important;
	}

	body.bukw-polish .wc-block-product-template .wc-block-product,
	body.bukw-polish .wp-block-woocommerce-product-template > li,
	.bukw-collection .wc-block-product-template > li,
	.nfd-wc-products .wc-block-product-template > li,
	.nfd-wc-products .wc-block-product {
		/* WooCommerce sizes each item with width: calc(25% - gap) for its own
		   flex layout. Inside our 2-col grid those widths make items tiny in
		   wide tracks — and can overflow the viewport. Fill the track. */
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0.6rem;
	}

	/* Cards size to their own content — stretch created the dead band
	   between the image and the title in the 2-up grid. */
	body.bukw-polish .wc-block-product-template,
	.bukw-collection .wc-block-product-template,
	.nfd-wc-products .wc-block-product-template {
		align-items: start !important;
	}

	.nfd-wc-products .wc-block-components-product-image,
	.nfd-wc-products .wp-block-woocommerce-product-image,
	.nfd-wc-products .wc-block-product img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		margin: 0 0 0.4rem !important;
	}

	/* Title clamp must not depend on the polish body class — image 3 showed
	   30-word product names rendering in full because the clamp lived behind
	   body.bukw-polish only. Clamp titles in any product grid on mobile. */
	.nfd-wc-products .wp-block-post-title,
	.bukw-collection .wp-block-post-title,
	body.bukw-polish .wc-block-product-template .wp-block-post-title {
		display: -webkit-box !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.88em;
		line-height: 1.3;
		min-height: 0;
		margin-bottom: 0.25rem;
	}

	/* Kill the dead vertical band between title and price — Woo's flex
	   column stretches children apart when the card has leftover height. */
	.nfd-wc-products .wc-block-product > div,
	.nfd-wc-products li > div,
	body.bukw-polish .wc-block-product-template .wc-block-product > div {
		gap: 0.25rem !important;
	}

	.nfd-wc-products .wp-block-post-terms,
	body.bukw-polish .wc-block-product-template .wp-block-post-terms {
		font-size: 0.78em;
		margin: 0 0 0.15rem !important;
	}

	.nfd-wc-products .wc-block-components-product-price,
	body.bukw-polish .wc-block-product-template .wc-block-components-product-price {
		margin-top: 0 !important;
	}

	body.bukw-polish .wc-block-product-template .wp-block-button__link {
		font-size: 0.85em;
		padding: 0.55em 0.6em;
		min-height: 42px;
	}

	/* Supporting copy under the grid: single column, never two */
	.bukw-collection-copy .bukw-prose {
		columns: 1 !important;
	}

	/* ---------- Cards / related articles: horizontal swipe ---------- */

	.bukw-grid--3 {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 0.75rem;
		padding-bottom: 0.5rem;
		-webkit-overflow-scrolling: touch;
	}

	.bukw-grid--3 > .bukw-card {
		flex: 0 0 78%;
		max-width: 320px;
		scroll-snap-align: start;
	}

	/* ---------- Prose & long-form ---------- */

	.bukw-prose {
		font-size: 1.02rem;
		line-height: 1.65;
	}

	.bukw-prose h2 {
		font-size: 1.25rem;
	}

	/* ---------- Pagination: real touch targets ---------- */

	body.bukw-polish .wp-block-query-pagination a,
	body.bukw-polish .wp-block-query-pagination .page-numbers {
		min-width: 42px;
		min-height: 42px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ----- Small phones: ≤400 ----- */

@media (max-width: 400px) {
	.bukw-header .wp-block-site-logo img {
		max-width: 140px;
	}

	.bukw-facts {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	.bukw-hero .wp-block-button,
	.bukw-hero--bleed__copy .wp-block-button {
		width: 100%;
	}

	.bukw-hero .wp-block-button__link,
	.bukw-hero--bleed__copy .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}


/* ==========================================================================
   Collection page product-card title clamp (visual safety net)
   ==========================================================================
   The PHP cap trims titles at render time; this is the visual belt for cases
   where a plugin/cache serves an untrimmed title anyway. Scoped to the plugin's
   collection template so it never affects Woo grids elsewhere on the site.
   ========================================================================== */

.bukw-collection .wp-block-post-title,
.bukw-collection .wc-block-product-template .wp-block-post-title,
.bukw-collection .wc-block-components-product-name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	line-height: 1.3;
	min-height: 0;
}

@media (min-width: 783px) {
	.bukw-collection .wp-block-post-title,
	.bukw-collection .wc-block-product-template .wp-block-post-title {
		-webkit-line-clamp: 2;
		min-height: 2.6em;
	}
}

/* ==========================================================================
   Single product page
   ==========================================================================
   Container styling for the block-based single-product template. The blocks
   themselves (gallery, price, add-to-cart, tabs) are WooCommerce core blocks
   and handle their own product context and JS; we only style the shell.
   ========================================================================== */

.bukw-single-product {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin: 1.5rem auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
	box-sizing: border-box;
}

.bukw-single-product .bukw-breadcrumbs {
	margin-bottom: 1rem;
	font-size: 0.85rem;
	color: var(--wndb--color--text--faded, #5c6b73);
}

.bukw-single-product__panel {
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
	margin-top: 0.5rem !important;
	margin-bottom: 2rem !important;
}

.bukw-single-product__gallery {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	padding: 1rem;
	box-sizing: border-box;
	overflow: hidden;
	position: sticky;
	top: 1.5rem;
	align-self: flex-start;
}

.bukw-single-product__gallery img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.bukw-single-product__gallery .flex-viewport,
.bukw-single-product__gallery .woocommerce-product-gallery__image {
	border-radius: 8px;
	overflow: hidden;
}

.bukw-single-product__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.bukw-single-product__gallery .flex-control-thumbs li {
	flex: 0 0 calc(20% - 0.4rem);
}

.bukw-single-product__gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	padding: 0.25rem;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 140ms ease, border-color 140ms ease;
}

.bukw-single-product__gallery .flex-control-thumbs img:hover,
.bukw-single-product__gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--wndb--color--primary, #375B6D);
}

.bukw-single-product__summary {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.bukw-single-product__summary .wp-block-post-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.2;
	margin: 0;
	color: var(--wndb--color--text--contrast, #193D4F);
	text-wrap: balance;
}

.bukw-single-product__summary .wc-block-components-product-price,
.bukw-single-product__summary .wp-block-woocommerce-product-price,
.bukw-single-product__summary .price {
	font-weight: 700;
	color: var(--wndb--color--text--contrast, #193D4F);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.bukw-single-product__summary .price del,
.bukw-single-product__summary .wc-block-components-product-price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 0.5rem;
}

.bukw-single-product__summary .price ins,
.bukw-single-product__summary .wc-block-components-product-price ins {
	text-decoration: none;
}

.bukw-single-product__summary .wp-block-post-excerpt {
	color: var(--wndb--color--text, #4a5560);
	line-height: 1.6;
}

.bukw-single-product__summary .cart,
.bukw-single-product__summary .wp-block-woocommerce-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0.25rem 0;
}

.bukw-single-product__summary .quantity input {
	min-height: 44px;
	padding: 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	width: 5rem;
	text-align: center;
}

.bukw-single-product__summary .single_add_to_cart_button,
.bukw-single-product__summary button.button {
	min-height: 48px;
	padding: 0.7em 1.6em;
	background: var(--wndb--color--primary, #375B6D);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 140ms ease;
}

.bukw-single-product__summary .single_add_to_cart_button:hover {
	transform: translateY(-1px);
}

.bukw-single-product__summary .product_meta {
	font-size: 0.85rem;
	color: var(--wndb--color--text--faded, #5c6b73);
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	line-height: 1.7;
}

.bukw-single-product__summary .product_meta > span {
	display: block;
}

.bukw-single-product__summary .product_meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.bukw-single-product__tabs {
	margin-top: 2rem;
}

.bukw-single-product__tabs .wc-tabs {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.bukw-single-product__tabs .wc-tabs li {
	margin: 0;
}

.bukw-single-product__tabs .wc-tabs li a {
	display: inline-block;
	padding: 0.75rem 1.15rem;
	color: var(--wndb--color--text--faded, #5c6b73);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-weight: 500;
}

.bukw-single-product__tabs .wc-tabs li.active a {
	color: var(--wndb--color--text--contrast, #193D4F);
	border-bottom-color: var(--wndb--color--primary, #375B6D);
}

.bukw-single-product__tabs .panel {
	max-width: 74ch;
	line-height: 1.7;
}

.bukw-single-product__tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.bukw-single-product__tabs table.shop_attributes th {
	text-align: left;
	padding: 0.6rem 1rem 0.6rem 0;
	width: 35%;
	color: var(--wndb--color--text--faded, #5c6b73);
	font-weight: 600;
	vertical-align: top;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.bukw-single-product__tabs table.shop_attributes td {
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 900px) {
	.bukw-single-product {
		margin: 1rem auto;
	}
	.bukw-single-product__panel {
		flex-direction: column !important;
	}
	.bukw-single-product__gallery,
	.bukw-single-product__summary {
		flex-basis: 100% !important;
	}
	.bukw-single-product__gallery {
		position: static;
		padding: 0.65rem;
	}
	.bukw-single-product__summary .single_add_to_cart_button {
		width: 100%;
		justify-content: center;
	}
	.bukw-single-product__tabs {
		margin-top: 1.5rem;
	}
}