/*
 * Flashfire: layout and component styles matching the Shopify store's Dawn theme.
 * Values were measured from the live Dawn pages (see tools/probe.py).
 * Dawn's breakpoints: 750px (tablet) and 990px (desktop).
 */

:root {
	--ff-gutter: 15px;
	--ff-text: #121212;
	--ff-line: rgba(18, 18, 18, 0.08);
	--ff-grid-gap: 8px;
}

@media (min-width: 750px) {
	:root {
		--ff-gutter: 50px;
	}
}

@media (max-width: 749px) {
	body {
		font-size: 15px;
	}

	h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 20px;
	}
}

/* ---------- Header ---------- */

/*
 * Sticky header, Dawn's "on scroll up" behaviour: only the header row sticks; the
 * announcement bar scrolls away with the page. The template part wraps both, and a
 * sticky element can't leave its parent, so the wrapper is display: contents and
 * .ff-header sticks within the whole page instead.
 * flashfire.js adds .is-hidden while scrolling down and removes it when scrolling up.
 */
header.wp-block-template-part {
	display: contents;
}

.ff-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	background: var(--wp--preset--color--base);
	transition: transform 0.15s ease-out;
}

/* Below 600px WordPress's admin bar scrolls with the page, so don't leave room for it. */
@media (max-width: 600px) {
	.ff-header {
		top: 0;
	}
}

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

.ff-header {
	border-bottom: 1px solid var(--ff-line);
	padding-block: 12px;
}

@media (max-width: 749px) {
	.ff-header {
		padding-block: 6px;
	}
}

.ff-header__row {
	min-height: 87px;
	gap: 20px;
}

@media (max-width: 989px) {
	.ff-header__row {
		min-height: 68px;
		gap: 0;
	}
}

.ff-header__logo img {
	width: 250px;
	height: auto;
}

@media (max-width: 749px) {
	.ff-header__logo img {
		width: 180px;
	}
}

.ff-header__nav {
	margin-left: -12px;
	gap: 0;
	font-size: 14px;
	color: var(--ff-text);
}

.ff-header__nav .wp-block-navigation-item__content {
	color: rgba(18, 18, 18, 0.75);
	padding: 12px;
	text-decoration: none;
	text-underline-offset: 3px;
}

.ff-header__nav .wp-block-navigation-item__content:hover,
.ff-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ff-text);
	text-decoration: underline;
}

/* Dawn collapses the menu into a drawer below 990px (WordPress's default is 600px). */
@media (max-width: 989px) {
	.ff-header__nav {
		order: -1;
		margin-left: -12px;
	}

	.ff-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
	}

	.ff-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.ff-header__row > .ff-header__icons {
	margin-left: auto !important;
	gap: 0;
	padding-right: 8px;
}

.ff-header__icons .wp-block-search__button,
.ff-header__icons .wc-block-mini-cart__button {
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--ff-text);
}

.ff-header__icons .wp-block-search__button svg,
.ff-header__icons .wc-block-mini-cart__icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* ---------- Announcement bar ---------- */

.ff-announcement-bar {
	border-bottom: 1px solid var(--ff-line);
	padding-inline: var(--ff-gutter);
}

.ff-announcements {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	display: flex;
	align-items: center;
	min-height: 38px;
}

.ff-announcements > * {
	margin-block: 0 !important;
}

.ff-announcement {
	flex: 1;
	padding: 10px 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--ff-text);
}

/* Without JS, show only the first message. */
.ff-announcements:not(.is-ready) .ff-announcement + .ff-announcement {
	display: none;
}

/* With JS, all messages share one grid cell, so the bar is as tall as the tallest
   message and doesn't change height between messages. Inactive ones wait off to the
   side (data-side), transparent; switching slides and fades both at once. */
.ff-announcements__track {
	flex: 1;
	min-width: 0;
	display: grid;
	align-items: center; /* a one-line message sits mid-height when another wraps */
	overflow: hidden;
}

.ff-announcements__track > .ff-announcement {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
}

.ff-announcements__track > .ff-announcement[data-side="before"] {
	transform: translateX(-100%);
}

.ff-announcements__track > .ff-announcement[data-side="after"] {
	transform: translateX(100%);
}

.ff-announcements__track > .ff-announcement.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s;
}

.ff-announcements__track > .ff-announcement.is-instant {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.ff-announcements__track > .ff-announcement {
		transform: none !important;
	}
}

/* ---------- Arrow buttons (announcement bar and slideshow) ---------- */

.ff-arrow {
	flex: none;
	width: 44px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: rgba(18, 18, 18, 0.75);
	cursor: pointer;
}

.ff-arrow:hover {
	color: var(--ff-text);
}

.ff-announcements > .ff-arrow--prev {
	margin-left: -15px;
}

.ff-announcements > .ff-arrow--next {
	margin-right: -15px;
}

/* ---------- Homepage ---------- */

/* Dawn has no gap between sections (spacing_sections = 0). */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

/* ---------- Slideshow ---------- */

.ff-slideshow {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: 0;
}

.ff-slideshow::-webkit-scrollbar {
	display: none;
}

.ff-slideshow > .ff-slide {
	flex: 0 0 100%;
	margin: 0 !important;
	scroll-snap-align: start;
	/* Dawn's "adapt to first image": every slide takes the first slide's ratio. */
	aspect-ratio: 2200 / 1299;
}

.ff-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ff-slideshow__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ff-line);
	border-top: 0;
	min-height: 46px;
}

.ff-slideshow__controls .ff-arrow {
	height: 44px;
}

.ff-dots {
	display: flex;
}

.ff-dot {
	width: 30px;
	height: 30px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.ff-dot::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(18, 18, 18, 0.5);
	box-sizing: border-box;
}

.ff-dot[aria-current="true"]::before {
	background: var(--ff-text);
	border-color: var(--ff-text);
}

.ff-pause {
	width: 44px;
	height: 44px;
	margin-left: 6px;
	padding-left: 6px;
	border: 0;
	border-left: 1px solid var(--ff-line);
	background: none;
	color: var(--ff-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Product cards and collection rows ---------- */

.ff-collection {
	padding-top: 16px;
	margin-block: 0 !important;
}

.ff-collection + .ff-collection {
	padding-top: 22px;
}

.ff-home > .ff-collection:last-child {
	padding-bottom: 20px;
}

.ff-collection .wc-block-product-template {
	--ff-cols: 4;
	display: grid !important;
	grid-template-columns: repeat(var(--ff-cols), minmax(0, 1fr));
	gap: var(--ff-grid-gap);
	margin: 0;
	padding: 0;
}

.ff-cols-3 .wc-block-product-template {
	--ff-cols: 3;
}

.ff-cols-5 .wc-block-product-template {
	--ff-cols: 5;
}

.ff-collection .wc-block-product {
	width: auto !important;
	margin: 0 !important;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: start;
	gap: 0;
	/* Dawn's card content padding: space between grid rows. */
	padding-bottom: 16px;
}

@media (max-width: 749px) {
	.ff-collection .wc-block-product-template {
		--ff-cols: 2 !important;
	}

	/* Dawn's "swipe on mobile": one scrolling row, two cards plus a peek of the next. */
	.ff-swipe .wc-block-product-template {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc(50% - 25px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-right: calc(-1 * var(--ff-gutter));
		padding-right: var(--ff-gutter);
	}

	.ff-swipe .wc-block-product {
		scroll-snap-align: start;
	}
}

.ff-collection .wc-block-components-product-image {
	margin: 0 !important;
	position: relative;
}

/* WooCommerce renders an empty store-notices box inside the first card's image,
   pushing it down. These cards have no add-to-cart, so there's nothing to show. */
.ff-collection .wc-block-components-product-image .wc-block-components-notices {
	display: none;
}

.ff-collection .wc-block-components-product-image a {
	display: block;
	position: relative;
}

/* Dawn's "adapt to image": natural aspect ratio (from the img width/height attributes)
   instead of a square crop. Don't override aspect-ratio: lazy images with sizes="auto"
   get a 3000x1500 placeholder size from core and would stretch. */
.ff-collection .wc-block-components-product-image img:not(.ff-card__secondary) {
	display: block;
	width: 100%;
	height: auto !important;
	object-fit: cover !important;
}

.ff-shape-parallelogram .wc-block-components-product-image {
	clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

.ff-card__secondary {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s;
}

@media (hover: hover) {
	.wc-block-product:hover .ff-card__secondary {
		opacity: 1;
	}
}

.ff-badge {
	position: absolute;
	left: 13px;
	bottom: 13px;
	z-index: 1;
	padding: 5px 13px 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 40px;
	background: var(--wp--preset--color--slate);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 1px;
}

.ff-collection .wp-block-post-title {
	margin: 17px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.3;
	letter-spacing: 0.6px;
	text-align: left;
}

@media (max-width: 749px) {
	.ff-collection .wp-block-post-title {
		font-size: 12px !important;
	}
}

.ff-collection .wp-block-post-title a {
	color: var(--ff-text);
	text-decoration: none;
}

.ff-collection .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ff-collection .wc-block-components-product-price {
	margin: 7px 0 0 !important;
	font-size: 16px !important;
	line-height: 1.5;
	letter-spacing: 1px;
	color: var(--ff-text);
	text-align: left;
}

/* ---------- Footer ---------- */

.ff-footer {
	border-top: 1px solid var(--ff-line);
	padding-top: 30px;
	padding-bottom: 36px;
	margin-top: 0 !important;
}

/* Dawn's payment icons: 38x24 with 5px padding each, centered above the copyright. */
.ff-payment-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 16px;
	padding: 0;
	list-style: none;
}

.ff-payment-icons li {
	padding: 5px;
	line-height: 0;
}

.ff-footer__bottom {
	margin-top: 0;
	text-align: center;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: 0.7px;
}

.ff-footer__bottom a {
	font-size: 12px;
	color: inherit;
	text-decoration: none;
}

.ff-footer__bottom a:hover {
	text-decoration: underline;
}

.ff-footer__bottom > * + *::before {
	content: "·";
	margin: 0 6px;
}

/* ---------- Product page ---------- */

.ff-product-page {
	padding-top: 36px;
	padding-bottom: 12px;
}

.ff-product {
	display: grid;
	gap: 0;
	margin-top: 0 !important;
}

.ff-product > * {
	margin: 0 !important;
	min-width: 0;
}

@media (min-width: 750px) {
	/* Dawn's "medium" media size: 55% gallery, 45% info. */
	.ff-product {
		grid-template-columns: 55% 45%;
		align-items: start;
	}

	.ff-product__info {
		padding-left: 50px;
		position: sticky;
		top: 30px;
	}
}

@media (max-width: 749px) {
	.ff-product__info {
		padding-top: 20px;
	}
}

.ff-product-page > .wc-block-store-notices:empty,
.ff-product-page > .wc-block-store-notices:not(:has(.wc-block-components-notice-banner)) {
	display: none;
}

.ff-product__media .wp-block-woocommerce-product-gallery {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

.ff-product__media .wc-block-product-gallery-large-image {
	width: 100%;
	border: 1px solid rgba(18, 18, 18, 0.05);
}

.ff-product__media .wc-block-product-gallery-large-image img {
	object-fit: contain;
}

.ff-product__media .wc-block-product-gallery-thumbnails {
	margin-top: 20px;
	gap: 10px;
}

.ff-product__media .wc-block-product-gallery-thumbnails__thumbnail {
	border: 1px solid rgba(18, 18, 18, 0.05);
}

.ff-product__media .wc-block-product-gallery-thumbnails__thumbnail__image--is-active,
.ff-product__media .wc-block-product-gallery-thumbnails__thumbnail:has(.wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
	outline: 0;
	border-color: var(--ff-text);
}

.ff-product__info > * {
	margin-block: 0 !important;
}

.ff-product__vendor {
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.ff-product__title {
	margin-bottom: 15px !important;
}

.ff-product__price,
.ff-product__price .wc-block-components-product-price {
	font-size: 18px !important;
	letter-spacing: 1.3px;
	color: var(--ff-text);
}

.ff-product__stock {
	margin-block: 15px !important;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ff-product__stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #108043;
	box-shadow: 0 0 0 3px rgba(16, 128, 67, 0.2);
}

.ff-product__stock.wc-block-components-product-stock-indicator--out-of-stock::before {
	background: #c8102e;
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2);
}

/* Quantity stepper and Add to cart, as Dawn's 142x47 box and full-width outline button. */
.ff-product__buy form.cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	margin: 10px 0 0;
}

/* Dawn's visible "Quantity" label (WooCommerce's is screen-reader only).
   Beats WooCommerce's clearfix `form.cart::before { content: " " }`. */
.ff-product .ff-product__buy form.cart::before {
	content: "Quantity" !important;
	display: block !important;
	margin-bottom: -19px;
	font-size: 13px;
	letter-spacing: 0.4px;
	color: rgba(18, 18, 18, 0.75);
}

.ff-product__buy .quantity {
	display: inline-flex;
	width: 142px;
	height: 47px;
	border: 1px solid var(--ff-text);
	margin: 0 !important;
}

.ff-product__buy .quantity input.qty {
	box-sizing: border-box;
	width: 50px;
	height: 45px;
	padding: 0 5px;
	margin: 0;
	border: 0;
	background: none;
	text-align: center;
	font-size: 16px;
	color: var(--ff-text);
	-moz-appearance: textfield;
}

.ff-product__buy .quantity input.qty::-webkit-inner-spin-button,
.ff-product__buy .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.ff-product__buy .quantity .wc-block-components-quantity-selector__button,
.ff-product__buy .quantity button {
	width: 45px;
	height: 45px;
	border: 0;
	background: none;
	font-size: 18px;
	color: var(--ff-text);
	cursor: pointer;
}

.ff-product__buy .single_add_to_cart_button {
	width: 100%;
	max-width: 440px;
	min-height: 47px;
	margin: 0 0 10px !important;
	padding: 0 30px;
	background: transparent !important;
	color: var(--ff-text) !important;
	border: 1px solid var(--ff-text) !important;
	font-size: 15px;
	letter-spacing: 1px;
}

.ff-product__buy .single_add_to_cart_button:hover {
	box-shadow: 0 0 0 1px var(--ff-text);
}

.ff-product__description {
	margin-block: 25px !important;
}

.ff-product__description p,
.ff-product__description ul {
	margin-block: 0 16px;
}

.ff-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ff-text);
	font: inherit;
	font-size: 14px;
	letter-spacing: 0.6px;
	cursor: pointer;
}

.ff-share[data-copied]::after {
	content: "Link copied";
	color: rgba(18, 18, 18, 0.75);
}

/* ---------- Collection / shop pages ---------- */

.ff-catalog-page__title {
	margin-block: 25px !important;
}

.ff-catalog-page__description {
	margin-block: 0 20px !important;
	font-size: 18px;
}

.ff-catalog-page > .ff-collection {
	padding-top: 16px;
	padding-bottom: 36px;
}

.ff-facets {
	display: flex;
	align-items: center;
	gap: 0 20px;
	padding-top: 46px;
	margin-block: 0 !important;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.4px;
}

.ff-facets__toggle {
	display: none;
}

.ff-facets__controls {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
}

.ff-facets__filters,
.ff-facets__sort {
	display: flex;
	align-items: center;
}

.ff-facets__heading,
.ff-facets__sort label {
	color: rgba(18, 18, 18, 0.85);
	margin-right: 20px;
}

.ff-facet {
	position: relative;
	margin-right: 35px;
}

.ff-facet summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
}

.ff-facet summary::-webkit-details-marker {
	display: none;
}

.ff-facet summary:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ff-facet[open] .ff-facet__caret {
	transform: rotate(180deg);
}

.ff-facet__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 5;
	min-width: 350px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--ff-line);
	font-size: 14px;
}

.ff-facet__header {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--ff-line);
}

.ff-facet__header a {
	color: var(--ff-text);
}

.ff-facet__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	cursor: pointer;
}

.ff-facet__option:last-child {
	padding-bottom: 20px;
}

.ff-facet__option.is-disabled {
	opacity: 0.5;
	cursor: default;
}

.ff-facet__option input {
	width: 16px;
	height: 16px;
	accent-color: var(--ff-text);
}

.ff-facet__price {
	display: flex;
	gap: 20px;
	padding: 20px;
}

.ff-facet__price label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.ff-facet__price input {
	width: 100%;
	height: 45px;
	padding: 0 15px;
	border: 1px solid rgba(18, 18, 18, 0.55);
	background: none;
	font: inherit;
}

.ff-facets__sort {
	position: relative;
}

.ff-facets__sort select {
	appearance: none;
	border: 0;
	background: none;
	padding: 0 18px 0 0;
	font: inherit;
	color: rgba(18, 18, 18, 0.75);
	cursor: pointer;
}

.ff-facets__sort .ff-facet__caret {
	position: absolute;
	right: 0;
	pointer-events: none;
}

.ff-facets__count {
	font-size: 16px;
	letter-spacing: 0.6px;
	white-space: nowrap;
}

.ff-facets__clear {
	font-size: 14px;
	color: var(--ff-text);
}

@media (max-width: 989px) {
	/* Dawn collapses the bar into "Filter and sort" plus the count. */
	.ff-facets {
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 16px;
		font-size: 15px;
	}

	.ff-facets__toggle {
		display: block;
		padding: 5px 0;
		border: 0;
		background: none;
		font: inherit;
		color: rgba(18, 18, 18, 0.85);
		cursor: pointer;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.ff-facets__controls {
		display: none;
		order: 3;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
		padding: 15px 0;
	}

	.ff-facets.is-open .ff-facets__controls {
		display: flex;
	}

	.ff-facets__filters {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.ff-facets__heading {
		display: none;
	}

	.ff-facet {
		margin: 0;
	}

	.ff-facet__panel {
		position: static;
		min-width: 0;
		margin-top: 8px;
	}
}

.ff-catalog .wp-block-query-pagination {
	margin-top: 36px;
	gap: 0 10px;
	font-size: 14px;
}

/* ---------- Pages (About, FAQ, policies) ---------- */

/* Dawn's rich-text sections: left-aligned in the page width, text up to ~780px. */
.ff-page {
	padding-top: 18px;
	padding-bottom: 52px;
}

/* Pages migrated from Shopify carry their own H1; hide the template title then. */
.ff-page:has(.ff-page__content h1) > .ff-page__title {
	display: none;
}

.ff-page__title {
	margin-block: 0 24px !important;
}

.ff-page__content > :not(.wp-block-media-text) {
	max-width: 780px;
}

.ff-page__content h1 {
	margin-block: 0 16px;
}

.ff-page__content h2 {
	margin-block: 24px 16px;
}

.ff-page__content p {
	margin-block: 0 16px;
}

/* About: Dawn's image-with-text, small image beside the text. */
.ff-page .wp-block-media-text {
	grid-template-columns: 360px auto !important;
	gap: 0;
}

.ff-page .wp-block-media-text__content {
	padding: 40px 0 0 70px;
	max-width: 620px;
	align-self: start;
}

@media (max-width: 749px) {
	.ff-page .wp-block-media-text {
		grid-template-columns: 100% !important;
	}

	.ff-page .wp-block-media-text__content {
		padding: 20px 0 0;
	}
}

/* ---------- Cart notification (Dawn's "notification" cart type) ---------- */

.ff-cart-notification {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	width: 100%;
	padding: 25px 35px;
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(18, 18, 18, 0.1);
	border-top: 0;
	color: var(--ff-text);
}

.ff-cart-notification.is-active {
	display: block;
}

.ff-cart-notification:focus {
	outline: 0;
}

@media (min-width: 750px) {
	.ff-cart-notification {
		/* Right edge of the page width, like Dawn. */
		right: max(var(--ff-gutter), calc((100% - var(--wp--style--global--content-size)) / 2));
		max-width: 376px;
	}
}

.ff-cart-notification__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.ff-cart-notification__header h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.6px;
}

.ff-cart-notification__close {
	width: 44px;
	height: 44px;
	margin: -15px -15px 0 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.ff-cart-notification__product {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px 0 30px;
}

.ff-cart-notification__product img {
	width: 70px;
	height: auto;
	border: 1px solid rgba(18, 18, 18, 0.05);
}

.ff-cart-notification__product h3 {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
}

.ff-cart-notification__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}

.ff-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 0 30px;
	background: var(--ff-text);
	border: 1px solid var(--ff-text);
	color: #fff;
	font-size: 15px;
	letter-spacing: 1px;
	text-decoration: none;
}

.ff-button--secondary {
	background: transparent;
	color: var(--ff-text);
}

.ff-button:hover {
	box-shadow: 0 0 0 1px var(--ff-text);
}

.ff-cart-notification__continue {
	padding: 10px 0 0;
	border: 0;
	background: none;
	color: var(--ff-text);
	font: inherit;
	font-size: 15px;
	letter-spacing: 1px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------- Mobile row counter ---------- */

.ff-swipe__controls {
	display: none;
}

@media (max-width: 749px) {
	.ff-swipe__controls:not([hidden]) {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24px;
		font-size: 12px;
		color: rgba(18, 18, 18, 0.75);
	}

	.ff-swipe__counter {
		min-width: 44px;
		text-align: center;
	}

	.ff-swipe__controls .ff-arrow:disabled {
		opacity: 0.3;
		cursor: default;
	}
}

/* ---------- Search results ---------- */

.ff-search-page__form {
	max-width: 474px;
	margin: 0 auto !important;
}

.ff-search-page__form .wp-block-search__inside-wrapper {
	border: 1px solid rgba(18, 18, 18, 0.55);
	padding: 0;
	height: 45px;
}

.ff-search-page__form input {
	border: 0;
	background: none;
	padding: 0 15px;
	font: inherit;
}

.ff-search-page__form .wp-block-search__button {
	width: 44px;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--ff-text);
}

.ff-search-page__form .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ---------- Cart page (WooCommerce Cart block, rearranged like Dawn) ---------- */

.ff-cart-page {
	padding-top: 40px;
	padding-bottom: 40px;
}

.ff-cart-page__title {
	align-items: center;
	margin-bottom: 40px;
}

.ff-cart-page__title h1,
.ff-cart-page__title p {
	margin: 0;
}

.ff-cart-page__title a {
	font-size: 15px;
	letter-spacing: 1px;
	text-underline-offset: 3px;
}

/* One column: items, then the totals at the bottom right. */
.ff-cart-page .wc-block-cart {
	flex-direction: column;
	margin: 0 !important;
}

.ff-cart-page .wc-block-cart__main,
.ff-cart-page .wc-block-cart__sidebar {
	width: 100% !important;
	padding: 0 !important;
}

.ff-cart-page .wc-block-cart__sidebar {
	max-width: 350px;
	margin: 40px 0 0 auto;
}

/* Items table as a grid: image | name, price | quantity | total. The product cell
   and its wrapper are display: contents so their children become grid items. */
.ff-cart-page table.wc-block-cart-items,
.ff-cart-page .wc-block-cart-items tbody,
.ff-cart-page .wc-block-cart-items thead {
	display: block;
	border: 0;
}

.ff-cart-page .wc-block-cart-items {
	border-bottom: 1px solid var(--ff-line) !important;
}

.ff-cart-page .wc-block-cart-items tr {
	display: grid !important;
	padding-inline: 0 !important;
	grid-template-columns: 100px minmax(0, 1fr) 190px 120px !important;
	column-gap: 40px !important;
	align-items: start;
}

.ff-cart-page .wc-block-cart-items__header {
	border-bottom: 1px solid var(--ff-line);
	padding-bottom: 12px;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(18, 18, 18, 0.75);
}

.ff-cart-page .wc-block-cart-items__header th,
.ff-cart-page .wc-block-cart-items__header th::before,
.ff-cart-page .wc-block-cart-items__header th::after {
	font-size: 10px !important;
	letter-spacing: 1px;
	padding: 0 !important;
	width: auto !important;
	font-weight: 400;
	border: 0;
}

.ff-cart-page .wc-block-cart-items__header-image {
	display: none;
}

.ff-cart-page .wc-block-cart-items__header-product {
	display: contents !important;
}

.ff-cart-page .wc-block-cart-items__header-product::before {
	content: "Product";
	text-align: left;
	grid-column: 1 / 3 !important;
}

.ff-cart-page .wc-block-cart-items__header-product > * {
	display: none;
}

.ff-cart-page .wc-block-cart-items__header-product::after {
	content: "Quantity";
	text-align: left;
	grid-column: 3 !important;
}

.ff-cart-page .wc-block-cart-items__header-total {
	grid-column: 4 !important;
	text-align: right !important;
}

.ff-cart-page .wc-block-cart-items__row {
	padding: 40px 0 0;
	border: 0 !important;
}

.ff-cart-page .wc-block-cart-items__row:last-child {
	padding-bottom: 40px;
}

.ff-cart-page .wc-block-cart-items__row td {
	padding: 0 !important;
	border: 0 !important;
}

.ff-cart-page .wc-block-cart-item__image {
	grid-row: 1 / 4 !important;
}

.ff-cart-page .wc-block-cart-item__image img {
	box-sizing: border-box;
	width: 100%;
	max-width: 100px;
	height: auto;
	border: 1px solid rgba(18, 18, 18, 0.05);
}

.ff-cart-page .wc-block-cart-item__product,
.ff-cart-page .wc-block-cart-item__wrap {
	display: contents !important;
}

.ff-cart-page .wc-block-components-product-name {
	grid-column: 2 !important;
	grid-row: 1 !important;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ff-text);
	text-decoration: none;
	margin-top: 0;
}

.ff-cart-page .wc-block-cart-item__prices {
	grid-column: 2 !important;
	grid-row: 2 !important;
	font-size: 14px;
	margin-top: 6px;
}

.ff-cart-page .wc-block-components-product-metadata {
	display: none;
}

.ff-cart-page .wc-block-cart-item__quantity {
	grid-column: 3 !important;
	grid-row: 1 / 4 !important;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
}

.ff-cart-page .wc-block-cart-item__total {
	grid-column: 4 !important;
	grid-row: 1 !important;
	text-align: right;
	font-size: 16px;
	color: var(--ff-text);
}

/* Dawn's square 1px quantity box. */
.wc-block-components-quantity-selector {
	border-radius: 0 !important;
}

.ff-cart-page .wc-block-components-quantity-selector {
	width: 140px;
	height: 45px;
	border: 1px solid var(--ff-text);
}

.ff-cart-page .wc-block-components-quantity-selector::after {
	display: none;
}

.ff-cart-page .wc-block-components-quantity-selector input {
	font-size: 16px;
	color: var(--ff-text);
}

.ff-cart-page .wc-block-components-quantity-selector__button {
	min-width: 45px;
	color: var(--ff-text);
	opacity: 1;
}

.ff-cart-page .wc-block-cart-item__remove-link {
	width: 44px;
	height: 44px;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* Totals: just "Estimated total", the tax note and the checkout button. Coupons are
   still available at checkout. */
.ff-cart-page .wc-block-cart__totals-title,
.ff-cart-page .wc-block-components-totals-coupon {
	display: none !important;
}

.ff-cart-page .wc-block-components-totals-wrapper {
	border: 0 !important;
	padding: 0 !important;
}

.ff-cart-page .wc-block-components-totals-footer-item {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	padding: 0 !important;
}

.ff-cart-page .wc-block-components-totals-item__label {
	flex: none !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: var(--ff-text);
}

.ff-cart-page .wc-block-components-totals-item__value {
	font-size: 18px !important;
	font-weight: 400 !important;
	letter-spacing: 1px;
}

.ff-cart-page .wc-block-components-totals-item__value::after {
	content: " USD";
}

.ff-cart-page .wc-block-components-totals-footer-item {
	flex-wrap: wrap;
	border: 0 !important;
}

/* WooCommerce separates the totals rows with borders; Dawn has none. */
.ff-cart-page .wc-block-cart__sidebar,
.ff-cart-page .wc-block-cart__sidebar * {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

.ff-cart-page .wc-block-cart__sidebar .wc-block-components-totals-wrapper::after,
.ff-cart-page .wc-block-cart__sidebar .wc-block-components-totals-wrapper::before {
	display: none !important;
}

.ff-cart-page .wc-block-components-totals-footer-item::after {
	content: "Taxes, discounts and shipping calculated at checkout.";
	flex-basis: 100%;
	text-align: right;
	font-size: 13px;
	margin-top: 10px;
}

.ff-cart-page .wc-block-components-totals-item__description {
	display: none !important;
}

.ff-cart-page .wc-block-components-totals-item__description {
	flex-basis: 100%;
	text-align: right;
	font-size: 13px;
	margin-top: 10px;
}

.ff-cart-page .wc-block-cart__submit {
	margin-top: 20px;
	border: 0;
}

.ff-cart-page .wc-block-cart__sidebar .wc-block-components-totals-wrapper + * {
	border-top: 0 !important;
}

.ff-cart-page .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: 45px;
	border-radius: 0 !important;
	font-size: 15px;
	letter-spacing: 1px;
}

@media (max-width: 749px) {
	.ff-cart-page .wc-block-cart-items tr {
		grid-template-columns: 100px minmax(0, 1fr) auto !important;
		column-gap: 17px !important;
	}

	.ff-cart-page .wc-block-cart-items__header-image {
		display: none !important;
	}

	.ff-cart-page .wc-block-cart-item__image img {
		width: 100px;
	}

	.ff-cart-page .wc-block-cart-items tr.wc-block-cart-items__header {
		display: flex !important;
		justify-content: space-between;
	}

	.ff-cart-page .wc-block-cart-items__header-product::after {
		display: none;
	}

	.ff-cart-page .wc-block-cart-items__header-total {
		grid-column: 3 !important;
	}

	.ff-cart-page .wc-block-cart-item__quantity {
		grid-column: 2 / 4 !important;
		grid-row: 4 !important;
		margin-top: 15px !important;
	}

	.ff-cart-page .wc-block-cart-item__total {
		grid-column: 3 !important;
	}

	.ff-cart-page .wc-block-cart__sidebar {
		max-width: none;
	}
}

/* ---------- Checkout (WooCommerce Checkout block, styled like Shopify's checkout) ----------
 * Shopify's checkout isn't part of the Dawn theme; these values were measured from the
 * store's live checkout: system font at 14px, #dedede 1px borders with 12px corners,
 * #005bd1 accent, a 500px form and a 400px summary on a grey half.
 */

.woocommerce-checkout {
	--co-text: #000;
	--co-muted: #707070;
	--co-border: #dedede;
	--co-grey: #f5f5f5;
	--co-accent: #005bd1;
	--co-radius: 12px;
	background: #fff;
}

.ff-checkout-header,
.ff-checkout-page {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.35;
	letter-spacing: normal;
	color: var(--co-text);
}

/* Header: the logo and a cart link, on white with a divider. */
.ff-checkout-header {
	background: #fff;
	border-bottom: 1px solid var(--co-border);
	padding-inline: var(--ff-gutter);
}

.ff-checkout-header__inner {
	max-width: 980px;
	min-height: 64px;
	padding-block: 10px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ff-checkout-header__logo img {
	display: block;
	width: 180px;
	height: auto;
}

@media (max-width: 749px) {
	.ff-checkout-header__logo img {
		width: 140px;
	}
}

.ff-checkout-header__cart {
	display: flex;
	color: var(--co-accent);
}

/* Layout: on desktop the summary sits on a grey band that runs from the column gap to
   the right edge of the window (the form column is 500px, the gap 80px, the summary 400px). */
.ff-checkout-page {
	padding: 40px var(--ff-gutter) 60px !important;
	margin: 0 !important;
	min-height: calc(100vh - 73px);
	box-sizing: border-box;
}

.ff-checkout-page > * {
	max-width: 980px !important;
}

@media (min-width: 1000px) {
	.ff-checkout-page {
		background: linear-gradient(90deg, #fff calc(50% + 50px), var(--co-grey) calc(50% + 50px));
	}

	.ff-checkout-page .wc-block-checkout.wc-block-components-sidebar-layout {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.ff-checkout-page .wc-block-checkout__main {
		flex: 0 0 500px;
		width: 500px !important;
		padding: 0 !important;
	}

	.ff-checkout-page .wc-block-checkout__sidebar {
		flex: 0 0 400px;
		width: 400px !important;
		padding: 0 !important;
		top: 40px !important;
	}
}

.ff-checkout-page .wc-block-checkout {
	margin: 0 !important;
}

/* Sections */
.ff-checkout-page .wc-block-components-checkout-step {
	margin-bottom: 34px !important;
	padding: 0 !important;
	border: 0 !important;
}

.ff-checkout-page .wc-block-components-checkout-step__heading {
	margin: 0 0 15px !important;
}

.ff-checkout-page .wc-block-components-checkout-step__title {
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--co-text);
}

.ff-checkout-page .wc-block-components-checkout-step__description {
	color: var(--co-muted);
	margin-top: -10px;
}

/* Shopify's line under the Payment heading. */
.ff-checkout-page .wc-block-checkout__payment-method .wc-block-components-checkout-step__heading {
	flex-wrap: wrap;
}

.ff-checkout-page .wc-block-checkout__payment-method .wc-block-components-checkout-step__heading::after {
	content: "All transactions are secure and encrypted.";
	flex-basis: 100%;
	margin-top: 4px;
	color: var(--co-muted);
}

/* Shopify has neither of these. */
.ff-checkout-page .wc-block-checkout__guest-checkout-notice,
.ff-checkout-page .wc-block-checkout__order-notes {
	display: none !important;
}

/* Fields: WooCommerce's floating labels already behave like Shopify's. */
.ff-checkout-page .wc-block-components-text-input input,
.ff-checkout-page .wc-block-components-combobox .components-combobox-control input,
.ff-checkout-page .wc-blocks-components-select .wc-blocks-components-select__select,
.ff-checkout-page .wc-block-components-textarea {
	min-height: 49px;
	border: 1px solid var(--co-border) !important;
	border-radius: var(--co-radius) !important;
	background: #fff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	letter-spacing: normal !important;
	color: var(--co-text) !important;
	box-shadow: none !important;
}

.ff-checkout-page .wc-block-components-text-input input:focus,
.ff-checkout-page .wc-block-components-combobox .components-combobox-control input:focus,
.ff-checkout-page .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--co-accent) !important;
	box-shadow: 0 0 0 1px var(--co-accent) !important;
	outline: 0;
}

.ff-checkout-page .wc-block-components-text-input label,
.ff-checkout-page .wc-blocks-components-select__label,
.ff-checkout-page .wc-block-components-combobox label {
	font-size: 14px !important;
	letter-spacing: normal !important;
	color: var(--co-muted) !important;
}

.ff-checkout-page .wc-block-components-text-input.is-active label,
.ff-checkout-page .wc-blocks-components-select__label {
	font-size: 12px !important;
}

.ff-checkout-page .wc-block-components-address-form {
	gap: 11px !important;
}

.ff-checkout-page .wc-block-components-address-form > *,
.ff-checkout-page .wc-block-components-text-input,
.ff-checkout-page .wc-blocks-components-select {
	margin-top: 0 !important;
}

.ff-checkout-page .wc-block-components-address-form__address_2-toggle {
	color: var(--co-accent);
	font-size: 14px;
}

/* Checkboxes: rounded squares, blue when checked. */
.ff-checkout-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1px solid var(--co-border);
	border-radius: 5px;
	background: #fff;
}

.ff-checkout-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--co-accent);
	border-color: var(--co-accent);
}

.ff-checkout-page .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #fff;
}

.ff-checkout-page .wc-block-components-checkbox__label {
	font-size: 14px;
	letter-spacing: normal;
}

/* Payment options: one bordered box, the selected option tinted blue with a blue edge,
   its card fields on grey. */
.ff-checkout-page .wc-block-components-radio-control-accordion-option,
.ff-checkout-page .wc-block-components-radio-control__option {
	border: 1px solid var(--co-border) !important;
	border-radius: 0 !important;
	margin: -1px 0 0 !important;
	box-shadow: none !important;
}

.ff-checkout-page .wc-block-components-radio-control-accordion-option:first-child,
.ff-checkout-page .wc-block-components-radio-control__option:first-child {
	border-radius: var(--co-radius) var(--co-radius) 0 0 !important;
}

.ff-checkout-page .wc-block-components-radio-control-accordion-option:last-child,
.ff-checkout-page .wc-block-components-radio-control__option:last-child {
	border-radius: 0 0 var(--co-radius) var(--co-radius) !important;
}

.ff-checkout-page .wc-block-components-radio-control-accordion-option:only-child,
.ff-checkout-page .wc-block-components-radio-control__option:only-child {
	border-radius: var(--co-radius) !important;
}

.ff-checkout-page .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.ff-checkout-page .wc-block-components-radio-control__option-checked {
	position: relative;
	z-index: 1;
	border-color: var(--co-accent) !important;
	background: #f0f5ff;
}

.ff-checkout-page .wc-block-components-radio-control-accordion-content {
	background: var(--co-grey);
	padding: 15px !important;
}

.ff-checkout-page .wc-block-components-radio-control__input:checked {
	border-color: var(--co-accent) !important;
	background: var(--co-accent) !important;
}

/* Notices (e.g. "no payment methods"), like Shopify's grey info boxes. */
.ff-checkout-page .wc-block-checkout__no-payment-methods-notice {
	border: 0 !important;
	border-radius: var(--co-radius) !important;
	background: var(--co-grey) !important;
	color: var(--co-muted);
}

/* Terms line and the pay button. */
.ff-checkout-page .wc-block-checkout__terms {
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 12px;
	color: var(--co-muted);
}

.ff-checkout-page .wc-block-checkout__terms::before {
	display: none;
}

.ff-checkout-page .wc-block-checkout__terms a,
.ff-checkout-page .wc-block-components-checkout-return-to-cart-button {
	color: var(--co-accent);
}

.ff-checkout-page .wc-block-checkout__actions_row {
	flex-direction: column-reverse;
	align-items: stretch !important;
	gap: 24px;
}

.ff-checkout-page .wc-block-components-checkout-place-order-button {
	width: 100% !important;
	min-height: 50px;
	border: 0 !important;
	border-radius: var(--co-radius) !important;
	background: var(--co-accent) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: normal;
	box-shadow: none !important;
}

.ff-checkout-page .wc-block-components-checkout-place-order-button:hover {
	background: #004aab !important;
}

/* Order summary: no box or title on desktop, 64px rounded thumbnails with a black
   quantity bubble, plain subtotal rows and a large total with a small "USD". */
.ff-checkout-page .wp-block-woocommerce-checkout-order-summary-block {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent;
}

@media (min-width: 1000px) {
	.ff-checkout-page .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
		display: none;
	}
}

.ff-checkout-page .wc-block-components-totals-wrapper {
	border: 0 !important;
	padding: 0 !important;
}

.ff-checkout-page .wc-block-components-totals-wrapper::after {
	display: none !important;
}

/* Shopify only shows a discount field when the store has discounts. */
.ff-checkout-page .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	display: none !important;
}

.ff-checkout-page .wc-block-components-order-summary {
	padding: 0 0 25px !important;
}

.ff-checkout-page .wc-block-components-order-summary-item {
	align-items: center;
	font-size: 14px;
}

.ff-checkout-page .wc-block-components-order-summary-item__image {
	width: 64px !important;
	padding-bottom: 0 !important;
}

.ff-checkout-page .wc-block-components-order-summary-item__image img {
	width: 64px !important;
	max-width: 64px !important;
	height: 64px;
	object-fit: cover;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--co-radius);
}

.ff-checkout-page .wc-block-components-order-summary-item__quantity {
	background: #000 !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
	min-width: 21px;
	min-height: 21px;
	font-size: 12px;
	font-weight: 600;
}

.ff-checkout-page .wc-block-components-order-summary-item__description {
	padding-left: 16px !important;
}

.ff-checkout-page .wc-block-components-product-name {
	font-size: 14px;
	color: var(--co-text);
}

/* The unit price under the name repeats the line total for one item; Shopify omits it. */
.ff-checkout-page .wc-block-components-order-summary-item__individual-prices,
.ff-checkout-page .wc-block-components-product-metadata {
	display: none !important;
}

.ff-checkout-page .wc-block-components-order-summary-item__total-price {
	font-size: 14px;
	font-weight: 400;
}

.ff-checkout-page .wc-block-components-totals-item {
	padding: 4px 0 !important;
	font-size: 14px;
}

.ff-checkout-page .wc-block-components-totals-item__label,
.ff-checkout-page .wc-block-components-totals-item__value {
	font-size: 14px !important;
	font-weight: 400 !important;
}

.ff-checkout-page .wc-block-components-totals-footer-item {
	padding-top: 16px !important;
	align-items: baseline;
}

.ff-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.ff-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 19px !important;
	font-weight: 600 !important;
}

.ff-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value::before {
	content: "USD";
	margin-right: 6px;
	font-size: 12px;
	font-weight: 400;
	color: var(--co-muted);
}

/* Mobile: the summary collapses into a grey full-width bar above the form, as on Shopify. */
@media (max-width: 999px) {
	.ff-checkout-page {
		padding-top: 0 !important;
	}

	.ff-checkout-page .wc-block-checkout__sidebar {
		margin: 0 calc(-1 * var(--ff-gutter)) 20px !important;
		padding: 0 var(--ff-gutter) !important;
		background: var(--co-grey);
		width: auto !important;
	}

	.ff-checkout-page .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
		min-height: 60px;
		padding: 0 !important;
		margin: 0 !important;
	}

	.ff-checkout-page .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text {
		color: var(--co-accent);
		font-size: 14px;
		font-weight: 400;
	}

	.ff-checkout-page .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title .wc-block-formatted-money-amount {
		font-size: 17px;
		font-weight: 600;
		color: var(--co-text);
	}

	.ff-checkout-page .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon {
		fill: var(--co-accent);
	}

	.ff-checkout-page .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__heading {
		display: none;
	}
}

/* Nothing between the header and the form/summary bar (WordPress adds block gaps,
   WooCommerce an empty notices box), and no dividers anywhere in the summary. */
.ff-checkout-page > *,
.ff-checkout-page .wp-block-woocommerce-checkout {
	margin-block-start: 0 !important;
	padding-top: 0 !important;
}

.ff-checkout-page > .wc-block-store-notices:not(:has(.wc-block-components-notice-banner)) {
	display: none;
}

.ff-checkout-page .wp-block-woocommerce-checkout-order-summary-block,
.ff-checkout-page .wp-block-woocommerce-checkout-order-summary-block * {
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-left-width: 0;
	border-right-width: 0;
}

/* The thumbnail keeps its outline. */
.ff-checkout-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img {
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.ff-checkout-page .wc-block-components-checkout-order-summary__content {
	border: 0 !important;
	padding: 0 !important;
}

@media (max-width: 699px) {
	/* WooCommerce stacks the address fields here but leaves no space between them. */
	.ff-checkout-page .wc-block-components-address-form > * + * {
		margin-top: 11px !important;
	}

	.ff-checkout-page .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
		margin-bottom: 20px;
	}
}