/* ==========================================================================
   Arctic Trucks — Theme Custom CSS
   The active header is the hybrid bar (.at-header + .at-header--hybrid):
   a single var(--at-header-h) bar, transparent over hero, solid white when revealed /
   nav-hovered / focused / mega-menu open, with a centered hanging logo
   tab. See the "HEADER — HYBRID VARIANT" section below for the full state
   machine. Base .at-header rules (fixed position, hidden/revealed) live
   in "HEADER — BASE".
   ========================================================================== */


/* ==========================================================================
   GLOBAL
   No body padding-top — the header is fixed and transparent by default,
   overlaying the page hero. Solid-header pages handle their own offset.
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Pin bold inline text to 700. The browser default `bolder` is relative, so
   with the Figtree variable font (300–900) strong/b inside a heavier parent
   (e.g. an 800-weight heading) resolved to 900 — heavier than intended. */
strong,
b {
	font-weight: 700;
}

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

:root :where(.entry-content.is-layout-flow) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Embedded iframes (YouTube, Vimeo, maps, etc.) never overflow their
 * container. Editors paste raw <iframe> markup with hardcoded width=560
 * attrs all the time; this caps it without touching height — aspect
 * ratio for responsive video should still be set per-embed. */
iframe {
	max-width: 100%;
}

/* Admin bar height exposed as a custom property so any fixed/sticky
 * surface that anchors below the header (controls bar, sidebar) can
 * compose its own offset from the same source. WP's admin bar is 32px
 * on desktop, 46px on `max-width: 782px`. */
:root {
	--at-admin-bar-offset: 0px;
	/* Header bar height — single knob. Everything that offsets against
	   the fixed bar (site padding, sticky controls, sidebar, vc sticky)
	   reads this. 66px = 44px logo + 11px air above/below. */
	--at-header-h: 66px;
	/* Brand-blue recolor for the logo <img>: the uploaded SVG carries a
	   stale #4982CF fill, so every "blue logo" state forces original-blue
	   #0071CE via this filter chain (numerically solved — renders exactly
	   rgb(0,113,206) from any source color). If the media-library SVG is
	   ever re-exported with the correct fill, this stays a no-op visually. */
	--at-logo-brand-filter: brightness(0) saturate(100%) invert(33%)
		sepia(64%) saturate(4961%) hue-rotate(191deg) brightness(90%)
		contrast(105%);
}
.admin-bar {
	--at-admin-bar-offset: 32px;
}
@media (max-width: 782px) {
	.admin-bar {
		--at-admin-bar-offset: 46px;
	}
}

.admin-bar .at-header {
	top: var(--at-admin-bar-offset);
}


/* ==========================================================================
   GLOBAL FORM CONTROLS
   Baseline for bare form fields (Contact Form 7 and any plugin that ships
   unstyled markup). Block themes get nothing here for free: theme.json's
   elements API has no input/select/form element, and elements.button only
   compiles to .wp-element-button — never to <input type=submit>.
   Every selector is wrapped in :where() (specificity 0), so any surface
   that styles its own fields (WC checkout/account, FiboSearch, filter
   blocks) wins without !important battles. Values mirror the account
   address forms (paper-grey border, blue focus ring) and the catalog-
   sorting select chevron; the submit button mirrors theme.json
   styles.elements.button token for token.
   ========================================================================== */

:where(form) :where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="date"],
	textarea,
	select
) {
	width: 100%;
	max-width: 100%;
	padding: 14px;
	border: 1px solid var(--wp--preset--color--paper-grey);
	border-radius: var(--wp--custom--border-radius--input);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
	box-shadow: none;
	transition: border-color var(--wp--custom--transition--fast);
}

:where(form) :where(input, textarea, select):focus {
	border-color: var(--wp--preset--color--original-blue);
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--light-blue);
}

:where(form) :where(input, textarea)::placeholder {
	color: var(--wp--preset--color--dark-grey);
	opacity: 1;
}

:where(form) :where(textarea) {
	min-height: 140px;
	resize: vertical;
}

/* Same chevron treatment as the catalog-sorting select (theme.json). */
:where(form) :where(select) {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565657' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 14px;
}

/* Submit: mirrors styles.elements.button (.wp-element-button) so bare
   <input type=submit> / <button> in plugin forms read as theme CTAs. */
:where(form) :where(input[type="submit"], button[type="submit"]) {
	display: inline-block;
	width: auto;
	padding: 1rem 2rem;
	border: none;
	border-radius: var(--wp--custom--border-radius--button);
	background-color: var(--wp--preset--color--original-blue);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--default),
		box-shadow var(--wp--custom--transition--default),
		transform var(--wp--custom--transition--fast);
}
:where(form) :where(input[type="submit"], button[type="submit"]):hover {
	background-color: var(--wp--preset--color--medium-blue);
	box-shadow: var(--wp--custom--shadow--subtle);
}
:where(form) :where(input[type="submit"], button[type="submit"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--original-blue);
	outline-offset: 2px;
}
:where(form) :where(input[type="submit"], button[type="submit"]):active {
	transform: translateY(1px);
}

/* Contact Form 7 specifics: validation + response states on the theme's
   feedback tokens. CF7 wraps each field in a .wpcf7-form-control-wrap
   span — make it block-level so fields stack with breathing room. */
.wpcf7-form-control-wrap {
	display: block;
	margin-block: var(--wp--preset--spacing--xs);
}
.wpcf7 .wpcf7-not-valid {
	border-color: var(--wp--preset--color--red);
}
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: var(--wp--preset--color--red);
	font-size: var(--wp--preset--font-size--body-xs);
}
.wpcf7 .wpcf7-response-output {
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: var(--wp--custom--border-radius--default);
	font-size: var(--wp--preset--font-size--body-sm);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--wp--preset--color--light-red);
	background-color: color-mix(in srgb, var(--wp--preset--color--light-red) 25%, white);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--original-blue);
	background-color: var(--wp--preset--color--light-blue);
}


/* ==========================================================================
   HEADER — BASE
   ========================================================================== */

.at-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background: transparent;
	transition: background 0.3s ease, transform 0.3s ease;
}

.at-header--hidden {
	transform: translateY(-100%);
}

/* No-hero initial state: header sits inline at top of document with no
 * pill backgrounds, dark text on the page bg. JS removes the
 * `--hidden` / `--revealed` classes when scrollY < trigger so this rule
 * applies. Transition from revealed → initial is a snap because
 * position-type can't animate; the visual continuity holds because
 * scrollY=0 means viewport top = document top = same y for the bar. */
body.at-no-hero .at-header:not(.at-header--hidden):not(.at-header--revealed) {
	position: static;
	transform: none;
}

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

/* Mini-cart drawer title — WC defaults to 2em. Pull down to body size
   and hide the trailing "(elementer: N)" count (second span); the cart
   already shows item count via the badge on the trigger. */
h2.wc-block-mini-cart__title {
	font-size: var(--wp--preset--font-size--body);
	margin-bottom: -16px;
	padding-bottom: 24px;
}
h2.wc-block-mini-cart__title > span:nth-child(2) {
	display: none;
}

/* Hide the product short description (excerpt) in the cart drawer line items —
   it bloats each row. Scoped to the mini-cart so the full Cart/Checkout pages
   keep theirs. Variation + item_data details (.wc-block-components-product-
   details) are untouched. */
.wc-block-mini-cart-items .wc-block-components-product-metadata__description {
	display: none;
}

/* Hide the stock-status badge (e.g. "Available on backorder") on cart line
   items — both the mini-cart drawer (.wc-block-mini-cart-items, which also
   carries .wc-block-cart-items) and the full Cart page (.wc-block-cart-items
   alone). WC renders these rows in a frontend React component (CartLineItems-
   Table / MiniCartContents), NOT as editable inner blocks — the line-items
   block is a self-closing container — so there's no block/attr/filter to
   remove it and the notify/yes backorder split can't reach it. Dropping the
   ambiguous badge here is the only theme-layer lever. */
.wc-block-cart-items .wc-block-components-product-badge {
	display: none;
}

/* Product name in the cart drawer — no underline, bold, AT black. The compound
   .wc-block-mini-cart-items.wc-block-cart-items + row + name reaches (0,4,0) to
   beat WC's own font-weight:500 rule (0,3,1) on the cart-items table. */
.wc-block-mini-cart-items.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-mini-cart-items.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover,
.wc-block-mini-cart-items.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:focus {
	text-decoration: none;
	font-weight: 700;
	color: var(--wp--preset--color--black);
}


/* When any mega-menu panel is open, paint the header bar white so it
 * meets the panel below seamlessly. With ch/mega-menu v2.0.0 the panel
 * self-positions to the header's bottom edge (no gap), so a plain bg
 * fill is enough — no box-shadow workaround. */
.at-header:has(.ch-mega-menu-item.is-open) {
	background: #fff;
}

/* --- ch/tabs skin inside the desktop mega plate (Produkter panel) ---
 * Plate-scoped on purpose: when the panel is moved into the mobile
 * drill-down pane it leaves the plate, so the drill list styling
 * (vertical list, ch-blocks) applies untouched there.
 * Tab titles carry no horizontal padding (block baseline is 0) — only
 * the list gap separates them, so the first title sits flush with the
 * category columns below. Active tab gets an underline. */
.ch-mega-menu__plate .ch-tabs__list {
	gap: 1.25rem;
	margin-bottom: var(--wp--preset--spacing--lg, 40px);
}

.ch-mega-menu__plate .ch-tabs__tab {
	position: relative;
	padding-bottom: 4px;
	color: var(--wp--preset--color--dark-grey);
	transition: color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.ch-mega-menu__plate .ch-tabs__tab:hover,
.ch-mega-menu__plate .ch-tabs__tab:focus-visible {
	color: var(--wp--preset--color--black);
}

.ch-mega-menu__plate .ch-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--original-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.ch-mega-menu__plate .ch-tabs__tab.is-active {
	color: var(--wp--preset--color--black);
}

.ch-mega-menu__plate .ch-tabs__tab.is-active::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ch-mega-menu__plate .ch-tabs__tab,
	.ch-mega-menu__plate .ch-tabs__tab::after {
		transition: none;
	}
}

/* Separator under the header bar when a panel is open: drawn as the
 * plate's OWN top border, not on the header — the plate (z-index 999)
 * overlaps the header's bottom edge (z 50) and would paint over a
 * header border-bottom. Scoped to .is-open: the closed plate is height 0
 * but an unconditional border still paints as a 1px line hanging under
 * the header after the panel closes. */
.ch-mega-menu__plate.is-open {
	border-top: 1px solid var(--wp--preset--color--light-grey);
}

/* Vertical tabs: full-height divider between the title column and the
 * panel content (Gymshark-style; theirs is #EBEBEB — we use the
 * light-grey token). The block grid aligns items start and gaps 1rem;
 * we stretch the list to the row height, zero the gap, and put the
 * breathing room in padding on both sides of the line. The line itself
 * is a pseudo-element with negative overshoot matching the authored
 * padding on the wrapping group in menu-produkter.html (sm top / lg
 * bottom) so it runs edge to edge of the plate, like Gymshark's.
 * margin-bottom belongs to the horizontal skin — reset it. */
.ch-mega-menu__plate .ch-tabs--vertical {
	column-gap: 0;
	align-items: stretch;
}

.ch-mega-menu__plate .ch-tabs--vertical > .ch-tabs__list {
	position: relative;
	margin-bottom: 0;
	min-width: 220px;
	padding-right: var(--wp--preset--spacing--md, 24px);
	/* No gap between rows — the spacing lives as padding ON the rows
	   (below) so the hover area is contiguous: the pointer can travel
	   the whole column without dead zones between tabs. */
	gap: 0;
}

.ch-mega-menu__plate .ch-tabs--vertical > .ch-tabs__list::after {
	content: "";
	position: absolute;
	right: 0;
	top: calc(-1 * var(--wp--preset--spacing--sm, 16px));
	bottom: calc(-1 * var(--wp--preset--spacing--lg, 40px));
	width: 1px;
	background: var(--wp--preset--color--light-grey);
}

.ch-mega-menu__plate .ch-tabs--vertical > .ch-tabs__panels {
	padding-left: var(--wp--preset--spacing--md, 24px);
}

/* Vertical tab rows: title left, chevron right (Gymshark) — signals the
 * content opens beside. The tab's ::after is the underline in the
 * horizontal skin; in vertical it is repurposed as the chevron (static
 * flex item, currentColor mask — same technique as the drilldown
 * chevron in ch-blocks), and the active underline moves to the LABEL
 * span so it spans the text, not the stretched row. */
.ch-mega-menu__plate .ch-tabs--vertical > .ch-tabs__list > .ch-tabs__tab {
	justify-content: space-between;
	gap: 12px;
	/* Row rhythm as padding, not list gap (contiguous hover area). */
	padding-block: 0.625rem;
}

.ch-mega-menu__plate .ch-tabs--vertical > .ch-tabs__list > .ch-tabs__tab::after {
	content: "";
	position: static;
	width: 14px;
	height: 14px;
	flex: none;
	background: currentColor;
	transform: none;
	transition: none;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

.ch-mega-menu__plate .ch-tabs--vertical .ch-tabs__tab-label {
	position: relative;
	padding-bottom: 4px;
}

.ch-mega-menu__plate .ch-tabs--vertical .ch-tabs__tab-label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--original-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.ch-mega-menu__plate .ch-tabs--vertical .ch-tabs__tab.is-active .ch-tabs__tab-label::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ch-mega-menu__plate .ch-tabs--vertical .ch-tabs__tab-label::after {
		transition: none;
	}
}

/* Uniform typography in the Produkter panel: everything at the default
 * body size (tab titles inherit it — the block carries no fontSize attr).
 * The plugin's menu-section.css compact defaults (body-xs headings,
 * 13px links, 12px see-all/CTA) are theme choices to override, not fork —
 * plate-scoped so category/brand landing pages keep the plugin defaults.
 * Headings/see-all/CTA keep their uppercase + weight treatment; the list
 * line-height drops from 2.2 so 1rem rows don't gap out. */
.ch-mega-menu__plate .at-shop-menu-categories__heading,
.ch-mega-menu__plate .at-shop-menu-categories__list,
.ch-mega-menu__plate .at-shop-menu-categories__count,
.ch-mega-menu__plate .at-shop-menu-categories__see-all,
.ch-mega-menu__plate .at-shop-menu-categories__cta-link {
	font-size: var(--wp--preset--font-size--body, 1rem);
}

.ch-mega-menu__plate .at-shop-menu-categories__list {
	line-height: 2;
}


/* ==========================================================================
   HEADER — MOBILE RESPONSIVE MENU
   ========================================================================== */

/* --- Hamburger / close toggle button ---
   Core navigation already handles show/hide at the responsive
   breakpoint and inherits color via currentColor. We only override
   the previously hardcoded `color: #fff` that left the toggle
   invisible on no-hero pages (white-on-white). */

.at-header .wp-block-navigation__responsive-container-open,
.at-header .wp-block-navigation__responsive-container-close {
	color: inherit;
	align-items: center;
}

/* --- Responsive container (the menu overlay / panel) --- */

@media (max-width: 767px) {

	.at-header .wp-block-navigation__responsive-container.is-menu-open {
		background: #fff;
		color: var(--wp--preset--color--black);
	}

	/* --- Navigation items --- */

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation-item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation-item:last-child {
		border-bottom: none;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		display: block;
		padding: 14px 0;
		font-family: var(--wp--preset--font-family--figtree);
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--wp--preset--color--black);
		text-decoration: none;
		transition: color 0.2s ease;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover,
	.at-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus {
		color: var(--wp--preset--color--original-blue);
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--original-blue);
	}

	/* --- Submenus --- */

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		position: static;
		width: 100%;
		padding: 0 0 8px;
		margin: 0;
		background: transparent;
		box-shadow: none;
		border: none;
		display: flex;
		flex-direction: column;
		border-left: 2px solid rgba(0, 113, 206, 0.2);
		margin-left: 0;
		padding-left: 16px;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: none;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 8px 0;
		font-size: 0.875rem;
		font-weight: 400;
		color: var(--wp--preset--color--dark-grey);
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.at-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
		color: var(--wp--preset--color--original-blue);
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* --- Search in mobile menu --- */

	.at-header .wp-block-navigation__responsive-container .wp-block-search {
		margin-bottom: 16px;
		order: -1;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-search__inside-wrapper {
		border: 1px solid var(--wp--preset--color--light-grey);
		background: rgba(0, 0, 0, 0.04);
		border-radius: 0;
		padding: 0;
		transition: border-color 0.2s ease, background 0.2s ease;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-search__inside-wrapper:focus-within {
		border-color: var(--wp--preset--color--original-blue);
		background: #fff;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-search__input {
		border: none;
		background: transparent;
		padding: 10px 12px;
		font-size: 0.875rem;
		color: var(--wp--preset--color--black);
		width: 100%;
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-search__input::placeholder {
		color: var(--wp--preset--color--dark-grey);
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-search__button {
		background: transparent;
		border: none;
		padding: 10px 12px;
		color: var(--wp--preset--color--dark-grey);
	}

	.at-header .wp-block-navigation__responsive-container .wp-block-search__button svg {
		width: 16px;
		height: 16px;
	}

	/* --- Mega menu sub-panels (slide-in from right) --- */

	.at-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0;
	}

	.at-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.at-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.at-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		position: relative;
		overflow: hidden;
		padding: 0;
		flex: 1;
	}

	.at-header .wp-block-navigation__responsive-container-close {
		top: 16px;
		right: 16px;
	}

	.at-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		padding: 48px 24px 24px;
		transition: transform 0.3s ease;
	}

	/* Drill pane open — lib/drilldown.js (ch-blocks) sets `ch-drilldown-open`
	 * on the content host. Slide the main nav list out to the left. */
	.at-header .wp-block-navigation__responsive-container-content.ch-drilldown-open > .wp-block-navigation__container {
		transform: translateX(-100%);
		pointer-events: none;
	}

	/* Skin the shared ch-blocks drill-down (structure ships with the plugin;
	 * the theme owns spacing, colors, and typography). */
	.at-header .wp-block-navigation__responsive-container-content {
		--ch-drilldown-padding: 20px 24px 24px;
	}

	.at-header .ch-drilldown__back {
		padding: 14px 0;
		margin-bottom: 8px;
		font-family: var(--wp--preset--font-family--figtree);
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--wp--preset--color--original-blue);
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	}

	.at-header .ch-drilldown__back:hover {
		color: var(--wp--preset--color--medium-blue);
	}

	.at-header .ch-drilldown__title {
		font-family: var(--wp--preset--font-family--figtree);
		font-size: 1.125rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: -0.01em;
		color: var(--wp--preset--color--black);
		margin: 0 0 16px;
		padding: 0;
	}

	.at-header .ch-drilldown__content .ch-mega-menu__panel {
		padding: 0 !important;
		margin: 0 !important;
	}

	.ch-drilldown__pane .wp-block-columns {
		flex-direction: column !important;
	}

	.ch-drilldown__pane .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.ch-drilldown__pane .at-mega-konfigurator {
		flex-direction: column;
		min-height: auto;
	}

	.ch-drilldown__pane .at-mega-konfigurator__nav {
		width: 100%;
		border-right: none;
	}

	.ch-drilldown__pane .at-mega-konfigurator__image {
		display: none;
	}

	/* ch/tabs drill list (Produkter): label styling for the vertical list. */
	.ch-drilldown__pane .ch-tabs--drilldown > .ch-tabs__list > .ch-tabs__tab {
		font-family: var(--wp--preset--font-family--figtree);
		font-size: 1rem;
		font-weight: 600;
		color: var(--wp--preset--color--black);
	}

	.at-header .wp-block-navigation__responsive-container .ch-mega-menu-item > .ch-mega-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.at-header .wp-block-navigation__responsive-container .ch-mega-menu-item > .ch-mega-menu__toggle .wp-block-navigation__submenu-icon {
		display: block;
		transform: rotate(-90deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.at-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
			transition: none;
		}
	}
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Footer brand mark: force original-blue regardless of the uploaded
   SVG's own (stale) fill — same token as the header's blue states. */
.at-footer .wp-block-site-logo img {
	filter: var(--at-logo-brand-filter);
}


/* ==========================================================================
   SHOP — Plain header (Mammut-style)
   Replaces the cover hero when the per-archive toggle is off.
   ========================================================================== */

/* Plain header is rendered by archive-hero.php INSIDE main, which has
 * `layout: constrained, wideSize: 1600`. The `.alignwide` class on the
 * header binds to core's `.is-layout-constrained > .alignwide` rule
 * automatically — no max-width override needed here. */
.at-shop-plain-header {
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--md);
}

.at-shop-plain-header h1,
.at-shop-plain-header .wp-block-query-title {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--wp--preset--color--black);
}

.at-shop-plain-header .at-breadcrumbs,
.at-shop-plain-header .at-parent-link {
	margin-bottom: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--dark-grey);
	font-size: var(--wp--preset--font-size--body-sm);
}

/* arctic-trucks/parent-link — single "← Parent" hop above a PLP H1.
   Block renders nothing on shop landing / non-archive pages, so no
   empty-state CSS is needed. Hero variant matches existing white-on-cover
   pattern from the previous WC breadcrumb usage. */
.at-parent-link {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.4;
}
.at-parent-link__link {
	color: inherit;
	text-decoration: none;
}
.at-parent-link__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.at-parent-link__arrow {
	font-size: 1.1em;
}
.at-parent-link--hero {
	color: var(--wp--preset--color--white);
}


/* ==========================================================================
   PAGE (generic page.html)
   ========================================================================== */

/* Featured-image hero — same cinematic banner proportions as the shop
 * hero. Rendered only when the page opts in (at_show_hero) AND has a
 * featured image (page-hero.php); otherwise the cover is swapped for
 * .at-page-plain-header below. */
.at-page-hero.wp-block-cover {
	min-height: clamp(440px, 66vh, 880px);
}
/* Bottom-left content sizes the inner-container to min-content; force it
 * full width so the title group's constrained layout (1600) caps + aligns
 * the H1 with the alignwide content below. */
.at-page-hero .wp-block-cover__inner-container {
	flex: 1 1 100%;
	width: 100%;
}
.at-page-hero__content {
	width: 100%;
}
.at-page-hero h1 {
	hyphens: auto;
	overflow-wrap: break-word;
}
/* Hero intro line — sits under the title, capped for readability over the
 * image. Rendered only when a manual excerpt is set (page-hero.php). */
.at-page-hero__excerpt {
	margin-top: var(--wp--preset--spacing--sm);
	margin-bottom: 0;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.5;
}
.at-page-hero__excerpt p {
	margin: 0;
}
/* Hero CTA — meta-driven core button, shown only when text + link are set. */
.at-page-hero__content .at-page-hero__cta {
	margin-top: var(--wp--preset--spacing--md);
}

/* Plain title header — shown when the hero is suppressed. Page-scoped
 * twin of .at-shop-plain-header (we keep .at-shop-* classes off non-shop
 * pages). Lives inside main (constrained, wideSize 1600); .alignwide binds
 * to core's `.is-layout-constrained > .alignwide` rule for the 1600 cap. */
.at-page-plain-header {
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--md);
}
.at-page-plain-header h1 {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--wp--preset--color--black);
	hyphens: auto;
	overflow-wrap: break-word;
}
/* Intro + CTA on the plain header — dark-on-white twins of the hero pair
 * (page-hero.php rebuild). Presence-gated: rendered only when set. */
.at-page-plain-header__excerpt {
	margin: var(--wp--preset--spacing--sm) 0 0;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.5;
	color: var(--wp--preset--color--dark-grey);
}
.at-page-plain-header__cta {
	margin-top: var(--wp--preset--spacing--md);
}


/* ==========================================================================
   SHOP
   ========================================================================== */

/* PLP cover hero — shorter than the site default so the product grid
 * gets above-the-fold real estate. Core cover defaults to ~min(100vh,
 * 1000px); we cap it well below that for a Mammut/Rivian-style banner. */
.at-shop-hero.wp-block-cover {
	min-height: clamp(350px, 40vh, 550px);
}

/* Cover's bottom-left content position sizes the inner-container to
 * min-content (whatever the title needs). Force it full-width so the
 * hero-content group's constrained-layout (`contentSize: 1600px`) can
 * cap and center against the cover, matching alignwide elements on the
 * page below — H1 left edge lines up with the controls bar / product
 * grid edge. */
.at-shop-hero .wp-block-cover__inner-container {
	flex: 1 1 100%;
	width: 100%;
}
.at-shop-hero__content {
	width: 100%;
}

/* Long Norwegian compound terms (e.g. "Ekspedisjonsutstyr") overflow the
 * hero on narrow viewports because they have no natural break point.
 * `hyphens: auto` lets the browser's nb-NO dictionary break at morpheme
 * boundaries (HTML root carries `lang="nb-NO"`); `overflow-wrap` is a
 * last-resort fallback if the dictionary has no entry. */
.at-shop-hero h1,
.at-shop-plain-header h1 {
	hyphens: auto;
	overflow-wrap: break-word;
}

.at-shop-sidebar {
	width: var(--wp--custom--sidebar-width);
	flex-shrink: 0;
}

/* Sticky controls bar — stays pinned just below the fixed header on both
 * desktop and mobile. Needs an opaque background so grid content doesn't
 * bleed through. Sits one rung below the header in z-stack so the header
 * (and any mega-menu panel) overlay it.
 *
 * Top tracks the header: header height (56) + admin-bar offset. When the
 * header hides (`at-header--hidden`, scrolling down), we animate TOP to
 * 0 — never transform. `top` on a sticky element only has effect while
 * the element is actually stuck, so the bar in normal flow stays put;
 * a transform moved it unconditionally and shoved it over the category
 * nav above whenever the header hid before the bar was stuck. With top
 * in the transition list the stuck bar still glides up in the same
 * 0.3s/ease as the header's own translateY(-100%). */
/* Full-bleed via align:full on the group (core constrained layout's own
 * escape hatch — a bare negative margin loses to the layout's
 * `margin: auto !important` on constrained children). Inline padding
 * re-aligns the row's content with the 1600px grid cap: root padding
 * when the viewport is narrower than the cap, centering math beyond it. */
.at-shop-controls {
	position: sticky;
	top: calc(var(--at-header-h) + var(--at-admin-bar-offset, 0px));
	z-index: 40;
	background: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--xs);
	/* Padding % resolves against the PARENT's content box (main minus its
	 * root padding), while the alignfull bar is that plus 2x root padding —
	 * so the centering term needs the root padding added back. */
	padding-inline: max(var(--wp--style--root--padding-right, 1.5rem), calc((100% - 1600px) / 2 + var(--wp--style--root--padding-right, 1.5rem)));
	transition: top 0.3s ease, box-shadow 0.2s ease;
}

body:has(.at-header--hidden) .at-shop-controls {
	top: var(--at-admin-bar-offset, 0px);
}

/* Pinned-state separation: bottom hairline, only while the bar is
 * actually stuck (`is-stuck` toggled by the IntersectionObserver sentinel
 * in shop-controls.js — CSS alone can't detect stuck cross-browser).
 * Drawn as a 0-blur box-shadow, not border-bottom, so toggling it never
 * shifts layout by 1px. */
.at-shop-controls.is-stuck {
	box-shadow: 0 1px 0 0 var(--wp--preset--color--light-grey, #e5e5e5);
}

@media (prefers-reduced-motion: reduce) {
	.at-shop-controls { transition: none; }
}

/* The shop layout's flex row hosts the sticky sidebar. Bump its top
 * offset down to clear the sticky `.at-shop-controls` above it. */
.at-shop-layout {
	--at-shop-controls-stack: 72px;
}

/* Right column wraps controls bar + grid + load-more so the layout flex
 * row's height = the full content stack, not just the grid. This is what
 * gives the sticky sidebar a usable scroll range. */
.at-shop-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Product-grid minimum card width. WC hardcodes a 150px floor in the
 * responsive grid (.wc-block-product-template__responsive.columns-4) and
 * exposes no block setting or filter for it (wc#45362 closed not-planned).
 * Same formula, floor raised to 230px: the max() keeps the 4-column cap
 * on wide screens; auto-fill drops to 3/2 columns earlier instead of
 * rendering sub-230px cards when the sidebar squeezes the content area. */
.at-product-grid .wc-block-product-template__responsive.columns-4 {
	grid-template-columns: repeat(auto-fill, minmax(max(230px, calc(25% - 0.9375em)), 1fr));
}

/* Sort-change loading state (class set by shop-controls.js the instant the
 * sorting select changes; the page then does a full navigation). Grid dims
 * and a spinner overlays it so slow TTFB doesn't read as "nothing happened".
 * Spinner sits near the top of the content column — the part of the grid
 * that's actually in the viewport when the controls bar is used. */
.at-shop-page--loading .at-shop-grid {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.at-shop-page--loading .at-shop-content {
	position: relative;
}

.at-shop-page--loading .at-shop-content::after {
	content: "";
	position: absolute;
	top: min(30vh, 220px);
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	border: 3px solid var(--wp--preset--color--light-grey, #e5e5e5);
	border-top-color: var(--wp--preset--color--original-blue, #0071ce);
	border-radius: 50%;
	animation: at-shop-spin 0.7s linear infinite;
}

@keyframes at-shop-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.at-shop-page--loading .at-shop-content::after {
		animation: none;
	}
}

/* Filter toggle button — small ghost button that hides/shows the sidebar
 * on desktop and opens the drawer on mobile. */
.at-shop-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5rem 0.875rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--light-grey, #d0d1d2);
	border-radius: var(--wp--custom--border-radius--button, 4px);
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--body-sm, 0.8125rem);
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--default, 150ms ease-in-out),
		border-color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-shop-filter-toggle:hover,
.at-shop-filter-toggle:focus-visible {
	background: var(--wp--preset--color--lightest-grey, #fafafa);
	border-color: var(--wp--preset--color--dark-grey, #555);
}

.at-shop-filter-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--original-blue, #0071ce);
	outline-offset: 2px;
}

.at-shop-filter-toggle.is-active {
	border-color: var(--wp--preset--color--black, #101012);
}

/* Active-filter chip row — server-rendered by `arctic-trucks/active-filters`,
 * placed inline inside the controls bar `__left` group. The block is
 * `display: contents` so its children flow as flex items in the parent.
 * Hidden on mobile — chips would overflow the sticky controls bar; the
 * count appears in the `.at-shop-filter-toggle` label instead. */
.at-shop-active-filters {
	display: contents;
}

@media (max-width: 767px) {
	.at-shop-active-filters {
		display: none;
	}
}

/* Chips match the `.at-shop-filter-toggle` button — same outlined,
 * squared, transparent-background look so the controls bar reads as
 * one consistent set of outlined controls. */
.at-shop-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5rem 0.875rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--light-grey, #d0d1d2);
	border-radius: var(--wp--custom--border-radius--default, 4px);
	color: inherit;
	font-size: var(--wp--preset--font-size--body-sm, 0.8125rem);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--default, 150ms ease-in-out),
		border-color var(--wp--custom--transition--default, 150ms ease-in-out),
		color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-shop-active-filters__chip:hover,
.at-shop-active-filters__chip:focus-visible {
	background: var(--wp--preset--color--lightest-grey, #fafafa);
	border-color: var(--wp--preset--color--dark-grey, #555);
	color: var(--wp--preset--color--red, #ee0000);
	text-decoration: none;
}

.at-shop-active-filters__chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--original-blue, #0071ce);
	outline-offset: 2px;
}

.at-shop-active-filters__chip-x {
	flex-shrink: 0;
}

.at-shop-active-filters__clear,
.at-shop-active-filters__forget,
.at-shop-active-filters__resume {
	padding: 0.3125rem 0.5rem;
	color: var(--wp--preset--color--original-blue, #0071ce);
	font-size: var(--wp--preset--font-size--body-sm, 0.8125rem);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.at-shop-active-filters__clear:hover,
.at-shop-active-filters__clear:focus-visible,
.at-shop-active-filters__forget:hover,
.at-shop-active-filters__forget:focus-visible,
.at-shop-active-filters__resume:hover,
.at-shop-active-filters__resume:focus-visible {
	color: var(--wp--preset--color--dark-blue, #004e8c);
}

.at-shop-active-filters__forget {
	color: var(--wp--preset--color--dark-grey, #555);
}

/* arctic-trucks/vehicle-panel — sidebar summary card.
 * Auto-renders when a saved vehicle exists. Replaces the dominant
 * paused-state reminder that previously sat in the controls bar. */
.at-vehicle-panel {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.875rem 0;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--light-grey, #d0d1d2);
}

.at-vehicle-panel__top {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.at-vehicle-panel__label {
	font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-grey, #555);
}

.at-vehicle-panel__name {
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 700;
	color: var(--wp--preset--color--black, #101012);
}

/* Toggle switch — visual track + thumb driven by the hidden checkbox. */
.at-vehicle-panel__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
	font-size: var(--wp--preset--font-size--body-sm, 0.8125rem);
}

.at-vehicle-panel__toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.at-vehicle-panel__toggle-track {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 20px;
	background: var(--wp--preset--color--light-grey, #d0d1d2);
	border-radius: 9999px;
	transition: background-color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-vehicle-panel__toggle-track::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--white, #fff);
	border-radius: 9999px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-vehicle-panel__toggle-input:checked + .at-vehicle-panel__toggle-track {
	background: var(--wp--preset--color--original-blue, #0071ce);
}

.at-vehicle-panel__toggle-input:checked + .at-vehicle-panel__toggle-track::before {
	transform: translateX(16px);
}

.at-vehicle-panel__toggle-input:focus-visible + .at-vehicle-panel__toggle-track {
	outline: 2px solid var(--wp--preset--color--original-blue, #0071ce);
	outline-offset: 2px;
}

.at-vehicle-panel__toggle-label {
	color: inherit;
}

.at-vehicle-panel__actions {
	display: inline-flex;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--body-sm, 0.8125rem);
}

.at-vehicle-panel__edit {
	all: unset;
	cursor: pointer;
	color: var(--wp--preset--color--original-blue, #0071ce);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.at-vehicle-panel__edit[aria-pressed="true"] {
	color: var(--wp--preset--color--dark-grey, #555);
}

.at-vehicle-panel__forget {
	color: var(--wp--preset--color--dark-grey, #555);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.at-vehicle-panel__edit:hover,
.at-vehicle-panel__edit:focus-visible,
.at-vehicle-panel__forget:hover,
.at-vehicle-panel__forget:focus-visible {
	color: var(--wp--preset--color--red, #ee0000);
}

/* When `replaceDropdowns` is enabled, hide the sibling hierarchy-filter
 * group while the panel is rendered. The "Endre" button toggles
 * `is-editing` on the panel which un-hides the dropdowns inline. */
.at-shop-sidebar:has(.at-vehicle-panel--replaces-dropdowns):not(:has(.at-vehicle-panel.is-editing)) .ch-hierarchy-filter {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.at-vehicle-panel__toggle-track,
	.at-vehicle-panel__toggle-track::before {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.at-shop-active-filters__chip {
		transition: none;
	}
}

/* First-time saved-vehicle toast — appended to <body> by shop-controls.js
 * the first time a visitor lands on a shop archive with an active saved
 * vehicle. Auto-dismisses, dismissable, never shown again. */
.at-vehicle-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	z-index: 1100;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	max-width: 420px;
	padding: 0.875rem 1rem;
	background: var(--wp--preset--color--black, #101012);
	color: var(--wp--preset--color--white, #fff);
	border-radius: var(--wp--custom--border-radius--default, 4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 200ms ease-out, transform 200ms ease-out;
	font-size: var(--wp--preset--font-size--body-sm, 0.8125rem);
	line-height: 1.5;
}

.at-vehicle-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.at-vehicle-toast__body strong {
	display: block;
	font-weight: 700;
	margin-bottom: 0.125rem;
}

.at-vehicle-toast__body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.at-vehicle-toast__close {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--wp--custom--border-radius--default, 4px);
	color: var(--wp--preset--color--white, #fff);
	flex-shrink: 0;
}

.at-vehicle-toast__close:hover,
.at-vehicle-toast__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.at-vehicle-toast__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--white, #fff);
	outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.at-vehicle-toast {
		transition: none;
	}
}

/* No-results panel — replaces the empty grid state when filters yield 0
 * products. Server-rendered by `arctic-trucks/no-results-hint`. */
.at-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--sm, 1rem);
	max-width: 520px;
	margin: var(--wp--preset--spacing--xl, 4rem) auto;
	padding: var(--wp--preset--spacing--xl, 4rem) var(--wp--preset--spacing--lg, 2rem);
	text-align: center;
	border: 1px solid var(--wp--preset--color--light-grey, #d0d1d2);
	border-radius: var(--wp--custom--border-radius--default, 4px);
	background: var(--wp--preset--color--lightest-grey, #fafafa);
}

.at-no-results__icon {
	color: var(--wp--preset--color--dark-grey, #555);
	opacity: 0.7;
	margin-bottom: 0.25rem;
}

.at-no-results__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3, 1.5rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.at-no-results__copy {
	margin: 0;
	color: var(--wp--preset--color--dark-grey, #555);
	font-size: var(--wp--preset--font-size--body, 1rem);
	line-height: 1.6;
}

.at-no-results__cta {
	margin-top: 0.5rem;
	padding: 0.625rem 1.25rem;
	font-weight: 600;
}

/* The sidebar is included via a `<!-- wp:template-part /-->`, which renders
 * a `.wp-block-template-part` wrapper around it. That wrapper becomes the
 * sticky element's containing block — and because it sizes to the sidebar's
 * own height, sticky has zero room to engage. `display: contents` removes
 * the wrapper from the layout tree so the sidebar's effective parent is
 * `.at-shop-layout` (the flex row), which is as tall as the product grid. */
.at-shop-layout > .wp-block-template-part {
	display: contents;
}

/* Desktop: sticky sidebar so filters stay visible while grid scrolls.
 * Top offset stacks below the also-sticky `.at-shop-controls`. */
@media (min-width: 768px) {
	.at-shop-sidebar {
		position: sticky;
		top: calc(var(--at-header-h) + var(--at-admin-bar-offset, 0px) + var(--at-shop-controls-stack, 72px));
		align-self: flex-start;
		max-height: calc(100vh - var(--at-header-h) - var(--at-admin-bar-offset, 0px) - var(--at-shop-controls-stack, 72px) - 20px);
		overflow-y: auto;
		scrollbar-width: thin;
		/* Smooth hide/show. Width + margin-right collapse so the product
		 * grid expands into the space; opacity + translateX fade the
		 * filters out without a hard pop. margin-right negative cancels
		 * the parent flex `gap: lg` so there's no leftover dead column.
		 * Keep timings tight — this is a utility toggle, not a hero. */
		transition:
			opacity 180ms ease,
			transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
			width 260ms cubic-bezier(0.4, 0, 0.2, 1),
			margin-right 260ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	/* Hidden state — no `display: none`; we keep the element in the
	 * flow so width/opacity can transition. `overflow: hidden` clips the
	 * filter content while width collapses; `pointer-events: none` stops
	 * focusable elements inside from being tabbed to when invisible.
	 * Specificity (0,2,0) beats `body .is-layout-flex { display: flex }`
	 * (0,1,2) which WC's product-filters block ships. */
	.at-shop-sidebar.at-shop-sidebar--hidden {
		width: 0;
		margin-right: calc(var(--wp--preset--spacing--lg) * -1);
		opacity: 0;
		transform: translateX(-12px);
		overflow: hidden;
		pointer-events: none;
	}

	/* Pre-paint persisted state. A head inline script (enqueue.php) puts
	 * `at-shop-filters-closed` on <html> before first paint when the user
	 * closed the sidebar in an earlier visit — without it the sidebar
	 * rendered open and visibly animated shut at DOMContentLoaded.
	 * transition:none so the initial application doesn't animate;
	 * shop-controls.js syncs the element classes on init and removes the
	 * html marker, handing control back to the animated toggle. */
	html.at-shop-filters-closed .at-shop-sidebar {
		width: 0;
		margin-right: calc(var(--wp--preset--spacing--lg) * -1);
		opacity: 0;
		transform: translateX(-12px);
		overflow: hidden;
		pointer-events: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.at-shop-sidebar {
		transition: none;
	}
}

/* Mobile (<= 767px) sidebar/overlay alignment.
 *
 * WC's `woocommerce/product-filters` block flattens its overlay into an
 * inline sidebar at >= 601px, but our shop layout treats 768px as the
 * mobile breakpoint. That left a broken 601–767px range where WC rendered
 * a full sidebar inside a layout otherwise in mobile mode. We:
 *   1. Force WC's overlay back into off-canvas mode up to 767px (override
 *      WC's `@media (min-width: 601px)` flatten rules; same specificity
 *      `.at-shop-sidebar.wc-block-product-filters` beats `:where(...)`).
 *   2. Take the filters wrapper out of flow on mobile with `display: contents`
 *      so the grid spans full width.
 *   3. Hide WC's native "Filter products" trigger; we provide our own via
 *      `.at-shop-filter-toggle` (relabeled by shop-controls.js) which
 *      forwards click to the hidden WC trigger.
 */
@media (min-width: 601px) and (max-width: 767px) {
	.at-shop-sidebar.wc-block-product-filters .wc-block-product-filters__overlay {
		background-color: transparent;
		inset: 0;
		pointer-events: none;
		position: fixed;
		top: var(--top-padding, 0);
		transition: background-color 0.5s;
	}
	.at-shop-sidebar.wc-block-product-filters .wc-block-product-filters__overlay-wrapper {
		background: transparent;
		height: 100%;
		width: 100%;
	}
	.at-shop-sidebar.wc-block-product-filters .wc-block-product-filters__overlay-dialog {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--black);
		display: flex !important;
		flex-direction: column;
		gap: var(--wp--preset--spacing--md);
		inset: 0;
		max-height: 100%;
		position: absolute;
		transform: translateY(100vh);
		transition: none;
	}
	.at-shop-sidebar.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: rgba(95, 95, 95, 0.35);
		pointer-events: auto;
		z-index: 9999;
	}
	.at-shop-sidebar.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transform: translateY(0);
		transition: transform 0.5s;
	}
	.at-shop-sidebar.wc-block-product-filters .wc-block-product-filters__overlay-header,
	.at-shop-sidebar.wc-block-product-filters .wc-block-product-filters__overlay-footer {
		display: flex;
	}
	.at-shop-sidebar.wc-block-product-filters .wc-block-product-filters__overlay-content {
		overflow-y: auto;
		padding: 0 var(--wp--preset--spacing--md);
	}
}

@media (max-width: 767px) {
	/* Wrapper out of flex flow — only the (fixed) overlay remains. */
	.at-shop-sidebar.wc-block-product-filters {
		display: contents;
	}
	/* Suppress WC's built-in trigger; our `.at-shop-filter-toggle` drives
	 * the same `actions.openOverlay` via a forwarded click in shop-controls.js. */
	.at-shop-sidebar.wc-block-product-filters .wc-block-product-filters__open-overlay {
		display: none !important;
	}
}

.ch-pgg__track {
	border-radius: var(--wp--custom--border-radius--default);
}

.ch-pgg__slide {
	background: #f4f4f4;
}

.ch-pgg__image {
	mix-blend-mode: multiply;
}

/* ==========================================================================
   PDP — Product gallery vertical thumbnail strip (desktop)
   ch/product-gallery showThumbnails. Strip is sticky; offset clears the
   fixed .at-header (--at-header-h + breathing room), mirroring .at-pdp-info's
   top:100px. Block ships the layout; theme only tunes the vars + brand
   color for the active thumb.
   ========================================================================== */
.at-pdp-gallery .ch-pg--has-thumbs {
	/* Sticky strip top offset = fixed .at-header clearance. */
	--ch-pg-thumbs-top: calc(var(--at-admin-bar-offset, 0px) + 88px);
	--ch-pg-thumbs-width: 84px;
	--ch-pg-thumbs-gap: var(--wp--preset--spacing--sm);
	--ch-pg-thumb-active: var(--wp--preset--color--original-blue);
}

/* Match the gallery image radius (core uses --md elsewhere) on thumbs. */
.at-pdp-gallery .ch-pg__thumb {
	border-radius: var(--wp--custom--border-radius--default);
}


/* ==========================================================================
   PDP — Sticky add-to-cart bar (mobile)
   Hidden by default. Slides up when inline ATC scrolls out of viewport.
   Active state: body.at-sticky-atc-active toggled by pdp-sticky-atc.js.
   Desktop hides via media query.
   ========================================================================== */

.at-pdp-sticky-atc {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--wp--custom--z--drawer, 60);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--white);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
	transform: translateY(100%);
	transition: transform var(--wp--custom--transition--default, 240ms ease-out);
	pointer-events: none;
}

body.at-sticky-atc-active .at-pdp-sticky-atc {
	transform: translateY(0);
	pointer-events: auto;
}

.at-pdp-sticky-atc__info { min-width: 0; }
.at-pdp-sticky-atc__title { margin: 0; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pdp-sticky-atc__price { margin: 0; }
.at-pdp-sticky-atc__cta .wp-block-button__link { white-space: nowrap; }

@media (min-width: 768px) {
	.at-pdp-sticky-atc { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.at-pdp-sticky-atc { transition: none; }
}


/* ==========================================================================
   PDP — Trust row (under add-to-cart)
   ========================================================================== */

.at-pdp-trust > .wp-block-group {
	color: var(--wp--preset--color--dark-grey);
	flex: 1 1 auto;
}

.at-pdp-trust__icon {
	color: var(--wp--preset--color--original-blue);
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.at-pdp-trust { gap: var(--wp--preset--spacing--xs); }
	.at-pdp-trust > .wp-block-group { flex-basis: calc(50% - var(--wp--preset--spacing--xs)); }
}


/* Reviews section is the scroll target for the product-rating count link
   (WC-native #reviews). Offset for the fixed header. */
.at-pdp-reviews-section {
	scroll-margin-top: 80px;
}

/* Smooth in-page anchor scrolling, opt-out for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}


/* ==========================================================================
   ANIMATIONS — Scroll-triggered reveal (apple.com signature)
   Mirrors apple.com timings + curve, sampled directly:
     - translateY 30px → 0   over ~700ms
     - opacity    0   → 1    over ~900ms (lingers slightly past translate)
     - easing     cubic-bezier(0.4, 0, 0.6, 1)  (Apple's most-used)

   CSS keyframe animations rather than transitions — animations run
   their keyframes regardless of the element's source style, so we
   don't get the classic FOUC issue where toggling two classes in the
   same frame skips the transition.

   JS adds `[data-at-reveal]` to opt elements in (initial state =
   opacity 0, translateY 30px). When the element intersects the
   viewport, JS adds `.is-visible` and the keyframe animation runs.

   Per-element stagger: `data-at-reveal-delay="0.1"` (seconds) — global
   JS mirrors as inline `animation-delay`.

   prefers-reduced-motion: bail at the JS layer (no class added).
   ========================================================================== */

.at-fade-in,
[data-at-reveal] {
	opacity: 0;
	transform: translateY(30px);
	will-change: opacity, transform;
}

.at-fade-in.is-visible,
[data-at-reveal].is-visible {
	animation: at-reveal-translate 700ms var(--wp--custom--transition--reveal, cubic-bezier(0.4, 0, 0.6, 1)) both,
		at-reveal-opacity 900ms var(--wp--custom--transition--reveal, cubic-bezier(0.4, 0, 0.6, 1)) both;
	animation-delay: inherit;
}

@keyframes at-reveal-translate {
	from { transform: translateY(30px); }
	to   { transform: translateY(0); }
}

@keyframes at-reveal-opacity {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Stagger grid children — JS sets animation-delay inline (0.1s steps). */
.at-fade-in--stagger {
	transform: translateY(20px);
}

@media (prefers-reduced-motion: reduce) {
	.at-fade-in,
	.at-fade-in--stagger,
	[data-at-reveal] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}


/* ==========================================================================
   HEADER — HYBRID VARIANT (.at-header--hybrid)
   The active header: a single var(--at-header-h) bar (nav-left + actions-right) with
   the AT logo hanging in a centered blue tab. Transparent over hero,
   solid white when revealed.
   ========================================================================== */

/* Initial state (over dark hero): transparent bar, white nav/icons.
   Revealed state (scrolled past hero): solid white, dark nav/icons,
   subtle bottom border. Hidden state (scroll down): translateY(-100%)
   inherited from base .at-header--hidden. */
.at-header--hybrid {
	background: transparent;
	color: #fff;
	/* Exit transitions carry a small delay so flicking the cursor past
	   the bar doesn't blink the bg. Active states (hover / focus /
	   any-open) override transition-delay to 0 for instant entry. */
	transition: background-color 0.3s ease 0.18s,
	            color 0.3s ease 0.18s,
	            transform 0.3s ease;
}

/* Initial-state backdrop: dark gradient behind the bar so nav links stay
   legible over bright hero areas. Only applied when the header is
   transparent — i.e. on hero pages in the initial state. Revealed /
   hidden / no-hero states get no ::before payload. The gradient fades
   to transparent on its own; no mask or backdrop-filter — the blur
   competed with the cover photography, the plain gradient sits cleaner. */
.at-header--hybrid::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 120px;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

body:not(.at-no-hero):not(.ch-mega-menu-any-open) .at-header--hybrid:not(.at-header--hidden):not(.at-header--revealed):not(:has(:focus-visible))::before {
	opacity: 1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 50%, transparent 100%);
}

/* Inner content sits above the overlay. Logo keeps its absolute
   positioning (set further below) — only z-index is asserted here. */
.at-header--hybrid__inner {
	position: relative;
	z-index: 1;
}

.at-header--hybrid__logo {
	z-index: 2;
}

/* Solid-bar state. Triggers:
   - .at-header--revealed: scrolled past the hero (header-scroll.js).
   - :has(:focus-visible) — VISIBLE focus inside the header: keyboard
     a11y, and the practical hook for the search-icon-click → expanded
     search field (text inputs match :focus-visible on any focus
     method, so the input pulls the bar solid). Deliberately NOT
     :focus-within: a mouse click leaves non-visible focus on the mega
     toggle, which kept the bar white after closing the panel by
     re-clicking the item.
   - body.ch-mega-menu-any-open: a mega-menu panel is open, so the
     header reads as one continuous surface with the plate below.
   NO hover trigger: with openOn=click the bar must stay transparent
   until a panel actually opens; in hover mode the panel opens on
   hover anyway, which sets ch-mega-menu-any-open immediately — so the
   open signal is the single source for both modes.
   The transition list drops background-color + color entirely — they
   SNAP white as soon as a trigger lands, so the bar isn't briefly
   transparent while the transform-slide reveal is still playing.
   Transform still animates 0.3s for the smooth slide-in. Reverse
   (trigger leaves → bar transparent again) re-inherits the base
   rule's bg/color transition for a soft fade-out. */
.at-header--hybrid.at-header--revealed,
.at-header--hybrid:has(:focus-visible),
.at-header--hybrid:has(.dgwt-wcas-layout-icon-open),
body.ch-mega-menu-any-open .at-header--hybrid {
	background: #fff;
	color: var(--wp--preset--color--black);
	transition: transform 0.3s ease;
}

/* Subtle hairline under the bar in its clean white + plain-logo states —
   the sticky revealed/hidden bar and the static (account) header — so a white
   header doesn't blend into white content. Not on the transparent overlay or
   the blue-tab top states (the tab is enough of an anchor there). */
.at-header--hybrid.at-header--revealed,
.at-header--hybrid.at-header--hidden,
body.at-header--static .at-header--hybrid,
body.at-header--flat .at-header--hybrid {
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
}

/* No-hero pages: hybrid stays solid white from the start, dark text.
   Unlike the pill variant we do NOT drop to position:static — the
   centered logo tab is absolute-positioned relative to the header, so
   the header must remain a positioned ancestor for the logo to anchor
   correctly (otherwise it falls back to the viewport and ends up
   behind the admin bar). */
body.at-no-hero .at-header--hybrid:not(.at-header--hidden):not(.at-header--revealed) {
	position: fixed;
	background: #fff;
	color: var(--wp--preset--color--black);
}

/* Clear the fixed solid header on no-hero pages (PDP, PLP-without-hero,
   search, 404, cart, checkout). --at-header-h matches .at-header--hybrid__inner
   height. Hero pages keep the header transparent over the cover so they
   need no clearance. Padding on .wp-site-blocks avoids fighting inline
   `padding-top:0` on the inner <main>. */
body.at-no-hero .wp-site-blocks {
	padding-top: var(--at-header-h);
}

/* Inner row — height only; alignwide on the block handles max-width
   and centering via core constrained-layout rules. */
.at-header--hybrid__inner {
	height: var(--at-header-h);
}

/* Left nav — text follows header color (white over hero, dark when
   revealed / no-hero). Each nav item stretches to the full header
   height with generous horizontal padding so the hover target matches
   the visual bar, not just the text glyphs. This kills the "flicker on
   text edge" failure mode and gives the cursor real buffer space —
   matching the pattern used by Apple, Stripe, Tesla, Linear. */
.at-header--hybrid__nav {
	color: inherit;
	align-self: stretch;
	display: flex;
	align-items: stretch;
}

/* WP navigation block wraps the menu in several nested divs for its
   responsive overlay machinery (__responsive-container,
   __responsive-dialog, __responsive-close, __responsive-container-content).
   We need ALL of them to stretch to the header height so the
   final <ul> + <li> + button hover targets fill the bar. Without this
   the chain collapses to the text glyph height and the hover area
   becomes 20px tall — flickers on the edges of the text.

   DESKTOP ONLY. On mobile WP's responsive overlay flips these wrappers
   to `display: none` when closed and `display: block` (full-screen
   dialog) when open. Forcing them to flex+height:100% on mobile would
   break that pattern. The mobile menu uses the hamburger + overlay
   that's handled by mobile-menu.js. */
@media (min-width: 768px) {
	.at-header--hybrid__nav,
	.at-header--hybrid__nav .wp-block-navigation__responsive-container,
	.at-header--hybrid__nav .wp-block-navigation__responsive-dialog,
	.at-header--hybrid__nav .wp-block-navigation__responsive-close,
	.at-header--hybrid__nav .wp-block-navigation__responsive-container-content {
		display: flex;
		align-items: stretch;
		height: 100%;
	}

	.at-header--hybrid__nav .wp-block-navigation__container {
		display: flex;
		align-items: stretch;
		gap: 0;
		height: 100%;
	}
}

/* Bar-item rules are scoped to DIRECT children of the top-level list —
   inline mega panels put navigation-item markup INSIDE the nav (moved
   into drill panes on mobile), so descendant selectors here would leak
   bar typography (uppercase/700/flex) onto panel content. */
ul.at-header--hybrid__nav > .wp-block-navigation-item,
ul.at-header--hybrid__nav > .ch-mega-menu-item {
	display: flex;
	align-items: stretch;
}

ul.at-header--hybrid__nav > .wp-block-navigation-item > .ch-mega-menu__toggle,
ul.at-header--hybrid__nav > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 0 14px;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: transparent;
	border: 0;
	transition: color 0.3s ease, opacity 0.2s ease;
}

/* First nav item flushes left to align with the page's content edge —
   no leading padding so the bar's left margin matches the rest of
   the page's gutters. */
ul.at-header--hybrid__nav > .wp-block-navigation-item:first-child > .ch-mega-menu__toggle,
ul.at-header--hybrid__nav > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
	padding-left: 0;
}

/* Bridge: an invisible 8px strip below the trigger that captures
   pointer events. Prevents the cursor from falling into a 0–1px
   sub-pixel gap when moving from trigger to panel (rounding errors on
   high-DPI / browser-zoom). Tesla.com uses an identical bridge. */
.at-header--hybrid__nav .ch-mega-menu-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 8px;
	pointer-events: auto;
}

.at-header--hybrid__nav .ch-mega-menu-item {
	position: relative;
}

/* --- Mega-menu inline-links panels (Explore / Kundeservice) ---
 * ch/mega-menu items WITHOUT a template part render their child
 * navigation links as a panel (ch-blocks 4.75.0): the plate machinery
 * owns positioning, open/close, signals, mobile drill-down AND the
 * group state (`.chmm-group` / `.is-active`, hover-intent + menu-aim +
 * keyboard in the block's view.js) — this is pure skinning. The panel
 * lives in the body-level plate, OUTSIDE .wp-block-navigation, so no
 * core dropdown CSS applies in here — clean slate.
 *
 * Two layouts, chosen via the item's "Links layout" inspector control:
 *   - columns (default)  — every group expanded (heading + list);
 *                          loose links fall to full-width rows below.
 *   - hoverReveal        — `--reveal` marker: group titles in a left
 *                          column; the ACTIVE group's list shows beside
 *                          them. Active state is block-owned — this CSS
 *                          never uses :hover for the reveal. */
.ch-mega-menu__plate .ch-mega-menu__panel--links {
	--at-plate-inset: max(
		var(--wp--style--root--padding-left, 1.5rem),
		calc((100% - var(--wp--style--global--wide-size, 1600px)) / 2)
	);
	--at-plate-col: 220px; /* group-title column — mirrors the mega tabs column */
	position: relative;
}

.ch-mega-menu__plate .ch-mega-menu__links {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--sm)
		var(--at-plate-inset)
		var(--wp--preset--spacing--lg);
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	column-gap: var(--wp--preset--spacing--xl, 48px);
	font-size: var(--wp--preset--font-size--body, 0.875rem);
}

/* Nested group lists: plain in-flow lists (explicit display — core
   ships unscoped flex on nav list classes). */
.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation__submenu-container {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Core renders a caret toggle button per group — the plate presentation
   has no use for it (hover/focus opens; columns mode is always open). */
.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation__submenu-icon {
	display: none;
}

/* Rows: contiguous padding rhythm (seamless hover travel). Hover uses
   the SAME language as the tab titles: color settles on black and a
   2px original-blue underline slides in under the LABEL span (text
   width, not row width) — no blue text. */
.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__content {
	display: block;
	padding: 0.625rem 0;
	color: var(--wp--preset--color--black);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	transition: color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__content:hover,
.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--black);
}

.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__label {
	position: relative;
	padding-bottom: 4px;
}

.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--original-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__content:hover > .wp-block-navigation-item__label::after,
.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__content:focus-visible > .wp-block-navigation-item__label::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ch-mega-menu__plate .ch-mega-menu__links .wp-block-navigation-item__label::after {
		transition: none;
	}
}

/* ----- Mode: expanded columns (default) ----- */

.ch-mega-menu__plate .ch-mega-menu__panel--links:not(.ch-mega-menu__panel--reveal) .ch-mega-menu__links > .wp-block-navigation-item {
	display: block;
	flex: 1 1 100%;
}

.ch-mega-menu__plate .ch-mega-menu__panel--links:not(.ch-mega-menu__panel--reveal) .ch-mega-menu__links > .has-child {
	flex: 0 0 auto;
	min-width: var(--at-plate-col);
}

.ch-mega-menu__plate .ch-mega-menu__panel--links:not(.ch-mega-menu__panel--reveal) .ch-mega-menu__links > .has-child > .wp-block-navigation-item__content {
	padding: 0.625rem 0 0.75rem;
	color: var(--wp--preset--color--dark-grey);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Columns-mode section headings are not interactive — no hover underline. */
.ch-mega-menu__plate .ch-mega-menu__panel--links:not(.ch-mega-menu__panel--reveal) .ch-mega-menu__links > .has-child > .wp-block-navigation-item__content > .wp-block-navigation-item__label::after {
	content: none;
}

/* ----- Mode: hover-reveal (.ch-mega-menu__panel--reveal on the mega item) ----- */

.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links {
	display: block;
}

.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc( var(--at-plate-inset) + var(--at-plate-col) + var(--wp--preset--spacing--md, 24px) );
	width: 1px;
	background: var(--wp--preset--color--light-grey);
}

.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links > .wp-block-navigation-item {
	display: block;
	width: var(--at-plate-col);
	/* The reveal list is absolute against the PANEL (full plate width) —
	   a positioned li would become the containing block and clamp it to 0. */
	position: static;
}

/* Group titles style like the vertical tab titles: dark-grey → black,
   chevron right (same glyph as the tabs / drilldown). */
.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links > .has-child > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--wp--preset--color--dark-grey);
}

.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links > .has-child > .wp-block-navigation-item__content:hover,
.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links > .has-child > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--black);
}

.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links > .has-child > .wp-block-navigation-item__content::after {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* Active group (block-owned state — no :hover here): black title +
   pinned underline on the label span, exactly like the active vertical
   tab title. */
.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links > .chmm-group.is-active > .chmm-group__title {
	color: var(--wp--preset--color--black);
}

.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links > .chmm-group.is-active > .chmm-group__title > .wp-block-navigation-item__label::after {
	transform: scaleX(1);
}

/* The active group's list shows in the content area right of the
   divider. Offsets resolve against the panel box (full plate width),
   so the inset var is part of the left offset. Scrolls if taller than
   the title column. Visibility itself is block-owned
   (.chmm-group.is-active in ch-blocks style.css) — this rule only
   positions the box. */
.ch-mega-menu__plate .ch-mega-menu__panel--links.ch-mega-menu__panel--reveal .ch-mega-menu__links .chmm-group__list {
	position: absolute;
	top: var(--wp--preset--spacing--sm);
	bottom: var(--wp--preset--spacing--lg);
	left: calc( var(--at-plate-inset) + var(--at-plate-col) + 2 * var(--wp--preset--spacing--md, 24px) + 1px );
	right: var(--at-plate-inset);
	overflow-y: auto;
}

/* ----- Mobile: inside a drill-down pane. Structure is block-owned
   (ch-blocks 4.75.0): group titles render as drill ROWS (chevron,
   --ch-drilldown-* tokens shared with ch/tabs) and tapping pushes the
   group's list one level deeper — same physics as the Produkter tabs.
   The theme skins rows only. Resets kill core's overlay submenu
   styling and the theme's own plain-submenu indent. The
   responsive-container-content ancestor is pure specificity ballast:
   core's overlay submenu rules weigh (0,5,0)
   (`.is-menu-open:where(...) ... .has-child .wp-block-navigation__submenu-container`),
   so these must match that to win the cascade. ----- */
.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .ch-mega-menu__links,
.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .ch-mega-menu__links .wp-block-navigation__submenu-container,
.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .chmm-group__list {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: none;
}

/* …but group lists still inside their row (not yet pushed) stay hidden
   (block rule ships display:none at lower specificity — repeat it above
   the ballast so the reset doesn't resurrect them). */
.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .ch-mega-menu__panel--links .chmm-group > .chmm-group__list {
	display: none;
}

.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .ch-mega-menu__links .wp-block-navigation-item,
.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .chmm-group__list .wp-block-navigation-item {
	display: block;
	border-bottom: none;
}

/* First-pane rows — loose links and group drill-rows share one recipe
   (the Produkter pane's top-level rows): 1rem/600, drill tokens for
   padding + hairline. Group rows get chevron + flex from the block. */
.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .ch-mega-menu__links > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	height: auto;
	padding: var(--ch-drilldown-item-padding, 14px 0);
	border-bottom: var(--ch-drilldown-item-border, 1px solid rgba(0, 0, 0, 0.06));
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--black);
}

.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .ch-mega-menu__links > .chmm-group > .chmm-group__title {
	display: flex;
}

/* Leaf rows in a PUSHED group pane — compact category-list style, same
   as the Produkter deep pane (.at-shop-menu-categories__link). */
.at-header .wp-block-navigation__responsive-container-content .ch-drilldown__pane .chmm-group__list .wp-block-navigation-item__content {
	display: block;
	height: auto;
	padding: 8px 0;
	border-bottom: none;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--black);
}

/* --- Header bar items --- */
@media (min-width: 768px) {
	/* Top-level items span the full-height bar → seamless hover target the
	   whole bar height (Gymshark). NOTE: core copies the nav className
	   onto the top-level <ul>. */
	ul.at-header--hybrid__nav > .wp-block-navigation-item {
		height: var(--at-header-h);
		display: flex;
		align-items: center;
	}

	/* No caret glyphs in the bar — Gymshark-clean. */
	.at-header--hybrid__nav .wp-block-navigation__submenu-icon {
		display: none;
	}
}

/* Apple-style: triggers stay plain text, no pill, no padded-box look.
   Plain hover is a no-op — the panel opening IS the feedback signal.
   When any mega-menu panel is open (body.ch-mega-menu-any-open is
   toggled by view.js), sibling triggers dim to ~50% opacity so the
   active one reads as primary. */
body.ch-mega-menu-any-open ul.at-header--hybrid__nav > .wp-block-navigation-item > .ch-mega-menu__toggle,
body.ch-mega-menu-any-open ul.at-header--hybrid__nav > .wp-block-navigation-item > .wp-block-navigation-item__content {
	opacity: 0.5;
}

body.ch-mega-menu-any-open ul.at-header--hybrid__nav > .ch-mega-menu-item.is-open > .ch-mega-menu__toggle {
	opacity: 1;
}

/* Chevron open-rotation is block-owned: ch/mega-menu style.css rotates the
   svg 180° on .is-open. Do NOT add a theme rotation on the icon span — it
   stacks with the block's (180+180 = arrow ends pointing down when open). */

/* Centered logo — absolute blue square hanging down from the bar top,
   matching the original pill header brand tab. */
.at-header--hybrid__logo {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--original-blue);
	padding: 24px 16px;
	z-index: 2;
	transition: opacity 0.25s ease, padding 0.3s ease;
}

/* Logo stays as the blue tab with the white logo in ALL states by
   default (no swap-to-blue-on-transparent). Centered transform +
   transition come from the base `.at-header--hybrid__logo` rule
   above; the mega-state behavior is opt-in per option below. */

/* ============================================================
   Logo behavior alternatives — switchable via <html data-logo-mode>.
   Default = "a". Set ?logo=a|b|c in URL or override
   `data-logo-mode` to compare. assets/js/logo-mode.js reads the URL
   param and persists to localStorage.
   ------------------------------------------------------------
   A — Mega state: slide logo up out of viewport. Bar = utility.
   B — Mega state: logo stays via z-index above plate. Anchored.
   C — Reserved (currently a no-op; behaves like A).
   ============================================================ */

.at-header--hybrid__logo {
	z-index: 3;
	/* Drives both the mega slide-up (transform) and the reveal "tuck" — the
	   tab slides up into the row (top + transform), the blue plate shrinks
	   (padding) and fades (background) as the bar re-pins on scroll-up. */
	transition: top 0.3s cubic-bezier(0.32, 0.72, 0, 1),
	            transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
	            padding 0.3s cubic-bezier(0.32, 0.72, 0, 1),
	            background-color 0.2s ease,
	            opacity 0.2s ease;
}

/* --- Option A — slide up (default) ---
   Keyed ONLY on ch-mega-menu-any-open (panel actually open) — no
   :hover/:focus-within pre-triggers, same single-source rationale as
   the solid-bar state above.
   :not(.at-logo--plain): the slide-away exists because the hanging tab
   collides with the plate below the bar. The plain in-row mark has no
   overhang — it stays put and just flips white→blue with the bar (see
   LOGO VARIANTS below). */
html:not([data-logo-mode]) body.ch-mega-menu-any-open:not(.at-logo--plain) .at-header--hybrid .at-header--hybrid__logo,
html[data-logo-mode="a"] body.ch-mega-menu-any-open:not(.at-logo--plain) .at-header--hybrid .at-header--hybrid__logo {
	transform: translate(-50%, -130%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
	            opacity 0.2s ease 0.1s;
}

/* --- Option B — stay above plate via z-index ---
   The header creates its own stacking context (z-index: 50), which
   traps any child z-index. Bump the header above the plate's z so
   the logo, being a descendant, paints above the plate. */
html[data-logo-mode="b"] .at-header--hybrid {
	z-index: 1001;
}
html[data-logo-mode="b"] .at-header--hybrid__logo {
	z-index: 3;
}

/* FiboSearch åpen: det utfellbare søkefeltet legger seg under baren og
   ville kollidert med logo-taben — skyv logoen opp og ut, samme bevegelse
   som ved åpen mega-meny. Gjelder alle logo-modes (også B — feltet er
   ikke en plate logoen kan ligge over). */
body:not(.at-logo--plain) .at-header--hybrid:has(.dgwt-wcas-layout-icon-open) .at-header--hybrid__logo {
	transform: translate(-50%, -130%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
	            opacity 0.2s ease 0.1s;
}

/* Option C is intentionally a no-op for now (revealed-state clipping
   was removed; logo stays at full size in the blue wrapper). The
   mega slide-up below also covers mode "c" so it behaves like A
   under that scenario. */
html[data-logo-mode="c"] body.ch-mega-menu-any-open:not(.at-logo--plain) .at-header--hybrid .at-header--hybrid__logo {
	transform: translate(-50%, -130%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
	            opacity 0.2s ease 0.1s;
}

/* The logo tab extends ~20px below the bar (absolute, top:0,
   padding + 32px img = 76px). When the header hides via translateY,
   that overhang stays in the viewport. Fade the logo with the bar so
   the whole element disappears cleanly.

   Hide the entire logo when the bar is hidden so the overhang
   doesn't peek out below the viewport. */
.at-header--hidden .at-header--hybrid__logo {
	opacity: 0;
	pointer-events: none;
}

.at-header--hybrid__logo .wp-block-site-logo,
.at-header--hybrid__logo a {
	display: flex;
	align-items: center;
	margin: 0;
	text-decoration: none;
}

.at-header--hybrid__logo img {
	height: 32px;
	width: auto;
	display: block;
	/* Tint canonical brand SVG to white over the blue tab. */
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
}

@media (min-width: 768px) {
	.at-header--hybrid__logo img {
		height: 44px;
	}
}

/* ──────────────────────────────────────────────────────────────────────
   REVEAL "tuck" — the blue tab is for the top of the page only. When the
   bar re-pins on scroll-up (.at-header--revealed) the logo tucks up into the
   row as the plain blue brand mark — same look as static mode. The slide +
   fade is animated by the .at-header--hybrid__logo transition above.
   ────────────────────────────────────────────────────────────────────── */
/* `--hidden` gets the plain logo too, so the tuck completes while the bar is
   off-screen — when it re-pins (--revealed) the logo is already plain and no
   morph plays on the way in. The tab↔plain morph happens only at the top
   boundary (initial ↔ hidden), where the bar is sliding away anyway. */
.at-header--hybrid.at-header--revealed .at-header--hybrid__logo,
.at-header--hybrid.at-header--hidden .at-header--hybrid__logo {
	top: 50%;
	transform: translate( -50%, -50% );
	background: none;
	padding: 0;
}
.at-header--hybrid.at-header--revealed .at-header--hybrid__logo img,
.at-header--hybrid.at-header--hidden .at-header--hybrid__logo img {
	filter: var(--at-logo-brand-filter);
}

/* ──────────────────────────────────────────────────────────────────────
   STATIC mode (body.at-header--static — e.g. My Account).
   The bar sits in normal document flow at the top (not fixed/absolute),
   solid white, and the logo is the plain blue brand mark inside the row —
   no hanging blue tab. Overlay + Solid modes keep the tab (rules above).
   ────────────────────────────────────────────────────────────────────── */

/* In-flow, solid white. Specificity matches the no-hero fixed rule
   (body.at-no-hero .at-header--hybrid:not()...:not()) — static pages carry
   both classes, so adding .at-header--static wins outright. */
/* `relative`, not `static`: keeps the bar in normal flow (not fixed/sticky)
   while staying a positioning context so the absolute centered logo anchors
   to the header instead of escaping to the page. */
body.at-no-hero.at-header--static .at-header--hybrid:not( .at-header--hidden ):not( .at-header--revealed ) {
	position: relative;
	/* In flow — clear the admin-bar `top` offset meant for the fixed header
	   (it would otherwise push the in-flow bar 32px down). */
	top: 0;
	transform: none;
	background: #fff;
	color: var(--wp--preset--color--black);
}
/* In-flow header takes its own space — drop the fixed-bar clearance. */
body.at-header--static .wp-site-blocks {
	padding-top: 0;
}
/* Plain logo inside the header row: no tab, no overhang, brand blue. Shared
   with FLAT mode, which is identical in look but stays fixed/sticky (it keeps
   the no-hero fixed-white positioning; only static drops to `position:
   relative`). */
body.at-header--static .at-header--hybrid__logo,
body.at-header--flat .at-header--hybrid__logo {
	top: 50%;
	transform: translate( -50%, -50% );
	background: none;
	padding: 0;
}
body.at-header--static .at-header--hybrid__logo img,
body.at-header--flat .at-header--hybrid__logo img {
	filter: var(--at-logo-brand-filter);
}

/* ──────────────────────────────────────────────────────────────────────
   LOGO VARIANTS — dev preview via ?at-logo=tab|plain / ?at-logo-pos=
   center|left (logged-in, cookie-persisted; header-context.php emits the
   body classes). Defaults (no class) = hanging blue tab, centered.

   body.at-logo--plain — no hanging tab: the mark sits inside the row.
   Color follows the bar: white over the transparent overlay bar (default
   img invert filter), blue as soon as the bar is white (revealed /
   no-hero / open mega / focus / search). flat + static already render a
   plain logo via their own rules — this class is a no-op there.

   body.at-logo--left — logo left-aligned to the alignwide (1600) edge,
   nav pushed right of it. Desktop only; mobile keeps the centered logo.
   ────────────────────────────────────────────────────────────────────── */

/* Plain: into the row, no plate — same look as the flat/static logo. */
body.at-logo--plain .at-header--hybrid__logo {
	top: 50%;
	transform: translate( -50%, -50% );
	background: none;
	padding: 0;
}

/* Blue mark in every white-bar state — mirrors the solid-bar triggers
   (custom.css "Solid-bar state" rule + the no-hero fixed-white rule). */
body.at-logo--plain.at-no-hero .at-header--hybrid__logo img,
body.at-logo--plain.ch-mega-menu-any-open .at-header--hybrid__logo img,
body.at-logo--plain .at-header--hybrid.at-header--revealed .at-header--hybrid__logo img,
body.at-logo--plain .at-header--hybrid.at-header--hidden .at-header--hybrid__logo img,
body.at-logo--plain .at-header--hybrid:has(:focus-visible) .at-header--hybrid__logo img,
body.at-logo--plain .at-header--hybrid:has(.dgwt-wcas-layout-icon-open) .at-header--hybrid__logo img {
	filter: var(--at-logo-brand-filter);
}

@media (min-width: 768px) {
	/* Left: absolute against the alignwide left edge — same offset math
	   as the inner row's constrained-layout centering (rootpad floor,
	   centered 1600 cap above it). Tab style keeps hanging from the bar
	   top, just at the left. */
	body.at-logo--left .at-header--hybrid__logo {
		/* Same edge math as the header's has-global-padding + centered
		   1600 cap — the logo's containing block is the header's full-width
		   padding box, so rootpad is the floor and the centered-1600 offset
		   takes over on wide viewports. */
		left: max(var(--wp--style--root--padding-left, 1.5rem), calc((100% - 1600px) / 2));
		transform: none;
	}

	/* In-row variants (plain / flat / static) + the revealed/hidden tuck:
	   vertically centered without the horizontal re-centering translate. */
	body.at-logo--left:is(.at-logo--plain, .at-header--flat, .at-header--static) .at-header--hybrid__logo,
	body.at-logo--left .at-header--hybrid:is(.at-header--revealed, .at-header--hidden) .at-header--hybrid__logo {
		top: 50%;
		transform: translateY( -50% );
	}

	/* Nav clears the logo (brand SVG is ~2:1 → ~85px at 44px height,
	   plus breathing room). `nav.` qualifier: the navigation block copies
	   its className onto the inner <ul> too — unqualified, the padding
	   would apply twice. */
	body.at-logo--left nav.at-header--hybrid__nav {
		padding-left: 130px;
	}

	/* Mega-open / FiboSearch slide-up without the -50% X re-centering.
	   The html prefixes out-gun the base option-A selector's specificity.
	   Tab style only — the plain in-row mark never slides (see the
	   :not(.at-logo--plain) exclusions on the base slide rules). */
	html:not([data-logo-mode]) body.at-logo--left.ch-mega-menu-any-open:not(.at-logo--plain) .at-header--hybrid .at-header--hybrid__logo,
	html[data-logo-mode] body.at-logo--left.ch-mega-menu-any-open:not(.at-logo--plain) .at-header--hybrid .at-header--hybrid__logo,
	body.at-logo--left:not(.at-logo--plain) .at-header--hybrid:has(.dgwt-wcas-layout-icon-open) .at-header--hybrid__logo {
		transform: translateY( -130% );
	}
}

/* Right actions — flat icon row. All three icons (search, account,
   mini-cart) follow header color via `currentColor` and share a 24px
   hit-area for visual balance. */
.at-header--hybrid__actions {
	gap: 10px;
	background: transparent;
	border: none;
	padding: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	align-items: center;
}

/* Wrappers (form, divs) take icon color from header */
.at-header--hybrid__actions .wp-block-search,
.at-header--hybrid__actions .wp-block-woocommerce-customer-account,
.at-header--hybrid__actions .wc-block-mini-cart {
	color: inherit;
	display: flex;
	align-items: center;
	margin: 0;
}

/* WC's product-filter-taxonomy wraps its checkbox-list in a
   `<fieldset>` which carries the browser-default 2px groove border +
   padding + margin. Strip them so the brand filter visually matches
   the sibling filter groups (cars / kategorier). */
.at-shop-sidebar .wp-block-woocommerce-product-filter-taxonomy fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}

/* Categories filter — only meaningful on archives where the current
   surface ISN'T already a product-category. On the shop landing and on
   `tax-product_cat` term archives, the H1 + breadcrumb already establish
   category context; a sidebar list of every category there would just
   be noise. Brand archives (`tax-product_brand`) and others get to keep
   it as a cross-cutting filter. */
body.woocommerce-shop .at-sidebar-categories,
body.tax-product_cat .at-sidebar-categories {
	display: none;
}

/* Same idea for the brand filter — hide it when the current archive
   IS already a single brand. The H1 + breadcrumb name the brand;
   listing every brand again as a sidebar filter is just noise. */
body.tax-product_brand .at-sidebar-brands {
	display: none;
}

/* When the WC taxonomy filter has no items for the current archive,
   `ProductFilterTaxonomy::render()` tags the wrapper with the
   `hidden` HTML attribute + a `wc-block-product-filter--hidden`
   class — WC's own signal for "I have nothing to show". Since the
   taxonomy filter doesn't expose a `heading` attribute we wrap it
   in our own `<wp:group><h2>` for visual parity with WC's other
   filters; this rule honours WC's empty-state signal and hides our
   wrapper (heading included) when WC has hidden the inner block. */
.at-sidebar-categories:has(.wp-block-woocommerce-product-filter-taxonomy[hidden]),
.at-sidebar-brands:has(.wp-block-woocommerce-product-filter-taxonomy[hidden]) {
	display: none;
}

/* My-account is a desktop-only icon in the actions cluster; on mobile
   it lives as a "Min konto" link inside the navigation overlay (see
   `.at-mobile-only` rule below). Placed AFTER the display:flex rule
   above so it wins on source order. */
@media (max-width: 767px) {
	.at-header--hybrid__actions .wp-block-woocommerce-customer-account {
		display: none;
	}
}

/* `.at-mobile-only` nav-links render inside the navigation overlay
   only — hidden in the inline desktop nav. */
@media (min-width: 768px) {
	.at-header .wp-block-navigation .at-mobile-only {
		display: none;
	}
}

/* Buttons: strip WC/core defaults so every icon reads as a flat
   currentColor glyph with a uniform 40×40 hit area. */
.at-header--hybrid__actions .wp-block-search__button,
.at-header--hybrid__actions .wp-block-woocommerce-customer-account a,
.at-header--hybrid__actions .wp-block-woocommerce-customer-account button,
.at-header--hybrid__actions .wc-block-mini-cart__button {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	min-width: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit !important;
	box-shadow: none;
	transition: opacity 0.2s ease, color 0.3s ease;
}

.at-header--hybrid__actions .wp-block-search__button:hover,
.at-header--hybrid__actions .wp-block-woocommerce-customer-account a:hover,
.at-header--hybrid__actions .wp-block-woocommerce-customer-account button:hover,
.at-header--hybrid__actions .wc-block-mini-cart__button:hover {
	opacity: 0.7;
	background: transparent !important;
}

/* All icons: same 22×22 visual weight, inherit fill from button color.
   `!important` needed against WC's inline `fill="currentColor"` shadow. */
.at-header--hybrid__actions svg {
	width: 22px;
	height: 22px;
	fill: currentColor !important;
	color: inherit;
}

/* Mini-cart count badge: brand red bubble, white text — readable in both
   initial (over hero) and revealed states. */
.at-header--hybrid__actions .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--red) !important;
	color: #fff !important;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
}

/* FiboSearch i header — når FiboSearch-pluginen er aktiv erstatter
   filters.php headerens core/search med pluginens icon-layout
   (`[fibosearch layout="icon"]`, wrapper-klasse `.at-header-fibosearch`).
   Skinnes til å matche de andre action-ikonene: currentColor-glyf som
   følger header-tilstanden (hvit over hero, mørk på hvit bar), 40px
   hit-area. Selve søkefeltet/resultatene eier FiboSearch selv. */
.at-header--hybrid__actions .at-header-fibosearch {
	color: inherit; /* pluginen setter #444 på wrapperen */
	min-width: 0;
	margin: 0;
}

/* Pluginen låser wrapperen til max-width 20px i icon-layout — slipp den
   fri så 40px-hit-arealet får plass (samme spesifisitet + senere i
   kaskaden er ikke garantert på tvers av enqueue-rekkefølge, så prefikset
   speiler pluginens egen selektor). */
html:not(.dgwt-wcas-overlay-mobile-on) .at-header--hybrid__actions .at-header-fibosearch.dgwt-wcas-layout-icon {
	max-width: none;
}

.at-header--hybrid__actions .at-header-fibosearch .dgwt-wcas-search-icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	transition: opacity 0.2s ease, color 0.3s ease;
}

.at-header--hybrid__actions .at-header-fibosearch .dgwt-wcas-search-icon:hover {
	opacity: 0.7;
}

/* FiboSearch skriver ikonfargen fra egne innstillinger som inline-CSS
   på path-nivå (`.dgwt-wcas-search-icon path { fill: … }`) — den slår
   arvet currentColor. Overstyr på path så ikonet følger headerens
   tilstand som de andre action-ikonene. */
.at-header--hybrid__actions .at-header-fibosearch .dgwt-wcas-search-icon path {
	fill: currentColor;
}

.at-header--hybrid__actions .at-header-fibosearch .dgwt-wcas-ico-magnifier-handler {
	margin-bottom: 0;
}

/* Ikonet sitter ytterst til høyre i baren — det utfellbare feltet må
   høyrestilles (pluginens default `left: 0` ville rent ut av viewporten)
   og aldri bli bredere enn viewporten minus root-paddingen. */
html:not(.dgwt-wcas-overlay-mobile-on) .at-header--hybrid__actions .at-header-fibosearch.dgwt-wcas-layout-icon .dgwt-wcas-search-form {
	left: auto;
	right: 0;
	min-width: min(500px, calc(100vw - 3rem));
}

.at-header--hybrid__actions .at-header-fibosearch .dgwt-wcas-search-icon-arrow {
	left: auto;
	right: 12px;
}

/* Smal viewport uten FiboSearch-overlay (overlay er en plugin-innstilling):
   absolutt posisjonering i wrapperen renner ut av viewporten — fest feltet
   til viewporten under headerbaren i stedet, kant til kant med root-padding.
   `!important` fordi pluginens view-JS skriver inline `left` ved åpning. */
@media (max-width: 767px) {
	html:not(.dgwt-wcas-overlay-mobile-on) .at-header--hybrid__actions .at-header-fibosearch.dgwt-wcas-layout-icon .dgwt-wcas-search-form {
		position: fixed;
		left: 1.5rem !important;
		right: 1.5rem !important;
		top: 64px;
		min-width: 0;
		width: auto;
	}
}

.at-header--hybrid + .ch-mega-menu__panel,
.at-header--hybrid .ch-mega-menu__panel {
	top: var(--at-header-h);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 767px) {
	.at-header--hybrid__nav {
		display: none;
	}
}


/* ==========================================================================
   WC account / cart / checkout — strip 1000px hard cap

   WC injects a rule pinning post-title and the .woocommerce wrapper to
   max-width:1000px on these pages, which fights our constrained layout
   (theme.json contentSize 1200 / wideSize 1600). Same selectors at the
   same specificity loaded after WC win on cascade order.
   ========================================================================== */

.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
	max-width: var(--wp--style--global--content-size);
}

/* WC ships a 1px border on the sale badge that fights our solid-red
   pill. Strip it; the red background already carries the emphasis. */
.wc-block-components-product-sale-badge {
	border: none;
}

/* ==========================================================================
   WC MY ACCOUNT
   --------------------------------------------------------------------------
   Classic `[woocommerce_my_account]` shortcode, restyled into a Stripe/Linear
   two-column surface: quiet left sidebar (icon + label, active pill) + a
   content column. Menu structure in includes/account.php, sidebar markup in
   woocommerce/myaccount/navigation.php.
   ========================================================================== */

/* The page title ("Min konto") comes from page.html's plain-header swap.
   The account area is an app-like surface, not a marketing hero — so the
   title is scaled down (h-3) and pulled in to content-width to line up with
   the two-column content below, rather than the wide hero default. Kept on
   desktop; hidden on mobile where the sidebar collapses to chips. */
.woocommerce-account .at-page-plain-header {
	max-width: var(--wp--style--global--content-size);
}
.woocommerce-account .at-page-plain-header h1 {
	font-size: var(--wp--preset--font-size--h-3);
}
@media (max-width: 767px) {
	.woocommerce-account .at-page-plain-header {
		display: none;
	}
}

/* Two-column flex wrapper. `:has()` targets only the shortcode wrapper that
   actually holds the account sidebar, never other `.woocommerce` wrappers. */
.woocommerce-account .woocommerce:has(> .at-account-sidebar) {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--lg);
}
/* WC/theme clearfix adds ::before + ::after to `.woocommerce`. As a flex
   container those pseudo-elements become flex items that eat row width and
   squeeze the content column — kill them in this context. */
.woocommerce-account .woocommerce:has(> .at-account-sidebar)::before,
.woocommerce-account .woocommerce:has(> .at-account-sidebar)::after {
	display: none;
}

/* ── Sidebar (nav + Konto-card) ──────────────────────────────────────── */
.at-account-sidebar {
	flex: 0 0 240px;
	position: sticky;
	top: calc(var(--at-header-h) + var(--wp--preset--spacing--md));
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
}
/* WC core floats the nav left at width:30%. Nested inside our flex sidebar
   that shrinks + floats it — reset (higher specificity than core's
   `.woocommerce-account .woocommerce-MyAccount-navigation`). */
.woocommerce-account .at-account-sidebar .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	margin: 0;
}
.at-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/* Override WC's default account-nav li padding/border (higher specificity
   to beat `.woocommerce-account .woocommerce-MyAccount-navigation li`). */
.woocommerce-account .at-account-nav li {
	margin: 0;
	padding: 0;
	border: 0;
}
.at-account-nav li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--wp--custom--border-radius--default);
	border-left: 2px solid transparent;
	white-space: nowrap;
	color: var(--wp--preset--color--dark-grey);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--default),
		color var(--wp--custom--transition--default);
}
.at-account-nav li a:hover {
	background-color: var(--wp--preset--color--lightest-grey);
	color: var(--wp--preset--color--black);
}
.at-account-nav li.is-active a {
	background-color: var(--wp--preset--color--light-blue);
	border-left-color: var(--wp--preset--color--original-blue);
	color: var(--wp--preset--color--original-blue);
}
.at-account-nav__icon {
	display: inline-flex;
	flex: 0 0 auto;
}
.at-account-nav__icon svg {
	display: block;
}
/* Logout sits apart from the navigational items. */
.at-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--wp--preset--spacing--xs);
	padding-top: var(--wp--preset--spacing--xs);
	border-top: 1px solid var(--wp--preset--color--light-grey);
}

/* ── Content column ──────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* ── Sidebar Konto-card ──────────────────────────────────────────────── */
.at-konto-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: var(--wp--custom--border-radius--default);
}
.at-konto-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--dark-grey);
}
.at-konto-card__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--light-grey);
}
.at-konto-card__name {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--black);
}
.at-konto-card__email,
.at-konto-card__value {
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--dark-grey);
	word-break: break-word;
}
.at-konto-card__label {
	font-size: var(--wp--preset--font-size--body-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--dark-grey);
}
.at-konto-card__address {
	font-style: normal;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
	color: var(--wp--preset--color--graphite);
}
.at-konto-card__action {
	align-self: flex-start;
	margin-top: 4px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--original-blue);
	text-decoration: none;
}
.at-konto-card__action:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Edit modals ─────────────────────────────────────────────────────── */
.at-account-modal {
	width: min(460px, calc(100vw - 2 * var(--wp--preset--spacing--md)));
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--border-radius--default);
	box-shadow: 0 20px 60px rgba(16, 16, 18, 0.25);
	color: inherit;
}
.at-account-modal::backdrop {
	background: rgba(16, 16, 18, 0.5);
}
.at-account-modal__panel {
	display: flex;
	flex-direction: column;
}
.at-account-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
}
.at-account-modal__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--preset--color--black);
}
.at-account-modal__close {
	padding: 0 4px;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	color: var(--wp--preset--color--dark-grey);
}
.at-account-modal__close:hover {
	color: var(--wp--preset--color--black);
}
.at-account-modal__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
}
.at-account-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--light-grey);
}
.at-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
.at-field label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--graphite);
}
.at-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: var(--wp--custom--border-radius--input);
	font-size: var(--wp--preset--font-size--body-sm);
}
.at-field input:focus {
	border-color: var(--wp--preset--color--original-blue);
	outline: 2px solid var(--wp--preset--color--light-blue);
	outline-offset: 0;
}
.at-btn-primary {
	padding: 10px 18px;
	border: 0;
	border-radius: var(--wp--custom--border-radius--button);
	background-color: var(--wp--preset--color--original-blue);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	cursor: pointer;
}
.at-btn-primary:hover {
	background-color: var(--wp--preset--color--medium-blue);
}
.at-btn-ghost {
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: var(--wp--custom--border-radius--button);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-grey);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	cursor: pointer;
}
.at-btn-ghost:hover {
	border-color: var(--wp--preset--color--dark-grey);
	color: var(--wp--preset--color--black);
}

/* ── Address editor (combined billing + shipping) ────────────────────── */
.at-address-edit-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
}
.at-address-edit__title {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--preset--color--black);
}
/* WC woocommerce_form_field() output, restyled to match the checkout address
   block: floating labels (label + value share one box), tall inputs, tight
   rhythm, two-up name + postcode/city. select2 is dequeued here, so country /
   state render as native selects styled like the text inputs. */
.at-address-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
}
/* Neutralise WC core's float + 47% width on form rows (specificity 0,3,0 to
   beat `.woocommerce form .form-row-first`) — the grid owns column sizing. */
.woocommerce-account .at-address-form .form-row {
	position: relative;
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}
/* first/last name + postcode/city pair up (form-row-first/last). */
.woocommerce-account .at-address-form .form-row-first,
.woocommerce-account .at-address-form .form-row-last {
	grid-column: auto;
}
.at-address-form .woocommerce-input-wrapper {
	display: block;
}
/* High specificity (4 classes) to beat WC's own `.woocommerce form .form-row
   input.input-text` padding/height — otherwise the value rides up into the
   floated label. */
.woocommerce-account .at-address-form .form-row input.input-text,
.woocommerce-account .at-address-form .form-row select,
.woocommerce-account .at-address-form .form-row textarea {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 22px 14px 6px;
	border: 1px solid var(--wp--preset--color--paper-grey);
	border-radius: var(--wp--custom--border-radius--input);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font-size: 1rem;
	line-height: 1.3;
	box-shadow: none;
}
.woocommerce-account .at-address-form .form-row input.input-text:focus,
.woocommerce-account .at-address-form .form-row select:focus,
.woocommerce-account .at-address-form .form-row textarea:focus {
	border-color: var(--wp--preset--color--original-blue);
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--light-blue);
}
/* Floating label: centred like a placeholder when empty, shrinks to the top
   on focus, when filled, or for selects (which always hold a value). */
.at-address-form .form-row > label {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	max-width: calc(100% - 30px);
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--wp--preset--color--dark-grey);
	font-size: 1rem;
	font-weight: 400;
	pointer-events: none;
	transition: top 0.12s ease, font-size 0.12s ease, transform 0.12s ease;
}
.at-address-form .form-row:focus-within > label,
.at-address-form .form-row:has(input:not(:placeholder-shown)) > label,
.at-address-form .form-row:has(select) > label {
	top: 8px;
	transform: none;
	font-size: 0.7rem;
	font-weight: 500;
}
.at-address-form label .required {
	border: 0;
	color: var(--wp--preset--color--red);
	text-decoration: none;
}
.at-address-form__actions {
	margin: var(--wp--preset--spacing--md) 0 0;
}
@media (max-width: 600px) {
	.at-address-form .form-row-first,
	.at-address-form .form-row-last {
		grid-column: 1 / -1;
	}
}

/* ── Section heading + greeting ──────────────────────────────────────── */
.at-account-head {
	margin-bottom: var(--wp--preset--spacing--lg);
}
.at-account-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
}
.at-account-greeting {
	margin: var(--wp--preset--spacing--xs) 0 0;
	color: var(--wp--preset--color--dark-grey);
	font-size: var(--wp--preset--font-size--body);
}

/* ── Order status pill ───────────────────────────────────────────────
   Palette has no green/amber, so completed/on-hold introduce two scoped
   semantic tints here; the rest map to existing tokens. */
.at-order-status {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--wp--custom--border-radius--pill);
	font-size: var(--wp--preset--font-size--body-xs);
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.at-order-status.is-ok {
	background-color: #e3f4ea;
	color: #1b7a43;
}
.at-order-status.is-info {
	background-color: var(--wp--preset--color--light-blue);
	color: var(--wp--preset--color--medium-blue);
}
.at-order-status.is-warn {
	background-color: #fbefd6;
	color: #946200;
}
.at-order-status.is-neutral {
	background-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--dark-grey);
}
.at-order-status.is-muted {
	background-color: var(--wp--preset--color--lightest-grey);
	color: var(--wp--preset--color--dark-grey);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--light-grey);
}
.at-order-status.is-danger {
	background-color: var(--wp--preset--color--light-red);
	color: var(--wp--preset--color--red);
}

/* ── Orders table (Ordrer) ───────────────────────────────────────────── */
.at-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.at-orders-table thead th {
	padding: 0 14px 10px;
	text-align: left;
	font-size: var(--wp--preset--font-size--body-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--dark-grey);
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
}
.at-orders-table th.at-orders-table__col-total {
	text-align: right;
}
.at-orders-table__col-action {
	width: 1%;
}
.at-orders-table__row {
	transition: background-color var(--wp--custom--transition--default);
}
.at-orders-table__row:hover {
	background-color: var(--wp--preset--color--lightest-grey);
}
.at-orders-table td.at-orders-table__cell,
.at-orders-table th.at-orders-table__cell {
	padding: 14px;
	vertical-align: middle;
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
	font-size: var(--wp--preset--font-size--body-sm);
}
.at-orders-table__num {
	display: block;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.at-orders-table__num:hover {
	color: var(--wp--preset--color--original-blue);
}
.at-orders-table__items {
	display: block;
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--body-xs);
	color: var(--wp--preset--color--dark-grey);
}
.at-orders-table__col-date time {
	color: var(--wp--preset--color--dark-grey);
	white-space: nowrap;
}
.at-orders-table td.at-orders-table__col-total {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wp--preset--color--black);
}
.at-orders-table__view {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	color: var(--wp--preset--color--original-blue);
	font-weight: 600;
	text-decoration: none;
}
.at-orders-table__view:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Orders pagination ───────────────────────────────────────────────── */
.at-orders-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--lg);
}
.at-orders-pagination__link {
	color: var(--wp--preset--color--original-blue);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	text-decoration: none;
}
.at-orders-pagination__link:hover {
	text-decoration: underline;
}
.at-orders-pagination__status {
	color: var(--wp--preset--color--dark-grey);
	font-size: var(--wp--preset--font-size--body-sm);
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.at-account-empty {
	padding: var(--wp--preset--spacing--xl);
	text-align: center;
	border: 1px dashed var(--wp--preset--color--light-grey);
	border-radius: var(--wp--custom--border-radius--default);
	color: var(--wp--preset--color--dark-grey);
}
.at-account-empty__cta {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--original-blue);
	font-weight: 600;
	text-decoration: none;
}
.at-account-empty__cta:hover {
	text-decoration: underline;
}

/* ── Orders: stack into cards on small screens ───────────────────────── */
@media (max-width: 600px) {
	.at-orders-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.at-orders-table,
	.at-orders-table tbody,
	.at-orders-table__row,
	.at-orders-table td.at-orders-table__cell,
	.at-orders-table th.at-orders-table__cell {
		display: block;
	}
	.at-orders-table__row {
		border: 1px solid var(--wp--preset--color--light-grey);
		border-radius: var(--wp--custom--border-radius--default);
		padding: var(--wp--preset--spacing--sm);
		margin-bottom: var(--wp--preset--spacing--sm);
	}
	.at-orders-table__row:hover {
		background-color: transparent;
	}
	.at-orders-table td.at-orders-table__cell,
	.at-orders-table th.at-orders-table__cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--sm);
		padding: 4px 0;
		border-bottom: 0;
		text-align: right;
	}
	.at-orders-table__cell[data-title]::before {
		content: attr(data-title);
		font-size: var(--wp--preset--font-size--body-xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--wp--preset--color--dark-grey);
	}
	.at-orders-table__col-order {
		padding-bottom: var(--wp--preset--spacing--xs) !important;
		margin-bottom: var(--wp--preset--spacing--xs);
		border-bottom: 1px solid var(--wp--preset--color--light-grey) !important;
	}
	.at-orders-table__col-order::before {
		display: none;
	}
	.at-orders-table__num {
		font-size: var(--wp--preset--font-size--body);
	}
	.at-orders-table__col-action {
		width: auto;
		justify-content: flex-end;
	}
}

/* ── Mobile: stack, sidebar becomes a horizontal chip row ────────────── */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce:has(> .at-account-sidebar) {
		flex-direction: column;
		gap: var(--wp--preset--spacing--md);
		padding-top: var(--wp--preset--spacing--lg);
	}
	.at-account-sidebar {
		position: static;
		flex-basis: auto;
		width: 100%;
		gap: var(--wp--preset--spacing--md);
	}
	.at-account-nav {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.at-account-nav ul {
		flex-direction: row;
		gap: 8px;
		width: max-content;
		min-width: 100%;
	}
	.at-account-nav li a {
		white-space: nowrap;
		border-left: 0;
		border: 1px solid var(--wp--preset--color--light-grey);
		border-radius: var(--wp--custom--border-radius--pill);
	}
	.at-account-nav li.is-active a {
		border-color: var(--wp--preset--color--original-blue);
	}
	.at-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}


/* ==========================================================================
   PDP — Related-products carousel (Lignende produkter)
   --------------------------------------------------------------------------
   `woocommerce/product-image` paints the product photo on a transparent
   wrapper. For the related carousel we want the catalog look: a soft grey
   plate behind the photo and the photo blended with `multiply` so white
   product backgrounds dissolve into the plate (cleaner against the cards).
   ========================================================================== */

.at-pdp-related .at-product-card .wc-block-components-product-image {
	background-color: var(--wp--preset--color--lightest-grey);
}

.at-pdp-related .at-product-card .wc-block-components-product-image img {
	mix-blend-mode: multiply;
}


/* PDP — SKU chip directly under the H1 product title. Light-grey plate +
   dark-grey text, inline-flex so it shrinks to its content. The "SKU:"
   label is hidden — the chip's visual rhythm makes the role obvious and
   the prefix only adds noise. */
.at-pdp-sku.wc-block-components-product-sku {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background-color: var(--wp--preset--color--lightest-grey);
	color: var(--wp--preset--color--dark-grey);
	border-radius: var(--wp--custom--border-radius--default);
	line-height: 1.2;
	width: fit-content;
}

.at-pdp-sku .wp-block-post-terms__prefix {
	display: none;
}

/* PDP stock / delivery indicator (woocommerce/product-stock-indicator).
   Inline row: a truck glyph (masked Figma icon tinted to the state colour,
   same icon family as the trust patterns) + the converting copy. State
   colours reuse the order-status tints — no new palette introduced. */
.at-pdp-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
}
.at-pdp-stock::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(../images/icons/truck.svg) center / contain no-repeat;
	mask: url(../images/icons/truck.svg) center / contain no-repeat;
}
.at-pdp-stock.wc-block-components-product-stock-indicator--in-stock {
	color: #1b7a43;
}
.at-pdp-stock.wc-block-components-product-stock-indicator--available-on-backorder {
	color: #946200;
}
.at-pdp-stock.wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--wp--preset--color--dark-grey);
}
/* The truck is a delivery cue — drop it on the out-of-stock state. */
.at-pdp-stock.wc-block-components-product-stock-indicator--out-of-stock::before {
	display: none;
}

/* Pakke-PDP (.ch-package — codehouse-blocks product-package v4.69+;
   tidligere .at-package i arctic-trucks-blocks ≤1.25). Pluginen shipper
   strukturell default-CSS (product-package.css) som enqueues under render
   og dermed printes ETTER custom.css — theme-overrides går derfor via
   --ch-package-*-tokens (rekkefølge-uavhengige) eller .ch-package-prefiks
   (0,2,0 slår pluginens 0,1,x). Uttrykk: quiet list — hairline-separatorer
   i light-grey, navn venstre / pris høyre, sum-raden som visuell hovedpris
   (samme vekt/størrelse som pris på simple-PDP), full-bredde knapp. */
.ch-package {
	--ch-package-border: 1px solid var(--wp--preset--color--light-grey);
	--ch-package-divider: 1px solid var(--wp--preset--color--light-grey);
}

.ch-package .ch-package__label {
	color: var(--wp--preset--color--dark-grey);
	letter-spacing: 0.04em;
	opacity: 1;
}

.ch-package .ch-package__item {
	font-size: var(--wp--preset--font-size--body-sm);
}

.ch-package .ch-package__item-name {
	color: var(--wp--preset--color--black);
}

.ch-package .ch-package__item-name:hover {
	color: var(--wp--preset--color--original-blue);
	text-underline-offset: 3px;
}

.ch-package .ch-package__item-price {
	color: var(--wp--preset--color--dark-grey);
	opacity: 1;
	font-variant-numeric: tabular-nums;
}

.ch-package .ch-package__total-label {
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--dark-grey);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ch-package .ch-package__total-price {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ch-package .ch-package__form .single_add_to_cart_button {
	width: 100%;
	text-align: center;
}

.ch-package .ch-package__unavailable {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--dark-grey);
}

/* WC Product Bundles-PDP — bundlet produkttittel. Pluginens blocktheme.css
   setter font-size til core-presetet `large` (~22–36px fluid), altfor stort
   i vår skala. `large` kan ikke omdefineres i theme.json: 85 innholdssider
   fra gamle siten bruker has-large-font-size og skal beholde core-verdien.
   h4-elementkvalifikatoren gir høyere spesifisitet enn PB-regelen, så
   rekkefølgen på stylesheets er likegyldig. `medium` er core-presetet PB
   selv bruker for samme tittel i grid-layouten. */
.woocommerce div.product form.cart .bundled_product_summary h4.bundled_product_title {
	font-size: var(--wp--preset--font-size--medium);
}

/* Pakke-gruppering i cart/checkout-blokkene. package-cart.js
   (codehouse-blocks) speiler pakke-tilhørighet fra cart-dataene til
   radene som .ch-package-child/-first/-last + data-ch-package. Visuelt:
   sammenhengende lys plate med blå aksentlinje — radene leses som ÉN
   pakke. Uten JS består tekstlabelen «Del av pakke: …» (item_data). */
.wc-block-cart-items__row.ch-package-child td {
	/* WC core resetter cart-td med `background: none !important` — match med
	   !important; vår spesifisitet (0,2,1) slår deres (0,1,2). */
	background: var(--wp--preset--color--lightest-grey) !important;
	border-top: none;
}

.wc-block-cart-items__row.ch-package-child td:first-child {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--original-blue);
}

.wc-block-cart-items__row.ch-package-first td {
	border-top: 1px solid var(--wp--preset--color--light-grey);
}

.wc-block-cart-items__row.ch-package-last td {
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
}

/* Checkout-sammendraget: samme gruppering på ordre-linjene. */
.wc-block-components-order-summary-item.ch-package-child {
	background: var(--wp--preset--color--lightest-grey);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--original-blue);
}

/* Variation pills (add-to-cart-with-options). WC core styles these with a
   `:where()` rule (zero specificity, theme-overridable by design) — match it
   so we stay at the same low specificity and win on source order. Keep WC's
   0.8em font-size; padding/weight/radius below give the pills more presence. */
:where( .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill ) {
	padding: 0.5em 0.75em;
	font-weight: 500;
	border-radius: var(--wp--custom--border-radius--button);
	/* WC drives border + text off `--pill-color`. Point it at black, and
	   override WC's 40%-mix border to a solid 100% line. */
	--pill-color: var( --wp--preset--color--black );
	border-color: var( --pill-color );
}
/* Selected pill. WC's runtime-injected style swaps the vars off the page's
   computed colors; override (plain classes, 0,2,0 > its `:where()` 0,0,0) so
   the fill is our graphite with white text regardless of surface. */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has( .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked ) {
	--pill-background-color: var( --wp--preset--color--black );
	--pill-color: var( --wp--preset--color--white );
	/* Seamless dark pill — match border to the fill, not the white text, so
	   selected doesn't gain a white ring. */
	border-color: var( --pill-background-color );
}
/* WC fades the selected pill to 85% on hover; keep it fully solid instead. */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:hover:has( .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked ) {
	background-color: var( --pill-background-color );
}
/* WC outlines the pill on `:focus-within`, which fires on mouse click too —
   not clean. Drop it (match WC's `:where()` specificity, win on source order)
   and restore a ring only for KEYBOARD focus (`:focus-visible` on the hidden
   radio) so accessibility is preserved. */
:where( .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill ):where( :focus-within ) {
	outline: none;
}
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has( .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:focus-visible ) {
	outline: 1px solid currentColor;
	outline-offset: 1px;
}
/* WC's classic `.woocommerce-page label { margin-bottom }` leaks onto the
   variation selector's labels (the attribute name + every pill, all <label>s),
   adding stray vertical space — the block's own flex gaps handle spacing.
   Zero it in this context only (same specificity as the core rule → wins on
   source order); the global form-label margin elsewhere is untouched. */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector label {
	margin-bottom: 0;
}
/* Attribute name ("Årsmodell" / "Dimensjon" / …) — quieter, body-sm. */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	font-size: var(--wp--preset--font-size--body-sm);
}


/* PDP breadcrumb links — tone them down. They're navigation, not focus
   surface. Default theme link color is original-blue and pulls eyes
   away from the H1 sitting directly below. Medium grey stays legible
   and matches the SKU chip's voice. */
.at-breadcrumbs--pdp a {
	color: var(--wp--preset--color--grey);
	text-decoration: none;
}
.at-breadcrumbs--pdp a:hover,
.at-breadcrumbs--pdp a:focus-visible {
	color: var(--wp--preset--color--dark-grey);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ----------------------------------------------------------------------
   Product-card actions (Add to Cart + Quick View) — hover reveal
   ----------------------------------------------------------------------
   The card carries ch/add-to-cart and ch/quick-view-trigger inside
   .at-product-card__actions. Composition rules (theme-owned; the blocks
   themselves stay generic):

   - "Smart per type": ch/add-to-cart renders only for one-click-addable
     products (simple, in stock); ch/quick-view-trigger renders is-secondary
     (compact icon) for those and is-primary (full button) for products that
     need options. So variable products show only the primary quick-view —
     no Add to Cart to hide.
   - Hover reveal: on devices that can hover, the actions row fades/slides
     in on card hover or keyboard focus-within. Touch devices always show it.
*/
.at-product-card {
	position: relative;
}

.at-product-card__actions {
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--xs);
}

/* Add to Cart grows to fill; the secondary icon trigger keeps its square
   footprint beside it. ch/add-to-cart renders nothing for variable / needs-
   options products, so there is no native button to hide — those cards show
   only the (primary) quick-view trigger, which then fills the row itself. */
.at-product-card__actions .ch-add-to-cart,
.at-product-card__actions .ch-quick-view-trigger.is-primary {
	flex: 1 1 auto;
	margin: 0;
}
.at-product-card__actions .ch-add-to-cart__button {
	width: 100%;
}

/* Hover reveal — only gate on devices that can actually hover, so touch
   users always have the actions available. */
@media (hover: hover) {
	.at-product-card__actions {
		opacity: 0;
		transform: translateY(4px);
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.at-product-card:hover .at-product-card__actions,
	.at-product-card:focus-within .at-product-card__actions {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Skin ch/quick-view + trigger to the AT palette (the blocks ship neutral
   fallbacks; map them onto theme tokens + soft radii here). */
.ch-quick-view-trigger {
	--ch-qvt-radius: var(--wp--custom--border-radius--default, 4px);
}
.ch-quick-view {
	--ch-qv-radius: var(--wp--custom--border-radius--default, 12px);
}

/* ----------------------------------------------------------------------
   Variant: actions as icon buttons overlaid on the product image
   ----------------------------------------------------------------------
   Opt-in via `.at-product-card--icons` on the card. Add to Cart + Quick
   View render as round icon buttons stacked in a corner of the image.
   Smart-per-type still applies: ch/add-to-cart simply isn't rendered for
   variable products, leaving only the quick-view icon. Position is driven by
   CSS vars so it is easy to retune while we settle the design. */
.at-product-card--icons {
	--at-qa-x: 0.6rem;          /* inset from the chosen horizontal edge */
	--at-qa-y: 0.6rem;          /* inset from the chosen vertical edge */
	--at-qa-size: 2.5rem;       /* icon button diameter */
	--at-qa-gap: 0.45rem;
	--at-check-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27%2F%3E%3C%2Fsvg%3E");
}

.at-product-card--icons .at-product-card__actions {
	position: absolute;
	top: var(--at-qa-y);
	right: var(--at-qa-x);
	left: auto;
	z-index: 3;
	flex-direction: column;
	align-items: center;
	gap: var(--at-qa-gap);
	width: auto;
	margin: 0;
}

/* Both controls collapse to a round icon button. */
.at-product-card--icons .at-product-card__actions .ch-add-to-cart,
.at-product-card--icons .at-product-card__actions .ch-quick-view-trigger {
	flex: 0 0 auto;
	width: var(--at-qa-size);
	margin: 0;
}

.at-product-card--icons .ch-add-to-cart__button,
.at-product-card--icons .ch-quick-view-trigger__button {
	width: var(--at-qa-size);
	height: var(--at-qa-size);
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.at-product-card--icons .ch-add-to-cart__button:hover,
.at-product-card--icons .at-product-card__actions .ch-quick-view-trigger__button:hover {
	background: var(--wp--preset--color--original-blue);
	color: var(--wp--preset--color--white);
	/* Override the block's own .is-icon:hover (which tints the eye accent-blue),
	   so the eye reads white on the blue hover fill. */
	border-color: var(--wp--preset--color--original-blue);
}

/* Icon-only: hide the text labels (buttons keep their aria-label). */
.at-product-card--icons .ch-add-to-cart__label,
.at-product-card--icons .ch-quick-view-trigger.is-primary .ch-quick-view-trigger__button span {
	display: none;
}

/* Paint the site cart glyph on the Add to Cart button. */
.at-product-card--icons .ch-add-to-cart__button::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	background-color: currentColor;
	-webkit-mask: var(--at-cart-icon) center / contain no-repeat;
	mask: var(--at-cart-icon) center / contain no-repeat;
}

/* Brief "added" feedback: ch/add-to-cart's view.js adds `is-added` for a
   moment after a successful add — flip the glyph to a checkmark + blue fill,
   then it reverts to the cart icon. (Drawer opening is handled by
   assets/js/cart-drawer-autoopen.js on the wc-blocks_added_to_cart event.) */
.at-product-card--icons .ch-add-to-cart__button.is-added {
	background: var(--wp--preset--color--original-blue);
	color: var(--wp--preset--color--white);
	transform: scale(1.08);
}
.at-product-card--icons .ch-add-to-cart__button.is-added::before {
	-webkit-mask-image: var(--at-check-icon);
	mask-image: var(--at-check-icon);
}

/* Same mini-cart glyph the site uses elsewhere (Figma icon — kept in sync
   with the wc-block-mini-cart__icon SVG in includes/filters.php). Used as a
   mask so it inherits the button's currentColor. */
.at-product-card--icons {
	--at-cart-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M5.9145%2021.047C5.57417%2020.7067%205.404%2020.2936%205.404%2019.8078C5.404%2019.3218%205.57417%2018.9086%205.9145%2018.5683C6.25483%2018.2279%206.66792%2018.0577%207.15375%2018.0577C7.63975%2018.0577%208.05292%2018.2279%208.39325%2018.5683C8.73358%2018.9086%208.90375%2019.3218%208.90375%2019.8078C8.90375%2020.2936%208.73358%2020.7067%208.39325%2021.047C8.05292%2021.3875%207.63975%2021.5578%207.15375%2021.5578C6.66792%2021.5578%206.25483%2021.3875%205.9145%2021.047ZM15.6068%2021.047C15.2664%2020.7067%2015.0963%2020.2936%2015.0963%2019.8078C15.0963%2019.3218%2015.2664%2018.9086%2015.6068%2018.5683C15.9471%2018.2279%2016.3603%2018.0577%2016.8463%2018.0577C17.3321%2018.0577%2017.7452%2018.2279%2018.0855%2018.5683C18.4258%2018.9086%2018.596%2019.3218%2018.596%2019.8078C18.596%2020.2936%2018.4258%2020.7067%2018.0855%2021.047C17.7452%2021.3875%2017.3321%2021.5578%2016.8463%2021.5578C16.3603%2021.5578%2015.9471%2021.3875%2015.6068%2021.047ZM6.01525%205.75L8.55%2011.0577H15.3673C15.4249%2011.0577%2015.4763%2011.0433%2015.5213%2011.0145C15.5661%2010.9857%2015.6045%2010.9456%2015.6365%2010.8943L18.3193%206.01925C18.3578%205.94875%2018.3609%205.88625%2018.3288%205.83175C18.2968%205.77725%2018.2423%205.75%2018.1653%205.75H6.01525ZM5.29625%204.25H19.1808C19.5898%204.25%2019.899%204.42408%2020.1085%204.77225C20.3182%205.12025%2020.3282%205.47567%2020.1385%205.8385L16.9345%2011.6423C16.7705%2011.9307%2016.5536%2012.1554%2016.2838%2012.3162C16.0138%2012.4773%2015.7179%2012.5577%2015.3963%2012.5577H8.1L6.94225%2014.673C6.89092%2014.75%206.88933%2014.8333%206.9375%2014.923C6.9855%2015.0128%207.05758%2015.0577%207.15375%2015.0577H18.596V16.5577H7.15375C6.48708%2016.5577%205.98617%2016.2703%205.651%2015.6953C5.31567%2015.1203%205.30383%2014.5462%205.6155%2013.973L7.04225%2011.4078L3.404%203.75H1.5V2.25H4.34625L5.29625%204.25Z%27%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================================
   Single post — heading caps
   --------------------------------------------------------------------------
   The h-1 / h-2 presets max at 8rem / 3.75rem (WP fluid clamps). On blog posts
   the headings read better a touch smaller, so cap the presets (h-1 → 6rem,
   h-2 → 3rem) while keeping the fluid scaling intact below those ceilings.
   Scoped to .single-post so PDP / configurator singles (also .single) are
   untouched.
   ========================================================================== */
/* !important to beat core's preset utility classes (.has-X-font-size ship
   their font-size as !important, so a plain higher-specificity rule loses). */
.single-post .has-h-1-font-size {
	font-size: min(var(--wp--preset--font-size--h-1), 6rem) !important;
}

/* Content h2s get their size from theme.json's element style (no preset
   class), so also target plain headings in the post body — excluding any
   that carry an explicit font-size class (e.g. the h-3 "Flere artikler"). */
.single-post .has-h-2-font-size,
.single-post .wp-block-post-content h2.wp-block-heading:not([class*="font-size"]) {
	font-size: min(var(--wp--preset--font-size--h-2), 3rem) !important;
}


/* ==========================================================================
   Legacy "Hand-picked Products" grid — shop-card parity
   --------------------------------------------------------------------------
   Many blog posts embed products via woocommerce/handpicked-products (the
   legacy block), which renders .wc-block-grid markup — centered, unstyled,
   nothing like our .at-product-card shop cards. We can't set block attributes
   on this fixed server markup, so we map the legacy classes onto the same
   visual language as the shop cards: responsive grid (230px floor), 1:1 image
   on a lightest-grey plate with multiply blend, left-aligned body/500 title
   that turns original-blue on hover, and a 700-weight price.

   Note: shop cards expose actions as hover icons (ch/add-to-cart + quick-view)
   which can't be reproduced in this legacy markup. The legacy Add-to-Cart
   button's visibility is controlled per-block in the block's settings, not here.
   ========================================================================== */
/* Keep WC's native flex layout untouched: .wc-block-grid__products is already
   display:flex with gutter margins and responsive has-N-columns breakpoints,
   and each card is flex: 1 0 25%. We only skin the cards — forcing display:grid
   is what broke it, since max-width:25% then resolved against the 285px grid
   track instead of the row (25% of 25%). */
.wc-block-grid__product {
	position: relative;
	text-align: left; /* legacy centers everything; shop cards are left */
}

.wc-block-grid__product-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Image — 1:1 plate + multiply blend + soft radius (catalog look). */
.wc-block-grid__product-image {
	display: block;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--wp--custom--border-radius--default, 4px);
	background-color: var(--wp--preset--color--lightest-grey);
}

.wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

/* Title — body size, weight 500, black → original-blue on hover. */
.wc-block-grid__product-title {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--black);
	transition: color 0.15s ease;
}

.wc-block-grid__product-link:hover .wc-block-grid__product-title,
.wc-block-grid__product-link:focus-visible .wc-block-grid__product-title {
	color: var(--wp--preset--color--original-blue);
}

/* Price — body size, weight 700. Sale: muted regular + red sale price. */
.wc-block-grid__product-price {
	margin: var(--wp--preset--spacing--xs) 0 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--preset--color--black);
}

.wc-block-grid__product-price del {
	opacity: 0.5;
	font-weight: 500;
	margin-right: 0.4em;
}

.wc-block-grid__product-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--red);
}


/* "Kommer snart" hero button on model landing pages — the render_block
 * filter (filters.php) swaps .vc-scroll for .at-coming-soon and strips the
 * link when the Configurator is flagged coming soon. Render as a static
 * pill, not an interactive button. */
.at-coming-soon .wp-block-button__link {
	pointer-events: none;
	cursor: default;
}

/* Dim only the label text — the button surface stays at full opacity so
 * it reads as a disabled button, not a translucent one. */
.at-coming-soon .at-coming-soon__label {
	opacity: 0.7;
}

/* Vehicle configurator (vehicle-configurator plugin, v0.27+): its sticky top
 * bar / gallery media pane read --vc-sticky-top (default 0). Track the fixed
 * header (--at-header-h) so the bar stops below it, and rise to the admin-bar offset when
 * the header auto-hides on scroll-down — exactly like .at-shop-controls. Not in
 * the lightbox overlay, which covers the header (the bar sticks at the overlay
 * top there). The plugin owns the bar; we only supply the offset + the glide. */
.vc-app:not(.is-lightbox-open) {
	--vc-sticky-top: calc(var(--at-header-h) + var(--at-admin-bar-offset, 0px));
}
body:has(.at-header--hidden) .vc-app:not(.is-lightbox-open) {
	--vc-sticky-top: var(--at-admin-bar-offset, 0px);
}
.vc-topbar {
	transition: top 0.3s ease;
}

/* ==========================================================================
   Review stars — gold fill on grey track
   --------------------------------------------------------------------------
   WC renders stars as icon-font glyphs: the ::before layer is the empty
   track (default: same color at opacity .5), the span::before overlay is
   the filled portion (color: inherit). We split them: track in a solid
   grey, fill in the rating gold (--wp--custom--color--rating — change the
   color in theme.json, not here). Covers the product-rating block (cards +
   PDP), the reviews-by-product list (review-list-item — WC ships its own
   dark track + orange fill there), classic .star-rating, and the
   review-form picker (p.stars). Selectors are doubled/tripled up to
   outrank WC's own rules regardless of stylesheet order.
   ========================================================================== */
.wc-block-components-product-rating .wc-block-components-product-rating__stars.wc-block-grid__product-rating__stars::before,
.wc-block-components-review-list-item__rating__stars.wc-block-components-review-list-item__rating__stars::before,
.woocommerce .star-rating::before {
	color: var(--wp--custom--color--rating-empty);
	opacity: 1;
}

.wc-block-components-product-rating .wc-block-components-product-rating__stars.wc-block-grid__product-rating__stars span::before,
.wc-block-components-review-list-item__rating__stars.wc-block-components-review-list-item__rating__stars span::before,
.woocommerce .star-rating span::before {
	color: var(--wp--custom--color--rating);
}

/* Review-form star picker: hollow stars grey, hovered/selected gold. */
.woocommerce p.stars a {
	color: var(--wp--custom--color--rating);
}