/*
Theme Name: Frost Child
Theme URI: https://dev.smartboutique.is/
Description: Child theme for Frost — holds every site-specific customization (CSS, custom JS build, the footer pattern, and the search template) so Frost itself can be safely updated without losing any of it. See the parent theme (Frost, by WP Engine) for the base design this builds on.
Author: Smart Boutique
Template: frost
Version: 1.0.39
Text Domain: frost-child
*/

/* This file is a full snapshot of the site's customized style.css at the
   point the child theme was created (2026-09-18), not a diff against
   vendor Frost — there was no clean pristine copy of Frost's own style.css
   available to diff against (many months of direct edits preceded this
   session), so splitting "vendor rules" from "our rules" line-by-line
   wasn't reliably possible. This means some rules below (particularly
   early in the file, under "Defaults") may duplicate rules Frost's own
   style.css already provides — harmless, since this file loads *after*
   the parent's and wins any tie, but worth knowing: a future Frost update
   that improves one of ITS OWN base rules (say, its default form styling)
   won't visibly change anything here unless the matching rule below is
   also updated by hand, since this frozen copy will keep shadowing it.
   Everything from here down was originally frost/style.css. */

/* Defaults
---------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Global horizontal-overflow guard (2026-09-21 — "cart goes out of frame on
   the right, whole page scrolls sideways" on mobile). Traced to WooCommerce
   Blocks' own Mini Cart drawer CSS (vendor, wc-block-library-style.css, not
   this theme's own code): the drawer's closed/resting state is
   `position:fixed; inset-inline-start:100%; width:var(--drawer-width)`
   (480px by default) with no transform offsetting it — a completely
   standard "slide in from off-screen" drawer technique, and per the CSS
   Overflow spec, position:fixed boxes shouldn't contribute to the
   document's scrollable area at all regardless of where they sit. iOS
   Safari has a long-documented quirk where it does count them anyway,
   which is what actually produced the bug here (confirmed by reading the
   vendor CSS directly, not guessed — every other explanation, including the
   header row itself, checked out fine). Rather than patching around this
   one element (a future modal/overlay built the same way would trip the
   same WebKit quirk), clip horizontal overflow at the document root — the
   standard, low-risk fix for this whole bug class. */
/* 2026-09-24: `clip`, not `hidden`. overflow-x:hidden forces overflow-y to
   compute to auto, turning <body> into its own (non-scrolling) scroll
   container — which silently broke the sticky header, since sticky
   positions against the nearest scroll container. `clip` cuts off the
   horizontal overflow the same way without creating a scroll container.
   `hidden` stays first as a fallback for browsers without `clip`
   (pre-Safari 16). */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

mark {
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
	background-position: 0 85%;
	background-repeat: repeat-x;
	background-size: 100% 15%;
}

/* -- Forms -- */

input,
select,
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--body);
	padding: 10px 20px;
	width: 100%;
}

/* Native <select> options render on a single line, so the paragraph
   line-height above (1.75) misaligns the selected text in Chromium
   browsers. Selects need normal line-height like buttons/inputs of
   type=button do. */
select {
	line-height: normal;
}

input:focus,
textarea:focus {
	background-color: var(--wp--preset--color--neutral);
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

/* Checkbox/radio controls (e.g. WooCommerce Blocks' radio-control
   component) are small native controls, not text fields: the
   background/border/padding meant for text inputs above stretches
   them into oversized boxes and can cover their own label text. */
input[type="checkbox"],
input[type="radio"] {
	background: none;
	border: 0;
	padding: 0;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

::placeholder {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.5;
}

/* Blocks
---------------------------------------- */

/* -- Code -- */

*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--neutral);
	font-size: var(--wp--preset--font-size--small);
	padding: 5px 8px;
}

/* -- Navigation -- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	border: 1px solid currentColor;
	padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--base);
}

/* -- Navigation Submenu -- */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrast);
	border: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: 2px 10px;
}

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */

.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--solid);
}

/* Media Queries
---------------------------------------- */

@media only screen and (max-width: 600px) {

	/* -- Utility -- */

	.is-style-hidden-mobile {
		display: none !important;
	}

}

@media only screen and (max-width: 782px) {

	/* -- Columns -- */

	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}

}

/* -- Single product -- */

/* Site content is full width sitewide (theme.json contentSize/wideSize are
   both 100%), so the single-product template's "constrained" main no longer
   actually constrains anything. Capping it back down here, scoped via
   body.single-product — a reliable class WooCommerce/WP always adds on
   product pages — rather than editing the template (DB-saved wp_template
   44727), matching the same pattern already used for the footer. */
body.single-product main.wp-block-group {
	margin-left: auto;
	margin-right: auto;
	max-width: 1900px;
}

/* -- Single product: mobile layout (2026-09-21, reverted to this same day) --

   Two earlier attempts at this (display:contents + flex order, then a
   from-scratch template restructure using CSS Grid to reconstruct the
   desktop layout independently of a mobile-ordered DOM) both changed
   *desktop* rendering too, in either subtle or not-so-subtle ways —
   reported back both times. The template (`wp_template` 44727) is back to
   its original `wp:columns` structure (two real `wp:column` blocks, 70%/
   40%, in their original order), completely untouched by anything below —
   guaranteeing desktop is byte-for-byte what it always was, not just
   "should look the same." The actual mobile reordering (gallery, title,
   price, add-to-cart, *then* the rest) is done in JavaScript instead, see
   `initMobileProductOrder` in `src/index.js`: real DOM node moves, gated
   to only run below this same 781px breakpoint, so desktop's markup is
   never touched at all, at any point, not even at the CSS level — the
   two previous attempts' entire class of bug (some layout mechanism
   behaving differently than expected once applied) simply doesn't apply
   to plain node moves the way it did to `display:contents` or a
   `display:grid` reinterpretation of the original flex structure.
   Only genuinely mobile-only, non-structural tweaks stay in CSS: */
@media only screen and (max-width: 781px) {
	body.single-product .wc-block-breadcrumbs {
		font-size: 12px;
	}

	body.single-product main.wp-block-group {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* -- Front page -- */

/* Same story as single-product above: full-width sitewide means the front
   page's own "constrained" main no longer constrains anything either.
   Scoped via body.page-id-1030 (the actual front page) rather than
   body.home, since "home" technically means "is_home()" (the blog index),
   which isn't necessarily the same page as the front page once a separate
   Posts page is set — page-id is unambiguous. */
body.page-id-1030 main.wp-block-group {
	margin-left: auto;
	margin-right: auto;
	max-width: 1920px;
}

/* Front-page category rows' carousel prev/next buttons (2026-09-18 — a
   screenshot showed a visible chunky border and near-invisible plain
   buttons). WooCommerce Blocks ships real styling for these
   (background/border-radius/etc.) but wraps it all in `:where()` for zero
   specificity, meaning it loses to literally anything with real
   specificity — including the browser's own default UA button border,
   which is what was actually showing. Restyled with real rules instead: a
   dark translucent circle with a white icon. */
.wc-block-next-previous-buttons__button {
	align-items: center;
	background-color: rgb(0 0 0 / 30%);
	border: none;
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	display: flex;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.wc-block-next-previous-buttons__button:hover:not([aria-disabled="true"]) {
	background-color: var(--wp--preset--color--primary);
}

.wc-block-next-previous-buttons__button[aria-disabled="true"] {
	cursor: not-allowed;
}

.wc-block-next-previous-buttons__button[aria-disabled="true"] .wc-block-next-previous-buttons__icon {
	opacity: 40%;
}

.wc-block-next-previous-buttons__icon {
	height: 14px;
	width: 14px;
}

/* Category product-listing rows under the hero: heading + "see more" link
   side by side, product cards below reuse the exact same .shop-card-*
   classes/CSS as the shop page for full visual consistency — nothing extra
   needed there. */
.frontpage-category-row__header {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--medium);
}

.frontpage-category-row__see-more {
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* These rows only ever hold a handful of curated products (perPage:4 on
   the block), not a browsable catalog — the shop page's open-ended
   auto-fill grid (sized to grow past 10 columns on an ultra-wide monitor)
   would just spread 4 cards thin across a 1920px-wide row. Fixed column
   count instead, stepping down on smaller screens. */
.frontpage-category-row .wc-block-product-template__responsive {
	grid-template-columns: repeat(4, 1fr) !important;
}

@media only screen and (max-width: 900px) {
	.frontpage-category-row .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media only screen and (max-width: 480px) {
	.frontpage-category-row .wc-block-product-template__responsive {
		grid-template-columns: 1fr !important;
	}
}

/* -- Header -- */

/* Sticky goes on the template-part <header> wrapper, not the inner group:
   a sticky element can only stick within its parent, and the inner group's
   parent (that <header>) is exactly the group's own height — zero room to
   stick in, so it scrolled away like a static element. The wrapper's parent
   is .wp-site-blocks (the whole page). top follows the admin bar when
   logged in. */
header.wp-block-template-part:has(> .site-header-sticky) {
	position: -webkit-sticky;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.site-header-sticky {
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	position: relative;
}

/* Search sits between the site title and the nav+cart group, growing to
   fill and center in whatever space is left rather than the narrow fixed
   width it had when it lived inline inside the nav. position:relative
   anchors the suggestions dropdown below (src/index.js:
   initHeaderSearchSuggestions) so it tracks correctly whether the header is
   stuck to the top or not. */
.nav-search {
	flex: 1 1 auto;
	margin: 0 auto;
	max-width: 640px;
	position: relative;
}

/* Its own look, distinct from every other input on the site (which are all
   bordered white boxes per the global input rule near the top of this
   file): flat light gray fill, no border, no accent color at all. */
.nav-search .wp-block-search__inside-wrapper {
	background-color: var(--wp--preset--color--neutral);
	border: none;
}

.nav-search .wp-block-search__input {
	background-color: transparent;
	border: none;
}

.nav-search .wp-block-search__button {
	background-color: transparent;
	border: none;
	padding: 4px;
}

/* Mobile: collapse the search bar to just its icon button, expanding into a
   full-width bar on tap (2026-09-21 feedback — the input was squeezed
   nearly unreadable at mobile widths, since the header row is nowrap and
   the search's own flex-basis has to shrink to make room for the site
   title and nav/cart icons alongside it). This is a well-established
   mobile pattern for exactly this constraint — see e.g. Envato Tuts+'s
   responsive-dropdown-menu guidance and general ecommerce UX writeups on
   search-icon-to-expanding-bar. Genuinely-required JS for the toggle
   itself (initMobileSearchToggle, src/index.js) — a pure-CSS
   :focus-within approach doesn't work here, since the button's native
   behavior is "submit the form," not "reveal the hidden input," and there
   is nothing to click/focus once the input's width is collapsed to 0. */
@media only screen and (max-width: 900px) {
	.nav-search {
		flex: 0 0 auto;
		max-width: none;
	}

	.nav-search .wp-block-search__input {
		display: none;
	}

	.nav-search .wp-block-search__button {
		padding: 8px;
	}

	/* Expanded state: a full-width bar dropping below the search icon's own
	   position, reusing the same position:relative anchor + top:100% pattern
	   already established for the header's own search-suggestions dropdown
	   just below in this file, rather than inventing a second approach. */
	.nav-search.is-expanded {
		background-color: var(--wp--preset--color--base);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
		border-radius: 5px;
		box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
		left: -12px;
		margin-top: 8px;
		padding: 6px;
		position: absolute;
		right: -12px;
		top: 100%;
		z-index: 200;
	}

	.nav-search.is-expanded .wp-block-search__input {
		display: block;
		width: 100%;
	}
}

/* Nav toggle (always the hamburger/overlay style now, see overlayMenu:always
   on the block itself) sits right next to the mini-cart as one visual unit
   on the right, both small icon-style controls. */
.header-nav-cart {
	align-items: center;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--small);
}

/* -- Header: single line + floating on scroll (2026-09-24) --

   One row on desktop: title · Vöruflokkar · search · links · account ·
   cart. Search is a pill like the Vöruflokkar trigger and the shop
   toolbar selects, so the whole header uses one shape.
   Floating: src/index.js (initStickyHeaderScroll) adds .is-scrolled after
   a few px of scroll. The frosted-glass backdrop-filter sits on a ::before
   layer, *not* on the header itself: backdrop-filter on an ancestor
   becomes the containing block for position:fixed descendants, which
   would trap the Mini Cart drawer and the mobile nav overlay (both render
   inside this header) inside the header's own box. */
.site-header-sticky {
	isolation: isolate;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

.site-header-sticky::before {
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.25s ease;
	z-index: -1;
}

.site-header-sticky.is-scrolled {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	padding-bottom: 8px !important;
	padding-top: 8px !important;
}

.site-header-sticky.is-scrolled::before {
	opacity: 1;
}

/* max-width: on wide screens the row stops at the front page's content
   width and centers, instead of spreading the six items across the whole
   monitor. 1860px = the front page's 1920px cap (body.page-id-1030 main)
   minus its post-content's 30px side padding — keep in sync if either
   changes. The bar's background/shadow stays full-bleed; only the items
   are capped. */
.site-header-sticky > .wp-block-group.alignwide {
	align-items: center;
	gap: 28px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1860px;
}

.site-header-sticky .wp-block-site-title {
	flex-shrink: 0;
	margin: 0;
	white-space: nowrap;
}

.site-header-sticky .wp-block-site-title a {
	text-decoration: none;
}

/* Search pill: same height as the Vöruflokkar trigger (~42px). */
.nav-search .wp-block-search__inside-wrapper {
	border-radius: 999px;
	padding: 0 6px 0 18px;
}

.nav-search .wp-block-search__input {
	font-size: var(--wp--preset--font-size--small);
	padding: 9px 0;
}

.nav-search .wp-block-search__button {
	border-radius: 999px;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
	padding: 6px 8px;
}

.nav-search .wp-block-search__button svg {
	fill: currentColor;
}

.nav-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--primary);
}

/* Text links: small type and even spacing, matching the pills' text. */
.header-nav-cart .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	gap: 24px;
}

.header-nav-cart .wp-block-navigation-item__content {
	padding: 4px 0;
}

.header-nav-cart .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* Desktop: side padding matches the shop/search templates' own <main>
   padding (spacing--large), so the logo and cart line up with the product
   grid's edges instead of sitting 30px from the viewport edge. Needs
   !important to beat the block's inline 30px. */
@media only screen and (min-width: 901px) {
	.site-header-sticky {
		padding-left: var(--wp--preset--spacing--large) !important;
		padding-right: var(--wp--preset--spacing--large) !important;
	}

	.header-nav-cart {
		gap: 24px;
	}
}

/* Small laptops/landscape tablets: six items on one line gets tight —
   smaller gaps and padding so the search keeps a usable width. */
@media only screen and (min-width: 901px) and (max-width: 1200px) {
	.site-header-sticky {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.site-header-sticky > .wp-block-group.alignwide {
		gap: 18px;
	}

	.header-nav-cart,
	.header-nav-cart .wp-block-navigation {
		gap: 16px;
	}
}

/* When getwid-megamenu flips into its mobile mode, the Vöruflokkar toggle
   drops to its own full-width row under title/search/hamburger/cart (the
   row is nowrap otherwise, and a phone can't fit a 5th item). */
.site-header-sticky > .wp-block-group.alignwide:has(> .flokkar-menu.is-mobile) {
	flex-wrap: wrap;
	row-gap: 10px;
}

.site-header-sticky .flokkar-menu.is-mobile {
	flex-basis: 100%;
	order: 10;
}

/* Phones/tablets: title on the left, search icon + hamburger + account +
   cart pushed right as one compact group — the desktop 28px gap and the
   collapsed search's gray pill made the icons wrap to a second line.
   The hamburger also loses Frost's boxed border, matching the plain
   account/cart icons next to it. */
@media only screen and (max-width: 900px) {
	.site-header-sticky > .wp-block-group.alignwide {
		column-gap: 8px;
	}

	.site-header-sticky .wp-block-site-title {
		margin-right: auto;
	}

	.nav-search:not(.is-expanded) .wp-block-search__inside-wrapper {
		background-color: transparent;
		padding: 0;
	}

	.site-header-sticky .wp-block-navigation__responsive-container-open {
		border: none;
	}
}

/* -- Header: mobile scaling fix (2026-09-21) --

   Reported as "mobile menu does not scale with phone." Root cause: the nav
   block's own `overlayMenu` attribute had regressed to "never" (comment two
   rules up already documented "always" as the intended state — how/when it
   flipped isn't clear, possibly a stray Site Editor edit while testing the
   Flokkar menu). With overlayMenu:"never", WordPress core never renders a
   hamburger/overlay at all, at any viewport — confirmed via a mobile-UA
   fetch showing zero `.wp-block-navigation__responsive-container-open`
   buttons in the HTML. All 5 links (Forsíða, Verslun, Um okkur, Hafðu
   samband, Blogg) were rendering as plain inline text crammed into the same
   nowrap header row as the site title, search icon, and cart — guaranteed
   overflow on any phone width. Fixed at the source: the header template
   part's block attribute is back to `overlayMenu:"always"`, not a CSS
   workaround (a never-responsive nav has no toggle button in the DOM for
   CSS to target in the first place).
   The two rules below are the accompanying best-practice polish once the
   overlay was reachable again: */

/* Frost's own vendor toggle-button padding (2px, in the parent theme's
   untouched style.css) gives roughly a 28px tap target around the icon —
   under the ~44px minimum both Apple's HIG and Google's Material Design
   guidelines call for on a touch target. Widened here instead of in the
   parent, keeping the vendor file clean per this theme's child/parent
   split. */
.site-header-sticky .wp-block-navigation__responsive-container-open,
.site-header-sticky .wp-block-navigation__responsive-container-close {
	padding: 10px;
}

/* Header side padding (30px) is baked in as an inline style on the block
   itself (needs !important to beat that, regardless of selector
   specificity) — on a narrow phone, 60px of combined left+right padding eats
   a disproportionate share of the viewport (e.g. 16% of a 375px-wide
   screen). Stepped down at the two breakpoints this file already uses
   elsewhere.
   2026-09-21 follow-up: the first pass (16-20px) read as too tight once
   everything else in the row was also compacted the same day — eased back
   up slightly, still well short of the original 30px. */
@media only screen and (max-width: 600px) {
	.site-header-sticky {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media only screen and (max-width: 480px) {
	.site-header-sticky {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Header icon row (hamburger + mini-cart): the sitewide "small" spacing
   preset (`clamp(30px, 4vw, 40px)`, this row's default gap) is generous
   for two adjacent icon buttons, so it's stepped down here — but the first
   pass (6px under 400px) swung too far the other direction and read as
   cramped. Eased up to keep a real gap at every phone width instead of one
   sudden jump right at 400px. */
@media only screen and (max-width: 600px) {
	.header-nav-cart {
		gap: 14px;
	}
}

@media only screen and (max-width: 400px) {
	.header-nav-cart {
		gap: 10px;
	}
}

/* Site title ("logo"): shrunk on phones to free up room in an already-busy
   row (title + search icon + hamburger + cart, all sharing one line) — this
   is the one element in that row that isn't already an icon-sized control,
   so it's the one with real room to give up. */
@media only screen and (max-width: 480px) {
	.wp-block-site-title {
		font-size: 17px;
	}
}

/* Mini Cart drawer width — WooCommerce's own default (480px, a
   `--drawer-width` custom property set inline on :root, see the
   overflow-guard comment near the top of this file) is wider than every
   common phone screen, so even the *open* drawer would run past the right
   edge on a phone if left alone. `min()` keeps it at a normal 480px on
   anything roomy enough for that and shrinks it to fit smaller screens
   automatically — no breakpoint needed, and it stays correct at any device
   width instead of guessing at specific ones. 92vw (not 100vw) leaves a
   sliver of the dimmed page visible at the edge, a standard drawer/modal
   cue that there's a page underneath. `!important` because WooCommerce
   prints its own `--drawer-width` via an inline `<style>` tag in `<head>`,
   which this external stylesheet can't reliably out-order. */
:root {
	--drawer-width: min(480px, 92vw) !important;
}

.search-suggestions {
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	left: 0;
	margin-top: 0.5rem;
	max-height: 70vh;
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: 100%;
	width: max(320px, 100%);
	z-index: 101;
}

.search-suggestions__item {
	align-items: center;
	color: var(--wp--preset--color--contrast);
	display: flex;
	gap: 0.75rem;
	padding: 0.6rem 0.85rem;
	text-decoration: none;
}

.search-suggestions__item:hover,
.search-suggestions__item:focus {
	background-color: var(--wp--preset--color--neutral);
}

.search-suggestions__thumb {
	background-color: var(--wp--preset--color--neutral);
	flex-shrink: 0;
	height: 44px;
	object-fit: cover;
	width: 44px;
}

.search-suggestions__text {
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-suggestions__price {
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.search-suggestions__all {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.6rem 0.85rem;
	text-align: center;
}

.search-suggestions__empty {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.6;
	padding: 0.85rem;
	text-align: center;
}

/* -- Page titles --

   Only the WordPress "Page" post type gets its own title hidden — scoped
   with body.page (the class core adds only for that post type), not a bare
   tag/class selector. An earlier sitewide version of this rule
   (h1.wp-block-post-title with no scope, plus .wp-block-query-title) also
   hid single.html's blog post titles and archive.html's category/tag
   headings, which was never the intent — only each Page's own title was
   meant to disappear. Product pages were never touched by this (different
   body class, single-product), so no separate exception is needed there. */
body.page h1.wp-block-post-title {
	display: none;
}

/* -- WooCommerce -- */

.wp-block-woocommerce-product-meta .wp-block-post-terms {
	font-size: var(--wp--preset--font-size--x-small);
}

/* Quantity stepper (cart, mini-cart, checkout): the number input sits inside
   WooCommerce's own fixed-width (107px), bordered pill alongside the −/+
   buttons. Frost's global text-field padding (10px 20px = 40px just for
   padding) leaves almost no room for the digit itself inside that pill,
   clipping the number. This is a compact control, not a text field. */
.wc-block-components-quantity-selector__input {
	padding: 0;
}

/* Shop page ("Verslun") infinite scroll (src/index.js): numbered pagination
   is set `hidden` via JS once the script confirms it can take over — force
   it with a real rule rather than relying on the native [hidden] UA style,
   since WooCommerce's own CSS sets display:flex on this element at equal
   specificity and would otherwise win by load order. If JS never runs
   (disabled/broken), the attribute is never set and normal pagination shows
   as a working fallback. */
.wp-block-query-pagination[hidden] {
	display: none;
}

.shop-infinite-scroll-sentinel {
	color: var(--wp--preset--color--contrast);
	margin: var(--wp--preset--spacing--large) 0;
	opacity: 0.6;
	text-align: center;
}

/* Shop page ("Verslun"): WooCommerce's store-notices block still renders an
   empty wrapper when there's nothing to show, but WordPress's automatic
   block-gap spacing still puts a full gap on both sides of it — pure dead
   space on every page load with no actual notice. Collapse it entirely
   when empty. (:where() selectors, which is how the automatic gap margin
   is applied, have zero specificity, so a plain rule here safely wins.) */
.wc-block-store-notices:not(:has(.woocommerce-notices-wrapper *)) {
	display: none;
}

h1.wp-block-query-title {
	margin-bottom: 0.5rem;
}

.wc-block-breadcrumbs {
	margin-bottom: 0.5rem;
}

/* Shop page toolbar: search + category dropdown side by side at the top,
   full width. Search's own button was removed (buttonPosition:no-button in
   the block attributes); the dropdown gets Frost's normal input styling for
   free (global input/select rule) but needs sizing to sit level with the
   search field and to not collapse to its content width. The dropdown also
   ships its own "Go" button with an inline onclick fallback — redundant now
   that src/index.js navigates on change, so hide it. */
.wc-block-product-categories__button {
	display: none;
}

/* Shop product grid: WooCommerce already renders this as a CSS grid
   (.wc-block-product-template__responsive), but each column's width is
   `max(150px, N% - gap)` for the configured fixed column count — on a wide
   screen that just means N columns that keep growing, never more of them.
   Now that the page is full width, that looks especially stretched.
   Overriding with a real auto-fill grid instead: card width is capped
   (minmax's first value), and the column count grows or shrinks on its own
   to fit however much space is available — roughly 2 columns on a tablet up
   to ~10 on an ultra-wide monitor, no fixed breakpoints needed. WooCommerce's
   own `.columns-N` rule is two classes, matching specificity to a plain
   one-class override here, so this needs !important to reliably win
   regardless of stylesheet load order — and stays correct even if the
   column count set in the block editor changes later. */
.wc-block-product-template__responsive {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

.shop-toolbar {
	gap: var(--wp--preset--spacing--medium);
	margin-bottom: var(--wp--preset--spacing--medium);
}

.shop-toolbar > * {
	flex: 1 1 0;
	min-width: 0;
}

.shop-toolbar .wp-block-search__inside-wrapper {
	height: 100%;
}

.shop-toolbar .wp-block-search__input {
	height: 100%;
}

.shop-category-dropdown .wc-block-product-categories__dropdown {
	height: 100%;
}

.shop-category-dropdown select {
	height: 100%;
	width: 100%;
}

/* Category dropdown + catalog sorting: styled as the same bordered pill as
   the header's "Vöruflokkar" trigger (.flokkar-menu-item > .gw-mm-item__link)
   instead of Frost's global square black-bordered input box. Native arrow
   replaced with a small caret matching the trigger's dashicon. */
.shop-category-dropdown .wc-block-product-categories__dropdown select,
.wc-block-catalog-sorting select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000'/%3E%3C/svg%3E");
	background-position: right 20px center;
	background-repeat: no-repeat;
	background-size: 8px 5px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	height: auto;
	line-height: normal;
	padding: 12px 44px 12px 20px;
	transition: border-color 0.15s ease;
}

.shop-category-dropdown .wc-block-product-categories__dropdown select:hover,
.shop-category-dropdown .wc-block-product-categories__dropdown select:focus-visible,
.wc-block-catalog-sorting select.orderby:hover,
.wc-block-catalog-sorting select.orderby:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

.shop-category-dropdown .wc-block-product-categories__dropdown {
	height: auto;
}

/* The opened option list ("drawer"): same light border as the pill, slightly
   rounded (8px). The native picker can only be styled via customizable
   <select> (appearance:base-select, Chromium 135+); other browsers skip this
   whole block and keep their OS-native list. base-select adds its own
   ::picker-icon arrow — hidden, the background-image caret above is kept. */
@supports (appearance: base-select) {
	.shop-category-dropdown .wc-block-product-categories__dropdown select,
	.shop-category-dropdown .wc-block-product-categories__dropdown select::picker(select),
	.wc-block-catalog-sorting select.orderby,
	.wc-block-catalog-sorting select.orderby::picker(select) {
		appearance: base-select;
	}

	/* A native select is as wide as its longest option; base-select only as
	   wide as the *selected* one, which shrank both pills. Pin them back to
	   roughly their previous widths (both parents are shrink-to-fit flex
	   items, so width:100% alone does nothing here). */
	.shop-category-dropdown .wc-block-product-categories__dropdown select {
		max-width: 100%;
		width: 500px;
	}

	.wc-block-catalog-sorting select.orderby {
		max-width: 100%;
		width: 300px;
	}

	.shop-category-dropdown .wc-block-product-categories__dropdown select::picker-icon,
	.wc-block-catalog-sorting select.orderby::picker-icon {
		display: none;
	}

	.shop-category-dropdown .wc-block-product-categories__dropdown select::picker(select),
	.wc-block-catalog-sorting select.orderby::picker(select) {
		background: var(--wp--preset--color--base);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		margin-top: 6px;
		max-height: 420px;
		padding: 6px 0;
	}

	.shop-category-dropdown .wc-block-product-categories__dropdown select option,
	.wc-block-catalog-sorting select.orderby option {
		font-size: var(--wp--preset--font-size--small);
		padding: 6px 20px;
	}

	.shop-category-dropdown .wc-block-product-categories__dropdown select option::checkmark,
	.wc-block-catalog-sorting select.orderby option::checkmark {
		display: none;
	}

	.shop-category-dropdown .wc-block-product-categories__dropdown select option:hover,
	.shop-category-dropdown .wc-block-product-categories__dropdown select option:focus-visible,
	.wc-block-catalog-sorting select.orderby option:hover,
	.wc-block-catalog-sorting select.orderby option:focus-visible {
		background: var(--wp--preset--color--neutral);
		outline: none;
	}

	.shop-category-dropdown .wc-block-product-categories__dropdown select option:checked,
	.wc-block-catalog-sorting select.orderby option:checked {
		color: var(--wp--preset--color--primary);
	}
}

@media only screen and (max-width: 600px) {
	.shop-toolbar {
		flex-wrap: wrap;
	}

	.shop-toolbar > * {
		flex-basis: 100%;
	}
}

/* Product grids (Related/Upsell products, shop archive, front-page category
   rows): the <li> cards already stretch to equal height by default
   (CSS Grid's default align-items:stretch on the shop's
   .wc-block-product-template__responsive grid — the carousel case below is
   the one real exception), but their contents are plain block flow, so the
   "Add to cart" button lands wherever the title/price above it happens to
   end instead of a shared baseline. Making the card a flex column and
   pushing the button down with margin-top:auto fixes that without needing
   every title to be one line.
   Fixed 2026-09-18: this used to require `.is-flex-container` on the
   parent, a class that flagged this whole rule as dead code — current
   WooCommerce Blocks doesn't render that class at all (grid mode uses
   `.wc-block-product-template__responsive`, carousel mode uses
   `.wc-block-product-template` plus `.is-product-collection-layout-carousel`
   — neither ever carries `.is-flex-container`) — so equal-height cards with
   a bottom-aligned button/price row have likely never actually worked
   anywhere this template is used, not just the front page. Base selector
   dropped to plain `.wc-block-product-template`, which both layout modes do
   share, so this now actually applies. */
.wc-block-product-template > li.wc-block-product {
	display: flex;
	flex-direction: column;
}

.wc-block-product-template > li.wc-block-product > .wp-block-button {
	margin-top: auto;
}

/* Product Collection blocks set to "Carousel" display (the 3 front-page
   category rows) explicitly configure verticalAlignment:"top" — WordPress
   turns that into a per-block-instance generated class
   (.wp-container-woocommerce-product-template-is-layout-<hash>, a different
   hash per block, unpredictable/not safe to target directly) with
   `align-items:flex-start`, which is what actually caused the uneven card
   heights a screenshot flagged (2026-09-18) — the flex-column fix above
   needs the <li>s to be equal height to begin with for margin-top:auto to
   have anywhere to push into, and flex-start means they never were.
   `!important` here is deliberate: the competing rule is a one-off
   generated class WordPress writes fresh (with a new hash) any time the
   block is re-saved, so there's no stable higher-specificity selector to
   write instead that's guaranteed to keep winning. */
.is-product-collection-layout-carousel {
	align-items: stretch !important;
}

/* Front-page category row carousels: on mobile they were showing 2 products
   per view/slide (2026-09-23). Traced to WooCommerce Blocks' own carousel
   CSS: `.is-product-collection-layout-carousel` is a native CSS scroll-snap
   track (overflow-x:auto + scroll-snap-type:x mandatory, no JS "slides"
   library), and its base rule —
   `.is-product-collection-layout-carousel .wc-block-product{min-width:42.5%}`
   — is what's actually visible below WooCommerce's own first breakpoint;
   everything past that point is `@container carousel (min-width: 600px)`
   and up (container queries sized against the carousel's own rendered
   width, not the viewport — confirmed by reading the plugin's compiled
   CSS directly), each step *lowering* the percentage as the container
   grows so more products fit — so under 600px, 42.5% is genuinely the
   narrowest WooCommerce ever goes, landing on ~2 visible items on a real
   phone. Overridden to 100% so exactly one product fills the carousel per
   swipe. `scroll-padding` (30% each side on the block itself, pairs with
   `scroll-snap-align:center` on each card to center it with slivers of its
   neighbors peeking on both sides — correct for the multi-item view) is
   zeroed out alongside it: with a full-width item, that reserved 30% on
   each side has nothing left to center into and would just misalign the
   snap point. `scroll-snap-align:center` itself needs no change — with
   scroll-padding at 0 and the item exactly as wide as the track, "centered"
   and "flush" are the same position. 600px chosen to exactly match
   WooCommerce's own first container-query breakpoint (rather than this
   theme's other, inconsistent 781px/900px mobile breakpoints) so this only
   ever touches the segment that was actually showing 2 columns, not the
   tablet-width range WooCommerce already deliberately shows more in. */
@media (max-width: 600px) {
	.is-product-collection-layout-carousel {
		scroll-padding: 0;
	}

	.is-product-collection-layout-carousel .wc-block-product {
		min-width: 100%;
		max-width: 100%;
	}
}

/* Desktop carousels: at most 5 cards in view, the rest scroll (2026-09-25).
   WooCommerce's own container-query steps go down to min-width:15% once the
   carousel is ≥1280px wide — 6 cards at the front page's 1860px cap. From
   that same container width, each card is instead exactly one fifth of the
   track minus the 4 × 30px gaps (the carousel's own column-gap), with WC's
   400px max-width lifted so 5 always fill the row. Below 1280px WooCommerce's
   own steps already show ≤5. Extra `ul`/`li` in the selector outranks WC's
   two-class rule regardless of stylesheet order. */
@container carousel (min-width: 1280px) {
	ul.is-product-collection-layout-carousel > li.wc-block-product {
		max-width: none;
		min-width: calc((100% - 4 * 30px) / 5);
	}
}

/* Product cards: current price bold (sale price, or the only price when not
   on sale); the struck-through original stays regular weight. */
.shop-card-actions .wc-block-components-product-price .amount {
	font-weight: 700;
}

.shop-card-actions .wc-block-components-product-price del .amount {
	font-weight: normal;
}

/* Shop page ("Verslun") product cards: boxed card with SKU under the image,
   left-aligned title, and a small round add-to-cart icon button next to the
   price — scoped to shop cards specifically (:has the shop-card-actions row
   added in the archive-product template) so Related/Upsell product grids
   elsewhere are untouched. */
/* 2026-09-25: small 8px corner radius and a soft hover lift (slightly
   darker border + shadow), same card treatment as the villi.nhdev.is
   build of this design system. overflow:hidden keeps the image inside
   the rounded corners. */
li.wc-block-product:has(> .shop-card-actions) {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 8px;
	overflow: hidden;
	padding: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

li.wc-block-product:has(> .shop-card-actions):hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

li.wc-block-product:has(> .shop-card-actions) .wc-block-components-product-image img {
	border-radius: 4px;
}

.shop-card-sku {
	opacity: 0.6;
	margin-bottom: 0.35rem;
}

/* Reserve consistent height for ~2 lines of title regardless of whether a
   given product's title actually wraps, so the price/button row below
   doesn't need a large, uneven margin-top:auto gap to reach the bottom on
   cards with short one-line titles. */
.shop-card-title {
	min-height: 2.8em;
}

.shop-card-actions {
	margin-top: auto;
	padding-top: 0.75rem;
}

.shop-card-add-to-cart.wp-block-button .wp-block-button__link,
.shop-card-add-to-cart.wp-block-button .wp-block-button__link * {
	font-size: 0;
}

.shop-card-add-to-cart.wp-block-button .wp-block-button__link {
	align-items: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1.5 10.5a2 2 0 0 1-2 1.5H9.5a2 2 0 0 1-2-1.5L6 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	width: 44px;
}

/* Round add-to-cart button hover: darker orange (secondary), a slight
   lift and a soft orange glow. */
.shop-card-add-to-cart.wp-block-button .wp-block-button__link:hover,
.shop-card-add-to-cart.wp-block-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	transform: translateY(-2px);
}

/* Site footer: light gray, compact, multi-column — reusing the site's own
   neutral/contrast/primary tokens rather than introducing new ones, per a
   reference layout the site owner provided. A thin gradient line marks the
   top edge, fading in from both sides toward the brand color at center. */
.site-footer {
	position: relative;
}

.site-footer::before {
	background: linear-gradient(
		90deg,
		transparent,
		var(--wp--preset--color--primary),
		transparent
	);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.site-footer a {
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--primary);
	opacity: 1;
}

/* Site content is full width sitewide (theme.json contentSize/wideSize are
   both 100% now), but the footer specifically should stop growing past a
   sensible width and stay centered — .alignwide no longer caps anything on
   its own, so this reintroduces a cap scoped to just the footer. */
.site-footer .alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: 1650px;
}

.site-footer-columns {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium);
	row-gap: var(--wp--preset--spacing--large);
}

.site-footer-column {
	min-width: 140px;
}

.site-footer-heading.site-footer-heading {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin-bottom: 0.75em;
	opacity: 0.6;
	text-transform: uppercase;
}

.site-footer-list {
	line-height: 1.9;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer-list--split {
	column-count: 2;
	column-gap: var(--wp--preset--spacing--medium);
}

.site-footer-placeholder {
	line-height: 1.9;
	opacity: 0.7;
}

.site-footer-bottom {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	margin-top: var(--wp--preset--spacing--medium);
	opacity: 0.7;
	padding-top: var(--wp--preset--spacing--small);
	padding-bottom: var(--wp--preset--spacing--small);
}

@media only screen and (max-width: 600px) {
	.site-footer-list--split {
		column-count: 1;
	}

	.site-footer-bottom {
		flex-wrap: wrap;
	}
}

/* -- Checkout (classic shortcode) --

   Rapyd and Pei's payment gateways only integrate with the classic
   [woocommerce_checkout] shortcode, not WooCommerce Blocks — this page
   (ID 1040) is just a `woocommerce/classic-shortcode` block wrapping it,
   which renders the legacy shortcode output as-is and can't be edited
   visually in the block editor at all. Everything here is plain CSS
   targeting the shortcode's own stable class names/IDs.

   No width cap: site content is full width sitewide (theme.json
   contentSize/wideSize are both 100%), and nothing in WooCommerce's own CSS
   caps this page either — the old width came entirely from Flatsome, now
   inactive. Fixed with a max-width + centering on the classic-shortcode
   block's own wrapper (targeted via its `data-shortcode` attribute, no
   custom className needed).

   Layout: `form.checkout`'s direct children — `#customer_details`,
   `#order_review_heading`, `#order_review` (in that DOM order) — are put on
   a CSS grid via `grid-template-areas`, no wrapper div needed in markup we
   can't edit. `#order_review` itself is set to `display:contents` so ITS
   two children — the totals table and `#payment` — join the same grid as if
   they were direct children too, which is what lets the payment section
   span full width along the bottom, below the two-column area, even though
   in the DOM it's nested two levels deep inside `#order_review`.
   `.col2-set .col-1`/`.col-2` (billing vs. shipping, inside
   `#customer_details`) DO have their own WooCommerce CSS after all —
   `woocommerce-layout.css` (a separate stylesheet from the general
   woocommerce.css checked first, easy to miss) floats them into two 48%
   columns. Overridden here to stack instead: shipping fields are
   empty/hidden unless "ship to a different address" is checked, and the
   "Auka upplýsingar" (order notes) block lives in `.col-2` — floating it
   next to the much longer billing column read as a stray third column;
   stacking puts it directly under billing, both inside the single left-hand
   "details" area. */

body.woocommerce-checkout [data-shortcode="checkout"] {
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
}

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

body.woocommerce-checkout #order_review {
	display: contents;
}

/* Widened the right column (2026-09-18 feedback — shipping option labels
   with embedded prices were wrapping to 2-3 lines in the original 3fr/2fr
   split): 1fr/1fr instead, plus the page cap raised 1200px -> 1300px, and
   column-gap moved off the --wp--preset--spacing--large token onto a fixed
   px value — same reasoning as the cart page's gap fix: that token has both
   a fluid clamp() and a flat px definition sitewide, not worth the
   ambiguity for a single grid gap. */
body.woocommerce-checkout form.checkout {
	align-items: start;
	column-gap: 32px;
	display: grid;
	grid-template-areas:
		"details heading"
		"details review"
		"payment payment";
	grid-template-columns: 1fr 1fr;
}

body.woocommerce-checkout form.checkout #customer_details {
	grid-area: details;
}

body.woocommerce-checkout form.checkout #order_review_heading {
	grid-area: heading;
}

body.woocommerce-checkout form.checkout .woocommerce-checkout-review-order-table {
	grid-area: review;
}

body.woocommerce-checkout form.checkout #payment {
	grid-area: payment;
}

@media only screen and (max-width: 900px) {
	body.woocommerce-checkout form.checkout {
		grid-template-areas:
			"details"
			"heading"
			"review"
			"payment";
		grid-template-columns: 1fr;
	}
}

/* Line heights throughout the form: Frost's global input/textarea
   line-height (1.75, meant for paragraph text — see the Forms section near
   the top of this file) makes every field look unusually tall, and
   WooCommerce's own default form-row label line-height (2) compounds it —
   both read fine for body copy but bloat a compact billing form. Labels are
   a single short line each, so line-height only ever adds dead space above
   and below the text here — taken down to 1 (2026-09-18 feedback: even 1.4
   was still adding up across this many stacked fields). */
body.woocommerce-checkout .woocommerce form .form-row label {
	line-height: 1;
}

body.woocommerce-checkout .woocommerce form .form-row .input-text,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce-additional-fields textarea {
	line-height: 1.4;
}

/* -- Cart page (classic shortcode) --

   Same underlying cause as checkout above (see that section's comment for
   the full explanation): no width cap now that contentSize/wideSize are
   100% sitewide, and nothing else steps in to replace it now that Flatsome
   is inactive.

   Went through two side-by-side (grid) attempts (2026-09-18) chasing what
   looked like a column-gap problem, then a table-width specificity problem
   (WooCommerce ships cart/checkout layout across *three* separate
   stylesheets — woocommerce.css, woocommerce-layout.css, and
   woocommerce-blocktheme.css, the last one easy to miss and the one that
   turned out to have `.woocommerce-page table.shop_table{width:70%}` beating
   the general stylesheet's `width:100%` on specificity). Both fixes were
   real bugs and stayed fixed, but the layout still wasn't landing right —
   dropped the side-by-side idea entirely per feedback and went single
   column instead: items table on top, totals below, both explicitly full
   width of the same centered container so they line up edge to edge, and
   the totals card itself is deliberately compact rather than a big open
   box the width of the whole page. */

body.woocommerce-cart [data-block-name="woocommerce/classic-shortcode"] {
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
}

body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
	min-width: 0;
	width: 100%;
}

body.woocommerce-cart .cart-collaterals {
	margin-top: 32px;
}

/* Real bug, stays fixed regardless of layout: table.shop_table{width:70%}
   in woocommerce-blocktheme.css (two classes) beats the general
   stylesheet's table.shop_table{width:100%} (one class) on specificity, so
   both the items table and the totals breakdown table were rendering at
   70% of their container. Beaten back with one extra selector segment
   rather than !important. */
body.woocommerce-cart [data-block-name="woocommerce/classic-shortcode"] table.shop_table {
	width: 100%;
}

/* Cart items table: same border/radius look WooCommerce already gives it
   (table.shop_table, unchanged), just roomier cell padding — the default
   9px/12px reads cramped at this width. */
body.woocommerce-cart table.shop_table.cart th,
body.woocommerce-cart table.shop_table.cart td {
	padding: 16px;
}

/* 2026-09-25: product rows tightened — 8px vertical padding and a 64px
   thumbnail (was 16px + 88px, ~146px per row). Header row and the
   coupon/update actions row keep the roomier padding above. */
body.woocommerce-cart table.shop_table.cart tr.cart_item td {
	padding-bottom: 8px;
	padding-top: 8px;
}

body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	display: block;
	height: auto;
	width: 64px;
}

/* Quantity +/- stepper, styled like the Mini Cart's own
   .wc-block-components-quantity-selector (thin 30%-contrast border, 4px
   radius, − value +). The buttons are added by initCartQuantityStepper()
   in src/index.js — the classic cart only renders a bare number input. */
body.woocommerce-cart .woocommerce-cart-form .quantity.qty-stepper {
	align-items: stretch;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 4px;
	display: inline-flex;
	height: 36px;
	overflow: hidden;
}

body.woocommerce-cart .woocommerce-cart-form .quantity.qty-stepper .qty {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: none;
	font-size: var(--wp--preset--font-size--small);
	height: 100%;
	line-height: 1;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 40px;
}

body.woocommerce-cart .woocommerce-cart-form .quantity.qty-stepper .qty::-webkit-inner-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity.qty-stepper .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.woocommerce-cart .woocommerce-cart-form .quantity.qty-stepper .qty:focus {
	background: transparent;
}

.qty-stepper__btn {
	background: none;
	border: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	width: 32px;
}

.qty-stepper__btn:hover:not(:disabled) {
	color: var(--wp--preset--color--primary);
}

.qty-stepper__btn:disabled {
	cursor: default;
	opacity: 0.3;
}

/* Totals + shipping panel. WooCommerce's own woocommerce-layout.css floats
   this to 48% width — `.woocommerce .cart-collaterals .cart_totals,
   .woocommerce-page .cart-collaterals .cart_totals { float:right; width:48% }`
   — three classes. A same-shaped selector here
   (body.woocommerce-cart .cart-collaterals .cart_totals — also three
   classes, plus the `body` type selector as a tiebreaker) is needed to
   actually beat it; a plain `body.woocommerce-cart .cart_totals` (two
   classes) loses on specificity and silently does nothing, which is exactly
   what happened the first time this was written. Otherwise no card styling
   of its own from WooCommerce (no padding, no border, no background) —
   added here, deliberately compact rather than a big open box, since its
   own internal table stays tight (see below) rather than stretching every
   row wide open. */
body.woocommerce-cart .cart-collaterals .cart_totals {
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	border-radius: 5px;
	float: none;
	padding: 20px 24px;
	width: 100%;
}

body.woocommerce-cart .cart_totals > h2 {
	margin-top: 0;
}

/* The totals table inherits table.shop_table's own border+radius — inside
   the card above that reads as a box-within-a-box, so strip it back to
   plain row dividers. Each row is a flex line instead of two table cells:
   the label stays compact on the left, the amount is pushed to the right
   edge rather than sprawling across a wide second "column" the way a plain
   left-aligned <td> would in a 100%-wide table — this is what the label and
   its amount running together with no gap between them (a previous
   `padding-left/right: 0` on both cells, meant for a narrower nested-column
   context that no longer applies here) actually looked like. */
body.woocommerce-cart .cart_totals table.shop_table {
	border: none;
	border-radius: 0;
	margin: 0;
}

body.woocommerce-cart .cart_totals table.shop_table tr {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}

/* The shipping row is a different shape from a plain totals row — its <td>
   holds the whole shipping-method list/calculator, not a short value — so
   it needs the label above and the content below at full width instead of
   the label-left/value-right flex treatment every other row gets. */
body.woocommerce-cart .cart_totals table.shop_table tr.shipping {
	display: block;
}

body.woocommerce-cart .cart_totals table.shop_table tr.shipping th,
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td {
	display: block;
}

body.woocommerce-cart .cart_totals table.shop_table tr.shipping th {
	margin-bottom: 8px;
}

body.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
body.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
	border-top: none;
	padding-top: 0;
}

/* woocommerce.css also sets an explicit `width:35%` on this th (a leftover
   two-column table-cell layout assumption) — harmless as a table-cell, but
   width still acts as a flex-basis fallback on a flex item, so it's reset
   here to let content size it naturally with the flex row above deciding
   actual placement instead. */
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	padding-left: 0;
	padding-right: 0;
	width: auto;
}

body.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
}

body.woocommerce-cart .cart_totals table.shop_table tr.shipping td {
	text-align: left;
}

/* Shipping method list (radio options — Dropp's pickup/delivery choices
   plus any flat-rate fallbacks): WooCommerce's own CSS is minimal
   (list-style:none, 0.5em bottom margin, inline label) — fine for 2-3 short
   options, but this store's labels are long, price-bearing, and several
   deep, so it read as a wall of cramped, misaligned text wrapping under a
   floating radio dot. Each option now gets its own bordered row with the
   radio and label properly aligned side by side via flex, comfortable
   padding, a hover state, and — the one genuinely new bit of interaction
   polish — a highlighted border+background on whichever option is currently
   selected, so the choice stays visible at a glance instead of being just
   a small filled-in radio dot easy to lose in a long list.

   Shared with checkout (2026-09-18): the classic checkout's order-review
   table renders this exact same markup/class for its own shipping row
   (`.woocommerce-checkout-review-order-table tr.shipping`, confirmed by
   triggering the real update_order_review AJAX call checkout's own JS makes
   — a plain page fetch never shows it, same as cart's calculator-first
   default), so the same styling just needed `body.woocommerce-checkout`
   added alongside `body.woocommerce-cart` rather than a second copy. */
body.woocommerce-cart ul.woocommerce-shipping-methods,
body.woocommerce-checkout ul.woocommerce-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
}

body.woocommerce-cart ul.woocommerce-shipping-methods li,
body.woocommerce-checkout ul.woocommerce-shipping-methods li {
	align-items: baseline;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
}

/* Dropp's pickup option nests a "choose location" button (.dropp-location,
   hidden until that option is selected) as a third sibling inside the <li>,
   after the label — flex-wrap above lets it drop to its own line instead of
   squeezing in beside the label as a third column. */
body.woocommerce-cart ul.woocommerce-shipping-methods li .dropp-location,
body.woocommerce-checkout ul.woocommerce-shipping-methods li .dropp-location {
	flex-basis: 100%;
	margin-top: 6px;
}

body.woocommerce-cart ul.woocommerce-shipping-methods li:has(input:checked),
body.woocommerce-checkout ul.woocommerce-shipping-methods li:has(input:checked) {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
	border-color: var(--wp--preset--color--primary);
}

body.woocommerce-cart ul.woocommerce-shipping-methods li input,
body.woocommerce-checkout ul.woocommerce-shipping-methods li input {
	flex-shrink: 0;
	margin: 0.3em 0 0 0;
}

/* Smaller, regular-weight type for these labels (2026-09-18 feedback) —
   the price portion (`.amount`) is bold at `font-weight:700` sitewide
   (WooCommerce's own global `.amount{font-weight:700}`, used everywhere
   prices appear), which read as the whole line being bold at this size in a
   list this dense; both are pulled down here specifically. */
body.woocommerce-cart ul.woocommerce-shipping-methods li label,
body.woocommerce-checkout ul.woocommerce-shipping-methods li label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: normal;
	line-height: 1.5;
}

body.woocommerce-cart ul.woocommerce-shipping-methods li label .amount,
body.woocommerce-checkout ul.woocommerce-shipping-methods li label .amount {
	font-weight: normal;
}

/* Checkout-only: the "Sending" heading above the list (the same package-name
   label as cart's — see the Store API/translation section — `_x('Shipment',
   'shipping packages', 'woocommerce')`) is redundant here — a checkout
   customer already knows this is the delivery-method choice — and with
   several long Dropp options to show, the space is worth more than the
   label. Hiding the <th> (not just its text) lets the <td> expand to fill
   the freed column width, since a table row's remaining cell reflows to
   fill a display:none sibling's space. Cart keeps the heading — only asked
   to remove it on checkout. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping th {
	display: none;
}

body.woocommerce-cart .woocommerce-shipping-destination {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0;
	opacity: 0.75;
}

body.woocommerce-cart .shipping-calculator-button {
	font-size: var(--wp--preset--font-size--small);
}

body.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: 16px;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	text-align: center;
	width: 100%;
}

/* -- About page -- */

/* Rebuilt from Flatsome/UX-Builder shortcodes (2026-09-18) — the page used
   to render [ux_banner]/[row]/[col] as literal text, Flatsome having gone
   inactive with nothing left to process them. Plain blocks now, with
   Unsplash placeholder photography (leather goods / boutique — swap for the
   site's own photos whenever they're available; attachment IDs 44832-44835,
   uploaded via `wp media import`, not the WPVibe media tool — this site has
   no WPVibe plugin installed, confirmed when it 404'd). Same width-cap
   pattern used elsewhere on this site (single-product, front page, footer):
   `align:wide` doesn't constrain anything on its own now that
   contentSize/wideSize are 100% sitewide, so the "wide" sections here are
   capped by hand, scoped to this one page. Kept deliberately narrower than
   the single-product/front-page caps (1900px/1920px) — this is a text-first
   page, not a product grid, and a narrower measure reads better. */
body.page-id-1077 .about-story,
body.page-id-1077 .about-team,
body.page-id-1077 .about-info {
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
}

.about-hero h1 {
	letter-spacing: 0.01em;
}

/* Small uppercase section label above each section heading — same visual
   language as the footer's column headings (.site-footer-heading),
   repeated here for the same "quiet label above the real content" role. */
.about-eyebrow {
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.08em;
	margin-bottom: 0.5em;
	text-transform: uppercase;
}

.about-story__image img {
	border-radius: 8px;
}

/* Full-bleed photo strip between the story and team sections — a plain
   <img> at its native aspect ratio would be an odd height depending on
   which photo ends up here; fixed to a clean banner proportion instead. */
.about-band img {
	height: 340px;
	object-fit: cover;
	width: 100%;
}

.about-team {
	padding-top: var(--wp--preset--spacing--large);
	padding-bottom: var(--wp--preset--spacing--large);
	text-align: center;
}

.about-team__list {
	column-gap: var(--wp--preset--spacing--large);
	row-gap: var(--wp--preset--spacing--medium);
}

.about-team__name {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--medium);
	margin-bottom: 0.25em;
}

.about-team__role {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.65;
}

.about-info .wp-block-cover__inner-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
}

.about-info__contact a {
	color: inherit;
}

/* -- Header: Flokkar mega menu --

   Built with the "Navigation Block with Mega Menu" plugin (getwid-megamenu),
   2026-09-21 — the user's own choice of tool, installed specifically for
   this. It's a genuinely separate block type from core/navigation (not an
   extension of it), so it sits as its own row in the header rather than
   inside the existing nav — matching where the user had already placed a
   test block themselves (a single item with placeholder "sdad"/"dada" text)
   before asking for this.

   First version of this nested the whole category tree as further
   getwid-megamenu/menu-item blocks inside "Flokkar" (categories nested
   inside Flokkar, subcategories nested inside each category), each level
   getting its own independent hover/toggle dropdown from the plugin. Forcing
   the second level open via CSS (`height:auto!important` etc., to satisfy
   "subcategories under each category" without a second click) broke the
   whole thing — confirmed live: the entire tree rendered as one long
   permanently-visible vertical list pushing the rest of the page down,
   not a mega-menu at all. Rebuilt from scratch with a fundamentally
   simpler structure instead of chasing that bug further: only the
   top-level "Flokkar" item is an interactive getwid-megamenu item (one
   hover/toggle, exactly what the plugin is actually built for). Everything
   below it — all 13 categories and ~34 subcategories — is plain static
   HTML (a `core/html` block: `.flokkar-panel > .flokkar-panel__category`,
   each a linked `<h4>` category name plus a plain `<ul>` of subcategory
   links), not plugin blocks at all, so there is no second interactive
   layer to fight and nothing for the plugin's JS to mismanage. */

/* 2026-09-24: back inline in the header's main row, right after the site
   title (see "Header: single line + floating on scroll" near the top of
   this file). Safe this time — the dropdown-wrapper now has explicit
   !important widths below, so it no longer depends on `.gw-mm` being a
   full-width row (what broke the first inline attempt). */
.flokkar-menu {
	flex: 0 0 auto;
	margin: 0;
}

/* The Vöruflokkar trigger itself. Originally plain text with a small
   arrow; restyled (2026-09-21 feedback) to match the mobile toggle
   button's own bordered-pill look exactly, for one consistent "this is a
   button" affordance on both — the dropdown behavior underneath is
   unchanged, this is a visual-only pass. Left-aligned via the block's own
   `itemsJustification:"left"` attribute (the mechanism the plugin already
   provides), not a CSS override.
   (2026-09-21, same day: briefly moved inline next to the logo, in the
   same row as the title/search/nav/cart, per a follow-up request — that
   broke the dropdown outright, see the removed fix below, and was then
   reverted back to this own-row-below layout per further feedback, just
   with left instead of center alignment. Kept the block back at the
   template's original position — a plain sibling after the title/search/
   nav/cart row, not inside it — rather than leaving any of the "moved
   inline" CSS in place.) */
.flokkar-menu-item > .gw-mm-item__link {
	align-items: center;
	background: none;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	border-radius: 999px;
	gap: 6px;
	padding: 8px 20px;
}

.flokkar-menu-item > .gw-mm-item__link a {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	padding: 0;
	text-decoration: none;
}

.flokkar-menu-item > .gw-mm-item__link:hover {
	border-color: var(--wp--preset--color--primary);
}

.flokkar-menu-item > .gw-mm-item__link:hover a,
.flokkar-menu-item > .gw-mm-item__link:hover .gw-mm-item__toggle {
	color: var(--wp--preset--color--primary);
}

.flokkar-menu-item > .gw-mm-item__link .gw-mm-item__toggle {
	color: var(--wp--preset--color--contrast);
}

.flokkar-menu-item > .gw-mm-item__link .gw-mm-item__toggle .dashicons {
	font-size: 16px;
	height: 16px;
	width: 16px;
}

/* The dropdown panel itself: card styling instead of the plugin's bare
   white box, opening from the trigger's left edge (left:0;right:auto)
   rather than centered under it — matches the trigger's own left
   alignment on the row (itemsJustification:"left" on the block).
   The dropdown-wrapper's containing block is `.gw-mm` itself
   (`position:relative`, the plugin's own CSS, confirmed by reading
   getwid-megamenu's build/style-index.css directly) — not the trigger
   `<li>` — and since `.gw-mm` is (again) a full-width block-level row
   (see the "moved inline, then reverted" note two rules up: it briefly
   became a shrink-to-fit flex item next to the logo, which collapsed
   this exact shrink-to-fit width calculation and broke the panel outright
   until it was moved back), plain shrink-to-fit width here has a wide box
   to size itself against, same as it always did before that detour.

   2026-09-22: that shrink-to-fit reasoning turned out to be moot —
   confirmed via a real headless-browser render (Playwright + system
   Chrome, no browser was available for the earlier width-limit fix in
   this same session, which is why it silently didn't work) that
   getwid-megamenu's own `frontend.js` unconditionally sets an *inline*
   `left`/`width` on this exact element via jQuery `.css()`, on every
   page load (`o()`, wired to run on load + resize), setting
   `width: <the whole .gw-mm row's own width>` unless the block has a
   `data-dropdown-width` attribute (the plugin's own "Dropdown Width"
   setting — not used here since it *centers* the panel within the full
   row via a computed `left` offset, which would fight this menu's
   deliberate left-alignment next to the trigger). An inline style beats
   any non-`!important` external rule regardless of selector specificity,
   which is why the `.flokkar-panel` width fix (correct on its own terms,
   confirmed via the same render — `.flokkar-panel` really is 1136px at a
   1800px viewport) had zero visible effect: the actual bordered/shadowed
   box is `.gw-mm-item__dropdown`, sized by *this* element's width, which
   stayed at the full row width regardless. `!important` here is a
   deliberate, targeted exception (same pattern as the Mini Cart drawer's
   `--drawer-width` override elsewhere in this file) to reach past a
   plugin's own inline JS styling — widths below mirror `.flokkar-panel`'s
   own per-breakpoint width plus `.gw-mm-item__dropdown`'s 24px×2 padding
   (892/1184/328 = 844/1136/280 + 48). Reset to `auto` on true mobile
   (`.gw-mm.is-mobile`, see that section below) since the JS itself clears
   these inline styles there and the panel goes back to a plain full-width
   stacked list. */
.flokkar-menu-item > .gw-mm-item__dropdown-wrapper {
	left: 0 !important;
	right: auto;
	width: 892px !important; /* .flokkar-panel's 844px (3 columns) + 48px dropdown padding */
}

.flokkar-menu-item > .gw-mm-item__dropdown-wrapper > .gw-mm-item__dropdown {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 5px;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	padding: 24px;
}

/* Plain static content inside the panel — real mega-menu columns via
   CSS column-count, no block-level restructuring needed for this.
   Widened 900px -> 1200px and column count now scales with viewport
   (2026-09-21 feedback: the original 900px/3-column panel left visible
   dead space on anything wider than a laptop screen) — 1200px matches the
   width cap this site already uses for checkout, a reasonable middle
   ground between "cramped" and "spans the whole ultra-wide monitor,"
   which general mega-menu guidance advises against for readability (very
   long line lengths between a category name and the edge of the panel).
   4 columns above 1400px, 3 by default, 1 (plain stacked list) below
   900px — same mobile-collapse breakpoint the rest of this site already
   uses, and matches general guidance that mega menus should fall back to
   a simple single-column list on small screens rather than staying
   multi-column.

   2026-09-22 fix: that 1200px was a `max-width`, not a `width` — on any
   screen wide enough that the panel's own ancestor (`.gw-mm-item__dropdown`,
   the actual bordered/shadowed box, sized via CSS `position:absolute;
   left:0;right:auto` shrink-to-fit) had room to spare, a large empty strip
   showed up to the right of the last real column, confirmed via a
   screenshot and by reading the rendered DOM directly (no per-instance
   container class or inline width — the panel's own markup was exactly as
   expected). Root cause: a `column-count`-only multicol box (no
   `column-width`) has notoriously unreliable max-content/shrink-to-fit
   intrinsic sizing across browsers — the ancestor's shrink-to-fit
   calculation was landing close to the *available* width (nearly the full
   header row) rather than "N columns' worth of actual content," so the
   bordered box rendered far wider than the 1200px-capped content sitting
   left-aligned inside it. Fixed by giving `.flokkar-panel` an explicit,
   computed `width` (not just `max-width`) for each column-count tier —
   `columns × 260px + (columns-1) × 32px gap` — so the box's own width is a
   definite value tied to how many columns of links it actually holds,
   never a guess the browser has to make. `max-width` kept alongside as a
   defensive cap only (never expected to bind at these column counts, but
   cheap insurance against an unusually narrow viewport in this range). */
.flokkar-panel {
	column-count: 3;
	column-gap: 32px;
	width: 844px; /* 3 × 260px columns + 2 × 32px gaps */
	max-width: calc(100vw - 72px);
}

@media only screen and (min-width: 1400px) {
	.flokkar-panel {
		column-count: 4;
		width: 1136px; /* 4 × 260px columns + 3 × 32px gaps */
	}

	.flokkar-menu-item > .gw-mm-item__dropdown-wrapper {
		width: 1184px !important; /* .flokkar-panel's 1136px (4 columns) + 48px dropdown padding */
	}
}

.flokkar-panel__category {
	break-inside: avoid;
	margin-bottom: 18px;
}

.flokkar-panel__category-title {
	margin: 0 0 6px;
}

.flokkar-panel__category-title a {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--medium);
	text-decoration: none;
}

.flokkar-panel__category-title a:hover {
	color: var(--wp--preset--color--primary);
}

.flokkar-panel__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.flokkar-panel__sublist li {
	margin: 0;
}

.flokkar-panel__sublist a {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.7;
	padding: 3px 0;
	text-decoration: none;
}

.flokkar-panel__sublist a:hover {
	color: var(--wp--preset--color--primary);
	opacity: 1;
}

@media only screen and (max-width: 900px) {
	.flokkar-panel {
		column-count: 1;
		width: 280px;
	}

	.flokkar-menu-item > .gw-mm-item__dropdown-wrapper {
		width: 328px !important; /* .flokkar-panel's 280px (1 column) + 48px dropdown padding */
	}
}

/* -- Header: Flokkar mega menu — mobile toggle --

   2026-09-21 feedback: the mobile "Menu" button (relabelled "Vöruflokkar"
   above, via the plugin's own filter) and the "Flokkar" item's own small
   arrow are two *completely separate* click targets in this plugin's own
   JS (confirmed by reading it, not guessing) — tapping the outer button
   only reveals a single line reading "Flokkar"; the category panel itself
   stays hidden behind a second tap on the small arrow next to it. That
   read as "closed"/broken, not awkward-but-working.
   Rather than trying to keep two independent toggle states in sync (the
   button's own `.is-opened` and the item's own `.is-opened` are set by
   separate click handlers with no relationship to each other in the
   plugin's JS) — the same lesson as the desktop nesting fix above, don't
   layer more state-chasing CSS on top of a mechanism already fighting
   itself — the inner arrow is hidden outright on mobile and its dropdown
   is simply forced open whenever the *outer* button's own opened state
   is active. One tap, one thing happens. */

.flokkar-menu .gw-mm__toggle {
	align-items: center;
	background: none;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	gap: 6px;
	padding: 8px 20px;
}

.flokkar-menu .gw-mm__toggle:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.flokkar-menu .gw-mm__toggle .dashicons {
	font-size: 16px;
	height: 16px;
	transition: transform 0.2s ease;
	width: 16px;
}

.gw-mm.is-mobile.is-opened .flokkar-menu .gw-mm__toggle .dashicons {
	transform: rotate(180deg);
}

/* The inner arrow becomes redundant once the outer button controls
   opening directly (see above) — hidden on mobile only; desktop hover
   still uses it as the sole trigger for its own dropdown. */
.gw-mm.is-mobile .flokkar-menu-item > .gw-mm-item__link .gw-mm-item__toggle {
	display: none;
}

/* On mobile the outer "Vöruflokkar" button already names the list, so the
   inner item title row (same word, link to /verslun/) just repeats it
   right underneath — hidden. Desktop still uses that row as the trigger. */
.gw-mm.is-mobile .flokkar-menu-item > .gw-mm-item__link {
	display: none;
}

/* The open panel sits in normal flow inside the sticky header, so a tall
   category list used to run off the bottom of the screen while touch
   scrolling moved the page behind it. Cap it to what is left of the
   viewport under the header and let it scroll on its own;
   overscroll-behavior stops the scroll chaining to the page when the
   list hits its top/bottom. 150px ≈ header rows + breathing room. */
.gw-mm.is-mobile.is-opened .flokkar-menu-item .gw-mm-item__dropdown-wrapper {
	height: auto !important;
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	position: static;
}

/* The dropdown box's desktop card styling (border, shadow) would double
   up with the mobile content-wrapper's own card background/shadow — reset
   to a plain panel on mobile. */
.gw-mm.is-mobile .flokkar-menu-item > .gw-mm-item__dropdown-wrapper > .gw-mm-item__dropdown {
	border: none;
	box-shadow: none;
	padding: 16px;
}

.gw-mm.is-mobile .flokkar-panel {
	max-width: none;
	width: auto;
}

/* getwid-megamenu's own JS clears the dropdown-wrapper's inline left/width
   the moment it flips into is-mobile mode (see the frontend.js behavior
   documented above the desktop dropdown-wrapper rule), so nothing would
   normally constrain this element here — but the ≤900px media query rule
   above (a plain, non-mobile-scoped breakpoint that also covers every
   is-mobile viewport width) still applies its 328px !important width
   regardless. Needs its own, higher-specificity !important reset or the
   mobile stacked category list would be squeezed to 328px instead of
   spanning full width. */
.gw-mm.is-mobile .flokkar-menu-item > .gw-mm-item__dropdown-wrapper {
	width: auto !important;
}