/*
 * Cmsmart Stores: front-end pieces of the recommended plugins, styled with the store tokens.
 * Scoped to each plugin's own classes; colours come from the palette (theme.json) so every store picks up its own
 * primary colour. A child overrides tokens, not this file. Plugins that are not installed cost nothing here.
 */

:root {
	--cs-plg-accent: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary, #0e7fa3));
	--cs-plg-accent-hover: var(--wp--preset--color--contrast, #222);
	--cs-plg-on-accent: var(--wp--preset--color--base, #fff);
	--cs-plg-text: var(--wp--preset--color--contrast, #222);
	--cs-plg-muted: var(--wp--preset--color--muted, #666);
	--cs-plg-border: var(--wp--preset--color--border, #e0e0e0);
	--cs-plg-surface: var(--wp--preset--color--tertiary, #f8f9f9);
	--cs-plg-radius: var(--cs-radius-field, 2px);
}

/* ---------- header slots: search, language, currency ---------- */
.cs-header-search {
	flex: 0 0 auto;
	min-width: 0;
}

.cs-header-switchers {
	display: flex;
	align-items: center;
	gap: var(--cs-space-2, 8px);
	flex: 0 0 auto;
}

/* The header and top bar keep a side gutter below the content width (a store's own `padding: 0` must not let the logo
   and the cart touch the screen edge). */
header .cmsmart-header,
header .cmsmart-topbar {
	padding-left: var(--wp--style--root--padding-left, var(--cs-gutter, 16px));
	padding-right: var(--wp--style--root--padding-right, var(--cs-gutter, 16px));
	box-sizing: border-box;
}

/* Compact pills (flag + code "EN", "USD"), one height, so the menu keeps its row. The same pattern in every store. */
.cs-switcher {
	--cs-pill-h: 34px;
}

.cs-switcher select,
.cs-switcher .woocommerce-currency-switcher {
	box-sizing: border-box;
	min-height: var(--cs-pill-h);
	height: var(--cs-pill-h);
	padding: 0 24px 0 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--cs-plg-text);
	background-color: var(--wp--preset--color--base, #fff);
	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='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	border: 1px solid var(--cs-plg-border);
	border-radius: var(--cs-plg-radius);
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	max-width: 100%;
	cursor: pointer;
}

.cs-switcher form {
	margin: 0;
}

.cs-switcher--language .trp-shortcode-switcher__wrapper {
	--bg: var(--wp--preset--color--base, #fff);
	--bg-hover: var(--cs-plg-surface);
	--text: var(--cs-plg-text);
	--text-hover: var(--cs-plg-text);
	--border: 1px solid var(--cs-plg-border);
	--border-color: var(--cs-plg-border);
	--border-radius: var(--cs-plg-radius);
	--font-size: 13px;
	--flag-size: 16px;
	--switcher-padding: 0 8px;
	font-weight: 600;
}

.cs-switcher--language .trp-shortcode-switcher {
	padding: 0;
	box-sizing: border-box;
	align-items: center;
}

.cs-switcher--language .trp-shortcode-switcher__wrapper {
	display: flex;
	align-items: center;
	line-height: 1;
}

.cs-switcher--language .trp-shortcode-switcher.trp-shortcode-anchor {
	height: var(--cs-pill-h);
	min-height: 0;
}

/* the clickable overlay is exactly the pill; the open list floats under it, as wide as its longest name */
.cs-switcher--language .trp-shortcode-switcher.trp-shortcode-overlay {
	width: 100%;
	overflow: visible;
}

.cs-switcher--language .trp-switcher-dropdown-list {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	z-index: 30;
	min-width: max-content;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--cs-plg-border);
	border-radius: var(--cs-plg-radius);
	box-shadow: var(--cs-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.16));
}

.cs-switcher--language .trp-switcher-dropdown-list[hidden] {
	display: none;
}

.cs-switcher--language .trp-switcher-dropdown-list .trp-language-item {
	padding: 6px 8px;
	gap: 6px;
}

.cs-switcher--language .trp-shortcode-switcher .trp-current-language-item__wrapper {
	height: calc(var(--cs-pill-h) - 2px);
	min-height: 0;
	padding-right: 4px;
	align-items: center;
}

.cs-switcher--language .trp-shortcode-switcher .trp-current-language-item__wrapper .trp-language-item {
	height: 100%;
	min-height: 0;
	padding: 0 6px 0 8px;
	align-items: center;
	gap: 6px;
}

.cs-switcher--language .trp-language-item-name,
.cs-switcher--language .trp-ls-language-name {
	max-width: 7em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* the trigger shows the short code, the open list keeps the full language names */
.cs-switcher--language .trp-language-item__current .trp-language-item-name[data-code],
.cs-switcher--language .trp-ls-shortcode-current-language .trp-ls-language-name[data-code] {
	font-size: 0;
	max-width: none;
	overflow: visible;
}

.cs-switcher--language .trp-language-item__current .trp-language-item-name[data-code]::before,
.cs-switcher--language .trp-ls-shortcode-current-language .trp-ls-language-name[data-code]::before {
	content: attr(data-code);
	font-size: 13px;
	letter-spacing: 0.02em;
}

.cs-header-switchers--strip {
	display: none;
}

/* Below 1200px the header row has no room for them next to the menu: a slim strip above the header instead. */
@media (max-width: 1199px) {
	.cs-header-switchers--tools {
		display: none;
	}

	.cs-header-switchers--strip {
		display: flex;
		justify-content: flex-end;
		position: relative;
		z-index: 25;
		padding: 4px var(--cs-gutter, 16px);
		background: var(--cs-plg-surface);
		border-bottom: 1px solid var(--cs-plg-border);
	}

	.cs-header-switchers--strip .cs-switcher {
		--cs-pill-h: 30px;
	}

	/* A header that floats over the hero on the home page (position: absolute, top 0) starts under the strip, not behind it
	   (the strip is 30px pill + 2 x 4px padding + 1px rule = 39px). Once it turns fixed on scroll the strip has scrolled away. */
	body.home .cs-header-switchers--strip + header.wp-block-template-part:not(.cs-header-fixed) {
		top: 39px;
	}
}

/* Tablet: a 6-item menu plus the header tools does not fit between 600px (the block's own breakpoint) and 960px, so the
   menu uses the burger up to 959px (the same overlay the block already uses on phones). */
@media (min-width: 600px) and (max-width: 959px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* The menu is one row at every width where it is shown (each store sets its own, fluid, item gap). */
header .wp-block-navigation:not(.has-modal-open) > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	flex-wrap: nowrap;
	white-space: nowrap;
}

header .wp-block-navigation.ps-main-nav,
header .wp-block-navigation.cs-main-nav {
	min-width: 0;
}

/* FiboSearch */
.dgwt-wcas-search-wrapp {
	max-width: 100%;
	color: var(--cs-plg-text);
}

.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	min-height: 40px;
	height: 40px;
	font-size: 1rem;
	color: var(--cs-plg-text);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--cs-field-border, #8a8a8a);
	border-radius: var(--cs-plg-radius);
	box-shadow: none;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
	border-color: var(--cs-plg-accent);
	box-shadow: 0 0 0 2px var(--cs-ring-gap, #fff), 0 0 0 4px var(--cs-ring, var(--cs-plg-accent));
	outline: 0;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier,
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier-handler {
	fill: var(--cs-plg-accent);
}

.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	background: var(--cs-plg-accent);
	color: var(--cs-plg-on-accent);
	border-radius: 0 var(--cs-plg-radius) var(--cs-plg-radius) 0;
}

.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
	border: 1px solid var(--cs-plg-border);
	box-shadow: var(--cs-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.16));
	color: var(--cs-plg-text);
	font-family: inherit;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion:hover {
	background: var(--cs-plg-surface);
}

.dgwt-wcas-suggestion .dgwt-wcas-st {
	color: var(--cs-plg-text);
}

.dgwt-wcas-suggestion .dgwt-wcas-sp,
.dgwt-wcas-suggestion .dgwt-wcas-sp .woocommerce-Price-amount {
	color: var(--cs-plg-accent);
	font-weight: 600;
}

.dgwt-wcas-overlay-mobile .dgwt-wcas-search-input {
	font-size: 16px;
}

/* ---------- product cards: wishlist, compare, quick view as one icon row ---------- */
li.product .woosc-btn,
li.product .woosq-btn,
li.product .tinvwl-loop-button-wrapper,
.wc-block-product .woosc-btn,
.wc-block-product .woosq-btn,
.wc-block-product .tinvwl-loop-button-wrapper {
	display: inline-flex;
	vertical-align: top;
	margin: var(--cs-space-2, 8px) 3px 0;
}

li.product .tinvwl-loop-button-wrapper,
.wc-block-product .tinvwl-loop-button-wrapper {
	padding: 0;
}

li.product .woosc-btn-text,
li.product .woosq-btn-text,
.wc-block-product .woosc-btn-text,
.wc-block-product .woosq-btn-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* compare + quick view buttons (cards and product page) */
.woosc-btn,
.woosq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: var(--cs-target, 44px);
	min-height: var(--cs-target, 44px);
	padding: 0 var(--cs-space-3, 12px);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--cs-plg-text);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--cs-plg-border);
	border-radius: var(--cs-plg-radius);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.woosc-btn:hover,
.woosq-btn:hover,
.woosc-btn.woosc-added {
	color: var(--cs-plg-on-accent);
	background: var(--cs-plg-accent);
	border-color: var(--cs-plg-accent);
}

.woosc-btn:focus-visible,
.woosq-btn:focus-visible,
.tinvwl_add_to_wishlist_button:focus-visible {
	outline: 2px solid var(--cs-ring, var(--cs-plg-accent));
	outline-offset: 2px;
}

/* wishlist */
.tinv-wraper .tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--cs-target, 44px);
	color: var(--cs-plg-text);
	font-size: 0.875rem;
	text-decoration: none;
}

.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button {
	justify-content: center;
	min-width: var(--cs-target, 44px);
	padding: 0 var(--cs-space-3, 12px);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--cs-plg-border);
	border-radius: var(--cs-plg-radius);
}

.tinv-wraper .tinvwl_add_to_wishlist_button::before {
	color: var(--cs-plg-accent);
}

.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover,
.tinv-wraper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	border-color: var(--cs-plg-accent);
}

.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover::before,
.tinv-wraper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
	color: var(--cs-plg-accent);
}

body.single-product .tinv-wraper,
body.single-product .woosc-btn,
body.single-product .woosq-btn {
	margin-top: var(--cs-space-3, 12px);
	margin-right: var(--cs-space-2, 8px);
}

/* st-uxfix-043: compare, quick view and wishlist are three equal square buttons on one baseline.
   The TI Wishlist wrapper (a div around the link) carried its own margins and line box, which pushed the heart about 15px lower. */
li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button {
	width: var(--cs-target, 44px) !important;
	height: var(--cs-target, 44px) !important;
	padding: 0 !important;
	margin: 0 !important;
	position: static;
}

li.product .woosc-btn,
li.product .woosq-btn,
.wc-block-product .woosc-btn,
.wc-block-product .woosq-btn,
li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button {
	box-sizing: border-box;
	width: var(--cs-target, 44px);
	height: var(--cs-target, 44px);
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: var(--cs-space-2, 8px) 3px 0;
	border: 1px solid var(--cs-plg-border);
	border-radius: var(--cs-plg-radius);
	line-height: 1;
	vertical-align: top;
}

li.product .tinvwl-loop-button-wrapper,
.wc-block-product .tinvwl-loop-button-wrapper {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: var(--cs-target, 44px);
	height: var(--cs-target, 44px);
	margin: var(--cs-space-2, 8px) 3px 0;
	padding: 0;
	line-height: 1;
	vertical-align: top;
	float: none;
	position: relative;
}

li.product .tinvwl-loop-button-wrapper .tinvwl-tooltip,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl-tooltip {
	display: none;
}

li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--base, #fff);
	position: static;
	top: auto;
	transform: none;
}

li.product .woosc-btn-icon,
li.product .woosq-btn-icon,
.wc-block-product .woosc-btn-icon,
.wc-block-product .woosq-btn-icon,
li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button::before,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button::before {
	font-size: 16px;
	line-height: 1;
	margin: 0;
}

li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover {
	background: var(--cs-plg-accent);
	border-color: var(--cs-plg-accent);
}

li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover::before,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover::before {
	color: var(--cs-plg-on-accent);
}

li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list,
.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	border-color: var(--cs-plg-accent);
}

@media (max-width: 480px) {
	li.product .woosc-btn,
	li.product .woosq-btn,
	.wc-block-product .woosc-btn,
	.wc-block-product .woosq-btn,
	li.product .tinvwl-loop-button-wrapper,
	.wc-block-product .tinvwl-loop-button-wrapper,
	li.product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button,
	.wc-block-product .tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button {
		width: 38px !important;
		height: 38px !important;
	}

	li.product .woosc-btn,
	li.product .woosq-btn,
	.wc-block-product .woosc-btn,
	.wc-block-product .woosq-btn,
	li.product .tinvwl-loop-button-wrapper,
	.wc-block-product .tinvwl-loop-button-wrapper {
		margin-inline: 1px;
	}
}

/* the Online Designer "Start Design" link takes its own row, so the three icon buttons never split over two lines */
li.product > a.button,
.wc-block-product > a.button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

/* wishlist page and table */
.tinvwl_added_to_wishlist.tinv-modal .tinv-modal-inner {
	border-radius: var(--cs-plg-radius);
}

.tinv-wishlist table.tinvwl-table-manage-list .product-action .button,
.tinv-wishlist .tinvwl-to-right .button,
.tinv-wishlist .tinvwl_added_to_wishlist .button,
.tinv-wishlist .tinvwl-btn-onclick {
	color: var(--cs-plg-on-accent);
	background: var(--cs-plg-accent);
	border-color: var(--cs-plg-accent);
	border-radius: var(--cs-plg-radius);
}

/* compare bar and table, quick view popup */
.woosc-bar,
.woosc-popup,
.woosq-popup {
	font-family: inherit;
	color: var(--cs-plg-text);
}

.woosc-bar .woosc-bar-btn,
.woosc-bar .woosc-bar-search,
.woosc-popup .woosc-popup-close,
.woosq-popup .woosq-popup-close {
	border-radius: var(--cs-plg-radius);
}

.woosc-bar .woosc-bar-btn {
	background: var(--cs-plg-accent);
	color: var(--cs-plg-on-accent);
	border-color: var(--cs-plg-accent);
}

.woosc-popup-content .woosc_table th {
	background: var(--cs-plg-surface);
}

.woosc-popup .price,
.woosq-popup .price {
	color: var(--cs-plg-accent);
	font-weight: 600;
}

.woosq-popup .single_add_to_cart_button,
.woosq-popup .single_add_to_cart_button.button {
	background: var(--cs-plg-accent);
	color: var(--cs-plg-on-accent);
	border-radius: var(--cs-plg-radius);
}

.woosq-popup .woosq-view-details,
.woosq-popup .woosq-view-details a,
.woosq-popup a {
	color: var(--cs-plg-accent);
}

/* the "View product details" bar is dark: its text must be light (the accent colour on #222 fails contrast) */
.woosq-popup a.view-details-btn,
.woosq-popup a.view-details-btn:hover {
	color: #fff;
}

/* ---------- swatches (global product attributes) ---------- */
/* The plugin's own selectors are long; :not(#cs) lifts ours above them without !important. */
.variations_form .tawcvs-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-space-2, 8px);
	align-items: center;
}

.variations_form .tawcvs-swatches .swatch-item-wrapper:not(#cs) {
	margin: 0;
	padding: 0;
}

.variations_form .tawcvs-swatches .swatch:not(#cs) {
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	min-width: 36px;
	margin: 0;
	padding: 0;
	line-height: 1;
	color: var(--cs-plg-text);
	background-color: var(--wp--preset--color--base, #fff);
	border: 2px solid var(--cs-plg-border);
	border-radius: var(--cs-plg-radius);
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.variations_form .tawcvs-swatches .swatch.swatch-color:not(#cs) {
	text-indent: -9999em;
}

.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:not(#cs) {
	border-radius: 50%;
}

.variations_form .tawcvs-swatches .swatch.swatch-label:not(#cs) {
	width: auto;
	height: auto;
	min-width: var(--cs-target, 44px);
	min-height: var(--cs-target, 44px);
	padding: 0 var(--cs-space-3, 12px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cs-plg-radius);
	font-size: 0.9375rem;
}

.variations_form .tawcvs-swatches .swatch:not(#cs)::before,
.variations_form .tawcvs-swatches .swatch:not(#cs)::after {
	display: none !important;
}

.variations_form .tawcvs-swatches .swatch:not(#cs):hover {
	border-color: var(--cs-plg-accent);
}

.variations_form .tawcvs-swatches .swatch.selected:not(#cs) {
	border-color: var(--cs-plg-accent);
	box-shadow: 0 0 0 2px var(--cs-ring-gap, #fff), 0 0 0 4px var(--cs-plg-accent);
}

.variations_form .tawcvs-swatches .swatch.swatch-label.selected:not(#cs) {
	color: var(--cs-plg-on-accent);
	background-color: var(--cs-plg-accent);
	box-shadow: none;
}

.variations_form .tawcvs-swatches .swatch.swatch-disabled:not(#cs),
.variations_form .tawcvs-swatches .swatch.disabled:not(#cs) {
	opacity: 0.4;
	cursor: not-allowed;
}

.variations_form .tawcvs-swatches .swatch .swatch__tooltip {
	font-size: 0.8125rem;
}

/* ---------- cookie consent (CookieYes) ---------- */
/* The banner sets its colours as inline style attributes, so !important is needed here (and only here). */
.cky-consent-container .cky-consent-bar {
	border-radius: var(--cs-plg-radius);
	border-color: var(--cs-plg-border) !important;
	font-family: inherit;
	box-shadow: var(--cs-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.16));
}

.cky-consent-container .cky-title,
.cky-modal .cky-preference-title {
	color: var(--cs-plg-text) !important;
}

.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
	min-height: var(--cs-target, 44px);
	border-radius: var(--cs-plg-radius);
	font-family: inherit;
	font-weight: 600;
}

.cky-consent-container .cky-btn-accept,
.cky-consent-container .cky-btn-reject,
.cky-modal .cky-btn-accept,
.cky-modal .cky-btn-preferences,
.cky-modal .cky-btn-reject {
	color: var(--cs-plg-on-accent) !important;
	background-color: var(--cs-plg-accent) !important;
	border-color: var(--cs-plg-accent) !important;
}

.cky-consent-container .cky-btn-customize {
	color: var(--cs-plg-accent) !important;
	background-color: transparent !important;
	border-color: var(--cs-plg-accent) !important;
}

.cky-consent-container .cky-btn:hover,
.cky-modal .cky-btn:hover {
	opacity: 1;
	color: var(--cs-plg-on-accent) !important;
	background-color: var(--cs-plg-accent-hover) !important;
	border-color: var(--cs-plg-accent-hover) !important;
}

.cky-btn-revisit-wrapper {
	background-color: var(--cs-plg-accent) !important;
}

.cky-switch input[type="checkbox"]:checked {
	background-color: var(--cs-plg-accent) !important;
}

/* Small screens: a slim full-width bottom bar (not a tall card) so the page and its primary button stay reachable. */
@media (max-width: 781px) {
	.cky-consent-container.cky-box-bottom-left,
	.cky-consent-container.cky-box-bottom-right,
	.cky-consent-container {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.cky-consent-container .cky-consent-bar[data-cky-tag="notice"] {
		width: 100%;
		margin: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		border-width: 1px 0 0;
		border-radius: 0;
		box-sizing: border-box;
	}

	.cky-consent-container .cky-consent-bar .cky-notice .cky-title {
		margin: 0 0 4px;
		padding: 0;
		font-size: 0.9375rem;
	}

	.cky-consent-container .cky-consent-bar .cky-notice .cky-notice-des {
		padding: 0;
	}

	.cky-consent-container .cky-notice-des,
	.cky-consent-container .cky-notice-des p {
		margin: 0;
		font-size: 0.8125rem;
		line-height: 1.4;
	}

	.cky-consent-container .cky-notice-btn-wrapper {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		margin: 10px 0 0;
		padding: 0;
	}

	.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
		padding: 0 8px;
		font-size: 0.8125rem;
	}

	/* Accept first and on the full first row, the two others share the second row (very narrow phones only) */
	.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
		order: -1;
		flex-basis: 100%;
	}

	/* Never a tall card: whatever the text length or language, the bar stays under 40% of the screen and scrolls inside */
	.cky-consent-container .cky-consent-bar[data-cky-tag="notice"] {
		max-height: 40vh;
		overflow-y: auto;
	}
}

/* From 360px the three buttons fit on one row, which saves about 50px of height */
@media (min-width: 360px) and (max-width: 781px) {
	.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
		min-height: 38px;
		padding: 0 4px;
		font-size: 0.75rem;
	}

	.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
		order: 0;
		flex-basis: 0;
	}

	.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
		order: -2;
	}
}

/* ---------- Fluid Checkout ---------- */
body.woocommerce-checkout {
	--fluidcheckout--button--primary--background-color: var(--cs-plg-accent);
	--fluidcheckout--button--primary--border-color: var(--cs-plg-accent);
	--fluidcheckout--button--primary--text-color: var(--cs-plg-on-accent);
	--fluidcheckout--button--primary--background-color--hover: var(--cs-plg-accent-hover);
	--fluidcheckout--button--primary--border-color--hover: var(--cs-plg-accent-hover);
	--fluidcheckout--button--primary--text-color--hover: var(--cs-plg-on-accent);
	--fluidcheckout--button--secondary--text-color: var(--cs-plg-accent);
	--fluidcheckout--button--secondary--border-color: var(--cs-plg-accent);
	--fluidcheckout--button--border-radius: var(--cs-plg-radius);
	--fluidcheckout--button--height: var(--cs-target, 44px);
	--fluidcheckout--field--border-radius: var(--cs-plg-radius);
	--fluidcheckout--field--border-color: var(--cs-field-border, #8a8a8a);
	--fluidcheckout--field--height: var(--cs-target, 44px);
	--fluidcheckout--section--border-radius: var(--cs-plg-radius);
	--fluidcheckout--option-box--radio-color--checked: var(--cs-plg-accent);
	--fluidcheckout--option-box--border-radius: var(--cs-plg-radius);
	--fluidcheckout--color--success: var(--wp--preset--color--primary-dark, #1a7f37);
}

/* The theme's notices block sits above the checkout; Fluid Checkout floats every notices wrapper into its column. */
body.woocommerce-checkout .wc-block-store-notices .woocommerce-notices-wrapper {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.woocommerce-checkout .wp-block-post-content {
	display: block;
}

body.woocommerce-checkout .fc-progress-bar__step.is-current,
body.woocommerce-checkout .fc-progress-bar__step.is-complete {
	background-color: var(--cs-plg-accent);
}

body.woocommerce-checkout .fc-step__substep-save,
body.woocommerce-checkout .fc-step__next-step,
body.woocommerce-checkout #place_order {
	font-size: var(--cs-fs-body, 1rem);
	font-weight: 600;
}

/* ---------- newsletter form (MailPoet) ---------- */
.mailpoet_form .mailpoet_text,
.mailpoet_form .mailpoet_textarea,
.mailpoet_form .mailpoet_select {
	min-height: var(--cs-target, 44px);
	border: 1px solid var(--cs-field-border, #8a8a8a);
	border-radius: var(--cs-plg-radius);
	font: inherit;
}

.mailpoet_form .mailpoet_submit {
	min-height: var(--cs-target, 44px);
	color: var(--cs-plg-on-accent);
	background: var(--cs-plg-accent);
	border: 0;
	border-radius: var(--cs-plg-radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}