/**
 * artorganic.world global styles
 *
 * Applies the design tokens (tokens.css) to OceanWP, WooCommerce, Dokan and
 * Elementor. Loaded after OceanWP's stylesheets, but OceanWP prints its
 * Customizer CSS inline later in <head>, so source order alone doesn't win.
 *
 * WooCommerce often puts .woocommerce on <body> itself, so selectors here
 * never start "body .woocommerce ..." (that needs a descendant); the booster
 * below already outranks OceanWP's ".woocommerce ..." chains without it.
 *
 * Specificity strategy:
 * - Base typography uses low specificity ("body h1") so Elementor widgets
 *   with their own typography settings keep them.
 * - Components use "body:not(#ao-boost)", which counts as one ID, to beat
 *   OceanWP/WooCommerce class chains without !important. No element has
 *   that id; it exists only to raise specificity.
 */

/* ------------------------------------------------------------------ */
/* Plugin variable bridges                                             */
/* ------------------------------------------------------------------ */

body {
	/* Form field border: --line is too faint for a 3:1 boundary on paper. */
	--field-border: color-mix(in srgb, var(--muted) 70%, var(--paper));

	/* WooCommerce 8+ colour and form variables. */
	--wc-primary: var(--pigment);
	--wc-primary-text: var(--paper);
	--wc-secondary: var(--paper-2);
	--wc-secondary-text: var(--ink);
	--wc-highlight: var(--pigment);
	--wc-highlight-text: var(--paper);
	--wc-content-bg: var(--paper);
	--wc-subtext: var(--muted);
	--wc-form-border-color: var(--field-border);
	--wc-form-border-radius: var(--radius-sm);
	--wc-form-border-width: 1px;
	--wc-form-color-background: var(--paper);
	--wc-form-color-text: var(--ink);

	/* Dokan Pro colour scheme variables (its storefront buttons and links). */
	--dokan-button-text-color: var(--paper);
	--dokan-button-background-color: var(--pigment);
	--dokan-button-border-color: var(--pigment);
	--dokan-button-hover-text-color: var(--paper);
	--dokan-button-hover-background-color: var(--ink);
	--dokan-button-hover-border-color: var(--ink);
	--dokan-button-secondary-text-color: var(--ink);
	--dokan-button-secondary-background-color: transparent;
	--dokan-button-secondary-border-color: var(--ink);
	--dokan-button-secondary-hover-text-color: var(--paper);
	--dokan-button-secondary-hover-background-color: var(--ink);
	--dokan-button-secondary-hover-border-color: var(--ink);
	--dokan-button-tertiary-text-color: var(--pigment);
	--dokan-button-tertiary-hover-text-color: var(--ink);
	--dokan-button-tertiary-hover-background-color: var(--paper-2);
	--dokan-button-tertiary-hover-border-color: var(--paper-2);
	--dokan-link-color: var(--indigo);
	--dokan-link-hover-color: var(--pigment);
}

/* ------------------------------------------------------------------ */
/* Body                                                                */
/* ------------------------------------------------------------------ */

/* No sideways scrolling on any template. Oversized children (WooCommerce's
   1400px hover-zoom image, 100vw blocks next to a Windows scrollbar) could
   otherwise let the page shift left and push the header's left edge
   off-screen. clip, unlike hidden, keeps position: sticky working. */
html,
body {
	overflow-x: clip;
}

/* Elementor's kit sets a literal background on .elementor-kit-8. */
body,
body[class*="elementor-kit-"] {
	background-color: var(--paper);
}

/* Replaces the Customizer's Poppins 14px / weight 500 / 1.8px tracking. */
html body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: normal;
	color: var(--ink-soft);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background-color: var(--sand);
	color: var(--ink);
}

:focus-visible {
	outline: 2px solid var(--indigo);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Font families everywhere                                            */
/* ------------------------------------------------------------------ */

/*
 * Elementor widgets hard-code Poppins at up to (0,4,1) specificity, so these
 * use the booster. Icon fonts, Woo star ratings, SVGs and code are excluded so
 * their glyphs keep rendering.
 */

/* Fraunces: h1-h4 and anything inside them (e.g. Elementor icon-box title links). */
body:not(#ao-boost) :is(h1, h2, h3, h4) {
	font-family: var(--font-display);
}

body:not(#ao-boost) :is(h1, h2, h3, h4) :not(.fa, .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"], [class^="icon-"], [class*=" icon-"], [class^="eicon"], [class*=" eicon"], [class^="dashicons"], [class*=" dashicons"], [class^="um-faicon"], [class*=" um-faicon"], [class^="um-icon"], [class*=" um-icon"], svg, svg *) {
	font-family: inherit;
}

/* Inter: every other element, including h5/h6, menus, buttons and fields. */
body:not(#ao-boost) :not(h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 *, .fa, .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"], [class^="icon-"], [class*=" icon-"], [class^="eicon"], [class*=" eicon"], [class^="dashicons"], [class*=" dashicons"], [class^="um-faicon"], [class*=" um-faicon"], [class^="um-icon"], [class*=" um-icon"], .star-rating, .star-rating *, svg, svg *, code, pre, kbd, samp) {
	font-family: var(--font-body);
}

/* ------------------------------------------------------------------ */
/* Headings                                                            */
/* ------------------------------------------------------------------ */

body :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
}

body h1 { font-size: clamp(var(--fs-xl), 3vw + 1rem, var(--fs-3xl)); }
body h2 { font-size: clamp(var(--fs-lg), 2.4vw + 1rem, var(--fs-2xl)); }
body h3 { font-size: clamp(var(--fs-md), 1.2vw + 1rem, var(--fs-lg)); }
body h4 { font-size: var(--fs-md); }
body h5 { font-size: var(--fs-base); }
body h6 { font-size: var(--fs-sm); }

body .page-header .page-header-title,
body div.product .product_title {
	font-family: var(--font-display);
	font-size: clamp(var(--fs-lg), 2.4vw + 1rem, var(--fs-2xl));
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
}

/* Title band on archives (e.g. "Oil Painting"); OceanWP default is #f5f5f5. */
body:not(#ao-boost) .page-header {
	background-color: var(--paper-2);
}

body .page-header .page-subheading {
	font-size: var(--fs-base);
	color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Links                                                               */
/* ------------------------------------------------------------------ */

body a {
	color: var(--indigo);
}

body a:hover,
body a:focus-visible {
	color: var(--pigment);
}

body a:hover .owp-icon use {
	stroke: var(--pigment);
}

/* Running text: underline so links don't rely on colour alone. */
body :is(.entry-content, .elementor-widget-text-editor, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel) a:not(.button, .elementor-button, ul.products a, .dokan-store-wrap a) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* Leftover Customizer accent (#33d0de) spots                          */
/* ------------------------------------------------------------------ */

body .widget-title,
body blockquote,
body .wp-block-quote {
	border-color: var(--pigment);
}

body input[type="checkbox"]:checked::before {
	color: var(--pigment);
}


body:not(#ao-boost) .widget_price_filter .ui-slider .ui-slider-handle,
body:not(#ao-boost) .widget_price_filter .ui-slider .ui-slider-range {
	background-color: var(--pigment);
}

/*
 * Every other place the Customizer prints its #33d0de primary colour.
 * Same selectors as OceanWP's inline Customizer CSS (minus the .woocommerce
 * prefix), colour swapped, so the relationships between them are unchanged. Buttons, header menu, footer,
 * tabs, plain a:hover and the rules above are styled elsewhere and left out.
 */
body:not(#ao-boost) #respond #cancel-comment-reply-link:hover,
body:not(#ao-boost) #top-bar-content > a:hover,
body:not(#ao-boost) #top-bar-social li.oceanwp-email a:hover,
body:not(#ao-boost) #wp-calendar caption,
body:not(#ao-boost) .blog-entry.post .blog-entry-header .entry-title a:hover,
body:not(#ao-boost) .blog-entry.post .blog-entry-readmore a:hover,
body:not(#ao-boost) .blog-entry.thumbnail-entry .blog-entry-category a,
body:not(#ao-boost) .comment-author .comment-meta .comment-reply-link,
body:not(#ao-boost) .contact-info-widget.big-icons i,
body:not(#ao-boost) .contact-info-widget.default i,
body:not(#ao-boost) .custom-links-widget .oceanwp-custom-links li a:hover,
body:not(#ao-boost) .custom-links-widget .oceanwp-custom-links li a:hover:before,
body:not(#ao-boost) .dropcap,
body:not(#ao-boost) .posts-thumbnails-widget li a:hover,
body:not(#ao-boost) .product_meta .posted_in a:hover,
body:not(#ao-boost) .product_meta .tagged_as a:hover,
body:not(#ao-boost) .related-post-title a:hover,
body:not(#ao-boost) .sidr a:hover,
body:not(#ao-boost) .sidr-class-dropdown-toggle:hover,
body:not(#ao-boost) .sidr-class-menu-item-has-children.active > a,
body:not(#ao-boost) .sidr-class-menu-item-has-children.active > a > .sidr-class-dropdown-toggle,
body:not(#ao-boost) .single nav.post-navigation .nav-links .title,
body:not(#ao-boost) .social-widget li.oceanwp-email a:hover,
body:not(#ao-boost) .theme-heading .text::after,
body:not(#ao-boost) .theme-heading .text::before,
body:not(#ao-boost) .widget_layered_nav li a:hover ~ .count,
body:not(#ao-boost) .widget_product_categories li a:hover ~ .count,
body:not(#ao-boost) .widget_shopping_cart ul.cart_list li .owp-grid-wrap .owp-grid a.remove:hover,
body:not(#ao-boost) .oceanwp-grid-list a.active,
body:not(#ao-boost) .oceanwp-grid-list a:hover,
body:not(#ao-boost) .oceanwp-off-canvas-filter:hover,
body:not(#ao-boost) ul.products li.product li.category a:hover,
body:not(#ao-boost) ul.products li.product:not(.product-category) .woo-entry-buttons li a:hover,
body:not(#ao-boost) .woocommerce-checkout #payment .payment_method_paypal .about_paypal,
body:not(#ao-boost) .woocommerce-checkout #payment ul.payment_methods .wc_payment_method > input[type=radio]:first-child:checked + label:before,
body:not(#ao-boost) .woocommerce-checkout .woocommerce-info a,
body:not(#ao-boost) .woocommerce-MyAccount-navigation ul li a:before,
body:not(#ao-boost) ul.meta li a:hover {
	color: var(--pigment);
}

body:not(#ao-boost) .blog-entry.post .blog-entry-readmore a:hover .owp-icon use,
body:not(#ao-boost) .contact-info-widget.big-icons .owp-icon use,
body:not(#ao-boost) .contact-info-widget.default .owp-icon use,
body:not(#ao-boost) .single nav.post-navigation .nav-links .title .owp-icon use,
body:not(#ao-boost) .oceanwp-grid-list a.active .owp-icon use,
body:not(#ao-boost) .oceanwp-grid-list a:hover .owp-icon use {
	stroke: var(--pigment);
}

body:not(#ao-boost) #owp-checkout-timeline .active .timeline-wrapper,
body:not(#ao-boost) .contact-info-widget.big-icons li:hover .owp-icon,
body:not(#ao-boost) .contact-info-widget.big-icons li:hover i,
body:not(#ao-boost) .omw-modal .omw-close-modal,
body:not(#ao-boost) .owp-product-nav li a.owp-nav-link:hover,
body:not(#ao-boost) .post-quote-content,
body:not(#ao-boost) .thumbnail:hover .link-post-svg-icon,
body:not(#ao-boost) .thumbnail:hover i,
body:not(#ao-boost) .widget_layered_nav li.chosen a ~ .count,
body:not(#ao-boost) .widget_layered_nav li.chosen a:before,
body:not(#ao-boost) .widget_product_categories li.current-cat > a ~ .count,
body:not(#ao-boost) .widget_product_categories li.current-cat > a:before,
body:not(#ao-boost) div.product div.images .open-image,
body:not(#ao-boost) .woocommerce-error a,
body:not(#ao-boost) .woocommerce-info a,
body:not(#ao-boost) .woocommerce-message a {
	background-color: var(--pigment);
}

body:not(#ao-boost) #respond #cancel-comment-reply-link:hover,
body:not(#ao-boost) .blog-entry.large-entry .blog-entry-readmore a:hover,
body:not(#ao-boost) .contact-info-widget.big-icons li:hover .owp-icon,
body:not(#ao-boost) .contact-info-widget.big-icons li:hover i,
body:not(#ao-boost) .oceanwp-newsletter-form-wrap input[type="email"]:focus,
body:not(#ao-boost) .owp-product-nav li a.owp-nav-link:hover,
body:not(#ao-boost) .social-widget li.oceanwp-email a:hover,
body:not(#ao-boost) .widget_layered_nav li a:hover ~ .count,
body:not(#ao-boost) .widget_product_categories li a:hover ~ .count,
body:not(#ao-boost) .widget_shopping_cart ul.cart_list li .owp-grid-wrap .owp-grid a.remove:hover,
body:not(#ao-boost) .oceanwp-grid-list a.active,
body:not(#ao-boost) .oceanwp-grid-list a:hover,
body:not(#ao-boost) .oceanwp-off-canvas-filter:hover,
body:not(#ao-boost) .widget_layered_nav li.chosen a ~ .count,
body:not(#ao-boost) .widget_layered_nav li.chosen a:before,
body:not(#ao-boost) .widget_product_categories li.current-cat > a ~ .count,
body:not(#ao-boost) .widget_product_categories li.current-cat > a:before,
body:not(#ao-boost) ul.products li.product:not(.product-category) .woo-product-gallery .active a,
body:not(#ao-boost) ul.products li.product:not(.product-category) .woo-product-gallery a:hover {
	border-color: var(--pigment);
}

body:not(#ao-boost) #owp-checkout-timeline.arrow .active .timeline-wrapper:before {
	border-top-color: var(--pigment);
	border-bottom-color: var(--pigment);
}

body:not(#ao-boost) #owp-checkout-timeline.arrow .active .timeline-wrapper:after {
	border-left-color: var(--pigment);
	border-right-color: var(--pigment);
}

/* ------------------------------------------------------------------ */
/* Buttons: theme, WooCommerce, Dokan, WPForms, block buttons          */
/* ------------------------------------------------------------------ */

/* Search submits are icon buttons in the header and mobile menu; Dokan's
   "Get Support" is a secondary action (styled in Single product below). */
body:not(#ao-boost) :is(.theme-button, .button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .wp-element-button, .wp-block-button__link, .dokan-btn-theme):not(.searchform-submit, .search-submit, .dokan-store-support-btn, .dashicons) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: calc(var(--space-1) * 1.5) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--paper);
	background-color: var(--pigment);
	border: 1px solid var(--pigment);
	border-radius: var(--radius);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body:not(#ao-boost) :is(.theme-button, .button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .wp-element-button, .wp-block-button__link, .dokan-btn-theme):not(.searchform-submit, .search-submit, .dokan-store-support-btn, .dashicons):is(:hover, :focus-visible) {
	color: var(--paper);
	background-color: var(--ink);
	border-color: var(--ink);
}

body:not(#ao-boost) :is(.button, input[type="submit"], button[type="submit"], .wp-element-button, .dokan-btn-theme):is(:disabled, .disabled, [disabled]) {
	opacity: 0.5;
	pointer-events: none;
}

/* Secondary: outlined. */
body:not(#ao-boost) .dokan-btn-default,
body:not(#ao-boost) ul.products li.product :is(.button, .added_to_cart) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-1) var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--ink);
	background-color: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

body:not(#ao-boost) .dokan-btn-default:is(:hover, :focus-visible),
body:not(#ao-boost) ul.products li.product :is(.button, .added_to_cart):is(:hover, :focus-visible) {
	color: var(--paper);
	background-color: var(--ink);
	border-color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* Form inputs                                                         */
/* ------------------------------------------------------------------ */

/* "html body" outranks the Customizer's "form input[...]" (radius 3px). */
html body :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], select, textarea),
html body .select2-container .select2-selection {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	letter-spacing: normal;
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--field-border);
	border-radius: var(--radius-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html body :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], select, textarea):focus {
	border-color: var(--indigo);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 20%, transparent);
	outline: none;
}

html body ::placeholder {
	color: var(--muted);
	opacity: 1;
}

body label {
	color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* Header (OceanWP minimal header)                                     */
/* ------------------------------------------------------------------ */

body:not(#ao-boost) #site-header {
	background-color: var(--paper);
	border-bottom: 1px solid var(--line);
}

/* Top bar ("User Menu"); OceanWP default is #fff with a #f1f1f1 rule. */
body:not(#ao-boost) #top-bar-wrap {
	background-color: var(--paper);
	border-bottom-color: var(--line);
}

/*
 * Layout. The site uses content-full-screen, which drops the header's side
 * padding, and center-menu, which absolutely positions the menu across the
 * whole header so it squeezes and wraps. Replace both with a flex row.
 */
body:not(#ao-boost) #site-header #site-header-inner,
body:not(#ao-boost) #site-header-inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-block: var(--space-1);
	padding-inline: var(--space-2);
}

/* OceanWP's .clr clearfix pseudo-elements would become stray flex items. */
body:not(#ao-boost) #site-header #site-header-inner::before,
body:not(#ao-boost) #site-header #site-header-inner::after {
	content: none;
}

/* Logo: the Customizer sets the logo box to height:1px. */
body:not(#ao-boost) #site-header #site-logo {
	position: relative;
	left: auto;
	float: none;
	display: block;
	flex: none;
	height: auto;
	margin-left: 0;
	transform: none;
}

body:not(#ao-boost) #site-header #site-logo #site-logo-inner {
	display: block;
	height: auto;
}

body:not(#ao-boost) #site-header #site-logo #site-logo-inner a img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 56px;
}

/* Mobile (OceanWP default breakpoint: below 960px). */
@media (max-width: 959px) {
	body:not(#ao-boost) #site-header .oceanwp-mobile-menu-icon {
		float: none;
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-left: auto;
	}

	body:not(#ao-boost) #site-header .oceanwp-mobile-menu-icon a {
		line-height: 1.4;
	}
}

/* Desktop: logo, menu and cart/search icons on one line. */
@media (min-width: 960px) {
	body:not(#ao-boost) #site-header #site-header-inner,
	body:not(#ao-boost) #site-header-inner {
		padding-inline: var(--space-5);
	}

	body:not(#ao-boost) #site-header #site-logo #site-logo-inner a img {
		max-height: 72px;
	}

	/* Stays position:relative so the search dropdown still anchors to the menu. */
	body:not(#ao-boost) #site-header #site-navigation-wrap {
		position: relative;
		float: none;
		left: auto;
		right: auto;
		width: auto;
		margin-inline: auto;
		transform: none;
	}

	body:not(#ao-boost) #site-header #site-navigation-wrap .dropdown-menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	body:not(#ao-boost) #site-header #site-navigation-wrap .dropdown-menu > li {
		float: none;
		display: block;
		flex: none;
	}

	body:not(#ao-boost) #site-header #site-navigation-wrap .dropdown-menu > li > a {
		white-space: nowrap;
		padding: var(--space-1) calc(var(--space-1) * 1.5);
	}

	/* Cart and search links have no .menu-link, so the Additional CSS
	   line-height fix misses them and the Customizer's 1px applies. */
	body:not(#ao-boost) #site-header #site-navigation-wrap .dropdown-menu > li:is(.woo-menu-icon, .search-toggle-li) > a {
		display: inline-flex;
		align-items: center;
		line-height: 1.4;
	}
}

/* Narrow desktop: tighten so the row still fits at 960px. */
@media (min-width: 960px) and (max-width: 1199px) {
	body:not(#ao-boost) #site-header #site-header-inner,
	body:not(#ao-boost) #site-header-inner {
		gap: var(--space-2);
		padding-inline: var(--space-3);
	}

	body:not(#ao-boost) #site-header #site-logo #site-logo-inner a img {
		max-height: 56px;
	}

	body:not(#ao-boost) #site-header #site-navigation-wrap .dropdown-menu > li > a {
		font-size: var(--fs-xs);
		padding-inline: var(--space-1);
	}
}

/* Line-height is left to the menu-alignment fix in Additional CSS. */
body:not(#ao-boost) #site-navigation-wrap .dropdown-menu > li > a,
body:not(#ao-boost) .oceanwp-mobile-menu-icon a {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink-soft);
}

body:not(#ao-boost) #site-navigation-wrap .dropdown-menu > li > a:hover,
body:not(#ao-boost) #site-navigation-wrap .dropdown-menu > li.sfHover > a,
body:not(#ao-boost) .oceanwp-mobile-menu-icon a:hover {
	color: var(--pigment);
	background-color: transparent;
}

body:not(#ao-boost) #site-navigation-wrap .dropdown-menu > :is(.current-menu-item, .current-menu-ancestor) > a,
body:not(#ao-boost) #site-navigation-wrap .dropdown-menu > :is(.current-menu-item, .current-menu-ancestor) > a:hover {
	color: var(--ink);
}

body:not(#ao-boost) #site-header :is(.dropdown-menu > li > a, .oceanwp-mobile-menu-icon a, button.site-search-toggle) .owp-icon use {
	stroke: currentColor;
}

body:not(#ao-boost) #site-header .dropdown-menu .sub-menu,
body:not(#ao-boost) #site-header #searchform-dropdown,
body:not(#ao-boost) #site-header .current-shop-items-dropdown {
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--pigment);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--ink) 8%, transparent);
}

body:not(#ao-boost) #site-header .dropdown-menu ul li.menu-item {
	border-color: var(--line);
}

body:not(#ao-boost) #site-header .dropdown-menu ul li a.menu-link {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: normal;
	color: var(--ink-soft);
}

body:not(#ao-boost) #site-header .dropdown-menu ul li a.menu-link:hover {
	color: var(--pigment);
	background-color: var(--paper-2);
}

body:not(#ao-boost) #site-header .wcmenucart-details.count {
	color: var(--paper);
	background-color: var(--pigment);
}

body:not(#ao-boost) #site-header .wcmenucart-details.count::before {
	border-color: var(--pigment);
}

/* Mobile dropdown menu. */
body:not(#ao-boost) #mobile-dropdown {
	background-color: var(--paper);
	border-top: 1px solid var(--line);
}

body:not(#ao-boost) #mobile-dropdown ul li a {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--ink-soft);
}

body:not(#ao-boost) #mobile-dropdown ul li a:hover {
	color: var(--pigment);
}

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

body:not(#ao-boost) #footer-widgets,
body:not(#ao-boost) #footer-bottom {
	background-color: var(--ink);
	color: var(--sand);
}

body:not(#ao-boost) #footer-bottom {
	border-top: 1px solid color-mix(in srgb, var(--sand) 15%, transparent);
}

body:not(#ao-boost) :is(#footer-widgets, #footer-bottom) :is(#copyright, #footer-bottom-menu) {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: 1.6;
}

body:not(#ao-boost) #footer-widgets .footer-box .widget-title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	letter-spacing: normal;
	color: var(--paper);
}

body:not(#ao-boost) :is(#footer-widgets, #footer-bottom) a {
	color: var(--paper);
}

body:not(#ao-boost) :is(#footer-widgets, #footer-bottom) a:hover {
	color: var(--ochre);
}

/* ------------------------------------------------------------------ */
/* Product cards (WooCommerce loops, incl. Elementor product widgets)  */
/* ------------------------------------------------------------------ */

body:not(#ao-boost) ul.products li.product .product-inner {
	padding: var(--space-2);
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body:not(#ao-boost) ul.products li.product .product-inner:hover {
	border-color: var(--sand);
	box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Square images whatever the upload's aspect ratio (covers the hover-swap
   secondary image too, which OceanWP stretches over the main one). */
body:not(#ao-boost) ul.products li.product .image-wrap img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

/* Equal-height cards: OceanWP's grid rows are floats, so make them flex rows
   (column widths still come from its span_1_of_N / tablet / mobile classes).
   Elementor grids (.elementor-grid) already stretch their items; list view
   keeps its own layout. */
body:not(#ao-boost) ul.products.oceanwp-row.grid:not(.elementor-grid) {
	display: flex;
	flex-wrap: wrap;
}

/* OceanWP's .clr clearfix pseudo-elements would become stray flex items. */
body:not(#ao-boost) ul.products.oceanwp-row.grid:not(.elementor-grid)::before,
body:not(#ao-boost) ul.products.oceanwp-row.grid:not(.elementor-grid)::after,
body:not(#ao-boost) ul.products:not(.list) li.product :is(.product-inner, .woo-entry-inner)::before,
body:not(#ao-boost) ul.products:not(.list) li.product :is(.product-inner, .woo-entry-inner)::after {
	content: none;
}

/* Card fills its cell; price, rating and button sit at the bottom so the
   buttons line up across a row. */
body:not(#ao-boost) ul.products:not(.list) li.product {
	display: flex;
	flex-direction: column;
	float: none;
	/* OceanWP sets overflow:hidden on li.product; that square box (only a
	   few px larger than the rounded card) clipped the hover shadow into a
	   square. The card itself (.product-inner) carries radius and shadow. */
	overflow: visible;
}

body:not(#ao-boost) ul.products:not(.list) li.product .product-inner,
body:not(#ao-boost) ul.products:not(.list) li.product .woo-entry-inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

body:not(#ao-boost) ul.products:not(.list) li.product .woo-entry-inner > li.price-wrap {
	margin-top: auto;
}

body:not(#ao-boost) ul.products li.product li.category,
body:not(#ao-boost) ul.products li.product li.category a {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	color: var(--muted);
}

body:not(#ao-boost) ul.products li.product li.title :is(h2, a),
body:not(#ao-boost) ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--ink);
}

body:not(#ao-boost) ul.products li.product li.title a:hover {
	color: var(--pigment);
}

/* Card links (category, title): brand colours above, never underlined. */
body:not(#ao-boost) ul.products li.product :is(li.category, li.title) a {
	text-decoration: none;
}

/* Equal-size cards: every text row has a fixed height, so image, title,
   price, rating, description and button sit at the same height in every
   card. Category: one line with ellipsis. Title: two lines, clamped. */
body:not(#ao-boost) ul.products:not(.list) li.product li.category {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.4;
	font-style: normal;
}

body:not(#ao-boost) ul.products:not(.list) li.product li.title :is(h2, .woocommerce-loop-product__title) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2em * 1.3);
	margin: 0;
}

body:not(#ao-boost) ul.products:not(.list) li.product li.title a {
	display: inline;
}

/* Rating row keeps its height when a product has no reviews yet. */
body:not(#ao-boost) ul.products:not(.list) li.product .woo-entry-inner > li.rating {
	min-height: 1.618em;
}

/* Short description (OceanWP prints the product's short description only,
   in li.woo-desc, and hides it outside list view). Shown on cards, clamped
   to two lines; the box keeps its two-line height when it is empty. */
body:not(#ao-boost) ul.products:not(.list) li.product li.woo-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	height: calc(2em * 1.5);
	margin-bottom: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--muted);
	overflow-wrap: anywhere;
}

/* Woo star ratings: the glyphs live in OceanWP's "star" icon font; without
   it the raw "SSSSS" letters show. Pinned here so no font rule can win. */
body:not(#ao-boost) .star-rating,
body:not(#ao-boost) .star-rating::before,
body:not(#ao-boost) .star-rating span,
body:not(#ao-boost) .star-rating span::before {
	font-family: star !important;
	font-weight: 400;
	letter-spacing: normal;
}

body:not(#ao-boost) .star-rating span::before {
	color: var(--ochre);
}

body:not(#ao-boost) ul.products li.product .price {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--ink);
}

body:not(#ao-boost) ul.products li.product .price del {
	font-weight: 400;
	color: var(--muted);
}

body:not(#ao-boost) ul.products li.product .price ins {
	text-decoration: none;
}

/* Prices everywhere. OceanWP colours both .price and the inner .amount span
   #57bf6d (green), so set both; struck-through old prices stay muted. */
body:not(#ao-boost) :is(.price, .amount, .woocommerce-Price-amount) {
	color: var(--ink);
}

body:not(#ao-boost) .price del,
body:not(#ao-boost) del :is(.amount, .woocommerce-Price-amount) {
	color: var(--muted);
}

/* Grid/list view toggle: neutral at rest; active/hover use pigment (above). */
body:not(#ao-boost) .oceanwp-grid-list a {
	color: var(--muted);
	border-color: var(--line);
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) .oceanwp-grid-list a .owp-icon use {
	stroke: currentColor;
}

body:not(#ao-boost) span.onsale {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--paper);
	background-color: var(--pigment);
	border-radius: var(--radius-sm);
}

/* Quick view bar on loop images: translucent ink instead of OceanWP's grey
   uppercase band, with the image's rounded bottom corners. */
body:not(#ao-boost) .owp-quick-view {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--paper);
	background-color: color-mix(in srgb, var(--ink) 75%, transparent);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

body:not(#ao-boost) .owp-quick-view:is(:hover, :focus-visible) {
	color: var(--paper);
	background-color: var(--ink);
}

/* Pagination (shop loop, Query Loop block, post page links). The Customizer
   saved the font size as 1px, which hid the numbers. */
body:not(#ao-boost) :is(a, span).page-numbers,
body:not(#ao-boost) .page-links span {
	box-sizing: border-box;
	min-width: 40px;
	padding: 0 var(--space-1);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 38px;
	color: var(--ink);
	background-color: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) a.page-numbers:is(:hover, :focus-visible),
body:not(#ao-boost) .page-links a:is(:hover, :focus-visible) span {
	color: var(--ink);
	background-color: var(--paper-2);
	border-color: var(--sand);
}

body:not(#ao-boost) .page-numbers.current,
body:not(#ao-boost) .page-numbers.current:hover,
body:not(#ao-boost) .page-links > span {
	color: var(--paper);
	background-color: var(--pigment);
	border-color: var(--pigment);
}

body:not(#ao-boost) span.page-numbers.dots {
	border-color: transparent;
}

/* Query Loop pagination: wpautop put a <br> after each number, stacking them. */
body:not(#ao-boost) .wp-block-query-pagination br {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Single product (Elementor Pro product template)                     */
/* ------------------------------------------------------------------ */

/* One title: the template's h1 beside the image. The band keeps only the
   breadcrumbs, so OceanWP's duplicate band h1 is hidden on product pages. */
body.single-product:not(#ao-boost) .page-header .page-header-title {
	display: none;
}

body.single-product:not(#ao-boost) .page-header {
	padding-block: var(--space-2);
}

body.single-product:not(#ao-boost) .page-header .site-breadcrumbs {
	position: static;
	transform: none;
	margin: 0;
}

body:not(#ao-boost) [data-elementor-type="product"] .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(var(--fs-lg), 1.5vw + 1rem, var(--fs-xl));
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
}

/* Even rhythm in the summary: Elementor's widget gap only, no stray margins
   from the paragraphs and price inside each widget. */
body:not(#ao-boost) [data-elementor-type="product"] .elementor-widget-container > :first-child,
body:not(#ao-boost) [data-elementor-type="product"] .woocommerce-product-details__short-description > :first-child {
	margin-top: 0;
}

body:not(#ao-boost) [data-elementor-type="product"] .elementor-widget-container > :last-child,
body:not(#ao-boost) [data-elementor-type="product"] .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

/* Main image and thumbnails: same rounding as product cards. */
body:not(#ao-boost) .woocommerce-product-gallery :is(.flex-viewport, .woocommerce-product-gallery__image) {
	border-radius: var(--radius);
	overflow: hidden;
}

body:not(#ao-boost) .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: var(--space-2);
	right: var(--space-2);
	width: 40px;
	height: 40px;
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: 50%;
	box-shadow: 0 2px var(--space-1) color-mix(in srgb, var(--ink) 10%, transparent);
}

body:not(#ao-boost) .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	line-height: 38px;
}

/* Add-to-cart row: quantity, primary and secondary button on one baseline.
   Variable and grouped products keep WooCommerce's own form layout. */
body:not(#ao-boost) form.cart:not(.variations_form, .grouped_form),
body:not(#ao-boost) .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

body:not(#ao-boost) form.cart:not(.variations_form, .grouped_form) > *,
body:not(#ao-boost) .woocommerce-variation-add-to-cart > * {
	margin: 0;
}

body:not(#ao-boost) form.cart > p:empty {
	display: none;
}

/* Quantity: one 44px pill matching the button height (OceanWP draws three
   36px grey squares). */
body:not(#ao-boost) .quantity {
	display: inline-flex;
	align-items: stretch;
	float: none;
	height: 44px;
	background-color: var(--paper);
	border: 1px solid var(--field-border);
	border-radius: var(--radius);
	overflow: hidden;
}

body:not(#ao-boost) .quantity:focus-within {
	border-color: var(--indigo);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 20%, transparent);
}

body:not(#ao-boost) .quantity :is(.qty, .minus, .plus) {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 40px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1;
	text-decoration: none;
	color: var(--ink);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body:not(#ao-boost) .quantity .qty {
	width: 48px;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

body:not(#ao-boost) .quantity .qty:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

body:not(#ao-boost) .quantity .qty::-webkit-inner-spin-button,
body:not(#ao-boost) .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body:not(#ao-boost) .quantity :is(.minus, .plus) {
	color: var(--ink-soft);
}

body:not(#ao-boost) .quantity :is(.minus, .plus):hover {
	color: var(--ink);
	background-color: var(--paper-2);
}

/* Dokan "Get Support": same size as the primary button, outlined. */
body:not(#ao-boost) .dokan-store-support-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--space-1) * 1.5) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
	background-color: transparent;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	transition: background-color 0.2s ease, color 0.2s ease;
}

body:not(#ao-boost) .dokan-store-support-btn:is(:hover, :focus-visible) {
	color: var(--paper);
	background-color: var(--ink);
}

/* WooPayments express checkout (Apple Pay): match our corner radius. Its
   height comes from WooPayments' own button-size setting inside a Stripe
   iframe and isn't forced here. */
body:not(#ao-boost) #wcpay-express-checkout-element {
	border-radius: var(--radius);
	overflow: hidden;
}

/* Tabs: one hairline, normal-case Inter, pigment underline on the active tab.
   Covers OceanWP, WooCommerce core and Elementor Pro's tab borders. */
body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs {
	border-top: 0;
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--space-4);
}

body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs::before,
body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs li::before,
body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs li {
	background-color: transparent;
	border: 0;
}

body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs li a {
	padding: var(--space-2);
	margin-bottom: -1px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--muted);
	border-top: 0;
	border-bottom: 2px solid transparent;
}

body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ink);
}

body:not(#ao-boost) div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ink);
	border-bottom-color: var(--pigment);
}

body:not(#ao-boost) div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	border-top: 0;
	margin-top: 0;
}

body:not(#ao-boost) .woocommerce-Tabs-panel h2 {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* Page title band: same side padding as the header                    */
/* ------------------------------------------------------------------ */

/* Title left, breadcrumbs right, in normal flow (OceanWP positions the
   breadcrumbs absolutely at the container edge, where they can clip). */
body:not(#ao-boost) .page-header .page-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding-inline: var(--space-2);
}

body:not(#ao-boost) .page-header .page-header-inner::before,
body:not(#ao-boost) .page-header .page-header-inner::after {
	content: none;
}

body:not(#ao-boost) .page-header .site-breadcrumbs {
	position: static;
	top: auto;
	right: auto;
	transform: none;
	margin: 0;
	max-width: 100%;
}

/* Breadcrumbs never get squeezed or cut: the trail keeps its natural width
   (capped at the row) and, when title + trail don't fit, drops to its own
   line (the row wraps). Plain inline flow inside: a wrapping flex <ol> in a
   shrinkable flex item gets under-measured in WebKit, and OceanWP's
   overflow-wrap:anywhere then broke "Shop" mid-word ("Home > S").
   Crumbs never break inside; the last one (long product names) wraps at
   spaces only. */
body:not(#ao-boost) .page-header .site-breadcrumbs {
	flex: 0 0 auto;
	max-width: 100%;
	min-width: 0;
	line-height: 1.5;
	overflow: visible;
	overflow-wrap: normal;
	white-space: normal;
}

body:not(#ao-boost) .page-header .site-breadcrumbs ol {
	display: block;
}

body:not(#ao-boost) .page-header .site-breadcrumbs ol li {
	display: inline;
	overflow-wrap: normal;
	word-break: normal;
}

body:not(#ao-boost) .page-header .site-breadcrumbs ol li:not(.trail-end) {
	white-space: nowrap;
}

body:not(#ao-boost) .page-header .page-header-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (min-width: 960px) {
	body:not(#ao-boost) .page-header .page-header-inner {
		padding-inline: var(--space-5);
	}
}

@media (min-width: 960px) and (max-width: 1199px) {
	body:not(#ao-boost) .page-header .page-header-inner {
		padding-inline: var(--space-3);
	}
}

/* ------------------------------------------------------------------ */
/* Notices (added to basket, coupon prompt, errors)                    */
/* ------------------------------------------------------------------ */

body:not(#ao-boost) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink-soft);
	background-color: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: none;
	outline: 0;
}

body:not(#ao-boost) ul.woocommerce-error {
	border-color: var(--pigment);
}

body:not(#ao-boost) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	color: var(--pigment);
}

/* Plain links inside notices (e.g. "Click here to enter your code"): an
   underlined pigment link, not OceanWP's floated button-like link. */
body:not(#ao-boost) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
	display: inline;
	float: none;
	min-height: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	color: var(--pigment);
	background: none;
	border: 0;
	border-radius: 0;
}

body:not(#ao-boost) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button):hover {
	color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* Cart & checkout                                                     */
/* ------------------------------------------------------------------ */

/* The right sidebar on these pages is empty (no widgets): go full width. */
body:is(.woocommerce-cart, .woocommerce-checkout):not(#ao-boost) #right-sidebar {
	display: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout):not(#ao-boost) #primary {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-inline: 0;
	border: 0;
}

/* One solid button per page ("Proceed to checkout", "Place order" carry
   .alt); every other button here is secondary, outlined. */
body:is(.woocommerce-cart, .woocommerce-checkout):not(#ao-boost) .button:not(.alt) {
	color: var(--ink);
	background-color: transparent;
	border-color: var(--ink);
}

body:is(.woocommerce-cart, .woocommerce-checkout):not(#ao-boost) .button:not(.alt):is(:hover, :focus-visible) {
	color: var(--paper);
	background-color: var(--ink);
	border-color: var(--ink);
}

/* Tables: paper-2 heads, normal-case headers, token hairlines. */
body:not(#ao-boost) table.shop_table {
	border-color: var(--line);
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) table.shop_table :is(th, td) {
	border-color: var(--line);
}

body:not(#ao-boost) table.shop_table thead,
body:not(#ao-boost) table.shop_table thead th,
body:not(#ao-boost) .woocommerce-checkout-review-order-table tfoot th,
body:not(#ao-boost) .shop_table.order_details tfoot th,
body:not(#ao-boost) .shop_table.customer_details th {
	background-color: var(--paper-2);
}

body:not(#ao-boost) table.shop_table th {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}

body:not(#ao-boost) #order_review table.shop_table tbody td {
	background-color: transparent;
}

/* Basket totals box. */
body:not(#ao-boost) .cart-collaterals .cart_totals {
	background-color: var(--paper);
	border-color: var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

body:not(#ao-boost) .cart-collaterals h2,
body:not(#ao-boost) .woocommerce-checkout h3#order_review_heading,
body:not(#ao-boost) .woocommerce-checkout #customer_details h3 {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
	border-color: var(--line);
}

body:not(#ao-boost) .cart-collaterals h2 {
	text-align: left;
	background-color: var(--paper-2);
}

body:not(#ao-boost) .cart-collaterals .shipping-calculator-button {
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--pigment);
	border-bottom-color: currentColor;
}

/* Checkout payment area (WooCommerce core and OceanWP greys). */
body:not(#ao-boost) .woocommerce-checkout #payment {
	background-color: var(--paper-2);
	border-radius: var(--radius);
}

body:not(#ao-boost) .woocommerce-checkout #payment ul.payment_methods {
	border-color: var(--line);
}

body:not(#ao-boost) .woocommerce-checkout #payment ul.payment_methods li,
body:not(#ao-boost) .woocommerce-checkout #payment ul.payment_methods li:hover {
	background-color: var(--paper-2);
}

body:not(#ao-boost) .woocommerce-checkout #payment div.payment_box {
	color: var(--ink-soft);
	background-color: var(--paper);
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--paper);
}

/* Coupon fields (cart and checkout): same box as every other input.
   OceanWP shrinks them to a 32/36px line-height. */
body:not(#ao-boost) :is(.coupon .input-text, form.checkout_coupon input.input-text) {
	box-sizing: border-box;
	height: auto;
	min-height: 40px;
	padding: 6px 12px;
	line-height: 1.8;
	font-size: var(--fs-base);
	vertical-align: middle;
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--field-border);
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) :is(.coupon .input-text, form.checkout_coupon input.input-text):focus {
	border-color: var(--indigo);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 20%, transparent);
	outline: none;
}

body:not(#ao-boost) .coupon .input-text {
	max-width: 260px;
}

/* Country/state dropdowns (select2): look like our text inputs. */
body:not(#ao-boost) .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: auto;
	min-height: 44px;
	padding: 6px 12px;
	background-color: var(--paper);
	border: 1px solid var(--field-border);
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 var(--space-3) 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.8;
	color: var(--ink);
}

body:not(#ao-boost) .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: var(--space-1);
	height: 100%;
}

body:not(#ao-boost) .select2-container--focus .select2-selection--single,
body:not(#ao-boost) .select2-container--open .select2-selection--single {
	border-color: var(--indigo);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 20%, transparent);
}

body:not(#ao-boost) .select2-dropdown {
	font-family: var(--font-body);
	background-color: var(--paper);
	border-color: var(--field-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

body:not(#ao-boost) .select2-results__option--highlighted[aria-selected],
body:not(#ao-boost) .select2-results__option--highlighted[data-selected] {
	color: var(--paper);
	background-color: var(--indigo);
}

/* ------------------------------------------------------------------ */
/* Empty sidebars (store listing, store pages, My Account, ...)        */
/* ------------------------------------------------------------------ */

/* A right sidebar with no widgets leaves an empty column and a divider:
   hide it and let the content span the full width. Pages with real
   sidebar widgets are unaffected. */
body:not(#ao-boost) #right-sidebar:not(:has(.sidebar-box, .widget)) {
	display: none;
}

/* :has() can't be nested, hence "has a right sidebar" + "has no widget in it". */
body:not(#ao-boost):has(#right-sidebar):not(:has(#right-sidebar :is(.sidebar-box, .widget))) #primary {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-inline: 0;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Dokan storefront                                                    */
/* ------------------------------------------------------------------ */

/* Dokan Pro prints its colour scheme inline with !important (#7047EB),
   so colour properties here need !important to win. Colours only. */
body:not(#ao-boost) .dokan-btn-theme {
	color: var(--paper) !important;
	background-color: var(--pigment) !important;
	border-color: var(--pigment) !important;
}

body:not(#ao-boost) .dokan-btn-theme:is(:hover, :focus, :active, .active) {
	color: var(--paper) !important;
	background-color: var(--ink) !important;
	border-color: var(--ink) !important;
}

/* One solid button per area: Follow (and Apply in the filter). Get Support,
   Share, Send Message, product Search and the Filter toggle are outlined. */
body:not(#ao-boost) :is(.dokan-store-support-btn, .dokan-share-btn, .dokan-store-list-filter-button, .search-store-products, input[name="store_message_send"]).dokan-btn-theme {
	color: var(--ink) !important;
	background-color: transparent !important;
	border-color: var(--ink) !important;
}

body:not(#ao-boost) :is(.dokan-store-support-btn, .dokan-share-btn, .dokan-store-list-filter-button, .search-store-products, input[name="store_message_send"]).dokan-btn-theme:is(:hover, :focus, :active) {
	color: var(--paper) !important;
	background-color: var(--ink) !important;
	border-color: var(--ink) !important;
}

/* Round icon button ("Visit Store" arrow): keeps its dashicons glyph. */
body:not(#ao-boost) .dokan-btn-theme.dokan-btn-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	border: 1px solid;
	border-radius: 50%;
}

body:not(#ao-boost) #dokan-store-listing-filter-wrap .right .toggle-view .active {
	color: var(--pigment) !important;
}

/* Store listing: filter bar and filter panel. */
body:not(#ao-boost) #dokan-store-listing-filter-wrap,
body:not(#ao-boost) #dokan-store-listing-filter-form-wrap {
	background-color: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: none;
}

body:not(#ao-boost) #dokan-store-listing-filter-form-wrap::before,
body:not(#ao-boost) #dokan-store-listing-filter-form-wrap::after {
	display: none;
}

body:not(#ao-boost) :is(#dokan-store-listing-filter-form-wrap .store-search-input, #stores_orderby, .dokan-store-products-filter-search, .dokan-store-products-ordeby select.orderby) {
	box-sizing: border-box;
	min-height: 44px;
	padding: 6px 12px;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--field-border);
	border-radius: var(--radius-sm);
	box-shadow: none;
}

body:not(#ao-boost) :is(#dokan-store-listing-filter-form-wrap .store-search-input, #stores_orderby, .dokan-store-products-filter-search, .dokan-store-products-ordeby select.orderby):focus {
	border-color: var(--indigo);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 20%, transparent);
	outline: none;
}

body:not(#ao-boost) .dokan-toogle-checkbox {
	background-color: var(--sand);
}

body:not(#ao-boost) .dokan-toogle-checkbox:checked {
	background-color: var(--pigment);
}

body:not(#ao-boost) #dokan-store-listing-filter-form-wrap .dokan-stars .dashicons {
	color: var(--ochre);
}

/* Store listing: cards. Dokan's own rules start with #dokan-seller-listing-wrap,
   so ours repeat that id to outrank them. */
body:not(#ao-boost) #dokan-seller-listing-wrap .dokan-single-seller .store-wrapper {
	overflow: hidden;
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: none;
}

body:not(#ao-boost) #dokan-seller-listing-wrap .dokan-single-seller .store-footer {
	background: var(--paper);
	border-top: 1px solid var(--line);
}

body:not(#ao-boost) #dokan-seller-listing-wrap .dokan-single-seller .featured-label {
	box-shadow: none;
	padding: 2px var(--space-1);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--paper);
	background: var(--pigment);
	border-radius: var(--radius-sm);
}

/* Store page: header, tabs, sidebar. */
body:not(#ao-boost) .dokan-single-store .profile-frame {
	overflow: hidden;
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

body:not(#ao-boost) .dokan-single-store .profile-frame .profile-info-summery-wrapper {
	background-color: var(--paper);
}

body:not(#ao-boost) .dokan-single-store .profile-img.profile-img-square img {
	border: 3px solid var(--paper);
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) .dokan-single-store .dokan-store-info {
	font-size: var(--fs-sm);
	color: var(--muted);
}

body:not(#ao-boost) .dokan-store-tabs,
body:not(#ao-boost) .dokan-store-tabs ul.dokan-modules-button {
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

body:not(#ao-boost) .dokan-store-tabs ul.dokan-list-inline {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 var(--space-3);
	padding: 0;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
}

body:not(#ao-boost) .dokan-store-tabs ul.dokan-list-inline li {
	margin: 0;
	background-color: transparent;
	border: 0;
}

body:not(#ao-boost) .dokan-store-tabs ul.dokan-list-inline li a {
	display: block;
	margin-bottom: -1px;
	padding: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--muted);
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
}

body:not(#ao-boost) .dokan-store-tabs ul.dokan-list-inline li a:hover {
	color: var(--ink);
	border-bottom-color: var(--pigment);
}

/* Store layout never wider than the page. Dokan makes .dokan-store-wrap a
   flex container whose items keep min-width: auto, so one unbreakable child
   (fixed-width field, banner, button row) can widen the whole page and shift
   the header and title band off-screen. */
body:not(#ao-boost) .dokan-store-wrap {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: clip;
}

body:not(#ao-boost) .dokan-store-wrap > :is(.dokan-store-sidebar, .dokan-single-store),
body:not(#ao-boost) .dokan-store-wrap :is(.profile-frame, .profile-info-box, .dokan-store-tabs, .dokan-store-products-filter-area) {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

body:not(#ao-boost) .dokan-store-wrap img {
	max-width: 100%;
}

body:not(#ao-boost) .dokan-store-products-filter-area .product-name-search {
	max-width: 100%;
}

/* Sidebar: wide enough for its form, and no mid-word line breaks. */
body:not(#ao-boost) .dokan-store-wrap.layout-left #dokan-secondary {
	min-width: min(260px, 100%);
}

body:not(#ao-boost) .dokan-store-sidebar,
body:not(#ao-boost) .dokan-store-sidebar * {
	word-break: normal;
	overflow-wrap: break-word;
}

/* Contact form privacy text: Dokan sets word-break: break-all here with an
   ID selector, which split "throughout" as "thro / ughout". */
body:not(#ao-boost) .dokan-store-widget form#dokan-form-contact-seller .dokan-privacy-policy-text p {
	word-break: normal;
	overflow-wrap: break-word;
}

body:not(#ao-boost) .dokan-store-sidebar .widget-title {
	padding-left: 0;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
	border-left: 0;
}

/* ------------------------------------------------------------------ */
/* My Account (logged out)                                             */
/* ------------------------------------------------------------------ */

body:not(#ao-boost) .owp-account-links li .owp-account-link {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	color: var(--muted);
	text-decoration: none;
	opacity: 1;
}

body:not(#ao-boost) .owp-account-links li .owp-account-link:is(.current, :hover) {
	color: var(--ink);
}

body:not(#ao-boost) .owp-account-links li.or {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--muted);
	border: 1px solid var(--line);
}

/* OceanWP draws its own 2px box around the form column; the form itself
   carries the border now. */
body:not(#ao-boost) #customer_login > div {
	padding: 0;
	border: 0;
}

body:not(#ao-boost) :is(form.woocommerce-form-login, form.woocommerce-form-register) {
	padding: var(--space-4);
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* "Remember me" left, "Log in" right, with room between them. The #customer_login
   variant outranks OceanWP's "#customer_login .col-1 .form-row { inline-block }". */
body:not(#ao-boost) form.woocommerce-form-login p.form-row:has(.woocommerce-form-login__submit),
body:not(#ao-boost) #customer_login form.woocommerce-form-login p.form-row:has(.woocommerce-form-login__submit) {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

body:not(#ao-boost) form.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
}

body:not(#ao-boost) form.woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
}

body:not(#ao-boost) form.woocommerce-form-login .woocommerce-LostPassword,
body:not(#ao-boost) #customer_login form.woocommerce-form-login .woocommerce-LostPassword {
	display: block;
	position: static;
	inset: auto;
	transform: none;
	float: none;
	line-height: 1.5;
	margin: var(--space-2) 0 0;
	text-align: right;
}

/* ------------------------------------------------------------------ */
/* My Account page (brand/mockup-account.html)                         */
/* ------------------------------------------------------------------ */

/*
 * Templates: woocommerce/myaccount/*.php in the child theme. Scoped to
 * body.ao-account-page (functions.php), where OceanWP's title band and
 * sidebar are off and its "side" account style is used (no toggle). The
 * section above still styles login forms elsewhere (checkout); these rules
 * outrank it on account pages. Buttons follow the mockup: indigo pills.
 */

body.ao-account-page:not(#ao-boost) #content-wrap {
	padding-top: var(--space-8);
	padding-bottom: var(--space-10);
}

body.ao-account-page:not(#ao-boost) .woocommerce-notices-wrapper:not(:empty) {
	max-width: 1240px;
	margin: 0 auto var(--space-3);
}

body.ao-account-page:not(#ao-boost) .ao-account {
	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	color: var(--ink-soft);
}

/* Fraunces headings; outranks OceanWP's side-style "#customer_login h2". */
body.ao-account-page:not(#ao-boost) .ao-account .ao-account__title,
body.ao-account-page:not(#ao-boost) #customer_login h2.ao-account__title {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-size: clamp(28px, 2vw + 1rem, var(--fs-xl));
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--ink);
	border: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__lede {
	margin: 0;
	color: var(--ink-soft);
}

/* --- Panels: sign in, register, lost/reset password -------------------- */

body.ao-account-page:not(#ao-boost) .ao-account--guest {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-4);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: var(--space-5);
	border-radius: var(--radius-lg);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel--login {
	flex: 1 1 380px;
	background-color: var(--paper);
	border: 1px solid var(--line);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel--register {
	flex: 1 1 460px;
	background-color: var(--paper-2);
}

/* Login only (registration off) and the password screens: one centred card. */
body.ao-account-page:not(#ao-boost) :is(.ao-account--login-only, .ao-account--single) .ao-account__panel--login {
	flex: 0 1 560px;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

body.ao-account-page:not(#ao-boost) .ao-account--login-only {
	justify-content: center;
}

/* The panel is the card; the form inside is a plain column. */
body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

body.ao-account-page:not(#ao-boost) #customer_login .ao-account__panel :is(p, .form-row, .form-group, .dokan-form-group),
body.ao-account-page:not(#ao-boost) .ao-account--single .ao-account__panel :is(p, .form-row) {
	float: none;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel form > .clear {
	display: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel label:not(.woocommerce-form__label-for-checkbox, .ao-role-card, .radio) {
	display: block;
	margin: 0 0 6px;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .required {
	color: var(--pigment);
	text-decoration: none;
	border: 0;
}

/* Text fields: 48px tall, full width (colours, radius, focus from above). */
/* input:not([type]): Dokan's "State" field has no type attribute. */
body.ao-account-page:not(#ao-boost) .ao-account :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input:not([type]), select) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 14px;
	line-height: 1.4;
}

body.ao-account-page:not(#ao-boost) .ao-account .select2-container {
	width: 100% !important; /* select2 writes an inline px width */
}

body.ao-account-page:not(#ao-boost) .ao-account .select2-container .select2-selection--single {
	box-sizing: border-box;
	height: 48px;
}

body.ao-account-page:not(#ao-boost) .ao-account .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 14px;
	line-height: 46px;
}

body.ao-account-page:not(#ao-boost) .ao-account .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

body.ao-account-page:not(#ao-boost) .ao-account textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
}

/* "Remember me" left, "Forgot your password?" right. */
body.ao-account-page:not(#ao-boost) .ao-account .ao-account__login-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: var(--fs-xs);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 32px;
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-form-login__rememberme input {
	margin: 0;
}

body.ao-account-page:not(#ao-boost) #customer_login form.woocommerce-form-login .ao-account__login-row .woocommerce-LostPassword {
	position: static;
	float: none;
	margin: 0;
	line-height: 1.5;
	text-align: right;
}

body.ao-account-page:not(#ao-boost) .ao-account :is(.woocommerce-LostPassword, .ao-account__back, .woocommerce-privacy-policy-text, .ao-account__greeting) a {
	color: var(--indigo);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.ao-account-page:not(#ao-boost) .ao-account :is(.woocommerce-LostPassword, .ao-account__back, .woocommerce-privacy-policy-text, .ao-account__greeting) a:hover {
	color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__back {
	margin: 0;
	font-size: var(--fs-xs);
}

/* Small print: password-link hint, privacy text. */
body.ao-account-page:not(#ao-boost) .ao-account :is(.ao-account__hint, .woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p) {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--ink-soft);
}

/* --- Buttons ------------------------------------------------------------- */

body.ao-account-page:not(#ao-boost) .ao-account :is(.ao-account__button, .woocommerce-MyAccount-content button.button, .woocommerce-MyAccount-content .woocommerce-Button, .dokan-account-migration-lists .btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 52px;
	margin: 0;
	padding: 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	color: var(--paper);
	background-color: var(--indigo);
	border: 1px solid var(--indigo);
	border-radius: var(--radius-lg);
	cursor: pointer;
}

body.ao-account-page:not(#ao-boost) .ao-account :is(.ao-account__button, .woocommerce-MyAccount-content button.button, .woocommerce-MyAccount-content .woocommerce-Button, .dokan-account-migration-lists .btn):is(:hover, :focus-visible) {
	color: var(--paper);
	background-color: var(--ink);
	border-color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__button--block {
	width: 100%;
}

/* Register: button on the left, as in the mockup. */
body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel--register .ao-account__submit {
	align-self: flex-start;
}

/* --- "I want to" role cards (Dokan customer / vendor) -------------------- */

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-cards {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The grid is a wrapper inside the fieldset: a legend can't take part in a
   fieldset's own grid without becoming a cell. */
body.ao-account-page:not(#ao-boost) .ao-account .ao-role-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

body.ao-account-page:not(#ao-boost) .ao-account :is(.ao-role-cards, form.woocommerce-EditAccountForm fieldset) legend {
	border: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-cards legend {
	margin: 0 0 10px;
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 18px;
	background-color: var(--paper);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card:hover {
	border-color: var(--field-border);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card:has(input:checked) {
	border-color: var(--indigo);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card:has(input:focus-visible) {
	outline: 2px solid var(--indigo);
	outline-offset: 2px;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card input[type="radio"] {
	flex: none;
	margin: 4px 0 0;
	accent-color: var(--indigo);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card__title {
	font-weight: 700;
	color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-role-card__desc {
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--ink-soft);
}

/* Dokan's vendor fields (shown when "Sell my creations" is chosen; Dokan's
   script slides the block open and closed with inline display styles). */
/* "#customer_login .ao-account__panel" to outrank the panel's p/label resets. */
body.ao-account-page:not(#ao-boost) #customer_login .ao-account__panel .show_if_seller > * + *,
body.ao-account-page:not(#ao-boost) #customer_login .ao-account__panel .show_if_seller #dokan-address-fields-wrapper > * + * {
	margin-top: 18px;
}

body.ao-account-page:not(#ao-boost) #customer_login .ao-account__panel .show_if_seller .dokan-hide {
	display: none;
}

/* OceanWP side style: ".woocommerce-form__label .woocommerce-form__input
   { margin: -3px 6px 0 15px !important }" indents the Remember-me box. */
body.ao-account-page:not(#ao-boost) #customer_login .woocommerce-form-login__rememberme .woocommerce-form__input {
	margin: 0 !important;
}

body.ao-account-page:not(#ao-boost) .ao-account .show_if_seller :is(.split-row, .dokan-from-group) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px 12px;
	margin: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .show_if_seller :is(.dokan-w5, .dokan-w6, .dokan-left, .dokan-right-margin-30) {
	float: none;
	width: auto;
	margin: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .show_if_seller :is(.dokan-clearfix, .dokan-hide) {
	display: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .show_if_seller #dokan-address-fields-wrapper > * + * {
	margin-top: 18px;
}

body.ao-account-page:not(#ao-boost) .ao-account .show_if_seller :is(.pull-left, .pull-right) {
	float: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .show_if_seller small {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--muted);
	overflow-wrap: anywhere;
}

body.ao-account-page:not(#ao-boost) .ao-account .g-recaptcha {
	max-width: 100%;
}

/* --- Logged in: heading, menu, content ----------------------------------- */

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-5);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__eyebrow {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pigment);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__logout {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-3);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__logout:is(:hover, :focus-visible) {
	color: var(--ink);
	border-color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__layout {
	display: grid;
	grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
	align-items: start;
	gap: var(--space-5);
}

body.ao-account-page:not(#ao-boost) .ao-account :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: var(--space-1);
	list-style: none;
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px var(--space-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	color: var(--ink-soft);
	border-radius: var(--radius-sm);
}

/* OceanWP's line icons (floated right, 45% opacity) aren't in the design. */
body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul li a::before {
	content: none;
	display: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--ink);
	background-color: var(--paper-2);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--paper);
	background-color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation-link--ao-vendor-dashboard a {
	font-weight: 600;
	color: var(--indigo);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--space-1);
	padding-top: var(--space-1);
	border-top: 1px solid var(--line);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(h2, h3) {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink);
}

/* Dashboard: greeting + cards. */
body.ao-account-page:not(#ao-boost) .ao-account .ao-account__greeting {
	margin: 0 0 var(--space-3);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__card {
	margin: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__card a {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: var(--space-3);
	text-decoration: none;
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__card a:is(:hover, :focus-visible) {
	color: var(--ink);
	border-color: var(--sand);
	box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--ink) 8%, transparent);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__card--ao-vendor-dashboard a {
	background-color: var(--paper-2);
	border-color: var(--sand);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__card-title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.2;
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__card-text {
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--ink-soft);
}

body.ao-account-page:not(#ao-boost) .ao-account .ao-account__card-arrow {
	margin-top: auto;
	padding-top: var(--space-1);
	color: var(--pigment);
}

/* Dokan "Become a Vendor" box (customers). */
body.ao-account-page:not(#ao-boost) .ao-account .dokan-account-migration-lists {
	margin: 0;
	padding: var(--space-3);
	list-style: none;
	background-color: var(--paper-2);
	border-radius: var(--radius);
}

body.ao-account-page:not(#ao-boost) .ao-account .dokan-account-migration-lists li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .dokan-account-migration-lists :is(.dokan-w8, .dokan-w4) {
	float: none;
	width: auto;
}

body.ao-account-page:not(#ao-boost) .ao-account .dokan-account-migration-lists p {
	margin: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .dokan-account-migration-lists .dokan-clearfix {
	display: none;
}

/* Orders and order tables. */
body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 var(--space-3);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table :is(th, td) {
	padding: 12px var(--space-2);
	vertical-align: middle;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table td a:not(.button) {
	color: var(--indigo);
}

/* Row actions (View, Pay, Cancel): small outlined buttons. */
body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table .button {
	min-height: 36px;
	margin: 2px 4px 2px 0;
	padding: 0 var(--space-2);
	font-size: var(--fs-xs);
	color: var(--ink);
	background-color: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table .button:is(:hover, :focus-visible) {
	color: var(--paper);
	background-color: var(--ink);
	border-color: var(--ink);
}

/* Addresses (overview and order details): cards instead of grey boxes. */
body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-Addresses, .woocommerce-columns--addresses) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-Addresses, .woocommerce-columns--addresses)::before,
body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-Addresses, .woocommerce-columns--addresses)::after {
	content: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-Address, .woocommerce-column) {
	float: none;
	width: auto;
	margin: 0;
	padding: var(--space-3);
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content .woocommerce-Address .title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-2);
	margin: 0 0 var(--space-2);
	padding: 0;
	background: none;
	border: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content .woocommerce-Address .title :is(h2, h3) {
	margin: 0;
	font-size: var(--fs-md);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content .woocommerce-Address .title a {
	position: static;
	padding: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--indigo);
	background: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-Address, .woocommerce-column) address {
	margin: 0;
	padding: 0;
	font-style: normal;
	line-height: 1.6;
	color: var(--ink-soft);
	background: none;
	border: 0;
}

/* Edit address / account details: two columns, full rows for wide fields;
   one column on phones. */
body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-address-fields__field-wrapper, form.woocommerce-EditAccountForm) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px var(--space-2);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-address-fields__field-wrapper, form.woocommerce-EditAccountForm) > * {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-address-fields__field-wrapper, form.woocommerce-EditAccountForm) > .form-row-first {
	grid-column: 1;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-address-fields__field-wrapper, form.woocommerce-EditAccountForm) > .form-row-last {
	grid-column: 2;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .clear {
	display: none;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-address-fields, form.woocommerce-EditAccountForm) label {
	display: block;
	margin: 0 0 6px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content .woocommerce-address-fields > p {
	margin: var(--space-3) 0 0;
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset {
	margin: var(--space-1) 0 0;
	padding: var(--space-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset legend {
	padding: 0 var(--space-1);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset > p {
	margin: 0 0 var(--space-2);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content #account_display_name_description {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-xs);
	color: var(--muted);
}

body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-password-strength {
	margin-top: var(--space-1);
	padding: 6px 12px;
	font-size: var(--fs-xs);
	border-radius: var(--radius-sm);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 959px) {
	body.ao-account-page:not(#ao-boost) #content-wrap {
		padding-top: var(--space-4);
		padding-bottom: var(--space-8);
	}

	body.ao-account-page:not(#ao-boost) .ao-account .ao-account__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3);
	}

	/* Menu becomes a row of scrollable chips. */
	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		gap: var(--space-1);
		overflow-x: auto;
		padding: 0 0 4px;
		background: none;
		border: 0;
		border-radius: 0;
		scrollbar-width: thin;
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation ul li a {
		white-space: nowrap;
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

@media (max-width: 767px) {
	/* Order tables: one card per row, labels from WooCommerce's data-title. */
	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none;
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table_responsive,
	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table_responsive :is(tbody, tr) {
		display: block;
		border: 0;
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table_responsive tr {
		margin: 0 0 var(--space-2);
		padding: var(--space-1) var(--space-2);
		border: 1px solid var(--line);
		border-radius: var(--radius);
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table_responsive :is(td, th) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-1);
		padding: var(--space-1) 0;
		text-align: right;
		border: 0;
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content table.shop_table_responsive td[data-title]::before {
		content: attr(data-title);
		font-weight: 600;
		text-align: left;
		color: var(--ink);
	}
}

@media (max-width: 599px) {
	body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel {
		padding: var(--space-3);
		border-radius: var(--radius);
	}

	body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel--register .ao-account__submit {
		align-self: stretch;
	}

	body.ao-account-page:not(#ao-boost) .ao-account .ao-account__panel--register .ao-account__button {
		width: 100%;
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-address-fields__field-wrapper, form.woocommerce-EditAccountForm) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ao-account-page:not(#ao-boost) .ao-account .woocommerce-MyAccount-content :is(.woocommerce-address-fields__field-wrapper, form.woocommerce-EditAccountForm) > :is(.form-row-first, .form-row-last) {
		grid-column: 1;
	}
}

/* ==========================================================================
   Gallery page (/gallery/, page 837): Elementor loop-item template 1599
   The template's own styles (saved in the DB, same on staging and live) give
   each card an Accent background (= ochre via tokens.css), white Questrial
   uppercase text with 2-15px letter-spacing and 565px-tall images. Restyled
   here to match the /shop/ cards. Element ids (Elementor data-id):
   7f92a3d6 card, 2d53b15a image, 5548396e info box, 5822ce53 title,
   2dac954 price, 2cd10fd add to cart, 42108802 badge (unused today).
   Rollback: delete this section.
   ========================================================================== */

/* Space between the cards (the loop grid has no gap set) */
body:not(#ao-boost) .elementor-loop-container:has(> .elementor-1599) {
	--grid-column-gap: var(--space-3);
	--grid-row-gap: var(--space-3);
	column-gap: var(--space-3);
	row-gap: var(--space-3);
}

/* The Loop Grid has Masonry on: Elementor's script pulls rows 2+ up with an
   inline margin-top equal to the row gap, which swallows the gap above. All
   cards are the same height, so masonry isn't needed; !important beats the
   inline style. */
body:not(#ao-boost) .elementor-loop-container:has(> .elementor-1599) > .e-loop-item {
	margin-top: 0 !important;
}

/* Card */
body:not(#ao-boost) .elementor-1599 .elementor-element-7f92a3d6 {
	overflow: hidden;
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body:not(#ao-boost) .elementor-1599 .elementor-element-7f92a3d6:hover {
	border-color: var(--sand);
	box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Image: square like the shop cards, no Accent behind it */
body:not(#ao-boost) .elementor-1599 .elementor-element-2d53b15a > .elementor-widget-container {
	background-color: transparent;
}

body:not(#ao-boost) .elementor-1599 .elementor-element-2d53b15a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Info box: paper instead of Accent, no hover overlay */
body:not(#ao-boost) .elementor-1599 .elementor-element-5548396e,
body:not(#ao-boost) .elementor-1599 .elementor-element-5548396e:not(.elementor-motion-effects-element-type-background),
body:not(#ao-boost) .elementor-1599 .elementor-element-5548396e > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	--padding-top: var(--space-2);
	--padding-bottom: var(--space-2);
	--padding-left: var(--space-2);
	--padding-right: var(--space-2);
	--flex-direction: column;
	--flex-wrap: nowrap;
	--justify-content: flex-start;
	--align-items: flex-start;
	--row-gap: var(--space-1);
	--column-gap: var(--space-2);
	--gap: var(--space-1) var(--space-2);
	flex-grow: 1;
	background-color: var(--paper);
}

/* OceanWP's single-product rules also hit these cards (each loop item is a
   div.product): p.price gets a 20px top margin, form.cart gets 20px padding,
   a 20px margin and top/bottom borders (the thin lines under price/button). */
body:not(#ao-boost) .elementor-1599 .elementor-element-2dac954 p.price,
body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd form.cart {
	margin: 0;
	padding: 0;
	border: 0;
}

body:not(#ao-boost) .elementor-1599 .elementor-element-5822ce53 .elementor-heading-title {
	margin: 0;
}

/* Button sits at the bottom, so cards in a row line up */
body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd {
	margin-top: auto;
	padding-top: var(--space-1);
}

body:not(#ao-boost) .elementor-1599 .elementor-element-5548396e:hover {
	--overlay-opacity: 0;
}

/* Title */
body:not(#ao-boost) .elementor-1599 .elementor-element-5822ce53 > .elementor-widget-container {
	margin: 0;
}

body:not(#ao-boost) .elementor-1599 .elementor-element-5822ce53 .elementor-heading-title,
body:not(#ao-boost) .elementor-1599 .elementor-element-5822ce53 .elementor-heading-title a {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--ink);
}

/* Price */
body:not(#ao-boost) .elementor-1599 .elementor-element-2dac954 .price,
body:not(#ao-boost) .elementor-1599 .elementor-element-2dac954 .price ins {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

body:not(#ao-boost) .elementor-1599 .elementor-element-2dac954 .price del {
	color: var(--muted);
	font-weight: 400;
}

/* Add to cart */
body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd .button,
body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd button {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	padding: 10px 18px;
	color: var(--paper);
	background-color: var(--pigment);
	border: 0;
	border-radius: var(--radius-sm);
}

body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd .button:hover,
body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd button:hover,
body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd .button:focus-visible {
	color: var(--paper);
	background-color: #8A3B22;
}

body:not(#ao-boost) .elementor-1599 .elementor-element-2cd10fd .added_to_cart {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: 0;
	text-transform: none;
	color: var(--pigment);
}

/* Same sizes on tablet and phone (the template has its own per-breakpoint
   sizes and letter-spacing; these rules outrank them at every width) */
@media (max-width: 767px) {
	body:not(#ao-boost) .elementor-1599 .elementor-element-5822ce53 .elementor-heading-title {
		font-size: 20px;
	}
}

/* ==========================================================================
   Empty category: maker invitation (product category archives with no
   products; markup from artorganic_maker_invite_html() in functions.php).
   Button = the homepage's .ao-btn--outline ("Open your shop", home.css).
   Rollback: delete this section.
   ========================================================================== */

body:not(#ao-boost) .ao-maker-invite {
	max-width: 640px;
	margin: var(--space-4) auto var(--space-8);
	padding: var(--space-8) var(--space-4);
	text-align: center;
	background-color: color-mix(in srgb, var(--sand) 25%, var(--paper));
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

body:not(#ao-boost) .ao-maker-invite__icon {
	display: block;
	margin: 0 auto var(--space-2);
	color: var(--pigment);
}

body:not(#ao-boost) .ao-maker-invite__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

body:not(#ao-boost) .ao-maker-invite__text {
	max-width: 46ch;
	margin: 0 auto var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--ink-soft);
}

body:not(#ao-boost) .ao-maker-invite .ao-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 1.5px solid var(--indigo);
	border-radius: var(--radius-lg);
	background-color: transparent;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--indigo);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body:not(#ao-boost) .ao-maker-invite .ao-btn:is(:hover, :focus-visible) {
	background-color: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

@media (max-width: 480px) {
	body:not(#ao-boost) .ao-maker-invite {
		padding: var(--space-6) var(--space-3);
	}

	body:not(#ao-boost) .ao-maker-invite__title {
		font-size: var(--fs-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	body:not(#ao-boost) .ao-maker-invite .ao-btn {
		transition: none;
	}
}