/*
Theme Name: Frost
Theme URI: https://frostwp.com/
Author: WP Engine
Author URI: https://wpengine.com/
Description: With its clean, minimal design and powerful feature set, Frost enables agencies to build stylish and sophisticated WordPress websites. Frost is a masterpiece of design and functionality. It features a range of valuable patterns, including hero and portfolio sections, prominent call-to-action buttons, and customer testimonials. Whether you’re building a website for your business, personal brand, or creative project, Frost is perfect for anyone looking to launch quickly and efficiently.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0.51
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: frost
*/


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

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

html {
	scroll-behavior: smooth;
}

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;
}

/* -- 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;
}

/* Hero slider: each slide is a real, independently-editable core/cover
   block — this only adds the crossfade + nav chrome on top (src/index.js:
   initHeroSlider). All slides stack via position:absolute on the group's
   own explicit min-height, so an individual slide's own min-height
   (whatever was set when it was created as a plain cover block) stops
   mattering once it's inside .hero-slider — inset:0 overrides it. Degrades
   gracefully to a plain single image with no chrome if there's only one
   cover block inside (see the JS bail-out for <2 slides). */
.hero-slider {
	min-height: 553px;
	overflow: hidden;
	position: relative;
}

.hero-slider > .wp-block-cover {
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.8s ease;
}

.hero-slider > .wp-block-cover.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hero-slider__dots {
	bottom: 20px;
	display: flex;
	gap: 8px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	z-index: 5;
}

.hero-slider__dot {
	background-color: rgb(255 255 255 / 50%);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	height: 10px;
	padding: 0;
	width: 10px;
}

.hero-slider__dot.is-active {
	background-color: var(--wp--preset--color--base);
}

.hero-slider__arrow {
	align-items: center;
	background-color: rgb(0 0 0 / 30%);
	border: none;
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	display: flex;
	font-size: 1.5rem;
	height: 40px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	z-index: 5;
}

.hero-slider__arrow:hover {
	background-color: rgb(0 0 0 / 50%);
}

.hero-slider__arrow--prev {
	left: 20px;
}

.hero-slider__arrow--next {
	right: 20px;
}

/* 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,
   reusing the hero slider's own arrow look (dark translucent circle, white
   icon) immediately above for visual consistency within the same page. */
.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 -- */

.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: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
}

/* 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;
}

/* 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);
}

.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%;
}

@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;
}

/* 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. */
li.wc-block-product:has(> .shop-card-actions) {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	padding: 1rem;
}

.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;
	width: 44px;
}

/* 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;
}

/* 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;
}