/* ==========================================================================
   GamingButikken 2026 redesign
   Loaded on every front-end page from woodmart-child/functions.php
   (handle: gb-homepage-2026). Sections:
     1. Design tokens
     2. Base typography
     3. Header (top bar, search, account, cart, category nav)
     4. Product card  (global: /spill/, /konsoller/, product pages, homepage)
     5. Homepage sections (.gb-*)
     6. Prefooter payment strip + footer
     7. Responsive
   Rollback: delete this file and the gb_homepage_2026_assets() enqueue in
   woodmart-child/functions.php.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */
:root {
	--gb-primary: #1c61e7;
	--gb-primary-dark: #144bb8;
	--gb-tint: #eef2fb;
	--gb-navy: #12162b;
	--gb-title: #141828;
	--gb-body: #3d4152;
	--gb-muted: #6b7085;
	--gb-line: #e6e8ef;
	--gb-surface: #f5f6fa;
	--gb-sale: #d92d20;
	--gb-instock: #178a45;
	--gb-soon: #d97706;
	--gb-red: #e60012;
	--gb-r-card: 14px;
	--gb-r-btn: 10px;
	--gb-r-block: 20px;
	--gb-font-head: "Lexend Deca", Arial, sans-serif;
	--gb-font-body: "Open Sans", Arial, sans-serif;
	--gb-gutter: 20px;
}

/* -------------------------------------------------------------------------
   2. Base typography

   Woodmart already loads Open Sans + Lexend Deca and drives every colour
   through its own custom properties, and its light colour schemes (banners,
   dark sections, the header text element) override those properties on their
   own containers. So the tokens are pushed through Woodmart's variables
   rather than through flat h1/body/a rules: a flat rule would repaint white
   banner headings dark. html:root only exists to beat the theme's own :root.
   ---------------------------------------------------------------------- */
html:root {
	--wd-text-color: #3d4152;
	--wd-title-color: #141828;
	--wd-entities-title-color: #141828;
	--wd-primary-color: #1c61e7;
	--wd-link-color: #1c61e7;
	--wd-link-color-hover: #144bb8;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
   3. Header
   ---------------------------------------------------------------------- */

/* 3a. Announcement / top bar */
.whb-header .whb-top-bar {
	background-color: var(--gb-navy) !important;
	border: 0 !important;
}

.whb-top-bar .wd-header-text,
.whb-top-bar .wd-header-text * {
	color: #d6d9ea;
}

/* One row, never two: nowrap so the three promises can only ever sit on a
   single line. Below 1025px they do not fit, so they cycle one at a time
   (see the rotation block further down). */
.whb-top-bar .gb-usps {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 56px;
	font-family: var(--gb-font-head);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.whb-top-bar .gb-usps span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
}

.whb-top-bar .gb-usps svg {
	flex: 0 0 auto;
}

@media (max-width: 1400px) {
	.whb-top-bar .gb-usps {
		gap: 36px;
	}
}

/* Below the desktop header breakpoint the three promises share one slot and
   fade through each other, 4s each. */
@media (max-width: 1024px) {
	.whb-top-bar .gb-usps {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		height: 18px;
		font-size: 12px;
	}

	.whb-top-bar .gb-usps span {
		grid-area: 1 / 1;
		justify-content: center;
		opacity: 0;
		animation: gb-usp-cycle 12s infinite;
	}

	.whb-top-bar .gb-usps span:nth-child(2) {
		animation-delay: 4s;
	}

	.whb-top-bar .gb-usps span:nth-child(3) {
		animation-delay: 8s;
	}
}

@keyframes gb-usp-cycle {
	0%      { opacity: 0; }
	3%, 30% { opacity: 1; }
	33%     { opacity: 0; }
	100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1024px) {
	.whb-top-bar .gb-usps span {
		animation: none;
		opacity: 0;
	}

	.whb-top-bar .gb-usps span:first-child {
		opacity: 1;
	}
}

/* 3b. Search field.
   The search element itself is set to Woodmart's "Style 3" (with-bg-2) in the
   header builder, which is the inset blue submit button from the mockup and
   keeps the theme's own magnifier icon and ajax dropdown. Only the theme's
   form variables are nudged here; nothing about the button is re-implemented,
   because overriding its position or font-size is what blanked the icon. */
.whb-header .wd-header-search-form .searchform {
	--wd-form-brd-radius: 12px;
	--wd-form-brd-width: 1.5px;
	--wd-form-brd-color: #dfe2ec;
	--wd-form-brd-color-focus: #c3cbe0;
	--wd-form-bg: var(--gb-surface);
	--wd-form-color: var(--gb-title);
	--wd-form-placeholder-color: var(--gb-muted);
}

@media (min-width: 1025px) {
	.whb-header .wd-header-search-form .searchform {
		--wd-form-height: 52px;
	}
}

/* 3c. The account element is deliberately left exactly as Woodmart renders it
   (icon only). Do not restyle it here. Owner decision 2026-09-17. */

/* 3d. Cart pill: cart icon, "Handlekurv", blue count badge, inline and
   vertically centred.

   Woodmart nests the count inside the icon span and pins it to the icon's
   corner. Making the icon span display:contents drops its box while keeping
   its ::before glyph and the nested count, so all three become flex items of
   the anchor and can be ordered. Nothing is absolutely positioned.

   Only from 769px up. At 768px and below Woodmart's own mobile cart and the
   sticky bottom bar are left completely untouched. In practice Woodmart
   switches to the mobile header at 1024px, so on this site the pill only ever
   renders on desktop; the tablet range is kept correct in case that
   breakpoint is ever raised. */
@media (min-width: 769px) {
	.whb-header .wd-header-cart > a {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 48px;
		padding: 0 16px 0 14px;
		border-radius: 12px;
		background-color: var(--gb-navy);
		color: #ffffff;
		transition: background-color 120ms ease;
	}

	/* Hover and open change the pill background and nothing else. Woodmart's
	   own .wd-tools-element hover recolours the icon and the label and fades
	   the element, which made the pill flicker, so those are pinned here. */
	.whb-header .wd-header-cart > a:hover,
	.whb-header .wd-header-cart.wd-opened > a,
	.whb-header .wd-header-cart.wd-design-5 > a:hover,
	.whb-header .wd-header-cart.wd-design-5.wd-opened > a {
		background-color: #232a4d;
		color: #ffffff;
		opacity: 1;
		transform: none;
		text-decoration: none;
	}

	.whb-header .wd-header-cart > a:hover .wd-tools-icon::before,
	.whb-header .wd-header-cart.wd-opened > a .wd-tools-icon::before,
	.whb-header .wd-header-cart > a:hover .wd-tools-text,
	.whb-header .wd-header-cart.wd-opened > a .wd-tools-text {
		color: #ffffff;
		opacity: 1;
	}

	.whb-header .wd-header-cart .wd-tools-icon {
		display: contents;
	}

	.whb-header .wd-header-cart .wd-tools-icon::before {
		order: 1;
		position: static;
		margin: 0;
		font-size: 22px;
		line-height: 1;
		color: #ffffff;
	}

	/* Woodmart sizes this badge to a 15px dot under .wd-design-5 / .wd-tools-count
	   from a part stylesheet injected after this file, which squashes it into an
	   oval with a 9px digit. Matching its specificity is enough, no !important. */
	.whb-header .wd-header-cart .wd-cart-number,
	.whb-header .wd-header-cart.wd-design-5 .wd-tools-icon .wd-cart-number.wd-tools-count {
		order: 3;
		position: static;
		inset: auto;
		transform: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		margin: 0;
		width: auto;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border: 0;
		border-radius: 999px;
		background-color: var(--gb-primary);
		color: #ffffff;
		font-family: var(--gb-font-head);
		font-size: 12px;
		font-weight: 600;
		line-height: 22px;
		letter-spacing: 0;
		--wd-count-size: 22px;
	}

	/* the badge keeps its blue in every state */
	.whb-header .wd-header-cart > a:hover .wd-cart-number,
	.whb-header .wd-header-cart.wd-opened > a .wd-cart-number,
	.whb-header .wd-header-cart.wd-design-5 > a:hover .wd-tools-icon .wd-cart-number.wd-tools-count,
	.whb-header .wd-header-cart.wd-design-5.wd-opened > a .wd-tools-icon .wd-cart-number.wd-tools-count {
		background-color: var(--gb-primary);
		color: #ffffff;
		opacity: 1;
	}

	/* the "items" word Woodmart appends inside the count */
	.whb-header .wd-header-cart .wd-cart-number > span {
		display: none;
	}

	.whb-header .wd-header-cart .wd-cart-subtotal {
		display: none;
	}
}

/* The label. Woodmart hides it because the cart element is configured
   "icon only", hence the !important. Below 1025px the pill is icon + badge. */
@media (min-width: 1025px) {
	.whb-header .wd-header-cart.wd-style-icon > a .wd-tools-text,
	.whb-header .wd-header-cart > a .wd-tools-text {
		order: 2;
		display: block !important;
		max-width: none;
		margin: 0;
		font-family: var(--gb-font-head);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		color: #ffffff;
	}

	.whb-header .wd-header-cart .wd-tools-text::before {
		content: "Handlekurv";
	}
}

/* 3e. Category nav row (desktop only: below xl this row holds the mobile
   search, and the categories live in the burger menu as they do today) */
@media (min-width: 1025px) {
	.whb-header .whb-header-bottom {
		border-top: 1px solid var(--gb-line);
		border-bottom: 1px solid var(--gb-line);
	}

	.whb-header .whb-header-bottom .wd-nav > li > a {
		font-family: var(--gb-font-head);
		font-size: 15px;
		font-weight: 500;
	}

	.whb-header .whb-header-bottom .wd-nav > li > a:hover,
	.whb-header .whb-header-bottom .wd-nav > li.current-menu-item > a {
		color: var(--gb-primary);
	}
}

/* -------------------------------------------------------------------------
   4. Product card (global)
   ---------------------------------------------------------------------- */
/* The shop archive and several widgets ship with "products with background",
   which paints the card #F7F7F8 through --wd-prod-bg. The approved card is a
   white card with a border, so the variable is reset on those grids too. */
.wd-products .wd-product,
.wd-product.product-grid-item,
.wd-products-with-bg .wd-product,
.wd-products-with-bg .wd-products .wd-product,
.wd-products-with-shadow .wd-product {
	/* !important because Woodmart prints the competing rule (same specificity)
	   from a part stylesheet that is injected after this file. */
	--wd-prod-bg: #ffffff !important;
	--wd-prod-gap: 8px;
	--wd-prod-shadow: none !important;
}

.wd-products .wd-product > .product-wrapper,
.wd-products-with-bg .wd-product > .product-wrapper,
.wd-products-with-shadow .wd-product > .product-wrapper,
.wd-product.product-grid-item > .product-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 14px;
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-r-card);
	background-color: #ffffff !important;
	box-shadow: none !important;
	transition: box-shadow .25s ease, transform .25s ease;
}

.wd-products .wd-product:hover > .product-wrapper {
	box-shadow: 0 8px 24px rgba(20, 24, 40, .10) !important;
}

/* The Woodmart fade backdrop would sit outside our border, so drop it and
   use the hover shadow above instead. */
.wd-product .content-product-imagin {
	display: none !important;
}

/* Image area: grey tile, product shot multiplied onto it.
   The .wd-quick-shop selector is needed because Woodmart paints the same
   element #F7F7F8 from a part stylesheet that is injected after this file. */
.wd-product .product-element-top,
.wd-product .product-element-top.wd-quick-shop {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 8/7 keeps the mockup's 238x210 image tile and scales it down on the
	   narrower cards of the shop archive. */
	aspect-ratio: 8 / 7;
	height: auto;
	margin: 0;
	border-radius: var(--gb-r-btn);
	background-color: var(--gb-surface);
	overflow: hidden;
}

.wd-product .product-element-top .hover-img {
	background-color: transparent;
}

.wd-product .product-element-top .product-image-link,
.wd-product .product-element-top .hover-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.wd-product .product-element-top img {
	width: auto;
	max-width: 88%;
	height: auto;
	max-height: 88%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* The approved card is brand, title, stock, price, button. Nothing else. */
.wd-product .product-element-bottom > .star-rating,
.wd-product .product-element-bottom > .wd-product-cats {
	display: none;
}

/* Bottom block: brand, title, stock, price, button */
.wd-product .product-element-bottom {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-align: start;
}

.wd-product .product-element-bottom .wd-product-brands-links,
.wd-product .product-element-bottom .wd-product-brands-links a {
	order: 1;
	min-height: 16px;
	margin: 0;
	font-family: var(--gb-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 16px;
	color: var(--gb-muted);
}

.wd-product .product-element-bottom .wd-product-brands-links a {
	color: var(--gb-muted);
	line-height: 16px;
}

.wd-product .product-element-bottom .wd-product-brands-links a:hover {
	color: var(--gb-primary);
}

.wd-product .product-element-bottom > .wd-entities-title {
	order: 2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 40px;
	margin: 0;
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.wd-product .product-element-bottom > .wd-entities-title a {
	color: var(--gb-title);
}

.wd-product .product-element-bottom > .wd-entities-title a:hover {
	color: var(--gb-primary);
}

.wd-product .wd-product-stock {
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--gb-font-body);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 18px;
	color: var(--gb-body);
}

/* Exactly one stock indicator: the green dot. Woodmart draws a checkmark
   glyph on the same ::before from a part stylesheet that is injected after
   this file, so content/font are forced here, and its icon-font variants are
   blanked out. */
.wd-product .wd-product-stock::before {
	flex: 0 0 auto;
	width: 8px !important;
	height: 8px !important;
	margin: 0 !important;
	border-radius: 999px;
	background-color: var(--gb-instock) !important;
	content: "" !important;
	font-family: inherit !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

.wd-product .wd-product-stock::after {
	content: none !important;
}

/* and no second stock badge over the thumbnail */
.wd-product .product-element-top .wd-product-stock,
.wd-product .product-element-top .stock {
	display: none !important;
}

.wd-product .wd-product-stock.out-of-stock,
.wd-product .wd-product-stock.available-on-backorder {
	color: var(--gb-body);
}

.wd-product .wd-product-stock.out-of-stock::before,
.wd-product .wd-product-stock.available-on-backorder::before {
	background-color: var(--gb-soon) !important;
}

.wd-product .wrap-price,
.wd-product.wd-hover-fw-button .wrap-price {
	order: 4;
	justify-content: flex-start;
	gap: 8px;
	margin: 0;
	min-height: 24px;
}

.wd-product .wrap-price .price {
	font-family: var(--gb-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--gb-title);
	line-height: 24px;
}

.wd-product .wrap-price .price del {
	font-family: var(--gb-font-head);
	font-size: 13px;
	font-weight: 500;
	color: var(--gb-muted);
	opacity: 1;
}

.wd-product .wrap-price .price ins {
	text-decoration: none;
	color: var(--gb-sale);
}

.wd-product .wrap-price .price ins .amount {
	color: var(--gb-sale);
}

/* Add-to-cart button.
   Woodmart paints this button from a part stylesheet that is injected after
   this file, so set its own custom properties instead of fighting it. */
.wd-products .wd-product,
.wd-product.product-grid-item {
	--btn-accented-bgcolor: var(--gb-tint);
	--btn-accented-color: var(--gb-primary);
	--btn-accented-bgcolor-hover: var(--gb-primary);
	--btn-accented-color-hover: #ffffff;
	--btn-accented-brd-radius: var(--gb-r-btn);
	--btn-accented-box-shadow: none;
	--btn-accented-box-shadow-hover: none;
	--btn-accented-box-shadow-active: none;
	--btn-accented-transform: none;
	--btn-accented-font-weight: 600;
	--btn-accented-font-family: var(--gb-font-head);
	--btn-height: 44px;
}

.wd-product .wd-add-btn {
	order: 5;
	width: 100%;
	margin-top: auto;
	padding-top: 2px;
}

.wd-product.wd-hover-fw-button .wd-add-btn > a,
.wd-product .wd-add-btn > a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	border-radius: var(--gb-r-btn);
	background-color: var(--gb-tint);
	color: var(--gb-primary);
	box-shadow: none;
	font-family: var(--gb-font-head);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.wd-product.wd-hover-fw-button .wd-add-btn > a:hover,
.wd-product .wd-add-btn > a.button:hover {
	background-color: var(--gb-primary);
	color: #ffffff;
	box-shadow: none;
}

.wd-product.wd-hover-fw-button .wd-add-btn-replace .add-to-cart-loop {
	--btn-height: 44px;
}

.wd-product .wd-add-btn .add-to-cart-loop span {
	padding: 0 12px;
	font-size: 14px;
	line-height: 44px;
}

/* the sliding cart glyph is not part of the approved design */
.wd-product .wd-add-btn-replace .add-to-cart-loop::before {
	display: none !important;
}

.wd-product .wd-add-btn-replace .add-to-cart-loop:hover span {
	transform: none;
	opacity: 1;
}

/* Sale badge. Some products also carry a merchandising attribute label
   ("Kampanje"), so the labels stack under each other in the same shape. */
.wd-product .product-labels {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	inset-inline-start: 12px;
	top: 12px;
	z-index: 3;
	max-width: calc(100% - 24px);
}

.wd-product .product-labels .product-label {
	min-width: 0;
	min-height: 0;
	padding: 4px 8px;
	border-radius: 6px;
	font-family: var(--gb-font-head);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}

.wd-product .product-labels .product-label.onsale {
	background-color: var(--gb-sale) !important;
	color: #ffffff !important;
}

.wd-product .product-labels .product-label.out-of-stock {
	background-color: var(--gb-soon) !important;
	color: #ffffff !important;
}

.wd-product .product-labels .product-label.attribute-label {
	background-color: var(--gb-navy) !important;
	color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   5. Homepage sections
   ---------------------------------------------------------------------- */
.gb-page {
	font-family: var(--gb-font-body);
}

.gb-page .elementor-section.elementor-section-full_width > .elementor-container {
	max-width: 100%;
}

.gb-page .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

/* shared bits */
.gb-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.gb-sechead__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gb-sechead h2 {
	margin: 0;
	font-family: var(--gb-font-head);
	font-size: 28px;
	line-height: 1.2;
	color: var(--gb-title);
}

.gb-sechead__sub {
	font-size: 14px;
	color: var(--gb-muted);
}

.gb-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--gb-primary);
	white-space: nowrap;
}

.gb-arrow svg {
	flex: 0 0 auto;
}

.gb-eyebrow {
	font-family: var(--gb-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.gb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--gb-r-btn);
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.gb-btn--white {
	background-color: #ffffff;
	color: var(--gb-title);
}

.gb-btn--white:hover {
	background-color: var(--gb-tint);
	color: var(--gb-title);
}

.gb-btn--ghost {
	background-color: transparent;
	border: 1.5px solid rgba(255, 255, 255, .55);
	color: #ffffff;
}

.gb-btn--ghost:hover {
	border-color: #ffffff;
	color: #ffffff;
}

.gb-btn--primary {
	background-color: var(--gb-primary);
	color: #ffffff;
}

.gb-btn--primary:hover {
	background-color: var(--gb-primary-dark);
	color: #ffffff;
}

/* 5a. Hero */
.gb-s-hero {
	padding-top: 28px;
}

.gb-hero {
	display: grid;
	grid-template-columns: minmax(0, 860fr) minmax(0, 420fr);
	gap: var(--gb-gutter);
}

.gb-hero__main {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 470px;
	padding: 0 56px;
	border-radius: 18px;
	background-color: var(--gb-red);
	color: #ffffff;
	overflow: hidden;
}

.gb-hero img.gb-hero__art {
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	width: 560px;
	height: 100%;
	object-fit: cover;
	object-position: 82% 50%;
}

/* The hero copy sits over the left edge of the art from 769px up, so the art
   is veiled back into the card's red there. Card colour rather than a dark
   scrim, because the hero is a solid brand-red panel, not a photo. */
@media (min-width: 769px) {
	.gb-hero__main::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, var(--gb-red) 26%, rgba(230, 0, 18, .88) 42%, rgba(230, 0, 18, 0) 62%);
		content: "";
		pointer-events: none;
	}
}

.gb-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 360px;
}

.gb-hero__body .gb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffd9d9;
}

.gb-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background-color: currentColor;
}

.gb-hero h1 {
	margin: 0;
	font-family: var(--gb-font-head);
	font-size: 50px;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.01em;
	color: #ffffff;
}

.gb-hero__lead {
	margin: 0;
	max-width: 330px;
	font-size: 16px;
	line-height: 1.55;
	color: #ffe8e8;
}

.gb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

.gb-hero__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--gb-gutter);
}

.gb-hero__deck {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 225px;
	padding: 24px 26px;
	border-radius: 18px;
	background-color: #0f1117;
	color: #ffffff;
	overflow: hidden;
}

/* Text on an image needs a scrim. Bottom-up so the copy, which always sits at
   the bottom of these cards, lands on the darkest part: white and #bfd4ff both
   clear 13:1 against it. */
.gb-hero__deck::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 12, 24, .85) 0%, rgba(10, 12, 24, .45) 45%, rgba(10, 12, 24, 0) 75%);
	content: "";
	pointer-events: none;
}

.gb-hero .gb-hero__deck img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.gb-hero__deck > div {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gb-hero__deck .gb-eyebrow {
	color: #bfd4ff;
	font-weight: 600;
}

.gb-hero__deck h2 {
	margin: 0;
	font-size: 24px;
	color: #ffffff;
}

.gb-hero__deck span:last-child {
	font-size: 14px;
	color: #e7eaf5;
}

.gb-hero__deals {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-height: 225px;
	padding: 26px 28px;
	border-radius: 18px;
	background-color: var(--gb-primary);
	color: #ffffff;
}

.gb-hero__deals .gb-eyebrow {
	color: #bfd4ff;
}

.gb-hero__deals h2 {
	margin: 0;
	font-size: 26px;
	line-height: 1.15;
	color: #ffffff;
}

.gb-hero__deals p {
	margin: 0;
	font-size: 14px;
	color: #dbe7ff;
}

.gb-hero__deals .gb-arrow {
	margin-top: 4px;
	color: #ffffff;
}

/* 5b. Category tiles */
.gb-s-cats,
.gb-s-row,
.gb-s-deals,
.gb-s-trust,
.gb-s-brands,
.gb-s-seo,
.gb-s-pay {
	padding-top: 56px;
}

.gb-s-brands,
.gb-s-seo {
	padding-top: 48px;
}

.gb-s-pay {
	padding-top: 40px;
}

.gb-s-cats > .elementor-container > .elementor-column > .elementor-widget-wrap,
.gb-s-row > .elementor-container > .elementor-column > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.gb-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gb-gutter);
}

.gb-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 180px;
	padding-inline-start: 28px;
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-r-card);
	background-color: #ffffff;
	color: var(--gb-title);
	overflow: hidden;
	transition: box-shadow .25s ease;
}

.gb-cat:hover {
	box-shadow: 0 8px 24px rgba(20, 24, 40, .10);
	color: var(--gb-title);
}

.gb-cat__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gb-cat__name {
	font-family: var(--gb-font-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.gb-cat__meta {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.4;
	color: var(--gb-muted);
}

.gb-cat .gb-arrow {
	margin-top: 6px;
	font-size: 14px;
}

.gb-cats .gb-cat img {
	flex: 0 0 auto;
	width: 136px;
	height: 136px;
	margin-inline-end: 22px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* 5c. Deals band */
.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	align-content: start;
	gap: 24px var(--gb-gutter);
	padding: 40px;
	border-radius: var(--gb-r-block);
	background-color: var(--gb-navy);
}

/* Elementor leaves widgets at content height; the outlet tile has to match the
   product cards next to it. */
.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element,
.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element > .elementor-widget-container {
	align-self: stretch;
	height: 100%;
}

.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(1) {
	grid-column: 1 / -1;
}

.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(2) {
	grid-column: span 3;
}

.gb-s-deals .gb-sechead h2,
.gb-s-deals .gb-arrow {
	color: #ffffff;
}

.gb-s-deals .gb-eyebrow {
	color: #bfd4ff;
	font-weight: 600;
}

.gb-s-deals .wd-product > .product-wrapper {
	border-color: transparent;
}

.gb-outlet {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	height: 100%;
	padding: 28px;
	border-radius: var(--gb-r-card);
	background-color: var(--gb-primary);
	color: #ffffff;
}

.gb-outlet:hover {
	color: #ffffff;
	background-color: var(--gb-primary-dark);
}

.gb-outlet .gb-eyebrow {
	color: #bfd4ff;
}

.gb-outlet__title {
	font-family: var(--gb-font-head);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.gb-outlet__sub {
	font-size: 14px;
	color: #dbe7ff;
}

.gb-outlet .gb-arrow {
	margin-top: 6px;
	color: #ffffff;
}

/* 5d. Trust band */
.gb-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gb-gutter);
}

.gb-trust__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	border-radius: var(--gb-r-card);
	background-color: var(--gb-surface);
}

.gb-trust__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background-color: #ffffff;
}

.gb-trust__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.gb-trust .gb-trust__text h3 {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
}

.gb-trust__text span {
	font-size: 14px;
	color: var(--gb-body);
}

/* 5e. Brand pills */
.gb-brands {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.gb-brands__label {
	margin-inline-end: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gb-muted);
}

.gb-pill {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--gb-line);
	border-radius: 8px;
	background-color: #ffffff;
	color: var(--gb-title);
	font-family: var(--gb-font-body);
	font-size: 12.5px;
	font-weight: 600;
}

a.gb-pill:hover {
	border-color: var(--gb-primary);
	color: var(--gb-primary);
}

.gb-brands__all {
	margin-inline-start: 4px;
	font-size: 14px;
}

/* 5f. SEO block */
.gb-seo {
	display: flex;
	gap: 48px;
	padding: 40px 44px;
	border-radius: var(--gb-r-block);
	background-color: var(--gb-surface);
}

.gb-seo__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.gb-seo__main h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
}

.gb-seo__main p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--gb-body);
}

.gb-seo__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.gb-seo__faq {
	display: flex;
	flex: 0 0 440px;
	flex-direction: column;
	gap: 10px;
	width: 440px;
}

.gb-seo__faq h2 {
	margin: 0 0 4px;
	font-size: 18px;
}

.gb-seo__faq details {
	padding: 14px 16px;
	border-radius: 12px;
	background-color: #ffffff;
}

.gb-seo__faq summary {
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--gb-title);
	cursor: pointer;
	list-style: none;
}

.gb-seo__faq summary::-webkit-details-marker {
	display: none;
}

.gb-seo__faq summary::after {
	float: inline-end;
	margin-inline-start: 10px;
	color: var(--gb-muted);
	content: "+";
}

.gb-seo__faq details[open] summary::after {
	content: "\2013";
}

.gb-seo__faq details p {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gb-body);
}

/* -------------------------------------------------------------------------
   6. Prefooter payment strip + footer
   ---------------------------------------------------------------------- */
.wd-prefooter {
	padding: 0;
	background-color: #ffffff;
}

/* Payment and shipping band. One block, used by the Woodmart prefooter so it
   appears on every page including the single product page. Logos are
   normalised to a common optical height rather than a common box height,
   because their artwork has very different padding. */
.gb-paystrip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px 32px;
	margin-top: 40px;
	padding: 22px 32px;
	border: 0;
	border-radius: 16px;
	background-color: var(--gb-surface);
}

.gb-paystrip__group {
	display: flex;
	align-items: center;
	gap: 24px;
}

.gb-paystrip__label {
	flex: 0 0 auto;
	font-family: var(--gb-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gb-muted);
}

.gb-paystrip__logos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.gb-paystrip .gb-paystrip__logos img {
	display: block;
	width: auto;
	height: 22px;
}

.gb-paystrip .gb-paystrip__logos img.gb-pay-klarna {
	height: 20px;
}

.gb-paystrip .gb-paystrip__logos img.gb-pay-cards {
	height: 26px;
}

.gb-paystrip .gb-paystrip__logos img.gb-pay-posten {
	height: 26px;
}

.gb-paystrip .gb-paystrip__logos img.gb-pay-postnord {
	height: 24px;
	border-radius: 4px;
}

.gb-paystrip__postnord {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--gb-font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--gb-title);
}

/* Tablet: the two groups become two left-aligned rows. */
@media (min-width: 769px) and (max-width: 1024px) {
	.gb-paystrip {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px 24px;
	}
}

/* Footer */
.wd-footer.footer-container {
	background-color: var(--gb-navy);
	color: #c7cbe0;
}

.wd-footer .main-footer {
	padding-top: 56px;
	padding-bottom: 0;
}

.gb-footer {
	display: flex;
	flex-direction: column;
	gap: 40px;
	color: #c7cbe0;
}

.gb-footer a {
	color: #c7cbe0;
	font-size: 14px;
}

.gb-footer a:hover {
	color: #ffffff;
}

.gb-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
	gap: 32px;
}

.gb-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gb-footer__col h3 {
	margin: 0 0 4px;
	font-family: var(--gb-font-head);
	font-size: 14px;
	color: #ffffff;
}

.gb-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gb-footer__word {
	font-family: var(--gb-font-head);
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
}

.gb-footer__word i {
	font-style: normal;
	color: #7fb0ff;
}

.gb-footer__blurb {
	max-width: 300px;
	font-size: 14px;
	line-height: 1.6;
}

.gb-footer__org {
	font-size: 13px;
	color: #9aa0bd;
}

.gb-footer__nl {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gb-footer__nl p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.gb-footer__nl form {
	display: flex;
	gap: 8px;
}

.gb-footer__nl input[type="email"] {
	flex-grow: 1;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--gb-r-btn);
	background-color: rgba(255, 255, 255, .06);
	font-family: var(--gb-font-body);
	font-size: 14px;
	color: #ffffff;
}

.gb-footer__nl input[type="email"]::placeholder {
	color: #9aa0bd;
}

.gb-footer__nl button {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--gb-r-btn);
	background-color: var(--gb-primary);
	color: #ffffff;
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.gb-footer__nl button:hover {
	background-color: var(--gb-primary-dark);
}

.gb-footer__nl button[disabled] {
	opacity: .6;
	cursor: default;
}

.gb-nl-msg {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #c7cbe0;
}

.gb-nl-msg:empty {
	display: none;
}

.gb-nl-msg.is-ok {
	color: #8fe0ad;
}

.gb-nl-msg.is-err {
	color: #ffb4ad;
}

.gb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* copyright row */
.wd-footer .wd-copyrights {
	margin-top: 40px;
	padding-block: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.wd-footer .wd-copyrights,
.wd-footer .wd-copyrights p {
	font-size: 13px;
	color: #9aa0bd;
}

.wd-footer .wd-copyrights p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   7. Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.gb-hero {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}

	.gb-hero__main {
		padding: 0 36px;
	}

	.gb-hero h1 {
		font-size: 40px;
	}

	.gb-hero img.gb-hero__art {
		width: 45%;
	}

	.gb-seo {
		gap: 32px;
	}

	.gb-seo__faq {
		flex-basis: 360px;
		width: 360px;
	}

	.gb-cats .gb-cat img {
		width: 110px;
		height: 110px;
		margin-inline-end: 16px;
	}
}

@media (max-width: 1024px) {
	.gb-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-hero__side {
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gb-hero__main {
		min-height: 420px;
	}

	.gb-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gb-seo {
		flex-direction: column;
	}

	.gb-seo__faq {
		flex-basis: auto;
		width: 100%;
	}

	.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 28px;
	}

	.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(2) {
		grid-column: 1 / -1;
	}

	.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element:nth-child(3) {
		grid-column: 1 / -1;
	}

	.gb-outlet {
		padding: 22px;
	}
}

@media (max-width: 991px) {
	.gb-trust {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	:root {
		--gb-gutter: 12px;
	}

	/* hero */
	.gb-s-hero {
		padding-top: 16px;
	}

	/* The art owns the top 220px and the copy starts below it, so nothing ever
	   sits on top of the Switch 2 wordmark. The card grows to fit its text
	   instead of being pinned to a fixed height. */
	.gb-hero__main {
		justify-content: flex-end;
		min-height: 0;
		padding: 236px 22px 22px;
		border-radius: 16px;
	}

	/* Right-anchored crop showing the console, dock and Joy-Cons. The source
	   art is only 700x350 and its "NINTENDO SWITCH 2" wordmark sits in the
	   left half, so a full-width 220px box cannot crop past it however far
	   object-position is pushed. Narrowing the image to 80% and anchoring it
	   right does crop it out, and the left edge is masked into the red card
	   so there is no hard seam. */
	.gb-hero img.gb-hero__art {
		inset-inline: auto 0;
		width: 80%;
		height: 220px;
		object-position: 100% 45%;
		-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 26%);
		mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 26%);
	}

	/* soften the seam where the art meets the red card */
	.gb-hero__main::before {
		position: absolute;
		inset-inline: 0;
		top: 140px;
		height: 82px;
		background: linear-gradient(to bottom, rgba(230, 0, 18, 0), var(--gb-red) 92%);
		content: "";
	}

	.gb-hero__body {
		gap: 12px;
		max-width: none;
	}

	.gb-hero h1 {
		font-size: 32px;
		line-height: 1.08;
	}

	.gb-hero__lead {
		max-width: none;
		font-size: 14px;
		line-height: 1.5;
	}

	.gb-hero__actions .gb-btn {
		height: 46px;
		padding: 0 18px;
		font-size: 14px;
	}

	.gb-hero__actions .gb-btn--ghost {
		display: none;
	}

	.gb-hero__side {
		gap: 12px;
	}

	.gb-hero__deck,
	.gb-hero__deals {
		justify-content: flex-end;
		min-height: 150px;
		gap: 4px;
		padding: 14px;
		border-radius: 14px;
	}

	.gb-hide-sm,
	.gb-hero__deck .gb-eyebrow {
		display: none;
	}

	.gb-hero__deck h2 {
		font-size: 16px;
	}

	.gb-hero__deck span:last-child {
		font-size: 12px;
	}

	.gb-hero__deals h2 {
		font-size: 16px;
		line-height: 1.2;
	}

	.gb-hero__deals p,
	.gb-hero__deals .gb-arrow {
		display: none;
	}

	.gb-eyebrow {
		font-size: 12px;
	}

	/* section rhythm */
	.gb-s-cats,
	.gb-s-row,
	.gb-s-deals,
	.gb-s-trust,
	.gb-s-brands,
	.gb-s-seo,
	.gb-s-pay {
		padding-top: 32px;
	}

	.gb-s-cats > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.gb-s-row > .elementor-container > .elementor-column > .elementor-widget-wrap {
		gap: 14px;
	}

	.gb-sechead h2 {
		font-size: 22px;
	}

	.gb-sechead__sub {
		display: none;
	}

	.gb-arrow {
		font-size: 14px;
	}

	.gb-arrow svg {
		display: none;
	}

	/* category tiles */
	.gb-cats {
		gap: 10px;
	}

	.gb-cat {
		min-height: 124px;
		padding-inline-start: 14px;
	}

	.gb-cat__text {
		gap: 4px;
	}

	.gb-cat__name {
		font-size: 15px;
	}

	.gb-cat__meta {
		font-size: 12px;
	}

	.gb-cat .gb-arrow {
		display: none;
	}

	.gb-cats .gb-cat img {
		width: 70px;
		height: 70px;
		margin-inline-end: 12px;
	}

	/* product rows scroll sideways */
	.gb-s-row .wd-products.wd-grid-g {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		margin-inline-end: -16px;
		padding-inline-end: 16px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.gb-s-row .wd-products.wd-grid-g > .wd-product {
		flex: 0 0 200px;
		width: 200px;
		scroll-snap-align: start;
	}

	.gb-s-row .wd-products.wd-grid-g > .wd-product > .product-wrapper {
		padding: 12px;
		gap: 6px;
	}

	.wd-product .product-element-top,
	.wd-product .product-element-top.wd-quick-shop {
		aspect-ratio: 8 / 7;
	}

	.wd-product .product-element-bottom > .wd-entities-title {
		min-height: 38px;
		font-size: 14px;
	}

	.wd-product .wd-product-brands-links {
		font-size: 11px;
	}

	.wd-product .wrap-price .price {
		font-size: 17px;
	}

	.wd-product .wd-add-btn > a.button,
	.wd-product.wd-hover-fw-button .wd-add-btn > a {
		min-height: 42px;
		font-size: 13px;
	}

	.wd-product .wd-add-btn .add-to-cart-loop span {
		line-height: 42px;
		font-size: 13px;
	}

	/* deals band */
	.gb-s-deals > .elementor-container > .elementor-column > .elementor-widget-wrap {
		gap: 14px 10px;
		padding: 22px 16px;
		border-radius: 16px;
	}

	.gb-outlet {
		padding: 18px;
		gap: 8px;
	}

	.gb-outlet__title {
		font-size: 18px;
	}

	/* trust */
	.gb-trust {
		gap: 10px;
	}

	.gb-trust__item {
		padding: 14px 16px;
		gap: 14px;
	}

	.gb-trust__icon {
		width: 38px;
		height: 38px;
		border-radius: 10px;
	}

	.gb-trust__text h3 {
		font-size: 14px;
	}

	.gb-trust__text span {
		font-size: 12.5px;
	}

	/* seo */
	.gb-seo {
		gap: 10px;
		padding: 22px 18px;
		border-radius: 16px;
	}

	.gb-seo__main h2 {
		font-size: 19px;
	}

	.gb-seo__main p {
		font-size: 14px;
		line-height: 1.65;
	}

	.gb-seo__faq details {
		padding: 12px 14px;
		border-radius: 10px;
	}

	.gb-seo__faq summary {
		font-size: 14px;
	}

	.gb-seo__faq details p {
		font-size: 13.5px;
	}

	/* pay strip: label above its logos, logos wrap, centred */
	.gb-paystrip {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		margin-top: 24px;
		padding: 18px 16px;
	}

	.gb-paystrip__group {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.gb-paystrip__label {
		text-align: center;
	}

	.gb-paystrip__logos {
		justify-content: center;
		gap: 16px;
	}

	/* footer */
	.wd-footer .main-footer {
		padding-top: 32px;
	}

	.gb-footer {
		gap: 22px;
	}

	.gb-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.gb-footer__brand,
	.gb-footer__nl {
		grid-column: 1 / -1;
	}

	.gb-footer__word {
		font-size: 20px;
	}

	.gb-footer__col h3 {
		font-size: 13px;
	}

	.wd-footer .wd-copyrights {
		margin-top: 22px;
	}

	.whb-top-bar .gb-usps {
		gap: 14px;
		font-size: 12px;
	}
}

/* -------------------------------------------------------------------------
   8. Merker page (/merker/)
   ---------------------------------------------------------------------- */
.gb-s-brandspage {
	padding-top: 32px;
}

.gb-s-brandspage > .elementor-container > .elementor-column > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.gb-s-brandspage h1 {
	margin: 0;
	font-family: var(--gb-font-head);
	font-size: 28px;
	line-height: 1.2;
	color: var(--gb-title);
}

.gb-brandspage__lead {
	margin: 10px 0 0;
	max-width: 640px;
	font-family: var(--gb-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--gb-body);
}

.gb-s-brandspage .wd-brand-item {
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-r-card);
	background-color: #ffffff;
	transition: box-shadow .25s ease, border-color .25s ease;
}

.gb-s-brandspage .wd-brand-item:hover {
	border-color: var(--gb-primary);
	box-shadow: 0 8px 24px rgba(20, 24, 40, .10);
}

.gb-s-brandspage .wd-brand-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 14px 16px;
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--gb-title);
	text-align: center;
}

.gb-s-brandspage .wd-brand-item a:hover {
	color: var(--gb-primary);
}

@media (max-width: 768px) {
	.gb-s-brandspage {
		padding-top: 18px;
	}

	.gb-s-brandspage h1 {
		font-size: 22px;
	}

	.gb-s-brandspage .wd-brand-item a {
		min-height: 56px;
		font-size: 14px;
	}
}

/* -------------------------------------------------------------------------
   Delivery card

   Printed by gb_delivery_line_html(): under the stock line in the buy area and
   again, one line and without the tooltip, above the side cart's checkout
   buttons. The date itself is written by the inline script, which is why the
   tooltip button is a sibling of the date span rather than inside it.
   ---------------------------------------------------------------------- */
.gb-deliv {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.gb-deliv__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background-color: var(--gb-tint);
	color: var(--gb-primary);
}

.gb-deliv__line {
	position: relative;
	display: block;
	margin: 0;
	font-family: var(--gb-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gb-title);
}

.gb-deliv__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-inline-start: 4px;
	vertical-align: -4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gb-muted);
	cursor: pointer;
	line-height: 0;
}

.gb-deliv__info:hover,
.gb-deliv__info:focus-visible {
	color: var(--gb-title);
}

.gb-deliv__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	z-index: 30;
	box-sizing: border-box;
	width: 220px;
	padding: 10px 12px;
	border-radius: 8px;
	background-color: var(--gb-navy);
	color: #ffffff;
	font-family: var(--gb-font-body);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	opacity: 0;
	visibility: hidden;
	transition: opacity 120ms ease;
	pointer-events: none;
}

.gb-deliv__tip::after {
	position: absolute;
	top: 100%;
	left: 22px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: var(--gb-navy);
	content: "";
}

.gb-deliv__info:hover + .gb-deliv__tip,
.gb-deliv__info:focus-visible + .gb-deliv__tip,
.gb-deliv__line.is-on .gb-deliv__tip {
	opacity: 1;
	visibility: visible;
}

/* the side cart line: icon and date, nothing else */
.gb-deliv--compact {
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.gb-deliv--compact .gb-deliv__icon {
	flex-basis: 28px;
	width: 28px;
	height: 28px;
}

.gb-deliv--compact .gb-deliv__icon svg {
	width: 15px;
	height: 15px;
}

.gb-deliv--compact .gb-deliv__line {
	font-size: 13.5px;
}

@media (max-width: 480px) {
	.gb-deliv__tip {
		width: min(220px, calc(100vw - 80px));
	}
}

/* -------------------------------------------------------------------------
   "Ofte kjøpt sammen" (the FBT plugin)

   The block keeps its own markup, its own place on the page and all of its
   logic. Only its controls are brought into the site's UI: the plugin's own
   stylesheet still draws the layout.
   ---------------------------------------------------------------------- */
/* The plugin's Norwegian translation prints the heading in Title Case. The
   wording is the same, only the casing differs, so it is redrawn here rather
   than reaching into the plugin's .mo file. */
.fbt-container .fbt-title {
	font-family: var(--gb-font-head);
	font-size: 0;
	font-weight: 600;
	line-height: 1.25;
	color: var(--gb-title);
	text-transform: none;
}

.fbt-container .fbt-title::before {
	font-size: 22px;
	content: "Ofte kjøpt sammen";
}

.fbt-container .fbt-product-image,
.fbt-container .fbt-product-image img {
	border-radius: var(--gb-r-btn);
}

.fbt-container .fbt-product-image {
	background-color: var(--gb-surface);
}

.fbt-container .fbt-product-image img {
	mix-blend-mode: multiply;
}

.fbt-container .fbt-product-title,
.fbt-container .fbt-product-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--gb-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gb-title);
}

.fbt-container .fbt-product-price,
.fbt-container .fbt-item-price,
.fbt-container .fbt-total-label,
.fbt-container .fbt-product-price .amount,
.fbt-container .fbt-item-price .amount,
.fbt-container .fbt-total-label .amount {
	font-family: var(--gb-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--gb-title);
}

.fbt-container .fbt-product-price del,
.fbt-container .fbt-product-price del .amount {
	font-size: 14px;
	font-weight: 500;
	color: var(--gb-muted);
}

.fbt-container .fbt-product-price ins,
.fbt-container .fbt-product-price ins .amount {
	text-decoration: none;
	color: var(--gb-sale);
}

/* the stock chip becomes the same green dot line as everywhere else */
.fbt-container .fbt-stock-info p.stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font-family: var(--gb-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--gb-title) !important;
}

.fbt-container .fbt-stock-info p.stock::before {
	flex: 0 0 auto;
	width: 8px !important;
	height: 8px !important;
	margin: 0 !important;
	border-radius: 999px;
	background-color: var(--gb-instock) !important;
	content: "" !important;
	font-family: inherit !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

.fbt-container .fbt-stock-info p.stock::after {
	content: none !important;
}

/* the pale chip and its checkmark live on the inner span */
.fbt-container .fbt-stock-info p.stock > span {
	display: inline;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font: inherit !important;
	color: inherit !important;
}

.fbt-container .fbt-stock-info p.stock > span::before,
.fbt-container .fbt-stock-info p.stock > span::after {
	display: none !important;
	content: none !important;
}

.fbt-container .fbt-stock-info p.stock.out-of-stock::before,
.fbt-container .fbt-stock-info p.stock.available-on-backorder::before {
	background-color: var(--gb-soon) !important;
}

/* checkboxes */
.fbt-container .fbt-selected-item input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 1.5px solid #dfe2ec;
	border-radius: 6px;
	background-color: #ffffff;
	cursor: pointer;
	vertical-align: middle;
}

.fbt-container .fbt-selected-item input[type="checkbox"]:checked {
	border-color: var(--gb-primary);
	background-color: var(--gb-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
}

.fbt-container .fbt-selected-item input[type="checkbox"]:disabled {
	cursor: default;
	opacity: .6;
}

/* the add-all button */
.fbt-container .fbt-add-selected,
.fbt-container button.fbt-add-selected,
.woocommerce .fbt-container button.fbt-add-selected {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border: 0 !important;
	border-radius: var(--gb-r-btn) !important;
	background-color: var(--gb-primary) !important;
	color: #ffffff !important;
	box-shadow: none;
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce .fbt-container button.fbt-add-selected:hover {
	background-color: var(--gb-primary-dark) !important;
	color: #ffffff !important;
}

.woocommerce .fbt-container button.fbt-add-selected[disabled] {
	background-color: #b9c3d6 !important;
	cursor: not-allowed;
}

/* anything else the block renders as a button is the ghost style */
.woocommerce .fbt-container .button:not(.fbt-add-selected) {
	min-height: 48px;
	border: 1.5px solid #dfe2ec !important;
	border-radius: var(--gb-r-btn) !important;
	background-color: #ffffff !important;
	color: var(--gb-title) !important;
	box-shadow: none;
	font-family: var(--gb-font-head);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
}