/*
Theme Name: Warely Base
Theme URI: https://warely.ai
Author: WarelyEcom
Author URI: https://warely.ai
Description: WarelyEcom base block theme — a standardized 5-page WooCommerce storefront (Home, Shop, About, Contact, Gallery/FAQ) with a side cart drawer, full-bleed brand bands, and dynamic contact form. Design tokens and content are configured per client by the Warely Site Builder plugin.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.4.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warely-base
Tags: block-theme, e-commerce, woocommerce, full-site-editing
*/

/* Most styling lives in theme.json. This file carries what blocks can't express:
   the sticky dark header, hero/cards/gallery/FAQ/contact-form treatments, the
   comb-strand signature, and the responsive pass. */

/* ------------------------------------------------------------ Root layout */
/* Remove the root block-gap between header / main / footer — it showed as a
   blush strip below the header and above the footer. Bands set their own
   padding, so the page reads as continuous full-bleed sections. */
.wp-site-blocks > * {
	margin-block: 0;
}
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- Header */
.warely-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 20px rgb(var(--warely-contrast-rgb) / 0.18);
}
.warely-header .custom-logo {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px rgb(var(--warely-base-rgb) / 0.22);
}
.warely-header .wp-block-site-logo a {
	display: block;
	line-height: 0;
}
.warely-nav a,
.warely-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.warely-nav a:hover,
.warely-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--secondary);
}
.warely-header .wp-block-navigation__responsive-container-open,
.warely-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------- Buttons */
/* Tasteful motion: ease the colour swap and add a gentle lift on hover so
   primary CTAs feel responsive without being showy. */
.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.2s ease, color 0.2s ease,
		transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgb(var(--warely-contrast-rgb) / 0.5);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}
/* Outline buttons sitting on a dark band turn light. */
.warely-cta .wp-block-button.is-style-outline > .wp-block-button__link,
.warely-btn-onlight > .wp-block-button__link {
	border-color: rgb(var(--warely-base-rgb) / 0.55);
	color: var(--wp--preset--color--base);
}
.warely-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.warely-btn-onlight > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------ Section grammar */
/* Centralise the eyebrow look so every band's kicker stays identical even if
   a pattern forgets the inline utility styles. (Inline styles still win where
   present; this is the shared floor.) */
.warely-eyebrow {
	margin-bottom: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------- Focus + interaction polish */
/* A single branded focus ring for every interactive element — visible-only so
   it never shows on mouse clicks, and high-contrast for WCAG. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 6px;
}
/* On the dark plum bands the rose ring can muddy — use the gold instead. */
.warely-header a:focus-visible,
.warely-cta a:focus-visible,
.warely-cta .wp-block-button__link:focus-visible,
.warely-footer a:focus-visible {
	outline-color: var(--wp--preset--color--secondary);
}
.warely-strands {
	display: flex;
	gap: 4px;
	justify-content: center;
	align-items: flex-end;
}
.warely-strands span {
	display: block;
	width: 2px;
	height: 24px;
	background: var(--wp--preset--color--secondary);
	opacity: 0.92;
}
.warely-strands span:nth-child(2),
.warely-strands span:nth-child(4) {
	height: 16px;
}
.warely-strands--footer {
	justify-content: flex-start;
}
.warely-strands--footer span {
	height: 18px;
}
.warely-strands--footer span:nth-child(2),
.warely-strands--footer span:nth-child(4) {
	height: 12px;
}

/* ------------------------------------------------------------------ Hero */
.warely-hero {
	overflow: hidden;
}
.warely-hero-img {
	margin: 0;
}
.warely-hero-img img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 32px 64px -30px rgb(var(--warely-contrast-rgb) / 0.45);
}
/* On-brand gradient placeholder shown when a client has no photo for a slot —
   re-skins with the active look (primary → contrast), never a wrong photo. */
.warely-imgph {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--contrast) 100%);
	border-radius: 20px;
	min-height: 340px;
	box-shadow: 0 32px 64px -30px rgb(var(--warely-contrast-rgb) / 0.45);
}
.warely-card__img .warely-imgph,
.warely-gallery .warely-imgph {
	min-height: 0;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
}

/* ---- Hero layout variants (the active look picks split | centered | overlay) ---- */
.warely-hero__cta {
	display: flex;
	gap: 0.9rem;
	flex-wrap: wrap;
	margin-top: 1.6rem;
}
.warely-hero__lead {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--warely-muted);
	margin: 1.1rem 0 0;
}
/* Centered: stacked, text-forward, with a wide image/gradient band below. */
.warely-hero--centered {
	text-align: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}
.warely-hero--centered .warely-hero__inner {
	max-width: 760px;
	margin: 0 auto;
}
.warely-hero--centered .warely-hero__lead {
	margin: 1.1rem auto 0;
	max-width: 620px;
}
.warely-hero--centered .warely-hero__cta {
	justify-content: center;
}
.warely-hero--centered .warely-hero-badge {
	margin-top: 1.4rem;
}
.warely-hero--centered .warely-hero__wide {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 1140px;
}
.warely-hero--centered .warely-hero__wide img,
.warely-hero--centered .warely-hero__wide.warely-imgph {
	display: block;
	width: 100%;
	height: clamp(260px, 34vw, 440px);
	min-height: 0;
	object-fit: cover;
	border-radius: 24px;
}
/* Overlay: full-bleed image/gradient behind centred, light text. */
.warely-hero--overlay {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(440px, 60vh, 620px);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	background-size: cover;
	background-position: center;
	text-align: center;
	overflow: hidden;
}
.warely-hero--overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(var(--warely-contrast-rgb) / 0.4), rgb(var(--warely-contrast-rgb) / 0.74));
}
.warely-hero--overlay.warely-hero--gradient {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--contrast) 100%);
}
.warely-hero--overlay.warely-hero--gradient::before {
	background: linear-gradient(180deg, transparent, rgb(var(--warely-contrast-rgb) / 0.28));
}
.warely-hero--overlay .warely-hero__content {
	position: relative;
	z-index: 1;
	max-width: 760px;
	color: var(--wp--preset--color--base);
}
.warely-hero--overlay .warely-hero__content h1 {
	color: var(--wp--preset--color--base);
}
.warely-hero--overlay .warely-hero__lead {
	color: var(--wp--preset--color--base);
	opacity: 0.94;
	margin: 1.1rem auto 0;
	max-width: 620px;
}
.warely-hero--overlay .warely-eyebrow--onlight {
	color: var(--wp--preset--color--base);
	opacity: 0.9;
}
.warely-hero--overlay .warely-hero__cta {
	justify-content: center;
}
.warely-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	padding: 0.45rem 1.05rem;
	border-radius: 999px;
	border: 1px solid rgb(var(--warely-primary-rgb) / 0.22);
	box-shadow: 0 2px 10px -4px rgb(var(--warely-contrast-rgb) / 0.12);
}
.warely-badge strong {
	color: var(--wp--preset--color--primary);
}
/* A leading comb-strand dot ties the badge to the brand motif. */
.warely-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	flex: 0 0 auto;
}
/* Sit the badge as a tight caption under the CTAs, not a floating row. */
.warely-hero-badge {
	margin-top: 1.1rem;
}

/* --------------------------------------------------------- Service cards */
.warely-cards .warely-card {
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	padding: 1rem 1.1rem 1.5rem;
	box-shadow: 0 18px 44px -32px rgb(var(--warely-contrast-rgb) / 0.45);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.warely-cards .warely-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 54px -30px rgb(var(--warely-contrast-rgb) / 0.5);
}
.warely-card__img {
	margin: 0 0 0.4rem;
}
.warely-card__img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
}
.warely-cardlink a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}
.warely-cardlink a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------ Why-us grid */
/* Trust badges: same surface + shadow family as the Services cards, with a
   gold top-rule as their distinguishing mark. Radius matched to the card
   family (16px) so they read as siblings. */
.warely-why .wp-block-column {
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	padding: 1.75rem 1.35rem;
	border-top: 3px solid var(--wp--preset--color--secondary);
	box-shadow: 0 18px 44px -34px rgb(var(--warely-contrast-rgb) / 0.4);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.warely-why .wp-block-column:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 52px -32px rgb(var(--warely-contrast-rgb) / 0.45);
}

/* ------------------------------------------------------- Story / about img */
.warely-about-img {
	margin: 0;
}
.warely-about-img img {
	width: 100%;
	max-height: 540px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 32px 64px -32px rgb(var(--warely-contrast-rgb) / 0.42);
}

/* --------------------------------------------------------- Inner page hero */
.warely-page-hero .wp-block-post-title {
	margin: 0;
}

/* -------------------------------------------------------------- Gallery */
.warely-gallery.wp-block-gallery {
	gap: 1rem;
}
.warely-gallery .wp-block-image,
.warely-gallery figure {
	overflow: hidden;
	border-radius: 12px;
}
.warely-gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	transition: transform 0.5s ease;
}
/* A slow, restrained zoom on hover — enough to feel alive, not gimmicky. */
.warely-gallery .wp-block-image:hover img,
.warely-gallery figure:hover img {
	transform: scale(1.05);
}

/* ------------------------------------------------------------------- FAQ */
.warely-faq__item {
	border-bottom: 1px solid rgb(var(--warely-contrast-rgb) / 0.14);
	padding: 1.15rem 0;
}
.warely-faq__item summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.warely-faq__item summary::-webkit-details-marker {
	display: none;
}
.warely-faq__item summary::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	border: 1.5px solid rgb(var(--warely-primary-rgb) / 0.4);
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
	font-size: 1.2rem;
	line-height: 1;
}
.warely-faq__item[open] summary::after {
	content: "\2212";
}
.warely-faq__item p {
	margin: 0.85rem 0 0;
	color: var(--wp--preset--color--tertiary);
	line-height: 1.85;
}

/* -------------------------------------------------------- Contact + map */
.warely-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.warely-form__row {
	display: flex;
	gap: 1.5rem;
}
.warely-form__row .warely-field {
	flex: 1;
}
.warely-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	color: var(--wp--preset--color--contrast);
}
/* Label text only — the small-caps utility treatment matches the brand's
   eyebrow language. Scoped to the <span> so it never bleeds into the input
   (which would force user-typed text to render uppercase). */
.warely-field > span {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.warely-field input::placeholder,
.warely-field textarea::placeholder {
	color: rgb(var(--warely-tertiary-rgb) / 0.7);
	text-transform: none;
	letter-spacing: normal;
}
.warely-field input,
.warely-field textarea {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgb(var(--warely-contrast-rgb) / 0.2);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	width: 100%;
	box-sizing: border-box; /* keep input (width:100% + padding) inside its column so Name/Email don't overlap */
}
.warely-field input:focus,
.warely-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgb(var(--warely-primary-rgb) / 0.15);
}
.warely-form__submit {
	align-self: flex-start;
}
.warely-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.warely-formnotice {
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.warely-formnotice--ok {
	background: rgb(var(--warely-secondary-rgb) / 0.18);
	color: #6b5418;
}
.warely-formnotice--err {
	background: rgb(var(--warely-primary-rgb) / 0.12);
	color: #9a2f50;
}
.warely-map {
	margin-top: 1.4rem;
}
.warely-map iframe {
	width: 100%;
	height: 300px;
	border: 0;
	border-radius: 14px;
}

/* --------------------------------------------------- WooCommerce products */
/* Classic loop cards (e.g. the homepage "Featured packages" shortcode output)
   sit on a WHITE band, so they stay image-forward rather than taking a white
   fill (white-on-white would erase them). They share the card FAMILY through
   type, radius, rounded imagery and a hover lift — cohesion via language, not
   a literal surface. The Shop grid sits on blush and DOES get a white surface;
   it has its own scoped rules under .warely-shop__main. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	box-sizing: border-box;
	text-align: center;
	transition: transform 0.22s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	margin-bottom: 1.1rem;
	box-shadow: 0 18px 44px -34px rgb(var(--warely-contrast-rgb) / 0.45);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	padding: 0 0.25rem;
	margin: 0 0 0.35rem;
}
.woocommerce ul.products li.product .price {
	display: block;
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	margin-bottom: 1rem;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
	border-radius: 999px;
}

/* ---------------------------------------------------------------- Footer */
.warely-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.warely-footer .warely-foot-nav a:hover {
	color: var(--wp--preset--color--secondary);
}
.warely-footer .warely-contactlines {
	color: rgb(var(--warely-base-rgb) / 0.85);
}

/* ----------------------------------------------------------- Process steps */
.warely-steps .wp-block-column {
	border-top: 2px solid rgb(var(--warely-secondary-rgb) / 0.4);
	padding-top: 1.25rem;
}
.warely-stepnum {
	margin: 0;
	font-size: 2.6rem;
	line-height: 1;
	font-weight: 500;
}

/* -------------------------------------------------------- Assurance strip */
.warely-assurance__item {
	margin: 0;
	display: flex;
	align-items: center;
}
.warely-assurance__item::before {
	content: "\2713";
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	margin-right: 0.5rem;
}

/* ----------------------------------------------------------- Opening hours */
.warely-hours {
	background: var(--wp--preset--color--base);
	border-radius: 14px;
	padding: 1.5rem 1.6rem;
	border-top: 3px solid var(--wp--preset--color--secondary);
}
.warely-hours__list {
	margin: 0;
}
.warely-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgb(var(--warely-contrast-rgb) / 0.1);
}
.warely-hours__row:last-child {
	border-bottom: 0;
}
.warely-hours__row dt {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.warely-hours__row dd {
	margin: 0;
	color: var(--wp--preset--color--tertiary);
	white-space: nowrap;
}

/* ------------------------------------------------------------ Responsive */
/* Collapse the primary nav to a hamburger earlier than the block default (600px)
   so the 600–781px tablet band isn't a cramped wrapped row. */
@media (max-width: 820px) {
	.warely-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.is-menu-open) {
		display: none;
	}
	.warely-header .wp-block-navigation__responsive-container-open {
		display: flex;
	}
	.warely-header .wp-block-navigation__responsive-container.is-menu-open {
		display: block;
	}
}

@media (max-width: 781px) {
	.warely-hero-img img {
		max-height: 340px;
	}
	.warely-form__row {
		flex-direction: column;
	}
	/* Outrank core's .wp-block-buttons{display:flex} (equal specificity, later source). */
	.warely-header .warely-header-cta {
		display: none;
	}
	.warely-map iframe {
		height: 240px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ===================================================== SHOP — layout grid */
.wp-block-columns.warely-shop {
	display: grid;
	grid-template-columns: 272px minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
	margin: 0;
}
.warely-shop > .wp-block-column { margin: 0; }
.warely-shop__sidebar {
	position: sticky;
	top: calc(72px + 1rem); /* clears the sticky .warely-header */
	align-self: start;
}
.warely-shop__main { min-width: 0; }

/* ===================================================== SHOP — filter card */
/* This Woo build renders product-filters in an OVERLAY shell (open-overlay
   trigger + __overlay > __overlay-dialog > __overlay-content). The dialog
   ships a fixed 318px width that overflows our 272px sidebar column and
   collides with the product grid. On desktop we collapse the overlay shell
   so the filter content flows inline at the column width. The off-canvas
   behaviour is restored below 820px (mobile) further down. */
.warely-filters,
.warely-filters .wc-block-product-filters__overlay,
.warely-filters .wc-block-product-filters__overlay-dialog,
.warely-filters .wc-block-product-filters__overlay-content {
	display: block;
	position: static;
	inset: auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-shadow: none;
	transform: none;
}
/* The visible card chrome lives on the block wrapper; inner shells stay bare. */
.warely-filters {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgb(var(--warely-contrast-rgb) / 0.08);
	border-radius: 18px;
	padding: 1.4rem 1.4rem 1.6rem;
	box-shadow: 0 18px 44px -34px rgb(var(--warely-contrast-rgb) / 0.45);
}
.warely-filters .wc-block-product-filters__overlay,
.warely-filters .wc-block-product-filters__overlay-dialog,
.warely-filters .wc-block-product-filters__overlay-content {
	background: transparent;
	border: 0;
	padding: 0;
}
/* Hide the off-canvas open trigger + its close button on desktop. */
.warely-filters .wc-block-product-filters__open-overlay,
.warely-filters .wc-block-product-filters__overlay-header {
	display: none;
}
.warely-filters__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 2px solid rgb(var(--warely-primary-rgb) / 0.18);
}
.warely-filter-group {
	padding: 1rem 0;
	border-bottom: 1px solid rgb(var(--warely-contrast-rgb) / 0.1);
}
.warely-filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.warely-filter-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* Category / Brand checkbox rows + count pills (skins Woo checkbox-list output) */
.warely-filters .wc-block-components-checkbox__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}
.warely-filters .wc-filter-element-label-list-count {
	flex: 0 0 auto;
	min-width: 1.6rem;
	text-align: center;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--tertiary);
	font-size: 0.75rem;
	font-weight: 700;
}

/* Price slider — skins the block slider */
.warely-filter-group .wc-block-components-price-slider__range-input-wrapper {
	height: 4px;
	margin: 1.4rem 0.4rem 1.1rem;
	background: rgb(var(--warely-contrast-rgb) / 0.14);
	border-radius: 999px;
}
.warely-filter-group .wc-block-components-price-slider__range-input-progress {
	height: 4px;
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
}

/* Price-slider layout — keep the $min [track] $max widget inside the 272px
   sidebar card. Woo's default lays it out as a 3-col grid (147px input |
   track | 147px input ≈ 318px) using NAMED grid lines, which overflows the
   ~225px inner card width and pushes the max input + rail past the right edge.
   We re-flow it: full-width track on its own row, then the two number inputs
   as an equal two-up beneath. Explicit grid-row/column overrides Woo's named
   placements; border-box + width:100% keep everything within the card. */
.warely-filters .wc-block-product-filter-price-slider__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.7rem;
	row-gap: 0.9rem;
	box-sizing: border-box;
	max-width: 100%;
	align-items: center;
}
.warely-filters .wc-block-product-filter-price-slider__range {
	grid-row: 1;
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.warely-filters .wc-block-product-filter-price-slider__left {
	grid-row: 2;
	grid-column: 1;
	min-width: 0;
	box-sizing: border-box;
}
.warely-filters .wc-block-product-filter-price-slider__right {
	grid-row: 2;
	grid-column: 2;
	min-width: 0;
	box-sizing: border-box;
}
.warely-filters .wc-block-product-filter-price-slider__left input.min,
.warely-filters .wc-block-product-filter-price-slider__right input.max {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Colour chips/swatches in the sidebar */
.warely-filters .wc-block-components-product-filter-chips__item {
	border-radius: 999px;
}
.warely-filters .wc-block-components-product-filter-chips__item--selected {
	box-shadow: 0 0 0 2px var(--wp--preset--color--surface),
		0 0 0 4px var(--wp--preset--color--secondary);
}

/* ===================================================== SHOP — top bar */
.warely-shop__topbar-main {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
	padding-bottom: 1rem; border-bottom: 1px solid rgb(var(--warely-contrast-rgb) / 0.1);
}
.warely-shop__main .woocommerce-result-count,
.warely-shop__main .wc-block-product-results-count {
	margin: 0; font-size: 0.92rem; color: var(--wp--preset--color--tertiary);
}
.warely-shop__main .woocommerce-ordering select,
.warely-shop__main select.orderby,
.warely-shop__main .wc-block-catalog-sorting select {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem; color: var(--wp--preset--color--contrast);
	padding: 0.55rem 2.4rem 0.55rem 1rem;
	border: 1px solid rgb(var(--warely-contrast-rgb) / 0.2); border-radius: 999px;
	background-color: var(--wp--preset--color--surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C9A24B' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center;
	-webkit-appearance: none; appearance: none; cursor: pointer;
}

/* Applied-filter chips */
.warely-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.warely-chips:empty { display: none; }
.warely-chips .wc-block-components-product-filter-removable-chip {
	display: inline-flex; align-items: center; gap: 0.45rem;
	padding: 0.35rem 0.8rem; border-radius: 999px;
	font-size: 0.82rem; font-weight: 600; text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background: rgb(var(--warely-primary-rgb) / 0.1);
	border: 1px solid rgb(var(--warely-primary-rgb) / 0.22);
}
.warely-chips .wc-block-components-product-filter-removable-chip:hover {
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface);
}
.warely-chips .wc-block-components-product-filter-clear-button {
	background: transparent; border: 1px solid rgb(var(--warely-secondary-rgb) / 0.5);
	color: var(--wp--preset--color--secondary); cursor: pointer; border-radius: 999px;
	padding: 0.35rem 0.8rem; font-size: 0.82rem; font-weight: 600;
}

/* ===================================================== SHOP — product cards */
.warely-shop__main ul.products,
.warely-shop__main .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.1rem, 2.4vw, 1.8rem);
	margin: 0; padding: 0; list-style: none;
}
.warely-shop__main ul.products::before,
.warely-shop__main ul.products::after { content: none; }
.warely-shop__main ul.products li.product,
.warely-shop__main .wc-block-product {
	width: auto !important; float: none !important; margin: 0 !important;
	text-align: left;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgb(var(--warely-contrast-rgb) / 0.07); border-radius: 16px;
	padding: 0.7rem 0.7rem 1.1rem;
	box-shadow: 0 14px 40px -34px rgb(var(--warely-contrast-rgb) / 0.5);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.warely-shop__main ul.products li.product:hover,
.warely-shop__main .wc-block-product:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 52px -32px rgb(var(--warely-contrast-rgb) / 0.55);
}
.warely-shop__main ul.products li.product img,
.warely-shop__main .wc-block-product img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: 12px; margin: 0 0 0.85rem;
}
.warely-shop__main .woocommerce-loop-product__title,
.warely-shop__main .wc-block-product .wp-block-post-title {
	padding: 0 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.12rem; font-weight: 500; line-height: 1.3;
	color: var(--wp--preset--color--contrast); margin: 0 0 0.3rem;
}
.warely-shop__main .wc-block-product .wp-block-post-title a { text-decoration: none; color: inherit; }
.warely-shop__main .price,
.warely-shop__main .wc-block-components-product-price {
	padding: 0 0.25rem; color: var(--wp--preset--color--secondary);
	font-weight: 700; font-size: 1.02rem;
}
.warely-shop__main .price del { color: var(--wp--preset--color--tertiary); font-weight: 400; margin-right: 0.35rem; }
.warely-shop__main .price ins { text-decoration: none; }
.warely-shop__main .wp-block-woocommerce-product-button { margin-top: 0.9rem; }
.warely-shop__main .wp-block-woocommerce-product-button .wp-element-button,
.warely-shop__main .wc-block-components-product-button a {
	width: 100%; border-radius: 999px;
}

/* (Removed dead .warely-card-dots / .glamora-dot — unused leftover.) */

/* ===================================================== SHOP — pagination */
.warely-shop__main .wp-block-query-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.warely-shop__main .wp-block-query-pagination a,
.warely-shop__main .wp-block-query-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 0.6rem; margin: 0 0.2rem;
	border-radius: 10px; font-size: 0.92rem; font-weight: 600; text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid rgb(var(--warely-contrast-rgb) / 0.12);
}
.warely-shop__main .wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.warely-shop__main .wp-block-query-pagination .current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 2px rgb(var(--warely-primary-rgb) / 0.35);
}

/* ===================================================== SHOP — responsive */
@media (max-width: 1024px) {
	.wp-block-columns.warely-shop { grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; }
	.warely-shop__main ul.products,
	.warely-shop__main .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	/* Sidebar drops above the grid and unsticks; the filter content already
	   flows inline (overlay shell collapsed above), so the filters read as a
	   full-width inline panel rather than an off-canvas drawer. */
	.wp-block-columns.warely-shop { grid-template-columns: 1fr; }
	.warely-shop__sidebar { position: static; }
}
@media (max-width: 560px) {
	.warely-shop__main ul.products,
	.warely-shop__main .wc-block-product-template { grid-template-columns: 1fr; }
}

/* ============================================ Panel review fixes (WCAG AA) */
/* Contrast-corrected "ink" shades, defined as named vars so they regenerate
   per client instead of baking un-tunable literals into element rules. */
:root {
	/* Ink shades sourced from theme.json settings.custom so each style variation re-tints them. */
	--warely-gold-ink: var(--wp--custom--ink--eyebrow, #a07a22); /* eyebrow/kicker ink, AA on light */
	--warely-muted: var(--wp--custom--ink--muted, #6e6862);      /* secondary body ink, AA on light */
}
/* Eyebrows keep the Ginger family but pass contrast on light bands. */
.warely-eyebrow,
.warely-eyebrow.has-secondary-color {
	color: var(--warely-gold-ink);
}
/* Safety net: if two same-tone bands ever end up adjacent (pattern reorder),
   show a faint accent seam. The template alternation is the real fix. */
main > .has-base-background-color + .has-base-background-color,
main > .has-surface-background-color + .has-surface-background-color {
	box-shadow: inset 0 1px 0 rgb(var(--warely-secondary-rgb) / 0.18);
}
/* Prices are transactional — read them in confident, high-contrast plum; gold
   stays a non-text accent only (top-rules, strands, fills on plum). */
.warely-shop__main .price,
.warely-shop__main .wc-block-components-product-price,
.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--contrast);
}
/* Workhorse body / secondary copy to a darker muted ink that passes AA. */
.warely-card p,
.warely-steps p,
.warely-faq__item p,
.warely-hours__row dd,
.has-tertiary-color.has-text-color {
	color: var(--warely-muted);
}
/* Comb-strand signature on dark bands — class was referenced but had no CSS,
   so the motif silently ran on autopilot. Bright full-opacity gold on plum. */
.warely-strands--light {
	justify-content: center;
}
.warely-strands--light span {
	background: var(--wp--preset--color--secondary);
	opacity: 1;
}
/* Tappable phone/email inherit their band's text colour (light in the footer,
   dark on the contact page) so they always pass contrast; underline = link. */
.warely-contactlink {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.warely-contactlink:hover {
	text-decoration: none;
}

/* ============================================ Panel review — round 2 polish */
/* RGB triads so alpha tints can reference the palette instead of baked literals
   (e.g. rgb(var(--warely-primary-rgb) / 0.4)). Regenerate per client. */
:root {
	/* RGB triads from theme.json settings.custom.rgb → style variations override them,
	   so every alpha tint below re-skins with the active look. */
	--warely-primary-rgb: var(--wp--custom--rgb--primary, 193 60 102);
	--warely-secondary-rgb: var(--wp--custom--rgb--secondary, 201 162 75);
	--warely-contrast-rgb: var(--wp--custom--rgb--contrast, 61 36 48);
	--warely-base-rgb: var(--wp--custom--rgb--base, 251 243 241);
	--warely-tertiary-rgb: var(--wp--custom--rgb--tertiary, 138 133 128);
}
/* Hero — tighten the display headline and frame the image with a restrained
   gold inner rule (the opening comb-strand motif is added in hero.php). */
.warely-hero h1 {
	letter-spacing: -0.02em;
	line-height: 1.04;
}
.warely-hero-img img {
	box-shadow: 0 32px 64px -30px rgb(var(--warely-contrast-rgb) / 0.45),
		inset 0 0 0 1px rgb(var(--warely-secondary-rgb) / 0.35);
}
/* Pre-style the WooCommerce sale badge so the first sale matches the card family
   (gold-on-plum passes contrast; mirrors .warely-badge). */
.warely-shop__main .wc-block-components-product-sale-badge,
.warely-featured .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.68rem;
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
}
/* Contact-form required marker + legend. */
.warely-req { color: var(--wp--preset--color--primary); }
.warely-form__legend {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	color: var(--warely-muted);
}

/* ===================================================== Promo banner slider */
.warely-promo-band { padding: 0; }
.warely-promo { position: relative; }
.warely-promo__viewport { overflow: hidden; }
.warely-promo__track {
	display: flex;
	transition: transform 0.55s ease;
}
.warely-promo__slide {
	flex: 0 0 100%;
	box-sizing: border-box; /* keep the 100% slide = viewport width so padding doesn't push content off-centre */
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 1rem 3.2rem;
	text-align: center;
}
.warely-promo__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 700;
	font-size: 0.72rem;
	color: var(--wp--preset--color--secondary);
}
.warely-promo__text {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.4;
}
.warely-promo__text strong { color: var(--wp--preset--color--secondary); }
.warely-promo__cta {
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	border-bottom: 1px solid rgb(var(--warely-secondary-rgb) / 0.6);
	padding-bottom: 1px;
}
.warely-promo__cta:hover { color: var(--wp--preset--color--secondary); }
.warely-promo__nav {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	background: transparent;
	border: 0;
	color: rgb(var(--warely-base-rgb) / 0.6);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}
.warely-promo__nav:hover { color: var(--wp--preset--color--base); }
.warely-promo__nav--prev { left: 0; }
.warely-promo__nav--next { right: 0; }
.warely-promo__dots {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	padding-bottom: 0.55rem;
}
.warely-promo__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgb(var(--warely-base-rgb) / 0.35);
}
.warely-promo__dot.is-active { background: var(--wp--preset--color--secondary); }
@media (max-width: 600px) {
	.warely-promo__slide { padding: 0.85rem 2.6rem; font-size: 0.92rem; }
	.warely-promo__nav { width: 34px; font-size: 1.4rem; }
}

/* ============================================= Mobile nav drawer (<=820px) */
/* Restyle ONLY the open core-nav overlay: a right-side ~88vw plum drawer with a
   centered (left-aligned) item stack, per-item icons, and a pinned Contact Us CTA.
   Every rule is scoped to .is-menu-open + the 820px collapse query so the desktop
   inline nav (right-justified next to the cart + Shop CTA) is never touched. */
@media (max-width: 820px) {
	.warely-header .warely-nav .wp-block-navigation__responsive-container.is-menu-open {
		inset: 0 0 0 auto;
		left: auto;
		width: 88vw;
		max-width: 400px;
		min-width: 300px;
		box-shadow: -16px 0 44px -18px rgb(var(--warely-contrast-rgb) / 0.55),
			0 0 0 100vmax rgb(var(--warely-contrast-rgb) / 0.5); /* paint-only scrim over the exposed sliver */
		border-left: 1px solid rgb(var(--warely-secondary-rgb) / 0.22);
		animation: warely-navin 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	@keyframes warely-navin {
		from { transform: translateX(100%); }
		to { transform: translateX(0); }
	}

	/* Dialog content -> flex column; top padding clears the absolute close (X). */
	.warely-header .warely-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;
		padding: 4.5rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
		justify-content: flex-start;
		align-items: stretch; /* core right-justifies the cross axis; stretch so the ul + CTA fill the width */
	}

	/* Centering = tidy vertical stack (fixes the right-justify + "Gallery & FAQ" clip). */
	/* Full-height dialog chain so the item stack can vertically centre and the CTA
	   pins to the true bottom (core leaves these auto-height → empty space below). */
	.warely-header .warely-nav .is-menu-open .wp-block-navigation__responsive-close,
	.warely-header .warely-nav .is-menu-open .wp-block-navigation__responsive-dialog {
		height: 100%;
	}
	.warely-header .warely-nav .is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 0.25rem;
		flex: 1;
		width: 100%; /* core sizes the ul to content + right-aligns it; force full width so items truly centre */
	}

	/* Per-row: centred icon + label, >=44px tap target. box-sizing so the 100% width
	   includes the padding — without it the padding overflows and shoves the centred
	   content to the right (the "not centered" bug). */
	.warely-header .warely-nav .is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.7rem;
		min-height: 48px;
		padding: 0.7rem 1.25rem;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
	.warely-header .warely-nav .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item .wp-block-navigation-item__content {
		border-top: 1px solid rgb(var(--warely-base-rgb) / 0.1);
	}

	/* Per-item icon via mask + currentColor (recolours with the label on hover/active). */
	.warely-header .warely-nav .is-menu-open .warely-navi > .wp-block-navigation-item__content::before {
		content: "";
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		background: currentColor;
		-webkit-mask: var(--ico) center / 22px no-repeat;
		mask: var(--ico) center / 22px no-repeat;
	}
	.warely-navi--home { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); }
	.warely-navi--shop { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
	.warely-navi--about { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E"); }
	.warely-navi--contact { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); }
	.warely-navi--gallery { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }

	/* Contact Us — pinned to the bottom of the flex column. */
	.warely-header .warely-nav .is-menu-open .warely-nav__cta {
		order: 5; /* render after the nav <ul> (which is flex:1) so the CTA pins to the bottom */
		margin-top: auto;
		width: 100%;
		padding-top: 1.5rem;
		border-top: 1px solid rgb(var(--warely-secondary-rgb) / 0.3);
	}
	.warely-header .warely-nav .is-menu-open .warely-nav__cta .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* @keyframes are NOT covered by the global prefers-reduced-motion transition:none. */
	@media (prefers-reduced-motion: reduce) {
		.warely-header .warely-nav .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
	}
}

/* The Contact Us CTA is in the DOM on every render — keep it off the desktop nav. */
@media (min-width: 821px) {
	.warely-nav__cta { display: none; }
}

/* Shop top-level sections sit flush (no blush gap between bands), like the homepage. */
main.warely-shopmain > * + * { margin-block-start: 0; }

/* ========================================= Shop promo banner (GLAMORA-style card) */
/* A contained, rounded two-column banner: copy + CTA on the left, a spa image filling
   the right edge. Rose-veil card on the blush band so it reads as a distinct hero. */
.warely-shopbanner {
	gap: 0;
	align-items: stretch;
	background: var(--wp--preset--gradient--rose-veil);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 34px 64px -44px rgb(var(--warely-contrast-rgb) / 0.5);
}
.warely-shopbanner > .warely-shopbanner__text {
	padding: clamp(1.9rem, 4vw, 3.6rem);
}
.warely-shopbanner__text h1 {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}
.warely-shopbanner > .warely-shopbanner__media {
	position: relative;
	padding: 0;
	min-height: 340px;
}
.warely-shopbanner__media .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.warely-shopbanner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 781px) {
	.warely-shopbanner > .warely-shopbanner__media {
		min-height: 220px;
		order: -1; /* image on top when the banner stacks on mobile */
	}
}