/*
Theme Name: ByRossland
Theme URI: https://byrossland.no
Author: By Rossland
Author URI: https://byrossland.no
Description: A custom theme for ByRossland.
Requires at least: 6.8
Tested up to: 6.9
Requires PHP: 8.3
Version: 1.0.49
Text Domain: byrossland
*/

/* ==========================================================================
   Site-wide form / button token wiring (theme.json --wp--custom--* tokens
   don't auto-apply to native inputs/buttons — wire them up here).
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
	background: var(--wp--custom--form-field-color-background);
	color: var(--wp--custom--form-field-color-text);
	border: var(--wp--custom--form-field-border-width) var(--wp--custom--form-field-border-style) var(--wp--custom--form-field-border-color);
	border-radius: var(--wp--custom--form-field-border-radius);
	padding: var(--wp--custom--form-field-padding);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
button.button,
.button:not(.wp-element-button):not(.wp-block-button__link),
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--wp--custom--button-color-background);
	color: var(--wp--custom--button-color-text);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--button-border-radius);
	padding: var(--wp--custom--button-spacing-padding-top) var(--wp--custom--button-spacing-padding-right) var(--wp--custom--button-spacing-padding-bottom) var(--wp--custom--button-spacing-padding-left);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
button.button:hover,
.button:not(.wp-element-button):not(.wp-block-button__link):hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent);
}

/* ==========================================================================
   Front page — every section is now built from core blocks. The CSS below
   only handles things WP block attributes cannot express:
     · custom grid layouts (asymmetric category tiles, hero overlap)
     · pseudo-elements (eyebrow line, marquee animation, story quote arrow)
     · hover transforms (image scale, card lift)
     · Caveat italic family on <em> inside headings
   Block-level styling carries: bg colors, padding, typography, gap, alignment.
   ========================================================================== */

/* Caveat italic for the handwritten <em> word inside h1/h2/h3.
   Caveat leans right; its built-in left side-bearing is wider than the right,
   so the visual gap before the word looks larger than the gap after.
   `margin-inline` nudges it back toward optical balance.
   Caveat also has a smaller x-height than Quicksand — bumping `font-size`
   to ~1.15em lifts the apparent size to match the surrounding heading. */
h1 em,
h2 em,
h3 em {
	font-family: var(--wp--preset--font-family--caveat), "Caveat", cursive;
	font-style: italic;
	font-weight: 500;
	font-size: 1.15em;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0;
	line-height: 1;
	margin-inline: -0.15em 0.04em;
}


body .wp-site-blocks > main.wp-block-group {
    margin-top: 0;
}


/* Hero meta line separator — vertical hairline between the two strings */
.br-hero-meta { display: inline-flex; align-items: center; gap: 18px; color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, white); }
.br-hero-meta-sep { width: 1px; height: 14px; background: var(--wp--preset--color--secondary-3); display: inline-block; }

.br-announce { gap: 28px; }
@media (max-width: 720px) {
	.br-announce > p:not(:first-child) { display: none; }
}

/* ---- Hero overlapping art (genuinely custom positioning) ----------- */
.br-hero-art { position: relative; aspect-ratio: 4/5; max-width: 560px; margin-left: auto; }
.br-hero-art .br-hero-img { position: absolute; margin: 0; }
.br-hero-art .br-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.br-hero-art .br-hero-img--main { inset: 0 8% 14% 0; z-index: 2; box-shadow: 0 20px 50px rgba(27, 60, 83, 0.18); border-radius: 6px; overflow: hidden; }
.br-hero-art .br-hero-img--accent { width: 38%; aspect-ratio: 3/4; bottom: 0; right: 0; z-index: 3; box-shadow: 0 12px 30px rgba(27, 60, 83, 0.18); border: 8px solid var(--wp--preset--color--base); border-radius: 4px; overflow: hidden; }
.br-hero-tag { position: absolute; top: 10%; right: -2%; z-index: 4; box-shadow: 0 12px 30px rgba(27, 60, 83, 0.12); }
.br-hero-tag-swatch { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #d2a47a 0%, #b3855a 100%); margin: 0; flex: none; }

/* ---- Trust strip — items already laid out via wp:columns + wp:group flex.
       The icon needs a circle background, achievable via padding/border on
       the paragraph block but we centralise it here for consistency. */
.br-trust-item { gap: 14px; }
.br-trust-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--secondary-3);
	margin: 0;
}

/* ---- Categories — asymmetric grid (1 large + 4 small).
       wp:cover blocks can't express grid-row spans through attributes alone.
       The covers carry aspectRatio + min-height attributes (WP defaults to
       430px) that fight the grid-row sizing — neutralise both so each tile
       fills its assigned row exactly. */
.br-cats.wp-block-group {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-rows: 320px 320px;
	gap: 16px;
}
/* Each cover is wrapped in <a class="wp-block-hyperlink-group"> ›
   <div class="wp-block-tiptip-hyperlink-group-block"> by the Tiptip
   hyperlink-group block. The grid items are therefore the anchors, not the
   covers — make the wrapper fill the cell and strip link decoration so the
   labels read like before. */
/* Whatever wrapper sits between `.br-cats` and the cover (the Tiptip
   anchor on the front-end, an editor block wrapper inside Gutenberg) is the
   actual grid item — make every direct child fill its cell. */
.br-cats > * {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.br-cats .br-cat {
	aspect-ratio: auto !important;
	min-height: 0 !important;
	height: 100%;
	margin: 0 !important;
}
/* Featured tile spans both rows. The class is on the inner cover, so target
   the wrapper that contains it via :has(). */
.br-cats > *:has(.br-cat--featured) { grid-row: span 2; }
.br-cats .br-cat .wp-block-cover__inner-container { padding-left: 22px; padding-right: 22px; padding-bottom: 22px; }
.br-cats .br-cat,
.br-cats .br-cat h3,
.br-cats .br-cat p { text-decoration: none; }
/* Strengthen the cover gradient so the white label is legible. The cover
   block's `customGradient` is fading too soon — we layer a slightly stronger
   bottom-anchored gradient on top via the cover's ::after pseudo. */
.br-cats .br-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(17, 41, 58, 0.65) 0%, rgba(17, 41, 58, 0.20) 35%, rgba(17, 41, 58, 0) 60%);
	pointer-events: none;
	z-index: 1;
}
.br-cats .br-cat .wp-block-cover__inner-container { position: relative; z-index: 2; }
/* Keep the label and count tightly grouped, with a touch more weight on the heading */
.br-cats .br-cat h3 { text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.br-cats .br-cat .wp-block-cover__inner-container > p { text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.br-cats .br-cat .wp-block-cover__image-background { transition: transform 320ms cubic-bezier(0.2, 0, 0.2, 1); }
@media (hover: hover) {
	.br-cats .br-cat:hover .wp-block-cover__image-background { transform: scale(1.04); }
}
@media (max-width: 900px) {
	.br-cats.wp-block-group { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 260px 260px; }
	.br-cats > *:has(.br-cat--featured) { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
	/* Single column — drop the fixed row heights and let each tile size itself
	   to a 1:1 square (full column width = height), so the cards read as
	   squares on phones instead of short landscape strips. */
	.br-cats.wp-block-group { grid-template-columns: 1fr; grid-template-rows: auto; }
	.br-cats > *:has(.br-cat--featured) { grid-column: span 1; }
	.br-cats > * { height: auto; }
	.br-cats .br-cat { aspect-ratio: 1 / 1 !important; height: auto; }
}

/* ---- Story media stack — image + absolutely-positioned badge + quote pill */
.br-story-media { position: relative; }
.br-story-media .wp-block-image { margin: 0; }
.br-story-media .wp-block-image img { aspect-ratio: 5/6; object-fit: cover; width: 100%; }
.br-story-badge {
	position: absolute; top: 22px; left: 22px;
	border-radius: 999px;
	padding: 8px 14px;
	margin: 0;
}
.br-story-quote {
	position: absolute;
	right: -30px; bottom: 30px;
	max-width: 280px;
	box-shadow: 0 18px 40px rgba(27, 60, 83, 0.14);
}
.br-story-quote::before {
	content: "\201C";
	position: absolute;
	top: -8px; left: 16px;
	font-size: 48px;
	font-family: Georgia, serif;
	color: var(--wp--preset--color--accent);
	line-height: 1;
}
@media (max-width: 900px) {
	.br-story-quote { right: 20px; }
}

/* ---- Process timeline — circle around the step number ------------- */
.br-tl-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	margin: 0 0 14px;
}

/* ---- Reviews — avatar circle (wp:paragraph with className br-review-avatar)
   Override the auto-padding WP applies when a paragraph has a background. */
.br-review-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	padding: 0 !important;
	border-radius: 50%;
	margin: 0 12px 0 0 !important;
	flex: none;
}
.br-review-foot { gap: 12px; }

/* ---- Newsletter form (custom HTML — no email-signup block in core) */
.br-newsletter-form {
	display: flex; gap: 8px;
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 12px 32px rgba(27, 60, 83, 0.06);
}
.br-newsletter-form input {
	flex: 1; background: transparent; border: 0;
	padding: 14px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}
.br-newsletter-form input:focus { outline: none; }
.br-newsletter-form button {
	border: 0;
	background: var(--wp--preset--color--primary);
	color: white;
	border-radius: 999px;
	padding: 14px 26px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.br-newsletter-form button:hover { background: var(--wp--preset--color--primary-2); }




/* ==========================================================================
   PDP reviews — editorial quote-list. Each review reads like a pull quote
   (italic Quicksand 500), separated by hairlines, with a small caps footer
   line for author + date. Form is hidden behind an accordion toggle.
   ========================================================================== */

/* Centered ★★★★★ + count summary — uses the WC product-rating block */
.br-pdp-reviews-summary {
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, white);
}
.br-pdp-reviews-summary .wc-block-components-product-rating-stars,
.br-pdp-reviews-summary .wp-block-woocommerce-product-rating-stars,
.br-pdp-reviews-summary .star-rating {
	color: var(--wp--preset--color--accent);
	font-size: 18px;
	letter-spacing: 4px;
}

/* Quote list — single column, separators between */
.br-pdp-reviews-list .wp-block-woocommerce-product-review-template {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.br-pdp-reviews-list .br-quote {
	padding: 32px 0 28px;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}
.br-pdp-reviews-list .br-quote + .br-quote {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 50%, transparent);
}
.br-pdp-reviews-list .br-quote::before {
	content: "“";
	position: absolute;
	top: 6px;
	left: -2px;
	font-family: Georgia, serif;
	font-size: 64px;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	opacity: 0.3;
	pointer-events: none;
}
.br-pdp-reviews-list .br-quote .br-quote-stars,
.br-pdp-reviews-list .br-quote .wc-block-product-review-rating {
	color: var(--wp--preset--color--accent);
	letter-spacing: 3px;
	font-size: 14px;
	margin: 0;
}
.br-pdp-reviews-list .br-quote .br-quote-content,
.br-pdp-reviews-list .br-quote .wc-block-product-review-content,
.br-pdp-reviews-list .br-quote .wc-block-product-review-content p {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--primary);
	text-wrap: balance;
	margin: 0;
}
.br-pdp-reviews-list .br-quote-foot {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, white);
	gap: 8px;
}
.br-pdp-reviews-list .br-quote-foot .wc-block-product-review-author-name {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.br-pdp-reviews-list .br-quote-foot .wc-block-product-review-date {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, white);
}
.br-pdp-reviews-list .br-quote-foot .wc-block-product-review-date::before {
	content: "·";
	display: inline-block;
	margin-right: 8px;
}

.br-pdp-reviews-pagination {
	margin-top: 28px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Review form — wrap the native comment form in a tidy branded card with
   consistent field styling. Field selectors carry both form classes so they
   beat the WooCommerce review-form block's own input/textarea CSS.
   ========================================================================== */
.br-pdp-review-form {
	/* !important overrides the WooCommerce review-form block's own form styles. */
	background: var(--wp--preset--color--secondary-2) !important;
	border: 1px solid var(--wp--preset--color--secondary-3) !important;
	border-radius: 10px;
	padding: clamp(20px, 3vw, 32px) !important;
}
.br-pdp-review-form .comment-reply-title {
	margin: 0 0 8px;
}
.br-pdp-review-form .comment-notes,
.br-pdp-review-form .comment-form-comment,
.br-pdp-review-form .comment-form-rating,
.br-pdp-review-form .comment-form-author,
.br-pdp-review-form .comment-form-email,
.br-pdp-review-form .comment-form-url {
	margin: 0 0 18px;
}
.br-pdp-review-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.br-pdp-review-form.wp-block-woocommerce-product-review-form input[type="text"],
.br-pdp-review-form.wp-block-woocommerce-product-review-form input[type="email"],
.br-pdp-review-form.wp-block-woocommerce-product-review-form input[type="url"],
.br-pdp-review-form.wp-block-woocommerce-product-review-form textarea {
	width: 100%;
	/* Inputs default to content-box, so width:100% + padding overflowed the
	   card; border-box keeps them inside it. */
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--secondary-3);
	background: var(--wp--preset--color--base);
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	/* 16px minimum so iOS Safari does not zoom in on focus */
	font-size: 16px;
}
.br-pdp-review-form.wp-block-woocommerce-product-review-form textarea {
	min-height: 130px;
	resize: vertical;
	/* The review-form block forces border:0 on the textarea — override it. */
	border: 1px solid var(--wp--preset--color--secondary-3) !important;
}
.br-pdp-review-form input:focus,
.br-pdp-review-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
}
/* Star rating selector — larger, brand-coloured. */
.br-pdp-review-form .comment-form-rating .stars a {
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
}
/* Image-upload row: stack the label, control and helper text. */
.br-pdp-review-form .comment-form-cr-images label {
	display: inline-block;
}
.br-pdp-review-form input[type="file"] {
	display: block;
	margin-top: 8px;
}
.br-pdp-review-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

/* ==========================================================================
   PDP info section — 2-col editorial. Left column is text + polaroid,
   right column is the numbered accordion. Native wp:columns handles the
   responsive stacking; we only style the polaroid figure and the accordion
   number prefix here.
   ========================================================================== */
.br-pdp-info-section .br-polaroid {
	background: var(--wp--preset--color--base);
	padding: 12px 12px 16px;
	border-radius: 3px;
	box-shadow: 0 14px 30px rgba(27, 60, 83, 0.10);
	transform: rotate(-2deg);
	max-width: 280px;
}
.br-pdp-info-section .br-polaroid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}
.br-pdp-info-section .br-polaroid figcaption {
	font-family: var(--wp--preset--font-family--caveat), "Quicksand", cursive;
	text-align: center;
	padding: 14px 6px 4px;
	font-size: 16px;
	line-height: 1.25;
	color: var(--wp--preset--color--accent);
}
.br-pdp-info-section .br-polaroid figcaption strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0;
	letter-spacing: -0.005em;
	line-height: 1.2;
}
/* "Les mer →" link: own line, small uppercase tag, heavier weight. */
.br-pdp-info-section .br-polaroid figcaption a {
	display: block;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.br-pdp-info-section .br-polaroid figcaption a:hover {
	color: var(--wp--preset--color--accent);
}

/* Number the accordion items 01 / 02 / 03 via CSS counter — no markup
   change needed. Heading-toggle uses flex so the number sits before the
   title naturally. */
.br-pdp-accordion { counter-reset: pdp-acc; }
.br-pdp-accordion .wp-block-accordion-item { counter-increment: pdp-acc; }
.br-pdp-accordion .wp-block-accordion-heading__toggle-title::before {
	content: "0" counter(pdp-acc);
	font-family: var(--wp--preset--font-family--caveat), "Quicksand", cursive;
	font-style: italic;
	font-weight: 700;
	font-size: 26px;
	color: var(--wp--preset--color--accent);
	margin-right: 14px;
	letter-spacing: -0.02em;
	line-height: 1;
	display: inline-block;
	vertical-align: -2px;
}

/* ==========================================================================
   PDP reviews — 2-col, form left + list right. Native wp:columns lays it
   out; we only tighten the heading row and remove the form's default form
   margins so it lines up with the list hairline.
   ========================================================================== */
.br-pdp-rev-head {
	gap: 16px 24px !important;
}
.br-pdp-rev-summary {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, white);
	margin: 0;
}
.br-pdp-rev-form-col { padding-top: 4px; }

/* Empty-reviews state: WC's `wp:woocommerce/product-reviews` block renders
   an empty `.br-pdp-reviews-list` when the product has 0 reviews. A tiny
   inline script in functions.php adds `.is-empty` to the section; we use
   that to collapse the 2-col layout to a centered single column and add
   a friendly "Vær den første" note above the form. */
.br-pdp-reviews.is-empty .wp-block-columns {
	justify-content: center;
}
.br-pdp-reviews.is-empty .wp-block-column:has(.br-pdp-reviews-list) {
	display: none;
}
.br-pdp-reviews.is-empty .br-pdp-rev-form-col {
	flex-basis: 100% !important;
	max-width: 600px;
}
.br-pdp-reviews.is-empty .br-pdp-rev-form-col::before {
	content: "Ingen omtaler ennå — vær den første til å dele opplevelsen din. 💛";
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, white);
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
	margin-bottom: 24px;
}
.br-pdp-review-form form { margin-top: 0; }

/* ==========================================================================
   PDP special-order band — navy bg, brand-accent circular mark on the left,
   body + buttons + bullet list on the right. Most of the layout is native
   wp:columns; only the mark wrapper and the bullet list need a touch.
   ========================================================================== */
.br-pdp-special { margin: 0; }
.br-pdp-special-mark {
	width: clamp(120px, 14vw, 180px);
	height: clamp(120px, 14vw, 180px);
	border-radius: 50%;
	background: color-mix(in srgb, white 8%, transparent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.br-pdp-special-mark img {
	width: 60% !important;
	height: 60% !important;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}
.br-pdp-special-bullets {
	list-style: none !important;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	color: color-mix(in srgb, white 70%, transparent);
}
.br-pdp-special-bullets li::marker { content: none; }

/* Buttons inside the navy band — primary becomes terracotta accent, outline
   uses a white-alpha border. The base button is rendered by theme.json,
   so we only override what conflicts with the dark background. */
.br-pdp-special .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.br-pdp-special .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-2);
}
.br-pdp-special .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: color-mix(in srgb, white 35%, transparent);
	background: transparent;
}
.br-pdp-special .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--base);
}
@media (max-width: 800px) {
	.br-pdp-special .wp-block-columns { flex-direction: column; }
	.br-pdp-special .wp-block-column { flex-basis: auto !important; width: 100%; }
}

.br-pdp-accordion {
	display: flex;
	flex-direction: column;
}
.br-pdp-accordion .wp-block-accordion-item {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 60%, transparent);
	padding: 4px 0;
}
.br-pdp-accordion .wp-block-accordion-item:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 60%, transparent);
}
.br-pdp-accordion .wp-block-accordion-heading {
	margin: 0;
}
.br-pdp-accordion .wp-block-accordion-heading__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: transparent;
	border: 0;
	padding: 22px 4px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--primary);
	text-align: left;
	transition: color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.br-pdp-accordion .wp-block-accordion-heading__toggle:hover {
	color: var(--wp--preset--color--accent);
}
.br-pdp-accordion .wp-block-accordion-heading__toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-size: 18px;
	line-height: 1;
	flex: none;
	font-weight: 400;
	transition: transform 320ms cubic-bezier(0.2, 0, 0.2, 1);
}
.br-pdp-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate(45deg);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: white;
}
.br-pdp-accordion .wp-block-accordion-panel {
	padding: 0 4px 26px;
	font-size: 15px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, white);
}
.br-pdp-accordion .wp-block-accordion-panel > *:first-child { margin-top: 0; }
.br-pdp-accordion .wp-block-accordion-panel > *:last-child { margin-bottom: 0; }
.br-pdp-accordion .wp-block-accordion-panel p { margin: 0 0 0.8em; }

/* ==========================================================================
   Single product page (PDP) — mobile-first.
   100% of sales come from mobile, so the layout stacks gallery → title →
   price → trust pills → customizer (untouched) → add-to-cart, with a
   persistent sticky CTA at the bottom of the viewport that scrolls back
   to the form anchor.
   ========================================================================== */
.br-pdp-breadcrumbs.wp-block-breadcrumbs {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, white);
	margin: 28px 0 22px !important;
}
.br-pdp-breadcrumbs a { color: inherit; text-decoration: none; }
.br-pdp-breadcrumbs a:hover { color: var(--wp--preset--color--primary); }
@media (max-width: 800px) {
	.br-pdp-breadcrumbs.wp-block-breadcrumbs {
		margin: 24px 0 14px !important;
		font-size: 11px;
		line-height: 1.5;
	}
}

.br-pdp-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 48px);
	margin-bottom: clamp(40px, 6vw, 70px);
}
@media (min-width: 900px) {
	.br-pdp-hero {
		grid-template-columns: 1.1fr 1fr;
		gap: clamp(32px, 4vw, 70px);
		align-items: start;
	}
}

.br-pdp-gallery .wp-block-woocommerce-product-gallery,
.br-pdp-gallery .wp-block-woocommerce-product-gallery-large-image,
.br-pdp-gallery .wp-block-woocommerce-product-image,
.br-pdp-gallery img {
	border-radius: 6px;
}

/* "Tilbud" sale badge — restyle to match the brand product-badge pill
   (.nexus-product-badge): terracotta fill, white uppercase text. */
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--accent);
	color: #fff;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.br-pdp-info {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
@media (min-width: 900px) {
	.br-pdp-info {
		position: sticky;
		top: 100px;
		align-self: start;
	}
}

.br-pdp-info .eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 !important;
	display: flex;
	align-items: center;
	gap: 10px;
}
.br-pdp-info .eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.br-pdp-info .br-pdp-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.014em !important;
	color: var(--wp--preset--color--primary) !important;
	margin: 0 !important;
}

/* Rating row — stars + count link on the left, separator + green stock dot
   + lead-time line on the right. Native wp:group flex handles layout. */
.br-pdp-info .br-pdp-rating-row {
	gap: 14px !important;
	flex-wrap: wrap;
	margin: 0;
}
.br-pdp-info .br-pdp-rating { margin: 0 !important; }
.br-pdp-info .br-pdp-rating .star-rating,
.br-pdp-info .br-pdp-rating .wc-block-components-product-rating-stars {
	color: var(--wp--preset--color--accent);
}

/* Green stock badge — own dot via CSS pseudo, separator hairline before it
   when it sits next to the rating block. */
.br-pdp-info .br-pdp-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, white);
}
.br-pdp-info .br-pdp-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5fa074;
	box-shadow: 0 0 0 3px color-mix(in srgb, #5fa074 22%, transparent);
	flex: none;
}

.br-pdp-info .br-pdp-summary {
	font-size: 16px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, white);
	margin: -2.5em 0 0;
}

.br-pdp-info .br-pdp-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

/* Hide the static product-price block when the customizer is present —
   the customizer renders its own running total that includes option add-ons,
   so we keep the markup for products without the customizer but suppress the
   duplicate display when the customizer block is in the tree. */
.br-pdp-info:has(.wp-block-byrossland-product-customizer) .br-pdp-price {
	display: none;
}

/* The price block now lives inside the card (first child of #pdp-cart) so the
   non-customizer layout reads as one unit like the customizer's collapsed
   state: a centered price tag at the top of the card, sized to match the
   customizer's collapsed "Totalt" line. */
.br-pdp-info .br-pdp-cart .br-pdp-price {
	text-align: center;
	margin: 0 0 18px;
}

/* ==========================================================================
   Cart panel — wraps the add-to-cart-form + payment row + trust meta into
   a single bordered, soft-shadow card matching the customizer design.
   The byrossland-product-customizer plugin renders the field controls; we
   restyle them and reposition the running total into a cream summary box
   above the CTA via `display: contents`.
   ========================================================================== */
.br-pdp-info .br-pdp-cart {
	margin: 8px 0 0;
	scroll-margin-top: 90px;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 70%, transparent);
	border-radius: 10px;
	padding: 26px 26px 22px;
	box-shadow: 0 6px 20px rgba(27, 60, 83, 0.04);
}
.br-pdp-info .br-pdp-cart .wp-block-add-to-cart-form,
.br-pdp-info .br-pdp-cart form.cart {
	margin: 0;
}

/* Make `form.cart` the flex column and hoist the customizer's intermediate
   wrappers (and the customizer block itself) into it via `display: contents`.
   That puts the customizer fields, total, CTA — plus the optional-products
   upsell which is a sibling of the customizer — into a single flex flow that
   we can reorder cleanly. WooCommerce wraps the form in a
   `.wp-block-add-to-cart-form` div and sets `form.cart` to `display: grid` —
   flatten the wrapper with `display: contents` and override the form. */
.br-pdp-info .br-pdp-cart .wp-block-add-to-cart-form { display: contents; }
.br-pdp-info .br-pdp-cart form.cart {
	display: flex !important;
	flex-direction: column !important;
	gap: 22px !important;
	grid-template-columns: none !important;
}
/* WooCommerce ships a `form.cart::before` + `::after` clearfix (display:
   table). In our flex column they become invisible flex items that each
   inherit the gap, creating ~44px of ghost space above the first field. */
.br-pdp-info .br-pdp-cart form.cart::before,
.br-pdp-info .br-pdp-cart form.cart::after {
	display: none !important;
}
.wp-block-byrossland-product-customizer,
.byrossland-product-customizer__panel,
.byrossland-product-customizer__panel > .content,
.byrossland-product-customizer__panel > .footer {
	display: contents;
}
/* `display: contents` would shadow the default `[hidden] { display: none }`
   user-agent rule, which the customizer relies on to collapse its panel when
   `context.isOpen` is false (products without `always_open`). Restore the
   hidden behavior explicitly so the toggle-button-only "closed" state works. */
.byrossland-product-customizer__panel[hidden],
.byrossland-product-customizer__panel[hidden] > .content,
.byrossland-product-customizer__panel[hidden] > .footer {
	display: none !important;
}
.byrossland-product-customizer__variations { order: 0; }
.byrossland-product-customizer__fields { order: 1; }
.byrossland-product-customizer__summary { order: 2; }
.br-pdp-cart .wp-block-byrossland-optional-products { order: 3; }
/* Closed state: only summary + toggle are visible. Push the toggle below
   the summary so customers see the running total before hitting "Tilpass
   og kjøp". In open state the toggle is hidden, so this has no effect. */
.byrossland-product-customizer__toggle { order: 99; }

/* Keep the optional-products upsell hidden while the customizer is collapsed —
   in the closed state the card should show only the price + "Tilpass og kjøp".
   It reappears (at order 3) once the panel is opened. The upsell is a sibling
   of the customizer, not part of its collapsible panel, so it needs hiding
   explicitly. Scoped to customizer products via :has(); products without the
   customizer keep showing the upsell. */
.br-pdp-cart:has( .wp-block-byrossland-product-customizer[aria-expanded="false"] ) .wp-block-byrossland-optional-products {
	display: none !important;
}

/* In closed state ("Tilpass og kjøp" still visible), the cream Totalt box
   reads as a calculation result when nothing's been customized yet. Strip
   the box down to a centered price line — no chrome, no "Totalt" label —
   so it looks like a price tag, not a summary. */
.wp-block-byrossland-product-customizer[aria-expanded="false"] .byrossland-product-customizer__summary {
	background: transparent;
	padding: 0;
}
.wp-block-byrossland-product-customizer[aria-expanded="false"] .byrossland-product-customizer__summary-row--total {
	border-top: 0 !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	justify-content: center;
}
.wp-block-byrossland-product-customizer[aria-expanded="false"] .byrossland-product-customizer__summary-row--total .byrossland-product-customizer__summary-label {
	display: none;
}
.wp-block-byrossland-product-customizer[aria-expanded="false"] .byrossland-product-customizer__summary-row--total .byrossland-product-customizer__total {
	font-size: 26px !important;
}

/* Upsell card — match the Totalt summary's visual language so it reads as
   another box in the same family (cream surface, hairline border, the
   customizer's brand-primary title). The plugin's own CSS caps width at
   312px and adds a 20px top margin — override both since flex `gap` and
   the panel width handle spacing now. */
.br-pdp-cart .wp-block-byrossland-optional-products label {
	max-width: none !important;
	margin-top: 0 !important;
	padding: 18px 20px !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--secondary-3) 70%, transparent) !important;
	display: flex !important;
	gap: 12px;
	align-items: flex-start !important;
}
.br-pdp-cart .wp-block-byrossland-optional-products label input[type="checkbox"] {
	margin: 4px 0 0 !important;
	flex: none;
	accent-color: var(--wp--preset--color--primary);
}
.br-pdp-cart .wp-block-byrossland-optional-products label h5 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.01em;
	margin: 0 0 4px !important;
}
.br-pdp-cart .wp-block-byrossland-optional-products label h5 .woocommerce-Price-amount {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}
.br-pdp-cart .wp-block-byrossland-optional-products label p {
	font-size: 13px !important;
	line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, white);
}
.byrossland-product-customizer__cta { order: 4; }
.byrossland-product-customizer__error { order: 5; }

/* The plugin emits empty `__variations` and `__error` placeholders that
   participate in the flex gap and create stray space. Hide them when empty.
   Also hide the native WC `.quantity` selector and `.single_add_to_cart_button`
   — but ONLY on customizer products, where the customizer moves the button
   into its own `__cta` wrapper. On non-customizer products the native button
   IS the only button, so it must stay visible. */
.byrossland-product-customizer__variations:not(:has(*)),
.byrossland-product-customizer__error:not(:has(*)) {
	display: none !important;
}
.br-pdp-cart:has(.wp-block-byrossland-product-customizer) form.cart > .quantity,
.br-pdp-cart:has(.wp-block-byrossland-product-customizer) form.cart > .single_add_to_cart_button {
	display: none !important;
}

/* Non-customizer products (incl. bundles): lay the form out as a grid so the
   quantity stepper and the add-to-cart button always share the first row
   (stepper auto-width, button fills the rest) while any other child of
   form.cart — e.g. the optional-products upsell — spans the full width on its
   own row below. A grid (rather than flex-wrap) keeps the stepper + button
   paired at every viewport, with no horizontal overflow.
   (Customizer products hide both and use their own CTA, above.) */
.br-pdp-cart:not(:has(.wp-block-byrossland-product-customizer)) form.cart {
	display: grid !important;
	/* minmax(0, 1fr) lets the button column shrink below its content width on
	   very small screens (the label wraps inside the button) instead of
	   overflowing or dropping to its own row. */
	grid-template-columns: auto minmax(0, 1fr) !important;
	align-items: stretch;
	gap: 16px 6px !important;
}
.br-pdp-cart:not(:has(.wp-block-byrossland-product-customizer)) form.cart > .quantity {
	grid-column: 1;
	width: auto;
	margin: 0 !important;
}
/* Shrink the number field so the stepper sizes to its content (− 1 +) instead
   of stretching to fill the row as it did when stacked. */
.br-pdp-cart:not(:has(.wp-block-byrossland-product-customizer)) form.cart > .quantity .wc-block-components-quantity-selector__input,
.br-pdp-cart:not(:has(.wp-block-byrossland-product-customizer)) form.cart > .quantity input.qty {
	width: 28px !important;
	min-width: 0 !important;
}
/* Button fills the remaining column; trim the side padding and tracking so the
   label fits on one line in the narrow mobile/sticky-column width. */
.br-pdp-cart:not(:has(.wp-block-byrossland-product-customizer)) form.cart > .single_add_to_cart_button {
	grid-column: 2;
	/* WooCommerce/theme set the button to justify-self: start, so it sat
	   content-width at the left of its cell with empty space after it — stretch
	   it to fill the remaining column. */
	justify-self: stretch !important;
	width: auto;
	margin: 0 !important;
	letter-spacing: 0.04em !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}
/* Optional-products upsell spans both columns on its own row below the
   quantity + button (its order: 3 above already sequences it last). */
.br-pdp-cart:not(:has(.wp-block-byrossland-product-customizer)) form.cart > .wp-block-byrossland-optional-products {
	grid-column: 1 / -1;
}
/* Trim the cart card's side padding on phones so the quantity + button row has
   room to keep the CTA label on one line (mobile is ~100% of sales). */
@media (max-width: 600px) {
	.br-pdp-info .br-pdp-cart {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Slightly smaller CTA label on phones so it stays on one line beside the
	   quantity stepper even on narrow (~360px) screens. */
	.br-pdp-cart:not(:has(.wp-block-byrossland-product-customizer)) form.cart > .single_add_to_cart_button {
		font-size: 13px !important;
	}
}

/* Summary breakdown — cream rounded box containing base/extras/total rows. */
.byrossland-product-customizer__summary {
	background: var(--wp--preset--color--secondary-2);
	border-radius: 8px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, white);
}
.byrossland-product-customizer__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.byrossland-product-customizer__summary-row[hidden] { display: none !important; }
.byrossland-product-customizer__summary-row--add {
	color: var(--wp--preset--color--accent);
	font-size: 13px;
}
.byrossland-product-customizer__summary-row--total {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}
/* Only show the divider above Totalt when at least one breakdown row is
   actually visible above it — otherwise it floats over nothing. */
.byrossland-product-customizer__summary:has(
	.byrossland-product-customizer__summary-row:not(.byrossland-product-customizer__summary-row--total):not([hidden])
) .byrossland-product-customizer__summary-row--total {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 70%, transparent);
	padding-top: 10px;
	margin-top: 4px;
}
.byrossland-product-customizer__summary-row--total .byrossland-product-customizer__total {
	font-size: 22px !important;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
}

/* Field label — brand primary, smaller, weight 600 */
.byrossland-product-customizer__label {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--primary) !important;
	letter-spacing: 0.01em !important;
	margin: 0 !important;
}

/* Text input — keep 8px radius, brand border, inner counter chip */
.byrossland-product-customizer__input-wrapper { position: relative; }
.byrossland-product-customizer__fields .byrossland-product-customizer__control--input {
	background: var(--wp--preset--color--base) !important;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 80%, transparent) !important;
	border-radius: 8px !important;
	padding: 14px 76px 14px 18px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	/* 16px minimum so iOS Safari does not zoom in on focus */
	font-size: 16px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--contrast) !important;
}
.byrossland-product-customizer__fields .byrossland-product-customizer__control--input:focus {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: none !important;
	outline: none !important;
}
.byrossland-product-customizer__char-counter {
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	letter-spacing: 0.02em;
	pointer-events: none;
}
.byrossland-product-customizer__char-counter.is-over {
	background: var(--wp--preset--color--accent) !important;
}

/* Pill buttons (Naturlig / Med farge) — outlined, filled when checked */
.byrossland-product-customizer__buttons {
	gap: 10px !important;
}
.byrossland-product-customizer__button-label {
	background: var(--wp--preset--color--base);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 80%, transparent) !important;
	border-radius: 999px !important;
	padding: 9px 18px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--primary) !important;
	letter-spacing: 0.01em;
}
.byrossland-product-customizer__button-option:hover .byrossland-product-customizer__button-label {
	border-color: var(--wp--preset--color--primary) !important;
}
.byrossland-product-customizer__control--buttons:checked + .byrossland-product-customizer__button-label {
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}
.byrossland-product-customizer__button-price {
	font-size: 11px !important;
	font-weight: 500 !important;
	opacity: 0.7;
	margin-left: 6px !important;
}

/* Color swatches — 34px circles, active ring in primary navy */
.byrossland-product-customizer__color { gap: 14px !important; }
.byrossland-product-customizer__color-swatch {
	width: 34px !important;
	height: 34px !important;
	box-shadow: inset 0 0 0 1px rgba(27, 60, 83, 0.12) !important;
	border: 2px solid transparent !important;
}
.byrossland-product-customizer__color-option:hover .byrossland-product-customizer__color-swatch {
	transform: scale(1.06);
}
.byrossland-product-customizer__control--color:checked + .byrossland-product-customizer__color-swatch {
	border-color: transparent !important;
	box-shadow: 0 0 0 1.5px var(--wp--preset--color--primary), inset 0 0 0 2px var(--wp--preset--color--base) !important;
}

/* CTA — terracotta pill, full width */
.byrossland-product-customizer__cta { margin: 0 !important; }
.byrossland-product-customizer__cta .single_add_to_cart_button,
.byrossland-product-customizer__cta .byrossland-product-customizer__add-to-cart {
	width: 100%;
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 14px 24px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
}
.byrossland-product-customizer__cta .single_add_to_cart_button:hover,
.byrossland-product-customizer__cta .byrossland-product-customizer__add-to-cart:hover {
	background: var(--wp--preset--color--accent-3) !important;
}

/* Payment row — small uppercase label + 5 brand logos centered */
.br-pdp-pay {
	gap: 10px !important;
	align-items: center;
	text-align: center;
	margin-top: 4px !important;
}
.br-pdp-pay-label {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, white);
	text-align: center;
	margin: 0 !important;
}
.br-pdp-pay-row {
	gap: 8px !important;
	align-items: center;
}
.br-pdp-pay-row .br-pay-logo { margin: 0 !important; }
.br-pdp-pay-row .br-pay-logo img {
	height: 26px;
	width: auto;
	display: block;
}

/* Dashed divider between payment row and trust meta */
.br-pdp-cart-divider {
	border: 0 !important;
	border-top: 1px dashed color-mix(in srgb, var(--wp--preset--color--secondary-3) 80%, transparent) !important;
	background: transparent !important;
	margin: 14px 0 8px !important;
	opacity: 1 !important;
}

/* Trust meta — small grey row, two items separated by a dot via flex gap */
.br-pdp-trust-meta {
	gap: 18px !important;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, white);
}
.br-pdp-trust-meta p { margin: 0 !important; }

/* --- Sticky mobile add-to-cart bar ----------------------------------
   Native wp:button — inherits brand pill, navy bg, Quicksand typography,
   spacing and hover from theme.json. We only add the floating position,
   the box-shadow lift, full-width pinning, and the trailing arrow. */
.wp-block-buttons.br-pdp-sticky-wrap { display: none; margin: 0 !important; }
.wp-block-button.br-pdp-sticky {
	position: fixed;
	left: 12px; right: 12px; bottom: 12px;
	z-index: 90;
	margin: 0 !important;
}
.wp-block-button.br-pdp-sticky .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-shadow: 0 18px 36px rgba(27, 60, 83, 0.18), 0 4px 8px rgba(27, 60, 83, 0.10);
}
.wp-block-button.br-pdp-sticky .wp-block-button__link::after {
	content: "↓";
	letter-spacing: 0;
}
/* Scrolled past the customizer — arrow points back up to it. Class toggled
   from JS via IntersectionObserver in functions.php. */
.br-pdp-sticky-wrap.is-past .wp-block-button.br-pdp-sticky .wp-block-button__link::after {
	content: "↑";
}
@media (max-width: 899px) {
	.wp-block-buttons.br-pdp-sticky-wrap { display: block; }
	body.single-product { padding-bottom: 90px; }
	.br-pdp-info { gap: 16px; }
	/* Hide the sticky CTA while the actual add-to-cart button is in view —
	   no competing buy buttons in the customizer area. Class toggled from JS
	   via IntersectionObserver in functions.php. */
	.wp-block-buttons.br-pdp-sticky-wrap.is-in-cart { display: none; }
}

/* ==========================================================================
   Category archive hero — sits above the product grid on every product
   category template (taxonomy-product_cat-*). Inspired by the front-page
   editorial hero: cream band, eyebrow with terracotta line, big centered
   query-title, narrow lede, sub-category chip row.
   ========================================================================== */
.cat-hero {
	margin-bottom: clamp(40px, 6vw, 70px);
}
.cat-hero .wp-block-woocommerce-breadcrumbs {
	display: block;
	margin: 0 0 22px;
	padding-top: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, white);
}
.cat-hero .wp-block-woocommerce-breadcrumbs .breadcrumb-separator,
.cat-hero .wp-block-woocommerce-breadcrumbs > * + *::before {
	margin: 0 8px;
	opacity: 0.6;
}
.cat-hero .wp-block-woocommerce-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.cat-hero .wp-block-woocommerce-breadcrumbs a:hover { color: var(--wp--preset--color--primary); }

.cat-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 18px;
}
.cat-hero .eyebrow .line {
	width: 28px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	display: block;
}

.cat-hero .cat-title.wp-block-query-title,
.cat-hero h1.cat-title,
.cat-hero .cat-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.4rem, 4.6vw, 4rem) !important;
	font-weight: 500 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.022em !important;
	color: var(--wp--preset--color--primary) !important;
	max-width: 18ch;
	margin: 18px 0 24px !important;
}
.cat-hero h1.cat-title em {
	font-family: var(--wp--preset--font-family--caveat), "Quicksand", cursive;
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}

.cat-hero .cat-lede {
	max-width: 56ch;
	/* `is-layout-constrained` auto-centers children that aren't alignleft/right/full
	   via `!important` margins. Force left-alignment so the lede sits flush with
	   the title in single-column hero layouts. */
	margin: 0 auto 24px 0 !important;
	font-size: 17px;
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, white);
}

/* Facts strip below the lede — three small inline items with emoji + label. */
.cat-hero-facts {
	gap: 12px 28px !important;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, white);
	margin-left: 0 !important;
	margin-right: auto !important;
}
.cat-hero-facts p {
	margin: 0 !important;
}
.cat-hero-facts strong { color: var(--wp--preset--color--primary); }

/* Right column — image with overlays: "BJØRKFINER · 6 MM" tag (top-left)
   and a swatches pill (bottom-left). The column wraps both via position:
   relative so the swatches group can sit on top of the image bottom edge. */
.cat-hero-visual-col {
	position: relative;
}
.cat-hero-visual-col .cat-hero-visual {
	margin: 0;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--secondary-3);
	box-shadow: 0 14px 30px rgba(27, 60, 83, 0.10);
}
.cat-hero-visual-col .cat-hero-visual img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	border-radius: 6px;
}
@media (max-width: 800px) {
	.cat-hero-grid.wp-block-columns { flex-direction: column-reverse; }
	.cat-hero-grid.wp-block-columns .wp-block-column { flex-basis: auto !important; width: 100%; }
}

.cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(24px, 4vw, 40px);
}
.cat-chips a {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--secondary-3);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: background 200ms cubic-bezier(0.2, 0, 0.2, 1),
	            color 200ms cubic-bezier(0.2, 0, 0.2, 1),
	            border-color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.cat-chips a:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Category SEO — editorial 2-col: sticky head with eyebrow + h2 + lede on
   the left, body sections (h3 + paragraphs + bullet list) on the right. */
.cat-seo .cat-seo-head {
	position: sticky;
	top: 100px;
}
@media (max-width: 800px) {
	.cat-seo .cat-seo-head { position: static; }
}
.cat-seo .cat-seo-head h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.012em !important;
	color: var(--wp--preset--color--primary);
}
.cat-seo .cat-seo-head h2 em {
	font-family: var(--wp--preset--font-family--caveat), "Quicksand", cursive;
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}
.cat-seo .cat-seo-body h3 {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 12px;
}
.cat-seo .cat-seo-body p {
	font-size: 15px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, white);
	margin: 0 0 12px;
}
.cat-seo .cat-seo-bullets {
	list-style: none !important;
	padding: 0;
	margin: 0;
}
.cat-seo .cat-seo-bullets li {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	padding: 8px 0 8px 26px;
	position: relative;
}
.cat-seo .cat-seo-bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 8px;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* ==========================================================================
   Category FAQ — 2-col, sticky head on the left, accordion list on the right.
   Reuses the existing `.br-pdp-accordion` visual language (hairlines, "+" icon)
   via the same wp:accordion block so we keep one mental model. */
.cat-faq .cat-faq-accordion .wp-block-accordion-item {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 60%, transparent);
}
.cat-faq .cat-faq-accordion .wp-block-accordion-item:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 60%, transparent);
}
.cat-faq .cat-faq-accordion .wp-block-accordion-heading { margin: 0; }
.cat-faq .cat-faq-accordion .wp-block-accordion-heading__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: transparent;
	border: 0;
	padding: 22px 4px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--primary);
	text-align: left;
	transition: color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.cat-faq .cat-faq-accordion .wp-block-accordion-heading__toggle:hover {
	color: var(--wp--preset--color--accent);
}
.cat-faq .cat-faq-accordion .wp-block-accordion-heading__toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-size: 18px;
	line-height: 1;
	flex: none;
	font-weight: 400;
	transition: transform 320ms cubic-bezier(0.2, 0, 0.2, 1);
}
.cat-faq .cat-faq-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate(45deg);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: white;
}
.cat-faq .cat-faq-accordion .wp-block-accordion-panel {
	padding: 0 4px 26px;
	font-size: 15px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, white);
}
.cat-faq .cat-faq-accordion .wp-block-accordion-panel p {
	margin: 0 0 0.8em;
}
.cat-faq .cat-faq-accordion .wp-block-accordion-panel p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Product loop — site-wide ByRossland card.
   Targets the markup produced by Nexus's ProductCollectionTemplatePattern,
   so every product-collection on every page renders with the new design.
   The Nexus pattern adds .byrossland-woocommerce-grid to the <ul>.
   ========================================================================== */
ul.byrossland-woocommerce-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Grid layout — catalog/category. Skipped for carousel collections so
   horizontal-scroll related-products keep their swipe behaviour. */
ul.byrossland-woocommerce-grid:not(.is-product-collection-layout-carousel) {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	flex-wrap: unset;
}
@media (max-width: 1100px) {
	ul.byrossland-woocommerce-grid:not(.is-product-collection-layout-carousel) {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 800px) {
	ul.byrossland-woocommerce-grid:not(.is-product-collection-layout-carousel) {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}
}
ul.byrossland-woocommerce-grid:not(.is-product-collection-layout-carousel) > li.wc-block-product {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	min-width: 0;
	max-width: none;
	flex: unset !important;
}
/* Carousel layout — keep WC's horizontal-scroll defaults but neutralise
   borders/padding and tighten card spacing per the new design. */
ul.byrossland-woocommerce-grid.is-product-collection-layout-carousel {
	gap: 16px;
	padding: 4px 0;
}
ul.byrossland-woocommerce-grid.is-product-collection-layout-carousel > li.wc-block-product {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
/* Mobile: break the carousel out of any constrained parent so the swipe
   spans the full viewport. The 50% + translateX trick guarantees viewport
   width regardless of parent padding/alignment. */
@media (max-width: 800px) {
	/* Carousel spans the full viewport so swiping flows past the screen edges,
	   but the first card sits with the section gutter (30px) on its left and
	   the last card has the same gutter on its right when fully scrolled. */
	ul.byrossland-woocommerce-grid.is-product-collection-layout-carousel {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: 50% !important;
		transform: translateX(-50%);
		padding-left: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
		scroll-padding-left: var(--wp--preset--spacing--50);
	}
	/* Nexus's inline rule adds margin-left of root-padding to the first child,
	   doubling the inset when combined with our padding-left. Zero it. */
	ul.byrossland-woocommerce-grid.is-product-collection-layout-carousel > li:first-child { margin-left: 0 !important; }
	ul.byrossland-woocommerce-grid.is-product-collection-layout-carousel > li:last-child  { margin-right: 0 !important; }
}
ul.byrossland-woocommerce-grid a.wp-block-tiptip-hyperlink-group-block {
	display: block;
	color: inherit;
	text-decoration: none;
}
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--secondary-2);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 14px;
}
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-media .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	transition: transform 320ms cubic-bezier(0.2, 0, 0.2, 1);
}
/* Image zoom only on devices with a real hover state — touch devices keep
   the hover effect "stuck" after a tap, which feels broken. */
@media (hover: hover) {
	ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block:hover .product-media .wp-block-post-featured-image img {
		transform: scale(1.04);
	}
}
/* Hide-until-hover quick-add CTA */
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-media .quick-add {
	position: absolute;
	left: 14px; right: 14px; bottom: 14px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 999px;
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms cubic-bezier(0.2, 0, 0.2, 1), transform 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
@media (hover: hover) {
	ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block:hover .product-media .quick-add {
		opacity: 1;
		transform: translateY(0);
	}
}
/* Touch devices: hide the quick-add entirely. Tap goes straight to the
   product page where the customizer + add-to-cart-form live anyway. */
@media (hover: none) {
	ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-media .quick-add {
		display: none;
	}
}
/* Title — 16px Quicksand 500 navy. The pattern markup carries inline spacing
   styles so we have to use !important to enforce the design's 14/4/0 rhythm. */
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.005em !important;
	color: var(--wp--preset--color--primary) !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	text-decoration: none;
}
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-meta {
	margin: 0 !important;
	padding: 0 !important;
}
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-name a { text-decoration: none; color: inherit; }
/* Price + meta row */
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, white);
}
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-meta .wc-block-components-product-price,
ul.byrossland-woocommerce-grid .wp-block-tiptip-hyperlink-group-block .product-meta .wp-block-woocommerce-product-price {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
}

/* ==========================================================================
   Site header — only what blocks can't express:
     · sticky positioning + z-index
     · 3-column grid layout (block layout=flow can't do this)
     · ::after dot indicator on current/ancestor nav items
     · refined typography on the navigation block output
     · cart badge tinted to brand terracotta
   The block markup handles bg, border-bottom, padding, alignment.
   ========================================================================== */
/* Sticky-header behavior — the header keeps its place in the document flow
   (so it reserves its own space with no body padding and no load "jump"), and
   sticks to the top on scroll. header.js only toggles .is-minimized /
   .is-hidden and sets --wpadminbar-offset; it no longer pushes the body down. */
html:not(.has-modal-open) .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wpadminbar-offset, 0px);
	left: 0;
	width: 100%;
	z-index: 999;
	background: #fff;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	will-change: transform;
}
html:not(.has-modal-open) .wp-site-blocks > header.wp-block-template-part.is-minimized {
	box-shadow: 0 0 30px rgba(0,0,0,0.15);
}
html:not(.has-modal-open) .wp-site-blocks > header.wp-block-template-part.is-hidden {
	transform: translateY(-100%);
}
body.block-editor-iframe__body .wp-site-blocks > header.wp-block-template-part {
	position: relative !important;
}

/* Force a 3-column grid on the inner group (overrides wp-block-group
   `is-layout-flow` defaults). Logo on the left, nav in the middle, tools on
   the right — `order` reorders without changing the DOM markup. */
.site-header .site-header-inner.wp-block-group {
	max-width: 1340px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
}

/* Navigation block typography — reach inside the rendered output to apply
   the design's 14px / 0.04em utility. The link colour transitions on hover
   to brand-primary. */
.site-header .wp-block-navigation.site-nav {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
}
/* Top-level nav items only — restrict to direct children of the nav's
   container so the styling does NOT bleed into items inside the mega-menu
   dropdown panels. The panel items keep their natural link styling. */
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li > .wp-block-navigation-item__content,
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li > .wp-block-outermost-mega-menu__toggle {
	position: relative;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 0;
	padding: 6px 0;
	font: inherit;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.2, 0, 0.2, 1);
	text-decoration: none;
}
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li > .wp-block-outermost-mega-menu__toggle:hover {
	color: var(--wp--preset--color--primary);
}

/* Active-section dot — terracotta dot under the current top-level item, absolute
   so it never shifts the row's baseline. Restrict to direct children only so
   the dot doesn't appear under links inside mega-menu panels. */
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li.current-menu-item > a::after,
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li.current-menu-ancestor > a::after,
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li.current_page_item > a::after,
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li.current_page_ancestor > a::after,
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li.current-menu-item > .wp-block-outermost-mega-menu__toggle::after,
.site-header .wp-block-navigation.site-nav > .wp-block-navigation__container > li.current-menu-ancestor > .wp-block-outermost-mega-menu__toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%);
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Logo — keep block-level width attribute, just neutralise figure spacing.
   `.wp-block-image.size-full` defaults to `width: max-content`, which grabs
   more grid track space than the actual 38px image. Pin the figure width to
   the image so the centered grid column doesn't bleed. */
.site-header .site-brand { margin: 0; line-height: 0; justify-self: center; width: 38px; }
.site-header .site-brand img { display: block; height: auto; }

/* Tools cluster — Woo's customer-account, mini-cart, and FibSeach blocks
   render with their own chrome. We tighten them so they read as a row of
   42px icon buttons. The wp:group flex layout adds a default block-gap
   margin-top (1.2em) that shifts the whole cluster down inside the header
   grid — zero it so tools center-align with logo and hamburger. */
.site-header .site-tools {
	gap: 4px;
	align-items: center;
	justify-self: end;
	margin: 0 !important;
}
.site-header .site-tools .wp-block-woocommerce-customer-account .wc-block-customer-account__link,
.site-header .site-tools .wp-block-woocommerce-mini-cart-contents-wrapper,
.site-header .site-tools .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button,
.site-header .site-tools .dgwt-wcas-search-icon-trigger {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast);
	transition: background 200ms cubic-bezier(0.2, 0, 0.2, 1),
	            color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.site-header .site-tools .dgwt-wcas-search-icon-trigger:hover {
	background: var(--wp--preset--color--secondary-2);
	color: var(--wp--preset--color--primary);
}
.site-header .site-tools .wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover,
.site-header .site-tools .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--primary);
}

/* Mini-cart count badge — WC sets background/color inline via the
   Interactivity API (data-wp-style--background-color), so we need
   !important to apply the brand colors. Also position absolutely over
   the cart icon as a small pill. */
.site-header .site-tools .wp-block-woocommerce-mini-cart .wc-block-mini-cart__quantity-badge {
	position: relative;
}
.site-header .site-tools .wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
	position: absolute;
	top: -2px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--base);
	background: #d8593e !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 800px) {
	/* Mobile: same logo-first order, but tighter columns (auto auto 1fr) so
	   the hamburger sits right after the logo and the tools cluster pins to
	   the right edge. */
	.site-header .site-header-inner.wp-block-group {
		grid-template-columns: auto auto 1fr;
	}
	.site-header .site-brand          { justify-self: start; }
	.site-header .wp-block-navigation { justify-self: start; }
	.site-header .site-tools          { justify-self: end; }
	/* Announce text is too prominent at 13px on mobile — drop to 11px */
	.br-announce,
	.br-announce p { font-size: 11px !important; }
}

/* ==========================================================================
   Site footer — only rules that block-level styling can't express.
   The block markup itself sets bg, text color, padding, columns, typography.
   ========================================================================== */

/* Invert the navy SVG wordmark to white for the dark band */
.site-footer .brand-logo img {
	filter: brightness(0) invert(1);
	height: auto;
}

/* wp:list defaults to disc bullets — drop them for the navigation-style footer */
.site-footer .footer-col-list { list-style: none; padding-left: 0; }

/* Footer link defaults — block-level styling can't easily reach <a> children
   inside list-items, so we provide the colour rule centrally. */
.site-footer .footer-col-list a,
.site-footer .footer-col-list li {
	color: color-mix(in srgb, white 75%, transparent);
	text-decoration: none;
	transition: color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.site-footer .footer-col-list a:hover { color: white; }

/* Social links — circle border + accent hover. The default block styling
   doesn't give us the outlined-circle treatment we want. */
.site-footer .wp-block-social-links .wp-social-link {
	border: 1px solid color-mix(in srgb, white 20%, transparent);
	border-radius: 50%;
	transition: background 200ms cubic-bezier(0.2, 0, 0.2, 1),
	            border-color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.site-footer .wp-block-social-links .wp-social-link:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Bottom-row links inherit base color; underline on hover only */
.site-footer .wp-block-columns a {
	color: inherit;
	text-decoration: none;
}
.site-footer .wp-block-columns p a:hover { text-decoration: underline; }

/* ---- Footer paybar — payment + shipping pill row sitting on the navy band.
   Designed for restraint: transparent chips with a thin alpha border, label
   in muted upper-case, two groups split left/right and wrapping on mobile. */
.br-footer-pay {
	gap: 24px 56px !important;
	align-items: center;
}
.br-footer-pay-group {
	gap: 8px 10px !important;
	align-items: center;
}
.br-footer-pay-label {
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 4px 0 0 !important;
	white-space: nowrap;
}
.br-pay-chip {
	font-size: 11px !important;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 4px;
	padding: 6px 10px !important;
	margin: 0 !important;
	line-height: 1;
	background: transparent;
	white-space: nowrap;
}

/* The "Tag" paragraph variation, when wrapping a single anchor, gets the
   subtle "see all →" treatment with a hover transition. */
p.is-style-tag a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: color 200ms cubic-bezier(0.2, 0, 0.2, 1); }
p.is-style-tag a:hover { color: var(--wp--preset--color--accent); }

/* ==========================================================================
   Checkout (/kassen) — visual polish on the Nexus-customised WC checkout.
   We only tweak typography, borders, focus state and the order-total emphasis
   so the page reads in the same family as the rest of the new design system.
   ========================================================================== */

/* Section headings ("Om deg", "Ordren din", "Faktureringsdetaljer", …) */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout form.checkout h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 18px;
}

/* Field labels — small uppercase eyebrow to match the rest of the design */
.woocommerce-checkout form.checkout .form-row > label,
.woocommerce-checkout form.checkout p.form-row > label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, white);
	margin-bottom: 8px;
	display: block;
}
.woocommerce-checkout form.checkout .form-row > label .required,
.woocommerce-checkout form.checkout .form-row > label .optional {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Text inputs, textareas, selects — brand pill border, 8px radius, focus
   uses primary navy. 16px font-size so iOS doesn't zoom on focus. */
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout form.checkout .select2-selection,
.woocommerce-checkout form.checkout select {
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 80%, transparent) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 16px !important;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--base) !important;
	transition: border-color 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout form.checkout textarea:focus,
.woocommerce-checkout form.checkout select:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: none !important;
}

/* Order total row — bigger emphasis, brand-primary value (cream-box style) */
.woocommerce-checkout-review-order-table tfoot tr.order-total {
	background: var(--wp--preset--color--secondary-2);
}
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	padding: 16px 18px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	border: 0;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total small.includes_tax,
.woocommerce-checkout-review-order-table tfoot tr.order-total .includes_tax {
	display: block;
	margin-top: 4px;
	margin-left: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 500;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, white);
	letter-spacing: 0;
	white-space: nowrap;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total .includes_tax .amount {
	font-size: inherit;
	font-weight: 500;
	color: inherit;
}

/* Brand-aligned typography for the order-review table on all viewports —
   Quicksand for prices/titles, muted body for meta lines, hairline
   dividers tinted with secondary-3. */
.woocommerce-checkout-review-order-table tr.cart_item td.product-name {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--primary);
}
.woocommerce-checkout-review-order-table tr.cart_item td.product-name .product-quantity {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 600;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, white);
	margin-left: 4px;
}
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dl,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name .wc-item-meta,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name .variation {
	margin: 6px 0 0 !important;
	font-size: 13px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, white);
}
.woocommerce-checkout-review-order-table tr.cart_item td.product-name dt,
.woocommerce-checkout-review-order-table tr.cart_item td.product-name .wc-item-meta__label {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.02em;
    display: block;
    width: 100%;
}
.woocommerce-checkout-review-order-table tr.cart_item td.product-total {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.woocommerce-checkout-review-order-table tr.cart-subtotal {
	font-family: var(--wp--preset--font-family--heading);
}
.woocommerce-checkout-review-order-table tr.cart-subtotal th,
.woocommerce-checkout-review-order-table tr.cart-subtotal td {
	font-size: 14px !important;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.woocommerce-checkout-review-order-table tr.cart_item,
.woocommerce-checkout-review-order-table tr.cart-subtotal,
.woocommerce-checkout-review-order-table tr.shipping {
	border-color: color-mix(in srgb, var(--wp--preset--color--secondary-3) 45%, transparent) !important;
}

/* Shipping picker — match the customizer's pill card vocabulary: white card
   with a hairline secondary-3 border, primary navy ring + cream tint when
   selected, brand radio dot. */
.woocommerce-checkout #billing_country_field {
    display: none !important;
}

.woocommerce-checkout main .woocommerce .col2-set .col-1, .woocommerce-checkout main .woocommerce .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
}

.woocommerce-checkout form.checkout ul#shipping_method,
.woocommerce-checkout form.checkout ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.woocommerce-checkout form.checkout ul#shipping_method li,
.woocommerce-checkout form.checkout ul.woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--wp--preset--color--base);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 70%, transparent);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 200ms cubic-bezier(0.2, 0, 0.2, 1),
	            background-color 200ms cubic-bezier(0.2, 0, 0.2, 1);
	margin: 0 !important;
	list-style: none;
}
.woocommerce-checkout form.checkout ul#shipping_method li:hover,
.woocommerce-checkout form.checkout ul.woocommerce-shipping-methods li:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}
.woocommerce-checkout form.checkout ul#shipping_method li.selected,
.woocommerce-checkout form.checkout ul.woocommerce-shipping-methods li.selected {
	background: var(--wp--preset--color--secondary-2);
	border-color: var(--wp--preset--color--primary);
}
.woocommerce-checkout form.checkout ul#shipping_method li input[type="radio"],
.woocommerce-checkout form.checkout ul.woocommerce-shipping-methods li input[type="radio"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0 !important;
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
}
.woocommerce-checkout form.checkout ul#shipping_method li label,
.woocommerce-checkout form.checkout ul.woocommerce-shipping-methods li label {
	flex: 1;
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}
.woocommerce-checkout form.checkout ul#shipping_method li label .amount,
.woocommerce-checkout form.checkout ul.woocommerce-shipping-methods li label .amount {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	margin-left: 4px;
}

/* Mobile: stacked list with the brand-typography rules above. */
.woocommerce-checkout-review-order-table {
    display: block;
    border: 0 !important;
}
.woocommerce-checkout-review-order-table thead {
    display: none;
}
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
    display: block;
}
.woocommerce-checkout-review-order-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    padding: 12px 0;
    border-bottom: 0;
}
.woocommerce-checkout-review-order-table tr.shipping {
    grid-template-columns: 1fr;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    display: block;
    padding: 0 !important;
    text-align: left;
    border: 0 !important;
}
.woocommerce-checkout-review-order-table tr td.product-total,
.woocommerce-checkout-review-order-table tr.cart-subtotal td {
    text-align: right;
    align-self: start;
}
.woocommerce-checkout-review-order-table tr.shipping th {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, white);
    margin-bottom: 12px;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total {
    grid-template-columns: 1fr auto;
    padding: 16px 18px !important;
    margin-top: 14px;
    border-radius: 10px;
    border-bottom: 0;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
    font-size: 20px;
}


/* Subtle separation between the two main checkout columns (form / summary) */
.woocommerce-checkout form.checkout #customer_details h3,
.woocommerce-checkout form.checkout #order_review_heading {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary-3) 60%, transparent);
	padding-top: 28px;
	margin-top: 28px;
}
.woocommerce-checkout form.checkout #customer_details > div:first-child h3:first-child,
.woocommerce-checkout form.checkout > h3:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.woocommerce-checkout-review-order-table tbody tr.cart_item:nth-child(even) {
    background: #f8f3ef;
    padding-left: clamp(30px, 5vw, 50px);
    margin-left: clamp(-30px, -5vw, -50px);
    padding-right: clamp(30px, 5vw, -50px);
    margin-right: clamp(-30px, 5vw, -50px);
}

.woocommerce-checkout .payment_box.payment_method_dintero_checkout,
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout form.checkout #customer_details > div:first-child h3:first-child,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    display: none !important;
}


.woocommerce-checkout .wc_payment_method.payment_method_dintero_checkout label {
    font-size: 0 !important;
}


.wc-block-components-product-metadata__description {
    display: none !important;
}

.woocommerce div.product form.cart{
    margin-bottom: 1em !important;
}

/* Cart/checkout item details (e.g. bundle contents, customizer choices) —
   render each entry on its own line as sub-lines, instead of WooCommerce's
   inline " / "-separated run-on. */
.wc-block-components-product-details {
    margin: 6px 0 0;
    padding: 0;
}
.wc-block-components-product-details > span {
    display: block;
}
/* Hide the " / " separators WooCommerce injects between entries (nested inside
   each entry span), now that each entry is on its own line. */
.wc-block-components-product-details span[aria-hidden="true"] {
    display: none;
}
.wc-block-components-product-details__name {
    font-weight: 500;
}